Doing Your HW - A UX approach to your web design
-
Upload
fabian-alcantara -
Category
Design
-
view
1.029 -
download
0
Transcript of Doing Your HW - A UX approach to your web design
![Page 1: Doing Your HW - A UX approach to your web design](https://reader033.fdocuments.net/reader033/viewer/2022052823/55517e39b4c9057e458b53e8/html5/thumbnails/1.jpg)
DOING YOUR HOMEWORK
A UX APPROACH TO YOUR WEB DESIGN
BY
FABIAN ALCANTARA
Wednesday, September 8, 2010
![Page 2: Doing Your HW - A UX approach to your web design](https://reader033.fdocuments.net/reader033/viewer/2022052823/55517e39b4c9057e458b53e8/html5/thumbnails/2.jpg)
THE PROBLEM
Wednesday, September 8, 2010
![Page 3: Doing Your HW - A UX approach to your web design](https://reader033.fdocuments.net/reader033/viewer/2022052823/55517e39b4c9057e458b53e8/html5/thumbnails/3.jpg)
Wednesday, September 8, 2010
![Page 4: Doing Your HW - A UX approach to your web design](https://reader033.fdocuments.net/reader033/viewer/2022052823/55517e39b4c9057e458b53e8/html5/thumbnails/4.jpg)
Wednesday, September 8, 2010
![Page 5: Doing Your HW - A UX approach to your web design](https://reader033.fdocuments.net/reader033/viewer/2022052823/55517e39b4c9057e458b53e8/html5/thumbnails/5.jpg)
Wednesday, September 8, 2010
![Page 6: Doing Your HW - A UX approach to your web design](https://reader033.fdocuments.net/reader033/viewer/2022052823/55517e39b4c9057e458b53e8/html5/thumbnails/6.jpg)
Wednesday, September 8, 2010
![Page 7: Doing Your HW - A UX approach to your web design](https://reader033.fdocuments.net/reader033/viewer/2022052823/55517e39b4c9057e458b53e8/html5/thumbnails/7.jpg)
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
Wednesday, September 8, 2010
![Page 8: Doing Your HW - A UX approach to your web design](https://reader033.fdocuments.net/reader033/viewer/2022052823/55517e39b4c9057e458b53e8/html5/thumbnails/8.jpg)
WTF!?
Wednesday, September 8, 2010
![Page 9: Doing Your HW - A UX approach to your web design](https://reader033.fdocuments.net/reader033/viewer/2022052823/55517e39b4c9057e458b53e8/html5/thumbnails/9.jpg)
YOU’RE NUTS!
Wednesday, September 8, 2010
![Page 10: Doing Your HW - A UX approach to your web design](https://reader033.fdocuments.net/reader033/viewer/2022052823/55517e39b4c9057e458b53e8/html5/thumbnails/10.jpg)
BREAK IT DOWN
Wednesday, September 8, 2010
![Page 11: Doing Your HW - A UX approach to your web design](https://reader033.fdocuments.net/reader033/viewer/2022052823/55517e39b4c9057e458b53e8/html5/thumbnails/11.jpg)
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
Wednesday, September 8, 2010
![Page 12: Doing Your HW - A UX approach to your web design](https://reader033.fdocuments.net/reader033/viewer/2022052823/55517e39b4c9057e458b53e8/html5/thumbnails/12.jpg)
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.
Wednesday, September 8, 2010
![Page 13: Doing Your HW - A UX approach to your web design](https://reader033.fdocuments.net/reader033/viewer/2022052823/55517e39b4c9057e458b53e8/html5/thumbnails/13.jpg)
IN ENGLISH
DESIGNING SOMETHING FROM THE PERSPECTIVE OF THE PEOPLE WHO ARE GOING TO USE IT
CLIENT PERSPECTIVE USER PERSPECTIVE
Wednesday, September 8, 2010
![Page 14: Doing Your HW - A UX approach to your web design](https://reader033.fdocuments.net/reader033/viewer/2022052823/55517e39b4c9057e458b53e8/html5/thumbnails/14.jpg)
UX PROCESS IS EXTENSIVE
IT’S FOR GOOD REASON
REQUIRES YOU TO DO YOUR HOMEWORK
NO PHOTOSHOP
NO CODING
Wednesday, September 8, 2010
![Page 15: Doing Your HW - A UX approach to your web design](https://reader033.fdocuments.net/reader033/viewer/2022052823/55517e39b4c9057e458b53e8/html5/thumbnails/15.jpg)
CREATE A DESIGN STRATEGY
CREATE A DESIGN DOCUMENT AND BREAK IT DOWN IN PHASES
USER NEEDS
STRATEGY
DESIGN
Wednesday, September 8, 2010
![Page 16: Doing Your HW - A UX approach to your web design](https://reader033.fdocuments.net/reader033/viewer/2022052823/55517e39b4c9057e458b53e8/html5/thumbnails/16.jpg)
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?
Wednesday, September 8, 2010
![Page 17: Doing Your HW - A UX approach to your web design](https://reader033.fdocuments.net/reader033/viewer/2022052823/55517e39b4c9057e458b53e8/html5/thumbnails/17.jpg)
USER NEEDS
AFTER MEETING WITH THE CLIENT, BRAINSTORM:
WHO ARE THE USERS
IDENTIFY THE USER NEEDS
IDENTIFY CLIENT NEEDS
Wednesday, September 8, 2010
![Page 18: Doing Your HW - A UX approach to your web design](https://reader033.fdocuments.net/reader033/viewer/2022052823/55517e39b4c9057e458b53e8/html5/thumbnails/18.jpg)
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
Wednesday, September 8, 2010
![Page 19: Doing Your HW - A UX approach to your web design](https://reader033.fdocuments.net/reader033/viewer/2022052823/55517e39b4c9057e458b53e8/html5/thumbnails/19.jpg)
USER FLOW EXAMPLE
Wednesday, September 8, 2010
![Page 20: Doing Your HW - A UX approach to your web design](https://reader033.fdocuments.net/reader033/viewer/2022052823/55517e39b4c9057e458b53e8/html5/thumbnails/20.jpg)
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”
Wednesday, September 8, 2010
![Page 21: Doing Your HW - A UX approach to your web design](https://reader033.fdocuments.net/reader033/viewer/2022052823/55517e39b4c9057e458b53e8/html5/thumbnails/21.jpg)
THEME OUT YOUR STORIES
COLLECT ALL YOUR STORIES AND GROUP THEM INTO THEMES
PRIORITIZE THEM BASED ON PROJECT GOALS AND PRIMARY USERS.
Wednesday, September 8, 2010
![Page 22: Doing Your HW - A UX approach to your web design](https://reader033.fdocuments.net/reader033/viewer/2022052823/55517e39b4c9057e458b53e8/html5/thumbnails/22.jpg)
FICTITIOUS OR REAL CHARACTERS THAT ARE CREATED TO REPRESENT THE DIFFERENT TYPES OF USERS THAT WILL BE USING YOUR SITE.
USER NEEDS - PERSONAS
Wednesday, September 8, 2010
![Page 23: Doing Your HW - A UX approach to your web design](https://reader033.fdocuments.net/reader033/viewer/2022052823/55517e39b4c9057e458b53e8/html5/thumbnails/23.jpg)
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.
Wednesday, September 8, 2010
![Page 24: Doing Your HW - A UX approach to your web design](https://reader033.fdocuments.net/reader033/viewer/2022052823/55517e39b4c9057e458b53e8/html5/thumbnails/24.jpg)
Wednesday, September 8, 2010
![Page 25: Doing Your HW - A UX approach to your web design](https://reader033.fdocuments.net/reader033/viewer/2022052823/55517e39b4c9057e458b53e8/html5/thumbnails/25.jpg)
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
Wednesday, September 8, 2010
![Page 26: Doing Your HW - A UX approach to your web design](https://reader033.fdocuments.net/reader033/viewer/2022052823/55517e39b4c9057e458b53e8/html5/thumbnails/26.jpg)
USABILITY TEST EXAMPLE
Wednesday, September 8, 2010
![Page 27: Doing Your HW - A UX approach to your web design](https://reader033.fdocuments.net/reader033/viewer/2022052823/55517e39b4c9057e458b53e8/html5/thumbnails/27.jpg)
STRATEGYA FEW THINGS ABOUT THIS PHASE
Wednesday, September 8, 2010
![Page 28: Doing Your HW - A UX approach to your web design](https://reader033.fdocuments.net/reader033/viewer/2022052823/55517e39b4c9057e458b53e8/html5/thumbnails/28.jpg)
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
Wednesday, September 8, 2010
![Page 29: Doing Your HW - A UX approach to your web design](https://reader033.fdocuments.net/reader033/viewer/2022052823/55517e39b4c9057e458b53e8/html5/thumbnails/29.jpg)
STRATEGY -COMPETITIVE ANALYSIS
WHAT MAKES YOUR WEBSITE DIFFERENT THAN YOUR COMPETITORS?
Wednesday, September 8, 2010
![Page 30: Doing Your HW - A UX approach to your web design](https://reader033.fdocuments.net/reader033/viewer/2022052823/55517e39b4c9057e458b53e8/html5/thumbnails/30.jpg)
COMPETITIVE ANALYSIS - LAYOUT & USER FLOW
Wednesday, September 8, 2010
![Page 31: Doing Your HW - A UX approach to your web design](https://reader033.fdocuments.net/reader033/viewer/2022052823/55517e39b4c9057e458b53e8/html5/thumbnails/31.jpg)
COMPETITIVE ANALYSIS - LANDSCAPE
Wednesday, September 8, 2010
![Page 32: Doing Your HW - A UX approach to your web design](https://reader033.fdocuments.net/reader033/viewer/2022052823/55517e39b4c9057e458b53e8/html5/thumbnails/32.jpg)
CONTENT INVENTORYTHE FUNNIEST PART OF CREATING A WEBSITE
Wednesday, September 8, 2010
![Page 33: Doing Your HW - A UX approach to your web design](https://reader033.fdocuments.net/reader033/viewer/2022052823/55517e39b4c9057e458b53e8/html5/thumbnails/33.jpg)
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.
Wednesday, September 8, 2010
![Page 34: Doing Your HW - A UX approach to your web design](https://reader033.fdocuments.net/reader033/viewer/2022052823/55517e39b4c9057e458b53e8/html5/thumbnails/34.jpg)
CONTENT INVENTORY EXAMPLE
Wednesday, September 8, 2010
![Page 35: Doing Your HW - A UX approach to your web design](https://reader033.fdocuments.net/reader033/viewer/2022052823/55517e39b4c9057e458b53e8/html5/thumbnails/35.jpg)
OTHER STEPS IN STRATEGY
ORGANIZE YOUR CONTENT - INFORMATION ARCHITECTURE
CARD SORTING CAN HELP
Wednesday, September 8, 2010
![Page 36: Doing Your HW - A UX approach to your web design](https://reader033.fdocuments.net/reader033/viewer/2022052823/55517e39b4c9057e458b53e8/html5/thumbnails/36.jpg)
DESIGNTIME TO ADD IT UP
Wednesday, September 8, 2010
![Page 37: Doing Your HW - A UX approach to your web design](https://reader033.fdocuments.net/reader033/viewer/2022052823/55517e39b4c9057e458b53e8/html5/thumbnails/37.jpg)
PUT YOUR HOMEWORKINTO ACTION
CREATE WIREFRAMES
USABILITY TESTS AGAIN IF NEEDED
Wednesday, September 8, 2010
![Page 38: Doing Your HW - A UX approach to your web design](https://reader033.fdocuments.net/reader033/viewer/2022052823/55517e39b4c9057e458b53e8/html5/thumbnails/38.jpg)
WIREFRAMES
Wednesday, September 8, 2010
![Page 39: Doing Your HW - A UX approach to your web design](https://reader033.fdocuments.net/reader033/viewer/2022052823/55517e39b4c9057e458b53e8/html5/thumbnails/39.jpg)
THE RESULT
Wednesday, September 8, 2010
![Page 40: Doing Your HW - A UX approach to your web design](https://reader033.fdocuments.net/reader033/viewer/2022052823/55517e39b4c9057e458b53e8/html5/thumbnails/40.jpg)
FINAL WORD ON UXTHESE STEPS WILL GROUND YOUR PROJECT INTO THE REAL
WORLD AND NOT DESIGN IN A VACUUM.
Wednesday, September 8, 2010
![Page 41: Doing Your HW - A UX approach to your web design](https://reader033.fdocuments.net/reader033/viewer/2022052823/55517e39b4c9057e458b53e8/html5/thumbnails/41.jpg)
YOU’RE NUTS!
Wednesday, September 8, 2010
![Page 42: Doing Your HW - A UX approach to your web design](https://reader033.fdocuments.net/reader033/viewer/2022052823/55517e39b4c9057e458b53e8/html5/thumbnails/42.jpg)
A HAPPY CLIENT
Wednesday, September 8, 2010
![Page 43: Doing Your HW - A UX approach to your web design](https://reader033.fdocuments.net/reader033/viewer/2022052823/55517e39b4c9057e458b53e8/html5/thumbnails/43.jpg)
THANK YOU
Wednesday, September 8, 2010