Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Designing For The Gap

1.397 visualizaciones

Publicado el

UX as a discipline is made up of a number of micro-disciplines: information architects, interaction designers, user researchers, visual designers, etc. Seemingly new titles are invented every few weeks. During a project many of us wear multiple hats, and it can be difficult to straddle these often conflicting roles, and to bridge the gaps between them.

Added to this, we're only human and it's natural that we get drawn towards the activities we enjoy. On a good day we might be able to spot this happening and mediate our actions accordingly, but if we're not careful it can be all too easy for us to gloss over the tricksy stuff in favour of the shiny, the sexy or the seemingly simple.

However, complex systems have many nooks and crannies that are easy to miss and if we don't deal with them early on, the bits that we subconsciously gloss over will come back to haunt us.

Over the last couple of years I've developed an approach that helps ensure these tricksy areas of our systems don't fall between the cracks in our own bias.

Using an approach that combines the documenting of system flows and user journeys iteratively alongside key stakeholders, domain experts, business analysts, designers, developers, and other disciplines. I've found a way of capturing what happens between our pages, so we can design for the edge and the problem cases, and so we can design for the gaps.

Publicado en: Diseño
  • Sé el primero en comentar

Designing For The Gap

  1. 1. @quiffboy @umbracoUKfest #umbukfest 4 Nov 2016 Designing For The Gap
  2. 2. Quasi-provocative rhetorical question:
  3. 3. GODDAMN. TIME.EVERY.
  4. 4. Another potentially provocative statement:
  5. 5. From @jcolman:
  6. 6. Start Launch app Launch app Is logged in? BBC ID sign in/ register process Sign in or register Upsell & sign in process Onboarding process Sign inNo Yes Has onboarded? No Home screen Yes Done Content Done View item End Share Native share panel Close app ShareUser shares content Done Why am I stood here?
  7. 7. @quiffboy
  8. 8. Northern User Experience Manchester ~ Leeds ~ Newcastle ~ Liverpool nuxuk.org ~ @nuxuk
  9. 9. But that’s irrelevant
  10. 10. Let’s talk about gaps, baby…
  11. 11. Designing complex systems is hard, right?
  12. 12. If you don’t design systems, they just happen
  13. 13. Many techniques for gathering information are inefficient
  14. 14. Page A Page B Is this true? Page C Page D Yes No Link label Link label Start End End Standard flow chart notation PDFDownload
  15. 15. How >= What
  16. 16. How? 1. Start with a zoomed out view 2. Agree the high-level flow quickly 3. Don’t get hung up on the detail (yet!)
  17. 17. Start Onboarding screens Content Home screenEnd Launch app Sign in Done View itemClose app Done Upsell & sign in
  18. 18. And then… 1. Identify stakeholders for each part of the system 2. Work with them to flesh out detail on their part 3. Continually iterate, validate and distribute 4. Fill in those gaps
  19. 19. Start Launch app Launch app Is logged in? BBC ID sign in/ register process Sign in or register Upsell & sign in process Onboarding process Sign inNo Yes Has onboarded? No Home screen Yes Done Content Done View item End Share Native share panel Close app ShareUser shares content Done BBC ID sign in/ register process Upsell & sign in process Onboarding process Content
  20. 20. Start Launch app Launch app Is logged in? BBC ID sign in/ register process Sign in or register Upsell & sign in process Onboarding process Sign inNo Yes Has onboarded? No Home screen Yes Done Content Done View item End Share Native share panel Close app ShareUser shares content Done BBC ID sign in/ register process Upsell & sign in process Onboarding process Content The bit users care about Complex sub-process Complex sub-process Complex sub-process
  21. 21. Start Launch app Launch app Is logged in? BBC ID sign in/ register process Sign in or register Upsell & sign in process Onboarding process Sign inNo Yes Has onboarded? No Home screen Yes Done Content Done View item End Share Native share panel Close app ShareUser shares content Done BBC ID sign in/ register process Upsell & sign in process Onboarding process Content
  22. 22. Start Launch app Launch app Is logged in? BBC ID sign in/ register process Sign in or register Upsell & sign in process Onboarding process Sign inNo Yes Has onboarded? No Home screen Yes Done Content Done View item End Share Native share panel Close app ShareUser shares content Done 2 1 Needs clarification Integration point
  23. 23. Keys are key
  24. 24. Journey start or end Page Document Group of pages Key Action 3rd-party integration TBC Manual operation Decision Inline update Automated operation Workflow outlined elsewhere in doc
  25. 25. If you really wanna get fancy…
  26. 26. Upsell screen(s) Home screen
  27. 27. ID 1Upsell screen(s) ID 2Home screen Give ‘em an ID
  28. 28. Carousel of 3 panels: - Upsell message - Image of key feature Sign in button Register button ID 1Upsell screen(s) Menu icon Welcome message + user’s first name List of exam subjects: - Subject name - Subject icon - Read/unread flag - % complete ID 2Home screen List the elements on page Give ‘em an ID
  29. 29. My thing is better than your thing
  30. 30. So. Many. Tools.
  31. 31. Something to point at
  32. 32. Allows working in parallel
  33. 33. Iterative and incremental
  34. 34. UML? My arse!
  35. 35. Easily understood
  36. 36. Shared understanding
  37. 37. Stakeholder ownership
  38. 38. Empowerment
  39. 39. Got that?
  40. 40. Quick recap This thing is awesome Visualises complex systems It’s (fairly) quick to do It’s (fairly) easy to understand Living, evolving document No gaps
  41. 41. Remember this?
  42. 42. Where I stole those images from… • 360-degree corkscrew stunt in James Bond movie The Man with the Golden Gun • Alligator & Model, Florida, 1950s • Polar Bear (Ursus maritimus) close-up. Hudson Bay, Churchill, Manitoba, Canada • 15 surprising facts about cars • Bad Bacteria • W1A • Here’s one we made earlier • Fallout Vault Boy • Kim Jong Un Looking at Things • Café wall illusion • Two stone tablets • UML Diagram • Europe's longest place name • Star Trek TOS Season 2: My Top 5 Fave Episodes • You Are Mine • My Hero • Agent Cooper's famous thumbs up • Toowong railway station in Brisbane, Australia
  43. 43. Questions? Thanks :) @quiffboy @umbracoUKfest #umbukfest 4 Nov 2016

×