ss3 UI

[matt clegg]

Great,

And for anyone on else this thread that is vaguely interested in the UI for ss3; could you complete a small usability test?

http://silverstripe.me/usability/

?

Im basically asking some 'non-silverstripe users' to test ss2.4 vs ss3 to find which is easier / quicker to learn / use. If I have some people who are familiar with ss2.4 complete the test too then that would be nice.

Thanks,

Matt Clegg

On Tue, Dec 6, 2011 at 5:45 PM, Zauberfisch <ad...@zauberfisch.at> wrote:

sure, go ahead, you can do what ever you want there, just don't use it for bad things (:

--
You received this message because you are subscribed to the Google Groups "SilverStripe Core Development" group.

To view this discussion on the web visit https://groups.google.com/d/msg/silverstripe-dev/-/SfmrojHK1xUJ.

To post to this group, send email to silverst...@googlegroups.com.
To unsubscribe from this group, send email to silverstripe-d...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/silverstripe-dev?hl=en.

[Hamish Friedlander]

Hi Matt,

Interesting. We haven't yet started scheduling our internal UX testing, although we are planning on having some after the beta is released.

What are you thinking will be the public outcome of this - a report, some feature commits, or something else? I'd be interested in seeing the results (in addition to participant selection criteria & statistics), and I suspect Ingo & Felipe would be too.

If you're looking to do a lot of feature dev it'd be worth discussing it with Ingo, Felipe and I prior to putting too much time in to make sure any work is merge-able into 3.

Hamish Friedlander

[Pete Bacon Darwin]

It took the UX test and this has been a real eye opener for me with
regards to the usability of V3.

While I appreciate that it is still in Alpha I am very concerned over
how the backend seems to have lost some of its intuitive feel. I
found it difficult to navigate around with the page tree not visible
when working on pages, I was confused by the visual hierarchy of the
left panel and I did not find the preview view at all helpful to the
tasks I was trying to follow.

While v2 has its problems I feel that v3 is currently taking a step in
the wrong direction with regards simplicity and intuitive
administration.

The ideas that Marcus, Freddy and Felippe put forward in a previous
post (http://groups.google.com/group/silverstripe-dev/browse_thread/
thread/a923fa396fd6cf49) seemed very practical and essential to make
the CMS usable for me. I was quite concerned that Ingo said that what
appeared to be fairly superficial changes the UI - moving some buttons
around - would require large amounts of work! How decoupled is the
visual interface of the CMS? How easy would it be for a third party
to re-skin the whole CMS if they wanted?

Pete

[matt clegg]

Thanks for taking both tests Pete. Your so far one of the quickest to complete the ss2 test.

Your not the first person to spend a few minutes being baffled by the landing page on ss3. I think Uncle Cheese had mentioned earlier about a 'dashboard' that seems like it might be useful (from the results so far).

@all For anyone not already done so there is still time to take the test; http://silverstripe.me/participation/

Il be publishing the full results soon.

Matt

[aram balakjian]

I have to agree with Pete, having just completed the test I found it really hard to use at almost every stage.

I never knew where I was or what I was editing, the preview function seemed to confuse things and there seemed to be a lot of ambiguity around. A long way from the 'pick up and go' of SS2.

To be honest I don't think I would even attempt to explain it to some of our clients, I'd sooner leave them on 2.4...

Aram

[UndefinedOffset]

I've played a bit with SilverStripe 3.0 and I have to agree with the
comments about the Edit Page/Page Tree missing. One fix maybe to have
the Pages section at the top of the sidebar and have it open by
default. Then when you select a page from the tree it switches to the
Edit Page view/section. That may help with some of the initial
confusion.

On Dec 7, 9:16 am, aram balakjian <arambalakj...@gmail.com> wrote:
> I have to agree with Pete, having just completed the test I found it really
> hard to use at almost every stage.
>
> I never knew where I was or what I was editing, the preview function seemed
> to confuse things and there seemed to be a lot of ambiguity around. A long
> way from the 'pick up and go' of SS2.
>
> To be honest I don't think I would even attempt to explain it to some of
> our clients, I'd sooner leave them on 2.4...
>
> Aram
>

