Atoms, Modules And Other Fancy Particles - Part II

Transcript

1. 1.

   Part II ATOMS, MODULES AND OTHER FANCY PARTICLES Alla Kholmatova

   @craftui 14 June 2016
2. 2.

   None
3. 3.

   https://www.futurelearn.com/pattern-library

4. 4.

   None
5. 5.

   How do you create an enduring design system that people

   want to use?
6. 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. 7.

   How to understand the function of a module.

8. 8.

   Interface inventory at FutureLearn, 2014

9. 9.

   None
10. 10.

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

11. 11.

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

    expression of function.
12. 12.

    Image courtesy of Eurostar, London

13. 13.

    Image courtesy of Eurostar, London

14. 14.

    Sell a train journey to Paris Book a train ticket

    to Paris, Get inspired to go to Paris by train.
15. 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. 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. 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. 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. 19.

    Snapshot Key selling points of the train journey.

20. 20.

    Key information group Snapshot Key selling points of the train

    journey.
21. 21.

    Key information Snapshot Key selling points of the train journey.

22. 22.

    Supporting icon Snapshot Key selling points of the train journey.

23. 23.

    Snapshot Key selling points of the train journey.

24. 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. 25.

    How to give modules names that people will use and

    remember.
26. 26.

    By naming objects we bring them into existence… we draw

    them out of nothingness. James Britton, Language & Learning “
27. 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. 28.

    Try to define the function of a module in the

    context of the system, rather than a page.
29. 29.

    “Course poster” – ?

30. 30.

    “Discussion” – ?

31. 31.

    “Billboard” “Billboard”

32. 32.

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

33. 33.

    None
34. 34.

    None
35. 35.

    Billboard Focus user’s attention on our most important action. Page

    header Introduce the page.
36. 36.

    None
37. 37.

    Present a list of shortlisted books.

38. 38.

    “Signpost” “Signpost” (Compact)

39. 39.

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

    a miniature representation of the page it links to.
40. 40.

    None
41. 41.

    Sometimes it’s better to make the module generic, and sometimes

    more specific. Names should reflect that.
42. 42.

    “Content block” GENERIC

43. 43.

    “Events module” SPECIFIC

44. 44.

    “Course tabs”

45. 45.

    Name things collaboratively, and involve people from multiple interests and

    disciplines in the process.
46. 46.

    None
47. 47.

    It helps to use a common point of reference from

    the real world as a visual metaphor.
48. 48.

    Brackets

49. 49.

    Spotlight

50. 50.

    Progress toggle button ?

51. 51.

    Binary radio button ?

52. 52.

    Minions

53. 53.

    Boss

54. 54.

    there can be many minions…

55. 55.

    but only one Boss

56. 56.

    None
57. 57.

    Names with personality are easier to remember. They stick around

    and inspire other names.
58. 58.

    Image courtesy of EBI, Cambridge, UK

59. 59.

    Image courtesy of EBI, Cambridge, UK

60. 60.

    Whisper box

61. 61.

    Boom box

62. 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. 63.

    None
64. 64.

    None
65. 65.

    Whisper box

66. 66.

    None
67. 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. 68.

    Image courtesy of Eurostar, London

69. 69.

    Image courtesy of Eurostar, London

70. 70.

    You can see this shared language as a precise way

    of describing someone’s experience of your site.
71. 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. 72.

    How to achieve consistency without detailed design specs.

73. 73.

    None
74. 74.

    Some designers like generous spacing. Others prefer it more cosy.

    What do I do…? Developer at FutureLearn “
75. 75.

    None
76. 76.

    None
77. 77.

    None
78. 78.

    None
79. 79.

    Spacious Typographic contrast: high Spacing: “spacious”

80. 80.

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

    Spacing: “regular”
81. 81.

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

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

    Spacious Regular Cosy

83. 83.

    None
84. 84.

    Define visual patterns and connections across the system.

85. 85.

    None
86. 86.

    None
87. 87.

    To sum up

88. 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. 89.

    If you get the function of a module right, it

    can become a stable point that connects the system.
90. 90.

    https://www.futurelearn.com/pattern-library

91. 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!