Doing Your HW - A UX approach to your web design

DOING YOUR HOMEWORK

A UX APPROACH TO YOUR WEB DESIGN

FABIAN ALCANTARA

Wednesday, September 8, 2010

THE PROBLEM

THE PROBLEM WITH CLIENTS

TOO MANY CHIEFS NOT ENOUGH INDIANS

DIFFERENT PERSPECTIVES & DIFFERENT AGENDAS IMPACTING THE DESIGN

DESIGNING FOR SPECIFICATION

IDEAS AND FEATURES ARE BASED ON THEM ON NOT ON THEIR CUSTOMERS / AUDIENCE

I WANT THINGS TO EXPLODE AND CATCH PEOPLE’S ATTENTION

CONTENT IS THOUGHT GIVING AT THE END

LAST MINUTE CHANGES BEFORE GOING LIVE

YOU’RE NUTS!

BREAK IT DOWN

MOST CLIENTS SEE THINGS ABSTRACTED, INSIDE OUT VIEW OF THE THE PROJECT

FEATURES LISTS

TECHNICAL SPECIFICATIONS (I.E., I WANT FLASH)

CREATE A BETTER METHODOLOGY INTO YOUR DESIGN

THE USER EXPERIENCE (UX)

Definition

User Experience design (UX) is a process in which the needs, wants, and limitations of end users of an interface or document are given extensive attention at each stage of the design process. The end results will enable certain kinds of experiences.

IN ENGLISH

DESIGNING SOMETHING FROM THE PERSPECTIVE OF THE PEOPLE WHO ARE GOING TO USE IT

CLIENT PERSPECTIVE USER PERSPECTIVE

UX PROCESS IS EXTENSIVE

IT’S FOR GOOD REASON

REQUIRES YOU TO DO YOUR HOMEWORK

NO PHOTOSHOP

NO CODING

CREATE A DESIGN STRATEGY

CREATE A DESIGN DOCUMENT AND BREAK IT DOWN IN PHASES

USER NEEDS

STRATEGY

DESIGN

USER NEEDS

ASK THE RIGHT QUESTIONS TO YOUR CLIENT

WHO IS THE SITE FOR?

GOAL OF THE SITE?

WHAT DO YOUR USERS WANT?

IS THERE ANY PRELIMINARY FEEDBACK ABOUT WHO USES THE SITE?

USER NEEDS

AFTER MEETING WITH THE CLIENT, BRAINSTORM:

WHO ARE THE USERS

IDENTIFY THE USER NEEDS

IDENTIFY CLIENT NEEDS

USER NEEDS - USER FLOWS

HELPS YOU UNDERSTAND WHAT A TYPE OF USER WILL GO THROUGH TO FIND SOMETHING

HELPS YOU VALIDATE THE OVERALL FLOW OF THE YOUR INTERFACE / WEB SITE

USER FLOW EXAMPLE

USER NEEDS - USER STORIES

SHORT STATEMENTS THAT INCLUDE THE ROLE OF THE USER & ACTIVITY THEY ARE DOING

FOCUS ON WHAT HE/SHE IS DOING AND NOT THE SOLUTION

IT FRAMES THE PROBLEMS TO LATER SOLVE THEM

EXAMPLE

REQ: “DISPLAY ALL NEWS CONTENT ON THE HOMEPAGE”

STORY: “REGULAR READERS ARE ABLE TO EASILY SEE ALL NEWS CONTENT”

THEME OUT YOUR STORIES

COLLECT ALL YOUR STORIES AND GROUP THEM INTO THEMES

PRIORITIZE THEM BASED ON PROJECT GOALS AND PRIMARY USERS.

FICTITIOUS OR REAL CHARACTERS THAT ARE CREATED TO REPRESENT THE DIFFERENT TYPES OF USERS THAT WILL BE USING YOUR SITE.

USER NEEDS - PERSONAS

WHY PERSONAS

HELPS YOU DEFINE THE PEOPLE WHO ARE GOING TO USE YOUR WEBSITE

SPEAKS VOLUMES AND MAKES YOUR CLIENT LISTEN TO THE NEEDS OF THE USER. SHOWS OFF THE USER

