Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
UX
best practices
for
non-designers
Chimdindu Aneke
Designer
medium.com/chimdi2000
What is UX? And who is a UX designer?
Video from UX Mastery - youtube
Always have in mind today that..
Focus must be on the ___________ HINT:
Google- Ten things we know to be true
Always have in mind today that..
Focus must be on the _____user______ HINT:
Google- Ten things we know to be true
1. Form design
● Validate me now, not later.
● Help me whenever you can.
a. Validate me now, not later
Webpay Interswitch payment screen Google Create new accont screen
b. Help me whenever you can
Provide calender widget
or better formatting
Provide helpful information in context for users....
2. Credibility
● Padlock or no padlock
● Provide different payment options
a. Padlock or no padlock?
Which of the payment screens look more secure, trustworthy and confident with an assurance
that ...
b. Provide different payment options
3. Navigation
● Icon only versus Icon and text labels?
● Don’t hide your breadcrumbs - We want to eat them
b. Icon only versus Icon and text labels
Provide text labels and visual keys to clarify
a. Don’t hide your breadcrumbs: It should be eatable
4. Error Handling
● 404 error page
● Always restore a user’s last state (on mobile)
a 404 Error page is part design
5. User Research
● Start with an end goal in mind
● Ask lots of “How might we …” questions
● Make “A day in the life of yo...
A. Start with the end goal in mind
● Always set a long term goal for your project?
● Ask both optimistic and pessismetic q...
B. Ask lots of “How might we…” questions
● “How” makes it explorative and not limited to just one answer or view.
● Might ...
A day in the life of your target users
Can be
● Personas
● Storyboards ( show example)
C. What is a day like in the life o...
6. Performance = UX
● Graceful Degradation and Progressive Enhancement
● Crunch and squish out your PNGs
● Be a “responsiv...
a. Graceful degradation and Progressive enhacement
Graceful degradation = mobile last
Progressive enhancement = mobile fir...
b. Crunch and squish out your PNGs
Use Image optimizers
Google WebP
Read techniques on how to get the best out
O your png ...
c. Lazy Load always and Skeleton screens
Medium skeleton screen from https://uxplanet.org/progress-indicators-in-mobile-ux...
d. Be a “responsivle” citizen
Thank you very much!
Interested? Follow my 100 days of UI/UX challenge
with context and a process in mind
https://medium.com/100daysofui
Tools and Resources
https://design.google.com/
https://medium.freecodecamp.com/the-
complete-list-of-user-experience-ux-
r...
References
https://medium.com/100daysofui
https://www.thinkwithgoogle.com/collections/principles-of-mobile-app-design-enga...
Nächste SlideShare
Wird geladen in …5
×

Ux best practices for non designers by Chimdindu Aneke

1.305 Aufrufe

Veröffentlicht am

This is a deck prepared for my first UX design talk on "UX Best practices for non-designers" for developers at the School of Computational Intelligence ( sci.ng)

Veröffentlicht in: Design

Ux best practices for non designers by Chimdindu Aneke

  1. 1. UX best practices for non-designers Chimdindu Aneke Designer medium.com/chimdi2000
  2. 2. What is UX? And who is a UX designer? Video from UX Mastery - youtube
  3. 3. Always have in mind today that.. Focus must be on the ___________ HINT: Google- Ten things we know to be true
  4. 4. Always have in mind today that.. Focus must be on the _____user______ HINT: Google- Ten things we know to be true
  5. 5. 1. Form design ● Validate me now, not later. ● Help me whenever you can.
  6. 6. a. Validate me now, not later Webpay Interswitch payment screen Google Create new accont screen
  7. 7. b. Help me whenever you can Provide calender widget or better formatting Provide helpful information in context for users. Just help them.
  8. 8. 2. Credibility ● Padlock or no padlock ● Provide different payment options
  9. 9. a. Padlock or no padlock? Which of the payment screens look more secure, trustworthy and confident with an assurance that all is fine? (A) (B)
  10. 10. b. Provide different payment options
  11. 11. 3. Navigation ● Icon only versus Icon and text labels? ● Don’t hide your breadcrumbs - We want to eat them
  12. 12. b. Icon only versus Icon and text labels Provide text labels and visual keys to clarify
  13. 13. a. Don’t hide your breadcrumbs: It should be eatable
  14. 14. 4. Error Handling ● 404 error page ● Always restore a user’s last state (on mobile)
  15. 15. a 404 Error page is part design
  16. 16. 5. User Research ● Start with an end goal in mind ● Ask lots of “How might we …” questions ● Make “A day in the life of your users”
  17. 17. A. Start with the end goal in mind ● Always set a long term goal for your project? ● Ask both optimistic and pessismetic questions. Like How could we fail? ● Turn your fears into questions Learn more about “having an end goal in mind: Google Design Sprints
  18. 18. B. Ask lots of “How might we…” questions ● “How” makes it explorative and not limited to just one answer or view. ● Might tells you that this just a suggestion and jus a possibility and can change, fail ● Don’t use “can” for it tries to narrow down to just a suggestion. It makes everything appear so rigid and streamlined ● At this point, you don’t need to narrow your questions - ask all possible challenging questions Learn more about “How might we questions: Google Design Sprints
  19. 19. A day in the life of your target users Can be ● Personas ● Storyboards ( show example) C. What is a day like in the life of your target users? Persona image from https://xtensio.com/user-persona/
  20. 20. 6. Performance = UX ● Graceful Degradation and Progressive Enhancement ● Crunch and squish out your PNGs ● Be a “responsivle” citizen ● Lazy Loading and cache common responses
  21. 21. a. Graceful degradation and Progressive enhacement Graceful degradation = mobile last Progressive enhancement = mobile first and content first From http://www.slideshare.net/Koombea/how-to-be-successful-with-responsive-sites-koombea-nginx- english
  22. 22. b. Crunch and squish out your PNGs Use Image optimizers Google WebP Read techniques on how to get the best out O your png image files Smashing magazine: Clever PNG Optimization Techniques
  23. 23. c. Lazy Load always and Skeleton screens Medium skeleton screen from https://uxplanet.org/progress-indicators-in-mobile-ux-design-a141e22f3ea0#.8xw http://ressio.github.io/lazy-load-xt/demo/
  24. 24. d. Be a “responsivle” citizen
  25. 25. Thank you very much!
  26. 26. Interested? Follow my 100 days of UI/UX challenge with context and a process in mind https://medium.com/100daysofui
  27. 27. Tools and Resources https://design.google.com/ https://medium.freecodecamp.com/the- complete-list-of-user-experience-ux- resources-tools-7af32aa129f6
  28. 28. References https://medium.com/100daysofui https://www.thinkwithgoogle.com/collections/principles-of-mobile-app-design-engage-users-and-drive- conversions.html https://storage.googleapis.com/think-emea/docs/article/Mobile_App_UX_Principles.pdf https://developers.google.com/speed/webp/ http://design.google.com/resizer/ https://www.smashingmagazine.com/2009/07/clever-png-optimization-techniques/ https://storage.googleapis.com/think-emea/docs/article/Mobile_App_UX_Principles.pdf http://userexperiencedesigns.com/ https://www.youtube.com/watch?v=Ovj4hFxko7c http://www.slideshare.net/Koombea/how-to-be-successful-with-responsive-sites-koombea-nginx-english

×