Beyond Whitespace: Designing For Complex Content (2016)

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.

E195ae45320d9202eaa01c9f1d31a416?s=128

Michelle Schulp

April 25, 2016
Tweet

Transcript

  1. BEYOND WHITESPACE DESIGNING FOR COMPLEX CONTENT

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

  3. @marktimemedia SIMPLICITY

  4. @marktimemedia SIMPLICITY: THE CONCEPT Apple

  5. @marktimemedia SIMPLICITY: THE TREND via @TimCaynes

  6. @marktimemedia WHEN CONTENT ISN’T SIMPLE

  7. @marktimemedia FLYING AN AIRPLANE

  8. @marktimemedia FLYING AN AIRPLANE

  9. @marktimemedia FLYING AN AIRPLANE

  10. @marktimemedia “Everything should be made as simple as possible, but

    not simpler.” — Albert Einstein
  11. @marktimemedia FORCED SIMPLICITY VS. EMBRACED COMPLEXITY

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

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

  14. @marktimemedia COMPLEX DATA: ENTERPRISE APPLICATIONS

  15. @marktimemedia ENTERPRISE SOFTWARE

  16. @marktimemedia ENTERPRISE USERS SPECIALIZED MANDATED COMPARTMENTALIZED MISSION CRITICAL

  17. @marktimemedia DESIGNING FOR ENTERPRISE

  18. @marktimemedia EFFICIENCY > BEAUTY ENTERPRISE DESIGN

  19. @marktimemedia FRICTIONLESS > DELIGHTFUL ENTERPRISE DESIGN

  20. @marktimemedia COMPLEX DATA: CONSUMER APPLICATIONS

  21. @marktimemedia NEWS & DATA Newsweek

  22. @marktimemedia NICHE MARKETS Stentofon

  23. @marktimemedia ECOMMERCE MoMA

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

  25. @marktimemedia HOW TO BE COMPLEX WITHOUT BEING COMPLICATED

  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
  27. @marktimemedia GRAPHIC DESIGN REDUCE CLUTTER, NOT CONTENT

  28. @marktimemedia DESIGN PRINCIPLES IEEE Software Technology Conference

  29. @marktimemedia MINIMIZE VISUAL NOISE Weather Underground

  30. @marktimemedia PROTOTYPICAL PATTERNS UX Patterns/MoMA

  31. @marktimemedia INTERNAL PATTERNS Fast Company / ESPN

  32. @marktimemedia CHUNKING CNN Money

  33. @marktimemedia CHUNKING Apple

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

  35. @marktimemedia ADJACENT IN SPACE

  36. @marktimemedia PHONE SCREEN YouTube

  37. @marktimemedia CARD LAYOUTS Pinterest

  38. @marktimemedia MEGA MENUS Maplin

  39. @marktimemedia MEGA MENUS Sliderobes

  40. @marktimemedia STACKED IN TIME

  41. @marktimemedia STAGED DISCLOSURE

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

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

  44. @marktimemedia DECISION FATIGUE VS. EMPOWERED USER

  45. @marktimemedia UX DESIGN GUIDING WITHOUT RESTRICTING

  46. @marktimemedia ONBOARDING

  47. @marktimemedia VIDEO GAMES

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

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

  50. @marktimemedia PROGRESSIVE DISCLOSURE

  51. @marktimemedia CONTEXTUAL DISCLOSURE The Events Calendar

  52. @marktimemedia CONTEXTUAL DISCLOSURE The Events Calendar

  53. @marktimemedia CONTEXTUAL DISCLOSURE The Events Calendar

  54. @marktimemedia CLICK TO VIEW MORE Twitter

  55. @marktimemedia FILTERING & SEARCH

  56. @marktimemedia SEARCH + AUTOCOMPLETE Client Project

  57. @marktimemedia FILTERING Amazon

  58. @marktimemedia TAXONOMIES A List Apart

  59. @marktimemedia COLUMNS My Name Is Michelle / WooCommerce

  60. @marktimemedia ORIENTATION & FEEDBACK

  61. @marktimemedia TOOLTIPS

  62. @marktimemedia ERROR/VALIDATION MESSAGE MailChimp

  63. @marktimemedia PROGRESS BARS

  64. @marktimemedia PROGRESS BARS

  65. @marktimemedia BREADCRUMBS Amazon / CNN / MoMA

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

  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/
  68. @marktimemedia QUESTIONS? Michelle Schulp michelle@marktimemedia.com @marktimemedia bit.ly/complex-design