Whether they realise it or not, every company is in the user experience business. The best products and services have design at their very core. This workshop will delve into how we as designers, developers and product owners can challenge assumptions and influence business strategy to deliver better, more delightful experiences for our users regardless of screen size. Through a series of hands-on activities we will share techniques for exploring and identifying requirements, painting a picture of our users and quickly creating responsive prototypes that we can test and validate.

1. UX DESIGN
FOR THE
RESPONSIVE WEB

2. HELLO
I’m Matt
@duckymatt
!
!
!
!
!
!

3. HELLO
I’m Danny
@danny_bluestone
!
!
!

4. @cyberduck_uk cyber-duck.co.uk

5. THE PLAN
3 HOUR WORKSHOP DELVING INTO USER-CENTRIC
APPROACHES TO RESPONSIVE DESIGN
Image Copyright: Lucasfilm & Twentieth Century Fox

6. FIRST, HOW DO WE DEFINE
RESPONSIVE?

7. To react quickly
and positively.

8. Responsive web design is a
design approach that aims to
create interfaces that react
quickly and positively to the
user’s conditions.

9. PEOPLE WILL ACCESS OUR
WEBSITES IN WAYS WE HADN’T
EVEN CONSIDERED YET
Image Copyright: Walt Disney Pictures & Tim Burton Pictures

10. UX?
SO, HOW DOES THAT RELATE TO

11. 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/

12. 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/

13. WHAT SHOULD GOOD UX
ACCOMPLISH?

14. 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

15. 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/

16. Credit: http://wtfmobileweb.com/

17. A B C
ANALYSING UX

18. AS A MECHANIC…
Image Copyright: Paramount Pictures &
Robert Stigwood & Allan Carr Productions

19. AS A CAMPER…
Image Copyright: Peter Rodgers Productions & The Rank Organisation

20. GOOD UX DEPENDS ON CONTEXT
THE USER, THE ENVIRONMENT,
THE TASK AND OTHER FACTORS
Image Copyright: Warner Bros. & Esperanto Filmoj & Heyday Films

21. USER CENTRED DESIGN
Image Copyright: HBO

22. Credit: http://xkcd.com/773/

23. Credit: http://www.projectcartoon.com/cartoon/1

24. RESEARCH
DESIGN
ADAPT
MEASURE
13
2
4

25. USER CENTRED DESIGN
ON A RESPONSIVE WEB?

27. 4 TENETS OF GOOD
RESPONSIVE DESIGN
Image Copyright: Chartoff-Winkler Productions & United Artists

28. CONTENT
PARITY
Credit: http://wtfmobileweb.com/
THE SAME CONTENT
SHOULD BE AVAILABLE
ON ALL PLATFORMS
1

29. SPEED
MATTERS
BECAUSE PERFORMANCE
AFFECTS EVERYONE
2
Image Copyright: Universal Pictures

30. FUTURE FRIENDLY
See: http://futurefriend.ly/
CUT DOWN ON MAINTENANCE AND
SUPPORT KNOWN UNKNOWNS
3
Image Copyright: Universal TV

31. ACCESSIBILITY
STYLES, BACKGROUNDS AND JAVASCRIPT
ARE PROGRESSIVE ENHANCEMENTS
4
Photo Credit: Neil McKenzie: http://www.flickr.com/photos/furbyx4/2968376257/

32. CONTENT PARITY
1

33. ASSUMPTIONS
1
Image Copyright: BBC

34. 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/

35. Credit: http://xkcd.com/773/
1

36. 1

37. RESEARCHING
CONTENT STRATEGY
EXISTING CUSTOMERS
DATA ANALYSIS
MARKET RESEARCH
ETHNOGRAPHY
1
Image Copyright: Warner Bros.
STAKEHOLDER INTERVIEWS

38. OUR CONTENT DEFINES
THE LAYOUTS WE NEED!
NOT THE OTHER WAY AROUND
1

39. SPEED MATTERS
2

40. 2
moto.oakley.com

41. 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

42. DOES RESPONSIVE =
POOR PERFORMANCE?
Credit: Guy Podjarny - Creator of Mobitest: http://www.guypo.com/mobile/what-are-responsive-websites-made-of/
2

43. IT’S EASY TO CONFUSE
IMPLEMENTATION WITH
TECHNIQUE
2
Image Copyright: Metro-Goldwyn-Mayer (MGM)

44. GOOD RESPONSIVE DESIGN
HAS PERFORMANCE AT ITS HEART
!
2
timkadlec.com/2013/01/setting-a-performance-budget/Image Copyright: Twentieth Century Fox Film Corporation

