Substantial design changes just released

77 views
Skip to first unread message

Felipe

unread,
Mar 9, 2011, 11:58:09 PM3/9/11
to silverst...@googlegroups.com
Hi All,
I've just committed to github https://github.com/silverstripe/silverstripe-design/tree/master/Design our latest design release with some substantial changes from the previous one here is a summary:

Changes
- "hi [yourname], logout" - moved to the left navigation
- search became an icon that expands to a seach box when clicked (this gives more space to tabs and remove clutter) - https://github.com/silverstripe/silverstripe-design/blob/master/Design/ss3-ui_files-manager-gallery-collapsed.jpg
- left side panel action changed to a dropdown menu on the top right, we'll expose important actions like add new more on next iterations
- cleaned up the styles on the left nav - less arrows
- new icon style buttons and actions (helps memorize the interface)

New
- Filter bar is also a new addition on the same link above
- File edit view - https://github.com/silverstripe/silverstripe-design/blob/master/Design/ss3-ui_files-manager-file-edit.jpg - it still need some work but the basics are there

any thoughts?

Cheers
Felipe

Ingo Schommer

unread,
Mar 10, 2011, 1:35:05 AM3/10/11
to silverst...@googlegroups.com
Hey Felipe, 

Awesome stuff - your "design update" posts always feel like little surprise gifts waiting to be unwrapped :)
As usual, I'm asking lots of nitpicky questions - no critique, but maybe you want to start
tracking these outstanding work items or unresolved issues somewhere thats visible to the community?
Perhaps a wiki page on open.silverstripe.org?

On Thursday, March 10, 2011 5:58:09 PM UTC+13, Felipe wrote:
Hi All,
I've just committed to github https://github.com/silverstripe/silverstripe-design/tree/master/Design our latest design release with some substantial changes from the previous one here is a summary:

Changes
- "hi [yourname], logout" - moved to the left navigation
- search became an icon that expands to a seach box when clicked (this gives more space to tabs and remove clutter) - https://github.com/silverstripe/silverstripe-design/blob/master/Design/ss3-ui_files-manager-gallery-collapsed.jpg
While I like a global search panel at the top, we have to cater for multiple DataGrid UI elements on a form - how would that look?
- left side panel action changed to a dropdown menu on the top right, we'll expose important actions like add new more on next iterations
- cleaned up the styles on the left nav - less arrows
- new icon style buttons and actions (helps memorize the interface)
Good idea, I think the "move to trash" and "save and publish" ones work really well.
The "unpublish" and "save draft" ones are a bit weird - are you still looking for more expressive icons? 
Very cool! Very small issue: As the "actions" panel belongs to the whole DataGrid container, we'd have to do a one-off styling to get it floating besides the "all files/about us" label (which is outside of the container).
- Filter bar is also a new addition on the same link above
Why would you want to collapse each filter panel individually? In terms of saving height in the filter bar, I think we have to deal with reality and allow scroll bars (but try to avoid them in the standard configuration). 
I like the contextual menus on tree nodes in ss3-ui_pages-tree-view-complex.jpg.
Not sure about the "delete selected" option, as I'd assume that any context action
triggered on a node only affects this node (and maybe its children), but not other sibling/parent nodes.
I assume "delete selected" in the context menu would be the same as "move to trash" in the "actions" panel?

While I'm on the tree: We'll also need some UI elements for drag'n'drop.
First, what the drag handle actually looks like (jstree.com shows the title of the dragged node without icon or background by default).
Also, on ss3-ui_pages-tree-view-complex.jpg: we need drag states indicating if a drop target is valid, see "reorder only demo" on http://www.jstree.com/documentation/dnd.
jstree doesn't allow dragndrop and multi selection at the same time, and even if it would it becomes quite difficult to visualize with multiple nodes.
I guess the two checkboxes will have to be radiobuttons (with a third state "default" to choose neither?).
 
