1. The document outlines the first phase of redefining the eZ Publish user interface, laying the foundations with 6 end-to-end user stories. 2. It describes the basic workflow of an editor discovering an article, editing it, previewing changes, and publishing the content. 3. Key aspects of the new interface are highlighted, including optimized navigation, expanded preview options, and a streamlined editing and publishing experience both onsite and offsite.

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. I am an end-user, an editor,
I start by either clicking a bookmark
or typing the URL of the App in his browser.
In this case, I am not yet authenticated.
2

3. Login
As any User I want to
access the eZ Publish
application.
3
3

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 navigation
would be way simpler, basically only authorizing to use
the Front End Editing)
4

5. Discover
As any User I want to
discover an article in the
conten tree, review, edit,
preview and publish it in
OUI.
note: the dashboard is in
no way specified at this
stage. This only illustrate
the components.
5
5

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. Discover
As any User I want to
discover an article in the
conten tree, review, edit,
preview and publish it in
OUI.
7
7

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. View in OUI
As any User I want to
discover an article in the
conten tree, review, edit,
preview and publish it in
OUI.
9
9

10. First things first, I will try to make myself
comfortable, I will maximize my
work space by hiding the navigation hub,
and folding the various toolbars.
10

11. View in OUI
As any User I want to
discover an article in the
conten tree, review, edit,
preview and publish it in
OUI.
11
11

12. View in OUI
As any User I want to
discover an article in the
conten tree, review, edit,
preview and publish it in
OUI.
12
12

13. View in OUI
As any User I want to
discover an article in the
conten tree, review, edit,
preview and publish it in
OUI.
13
13

14. Thanks to this new UI, I can now
choose 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. View in OUI
As any User I want to
discover an article in the
conten tree, review, edit,
preview and publish it in
OUI.
15
15

16. View in OUI
As any User I want to
discover an article in the
conten tree, review, edit,
preview and publish it in
OUI.
16
16

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. 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 editing
work 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. Edit in OUI
As any User I want to
discover an article in the
conten tree, review, edit,
preview and publish it in
OUI.
19
19

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. Edit in OUI
As any User I want to
discover an article in the
conten tree, review, edit,
preview and publish it in
OUI.
21
21

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. Edit in OUI
As any User I want to
discover an article in the
conten tree, review, edit,
preview and publish it in
OUI.
23
23

24. Edit in OUI
As any User I want to
discover an article in the
conten tree, review, edit,
preview and publish it in
OUI.
24
24

25. Edit in OUI
As any User I want to
discover an article in the
conten tree, review, edit,
preview and publish it in
OUI.
25
25

26. Edit in OUI
As any User I want to
discover an article in the
conten tree, review, edit,
preview and publish it in
OUI.
26
26

27. Once happy with my changes,
I simply publish the content.
Note: workflow and collaboration will be detailed
in another story, no need to comment on this for now.
27

28. View in OUI
As any User I want to
discover an article in the
conten tree, review, edit,
preview and publish it in
IUI.
28
28

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. View in OUI
As any User I want to
discover an article in the
conten tree, review, edit,
preview and publish it in
IUI.
30
30

31. View in IUI
As any User I want to
discover an article in the
conten tree, review, edit,
preview and publish it in
IUI.
31
31

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 the
same as in the Offsite user interface I used before.
I can also minimize & maximize the toolbars.
32

33. View in IUI
As any User I want to
discover an article in the
conten tree, review, edit,
preview and publish it in
IUI.
33
33

34. View in IUI
As any User I want to
discover an article in the
conten tree, review, edit,
preview and publish it in
IUI.
34
34

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)
to
EDIT 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. Edit in IUI
As any User I want to
discover an article in the
conten tree, review, edit,
preview and publish it in
IUI.
36
36

37. Edit in IUI
As any User I want to
discover an article in the
conten tree, review, edit,
preview and publish it in
IUI.
37
37

38. When I edit an object,
(in this case I am on a very
simple 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. Edit in IUI
As any User I want to
discover an article in the
conten tree, review, edit,
preview and publish it in
IUI.
39
39

40. I can, from there, do similar changes,
preview,
and simply publish my changes.
40

41. Edit in IUI
As any User I want to
discover an article in the
conten tree, review, edit,
preview and publish it in
IUI.
41
41

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