Real World UX - Tales From The Land Of The Thousand Buttons

7c27ee76e6c0b425bc46263041dc0ee7?s=47 Andreas Wissel
October 28, 2017

Real World UX - Tales From The Land Of The Thousand Buttons

7c27ee76e6c0b425bc46263041dc0ee7?s=128

Andreas Wissel

October 28, 2017
Tweet

Transcript

  1. Real World UX Tales From the Land of the 1000

    Buttons Andreas Wissel @andreas_wissel UX Engineer
  2. The guy right next to the screen Doing UI, UX

    & Frontend development @ Thinktecture andreas.wissel@thinktecture.com @andreas_wissel Andreas Wissel
  3. Introduce yourself Why do we even need UX? How and

    when to use UI frameworks Smart UI patterns Context-Based Actions Convincing stakeholders Approaching redesigns What We Will Do Today
  4. Ask questions – a lot! Tell us about your own

    experiences and problems Don’t be afraid to speak up What You Have To Do Today
  5. IT crowds aim to solve problems for the outside world

    We need to relate to people Engineers need to relate to people’s problems as well Why Do We Even Need UX?
  6. Frameworks work well when used as guidelines Be prepared to

    bend or break the rules Sometimes it won’t fit Don’t shoehorn your app into frameworks How And When To Use UI Frameworks
  7. FAB: Emphasize The Most Important Action Smart Responsive UI Patterns

  8. Floa%ng Ac%on Bu-on (FAB): The New Allstar Work well for

    frequently used actions Emphasize the most important action Multiple FABs can work as well Don’t overuse them Keep them simple – don’t put each and every action there Smart Responsive UI Patterns
  9. Pop-out FAB Smart Responsive UI Patterns Works very well for

    grouping ac:ons Grouped ac:ons should be related
  10. Modal pop-out FAB Smart Responsive UI patterns Same as before,

    but when you need the user’s focus undivided a>en?on
  11. Morphing FAB Smart Responsive UI Patterns Use carefully Too much

    morphing is distracting
  12. Mul$ple FABs Smart Responsive UI patterns

  13. FAB: Do’s and Don’ts Please, please don’t (seriously… please !)

    Smart Responsive UI patterns Do!
  14. Using The Hamburger To Stow Rarely Used Stuff Smart Responsive

    UI Patterns
  15. Hamburger Menu: How To Leverage A “Bad” Pa8ern Shouldn’t be

    your main navigation Work well as ”link dumps” Benefit from procedural knowledge Usually hard to reach on mobile Smart Responsive UI Patterns
  16. Using The Hamburger To Stow Rarely Used Stuff Smart Responsive

    UI Patterns
  17. Hamburger-Fail: Bad Placement Smart Responsive UI Patterns Right Idea, but:

    Weird placement Not immediately obvious
  18. Decluttering The UI Find the main task of your application

    Make it as prominent as possible Focusing On What’s Important
  19. Prominent Main Task: Google Maps’ Map Focusing On What’s Important

  20. Bad: Everything Is Equally Important Focusing On What’s Important [nega9ve

    example]
  21. Hands-on Time Time to get your hands dirty and scribble

    something yourself! ✍
  22. Kill the dinosaur! Hands-on Time [negative example]

  23. Elevator pitches Pitch us your ideas

  24. Short break Grab some pizza! !

  25. React To Your User’s Input Gather information from what the

    user is doing React to this by offering shortcuts Context Based Actions
  26. React To Your User’s Input Google Maps offers to share

    your location after taking a screenshot Context Based Actions
  27. React To Your User’s Input iMessage offers to send your

    current location after someone asked for it Context Based Actions
  28. Hands on time! Time to get your hands dirty and

    scribble something yourself! ✍
  29. Please no clippy 2.0 Hands-on Time [nega2ve example]

  30. Elevator pitches Pitch us your ideas

  31. Or how to stop “make it pop“ Convincing stakeholders [content]

  32. War stories from a serial redesigner Approaching Redesigns Users will

    always be angry Don’t ever roll back (except for catastrophic failures) How to avoid catastrophic failures (user testing, beta versions, release management) How to redesign parts of an app Working iteratively Wikipedia example: search picture + user ranting
  33. Thanks everyone for listening to my blabbering. Any questions? [Speakerdeck

    Link] @andreas_wissel That’s it!