The document discusses simplifying and focusing the user experience of a content management system (CMS). It recommends simplifying workflows, placing happy path actions in expected locations, and allowing users to intuitively follow paths without reading instructions. Visual hierarchy, consistency, accessibility, and patterns are emphasized to guide users. Mobile-first design is discussed, showing mockups of a simplified and focused CMS interface optimized for usability.

1. Invisioning UX and UI
PLOG - Sorrento 2017

2. Let’s make something
great together
Guillotina

3. Simplify & Focus

4. What a user does most
frequently in Plone?
Final users are not Admins
Simplify & Focus

5. • Edit a content (main action)
• Check Folder contents
• Add a new content
Simplify & Focus

6. Simplify & Focus
Focus toolbar
[Add content] [Folder contents] [Edit]

7. Simplify & Focus
!"
Main action

8. Don’t make me
think

9. • Workflows: Send back, retract,
return to, back to the future…?
• Happy path action in
expected place
Don’t make me think

10. Taxi, I just wanna go
to Rome!
The user don’t care about the way
Don’t make me think

11. Don’t ask the user how, just let him
decide where he wants to end
PRIVATE DRAFT REVIEW INTRANET PUBLIC
Just make it Public!
Don’t make me think

12. Follow the path intuitively,
not even reading
!"
Don’t make me think

13. !"
Done
Save
Accept
OK
Next
Agree
Cancel
Close
No
Dismiss
Remove
Don’t make me think

14. Reassurance
Don’t make me think
Hint current content status

15. Don’t make me think
! ! !
Edit
Draft
content
Edit
Intranet
content
Edit
Public
content
Color hint of content status

16. Don’t make me think
Color hint of content status
guillotina.plone.org
100%17:14G Mobile 100%17:14G Mobile
Uncollapse toolbar to edit Private content

17. Visual hierarchy

18. Structured elements
Visual hierarchy
guillotina.plone.org
100%17:14G Mobile 100%17:14G Mobile
Log in
Forgot password? Ask for a new password.
SIGN IN TO START SESSION
!
"
Guill O’TinaUSERNAME
••••••••••••••PASSWORD
Title
Legend, Section titling
Form
Help, secondary options
Happy path action

19. A CMS deserves icons
covering all its needs
Provide a full visual experience
Visual hierarchy
Drop files here or click to browse

20. 288 icons and counting + ligature font
Visual hierarchy

21. Navigability

22. Structured UI
Visual hierarchy
Standard
6 days ago
VIEW
MODIFIED
!
!
Select options here
Go somewhere to see

23. Reusability
Visual hierarchy
CONTROL WHO CAN VIEW OR EDIT THIS CONTENT
!PERSONAL INFORMATION
PERSONAL INFORMATION PERSONAL PREFERENCES PERSONAL PREFERENCES
Legend, Section titling
Uncollapse section
Tabs

24. Consistency & Patterns

25. Accessiblity
Consistency & Patterns
• Follow Font & Contrast standards
• Reuasable patterns keep
everything accessible

26. Easiness
Visual hierarchy
• Patterns make easier to
become involved and help
community

27. User-centricity

28. Pastanaga UI

29. Mobile

30. Pastanga UI
guillotina.plone.org
100%17:14G Mobile 100%17:14G Mobile
Log in
Forgot password? Ask for a new password.
SIGN IN TO START SESSION
!
"
Guill O’TinaUSERNAME
••••••••••••••PASSWORD

31. Pastanga UI
guillotina.plone.org
100%17:14G Mobile 100%17:14G Mobile
Log in
Forgot password? Ask for a new password.
SIGN IN TO START SESSION
!
"
Guill O’TinaUSERNAME
••••••••••••••PASSWORD

32. Pastanga UI
guillotina.plone.org
100%17:14G Mobile 100%17:14G Mobile
You are now logged in! "

33. Pastanga UI
guillotina.plone.org
100%17:14G Mobile 100%17:14G Mobile
You are now logged in! "

34. Pastanga UI
guillotina.plone.org
100%17:14G Mobile 100%17:14G Mobile
!"#

35. Pastanga UI
guillotina.plone.org
100%17:14G Mobile 100%17:14G Mobile
!"#

36. Pastanga UI
guillotina.plone.org
100%17:14G Mobile 100%17:14G Mobile
!"
Public
Standard
PORTLETS
6 days ago
STATE
VIEW
MODIFIED
SHARING PERMISIONS
#
#
###
$
%Name of the content

