Beyond Whitespace: Designing For Complex Content (2016)

We’re all enamored with the minimalist websites that employ only the most essential use of color, images, and space. But what happens when the volume of information can’t be boiled down to something that simple? We’ll explore how to use design principles to organize and display elaborate user experiences like mega-menus, massive news sites, high-information catalog pages, and multi-level interactions.

Transcript

1. BEYOND
   WHITESPACE
   DESIGNING FOR COMPLEX CONTENT
   

   View Slide

2. @marktimemedia
   I
   Design
   THINGS.
   USUALLY
   WORDPRESS.
   HI, I’M
   MICHELLE.
   

   View Slide

3. @marktimemedia
   SIMPLICITY
   

   View Slide

4. @marktimemedia
   SIMPLICITY: THE CONCEPT
   Apple
   

   View Slide

5. @marktimemedia
   SIMPLICITY: THE TREND
   via @TimCaynes
   

   View Slide

6. @marktimemedia
   WHEN CONTENT ISN’T SIMPLE
   

   View Slide

7. @marktimemedia
   FLYING AN AIRPLANE
   

   View Slide

8. @marktimemedia
   FLYING AN AIRPLANE
   

   View Slide

9. @marktimemedia
   FLYING AN AIRPLANE
   

   View Slide

10. @marktimemedia
    “Everything should be made
    as simple as possible,
    but not simpler.”
    — Albert Einstein
    

    View Slide

11. @marktimemedia
    FORCED
    SIMPLICITY
    VS.
    EMBRACED
    COMPLEXITY
    

    View Slide

12. @marktimemedia
    FORCED SIMPLICITY
    HIDDEN
    MULTIPLE CLICKS
    COUNTERINTUITIVE
    MISSING INFORMATION
    

    View Slide

13. @marktimemedia
    EMBRACECD COMPLEXITY
    USER CONTROLLED
    (NOT AGENT-DIRECTED)
    SCANNABLE
    ACCESSIBLE
    

    View Slide

14. @marktimemedia
    COMPLEX DATA:
    ENTERPRISE
    APPLICATIONS
    

    View Slide

15. @marktimemedia
    ENTERPRISE SOFTWARE
    

    View Slide

16. @marktimemedia
    ENTERPRISE USERS
    SPECIALIZED
    MANDATED
    COMPARTMENTALIZED
    MISSION
    CRITICAL
    

    View Slide

17. @marktimemedia
    DESIGNING FOR
    ENTERPRISE
    

    View Slide

18. @marktimemedia
    EFFICIENCY > BEAUTY
    ENTERPRISE
    DESIGN
    

    View Slide

19. @marktimemedia
    FRICTIONLESS > DELIGHTFUL
    ENTERPRISE
    DESIGN
    

    View Slide

20. @marktimemedia
    COMPLEX DATA:
    CONSUMER
    APPLICATIONS
    

    View Slide

21. @marktimemedia
    NEWS & DATA
    Newsweek
    

    View Slide

22. @marktimemedia
    NICHE MARKETS
    Stentofon
    

    View Slide

23. @marktimemedia
    ECOMMERCE
    MoMA
    

    View Slide

24. @marktimemedia
    ADMIN & HOME SCREENS
    My Name Is Michelle/WordPress
    

    View Slide

25. @marktimemedia
    HOW TO BE
    COMPLEX
    WITHOUT BEING
    COMPLICATED
    

    View Slide

26. @marktimemedia
    “Clutter and overload are not an
    attribute of information, they
    are failures of design.
    If the information is in chaos,
    instead fix the design.”
    — Edward Tufte
    

    View Slide

27. @marktimemedia
    GRAPHIC DESIGN
    REDUCE CLUTTER,
    NOT CONTENT
    

    View Slide

28. @marktimemedia
    DESIGN PRINCIPLES
    IEEE Software Technology Conference
    

    View Slide

29. @marktimemedia
    MINIMIZE VISUAL NOISE
    Weather Underground
    

    View Slide

30. @marktimemedia
    PROTOTYPICAL PATTERNS
    UX Patterns/MoMA
    

    View Slide