> On 7 December 2011 12:35, matt clegg <cleggm...@gmail.com> wrote:
>
>
>
>
>
>
>
> > Thanks for taking both tests Pete. Your so far one of the quickest to
> > complete the ss2 test.
>
> > Your not the first person to spend a few minutes being baffled by the
> > landing page on ss3. I think Uncle Cheese had mentioned earlier about a
> > 'dashboard' that seems like it might be useful (from the results so far).
>
> > @all For anyone not already done so there is still time to take the test;
> >http://silverstripe.me/participation/
>
> > Il be publishing the full results soon.
>
> > Matt
>

> > On Wed, Dec 7, 2011 at 12:12 PM, Pete Bacon Darwin <bacondar...@gmail.com>wrote:
>
> >> It took the UX test and this has been a real eye opener for me with
> >> regards to the usability of V3.
>
> >> While I appreciate that it is still in Alpha I am very concerned over
> >> how the backend seems to have lost some of its intuitive feel.  I
> >> found it difficult to navigate around with the page tree not visible
> >> when working on pages, I was confused by the visual hierarchy of the
> >> left panel and I did not find the preview view at all helpful to the
> >> tasks I was trying to follow.
>
> >> While v2 has its problems I feel that v3 is currently taking a step in
> >> the wrong direction with regards simplicity and intuitive
> >> administration.
>
> >> The ideas that Marcus, Freddy and Felippe put forward in a previous
> >> post (http://groups.google.com/group/silverstripe-dev/browse_thread/

> >> thread/a923fa396fd6cf49<http://groups.google.com/group/silverstripe-dev/browse_thread/thread/...>)

[Mike Andrewartha]

At the moment the tree and content areas are disjointed, making it
difficult to navigate through the pages quickly. One solution could be
to use something similar to chromes advanced settings layout (which
does look similar to the way ss3 is set up at the moment...).

I'm using Windows chrome v15. When clicking on each option button on
the first layer (for example 'content settings...'), a page overlays
the first level but leaves a bit of space so you can see the previous
level. Then when you click on the gap where the previous level shows,
you go back to the previous screen. Simple and looks cool.

Not sure if functionally this would be possible but it is well worth a
look into.

Mike.

[Richard Rudy]

I do like this ux pattern, it may be very useful when using the nested data object manager. It's probably one of the better solutions I've seen in this discussion.

Richard Rudy
Design+Awesome
http://designplusawesome.com
@thezenmonkey
289.339.8944

[Hamish Friedlander]

We're aware that some people are unhappy with the new UI in SS3. We are already planning on making further improvements - in particular, adding a navigation-only tree on the side of the page edit form, moving some buttons around, and some improvements to the preview panel including getting it to actually work - and I'm interested in seeing the results of this UX testing to spot other problem areas, although we're at least as interested in how new users approach SS3 as how existing experienced 2.4 users do.

All these planned changes are smaller changes or tweaks though. Even if there was consensus on a better UI, we unfortunately neither have resource or time for any further major refactoring of CMS layout or navigation. 

There are good reasons which we've already covered fairly comprehensively on this list for separating the tree organisation from the edit panels. The 2.4 interface becomes effectively unusable on very large sites, which has become a serious issue for us. Some of the decisions do have the trade-off of making smaller sites slightly less intuitive to edit. That's an unfortunate but necessary result of SilverStripe becoming usable over a wider range of problems. All of the people some of the time, etc.

If you are particularly worried about the direction the UI is heading, there are plenty of constructive things you can do. We're always looking for dedicated developer resource - even if not specifically UI focused, taking some pressure of the internal team would let us focus on the UI more. Suggestions, and especially mockups using the assets at https://github.com/silverstripe/silverstripe-design/tree/master/Design, of smaller changes that could help navigation are always useful - even if ultimately we decide we can't implement it prior to the final SS3 release, we're not planning on freezing the UI in stone once 3.0 is out. Also there's been several suggestions of a module that restores the 2.4 style CMS on SS3 framework, and once the beta is released I'd love to see a community member step up and take on management of this.

Hamish Friedlander

[Nicolaas Thiemen Francken - Sunny Side Up]

Hi Hamish

Would it be possible for you to present https://github.com/silverstripe/silverstripe-design/tree/master/Design in a way that is easier to comment on the designs? A lot of the comments on the designs are currently this this discussion thread and in the current stage of the 3.0 process they would be much better if they sat underneath each design so people know what comments have been made already with the ability to add their own?

Is that an idea?

Nicolaas

[Sam Minnée]

GitHub already allows this.

--

[Nicolaas Thiemen Francken - Sunny Side Up]

"I have to agree with Pete, having just completed the test I found it really hard to use at almost every stage.

I never knew where I was or what I was editing, the preview function seemed to confuse things and there seemed to be a lot of ambiguity around. A long way from the 'pick up and go' of SS2.

To be honest I don't think I would even attempt to explain it to some of our clients, I'd sooner leave them on 2.4..."

When thisis  written by one of the most respected member of the Silverstripe Community then we have work to do. For me, as for most of you, it is super important that 3.0 is going to be a world-class, award winning solution.  Right now, just from what I read, we still have a long way to go. 

What also worried me was Ingo's recent reply to some of Felipe's suggestions saying that the development team could not spend two additional days fixing a major problem - this might be true, but if this means that no-one is going to switch to 3.0 because it actually does not work as well as 2.4 then we need to find a way to find those two additional days to make it the best CMS in the world - something that is so dear to all of us.  

If Silverstripe Ltd provides a list of clear, well-defined tasks that accomplished within about an hour or two then I am sure a lot of developers will put their name next to one or two of the items. I definitely will.  If we have thirty developers doing so then we have sixty development hours.  That will be a big help. Furthermore, once people have made a contribution it will be much more likely that they will contribute again. 

Sam, we may get more comments, and it will be easier to review comments, if we commenting system that is easier to use (like the one provided with Silverstripe). 

Nicolaas

[Nicolaas Thiemen Francken - Sunny Side Up]

ok, very stupid question -.... but when I look here: https://github.com/silverstripe/silverstripe-design/blob/master/Design/ss3-ui_Sitetree+content%20copy.jpg - then how do I comment (I am logged in). 

[Will Rossiter]

You have to comment on the commit from the looks of it. Kinda just as ineffective as the google group IMHO.

- https://github.com/silverstripe/silverstripe-design/commit/1d5228020789b450a2664daee8e940d1cb9d5a66

On 8/12/2011, at 7:30 PM, Nicolaas Thiemen Francken - Sunny Side Up wrote:

https://github.com/silverstripe/silverstripe-design/blob/master/Design/ss3-ui_Sitetree+content%20copy.jpg

[Nicolaas Thiemen Francken - Sunny Side Up]

On 8 December 2011 14:44, Will Rossiter <will.r...@gmail.com> wrote:

You have to comment on the commit from the looks of it. Kinda just as ineffective as the google group IMHO.

- https://github.com/silverstripe/silverstripe-design/commit/1d5228020789b450a2664daee8e940d1cb9d5a66

Thanks Will. 

Problem is, to find the exact commit of an image you want to comment on is still very tricky.

Shall I create a website with all the designs and the standard SS commenting system?  Would that help?

Nicolaas

[Will Rossiter]

GitHub wiki page on the SilverStripe designs project perhaps?

[Sam Minnée]

> Shall I create a website with all the designs and the standard SS
> commenting system?  Would that help?

Honestly, I don't think that what we're suffering from here is a lack
of feedback, especially not on the designs that have been around for 6
months or so. If you think something can be improved, write a patch.
If you have a question before starting a patch, ask on the list. If
you're wanting to add your 2 cents, post to the relevant thread, but
be aware that coding effort is really the blocker here, and that most
of the issues with the current UI are known.

[Frank Mullenger]

For what its worth I really like the new designs, the look and feel is a big improvement imo. The preview button I quite like, its snappy to load and clear to change between draft/published preview and go back to editing.

There seems to be a fair bit of extra functionality added to the site tree, sounds like this was intended to accommodate sites with larger site trees which seems like a good idea to me. As long as it is really snappy to load the site tree, and the site tree is only a click away (or the back button away) I don't see it as a deal breaker.

Personally I see myself using it by viewing the site tree, selecting a page to edit, edit the page, hit back button, choose another page, etc. 

So I like the new site tree, I think we should give it a chance. Rather than sink 2 days dev time into changing it I would personally rather see that effort go into something like upgrading form validation. Although a navigation only site tree that pops out when you're editing a page might be nice for small/medium sites.

tl;dr I like the new site tree :-)

