Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Andreas Wissel
October 28, 2017

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

Andreas Wissel

October 28, 2017
Tweet

More Decks by Andreas Wissel

Other Decks in Design

Transcript

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

    View full-size slide

  2. The guy right next to the screen
    Doing UI, UX & Frontend development @ Thinktecture
    [email protected]
    @andreas_wissel
    Andreas Wissel

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

  12. Mul$ple FABs
    Smart Responsive UI patterns

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. Elevator pitches
    Pitch us your ideas

    View full-size slide

  24. Short break
    Grab some pizza! !

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  30. Elevator pitches
    Pitch us your ideas

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide