Atoms, Modules And Other Fancy Particles - Part II

Transcript

1. Part II
   ATOMS, MODULES AND
   OTHER FANCY PARTICLES
   Alla Kholmatova @craftui
   14 June 2016
   

   View Slide

2. View Slide

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

   View Slide

4. View Slide

5. How do you create an
   enduring design system
   that people want to use?
   

   View Slide

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.
   

   View Slide

7. How to understand the
   function of a module.
   

   View Slide

8. Interface inventory at FutureLearn, 2014
   

   View Slide

9. View Slide

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

    View Slide

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

    View Slide

12. Image courtesy of Eurostar, London
    

    View Slide

13. Image courtesy of Eurostar, London
    

    View Slide

14. Sell a train journey to Paris
    Book a train ticket to Paris,
    Get inspired to go to Paris by train.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

19. Snapshot
    Key selling points of
    the train journey.
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

23. Snapshot
    Key selling points of
    the train journey.
    

    View Slide

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
    

    View Slide

25. How to give modules
    names that people will
    use and remember.
    

    View Slide

26. By naming objects we bring them
    into existence… we draw them out
    of nothingness.
    James Britton, Language & Learning
    “
    

    View Slide

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
    “
    

    View Slide

28. Try to define the function of
    a module in the context of the
    system, rather than a page.
    

    View Slide

29. “Course poster” – ?
    

    View Slide

30. “Discussion” – ?
    

    View Slide

31. “Billboard”
    “Billboard”
    

    View Slide

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

    View Slide

33. View Slide

34. View Slide

35. Billboard
    Focus user’s attention on
    our most important action.
    Page header
    Introduce the page.
    

    View Slide

36. View Slide

37. Present a list of
    shortlisted books.
    

    View Slide

38. “Signpost”
    “Signpost”
    (Compact)
    

    View Slide

39. Signpost - something that “sign posts”
    to another page, and a miniature
    representation of the page it links to.
    

    View Slide

40. View Slide

41. Sometimes it’s better to make
    the module generic, and
    sometimes more specific.
    Names should reflect that.
    

    View Slide

42. “Content block”
    GENERIC
    

    View Slide

43. “Events module”
    SPECIFIC
    

    View Slide

44. “Course tabs”
    

    View Slide

45. Name things collaboratively,
    and involve people from
    multiple interests and
    disciplines in the process.
    

    View Slide

46. View Slide

47. It helps to use a common
    point of reference from
    the real world as a visual
    metaphor.
    

    View Slide

48. Brackets
    

    View Slide

49. Spotlight
    

    View Slide

50. Progress toggle button
    ?
    

    View Slide

51. Binary radio button
    ?
    

    View Slide

52. Minions
    

    View Slide

53. Boss
    

    View Slide

54. there can be many minions…
    

    View Slide

55. but only one Boss
    

    View Slide

56. View Slide

57. Names with personality are
    easier to remember. They
    stick around and inspire
    other names.
    

    View Slide

58. Image courtesy of EBI, Cambridge, UK
    

    View Slide

59. Image courtesy of EBI, Cambridge, UK
    

    View Slide

60. Whisper box
    

    View Slide

61. Boom box
    

    View Slide

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.
    

    View Slide

63. View Slide

64. View Slide

65. Whisper box
    

    View Slide

66. View Slide

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.
    

    View Slide

68. Image courtesy of Eurostar, London
    

    View Slide

69. Image courtesy of Eurostar, London
    

    View Slide

70. You can see this shared
    language as a precise way of
    describing someone’s
    experience of your site.
    

    View Slide

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
    

    View Slide

72. How to achieve
    consistency without
    detailed design specs.
    

    View Slide

73. View Slide

74. Some designers like generous
    spacing. Others prefer it more
    cosy. What do I do…?
    Developer at FutureLearn
    “
    

    View Slide

75. View Slide

76. View Slide

77. View Slide

78. View Slide

79. Spacious
    Typographic contrast: high
    Spacing: “spacious”
    

    View Slide

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

    View Slide

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

    View Slide

82. Spacious
    Regular
    Cosy
    

    View Slide

83. View Slide

84. Define visual patterns and
    connections across the system.
    

    View Slide

85. View Slide

86. View Slide

87. To sum up
    

    View Slide

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.
    

    View Slide

89. If you get the function of a
    module right, it can become
    a stable point that connects
    the system.
    

    View Slide

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

    View Slide

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!
    

    View Slide