[aram balakjian]

Just to elaborate, below are more detailed descriptions of the problems experienced. I know some of it is revisiting things that have already been covered, but I thought I'd get it all down.

Also just to say that I'm not trying to put a downer on the great work that has already been done, I love SilverStripe as much as ever and am still massively excited by SS3 :)

1. Knowing where you are - The best part of the SS UI has always been the site tree on one side and the content editing on the other. You always know where you are and what you are editing and can see where to go next. This is totally lost in the new UI, I had no idea if the page I was editing was actually the one I wanted to edit, because once I had clicked on an item in the tree I am then taken away from that view. I know I clicked it, but I have no way of putting my mind to rest that the page in front of me is the one wanted.

Another example of when this is a problem is creating pages. You create a page and are instantly taken to edit it, never confirming that it was placed where you wanted it to be placed. So if you did make a mistake with it's placement, you don't find out until you go to view it on the site, then you have to go back to pages, reorder it, then go back to edit, save it then go and finally view it. By this time you have been in 7 different 'areas' (Pages(tree)->addPage->EditPage->Preview->EditPage->Pages(tree)->EditPage). Compare this to 2.4 which would be as simple as click to create the page, notice immediately that it is in the wrong place, drag and drop it, then continue editing never having left the first area.

I know that the primary reason to remove the site tree was to reduce the number of actions visible on a page, which is arguably better for larger sites, but actually for me this has made editing content a much less certain process, constantly wondering 'am I doing what I think I am doing?'. In SS2, this was never a question.

