Atoms, Modules And Other Fancy Particles - Part II

Atoms, Modules And Other Fancy Particles - Part II

E8f68e199b61f63780758ca20d573b62?s=128

Alla Kholmatova

June 21, 2016
Tweet

Transcript

  1. Part II ATOMS, MODULES AND OTHER FANCY PARTICLES Alla Kholmatova

    @craftui 14 June 2016
  2. None
  3. https://www.futurelearn.com/pattern-library

  4. None
  5. How do you create an enduring design system that people

    want to use?
  6. How to understand the function of a module. How to

    give modules names that people will use and remember. How to achieve consistency without detailed design specs.
  7. How to understand the function of a module.

  8. Interface inventory at FutureLearn, 2014

  9. None
  10. Image source https://18f.gsa.gov/2015/09/28/web-design-standards//

  11. It’s not (only) about the perfect visual consistency, but consistent

    expression of function.
  12. Image courtesy of Eurostar, London

  13. Image courtesy of Eurostar, London

  14. Sell a train journey to Paris Book a train ticket

    to Paris, Get inspired to go to Paris by train.
  15. Booking form Book a train ticket, functional tool Sell a

    train journey to Paris Book a train ticket to Paris, Get inspired to go to Paris by train.
  16. Snapshot Key selling points of the train journey. Sell a

    train journey to Paris Book a train ticket to Paris, Get inspired to go to Paris by train.
  17. Apéritif Give taster of the destination. Sell a train journey

    to Paris Book a train ticket to Paris, Get inspired to go to Paris by train.
  18. Functional tool Key information Inspiration Sell a train journey to

    Paris Book a train ticket to Paris, Get inspired to go to Paris by train.
  19. Snapshot Key selling points of the train journey.

  20. Key information group Snapshot Key selling points of the train

    journey.
  21. Key information Snapshot Key selling points of the train journey.

  22. Supporting icon Snapshot Key selling points of the train journey.

  23. Snapshot Key selling points of the train journey.

  24. • start with a larger goal • see how the

    modules work together to achieve that goal • understand the role of each module • look for the modules with similar function across other pages • group modules by function and improve the design as you go
  25. How to give modules names that people will use and

    remember.
  26. By naming objects we bring them into existence… we draw

    them out of nothingness. James Britton, Language & Learning “
  27. By naming objects and putting them into the pattern library

    we bring them into existence… we draw them out of nothingness. James Britton, Language & Learning “
  28. Try to define the function of a module in the

    context of the system, rather than a page.
  29. “Course poster” – ?

  30. “Discussion” – ?

  31. “Billboard” “Billboard”

  32. Don’t let presentation affect your thinking about the function.

  33. None
  34. None
  35. Billboard Focus user’s attention on our most important action. Page

    header Introduce the page.
  36. None
  37. Present a list of shortlisted books.

  38. “Signpost” “Signpost” (Compact)

  39. Signpost - something that “sign posts” to another page, and

    a miniature representation of the page it links to.
  40. None
  41. Sometimes it’s better to make the module generic, and sometimes

    more specific. Names should reflect that.
  42. “Content block” GENERIC

  43. “Events module” SPECIFIC

  44. “Course tabs”

  45. Name things collaboratively, and involve people from multiple interests and

    disciplines in the process.
  46. None
  47. It helps to use a common point of reference from

    the real world as a visual metaphor.
  48. Brackets

  49. Spotlight

  50. Progress toggle button ?

  51. Binary radio button ?

  52. Minions

  53. Boss

  54. there can be many minions…

  55. but only one Boss

  56. None
  57. Names with personality are easier to remember. They stick around

    and inspire other names.
  58. Image courtesy of EBI, Cambridge, UK

  59. Image courtesy of EBI, Cambridge, UK

  60. Whisper box

  61. Boom box

  62. Make effort to use the names in everyday conversations, no

    matter how weird it might sound*. *It only sounds weird the first couple of weeks, until people get used to it.
  63. None
  64. None
  65. Whisper box

  66. None
  67. If you can't come up with a name for a

    thing, something is not right with it.* *Usually it means that the function of a module is too overloaded, too diluted, or not well understood. The inspiration for this tip came from a brilliant book by “How to Make Sense of any Mess” by Abby Covert.
  68. Image courtesy of Eurostar, London

  69. Image courtesy of Eurostar, London

  70. You can see this shared language as a precise way

    of describing someone’s experience of your site.
  71. Learn and progress Discover new content Purchase SIGNPOST SPOTLIGHT BILLBOARD

    FOOTER PROMO RUN PROGRESS PROGRESS TOGGLE COMMENT BLOCK WHISPER BOX STANDFIRST STANDFIRST WEEK PROGRESS CARD BOOM BOX
  72. How to achieve consistency without detailed design specs.

  73. None
  74. Some designers like generous spacing. Others prefer it more cosy.

    What do I do…? Developer at FutureLearn “
  75. None
  76. None
  77. None
  78. None
  79. Spacious Typographic contrast: high Spacing: “spacious”

  80. Spacious Typographic contrast: high Spacing: “spacious” Regular Typographic contrast: regular

    Spacing: “regular”
  81. Spacious Typographic contrast: high Spacing: “spacious” Regular Typographic contrast: regular

    Spacing: “regular” Cosy Typographic contrast: low Spacing: “cosy”
  82. Spacious Regular Cosy

  83. None
  84. Define visual patterns and connections across the system.

  85. None
  86. None
  87. To sum up

  88. • When doing an UI inventory, start with a larger

    goal – this makes it easier to understand the function of the modules. Then stay focused on the function all the way. • By naming a module you bring it into existence and shape its future. A good name is focused, memorable and embodies the function. A good name is the name people want to use. • Instead of describing styles individually try to define visual patterns and connections across the system.
  89. If you get the function of a module right, it

    can become a stable point that connects the system.
  90. https://www.futurelearn.com/pattern-library

  91. THANKS AND CREDITS Many people helped and contributed to the

    ideas in this talk in different ways, for which I’m extremely grateful. I especially would like to thank: Gabor Vajda, FutureLearn Vitaly Friedman, Smashing Magazine Lucy Blackwell, FutureLearn Jusna Begum, FutureLearn Daniel Jackson and team, Eurostar Xavier Watkins and team, EBI Karen McGrane, karenmcgrane.com …and huge thanks to the FutureLearn team for their support!