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

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.

Made with Slides.com