Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Beyond usability

457 vues

Publié le

From the talk of the same name given first at UX Cambridge 2016.
An exploration into the creation of a design system, and the unexpected consequences for the field of UX.

Publié dans : Design
  • Soyez le premier à commenter

Beyond usability

  1. 1. Beyond usability 🚀 UX Cambridge 2016 Jonathan Roberts User Experience Designer @touchdeluxe “I invented the term [User Experience] because I thought human interfaces and usability were too narrow” - Don Norman (http://adaptivepath.org/ideas/e000862/)
  2. 2. @touchdeluxe Introduction ▸ Design systems Beyond usability Credit: Airbus and David Benjamin/The Living, an Autodesk Studio https://medium.com/ideas-by-design/why-design-is-going-to-become-a-team-sport-for-humans-machines-9ba22e1a4aa3#.cogyvwtto http://www.autodesk.com/customer-stories/airbus?_ga=1.196619116.1704246085.1473709732
  3. 3. An overview About this talk, what we’re going to cover ↓ Design systems Why they’re necessary, how to start building one and mistakes to avoid ↓ Beyond usability What you should be doing with your new design system powers @touchdeluxe ▸ Introduction Design systems Beyond usability
  4. 4. Me I’ve been designing products for ~10 years, mostly enterprise software and consumer IoT products, always client-side within the engineering/product team @touchdeluxe ▸ Introduction Design systems Beyond usability
  5. 5. Redgate Software-for-software-people, in Cambridge Usability was always the a differentiator… ...now it’s a basic expectation @touchdeluxe ▸ Introduction Design systems Beyond usability
  6. 6. Design Systems @touchdeluxe Introduction ▸ Design systems Beyond usability
  7. 7. @touchdeluxe Introduction ▸ Design systems Beyond usability Credit: Salesforce https://developer.salesforce.com/lightning
  8. 8. @touchdeluxe Introduction ▸ Design systems Beyond usability Credit: Airbnb http://airbnb.design/building-a-visual-language/
  9. 9. @touchdeluxe Introduction ▸ Design systems Beyond usability Credit: Google Material Design https://material.google.com/
  10. 10. @touchdeluxe Introduction ▸ Design systems Beyond usability Credit: Google Material Design https://medium.com/ge-design/ges-predix-design-system-8236d47b0891#.hth8jo41p
  11. 11. @touchdeluxe Introduction ▸ Design systems Beyond usability Credit: Mina Markham https://medium.com/git-out-the-vote/pantsuit-the-hillary-clinton-ui-pattern-library-238e9bf06b54#.wci8t5uz1
  12. 12. @touchdeluxe Introduction ▸ Design systems Beyond usability Consistency “It’s a coordinated effort to apply a common design style to everything we do” Credit: https://www.red-gate.com/blog/building/honeycomb-design-style
  13. 13. @touchdeluxe Introduction ▸ Design systems Beyond usability atomicdesign.bradfrost.com
  14. 14. Building Redgate’s Design System, Honeycomb @touchdeluxe Introduction ▸ Design systems Beyond usability
  15. 15. @touchdeluxe Introduction ▸ Design systems Beyond usability A foundation to build on, some internal marketing and full support a C-level
  16. 16. @touchdeluxe Introduction ▸ Design systems Beyond usability Design Week
  17. 17. @touchdeluxe Introduction ▸ Design systems Beyond usability Design WeekDesign Week
  18. 18. @touchdeluxe Introduction ▸ Design systems Beyond usability Design Week
  19. 19. @touchdeluxe Introduction ▸ Design systems Beyond usability Design Week
  20. 20. Preparation @touchdeluxe Introduction ▸ Design systems Beyond usability Current Future
  21. 21. @touchdeluxe Introduction ▸ Design systems Beyond usability Design Week
  22. 22. Component cut-up workshop (the 10 minute version 🕑) @touchdeluxe Introduction ▸ Design systems Beyond usability Credit: https://medium.com/eightshapes-llc/the-component-cut-up-workshop-1378ae110517#.amctpik38
  23. 23. @touchdeluxe Introduction ▸ Design systems Beyond usability Task 1 ~ 30 seconds ~ Choose an “atom”
  24. 24. @touchdeluxe Introduction ▸ Design systems Beyond usability Task 2 ~ 5 minutes ~ Cut out all the examples of your chosen component
  25. 25. @touchdeluxe Introduction ▸ Design systems Beyond usability Task 3 ~ 4 minutes ~ Begin to group your components
  26. 26. Honeycomb honeycomb.red-gate.com @touchdeluxe Introduction ▸ Design systems Beyond usability
  27. 27. @touchdeluxe Introduction ▸ Design systems Beyond usability #Honeycomb We should have put a team on it full time
  28. 28. @touchdeluxe Introduction ▸ Design systems Beyond usability Implementation Avoid asserting the use of a single tech
  29. 29. @touchdeluxe Introduction ▸ Design systems Beyond usability What’s next in the sequence? 1 11 21 1211 111221 ….?
  30. 30. @touchdeluxe Introduction ▸ Design systems Beyond usability What’s next in the sequence? 1 11 21 1211 111221 31 22 11
  31. 31. @touchdeluxe Introduction ▸ Design systems Beyond usability Consistency for consistency’s sake… 😓
  32. 32. @touchdeluxe Introduction ▸ Design systems Beyond usability
  33. 33. @touchdeluxe Introduction ▸ Design systems Beyond usability
  34. 34. @touchdeluxe Introduction ▸ Design systems Beyond usability
  35. 35. Critical mass of 3 @touchdeluxe Introduction ▸ Design systems Beyond usability Credit: https://www.youtube.com/watch?v=GA8z7f7a2Pk
  36. 36. Your new Design System (and how to take advantage of it) @touchdeluxe Introduction ▸ Design systems Beyond usability
  37. 37. @touchdeluxe Introduction ▸ Design systems Beyond usability Think abductively The most likely one is probably the right one Resource: http://www.jonkolko.com/writingAbductiveThinking.php
  38. 38. @touchdeluxe Introduction ▸ Design systems Beyond usability
  39. 39. @touchdeluxe Introduction ▸ Design systems Beyond usability “...so what is it you do?” Good question
  40. 40. What to do? (now you’ve got all this time) @touchdeluxe Introduction Design systems ▸ Beyond usability
  41. 41. 1 Be responsible for team learning @touchdeluxe Introduction Design systems ▸ Beyond usability
  42. 42. @touchdeluxe Introduction Design systems ▸ Beyond usability Image credit: http://www.usaswimming.org/ViewNewsArticle.aspx?TabId=0&itemid=4368&mid=8712
  43. 43. @touchdeluxe Introduction Design systems ▸ Beyond usability Question assumptions and build team intrigue through question gathering
  44. 44. @touchdeluxe Introduction Design systems ▸ Beyond usability
  45. 45. @touchdeluxe Introduction Design systems ▸ Beyond usability
  46. 46. @touchdeluxe Introduction Design systems ▸ Beyond usability Resource: http://www.slideshare.net/johannakollmann/understanding-systems Credit: http://proceedings.informingscience.org/IS2002Proceedings/papers/Horan133Newan.pdf
  47. 47. 2 Contribute to innovation @touchdeluxe Introduction Design systems ▸ Beyond usability
  48. 48. @touchdeluxe Introduction Design systems ▸ Beyond usability Credit: http://www.slideshare.net/ISITEDesign/delight-2013-jared-spool-of-uie
  49. 49. @touchdeluxe Introduction Design systems ▸ Beyond usability Image credit: https://twitter.com/wapadam/status/662606961800781824
  50. 50. 3 Uphold your principles @touchdeluxe Introduction Design systems ▸ Beyond usability
  51. 51. @touchdeluxe Introduction Design systems ▸ Beyond usability Principles Recover from mistakes Prevent them Imbue trust Facilitate conversation
  52. 52. In summary @touchdeluxe Introduction Design systems ▸ Beyond usability
  53. 53. Beyond usability 🚀 UX Cambridge 2016 Jonathan Roberts User Experience Designer @touchdeluxe Thank you!

×