Note about ss3-ui_editpage-content-complex.jpg: The "upload an image" panel still needs a state where a file has been uploaded, with image preview or file icon. Also needs a "replace file" and "remove file" method (with confirmation dialog).

OK, enough nitpicking - overall it looks bloody fantastic! :)
Ingo
 
any thoughts?

Cheers
Felipe

Felipe

unread,
Mar 16, 2011, 5:28:22 PM3/16/11
to silverst...@googlegroups.com


On Thursday, March 10, 2011 7:35:05 PM UTC+13, Ingo Schommer wrote:
Hey Felipe, 

Awesome stuff - your "design update" posts always feel like little surprise gifts waiting to be unwrapped :)
As usual, I'm asking lots of nitpicky questions - no critique, but maybe you want to start
tracking these outstanding work items or unresolved issues somewhere thats visible to the community?
Perhaps a wiki page on open.silverstripe.org?

On Thursday, March 10, 2011 5:58:09 PM UTC+13, Felipe wrote:
Hi All,
I've just committed to github https://github.com/silverstripe/silverstripe-design/tree/master/Design our latest design release with some substantial changes from the previous one here is a summary:

Changes
- "hi [yourname], logout" - moved to the left navigation
- search became an icon that expands to a seach box when clicked (this gives more space to tabs and remove clutter) - https://github.com/silverstripe/silverstripe-design/blob/master/Design/ss3-ui_files-manager-gallery-collapsed.jpg
While I like a global search panel at the top, we have to cater for multiple DataGrid UI elements on a form - how would that look?
I'll talk to you to get more details on that 
- left side panel action changed to a dropdown menu on the top right, we'll expose important actions like add new more on next iterations
- cleaned up the styles on the left nav - less arrows
- new icon style buttons and actions (helps memorize the interface)
Good idea, I think the "move to trash" and "save and publish" ones work really well.
The "unpublish" and "save draft" ones are a bit weird - are you still looking for more expressive icons? 
it still work in progress - but if you have sugestions we're using http://fugue-icons-src.googlecode.com/svn/trunk/all-preview.png - plenty of options here heheh 
 


New
Very cool! Very small issue: As the "actions" panel belongs to the whole DataGrid container, we'd have to do a one-off styling to get it floating besides the "all files/about us" label (which is outside of the container).
nothing that a good CSS can't resolve 
- Filter bar is also a new addition on the same link above
Why would you want to collapse each filter panel individually? In terms of saving height in the filter bar, I think we have to deal with reality and allow scroll bars (but try to avoid them in the standard configuration). 
Yeah I agree... too much clutter I'll clean that up and long life to the scrollbars :) 
- File edit view - https://github.com/silverstripe/silverstripe-design/blob/master/Design/ss3-ui_files-manager-file-edit.jpg - it still need some work but the basics are there

I like the contextual menus on tree nodes in ss3-ui_pages-tree-view-complex.jpg.
Not sure about the "delete selected" option, as I'd assume that any context action
triggered on a node only affects this node (and maybe its children), but not other sibling/parent nodes.
I assume "delete selected" in the context menu would be the same as "move to trash" in the "actions" panel?
You're right too much confusion... I'll fix that up for the next iteration
 

While I'm on the tree: We'll also need some UI elements for drag'n'drop.
First, what the drag handle actually looks like (jstree.com shows the title of the dragged node without icon or background by default).
Also, on ss3-ui_pages-tree-view-complex.jpg: we need drag states indicating if a drop target is valid, see "reorder only demo" on http://www.jstree.com/documentation/dnd.
jstree doesn't allow dragndrop and multi selection at the same time, and even if it would it becomes quite difficult to visualize with multiple nodes.
I guess the two checkboxes will have to be radiobuttons (with a third state "default" to choose neither?).

No problem i'll change that  
 
Note about ss3-ui_editpage-content-complex.jpg: The "upload an image" panel still needs a state where a file has been uploaded, with image preview or file icon. Also needs a "replace file" and "remove file" method (with confirmation dialog).
Yep that still pending.. 

