UX best practices

for non-designers

Chimdindu AnekeDesigner

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. Just help them.

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 all is fine?

(A) (B)

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 your users”

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

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

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/

6. Performance = UX

● Graceful Degradation and Progressive Enhancement

● Crunch and squish out your PNGs

● Be a “responsivle” citizen

● Lazy Loading and cache common responses

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

b. Crunch and squish out your PNGs

Use Image optimizers

Google WebP

Read techniques on how to get the best outO your png image files

Smashing magazine: Clever PNG Optimization Techniques

c. Lazy Load always and Skeleton screens

Medium skeleton screen from https://uxplanet.org/progress-indicators-in-mobile-ux-design-a141e22f3ea0#.8xwq8ypa5

http://ressio.github.io/lazy-load-xt/demo/

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-resources-tools-7af32aa129f6

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