CREATES A COMMON LANGUAGE AMONG YOUR CLIENT AND ANYONE INVOLVED ABOUT THE ASPECTS OF THE WEBSITE.

USABILITY TESTS & FEEDBACK

IF YOU DON’T HAVE ENOUGH INFORMATION ABOUT USERS, DO THIS BEFORE YOU CREATE PERSONAS

GET FURTHER UNDERSTANDING OF USER NEEDS

WILL FIND FEATURES YOU MAY OF OVERLOOKED

GIVES FEEDBACK TO THE DESIGNERS

USABILITY TEST EXAMPLE

STRATEGYA FEW THINGS ABOUT THIS PHASE

THINGS TO KEEP IN MIND

PROVIDE ADDITIONAL CONTEXT TO YOUR DESIGN

REASSURES GOALS OF THE WEBSITE ARE BEING MET

HELPS IN WORKING WITH THE CLIENT’S BOTTOM LINE AND MARKETING

STRATEGY -COMPETITIVE ANALYSIS

WHAT MAKES YOUR WEBSITE DIFFERENT THAN YOUR COMPETITORS?

COMPETITIVE ANALYSIS - LAYOUT & USER FLOW

COMPETITIVE ANALYSIS - LANDSCAPE

CONTENT INVENTORYTHE FUNNIEST PART OF CREATING A WEBSITE

STRATEGY - CONTENT INVENTORY

GIVES SCOPE OF CONTENT ON THE WEBSITE YOU ARE IMPROVING.

VITAL STEP IN CLEANING OUR YOU CONTENT

HELPS IN BUILDING A LEANER NAVIGATION & INFORMATION ARCHITECTURE

HELPS IN WEEDING OUT CONTENT THAT DOES NOT GO WITH THE MARKETING STRATEGY OR MESSAGE.

CONTENT INVENTORY EXAMPLE

OTHER STEPS IN STRATEGY

ORGANIZE YOUR CONTENT - INFORMATION ARCHITECTURE

CARD SORTING CAN HELP

DESIGNTIME TO ADD IT UP

PUT YOUR HOMEWORKINTO ACTION

CREATE WIREFRAMES

USABILITY TESTS AGAIN IF NEEDED

WIREFRAMES

THE RESULT

FINAL WORD ON UXTHESE STEPS WILL GROUND YOUR PROJECT INTO THE REAL

WORLD AND NOT DESIGN IN A VACUUM.

YOU’RE NUTS!

A HAPPY CLIENT

THANK YOU

Doing Your HW - A UX approach to your web design

Design

Sage UX: How Anthropology Can Improve Your UX Practice

Take out your HW: Transcription wkst

UX maturity - how do you develop the UX practice in your organisation

How To Sell Your UX Vision- UX Scotland 2015

Take out your HW !

1. Copy down HW 2. Take out HW & COMPARE your work to your table partner’s

HW#2.6- Subtracting Expressions with Rational Coefficients · HW #2.6: Subtracting Expressions with Rational Coefficients HW Simplify the expressions. Show your work in your notebook

How can UX design affect your SEO · How can UX design affect your SEO Talk by Kamil Kuczynski and Nick Duffield. Kamil Your slides here for about ux if you need them . SEO + UX

Become a UX Leader - How to establish UX in your organization

How much UX is in your UX portfolio?

Do Now 1/31/11 Take out HW from Tuesday night. Take out HW from Tuesday night. –“The Sieve of Eratosthenes” Copy HW in your planner. Copy HW in your planner

Fake Your Research - UX Masterclass

UX + Your Team = Accessibility

Cheat Your Way With UX

Do Now 3/16/11 Take out HW from Monday. Take out HW from Monday. “What’s in Your Bedroom?” activity Copy HW in your planner. Copy HW in your planner

your UX is not my UX

Vitamin UX: How a UX Mindset Can Boost Your Career

Personifying Your Portfolio - UX

Mobile ux finding your center

Do Now 2/22/10 Take out your HW from last week. Take out your HW from last week. Text p. 285, #1-10 all Copy HW in your planner. Copy HW in your planner