Dominik

unread,
Mar 20, 2011, 9:46:12 AM3/20/11
to silverst...@googlegroups.com
On Wednesday, March 16, 2011 10:28:22 PM UTC+1, Felipe wrote:

While I'm on the tree: We'll also need some UI elements for drag'n'drop.
First, what the drag handle actually looks like (jstree.com shows the title of the dragged node without icon or background by default).
Also, on ss3-ui_pages-tree-view-complex.jpg: we need drag states indicating if a drop target is valid, see "reorder only demo" on http://www.jstree.com/documentation/dnd.
jstree doesn't allow dragndrop and multi selection at the same time, and even if it would it becomes quite difficult to visualize with multiple nodes.
I guess the two checkboxes will have to be radiobuttons (with a third state "default" to choose neither?).

No problem i'll change that

A nice usability addition would be to not only show the drop target state while hovering but when the user is in drag state. Why not highlight possible targets or even "lightbox" them (as in grey out everything where you are not allowed to drag to) as soon as the drag state is active. As a user I hate it when I drag something and have to drag it over something before I know whether what I am doing is allowed, after travelling hundred of pixels.
 

Sigurd Magnusson

unread,
Apr 4, 2011, 8:51:41 PM4/4/11
to silverst...@googlegroups.com
Felipe, all fantastic work, and yes I have some minor ideas for improvement:


ss3-ui_content-add-image-from-computer.jpg
  • Nice clean layout, and looking forward to the drag files here function!
  • Should list 'who' uploaded the file. (E.g. "Uploaded: by Sigurd Magnusson on 21 March 2011")
  • It's not clear if you can change the filename, but this is a useful feature, partly for descriptive URLs and for good 'house keeping'. I would have thought a single 'filename/title' field and a 'Alt text' would be sufficient as a default set of text fields associated with an image.
  • Some corporate users like to put Expiry Dates on image, so leave room and/or annotate the screenshot to indicate to the SilverStripe 3 developers that Expiry Dates can be optionally enabled. (It's not used by all customers so should not be on by default)
  • Would "Published on: 0 pages" be a link to list of pages?
  • Folder - is there an option (as currently is the case) to add a new folder here, to streamline the experience. (Could be a link and user is asked in a popup to enter a new name)
  • Add a tickbox 'Allow image to be clicked so users can see a larger version'. This is now normal expectation for most web pages. (Technically, it can do something like set a class on the image, and it is up to the developer to hook in jQuery or whatever is needed here. We have actually begun but I believe not completed, this function, in 2.4.x)
  • It will be good to note to the right of the Dimensions boxes that "(You can also resize the image after you've inserted an image.)" or something to that effect.
ss3-ui_content-add-image-from-web.jpg
  • Love it ... a big fan of this feature. (In time, we can also expand this for such things as Creative Commons Licensed Flickr Image Search.)
  • Add a note "The image will be copied from this location to your website so that it can be stored and resized."

ss3-ui_content-add-image-from-files.jpg
  • As above, but also:
  • "Search by filename" should be "Search by filename or tag"
  • Images are versioned. I.e. you can change the name or crop the photo and be able to return to an older version from a week ago. Interface elements for this need to be designed.
ss3-ui_content-hd-resolution.jpg and ss3-ui_editpage-content.jpg
  • Save Draft and Preview (combine into one "Save and preview" button?)
ss3-ui_dialogs.jpg
  • Enjoy where this is heading, but will defer to community/user feedback on final tone and wording chosen :)
ss3-ui_editpage-content-complex.jpg
  • No changes suggested to what's already on screen, however are you wanting to use this opportunity however to show the intended visual design of type of field available for use by content authors. (E.g. date picker, dropdown, etc, are missing and so how do developers know how to design these interface elements? :)
