The document provides best practices for non-designers to improve user experience (UX). It discusses focusing on the user, validating designs upfront to help users, using different payment options, including text labels with icons for navigation, handling errors gracefully, starting with an end goal in mind when researching users, optimizing performance through progressive enhancement and lazy loading, and being responsive to different devices.

1. UX
best practices
for
non-designers
Chimdindu Aneke
Designer
medium.com/chimdi2000

2. What is UX? And who is a UX designer?
Video from UX Mastery - youtube

3. Always have in mind today that..
Focus must be on the ___________ HINT:
Google- Ten things we know to be true

4. Always have in mind today that..
Focus must be on the _____user______ HINT:
Google- Ten things we know to be true

5. 1. Form design
● Validate me now, not later.
● Help me whenever you can.

6. a. Validate me now, not later
Webpay Interswitch payment screen Google Create new accont screen

7. b. Help me whenever you can
Provide calender widget
or better formatting
Provide helpful information in context for users. Just help them.

8. 2. Credibility
● Padlock or no padlock
● Provide different payment options

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. b. Provide different payment options

11. 3. Navigation
● Icon only versus Icon and text labels?
● Don’t hide your breadcrumbs - We want to eat them

12. b. Icon only versus Icon and text labels
Provide text labels and visual keys to clarify

13. a. Don’t hide your breadcrumbs: It should be eatable

14. 4. Error Handling
● 404 error page
● Always restore a user’s last state (on mobile)

15. a 404 Error page is part design

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. 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. 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. 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. 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. 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. 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. 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. d. Be a “responsivle” citizen

25. Thank you very much!

26. Interested? Follow my 100 days of UI/UX challenge
with context and a process in mind
https://medium.com/100daysofui

27. Tools and Resources
https://design.google.com/
https://medium.freecodecamp.com/the-
complete-list-of-user-experience-ux-
resources-tools-7af32aa129f6

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