45. FUTURE
FRIENDLINESS
3

46. THE WEB DOESN’T HAVE
A FIXED WIDTH
3

47. 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

48. LAYOUT
AND
FLOW
3

49. LAYOUTS BASED ON CONTENT
RATHER THAN DEVICE
3

50. ENHANCE FOR CONTEXT
3

51. ANIMATION AS AN
ENHANCEMENT?
3
Copyright: Touchstone Pictures & Amblin Entertainment & Silver Screen Partners III & Walt Disney

52. LOCATION AS AN
ENHANCEMENT?
3
Copyright: Metro-Goldwyn-Mayer (MGM)

53. ACCESSIBILITY
4

54. DESIGN FOR TOUCH
BY DEFAULT
4
DOES YOUR DESIGN PASS THE
‘RULE OF THUMB’ TEST?
!
ARE YOU RELYING ON HOVER?

55. MAKE THE PURPOSE OF
ALL LINKS AS CLEAR AND
DESCRIPTIVE AS POSSIBLE
IF YOUR LINKS SAY “CLICK HERE”
YOU’RE DOING IT WRONG
4

56. MAKE URLS HUMAN
READABLE AND PERMANENT
WHERE POSSIBLE
4
CAN PEOPLE TELL WHERE THEY ARE ON YOUR
WEBSITE FROM THE URL ALONE?

57. 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/

58. 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/

59. APPLYING OUR PRINCIPLES OF
RESPONSIVE DESIGN
THROUGH UCD

60. THE BRIEF

61. RESEARCH
DESIGN
ADAPT
MEASURE
13
2
4

62. RESEARCH1
Image Copyright: Warner Bros.

63. STAKEHOLDER
INTERVIEWS
http://goodkickoffmeetings.com/2010/04/stakeholder-frontloading/
1

64. 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

65. 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/

66. IDENTIFYING
OUR USERS?
1
EXERCISE
Image Copyright: Paramount Pictures

67. PERSONAS1
Image Copyright: Astralwerks, & Gramercy Pictures
& Propaganda Films & Single Cell Pictures

68. TIPS FOR CREATING PERSONAS1
RESEARCH EXISTING USERS
!
RESEARCH COMPETITORS
!
ETHNOGRAPHIC STUDIES
!
SOCIAL MEDIA
!
DOMAIN EXPERT INSIGHT
!
DATA!

69. FINDING OUR USERS1
ETHNIO
!
SOCIAL MEDIA
!
PHYSICAL LOCATIONS
!
USE PROFESSIONAL RECRUITERS
!
THE CLIENT…

70. 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!

71. DESIGN2
Image Copyright: Be Gentlemen Limited Partnership
& Lawrence Bender & Miramax Films

72. TASK PROFILING2
WHAT ACTIVITIES DO
OUR USERS NEED TO PERFORM?

73. FREQUENCY2
WHAT WILL THE PEOPLE NEED
TO DO MOST OFTEN?

74. CRITICAL2
CAN BE INFREQUENT, BUT IT’S
CRITICAL TO SUPPORT THEM

75. 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?

76. 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

77. ADAPT3
Image credit: http://en.wikipedia.org/wiki/Apollo_13

78. SKETCHING3
Image Copyright: Twentieth Century Fox Film Corporation & Paramount Pictures

79. TIPS FOR PARTICIPATORY
SKETCHING
1
ENCOURAGE LOW FIDELITY
!
CRITIQUE AS A GROUP
!
FRAME CRITIQUE USING PERSONAS

80. 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.

81. PROTOTYPE
3
Copyright: Paramount Pictures & Marvel Enterprises

82. USE STYLE TILES
http://styletil.es/
3
Copyright: Sandollar Productions & Touchstone Pictures

83. PROTOTYPECREATE PATTERN LIBRARIES
http://boagworld.com/design/pattern-library/
3
Copyright: Universal Pictures & Alphaville Films

84. MEASURE4
Image Copyright: DreamWorks SKG & Universal Pictures

85. Your ego is a
bad designer
CHRISTOPHER BUTLER
http://www.newfangled.com/your_ego_is_a_bad_designer
4

86. CORRIDOR TEST4
EXERCISE
Image Copyright: Warner Bros. & Legendary Pictures & Syncopy

87. NEARLY THERE
Image Copyright: Paramount Pictures & Lucasfilm

88. WHY AND WHERE
A USER-CENTRED APPROACH
IS NECESSARY

89. THE 4 TENETS OF EFFECTIVE
RESPONSIVE DESIGN

90. TECHNIQUES WITHIN THE
USER-CENTRED DESIGN
PROCESS

91. 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