ss3-ui_editpage-history.jpg
  • Has revert been chosen based on user testing? I expect 'roll back' to be much more widely understood.
  • Why up/down arrows instead of scrollbar for items?
  • Expand "Show unpublished" to "Show unpublished versions"
  • Revert icon is confusing; it looks like refresh. It should be more like a "restore from trash" illustration.
  • Need a link to see an old version as a preview (This is an existing feature). E.g. button next to Revert to this version with the label "Preview this version on your website". (Or are you suggesting we drop this feature?)
ss3-ui_editpage-settings.jpg
  • (Minor: 'allow coments' is mispelt.)
  • Why can author be changed? This should be set by the system automatically as records keeping.
  • Note that 'Date' is not available for all pages, just some like Blog.
ss3-ui_file-uploader.jpg
  • Visual and interaction style is very different to ss3-ui_files-manager-add-files.jpg and this makes it confusing. Why does the user have to learn two different techniques/interfaces? Why can't they share more style/aesthetic in common?
  • Other points;
    • You can't replace an image by dragging a new image on; I suggest you resolve this.
    • What happens when you click the 'gear' icon on the Gallery View?
    • How do you set metadata on an image uploaded in this way? There are good metadata controls when uploading an image into the rich text editor
ss3-ui_files-manager-add-files.jpg
  • assume this is identical to ss3-ui_content-add-image-from-computer.jpg (so that the resulting PHP/JS code and learning the interface is the same.)
ss3-ui_files-manager-file-edit.jpg
  • How do you review and manage history of this image? (Images are planned to be versioned in SS3.)
  • Should list file size in metadata (e.g. 5 megabytes.)
  • Note my earlier point that some clients will wish to have expiry date set for fields, so ensure there's room for this.
  • Link 'Published on: 0 pages' to report showing which pages.
  • Ability to get URL or link to the image itself.
ss3-ui_files-manager-gallery-view.jpg
  • variety of colours and icons in the Actions Dropdown menu is distracting; simplify the use of styles here?
ss3-ui_files-manager-list-view.jpg
  • Would be useful to add checkbox "[ ] Image used on public site" so that you can safely delete images that are no longer used. Not certain of technical effort here.
ss3-ui_files-manager-tree-view.jpg
  • Add 'download' as an option in the gear menu.
ss3-ui_insert-link.jpg
  • Insert link is very frequently performed. The interaction model for this has changed substantially - are we sure that the new one works better? (I'm happy to have it built in alpha to test this...) Care will be required to ensure this interface can be used very efficiently. (E.g. keyboard shortcuts to open , fast operating javascript. Just sayin')
ss3-ui_model-admin.jpg
  • Missing an 'import' and 'export' button. (Or do you care to show what the Actions are...?)
  • How do items look when they are opened?
ss3-ui_pages-tree-view-simple.jpg, ss3-ui_pages-tree-view-complex.jpg
  • Would be great to import or export a tab-indented structure of the sitemap for bulk entry, or for use with Information Architecture tools such as Treejack. (Can you share what the 'Actions' will be?)
ss3-ui_pages-tree-add-page.jpg
  • How do people open this dialogue?
  • Note that this dialogue subtly changes the notion of adding a page in SilverStripe CMS, but this actually does potentially alter the interaction substantially. Rather than the existing model ('Where do you want to add some content, and I will work out what type of content it should be'), you've made this 'Choose a type of content to add, and I will work out where it should go'. For this reason we need to see the flow of steps entering and exiting this screen to work out how best to perform it. I think there are times when both models make more sense, so perhaps in SS3 we are enabling developers to produce both.
  • Small thing but I always like to look for efficient interfaces: This requires two clicks - type of page and then 'Create'. You could change this so that you each page type is a button, saving a click. (Would still need to be keyboard accessible...)


Cheers,
Sigurd.

Felipe Skroski

unread,
Apr 4, 2011, 10:55:19 PM4/4/11
to silverst...@googlegroups.com, Sigurd Magnusson
Hi Sig,
I've added my comments below