31. @marktimemedia
    INTERNAL PATTERNS
    Fast Company / ESPN
    

    View Slide

32. @marktimemedia
    CHUNKING
    CNN Money
    

    View Slide

33. @marktimemedia
    CHUNKING
    Apple
    

    View Slide

34. @marktimemedia
    GOAL:
    INFORMATION IS READABLE,
    ACCESSIBLE, & LOGICAL
    

    View Slide

35. @marktimemedia
    ADJACENT
    IN SPACE
    

    View Slide

36. @marktimemedia
    PHONE SCREEN
    YouTube
    

    View Slide

37. @marktimemedia
    CARD LAYOUTS
    Pinterest
    

    View Slide

38. @marktimemedia
    MEGA MENUS
    Maplin
    

    View Slide

39. @marktimemedia
    MEGA MENUS
    Sliderobes
    

    View Slide

40. @marktimemedia
    STACKED
    IN TIME
    

    View Slide

41. @marktimemedia
    STAGED DISCLOSURE
    

    View Slide

42. @marktimemedia
    ISN’T THIS
    GOING TO BE
    CONFUSING?
    

    View Slide

43. @marktimemedia
    WHAT ABOUT
    “DECISIONS NOT
    OPTIONS?”
    

    View Slide

44. @marktimemedia
    DECISION FATIGUE
    VS.
    EMPOWERED USER
    

    View Slide

45. @marktimemedia
    UX DESIGN
    GUIDING WITHOUT
    RESTRICTING
    

    View Slide

46. @marktimemedia
    ONBOARDING
    

    View Slide

47. @marktimemedia
    VIDEO GAMES
    

    View Slide

48. @marktimemedia
    SETUP & PROCESS
    blog.intercom.io/ LinkedIn
    

    View Slide

49. @marktimemedia
    ONGOING GAMIFICATION
    blog.intercom.io/ LinkedIn
    

    View Slide

50. @marktimemedia
    PROGRESSIVE
    DISCLOSURE
    

    View Slide

51. @marktimemedia
    CONTEXTUAL DISCLOSURE
    The Events Calendar
    

    View Slide

52. @marktimemedia
    CONTEXTUAL DISCLOSURE
    The Events Calendar
    

    View Slide

53. @marktimemedia
    CONTEXTUAL DISCLOSURE
    The Events Calendar
    

    View Slide

54. @marktimemedia
    CLICK TO VIEW MORE
    Twitter
    

    View Slide

55. @marktimemedia
    FILTERING
    & SEARCH
    

    View Slide

56. @marktimemedia
    SEARCH + AUTOCOMPLETE
    Client Project
    

    View Slide

57. @marktimemedia
    FILTERING
    Amazon
    

    View Slide

58. @marktimemedia
    TAXONOMIES
    A List Apart
    

    View Slide

59. @marktimemedia
    COLUMNS
    My Name Is Michelle / WooCommerce
    

    View Slide

60. @marktimemedia
    ORIENTATION
    & FEEDBACK
    

    View Slide

61. @marktimemedia
    TOOLTIPS
    

    View Slide

62. @marktimemedia
    ERROR/VALIDATION MESSAGE
    MailChimp
    

    View Slide

63. @marktimemedia
    PROGRESS BARS
    

    View Slide

64. @marktimemedia
    PROGRESS BARS
    

    View Slide

65. @marktimemedia
    BREADCRUMBS
    Amazon / CNN / MoMA
    

    View Slide

66. @marktimemedia
    GOAL:
    REDUCE DECISION FATIGUE
    & ENABLE POWER USERS
    

    View Slide

67. @marktimemedia
    RESOURCES
    • Nielsen Norman Group
    https://www.nngroup.com/articles/
    • A List Apart
    http://alistapart.com/article/ux-for-the-enterprise
    • Uday Gajendar
    https://medium.com/@udanium/why-i-design-
    enterprise-ux-fa74e9f12671#.5tek1yke8
    • Edward Tufte
    http://www.edwardtufte.com/bboard/
    

    View Slide

68. @marktimemedia
    QUESTIONS?
    Michelle Schulp
    michelle@marktimemedia.com
    @marktimemedia
    bit.ly/complex-design
    

    View Slide