UX for Developers

2019-03-25 8 min read hello world ux · design

UX for Developers

What is it

User eXperience It is related to UI but is more How easy is your app to use (obvious and simple)

For the context of our conversation UI is how it looks… how pretty it is

UX is the combination of methods and principles to make the user happy. You solve design problems while focusing on the user. Some of the problems solved by UX are:

Visual Design
Functionality
Data Visualization
Information Architecture
Cognitive Psychology
Usability
Interaction Design
Content Strategy

A good UX(and UI to a lesser extent) is what separates the best from the rest.

What is not

UX ≠ UI UI is typically associated w/ pretty

Patterns

Reusable solutions to usability problems

Don’t make the user wait: Optimize rendering, and display progressively.
Above the fold: Place the most important info at the top of the page. moreover, lead the user down
Consider the first or initial state of design
1. Nothing: before any data is retrieved
2. Loading
3. None: nothing to see here., so show something to engage (data extracted… just empty)
4. One State: only 1 item to display/left
5. Some: a few things
6. Too Many: load more, pagination, etc. Forces user to think about what they have to do next. (less intuitive)
7. Incorrect state: let the user know what happened, why did it happen, what can they do about it
8. Correct/Success: Yay! you did it
9. Done: Nothing left to do.
Earn users trust
1. Functionality - Works
2. Reliable stable and consistent
3. Usable - can be used w/o difficulty
4. Proficiency - Allos user to do more, better, and quicker
5. pleasurable - memorable experience worth sharing
Make actions reversible. The user should be able to undo their mistakes
Timing - Tell the user when they should care about something. Don’t force them to care before they have to.
Enhance with Transitions
1. Responsive: there should be visible(or audible for visually impaired) indications that the user did something (clicked)
2. natural: movements should be inspired by forces/actions in the real world
3. quick
4. be clear, and duration is under 300ms
5. smooth
Make it work offline. The user is offline or has a slow connection. The user should feel like they are offline. And when they re-connect, things automagically start working again. Service Workers, push notifications, background, sync, dynamic caching, pre-caching
Optimize for mobile 7 in 10 users prefer mobile sites of mobile apps
Play on persuasion
1. Curiosity - show video in the background of signup/login page
2. Scarcity -
3. Reward - Encourage them to come back. Allow users to achieve points and badges as they complete different tasks
4. Social Proof - Add testimonials, use cases

Principles

What is the emotional reaction to the page? How intuitive is it? How many times does the user/developer have to ask questions about how to do XYZ Is your app/UI consistent in patterns? Are URLs predictive? what about colors, behaviors/actions, fonts, text, modals or dialogues Can you write out a tooltip/instructions to do XYZ in 50 characters or less

Beware of Cognitive Load? The brain has limited capacity, so it is super effective at sorting out what is essential from what is not. The more brain space your app takes, the higher the cognitive load, the higher the cognitive load, the worse your UX

ID what is dangerous - the brain is hard-wired to look for this

Tips:

consistent: colors, text, fonts, look-n-feel, buttons, nomenclature, shapes. There should be visual queues that say X is related to Y
reduce cognitive load: little things/gotcha’s that the user has to know to execute task(s). make it easy to ID what is dangerous - the brain is hard-wired to look for this
Things that require user action should be front and center (obvious) to the user
breathing space: to squish up your dialogues/texts etc

User Research

Researching and understanding your user is how you go from a problem to a great solution. Users are busy; they only take a second or 2 to figure things out. So best to understand them

Mistakes

rely on assumptions
assume its obvious
overcomplicated, poorly explained or not explained at all

Benefits

Develop empathy: put the user at the center of your thinking
validates correct assumptions
develop insights

Talk to your users see how they are using the tool, where do they get hung up, where do they have friction/sticky where are things easiest?. Summarise the observations tweak and iterate based on what’s learned. Try it out with the user ask them if/how this is better, and where are there other areas of improvement.

Gather statistics on your users, who are they, what groups are having issues. How is this group in comparison to other groups?

Write content/instructions geared towards the user and what the need to know to execute their tasks. Nothing extra, clear and concise. Users will do ANYTHING to avoid reading a block of text. If they have to dig.. its a no go try to explain it w/ a picture or video where possible.

Tell users where to find the next steps if you can’t make it intuitive. Help users orient to new features and help them orient to the tool when new.

Ways to improve

Allow app Tours to demo the app or new features/fixes
Use style guides to help maintain consistency for users. They should include writing style, colors, fonts, date formats, iconography.

User-Centered Design

Focus on better productions, not just more features Your code drives the user experience for better or worse UI ≠ UX Remove Friction at every opportunity Design for crappy network Plan for short attention span. They should be able to return to the app and pick up where they left off w/o friction Pre-fetch more data so its there when they need it Cache data that once fetched

User research… what expectations do they have? which ones are not set
Create a persona that represents the average user, and design for specific personas
Define use cases: when where and how that persona will use your app to accomplish their task

Personas (a design activity)

Create a persona based on interviewing users, and watching them use your product.
Don’t try to support too many personas that are unrelated

Use cases (a design activity)

How will personas use your product in the real world

Flow (a design activity)

Think about the steps/process user will have to take to accomplish their task. The first step in flow is the user’s motivation. What do they want? At each step give them the info they need only when they need it. You are not focusing on each screen… just on the individual steps to accomplish the task prototype your flow. A tool like fluid.ui.

What we can do

Ground designs in reality
bring designs to life
come up with innovative ways to delight users
Team = Developers + Designers (ahem, us) + PM; Effective communication/teamwork makes the dream work
Stay connected to the user.
take ownership of delivering delight

The Process

1 User Centered Design (UCD)

Plain English	UCD Process terms	Description
Why?	Goal	Why are we doing this? What does success look like(KPIs)?
Who?	Personas	Who are users? Helps to prioritize user stories and ID edge cases
When, Where, How?	Use cases	How would they use our tools/APIs?
What?	Features	Previous ones help us determine WHAT is needed to make users happy

Why

Some questions to ask your self:

What do users care about as it relates your product?
What do users want(not what does sales/management want)?
What activities are your user’s doing and trying to accomplish?
How does time or timing affect your user?

Who

The conceptual model of your demographics, the attributes and the pain points of particular segment of the population. Choose personas that represent your goals. Also, use the persona’s to optimize features/product Consider all personas that come up in discussion This one is tough: If there is a persona that does NOT fit your business goals. Do not include the persona in your UCD process. Trying to optimize for everyone, makes a better product for no one.

You can please some of the people all of the time, you can please all of the people some of the time, but you can’t please all of the people all of the time John Lydgate

Some questions to ask yourself:

What does the Persona(demographic) Need?
What scares users?
What resources do your user’s have
What hurdles prevent users from accomplishing their tasks?

Where, When, and How

Consider all use cases. However, as before, discard any that do not fit your business goals. You can make your product over complicated, decreasing the overall UX.

Question	Answer	Answer Type
When will User use the product?		Single word/phrase
Where will they use the product?		Single word/phrase
How will they use the product? Wants, preferences, values, needs		Single word/phrase or bulleted

What

How we tie goals, personas and use cases to the product?

Some of the things we may try:

gamification
bubble up info that impacts/guides use decisions
enable users to connect w/ us as providers or with other users/org/community
allow users to spread the word about your product/team/company

If you don’t care about what you are doing or building, your user’s can tell. It is not a secret.

The fidelity of your prototype will match the fidelity of your thinking

Resources

Disagree? Did I miss something? Comment below or you can Tweet me with #ux4devs .