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)

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


http://vimeo.com/10289578

http://vimeo.com/10289578

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


Design

Doing Your HW - A UX approach to your web design