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

Transcript

1. Real World UX
   Tales From the Land of the 1000 Buttons
   Andreas Wissel
   @andreas_wissel
   UX Engineer
   

   View Slide

2. The guy right next to the screen
   Doing UI, UX & Frontend development @ Thinktecture
   andreas.wissel@thinktecture.com
   @andreas_wissel
   Andreas Wissel
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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?
   

   View Slide

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
   

   View Slide

7. FAB: Emphasize The Most Important Action
   Smart Responsive UI Patterns
   

   View Slide

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
   

   View Slide

9. Pop-out FAB
   Smart Responsive UI Patterns
   Works very well for grouping ac:ons
   Grouped ac:ons should be related
   

   View Slide

10. Modal pop-out FAB
    Smart Responsive UI patterns
    Same as before, but when you need the
    user’s focus undivided a>en?on
    

    View Slide

11. Morphing FAB
    Smart Responsive UI Patterns
    Use carefully
    Too much morphing is distracting
    

    View Slide

12. Mul$ple FABs
    Smart Responsive UI patterns
    

    View Slide

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

    View Slide

14. Using The Hamburger To Stow Rarely Used Stuff
    Smart Responsive UI Patterns
    

    View Slide

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
    

    View Slide

16. Using The Hamburger To Stow Rarely Used Stuff
    Smart Responsive UI Patterns
    

    View Slide

17. Hamburger-Fail: Bad Placement
    Smart Responsive UI Patterns
    Right Idea, but:
    Weird placement
    Not immediately obvious
    

    View Slide

18. Decluttering The UI
    Find the main task of your application
    Make it as prominent as possible
    Focusing On What’s Important
    

    View Slide

19. Prominent Main Task: Google Maps’ Map
    Focusing On What’s Important
    

    View Slide

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

    View Slide

21. Hands-on Time
    Time to get your hands dirty and scribble something yourself! ✍
    

    View Slide

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

    View Slide

23. Elevator pitches
    Pitch us your ideas
    

    View Slide

24. Short break
    Grab some pizza! !
    

    View Slide

25. React To Your User’s Input
    Gather information from what the user is doing
    React to this by offering shortcuts
    Context Based Actions
    

    View Slide

26. React To Your User’s Input
    Google Maps offers to share your location after taking a
    screenshot
    Context Based Actions
    

    View Slide

27. React To Your User’s Input
    iMessage offers to send your current location after someone asked
    for it
    Context Based Actions
    

    View Slide

28. Hands on time!
    Time to get your hands dirty and scribble something yourself! ✍
    

    View Slide

29. Please no clippy 2.0
    Hands-on Time
    [nega2ve example]
    

    View Slide

30. Elevator pitches
    Pitch us your ideas
    

    View Slide

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

    View Slide

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
    

    View Slide

33. Thanks everyone for listening to my blabbering.
    Any questions?
    [Speakerdeck Link]
    @andreas_wissel
    That’s it!
    

    View Slide