UI/UX FOR MOBILE

ux design process , ui design dos and donts, ui design inspirations.

Transcript

1. UI/UX for Mobile @valentinerutto -ValentineRutto-
2. ABOUT ME • Android Developer • Fashion model • Poet @valentinerutto rutto28@gmail.com @valentinerutto Linkedin | github | twitter Medium | Instagram | FB
3. UI/UX for Mobile User centered design @valentinerutto -ValentineRutto-
4. ◦ Eliciting feedback on usability ◦ Validating concepts ◦ Clarifying vision
5. What is UI/UX? • UI(user interface) The look and feel of an application • UX (user experience) Is the process of enhancing customer satisfaction and loyalty by improving the usability, ease of use, and pleasure provided in the interaction between the customer and the product.
6. “UI/UX is like a joke, if you have to explain it then it is not working”
7. UX DESIGN PROCESS User centered design
8. “Designing is not something that you just create and start using it. Draw and draft and redraw and redraft, thus creating an unmatched experience.” “To be a great designer, you need to look a little deeper into how people think and act.” — Paul B
10. UX DESIGN PROCESS: 1-UNDERSTAND ACTIVITIES • Meet, talk, observe and understand users in their environment • Analyze requirements to understand and clarify them • Define user personas and use-cases OUTCOMES • User persona a fictional representation of your ideal customer • Use cases • User stories -user journey
11. UX DESIGN PROCESS: 1-UNDERSTAND User Persona Use case
12. UX DESIGN PROCESS: 2-RESEARCH • Understand market competition • Learn about your domain • Get inspirations and ideas from your competitors”
13. UX DESIGN PROCESS: 2-RESEARCH ACTIVITIES • Study of competitors’ approaches • Research on similar features in the world • Analysis of latest UI/UX trends, design principles and rules • Keep an eye on your own UX guidelines OUTCOMES Ideas and material on which you can build your design on
14. UX DESIGN PROCESS: 3-SKETCH ACTIVITIES • Generate ideas and work on basic sketches • Brainstorming sessions with stakeholders to get their feedback from technical perspective • Re-draw sketches and re-test them with stakeholders OUTCOMES • Sketches • Wireframes, Mockups • User flows
15. UX DESIGN PROCESS: 3-SKETCH
16. UX DESIGN PROCESS: 4-DESIGN Activities • Design UI images • Define final theme, specs, and guidelines required for implementation • Design icons to display on screens Outcomes • Design images • Detailed design specs like colors, theme, styles, guidelines • Icons
17. UX DESIGN PROCESS: 5-IMPLEMENT Activities • Implement back-end functionality and front interface Outcomes • Developed UI with complete functionality and experience following the designed theme and style
18. UX DESIGN PROCESS: 6-EVALUATE Design team validates the product in terms of user flow and experience and identify areas where improvements are needed. Activities • Go through the flow and feel the experience • Perform a comparison of implementation and defined interface Outcomes • User feedback • UI audit reports • Areas marked where improvement is required
19. UI DESIGN
20. Decluttering • Keep the content and interface elements to a minimum • minimal information doesnt overwelm users • Use the technique of progressive disclosure to show more options
21. Decluttering
22. Speed and Responsiveness • Loading time is important in UX • 47% of users expect a page to load in 2secs or less
23. Skeleton screens Vs loading indicator • SS-Shows your app is fast and responsive • LI-Shows something is happening • A skeleton screen fills out the UI as content is loaded incrementally.
24. OFFER A VISUAL DISTRACTION • Users pay less attention to the wait itself • Like interesting animations
25. PERMISSIONS • Avoid asking permissions at the start of your application unless it is crucial for your app • Ask for what your application clearly needs • Explain why your app needs the permision if not obvious • Always ask permision in context
26. Permission • Always ask in context Prompt users to accept permissions only when they try to use the feature
27. Optimize Push Notifications
28. Optimize Push Notifications • Push the value Users won’t mind getting notifications, as long as the value they get is sufficiently greater than the interruption
29. Optimize Push Notifications • Time your notificatios The best time for push notifications is peak hours of mobile usage: from 6:00 pm till 10:00 pm.
30. Optimize Push Notifications • Use other channels
31. Prototyping tools Invision Adobe xd sketch
32. RESOURCES • UI design Inspiration Uplabs Dribble Muzli material.io guide to mobile app design
33. Thank You…!!!! rutto28@gmail.com @valentinerutto Linkedin | github | twitter Medium | Instagram | FB