How to UX
@JardaZapadlo
INtroduction
&key ideas
Key ideas
The goal of a UX designer is to make users effective.
It is common to think that a good user experience is one that makes users happy.
Not true.
Goals
Real test of UX designer is how well you can align goals so the business benefits when users reach their goal.
UX Ingredients
Psychology Minds are complex. Subcoscious.
Usability Conscious. You know when something is confusing.
Design Design is how it works and it can be proved. Not matter of style.
Copywriting Clear. Direct. Simple. Functional.
Analysis Weak spot of many, yet this separates UX design from other designs.
Functional layout
design
User research
Do it early, do it often.
Goal is to understand the user
through objective or subjective research.
User profiles
Persona is description of user based on research.
Not Personality types, Demographics, Characters in your “brand story”,
Stereotypes based on your experience, Shallow or 1-dimensional nor Concepts
Persona A is an experienced manager, mostly interested in one or two areas of expertise. They visit often, but they are pressed for time, so they focus on “collecting” content to read on the weekends. They tend to be prolific social media sharers, mostly to Twitter and LinkedIn. They consider themselves thought-leaders, so public image is important.
Devices
Start small - mobile. Why?
Different device - different type of human interaction.
Be responsive.
Design patterns
"Good" pattern = common and usable solution.
Some design ideas become popular because they allow lazy UI designers to ignore a challenging feature. It’s like putting a bag over someone’s head because they are ugly. Like hamburger menu.
Information
architecture
Information Architecture
IA can be simple with small project and incredibly complicated with large projects.
Always go either flat or deep, never both ways.
USER journey
User journey describes one possible path a user can take on your site. Should be short, but complete.
User arrives on search page.
User can enter any query and submit with keyboard or mouse.
Next page displays a list of search results with most relevant results on top.
User can click the link to go to other site, or they can navigate through more pages nutil they find something useful.
UX designer writes user journeys to communicate to the team, not the other way around!
The team then translate those needs to proper development user stories.
USER stories and IA
Steps in stories define structure of pages using different types of Information Architecture.
Categories (H&M store)
Tasks (banks)
Search (YouTube)
Time (Reddit)
People (Facebook)
Wireframe
Please see What Isn't a Wireframe.
Wireframe is a technical document.
If UI developer can't use your wireframe yet, it is not a wireframe. It's a sketch.
VISUAL DESIGN
Principles
Bored yet?
Visual weight
Some parts of design are more important than others, but those are not always the things we notice naturally.
Repetition&Pattern break
Repetitive Patterns are good rule to lead user.
We like to break things. Let's break repetition.
To make a pattern or a sequence, keep visual weight and colour consistent. The users eye will start at one end and follow the pattern to the other end.
To break the pattern, just switch it up in the place where you want to add focus. Make the “Register Now” button an unexpected colour, size, shape, or style, and watch your clicks go up overnight.
Line&edge tension
Certain types of repetition can create perception of shapes, and that's where the user's eyes will go.
Alignment&proximity
Last design principle is adding order and meaning to elements of design without adding any more elements.
Sounds subtle, but it effects everything you see every day.
Functional layout
design
Z-PatterN, F-PAttern, Visual hierarchy
Using a website or an app may feel like a different experience every time, but in fact, the way people look at any design is fairly predictable.
ADD
visual
elements
And user changes it's eye movement to F pattern.
Why is it important?
A button in the top left will get more clicks than a button in the top right, which will get more clicks than a button in the bottom left, which will get more clicks than a button in the bottom right. And all of those will get more clicks than something randomly stuck in the middle …unless you do something about it.
VISUAL HIERARCHY
When you consistently use typography to indicate the importance of text, and certain colours to highlight buttons, and when you give more visual weight to things that matter, it creates a visual hierarchy. i.e. — a design that people can scan easily. Our eyes jump from important thing to important thing rather than scanning like a robot.
Some designers think visual hierarchy is good because it looks better, but the truth is that it feels better because it is easier to scan.
Page framework
Don't approach wireframes on page-by-page basis.
Main menu, sub menu, footers. Create those so they work for all the pages/screens in your app before you get into content.
Everything in one menu is lazy design. Do better. If you need more than 7-8 choices in menu, it is time to break someone's heart. Probably yours.
FOLD, Images, Headlines
"The Fold" is a part of design user sees before he scrolls. Gets most attention. "scroll down" = weak design
Images. Don't treat them like they are non-functional. Create those so they work for all the pages/screens in your app before you get into content.
Headlines. It is important to align headline with most important content below. If not, user looks for new focus point after reading headline.
Axis of interaction
FORMS
Forms take lot of time usability-wise. They cause confusion, mistakes and anger, yet they are most valuable part of your site. If not, why are you using them?t
Use Smart forms and Instant responses.
For common questions, put labels above&left (Axis of Interaction, see?).
For uncommon or complex questions put labels to the left.
Buttons for critical/destructive actions go to right.
Call to action, Instructions
Good CTA = (VERB + BENEFIT + URGENT TIME or PLACE) WATCH MY METHOD HERE.
Instructions:
Bad: “All input in this area is required data and must be successfully submitted to initiate the account creation process.”
Stupid: “Look at you! You’re so good at forms! When you get everything typed in there like a good form filler-outer then you should just go ahead and click that fancy yellow button below! You’re almost there, champ!”
Good: “Answer every question. Then click the yellow button labelled done at the bottom of this page.”
Primary&secondary buttons
user psychology
lastly
Feedback loop
motivation
action
feedback
motivation
action
feedback
motivation
action
LEVEL-up
You are now skilled UX designers - theorist.
Let's move on.