Building A Cross-Platform UI

7c27ee76e6c0b425bc46263041dc0ee7?s=47 Andreas Wissel
August 09, 2017

Building A Cross-Platform UI

How To Design UI Components That Scale

7c27ee76e6c0b425bc46263041dc0ee7?s=128

Andreas Wissel

August 09, 2017
Tweet

Transcript

  1. Building A Cross-Platform UI How To Design UI Components That

    Scale 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. 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
  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
  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. 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
  8. FAB: Emphasize The Most Important Action Smart Responsive UI Patterns

  9. Pop-out FAB Smart Responsive UI Patterns Works very well for

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

    but when you need the user’s focus undivided attention
  11. Morphing FAB Smart Responsive UI Patterns Use carefully Too much

    morphing is distracting
  12. Multiple FABs Smart Responsive UI patterns

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

    patterns Do!
  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
  15. Multiple Cards In A Grid Smart Responsive UI Patterns

  16. Cards As Overviews Smart Responsive UI Patterns

  17. Bad Move: Too Much Text On Dense Cards Smart Responsive

    UI Patterns Lot’s of text, not enough visual cues
  18. Better: Give It Some Structure Smart Responsive UI Patterns

  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
  20. Using The Hamburger To Stow Rarely Used Stuff Smart Responsive

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

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

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

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

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

    example]
  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
  27. Can Lead Focus How Animations Can Help You

  28. Can Help Visualize Workflows How Animations Can Help You

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

  30. Pretty But Useless Animations How Animations Can Help You Looks

    good, but just steals my time
  31. React To Your User’s Input Gather information from what the

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

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

    current location after someone asked for it Context Based Actions
  34. Thanks everyone for listening to my blabbering. Any questions? @andreas_wissel

    That’s it!