Download as PDF, PPTX
![Simplify & Focus
Focus toolbar
[Add content] [Folder contents] [Edit]](https://image.slidesharecdn.com/pastanagaui-170420172216/85/Invisioning-UX-and-UI-6-320.jpg)
Uploaded bykitconcept GmbH
Invisioning UX and UI
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.
More Related Content
![Your Plone [Intranet] in a Box™](https://cdn.slidesharecdn.com/ss_thumbnails/yourploneintranetinabox-201213214500-thumbnail.jpg?width=640&height=640&fit=bounds)
Invisioning UX and UI
- 1. Invisioning UX andUI PLOG - Sorrento 2017
- 2. Let’s make something greattogether Guillotina
- 3.
- 4. What a userdoes most frequently in Plone? Final users are not Admins Simplify & Focus
- 5. • Edit acontent (main action) • Check Folder contents • Add a new content Simplify & Focus
- 6. Simplify & Focus Focustoolbar [Add content] [Folder contents] [Edit]
- 7. Simplify & Focus !" Mainaction
- 8.
- 9. • Workflows: Sendback, retract, return to, back to the future…? • Happy path action in expected place Don’t make me think
- 10. Taxi, I justwanna go to Rome! The user don’t care about the way Don’t make me think
- 11. Don’t ask theuser 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 pathintuitively, not even reading !" Don’t make me think
- 13.
- 14. Reassurance Don’t make methink Hint current content status
- 15. Don’t make methink ! ! ! Edit Draft content Edit Intranet content Edit Public content Color hint of content status
- 16. Don’t make methink Color hint of content status guillotina.plone.org 100%17:14G Mobile 100%17:14G Mobile Uncollapse toolbar to edit Private content
- 17.
- 18. Structured elements Visual hierarchy guillotina.plone.org 100%17:14GMobile 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 deservesicons covering all its needs Provide a full visual experience Visual hierarchy Drop files here or click to browse
- 20. 288 icons andcounting + ligature font Visual hierarchy
- 21.
- 22. Structured UI Visual hierarchy Standard 6days ago VIEW MODIFIED ! ! Select options here Go somewhere to see
- 23. Reusability Visual hierarchy CONTROL WHOCAN VIEW OR EDIT THIS CONTENT !PERSONAL INFORMATION PERSONAL INFORMATION PERSONAL PREFERENCES PERSONAL PREFERENCES Legend, Section titling Uncollapse section Tabs
- 24.
- 25. Accessiblity Consistency & Patterns •Follow Font & Contrast standards • Reuasable patterns keep everything accessible
- 26. Easiness Visual hierarchy • Patternsmake easier to become involved and help community
- 27.
- 28.
- 29.
- 30. Pastanga UI guillotina.plone.org 100%17:14G Mobile100%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 Mobile100%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 Mobile100%17:14G Mobile You are now logged in! "
- 33. Pastanga UI guillotina.plone.org 100%17:14G Mobile100%17:14G Mobile You are now logged in! "
- 34. Pastanga UI guillotina.plone.org 100%17:14G Mobile100%17:14G Mobile !"#
- 35. Pastanga UI guillotina.plone.org 100%17:14G Mobile100%17:14G Mobile !"#
- 36. Pastanga UI guillotina.plone.org 100%17:14G Mobile100%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 Mobile100%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 Mobile100%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 Mobile100%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.
- 41.
- 42.
- 43.
- 44.
- 45. guillotina.plone.org ! " # $ Guill O’TineNAME PERSONAL INFORMATIONPERSONAL 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.
- 47. guillotina.plone.org ! " Public Standard PORTLETS 6 days ago STATE VIEW MODIFIED SHARINGPERMISIONS % % %%% Name of the content# $
- 48.
- 49. guillotina.plone.org Private Name of thedocument 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 thedocument 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.
- 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.
- 56.
- 57.
- 58.
- 61. Thanks | Gràcies AlbertCasado @albertcasado Víctor Fernández de Alba @sneridagh