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 full-size slide

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

    View full-size slide

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

    View full-size slide

  4. 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 full-size slide

  5. How to understand the
    function of a module.

    View full-size slide

  6. Interface inventory at FutureLearn, 2014

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. Image courtesy of Eurostar, London

    View full-size slide

  10. Image courtesy of Eurostar, London

    View full-size slide

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

    View full-size slide

  12. 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 full-size slide

  13. 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 full-size slide

  14. 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 full-size slide

  15. 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 full-size slide

  16. Snapshot
    Key selling points of
    the train journey.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. Snapshot
    Key selling points of
    the train journey.

    View full-size slide

  21. • 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  24. 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 full-size slide

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

    View full-size slide

  26. “Course poster” – ?

    View full-size slide

  27. “Discussion” – ?

    View full-size slide

  28. “Billboard”
    “Billboard”

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  31. Present a list of
    shortlisted books.

    View full-size slide

  32. “Signpost”
    “Signpost”
    (Compact)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. “Content block”
    GENERIC

    View full-size slide

  36. “Events module”
    SPECIFIC

    View full-size slide

  37. “Course tabs”

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  40. Progress toggle button
    ?

    View full-size slide

  41. Binary radio button
    ?

    View full-size slide

  42. there can be many minions…

    View full-size slide

  43. but only one Boss

    View full-size slide

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

    View full-size slide

  45. Image courtesy of EBI, Cambridge, UK

    View full-size slide

  46. Image courtesy of EBI, Cambridge, UK

    View full-size slide

  47. 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 full-size slide

  48. 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 full-size slide

  49. Image courtesy of Eurostar, London

    View full-size slide

  50. Image courtesy of Eurostar, London

    View full-size slide

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

    View full-size slide

  52. 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 full-size slide

  53. How to achieve
    consistency without
    detailed design specs.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  58. Spacious
    Regular
    Cosy

    View full-size slide

  59. Define visual patterns and
    connections across the system.

    View full-size slide

  60. • 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  63. 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 full-size slide