Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Story 1

1,464 views

Published on

  • Be the first to comment

Story 1

  1. 1. Redefining eZ Publish User Interface on eZ Publish 5 UX & UI concepts First phase of 6 commented end-to-end user stories to lay the foundations of the new interface. 1. Basic Edit Edit and publish content 1 1
  2. 2. I am an end-user, an editor, I start by either clicking a bookmarkor typing the URL of the App in his browser. In this case, I am not yet authenticated. 2
  3. 3. LoginAs any User I want toaccess the eZ Publishapplication. 3 3
  4. 4. After loging in, I am redirected to my personal Dashboard. (note that if I were a casual user with really simple rights, the dashboard and the navigationwould be way simpler, basically only authorizing to use the Front End Editing) 4
  5. 5. DiscoverAs any User I want todiscover an article in theconten tree, review, edit,preview and publish it inOUI.note: the dashboard is inno way specified at thisstage. This only illustratethe components. 5 5
  6. 6. From my personal dashboard, I want to go directly to an article, knowing its location, I will use the tree navigation to get there. I click on the “Content” tab in the “Create” part of the application, and then simply use the content tree. 6
  7. 7. DiscoverAs any User I want todiscover an article in theconten tree, review, edit,preview and publish it inOUI. 7 7
  8. 8. Once I “discovered” the article thanks to the content tree, I land on the main view of the object. While this view will be familiar to most users having already used eZ Publish, many small details have been optimized to improve the global experience of the editor such as: having access to preview from this View screen,direct access to collaboration and notification features, better view of the data structure of the object, ... 8
  9. 9. View in OUIAs any User I want todiscover an article in theconten tree, review, edit,preview and publish it inOUI. 9 9
  10. 10. First things first, I will try to make myself comfortable, I will maximize mywork space by hiding the navigation hub, and folding the various toolbars. 10
  11. 11. View in OUIAs any User I want todiscover an article in theconten tree, review, edit,preview and publish it inOUI. 11 11
  12. 12. View in OUIAs any User I want todiscover an article in theconten tree, review, edit,preview and publish it inOUI. 12 12
  13. 13. View in OUIAs any User I want todiscover an article in theconten tree, review, edit,preview and publish it inOUI. 13 13
  14. 14. Thanks to this new UI, I can nowchoose among various views to have a look at the sub-items of the content I am working on.By default, Data list, Editorial list and Media grid are available. Developers can extend this. 14
  15. 15. View in OUIAs any User I want todiscover an article in theconten tree, review, edit,preview and publish it inOUI. 15 15
  16. 16. View in OUIAs any User I want todiscover an article in theconten tree, review, edit,preview and publish it inOUI. 16 16
  17. 17. Now that I did this quick scan on the content article I am on, I decide to edit. As always, actions are located on the right, in the action bar, ordered by importance.Clicking the EDIT button is thus fairly natural. 17
  18. 18. This will take me to the EDIT mode. EDIT mode is still a full object edit (fairly conservative, no in-line per attribute editing, this will come later as not the main way to edit) It reuses in an improved way Field categories.It however uses an overlay to focus the user on the editingwork and make clear that all other UI elements are inactive. As in VIEW mode, all the actions are regrouped on the right toolbar. 18
  19. 19. Edit in OUIAs any User I want todiscover an article in theconten tree, review, edit,preview and publish it inOUI. 19 19
  20. 20. After changing something in the article,I can simply preview how this would look once published. Preview is the second button (again, per order of importance) in the action toolbar. 20
  21. 21. Edit in OUIAs any User I want todiscover an article in theconten tree, review, edit,preview and publish it inOUI. 21 21
  22. 22. The preview allows to have different screen preview: computer screen, tablet screen, smartphone screen, print preview... It also allows to choose versions and site where to preview the content. 22
  23. 23. Edit in OUIAs any User I want todiscover an article in theconten tree, review, edit,preview and publish it inOUI. 23 23
  24. 24. Edit in OUIAs any User I want todiscover an article in theconten tree, review, edit,preview and publish it inOUI. 24 24
  25. 25. Edit in OUIAs any User I want todiscover an article in theconten tree, review, edit,preview and publish it inOUI. 25 25
  26. 26. Edit in OUIAs any User I want todiscover an article in theconten tree, review, edit,preview and publish it inOUI. 26 26
  27. 27. Once happy with my changes, I simply publish the content. Note: workflow and collaboration will be detailedin another story, no need to comment on this for now. 27
  28. 28. View in OUIAs any User I want todiscover an article in theconten tree, review, edit,preview and publish it inIUI. 28 28
  29. 29. If, once published, I want to see the content in the context of the site(Insite User Interface also referred as ‘front-end editing’ or ‘in-site editing’) I can do so in one click very simply (this is actually a big change) Just clicking on the second level navigation bar, choosing the site I want to! browse on, will do the trick 29
  30. 30. View in OUIAs any User I want todiscover an article in theconten tree, review, edit,preview and publish it inIUI. 30 30
  31. 31. View in IUIAs any User I want todiscover an article in theconten tree, review, edit,preview and publish it inIUI. 31 31
  32. 32. Once in the Insite User Interface, I still have my top navigation available,I still have the actions regrouped in the right toolbar.Of course, this is contextual and thus not exactly thesame as in the Offsite user interface I used before. I can also minimize & maximize the toolbars. 32
  33. 33. View in IUIAs any User I want todiscover an article in theconten tree, review, edit,preview and publish it inIUI. 33 33
  34. 34. View in IUIAs any User I want todiscover an article in theconten tree, review, edit,preview and publish it inIUI. 34 34
  35. 35. The main difference with the old way to do ‘front end editing’ is that I have now a slider that allows me to switch from: VIEW mode (navigation is activated, no overlay visible) toEDIT mode (navigation is deactivated, actions possible on the page appear over the page) Also, when activating the EDIT mode, I am asked to choose on which content to work (either an existing working copy - formerly called draft or a new working copy) 35
  36. 36. Edit in IUIAs any User I want todiscover an article in theconten tree, review, edit,preview and publish it inIUI. 36 36
  37. 37. Edit in IUIAs any User I want todiscover an article in theconten tree, review, edit,preview and publish it inIUI. 37 37
  38. 38. When I edit an object, (in this case I am on a verysimple page with a FULL view of an object, so only the EDIT of this object is available), I open an Edit form, in an overlay, very similar to the one used in the Offsite User Interface previously. 38
  39. 39. Edit in IUIAs any User I want todiscover an article in theconten tree, review, edit,preview and publish it inIUI. 39 39
  40. 40. I can, from there, do similar changes, preview, and simply publish my changes. 40
  41. 41. Edit in IUIAs any User I want todiscover an article in theconten tree, review, edit,preview and publish it inIUI. 41 41
  42. 42. End of this first example, next example will show:- How to discover an object using facetted search efficiently, - How to edit a container object and its sub-item quickly 42

×