Story 1

1. Basic Edit

1

Edit and publish content

Redefining eZ Publish User Interface on eZ Publish 5

UX & UI conceptsFirst phase of 6 commented end-to-end user stories

to lay the foundations of the new interface.

1

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

LoginAs any User I want to access the eZ Publish application.

3

3

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 usethe Front End Editing)

4

DiscoverAs 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

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 thensimply use the content tree.

6

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

7

7

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

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

9

9

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

11


12

12


13

13

Thanks to this new UI, I can nowchoose among various views to have a look atthe sub-items of the content I am working on.

By default, Data list, Editorial list and Media gridare available.

Developers can extend this.

14


15

15


16

16

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

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

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

19

19

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

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


24

24


25

25


26

26

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

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

28

28

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

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

30

30

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

31

31

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


34

34

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 draftor a new working copy)

35

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

36

36


37

37

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 similarto the one used in the Offsite User Interface

previously.

38


39

39

I can, from there, do similar changes,preview,

and simply publish my changes.

40


41

41

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

Story 1

Documents

theconten tree

edit mode

edit button

basic edit

content tree

user stories

casual user

tree navigation