On Tue, Apr 5, 2011 at 12:51 PM, Sigurd Magnusson <sigurdm...@gmail.com> wrote:
Felipe, all fantastic work, and yes I have some minor ideas for improvement:


ss3-ui_content-add-image-from-computer.jpg
  • Nice clean layout, and looking forward to the drag files here function!
  • Should list 'who' uploaded the file. (E.g. "Uploaded: by Sigurd Magnusson on 21 March 2011")
Good idea
  • It's not clear if you can change the filename, but this is a useful feature, partly for descriptive URLs and for good 'house keeping'. I would have thought a single 'filename/title' field and a 'Alt text' would be sufficient as a default set of text fields associated with an image.
we could have another filename field if necessary, not a big deal i think
  • Some corporate users like to put Expiry Dates on image, so leave room and/or annotate the screenshot to indicate to the SilverStripe 3 developers that Expiry Dates can be optionally enabled. (It's not used by all customers so should not be on by default)
These designs are not supposed to represent all the edge cases and exceptions, so the rule is if you need more fields just add them in a logical order...
  • Would "Published on: 0 pages" be a link to list of pages?
it can be
  • Folder - is there an option (as currently is the case) to add a new folder here, to streamline the experience. (Could be a link and user is asked in a popup to enter a new name)
if it's possible it will be under the actions dropdown if is not it won't be there...
  • Add a tickbox 'Allow image to be clicked so users can see a larger version'. This is now normal expectation for most web pages. (Technically, it can do something like set a class on the image, and it is up to the developer to hook in jQuery or whatever is needed here. We have actually begun but I believe not completed, this function, in 2.4.x)
it can be done on the implementation if necessary
  • It will be good to note to the right of the Dimensions boxes that "(You can also resize the image after you've inserted an image.)" or something to that effect.
I prefer not having the text as it's going to bloat the interface and become landscape after few uses, I think is easy enough to figure that out... it's just how word works... anyway we'll test that on the usability tests.
 
ss3-ui_content-add-image-from-web.jpg
  • Love it ... a big fan of this feature. (In time, we can also expand this for such things as Creative Commons Licensed Flickr Image Search.)
  • Add a note "The image will be copied from this location to your website so that it can be stored and resized."
Not sure if it should work this way, as if you update the image on the original source is not going to be updated on the website creating a bit of a maintenance nightmare...
it could be a checkbox and the instructions could be more succinct like "Download to files"

ss3-ui_content-add-image-from-files.jpg
  • As above, but also:
  • "Search by filename" should be "Search by filename or tag"
ok
  • Images are versioned. I.e. you can change the name or crop the photo and be able to return to an older version from a week ago. Interface elements for this need to be designed.
it will be similar to page history
 
ss3-ui_content-hd-resolution.jpg and ss3-ui_editpage-content.jpg
  • Save Draft and Preview (combine into one "Save and preview" button?)
well they're different action you may want to preview without saving...
 
ss3-ui_dialogs.jpg
  • Enjoy where this is heading, but will defer to community/user feedback on final tone and wording chosen :)
ss3-ui_editpage-content-complex.jpg
  • No changes suggested to what's already on screen, however are you wanting to use this opportunity however to show the intended visual design of type of field available for use by content authors. (E.g. date picker, dropdown, etc, are missing and so how do developers know how to design these interface elements? :)
ss3-ui_editpage-history.jpg
  • Has revert been chosen based on user testing? I expect 'roll back' to be much more widely understood.
Has 'roll back' chosen based on user testing?  I expect revert to be much more widely understood. As its used on a lot of different softwares already anyway we'll make usability tests when we have something testable
is they can't understand revert we can change the words
  • Why up/down arrows instead of scrollbar for items?
to jump to different versions without moving your mouse
  • Expand "Show unpublished" to "Show unpublished versions"