37. Pastanga UI
guillotina.plone.org
100%17:14G Mobile 100%17:14G Mobile
!"
Public
Standard
PORTLETS
6 days ago
STATE
VIEW
MODIFIED
SHARING PERMISIONS
#
#
###
$
%Name of the content

38. Pastanga UI
guillotina.plone.org
100%17:14G Mobile 100%17:14G Mobile
Guill O’Tine
Guill O’Tine
Paul One
Paul One
Anita Llonch
Anita Llonch
5 days ago
5 days ago
CREATED
EDITED
5 days ago
DRAFTED
3 days ago
PUBLISHED
3 days ago
EDITED
6 minutes ago
EDITED
!
"
#
!
"
#
History of Name of the content$
!
"

39. Pastanga UI
guillotina.plone.org
100%17:14G Mobile 100%17:14G Mobile
GENERAL
CONTENT
Site setup
Warning
You have not configured a mail host or a site 'From'
address, various features including contact forms,
email notification and password reset will not work.
Go to the Mail control panel to fix this.
DATE AND
TIME
LANGUAGE MAIL
NAVIGATION SITE ADD-ONS
SEARCH DISCUSSION THEMING
SEARCH SINDICATION TINY MCE

40. Desktop

41. guillotina.plone.org

42. guillotina.plone.org

43. guillotina.plone.org
!
"
#
$

44. guillotina.plone.org
!
"
#
$

45. guillotina.plone.org
!
"
#
$
Guill O’TineNAME
PERSONAL INFORMATION PERSONAL PREFERENCES
%Guill O’Tine &
name@domain.ctEMAIL
http://EXTERNAL URL
Tell about you…BIOGRAPHY
Guill O’TineUSERNAME
PORTRAIT
Short overview of who you are and what you do
' Browse
()

46. guillotina.plone.org
!
"
#
$

47. guillotina.plone.org
!
"
Public
Standard
PORTLETS
6 days ago
STATE
VIEW
MODIFIED
SHARING PERMISIONS
%
%
%%%
Name of the content#
$

48. guillotina.plone.org
!
"
#
$

49. guillotina.plone.org
Private
Name of the document
Name of the folder
NAME
Name of the form
Name of the news
Name of the image
1 month ago
3 days ago
LAST MODIFIED
3 months agos
1 year ago
3 years ago
1 page selected items per page
None
None
PUBLICATION DATE
None
None
None
STATE ACTIONS
Intranet
Draft
Public
Public
1 2 3 4 520
HOME /
!
!
!
!
!
!
!!!!!!!!!!
" $ % &
Search…

50. guillotina.plone.org
Private
Name of the document
Name of the folder
NAME
Name of the form
Name of the news
Name of the image
1 month ago
3 days ago
LAST MODIFIED
3 months agos
1 year ago
3 years ago
1 page selected items per page
None
None
PUBLICATION DATE
None
None
None
STATE ACTIONS
Intranet
Draft
Public
Public
1 2 3 4 520
HOME /
!
!
!
!
!
!
!!!!!!!!!!
" $ % &
Search…
Edit
View
Set as default view
Move last
Move first
State
Type comments…COMMENTS
PrivateSTATE !
If checked, this will modify the status of the folder
and its subfolders and items.
INCLUDE CHILDREN ITEMS

51. guillotina.plone.org
!
"
#
$

52. guillotina.plone.org
& ' ( ) * +,
TEXT MEDIA FIELD APP ADVANCED
--
!
"
#
$
%
Heading
Subheading
Paragraph
Bullet list
Numbered list
Table of contents
Navigation
FIELD alt+F

53. guillotina.plone.org
! " # $ % &'
TEXT MEDIA FIELD APP ADVANCED
((Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit
amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut
enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem
vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla
pariatur?
PARAGRAPH !"## $ %&

54. guillotina.plone.org
! " # $ % &'
TEXT MEDIA FIELD APP ADVANCED
((Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit
amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut
enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem
vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla
pariatur?
!"B #$ %

55. guillotina.plone.org
!
"
#
$

56. guillotina.plone.org
!
"
#
$

57. guillotina.plone.org
!
"
#
$

58. guillotina.plone.org
! "#$

61. Thanks | Gràcies
Albert Casado
@albertcasado
Víctor Fernández de Alba
@sneridagh