Atoms, Modules And Other Fancy Particles - Part II

Transcript

1. Part II ATOMS, MODULES AND OTHER FANCY PARTICLES Alla Kholmatova @craftui 14 June 2016
3. https://www.futurelearn.com/pattern-library
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
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.
35. Billboard Focus user’s attention on our most important action. Page header Introduce the page.
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.
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.
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
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.
65. Whisper box
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.
74. Some designers like generous spacing. Others prefer it more cosy. What do I do…? Developer at FutureLearn “
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
84. Define visual patterns and connections across the system.
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!