Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Pastanaga UI

691 views

Published on

Albert Casado's talk at Plone conference 2017 about Pastanaga UI. A new user experience framework for the Plone CMS and Guillotina.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Pastanaga UI

  1. 1. Pastanaga UI
  2. 2. Let’s make something great together
  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. 313 icons and counting 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. Adaptative UI
  28. 28. Cognitive stress Adaptative editing • Show to the user only what he needs and want • Adapt UI elements to flow circumstances
  29. 29. Adaptative editing Presenting new Pastanga Editor. Yes, it is simple! www.pastanga.io
  30. 30. Adaptative editing ! " #
  31. 31. Adaptative editing guillotina.plone.org Type content… Type the title… /title-of-document Private
  32. 32. Adaptative editing guillotina.plone.org Paragraph lorem ipsum dolor sum consecuteur est sit amet. Title of document Sure to delete? Paragraph lorem ipsum dolor sum consecuteur est sit amet. Paragraph lorem ipsum dolor sum consecuteur est sit amet. Paragraph lorem ipsum dolor sum consecuteur est sit amet. www.kitconcept.com Paragraph lorem ipsum dolor sum consecuteur est sit amet. #252525 BOLD ctrl+B
  33. 33. User-centricity
  34. 34. Pastanaga UI
  35. 35. Mobile
  36. 36. 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
  37. 37. 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
  38. 38. Pastanga UI guillotina.plone.org 100%17:14G Mobile 100%17:14G Mobile You are now logged in! "
  39. 39. Pastanga UI guillotina.plone.org 100%17:14G Mobile 100%17:14G Mobile You are now logged in! "
  40. 40. Pastanga UI guillotina.plone.org 100%17:14G Mobile 100%17:14G Mobile !"#
  41. 41. Pastanga UI guillotina.plone.org 100%17:14G Mobile 100%17:14G Mobile !"#
  42. 42. 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
  43. 43. 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
  44. 44. 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$ ! "
  45. 45. 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
  46. 46. Desktop
  47. 47. guillotina.plone.org
  48. 48. guillotina.plone.org
  49. 49. guillotina.plone.org ! " # $
  50. 50. guillotina.plone.org ! " # $
  51. 51. 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 () Guill O’Tine PROFILE ! PREFERENCES !! SITE SETUP 126 43 13 ITEMS CREATED UPLOADS REVIEWS
  52. 52. guillotina.plone.org ! " # $
  53. 53. guillotina.plone.org ! " Public Standard PORTLETS 6 days ago STATE VIEW MODIFIED SHARING PERMISIONS % % %%% Name of the content# $
  54. 54. guillotina.plone.org ! " # $
  55. 55. 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…
  56. 56. 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
  57. 57. guillotina.plone.org 100%17:14G Mobile 100%17:14G Mobile STATE HOME / … / SUBFOLDER / CURRENT FOLDER / Contents! """""""""" NAME Name of document Name o folder Name of form Name of news Name of the image Name of form Name of news Name of news """""" Private Draft Public Public Public Public Intran Intran loading contents… 100%17:14G Mobile Guill O’Tine PREFERENCES PROFILE guillotina.plone.org ! 100%17:14G Mobile !! SITE SETUP 126 43 13 ITEMS CREATED UPLOADS REVIEWS
  58. 58. guillotina.plone.org ! " # $
  59. 59. guillotina.plone.org ! " # $
  60. 60. guillotina.plone.org ! " # $
  61. 61. guillotina.plone.org ! "#$
  62. 62. Reusable components
  63. 63. Create navigation tabs only for folder items. ONLY FOLDERS NAVIGATION TABS Add automatically a tab of elements created at root level. CREATE NAVIGATION TABS PROFILE TO IMPORT CACHE SETTINGS WITH CACHING PROXY WITH CACHING PROXY AND SPLIT-VIEW WITHOUT CACHING PROXY USE UUID FOR USERS Automatically generate UUIDs for new users. Newly installed content will be enabled by default unless explicitly tuned off. COLLECTION COMMENT EVENT FILE FOLDER IMAGE LINK NEWS ITEM PAGE TYPES SHOWN IN SEARCHES en-us ! Nynorsk ! Catalan Languages in which the site should be translatable. AVAILABLE LANGUAGES !
  64. 64. Deleted successfully! Updates available Update installed add-ons: Standard tiles and Drafts support ! 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. Delete selected types?
  65. 65. AM Hour Minute 9 5 8 0 7 55 10 10 11 : 15 12 20 1 25 2 30 3 35 #1FBDEE
  66. 66. guillotina.plone.org 100%17:14G Mobile 100%17:14G Mobile Content Rules settings ENABLE CONTENT RULES CONFIGURE CONTENT RULES Rules automatically perform actions on content when certain triggers take place. After defining rules, you may want to go to a folder to assign them, using the ‘rules’ item in the actions menu. SITE CONTENT RULES ADD NEW RULE MY SUPER RULE NAME NASTY RULE DISABLED RULE MY ALMOST SUPER RULE Filter rules…
  67. 67. guillotina.plone.org 100%17:14G Mobile 100%17:14G Mobile Content Rules settings ENABLE CONTENT RULES CONFIGURE CONTENT RULES Rules automatically perform actions on content when certain triggers take place. After defining rules, you may want to go to a folder to assign them, using the ‘rules’ item in the actions menu. SITE CONTENT RULES ADD NEW RULE NAVIGATION STATIC TEXT CALENDAR CTP Filter rules… After this rule is executed, stop further rules ENABLE RULE RULE CASCADE OTHER RULES RULE STOPS OTHER RULES After this rule is executed, trigger other rules. Attention! Be sure it won’t create infinite loops. Add Content Rule Content rule nameTITLE CONFIGURE RULE Short explanation of rule and its purpose… DESCRIPTION Comment added EVENT TRIGGER
  68. 68. ADD NEW RULE STATIC TEXT CALENDAR CTP After this rule is executed, stop further rules RULE CASCADES OTHER RULES After this rule is executed, trigger other rules. Attention! Be sure it won’t create infinite loops. RULE CONDITIONS RULE ASSIGNMENT If all of the following conditions are met: State Draft, Revie…are File extension PDFis Group Administrat…is Perform the following actions: Email email@address.i… Logger text_contentrul… Notify Info “Message al… content ! pageASSIGN TO LOCATION ! page ! Select type…ADD ACTION Select type… ADD CONDITION
  69. 69. Reference
  70. 70. 30x30 icon default #826A6A primary #007EB1 destructive #E40166 disabled #B8C6C8 bullet #069182 touch area 18x4 4x442x424 MOBILE/TOUCH BAR
  71. 71. Error Ready Warning Info Clear Alert .alert-warning, role=“alert”, aria-live=“assertive” 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. !
  72. 72. <div class="alert alert-warning alert-dismissible" role="alert" aria-live="assertive"> <button type="button" class="alert-dismiss" aria-label="Dismiss"> <svg … > </button> <img class=“alert-image” src=“status.svg” aria-hidden=“true” alt=“”> <h2 class=“alert-title”>Title</h2> <p class=“alert-description”>Description</p> </div>
  73. 73. Pastanaga UI :: Messaging @albertcasado 1/2 Error Connection to Produce & Publish Server is not functional 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. Info You are running in "debug mode", intended for development. Changes will take effect immediately, but will make your site run slowler. You are now logged in! Alert .alert-error, role=“alert”, aria-live=“assertive” Alert .alert-warning, role=“alert”, aria-live=“assertive” Alert .alert-info, role=“status”, aria-live=“polite” Alert .alert-success, role=“status”, aria-live=“polite” Recommended to use always with a dismiss. Success is auto-dismissed after 5 seconds In the future notes can be extended to support tips, important messaging or usage recommendations Recommended to use always with a dismiss // Optional // Optional // Like a button with its label and tooltip “Dismiss” ALERTS NOTES <div class="alert alert-warning alert-dismissible" role="alert" aria-live="assertive"> <button type="button" class="alert-dismiss" aria-label="Dismiss"> <img … > </button> <img class=“alert-image” src=“status.svg” aria-hidden=“true” alt=“”> <h2 class=“alert-title”>Title</h2> <p class=“alert-description”>Description</p> </div> <p class=“note” role=“note”> … </p> You are running in "debug mode", intended for development. Changes will take effect immediately, but will make your site run slowler. You are running in "debug mode", intended for development. Changes will take effect immediately, but will make your site run slowler. error.svg warning.svg info.svg clear.svg ready.svg clear.svg
  74. 74. Pastanaga UI :: Messaging 2/2 CONFIRMATION DIALOGS Delete selected types? <dialog class=“alertdialog” role="alertdialog" aria-labelledby=“alertdialog-title-id01"> <div class=“alertdialog-wrapper” role="document" tabindex="0"> <h2 class=“alertdialog-title” id="alertdialog-title-id01">Delete selected types?</h2> <p class=“alertdialog-description”>Optional description, better not to have</p> <div class="button-group" role="group" aria-label="Alert dialog actions”> <button type="button" class="button button-highlighted"> <img class=“button-image” src=“...” alt=“” role=“presentation” aria-hidden=“true”> <span class=“button-label”>Cancel</span> </button> <button type="button" class="button button-destructive button-highlighted"> <img class=“button-image” src=“...” alt=“” role=“presentation” aria-hidden=“true”> <span class=“button-label”>Delete</span> </button> </div> </div> </dialog> <dialog class=“dialog” role="alertdialog" aria-labelledby="dialog-title-id01"> <div class=“dialog-wrapper” role="document" tabindex="0"> <h2 class=“dialog-title” id="dialog-title-id01">Delete selected types?</h2> <p class=“dialog-description”>Optional description, better not to have</p> <button type="button" class="button button-primary button-highlighted"> <img class=“button-image” src=“...” alt=“” role=“presentation” aria-hidden=“true”> <span class=“button-label”>OK</span> </button> </div> </dialog> There was an error loading the modal User must confirm actions that cannot be easily undo or have consequences clear.svg delete.svg ahead.svg @albertcasado
  75. 75. Pastanaga UI :: Buttons 1/2 HIERACHY TEXT BUTTONS GROUPS PSEUDO-STATES Update SAVE AND TEST Destructive Default Primary happy path Default not highlighted Non-iconizable buttons do not use as primary If there are several buttons a group is required. With a single button, just the button itslelf is required. Status appears as a hint in the toolbar for the main action replacing the primary Note that not only tooltips but shortcuts must be also translated. E.g.: Delete key “del” is “supr” in a Catalan keyboard. Adding a shortcut is convinient, both for productivity and accessibility; addapt them to Win and Mac. Composite shortcuts are marked nesting kbd’s tags Just remove the <img> tag darken 10% darken 30% // Default // Primary blue // Destructive red // Adds circled style .button .button .button-primary .button .button-destructive .button .button-highlighted .button-public .button-intranet .button-review .button-draft .button-private .button .button-primary :default :hover :active :disabled :focus <div class="button-group" role="group" aria-label="Label to the group of buttons"> <button type="button" class="button button-destructive button-highlighted"> <img class=“button-image” src=“...” alt=“” role=“presentation” aria-hidden=“true”> <span class=“button-label”>Remove</span> </button> … </div> <div class="button-group" role="group" aria-label="Label…"> <button type="button" class="button button-destructive button-highlighted has-tooltip" aria-describedby=“button-tooltip-id01”> <img class=“button-image” src=“...” alt=“” role=“presentation” aria-hidden=“true”> <span class=“button-label”>Remove</span> <span class=“button-tooltip” id=“button-tooltip-id01” role=“tooltip”>Remove <kbd title=“delete”>del</kbd></span> </button> … </div> <span class=“button-tooltip” id=“button-tooltip-id01” role=“tooltip”>Delete</span> <kbd><kbd title=“command”>⌘</kbd><kbd>N</kbd></kbd> REMOVE del <button type="button" class="button button-primary"> <span class=“button-label”>Update</span> </button> STATUS IN ICONS TOOLTIPS AND SHORTCUTS @albertcasado DELETE NEW DOCUMENT ⌘ N backgroundTBD
  76. 76. So?
  77. 77. Thanks | Gràcies

×