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

Building A Cross-Platform UI

Andreas Wissel
August 09, 2017

Building A Cross-Platform UI

How To Design UI Components That Scale

Andreas Wissel

August 09, 2017

More Decks by Andreas Wissel

Other Decks in Design


  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 [email protected] @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. Pop-out FAB Smart Responsive UI Patterns Works very well for

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

    but when you need the user’s focus undivided attention
  10. 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
  11. Bad Move: Too Much Text On Dense Cards Smart Responsive

    UI Patterns Lot’s of text, not enough visual cues
  12. 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
  13. Decluttering The UI Find the main task of your application

    Make it as prominent as possible Focusing On What’s Important
  14. 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
  15. React To Your User’s Input Gather information from what the

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

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

    current location after someone asked for it Context Based Actions