Building A Cross-Platform UI

How To Design UI Components That Scale

Transcript

1. Building A Cross-Platform UI
   How To Design UI Components That Scale
   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. Why Do We Even Need UX?
   How And When To Use UI frameworks
   Smart Responsive UI Patterns
   Focusing On What’s Important
   How Animations Can Help You Build A Better User Experience
   Context-Based Actions
   What We Will Talk About Today
   

   View Slide

4. How to implement this stuff.
   I will be talking about this at the .NET UG and I’d love to see you there though!
   .NET User Group Karlsruhe
   14. September 2017 - 6pm
   http://dotnet-ka.de
   What We Won’t Talk About 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. Floating Action Button (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

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

   View Slide

9. Pop-out FAB
   Smart Responsive UI Patterns
   Works very well for grouping actions
   Grouped actions 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 attention
    

    View Slide

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

    View Slide

12. Multiple FABs
    Smart Responsive UI patterns
    

    View Slide

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

    View Slide

14. Cards: The Allrounder
    Good for self-contained items
    Should lead to a detail view
    Benefits from prominent headers
    Benefits from more features on bigger screens
    Smart Responsive UI Patterns
    

    View Slide

15. Multiple Cards In A Grid
    Smart Responsive UI Patterns
    

    View Slide

16. Cards As Overviews
    Smart Responsive UI Patterns
    

    View Slide

17. Bad Move: Too Much Text On Dense Cards
    Smart Responsive UI Patterns
    Lot’s of text, not enough visual cues
    

    View Slide

18. Better: Give It Some Structure
    Smart Responsive UI Patterns
    

    View Slide

19. Hamburger Menu: How To Leverage A “Bad” Pattern
    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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

25. Bad: Everything Is Equally Important
    Focusing On What’s Important
    [negative example]
    

    View Slide

26. Make It Clear What Happens On The Screen
    Motion provides meaning
    Gives a more natural feeling to your UI
    Visualize “behind the scenes” stuff
    Good for visualizing workflows
    Natural motion isn’t linear
    How Animations Can Help You
    

    View Slide

27. Can Lead Focus
    How Animations Can Help You
    

    View Slide

28. Can Help Visualize Workflows
    How Animations Can Help You
    

    View Slide

29. Natural Motion Isn’t Linear
    How Animations Can Help You
    

    View Slide

30. Pretty But Useless Animations
    How Animations Can Help You
    Looks good, but just steals my time
    

    View Slide

31. 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

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

    View Slide

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

    View Slide

34. Thanks everyone for listening to my blabbering.
    Any questions?
    @andreas_wissel
    That’s it!
    

    View Slide