2. Preview - I never quite understood the point in this feature, and having now used it (although it doesn't seem to work fully yet) I still don't get it. Surely the point in Draft/Published workflow is to allow you to view a page before you publish it, to 'Preview' it. I know that a lot of our clients don't even bother with this, but it is definately very useful when you do use it, but now there is a 3rd option which seems to do exactly the same thing, only without saving? To me this adds confusion and very little, if anything to the workflow. There is also the fact that it makes me nervous leaving the editing area without saving, there is plenty to go wrong and if for whatever reason your browser window reloads, that's all your editing gone (And trust me some of our clients will find a way to reload their browser window at the wrong time!). Perhaps if it was a shortcut to saving as draft and viewing it that would make more sense, but as it is  it seems to only add confusion.

3. Vertical Menus - this one might be personal preference, but it seems limiting to have everything down the left side and nothing along the top and means that you potentially end up with the same problem as currently exists in that as you add more model admin interfaces the main menu get's ridiculously long. To me it made sense having core items (Pages,Files,SecurityReports,Help) in a top horizontal menu that cannot be added to, and then make more of sub menus for each section. 

To me it would have made more sense to change 'Pages' to 'Content' and organise this section like the current SS3 design is, with 'Settings', 'Pages', 'MyModelAdmin' etc. in that side menu. I have attached a mockup of what I mean, I know it's probably too late to consider changing (and I am sure there would be situations where it would be less usable this way), but thought I'd illustrate what I meant :)

Aram

[Martine]

Unfortunately this is often the way it goes: as an intended end-user
you can happily look at designs for months on end, and still not
really grasp the functionality and feel, until you get to work with
the real thing. I too just did the trial - lots to think about! - and
although running into a couple of errors didn't help, I mostly agree
with Aram, on the 'not knowing where you are and what you just did'
bit. Besides that, it seems switching from area to area all the time
didn't actually add to the speed...

I too have been an avid SilverStripe supporter for a couple of years
now, and I'm absolutely planning on staying just that :). In some ways
I feel sort of 'guilty' mentioning these things this late in the
development process. On the other hand, people have been asking about
the SiteTree on and off from the beginning. There were some
mentionings of it maybe getting into the final design (as an extra)
and I guess I just thought, since others already went there, I
shouldn't add to that list, without having anything extra to add.

For me it's clear now: I'm definitely absolutely going to miss the SS2
version of the SiteTree. Of course I do understand the issues with
large sites, but as I mostly develop small to medium sites, for me
that was never really an issue...

Now I'm just curious just how many other users will really have issue
with it as well - if it's just a small group, then well... But even
then, could creating/optionally adding it as a module possibly be a
community effort? How hard would that be?

[Nicolaas Thiemen Francken - Sunny Side Up]

Is the sitetree such a bad idea for a big site?  If you think about something like a file browser then a tree like system seems to work pretty well with 1,000+ files.  

If you make the sitetree fast (which I am sure can be done - I remember Ingo posted some amazing stuff on hierarchy management) and you exclude certain page types (such as blogs and products) then I dont see any reason why a site tree would not work with super large sites. 

[Sam Minnée]

I'm pretty sure that we've said this *several* times before, but we're going to add the site tree back in to the left of the content, but rather than being a full functioned tree for doing batch actions, reorganisation, etc, it will just be for navigation.

If anyone wants to submit a patch for this, it would be welcome.  Otherwise, we'll let you all know when we've got it in there.

On 9 December 2011 06:44, Nicolaas Thiemen Francken - Sunny Side Up <ma...@sunnysideup.co.nz> wrote:

Is the sitetree such a bad idea for a big site?  If you think about something like a file browser then a tree like system seems to work pretty well with 1,000+ files.  

If you make the sitetree fast (which I am sure can be done - I remember Ingo posted some amazing stuff on hierarchy management) and you exclude certain page types (such as blogs and products) then I dont see any reason why a site tree would not work with super large sites. 

--

[Sam Minnée]

