Building A Cross-Platform UI - How To Design And Implement UI Components That Scale

How To Design And Implement UI Components That Scale

Transcript

1. Building A Cross-Platform UI How To Design And Implement 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. 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?
5. 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
6. FAB: Emphasize The Most Important Action Smart Responsive UI Patterns
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. Morphing FAB Smart Responsive UI Patterns Use carefully Too much morphing is distracting
11. Multiple FABs Smart Responsive UI patterns
12. FAB: Do’s and Don’ts Please, please don’t Smart Responsive UI patterns Do!
13. Floating Action Button Let’s code!
14. Multiple Cards In A Grid Smart Responsive UI Patterns
15. 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
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. Cards Let’s code!
20. Using The Hamburger To Stow Rarely Used Stuff Smart Responsive UI Patterns
21. 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
22. Using The Hamburger To Stow Rarely Used Stuff Smart Responsive UI Patterns
23. Hamburger-Fail: Bad Placement Smart Responsive UI Patterns Right Idea, but: Weird placement Not immediately obvious
24. Prominent Main Task: Google Maps’ Map Focusing On What’s Important
25. Decluttering The UI Find the main task of your application Make it as prominent as possible Focusing On What’s Important
26. Bad: Everything Is Equally Important Focusing On What’s Important [negative example]
27. 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
28. Can Lead Focus How Animations Can Help You
29. Can Help Visualize Workflows How Animations Can Help You
30. Natural Motion Isn’t Linear How Animations Can Help You
31. Pretty But Useless Animations How Animations Can Help You Looks good, but just steals my time
32. Animations Let’s code!
33. React To Your User’s Input Gather information from what the user is doing React to this by offering shortcuts Context Based Actions
34. React To Your User’s Input Google Maps offers to share your location after taking a screenshot Context Based Actions
35. React To Your User’s Input iMessage offers to send your current location after someone asked for it Context Based Actions
36. A Small Performance Excursion Going Further Translate vs. Position Position: https://codepen.io/kaeku/pen/gGbQaM Translate: https://codepen.io/kaeku/pen/gGbQzW
37. Tooling Going Further Prototyping on Mac - Sketch or Adobe XD - Principle Prototyping on Windows - Adobe XD - Origami Studio
38. Thanks everyone for listening to my blabbering. Any questions? Slides https://goo.gl/ZGtjoU Code https://github.com/kaeku/cross-platform-ux @andreas_wissel That’s it!