Don't need, if you're in the context of versions obviously the only unpublished you can show are versions. Less words = less reading = less confusion = better user experience
  • Revert icon is confusing; it looks like refresh. It should be more like a "restore from trash" illustration.
that's why the word revert is beside it
  • Need a link to see an old version as a preview (This is an existing feature). E.g. button next to Revert to this version with the label "Preview this version on your website". (Or are you suggesting we drop this feature?)
it can be inside the panel beside revert to this version with the title "Preview" that's obvious enough
ss3-ui_editpage-settings.jpg
  • (Minor: 'allow coments' is mispelt.)
ok
  • Why can author be changed? This should be set by the system automatically as records keeping.
I find it particularly useful on wordpress, if this is not available it wont be an open field, this is not the unique representation of this view, it can have endless variations
the idea is to have a framework for it 
  • Note that 'Date' is not available for all pages, just some like Blog.
page settings will give the fields you can change by each pagetype, the framework if quite obvious to follow if you need different fields 
ss3-ui_file-uploader.jpg
  • Visual and interaction style is very different to ss3-ui_files-manager-add-files.jpg and this makes it confusing. Why does the user have to learn two different techniques/interfaces? Why can't they share more style/aesthetic in common?
First the user doesn't need to "learn" different techniques as the interaction models are exact the same (drag and drop or  choose files ) , second it has to be different
as this is a generic component part of the framework tailored for smaller real state implementations (as the other is a full screen implementation that can't be fitted inside a tiny box), the whole interface shares a common aesthetic and feel this one is no different
  • Other points;
    • You can't replace an image by dragging a new image on; I suggest you resolve this. 
it's hard to represent that accurately as there is not enough real state to explore - it can have a dotted line around it but not much more than that
    • What happens when you click the 'gear' icon on the Gallery View?
something similar to when you click the gear on the page tree
    • How do you set metadata on an image uploaded in this way? There are good metadata controls when uploading an image into the rich text editor
there's an edit button for that
ss3-ui_files-manager-add-files.jpg
  • assume this is identical to ss3-ui_content-add-image-from-computer.jpg (so that the resulting PHP/JS code and learning the interface is the same.)
ss3-ui_files-manager-file-edit.jpg
  • How do you review and manage history of this image? (Images are planned to be versioned in SS3.)
link to history + view similar to history
  • Should list file size in metadata (e.g. 5 megabytes.)
ok
  • Note my earlier point that some clients will wish to have expiry date set for fields, so ensure there's room for this. 
ok
  • Link 'Published on: 0 pages' to report showing which pages.
ok
  • Ability to get URL or link to the image itself.
ok
ss3-ui_files-manager-gallery-view.jpg
  • variety of colours and icons in the Actions Dropdown menu is distracting; simplify the use of styles here?
well test that on the usability test
ss3-ui_files-manager-list-view.jpg
  • Would be useful to add checkbox "[ ] Image used on public site" so that you can safely delete images that are no longer used. Not certain of technical effort here.
need devs to say how hard is that...
ss3-ui_files-manager-tree-view.jpg
  • Add 'download' as an option in the gear menu.
options are going to be dynamic depending on the context
 
ss3-ui_insert-link.jpg
  • Insert link is very frequently performed. The interaction model for this has changed substantially - are we sure that the new one works better? (I'm happy to have it built in alpha to test this...) Care will be required to ensure this interface can be used very efficiently. (E.g. keyboard shortcuts to open , fast operating javascript. Just sayin')
its the same as gmail, wordpress, apple mail, firebird, hotmail that's simply the most common implementation if thats difficult everything else is
ss3-ui_model-admin.jpg
  • Missing an 'import' and 'export' button. (Or do you care to show what the Actions are...?)
import and export should be under actions that are dynamic depending on the model you can have different actions (eg. on an e-commerce model you can have a "out-of-stock" action)
  • How do items look when they are opened?
they look like a form fairly close to the forms we're using across the framework - edit image is an example of it
 
ss3-ui_pages-tree-view-simple.jpg, ss3-ui_pages-tree-view-complex.jpg
  • Would be great to import or export a tab-indented structure of the sitemap for bulk entry, or for use with Information Architecture tools such as Treejack. (Can you share what the 'Actions' will be?)
I don't know all the actions as they are dynamic depending on the context, permissions and modules this probably is a good idea for a module, don't think it should be part of the core
ss3-ui_pages-tree-add-page.jpg
  • How do people open this dialogue?
actions-> add child page or gear icon-> add page
  • Note that this dialogue subtly changes the notion of adding a page in SilverStripe CMS, but this actually does potentially alter the interaction substantially. Rather than the existing model ('Where do you want to add some content, and I will work out what type of content it should be'), you've made this 'Choose a type of content to add, and I will work out where it should go'.
Not true, the interaction model of the gear is: where to add your page -> tell me what pagetype you want (the system will recommend one and if there's only one possibility the popup wouldn't show) - if you add via actions without a node being selected the page will be added on the root like the current model
  • For this reason we need to see the flow of steps entering and exiting this screen to work out how best to perform it. I think there are times when both models make more sense, so perhaps in SS3 we are enabling developers to produce both.
the interaction is very simple is one click and a popup not a several step workflow. Well given the separation of saphire and the CMS we're allowing devs to create their own CMS
  • Small thing but I always like to look for efficient interfaces: This requires two clicks - type of page and then 'Create'. You could change this so that you each page type is a button, saving a click. (Would still need to be keyboard accessible...)
it can be but the interface will be bloated with buttons and creating confusion, having action buttons consistently on the same position helps users to find the actions better. I agree that we can cut one click but is not just about the number of clicks but also the effort required per click...


Cheers,
Sigurd.

--
You received this message because you are subscribed to the Google Groups "SilverStripe Core Development" group.
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.

Ingo Schommer

unread,
Apr 5, 2011, 6:28:05 AM4/5/11
to silverst...@googlegroups.com, Sigurd Magnusson, felipe...@gmail.com

On Tuesday, April 5, 2011 2:55:19 PM UTC+12, Felipe wrote:
ss3-ui_pages-tree-add-page.jpg
  • How do people open this dialogue?
actions-> add child page or gear icon-> add page
  • Note that this dialogue subtly changes the notion of adding a page in SilverStripe CMS, but this actually does potentially alter the interaction substantially. Rather than the existing model ('Where do you want to add some content, and I will work out what type of content it should be'), you've made this 'Choose a type of content to add, and I will work out where it should go'.
Not true, the interaction model of the gear is: where to add your page -> tell me what pagetype you want (the system will recommend one and if there's only one possibility the popup wouldn't show) - if you add via actions without a node being selected the page will be added on the root like the current model
  • For this reason we need to see the flow of steps entering and exiting this screen to work out how best to perform it. I think there are times when both models make more sense, so perhaps in SS3 we are enabling developers to produce both.
the interaction is very simple is one click and a popup not a several step workflow. Well given the separation of saphire and the CMS we're allowing devs to create their own CMS 

So does that mean you have to switch from "Edit page" to "Pages" in order to add a page? Could be confusing to users which will be in "edit page" mode most of the time, right?
Felipe, I know you want to keep action consistent, but I think we need a very obvious way to add a page, not only relatively hidden behind gear icons or "actions" panels.
I assume the pages "list view" will work the same as the modeladmin example and have an "add page" button? 
 

Felipe Skroski

unread,
Apr 5, 2011, 6:04:41 PM4/5/11
to silverst...@googlegroups.com, Ingo Schommer, Sigurd Magnusson

Exposing more the add page action is a very good point, I agree we can improve that  to be more obvious on both views. Maybe to something similar to files where you have an add page button right on the side nav
so the action is exposed on every single view plus the green button.

 
Reply all
Reply to author
Forward
0 new messages