Doing Your HW - A UX approach to your web design

DOING YOUR HOMEWORK
A UX APPROACH TO YOUR
WEB DESIGN
BY
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


WTF!?


YOU’RE NUTS!


BREAK IT DOWN


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)

Deﬁnition
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 NO PHOTOSHOP
REQUIRES YOU TO DO YOUR
HOMEWORK

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 EXAMPLE
THAT INCLUDE THE ROLE
OF THE USER & ACTIVITY REQ: “DISPLAY ALL
THEY ARE DOING NEWS CONTENT ON
THE HOMEPAGE”
FOCUS ON WHAT HE/SHE
IS DOING AND NOT THE STORY: “REGULAR
SOLUTION READERS ARE ABLE
TO EASILY SEE ALL
IT FRAMES THE NEWS CONTENT”
PROBLEMS TO LATER
SOLVE THEM


THEME OUT YOUR STORIES

COLLECT ALL YOUR
STORIES AND GROUP
THEM INTO THEMES

PRIORITIZE THEM BASED
ON PROJECT GOALS AND
PRIMARY USERS.


USER NEEDS - PERSONAS

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


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


STRATEGY
A 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 INVENTORY
THE 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


DESIGN
TIME TO ADD IT UP


PUT YOUR HOMEWORK
INTO ACTION

CREATE WIREFRAMES

USABILITY TESTS AGAIN
IF NEEDED


WIREFRAMES


THE RESULT


FINAL WORD ON UX
THESE STEPS WILL GROUND YOUR PROJECT INTO THE REAL
WORLD AND NOT DESIGN IN A VACUUM.


A HAPPY CLIENT


THANK YOU


Doing Your HW - A UX approach to your web design

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (15)

Ähnlich wie Doing Your HW - A UX approach to your web design

Ähnlich wie Doing Your HW - A UX approach to your web design (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Doing Your HW - A UX approach to your web design