Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Atoms, Modules And Other Fancy Particles - Part II

Atoms, Modules And Other Fancy Particles - Part II

Alla Kholmatova

June 21, 2016
Tweet

More Decks by Alla Kholmatova

Other Decks in Design

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