UX DESIGN FOR THE RESPONSIVE WEB
HELLO I’m Matt @duckymatt !
!
!
!
!
!
HELLO I’m Danny @danny_bluestone !
!
!
!
THE PLAN3 HOUR WORKSHOP DELVING INTO USER-CENTRIC APPROACHES TO RESPONSIVE DESIGN
Image Copyright: Lucasfilm & Twentieth Century Fox
FIRST, HOW DO WE DEFINE RESPONSIVE?
To react quickly and positively.
Responsive web design is a design approach that aims to create interfaces that react quickly and positively to the user’s conditions.
PEOPLE WILL ACCESS OUR WEBSITES IN WAYS WE HADN’T EVEN CONSIDERED YET
Image Copyright: Walt Disney Pictures & Tim Burton Pictures
UX?SO, HOW DOES THAT RELATE TO
User experience encompasses all aspects of the end user’s interaction with the company, its services and its products
JAKOB NIELSEN & DON NORMAN
Photo credit: http://www.nngroup.com/people-jakob-nielsen-photos/
Source: http://www.nngroup.com/articles/definition-user-experience/
Businesses cannot treat their customers as passive “consumers” any longer; every company is in the user experience business.
KAREN MCGRANE
Source: http://alistapart.com/column/explaining-water-to-fish
Photo credit: Eirik Helland Urke: http://www.flickr.com/photos/webdagene/6149954950/
WHAT SHOULD GOOD UX ACCOMPLISH?
People will forget what you said. People will forget what you did. But people will never forget how you made them feel.
MAYA ANGELOU
Photo credit: York College ISLGP http://commons.wikimedia.org/wiki/File:Maya_Angelou_visits_YCP!_2413.jpg
POOR UX LEADS TO CONFUSION, FRUSTRATION OR EVEN ANGER
Photo credit: Mat Walker https://www.flickr.com/photos/matski_98/8259750205/
More examples: http://shitliftux.tumblr.com/
A B C
ANALYSING UX
AS A MECHANIC…
Image Copyright: Paramount Pictures & Robert Stigwood & Allan Carr Productions
AS A CAMPER…
Image Copyright: Peter Rodgers Productions & The Rank Organisation
GOOD UX DEPENDS ON CONTEXTTHE USER, THE ENVIRONMENT, THE TASK AND OTHER FACTORS
Image Copyright: Warner Bros. & Esperanto Filmoj & Heyday Films
USER CENTRED DESIGN
Image Copyright: HBO
RESEARCH
DESIGN
ADAPT
MEASURE
13
2
4
USER CENTRED DESIGN ON A RESPONSIVE WEB?
4 TENETS OF GOOD RESPONSIVE DESIGN
Image Copyright: Chartoff-Winkler Productions & United Artists
CONTENT PARITY
Credit: http://wtfmobileweb.com/
THE SAME CONTENT SHOULD BE AVAILABLE ON ALL PLATFORMS
1
SPEED MATTERSBECAUSE PERFORMANCE AFFECTS EVERYONE
2
Image Copyright: Universal Pictures
FUTURE FRIENDLY
See: http://futurefriend.ly/
CUT DOWN ON MAINTENANCE AND SUPPORT KNOWN UNKNOWNS
3
Image Copyright: Universal TV
ACCESSIBILITYSTYLES, BACKGROUNDS AND JAVASCRIPT ARE PROGRESSIVE ENHANCEMENTS
4
Photo Credit: Neil McKenzie: http://www.flickr.com/photos/furbyx4/2968376257/
CONTENT PARITY
1
ASSUMPTIONS
1
Image Copyright: BBC
You don't get to decide which device people use to access
your website.
KAREN MCGRANE
http://alistapart.com/article/your-content-now-mobile
Photo credit: Eirik Helland Urke: http://www.flickr.com/photos/webdagene/6149954950/
1
RESEARCHING CONTENT STRATEGY EXISTING CUSTOMERS
DATA ANALYSIS
MARKET RESEARCH
ETHNOGRAPHY
1
Image Copyright: Warner Bros.
STAKEHOLDER INTERVIEWS
OUR CONTENT DEFINES THE LAYOUTS WE NEED
!
NOT THE OTHER WAY AROUND
1
SPEED MATTERS
2
If you were data roaming on an iPhone, at $9 per Mb data
roaming, that web page would cost me $785 to look at on my
iPhone!
ANDREW CLARKE
http://alistapart.com/article/dao/
Photo credit: Jeffrey Zeldman: http://www.flickr.com/photos/zeldman/12621077243
http://dandelion-burdock.com/articles/view/the-weight-of-the-web
DOES RESPONSIVE = POOR PERFORMANCE?
Credit: Guy Podjarny - Creator of Mobitest: http://www.guypo.com/mobile/what-are-responsive-websites-made-of/
2
IT’S EASY TO CONFUSE IMPLEMENTATION WITH
TECHNIQUE
2
Image Copyright: Metro-Goldwyn-Mayer (MGM)
GOOD RESPONSIVE DESIGN HAS PERFORMANCE AT ITS HEART
!
2timkadlec.com/2013/01/setting-a-performance-budget/Image Copyright: Twentieth Century Fox Film Corporation
FUTURE FRIENDLINESS
3
THE WEB DOESN’T HAVE A FIXED WIDTH
3
We should embrace the fact that the web doesn’t have the same constraints [as the printed page]
and design for this flexibility.
JOHN ALLSOPP
http://alistapart.com/article/dao/
Photo credit: TEDxNSW: http://www.flickr.com/photos/42645924@N02/3933255654/
3
LAYOUT AND FLOW
3
LAYOUTS BASED ON CONTENT
RATHER THAN DEVICE
3
ENHANCE FOR CONTEXT3
ANIMATION AS AN ENHANCEMENT?
3Copyright: Touchstone Pictures & Amblin Entertainment & Silver Screen Partners III & Walt Disney
LOCATION AS AN ENHANCEMENT?
3Copyright: Metro-Goldwyn-Mayer (MGM)
ACCESSIBILITY
4
DESIGN FOR TOUCH BY DEFAULT
4
DOES YOUR DESIGN PASS THE ‘RULE OF THUMB’ TEST?
!
ARE YOU RELYING ON HOVER?
MAKE THE PURPOSE OF ALL LINKS AS CLEAR AND
DESCRIPTIVE AS POSSIBLE
IF YOUR LINKS SAY “CLICK HERE” YOU’RE DOING IT WRONG
4
MAKE URLS HUMAN READABLE AND PERMANENT
WHERE POSSIBLE
4
CAN PEOPLE TELL WHERE THEY ARE ON YOUR WEBSITE FROM THE URL ALONE?
DON’T USE PLACEHOLDERS AS A SUBSTITUTE FOR LABELS
ON FORMS
4
http://www.webaxe.org/placeholder-attribute-is-not-a-label/Image credit: Dave Bushell: http://dbushell.com/2013/11/08/form-label-design/
PROOF DESIGNS IN GREYSCALE TO CHECK COLOUR CONTRAST
4
ALSO USE COLOUR BLINDNESS SIMULATORS AND COLOUR CONTRAST CHECK TOOLS
Related: http://24ways.org/2012/colour-accessibility/
APPLYING OUR PRINCIPLES OFRESPONSIVE DESIGN THROUGH UCD
THE BRIEF
RESEARCH
DESIGN
ADAPT
MEASURE
13
2
4
RESEARCH1
Image Copyright: Warner Bros.
STAKEHOLDER INTERVIEWShttp://goodkickoffmeetings.com/2010/04/stakeholder-frontloading/
1
STAKEHOLDER INTERVIEW TECHNIQUES
http://goodkickoffmeetings.com/2010/04/stakeholder-frontloading/
1
KEEP IT RELAXED AND INFORMAL !
STAY FLEXIBLE !
KEEP IT ONE-ON-ONE !
ALLOW THEM TO SPEAK OFF-THE-RECORD
The turning point in many interviews is when the interviewee gets up and closes the office door and lowers their voice.
PAUL BOAG
Photo credit: Andreas Øverland: http://www.flickr.com/photos/andreasoverland/4954194732/ http://boagworld.com/business-strategy/how-to-improve-your-site-using-stakeholder-interviews/
IDENTIFYING OUR USERS?
1
EXERCISE
Image Copyright: Paramount Pictures
PERSONAS1
Image Copyright: Astralwerks, & Gramercy Pictures & Propaganda Films & Single Cell Pictures
TIPS FOR CREATING PERSONAS1
RESEARCH EXISTING USERS !
RESEARCH COMPETITORS !
ETHNOGRAPHIC STUDIES !
SOCIAL MEDIA !
DOMAIN EXPERT INSIGHT !
DATA!
FINDING OUR USERS1
ETHNIO !
SOCIAL MEDIA !
PHYSICAL LOCATIONS !
USE PROFESSIONAL RECRUITERS !
THE CLIENT…
PERSONAS1
EXERCISE
BACKGROUND AGE RANGE, NATIVE LANGUAGE, WORLD OUTLOOK !
EXPERIENCE FAMILIARITY WITH SIMILAR SERVICES OR PRODUCTS AND WILL THEY NEED TO LEARN !
NEEDS WHAT MOTIVATES THEM? DO THEY SHARE BEHAVIOURAL TRAITS? !
CONCERNS WHAT CONCERNS DO THEY HAVE? !
GIVE THEM NAMES AND DRAW THEIR FACE!
DESIGN2
Image Copyright: Be Gentlemen Limited Partnership & Lawrence Bender & Miramax Films
TASK PROFILING2
WHAT ACTIVITIES DO OUR USERS NEED TO PERFORM?
FREQUENCY2
WHAT WILL THE PEOPLE NEED TO DO MOST OFTEN?
CRITICAL2
CAN BE INFREQUENT, BUT IT’S CRITICAL TO SUPPORT THEM
DEFINING TASKS1
EXERCISE
USER / ENVIRONMENT WHO NEEDS TO COMPLETE THIS TASK? WHAT IS THEIR ENVIRONMENT? !
OUTCOME WHY IS THE ACTIVITY PERFORMED? WHAT DOES THE USER ACHIEVE? !
DIFFICULTY WHAT PROBLEMS MIGHT THE USER ENCOUNTER? !
FREQUENCY HOW OFTEN IS THE TASK COMPLETED? ARE THERE TIME RESTRICTIONS ON IT? !
INPUT / OUTPUT WHAT WILL THE USER NEED TO PROVIDE? WHAT WILL THEY EXPECT BACK?
INFORMATION ARCHITECTURE2
EXERCISE
BASED ON THOSE TASKS IDENTIFY THE KEY INTERFACES OR TOUCH POINTS THAT WILL BE REQUIRED IN THE TASK FLOW. !
WHAT CONTENT WILL NEED TO EXIST ON EACH? !
DESIGN URLS FOR EACH PAGE.
Image Copyright: Columbia Pictures & Hawk Films
SKETCHING3
Image Copyright: Twentieth Century Fox Film Corporation & Paramount Pictures
TIPS FOR PARTICIPATORY SKETCHING
1
ENCOURAGE LOW FIDELITY !
CRITIQUE AS A GROUP !
FRAME CRITIQUE USING PERSONAS
UI SKETCHING3
EXERCISE
SKETCH OUT THE INTERFACES INVOLVED FOR ONE OF THE TASKS IDENTIFIED. !
START WITH MOBILE FIRST AND NUMBER EACH INTERFACE ELEMENT. !
REMEMBER WHAT IS IMPORTANT FOR YOUR KEY PERSONAS.
PROTOTYPE
3
Copyright: Paramount Pictures & Marvel Enterprises
USE STYLE TILEShttp://styletil.es/
3
Copyright: Sandollar Productions & Touchstone Pictures
PROTOTYPECREATE PATTERN LIBRARIEShttp://boagworld.com/design/pattern-library/
3
Copyright: Universal Pictures & Alphaville Films
MEASURE4
Image Copyright: DreamWorks SKG & Universal Pictures
Your ego is a bad designer
CHRISTOPHER BUTLER
http://www.newfangled.com/your_ego_is_a_bad_designer
4
CORRIDOR TEST4
EXERCISE
Image Copyright: Warner Bros. & Legendary Pictures & Syncopy
NEARLY THERE
Image Copyright: Paramount Pictures & Lucasfilm
WHY AND WHERE A USER-CENTRED APPROACH
IS NECESSARY
THE 4 TENETS OF EFFECTIVE RESPONSIVE DESIGN
TECHNIQUES WITHIN THE USER-CENTRED DESIGN
PROCESS
THANK YOU@duckymatt @danny_bluestone @cyberduck_uk
Copyright: Studio 37 & La Petite Reine & La Classe Américaine & JD Prod & France 3 Cinéma & Jouror Productions & uFilm