2. Preview - I never quite understood the point in this feature, and having now used it (although it doesn't seem to work fully yet) I still don't get it.

 - One feature of it that's 99% done (you can enabled it by editing an element width with Firebug) is side by side editing.  Great for big monitors, it lets you see the side and the CMS edit Window side by side.  It's optional, and designed for larger screens.

 - You can navigate around the site and use that to find the page you want to edit, rather than only using the tree.  YES, WE WILL ADD THE TREE IN, TOO.

 - We already have a similar feature in 2.4, in the from of the 'draft' button down the bottom of the toolbar.

 - If you don't understand why you might want to see the content on the site after updating it in the CMS, then I don't know what to say.  It's the single most common use case in SilverStripe.

[Sam Minnée]

<ignore>

 

3. Vertical Menus - this one might be personal preference, but it seems limiting to have everything down the left side and nothing along the top and means that you potentially end up with the same problem as currently exists in that as you add more model admin interfaces the main menu get's ridiculously long. To me it made sense having core items (Pages,Files,SecurityReports,Help) in a top horizontal menu that cannot be added to, and then make more of sub menus for each section. 

</ignore>

Seriously - there's no way we're going to change this now.

[Hamish Friedlander]

Hi Aram,

Thanks for the more detailed feedback. Some notes inline:

1. Knowing where you are - The best part of the SS UI has always been the site tree on one side and the content editing on the other. You always know where you are and what you are editing and can see where to go next. This is totally lost in the new UI, I had no idea if the page I was editing was actually the one I wanted to edit, because once I had clicked on an item in the tree I am then taken away from that view. I know I clicked it, but I have no way of putting my mind to rest that the page in front of me is the one wanted.

As Sam mentioned, we're already planning on putting a "navigation only" SiteTree next to the page edit window, which hopefully will solve this. There'll likely also be some sort of breadcrumb location indicator / navigator even if the navigation SiteTree is disabled.

I know that the primary reason to remove the site tree was to reduce the number of actions visible on a page, which is arguably better for larger sites, but actually for me this has made editing content a much less certain process, constantly wondering 'am I doing what I think I am doing?'. In SS2, this was never a question.

There's lots more reasons that just that. Some of them are

- Navigating & re-organizing the tree in 2.4 is painful because you've got such a small area for the tree. I often find myself "lost" in 2.4 on very large sites, because all you can see is a deeply nested portion with it's container and parents lost off the top or left.

- We're expanding the number of things you can do with the tree and see in the tree view, and that needs more space on the right of the tree

- We wanted to be able to show the tree in a tabular format (for blog posts and such, i.e. https://github.com/silverstripe/silverstripe-design/blob/master/Design/ss3-ui_pages-list-view.jpg), and again that needed more space than is available in 2.4

- We wanted to be able to get from viewing the site in preview mode to the edit panel to make minor changes _fast_, and having to re-load the SiteTree every time is a significant hurdle to that (see below).

 

2. Preview - I never quite understood the point in this feature, and having now used it (although it doesn't seem to work fully yet) I still don't get it.

The preview is in an iframe, and always sits next to the edit panel. You shouldn't ever be able to click on a link anywhere in the CMS or preview that will cause a page refresh that looses any non-saved work (at least not without a pop-up warning).

This is the story:

As a site content editor,

I want to edit a deeply nested page I have found while navigating around my site,

So that I can correct an error on that page

On 2.4 this looks like:

- Start browsing the website

- Navigate around like normal, until you come across the particular page

- Go to /admin (long reload here)

- Find the page again within the SiteTree (on big sites, this can be quite tricky & slow)

- Edit & save it

- Preview the draft either in another tab or window

- Find the tab or window that is the one that happens to contain the admin area (can be tricky if you have more than one admin area tab open)

- Publish it

- Check the live version in another tab or window

On 3.0 our vision is:

- Visit your site and log in. The site detects you are an admin & automatically forwards you to the admin area with the preview panel already open on the same page you logged in from. From your point of view, the only change is that now you have all the admin icons on the left hand side of your website.

- Navigate around like normal, until you come across the particular page. You could potentially log in here if you weren't already, in which case again the only affect is that you see the admin icons on the left hand side.

- Click on the edit page button on the left. The edit page panel pops out almost instantly

- Edit the page

- Preview changes in the preview panel

- Publish changes, preview panel swaps back to published version

In addition to being shorter, this avoids two of the biggest irritations with the 2.4 UI - finding one particular page in the SiteTree, and the impact of hoping in & out of admin.

 

3. Vertical Menus - this one might be personal preference, but it seems limiting to have everything down the left side and nothing along the top and means that you potentially end up with the same problem as currently exists in that as you add more model admin interfaces the main menu get's ridiculously long.

Display ratios are becoming more and more non-square, so trying to keep the interface square doesn't make sense. We can also have a lot more items down the left hand side than across the top because textual labels use space horizontally - although you probably don't want _too_ many items there.

Hamish

[aram balakjian]

Hi Hamish,

Thanks for explaining the preview feature in such depth, it does sounds like a good idea, perhaps it's because I was trying to use it like 2.4 that made me not understand it, but also the fact that when I click preview the changes are not reflected in the previewed site, only when I publish them do they seem to appear. I assume then when finished it will effectively be a shortcut to "save > view draft" in 2.4, which I can definitely see the benefit of. I was under the impression it cached the changes and then previewed them, without saving anything.

I also totally take on board the benefit of having a separate section for a site tree, I wouldn't question this and the design visuals are enough to see the benefits of the extra functionality possible. It was just the lack of knowing where you are when editing that worried me, so once the navigation tree is part of the editing section then I think we will certainly have the best of both worlds (Sorry Sam, I wasn't aware that you had decided to definately add it, I thought it was something on the table but not decided).

Yea for the menus I was really just illustrating my thoughts, not actually expecting them to actually be considered, my main feeling is just that it would be nice to have a main menu as a starting point that didn't get cluttered with Model Admin Interfaces, but it's not the end of the world by any means, perhaps something for a module.

Anyway thanks again for taking the time to respond in so much depth, I am feeling more relaxed now and looking forward to playing with the beta :)

Cheers,

Aram

Your