Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Invisioning UX and UI

29.066 Aufrufe

Veröffentlicht am

Talk made by Víctor Fernández de Alba in behalf of Albert Casado during PLOG 2017.

Veröffentlicht in: Design
  • Als Erste(r) kommentieren

Invisioning UX and UI

  1. 1. Invisioning UX and UI PLOG - Sorrento 2017
  2. 2. Let’s make something great together Guillotina
  3. 3. Simplify & Focus
  4. 4. What a user does most frequently in Plone? Final users are not Admins Simplify & Focus
  5. 5. • Edit a content (main action) • Check Folder contents • Add a new content Simplify & Focus
  6. 6. Simplify & Focus Focus toolbar [Add content] [Folder contents] [Edit]
  7. 7. Simplify & Focus !" Main action
  8. 8. Don’t make me think
  9. 9. • Workflows: Send back, retract, return to, back to the future…? • Happy path action in expected place Don’t make me think
  10. 10. Taxi, I just wanna go to Rome! The user don’t care about the way Don’t make me think
  11. 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. 12. Follow the path intuitively, not even reading !" Don’t make me think
  13. 13. !" Done Save Accept OK Next Agree Cancel Close No Dismiss Remove Don’t make me think
  14. 14. Reassurance Don’t make me think Hint current content status
  15. 15. Don’t make me think ! ! ! Edit Draft content Edit Intranet content Edit Public content Color hint of content status
  16. 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. 17. Visual hierarchy
  18. 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. 19. A CMS deserves icons covering all its needs Provide a full visual experience Visual hierarchy Drop files here or click to browse
  20. 20. 288 icons and counting + ligature font Visual hierarchy
  21. 21. Navigability
  22. 22. Structured UI Visual hierarchy Standard 6 days ago VIEW MODIFIED ! ! Select options here Go somewhere to see
  23. 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. 24. Consistency & Patterns
  25. 25. Accessiblity Consistency & Patterns • Follow Font & Contrast standards • Reuasable patterns keep everything accessible
  26. 26. Easiness Visual hierarchy • Patterns make easier to become involved and help community
  27. 27. User-centricity
  28. 28. Pastanaga UI
  29. 29. Mobile
  30. 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. 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. 32. Pastanga UI guillotina.plone.org 100%17:14G Mobile 100%17:14G Mobile You are now logged in! "
  33. 33. Pastanga UI guillotina.plone.org 100%17:14G Mobile 100%17:14G Mobile You are now logged in! "
  34. 34. Pastanga UI guillotina.plone.org 100%17:14G Mobile 100%17:14G Mobile !"#
  35. 35. Pastanga UI guillotina.plone.org 100%17:14G Mobile 100%17:14G Mobile !"#
  36. 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. 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. 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. 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. 40. Desktop
  41. 41. guillotina.plone.org
  42. 42. guillotina.plone.org
  43. 43. guillotina.plone.org ! " # $
  44. 44. guillotina.plone.org ! " # $
  45. 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. 46. guillotina.plone.org ! " # $
  47. 47. guillotina.plone.org ! " Public Standard PORTLETS 6 days ago STATE VIEW MODIFIED SHARING PERMISIONS % % %%% Name of the content# $
  48. 48. guillotina.plone.org ! " # $
  49. 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. 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. 51. guillotina.plone.org ! " # $
  52. 52. guillotina.plone.org & ' ( ) * +, TEXT MEDIA FIELD APP ADVANCED -- ! " # $ % Heading Subheading Paragraph Bullet list Numbered list Table of contents Navigation FIELD alt+F
  53. 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. 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. 55. guillotina.plone.org ! " # $
  56. 56. guillotina.plone.org ! " # $
  57. 57. guillotina.plone.org ! " # $
  58. 58. guillotina.plone.org ! "#$
  59. 59. Thanks | Gràcies Albert Casado @albertcasado Víctor Fernández de Alba @sneridagh

×