Robert Stribley, profile picture
Uploaded byRobert Stribley
PPTX, PDF632 views

Basics of Interaction Design and Strategy

This presentation covered basics of interaction design and strategy. It began with an introduction to the speaker and his clients. The presentation then reviewed key UX principles like scent of information, progressive disclosure, information clustering and hierarchy. It discussed grids, projects, user journeys, responsive design, and included exercises for teams to design a responsive homepage and mobile app. The goal was for attendees to learn UX principles, responsive design, and practice designing through team exercises.

Embed presentation

Download to read offline
1 / 139
2 / 139
3 / 139
4 / 139
5 / 139
6 / 139
7 / 139
8 / 139
9 / 139
10 / 139
11 / 139
12 / 139
13 / 139
14 / 139
15 / 139
16 / 139
17 / 139
18 / 139
19 / 139
20 / 139
21 / 139
22 / 139
23 / 139
24 / 139
25 / 139
26 / 139
27 / 139
28 / 139
29 / 139
30 / 139
31 / 139
32 / 139
33 / 139
34 / 139
35 / 139
36 / 139
37 / 139
38 / 139
39 / 139
40 / 139
41 / 139
42 / 139
43 / 139
44 / 139
45 / 139
46 / 139
47 / 139
48 / 139
49 / 139
50 / 139
51 / 139
52 / 139
53 / 139
54 / 139
55 / 139
56 / 139
57 / 139
58 / 139
59 / 139
60 / 139
61 / 139
62 / 139
63 / 139
64 / 139
65 / 139
66 / 139
67 / 139
68 / 139
69 / 139
70 / 139
71 / 139
72 / 139
73 / 139
74 / 139
75 / 139
76 / 139
77 / 139
78 / 139
79 / 139
80 / 139
81 / 139
82 / 139
83 / 139
84 / 139
85 / 139
86 / 139
87 / 139
88 / 139
89 / 139
90 / 139
91 / 139
92 / 139
93 / 139
94 / 139
95 / 139
96 / 139
97 / 139
98 / 139
99 / 139
100 / 139
101 / 139
102 / 139
103 / 139
104 / 139
105 / 139
106 / 139
107 / 139
108 / 139
109 / 139
110 / 139
111 / 139
112 / 139
113 / 139
114 / 139
115 / 139
116 / 139
117 / 139
118 / 139
119 / 139
120 / 139
121 / 139
122 / 139
123 / 139
124 / 139
125 / 139
126 / 139
127 / 139
128 / 139
129 / 139
130 / 139
131 / 139
132 / 139
133 / 139
134 / 139
135 / 139
136 / 139
137 / 139
138 / 139
139 / 139
Basics of Interaction Design and Strategy School of Visual Arts | July 15, 2017 Robert Stribley
Today’s presentation will be available on SlideShare following the workshop: www.slideshare.net/stribs
Robert Stribley @stribs Introduction My clients have included: • Bank of America, PNC, Wachovia • Citibank, JPMorgan, Morgan Stanley, Oppenheimer Funds, Prudential, Smith Barney, T. Rowe Price • Boston Scientific, Nasonex • AMResorts, Choice Hotels, RCI, Sotheby’s International Realty • Computer Associates, EMC • Ford, Lincoln, Mercedes-Benz, MBFS, Mercedes-Benz Vans, smart • FreshDirect • AT&T, Nextel • Day One, Red Cross, Smithsonian National Air & Space Museum • Pearson, Travel Channel, Women’s Wear Daily
About You • What’s your name? • What do you do for work? • What do you do for fun? • If you could see one museum exhibit, what would it be? Introduction
Goals of this workshop • Learn about particular user experience principles in detail • Learn about principles for responsive design in detail • Learn about the value of creating user journeys and create a detailed user journey as a team • Brainstorm and design a responsive home page as a team • Brainstorm and design a mobile app experience as a team Introduction
Agenda
Morning • UX Principles • Grids • Project • User Journeys • Lunch Agenda
Afternoon • Site Map • Responsive Design • Team Exercise: Responsive Home Page • Team Exercise: Mobile App • Review & Feedback • Q&A Agenda
UX Principles
Scent of information Progressive disclosure Information clustering & hierarchy Remove paths not taken Tyranny of consistency There is no fold Death of the homepage Know your audience UX Principles
Everything Is Important NOT
Scent of Information 1
3 Clicks? A myth Designing for scent is more successful than designing for navigation. – Jared Spool, UIE If there is a scientific basis to the Three- Click Rule, we couldn't find it in our data. - User Interface Engineering, April 2003
3 Clicks? A myth Self Study “Designing for the scent of information” - Jared M. Spool, Christine Perfetti & David Brittan, User Interface Engineering
Progressive Disclosure 2
Tease users. Then draw them to the details.
“Progressive disclosure defers advanced or rarely used features to a secondary screen, making applications easier to learn and less error-prone.” -Jakob NielsenSelf Study “Progressive Disclosure” - Jakob Nielsen, December 4, 2006
Self Study “Progressive Disclosure” – Jennifer Tildwell Progressive disclosure with menus and form design
Information Clustering & Hierarchy Lustmord Table by Jenny Holzer, 1994 3
“Designers can create normalcy out of chaos; they can clearly communicate ideas through the organizing and manipulating of words and pictures.” —Jeffery Veen, The Art and Science of Web Design
When information is clustered appropriately on a screen, users can scan and quickly come to terms with the intent of the content.
1. Group features and content by type
1. Group features and content by type 2. Position them according to an intuitive hierarchy
1. Group features and content by type 2. Position them according to an intuitive hierarchy 3. Drop or demote the less important content
Example Screenshot
Remove Paths Not Taken 4
Reduce the field of view Once users commit to a path, remove irrelevant navigation
Example Screenshot
The Tyranny of Consistency 5
Consistency is an important but sometimes over-rated tool It’s key in maintaining a coherent experience But develop an eye to know when to break from it
Design pages so they're scalable Suppress modules or sections of the page until they're needed Don’t labor to create content just to ensure every page is "consistently" populated
Death of the Home Page 6
People may come to your homepage But more and more likely not They’re more likely coming from Google or social media Many sites report only 20% of visitors landing on their homepages Some as few as 10 or 5% • 88% of traffic coming to The Atlantic not hitting home page • More than 50% of visitors to the NYT not arriving at the home page Have you ever bought a book on Amazon.com because you saw it on the homepage?
More Important? • SEO* • Taxonomy • Meta data • Tagging *search engine optimization
Example Screenshot
There is no fold 7
iamthefold.com
“Web users spend 80% of their time looking at information above the page fold. Although users do scroll, they allocate only 20% of their attention below the fold.” - Jakob Nielsen, “Scrolling and Attention,” March 22, 2010
“People will look very far down a page if (a) the layout encourages scanning, and (b) the initially viewable information makes them believe that it will be worth their time to scroll. Finally, while placing the most important stuff on top, don't forget to put a nice morsel at the very bottom.” - Jakob Nielsen, “Scrolling and Attention,” March 22, 2010
Know Your Audience 8
Consider the amount of attention an audience needs on a particular screen* *It may be zero
Recapping: •Scent of Information •Progressive Disclosure •Information Clustering & Hierarchy •Remove Paths Not Taken •The Tyranny of Consistency •Death of the Home Page •There Is No Fold •Know Your Audience
Grids
“To me, using grids is very much like alphabetizing things… sooner or later, you realize that the alphabet is an incredibly useful organizing principle.” – Khoi Vinh, former design Director, NYTimes.com Grids
“The true benefit of using a grid is that as you learn how to use a grid, you start to think systemically about the solutions you design. You start to try and see how various details can echo one another, how different regions of the canvas can be reused or used for similar things, how like elements can be grouped together.” – Khoi Vinh Grids
More about designing with grids: 960 Grid System 960.gs Design by Grid www.designbygrid.com Hashgrid www.hashgrid.com Grids
Our Project
Develop a museum experience for MOMA which utilizes both a responsive desktop design and a mobile app experience, so users can engage with it both at home on their desktop computer in preparation for their trip and during their visit via mobile app. Our Project
Guidelines • Since the responsive website will display on a mobile phone, the app must not simply repeat the website content • Thought should be given specifically to how the app can help visitors during their onsite visit, but provide some value to users before and after their trip, too • Visitors will have comprehensive access to Wi-Fi throughout the entire museum space Our Project
Personas Our Project
Competitive Review
Key Findings • Ability to highlight multiple exhibits • Access to collections • Display of upcoming events • Focus on membership • Visitor information • Learning and education information • Ability to view different locations • Anything else? • Any key differentiators? Competitive Review
User Journeys
User Journeys “Design is all about entrances and exits.” - Rem Koolhaas
User Journeys Definition: “A user journey, or journey map, visualizes a path or flow through a Web site, application, or service experience—from a starting point to an end objective—based on the user’s motivations and experiences. Journey mapping helps us to create a mental model of an experience that the user goes through to achieve a goal. This valuable information lets us document and visualize existing paths that the user takes and, in turn, analyze and improve upon them.” - Shean Malik, Mapping User Journeys Using Visual Languages
User Journeys Methodology: • Keep developed personas in mind • Determine users’ primary needs • Consider their pain points as well • Brainstorm different ways to help their needs and address their pain points • Develop a journey according to a time-based progression • Consider how various moments in their, which can be handled digitally • Create relevant hooks and calls to action (CTAs) • Strike a balance between freedom of movement and an ideal path Self Study “An introduction to user journeys” - Jason Hobbs, September 6, 2005, Boxes & Arrows
User Journeys
User Journeys
Class Exercise: Develop a user journey, which incorporate features applicable to Andy’s persona • Divide into teams • Discuss what you expect a typical user to do – At home – At the museum – With a specific exhibit – Back home • Develop a high-level diagram, which depicts Andy’s journey User Journeys 20min s
Features Identified Let’s discuss some of the features your team identified. User Journeys
Lunch Break
Afternoon • Site Map • Responsive Design • Team Exercise: Responsive Home Page • Team Exercise: MoMA app Design • Team Presentations • Q&A Agenda
Create a Site Map
Simple site map illustration Site Map
Class Exercise: Develop 2 high-level site maps based on features you discovered in your user journey, plus any additional content needed to flesh out the experience. • One for the MoMA web site • One for the MoMA mobile app Site Map 20min s
Review Site Maps Let’s review your site maps Site Map
Responsive Design
Responsive Web Design “Rather than tailoring disconnected designs to each of an ever- increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design.” – Ethan Marcotte, Responsive Web Design, A List Apart Self Study Ethan Marcotte: Responsive Web Design Responsive Design
Responsive Design Characteristics • Mobile first • Break points • Grids • Handling navigation • Handling tables • Maintain content and features • Maintain hierarchies • Images • Text • Dropping content or features Responsive Design
Mobile First • Design for “mobile first” – the smallest device first, then work up from there • Smallest device may no longer be a mobile phone • Mobile first may encourage simple design, but it need not be simplistic Responsive Design
Break Points • Responsive designs adjust at different “break points” corresponding to the dimensions of various devices, typically desktop, tablet and mobile • However, they’re intended to be content, not device-specific • Typically at least two: – e.g. 320px for mobile, 768px for tablet (portrait), desktop – e.g. 320px for mobile, 768px for tablet (portrait), 1280px for desktop • May also add “minor breakpoints” to address specific issues at various dimensions Responsive Design
Responsive Design
Responsive Design
Responsive Design
Grids • Grids are fluid within a responsive design – they change according to screen dimensions • For example, a desktop design might utilize a 12-column grid, tablet a 9-column grid, and mobile a 4-column grid • Depending on the screen, modules may shift both in size and in placement Responsive Design
Responsive Design
Handling Navigation • Navigation may be repositioned • Often at tablet, especially mobile • In desktop, elements of the navigation can be activated via hover instead of click, since users are utilizing a cursor; whereas in tablet and mobile, these main nav elements must be activated via touch • Design navigation to be touch friendly – e.g. large, tactile targets • Beware of the “hamburger menu” Responsive Design
Responsive Design
Responsive Design
Responsive Design Heavy mobile direction
Handling Navigation – Tabs • Tabs may just reduced in size • They can also be replaced with – Accordions – Dropdowns – Carousel slides • Consider the content to determine, which of these solutions works best Responsive Design
Responsive Design
Handling Tables • Simplest solution for handling tables with multiples columns is to reduce the number of columns (to one if necessary) and stack them in mobile. • You can also allow horizontal scrolling • Or turn columns into individual slides users can swipe through Responsive Design
Responsive Design
Responsive Design Desktop Mobile - Scrolling Mobile - Stacked
Responsive Design Not ideal for mobile
Maintain Content & Features • The goal: Wherever possible, maintain content and features across devices • Must have a strong rationale for dropping any content or features at the mobile level Responsive Design
Responsive Design
Maintain Hierarchies • Modules may be repositioned but hierarchies are maintained Responsive Design
Responsive Design
Responsive Design
Images • Generally, images should be “fluid” • They will scale down in size as the screen resolution changes • Additionally, they may maintain their size, but be cropped if they’re primarily decorative • In this case, images must be selected carefully so that important elements of them aren’t automatically cropped out • In some cases, if the image isn’t needed, it may be dropped entirely for mobile devices Responsive Design
Responsive Design
Responsive Design
Text • Text size is maintained where possible, though headings and headlines may be reduced in size • Text blocks will change in width from desktop to mobile • However, keep lines of text to a maximum of 70 or 80 characters • Do not automatically hyphenate text Responsive Design
Responsive Design
Dropping Content or Features • Whenever possible, avoid dropping content or features • Occasionally, content or features can be dropped to save screen real estate or if they’re not device appropriate • Establish a clear rationale and principles for making such changes Responsive Design
Responsive Design Avoid just shrinking content
Responsive Design Responsive Web Design by Ethan Marcotte
Responsive Design The Responsive Web Design Podcast is co-hosted by Karen McGrane and Ethan Marcotte. In each episode, they interview the people who make responsive redesigns happen.
Team Exercise: Design a Responsive Home Page
Design a Responsive Home Page In your teams, design a responsive home page for MoMA’s web site 1) Discuss features needed for a homepage 2) Sketch your ideas for a homepage individually 3) Share your sketches with your team mates 4) Collaborate on a single home page wireframe – for both mobile and desktop Team Exercise
1) Discuss features needed for a homepage Team Exercise 20min s
2) Sketch your ideas for a homepage individually – Both desktop and mobile versions Team Exercise 10min s
3) Share your sketches with your team mates Team Exercise 10min s
4) Collaborate on a single home page wireframe – for both mobile and desktop Team Exercise 20min s
Team Exercise: Design a Mobile App
Design a Mobile App In your teams, design a mobile app for MoMA 1) Discuss features needed for the app and determine the 3 key screens you want to develop 2) Collaborate to design 3 keys screens 3) Review your work as a team to determine what changes should be made 4) Make any necessary revisions Team Exercise
1) Discuss features needed for the app and determine the 3 key screens you want to develop No sketching yet! Team Exercise 20min s
2) Collaborate to design 3 key screens Team Exercise 20min s
3) Review your work as a team to determine what changes should be made 4) Make any necessary revisions Team Exercise 20min s
Gather Your Materials If you’re finished, start collecting your app and responsive homepage wires so you can present them to the class as a team Team Exercise
Team Exercise: Review & Feedback
Q&A
Additional Resources Books: • Information Architecture for the World Wide Web – Louis Rosenfeld, Peter Morville • Information Architecture: Blueprints for the Web – Christina Wodtke, Austin Govella • The Elements of User Experience – Jesse James Garrett • Designing Web Navigation: Optimizing the User Experience – James Kalbach, Aaron Gustafson • Design of Everyday Things – Donald Norman • Responsive Web Design – Ethan Marcotte Local Events: • IA Meetup • Brooklyn UX • Content Strategy Meetup Web Sites: • Alertbox • A List Apart • Boxes & Arrows • wireframes.tumblr.com Organizations: • Human Computer Interactions (HCI) • Interaction Designers Association (IxDA) • Usability Professionals Association (UPA) Further Studies: • School of Visual Arts • Continuing Ed classes • MFA in Interaction Design • Pratt – Course in Information Design • Rosenfeld Media • General Assembly • Skillshare • Adaptive Path • The Information Architecture Institute • The IA Summit • Nielsen Norman Group • User Interface Engineering Video: The Right Way to Wireframe by Russ Unger (YouTube)
Slideshare address: http://www.slideshare.net/stribs My article on how to find an IA job: http://blog.onwardsearch.com/2012/08/information-architecture-a-guerilla-guide-to-breaking-in/ @stribs

More Related Content

PDF
Guidelines for Responsive UX Design 12/12/20
byRobert Stribley
 
PPTX
Introduction to User Experience Design 2/15/20
byRobert Stribley
 
PPTX
Basics of Interaction Design & Strategy - 4/9/16
byRobert Stribley
 
PPTX
Introduction to User Experience Design 10/06/18
byRobert Stribley
 
PPTX
Introduction to User Experience Design 06/22/18
byRobert Stribley
 
PPTX
Introduction to User Experience Design 2/16/19
byRobert Stribley
 
PDF
Guidelines for Responsive UX Design 11/16/19
byRobert Stribley
 
PPTX
Introduction to User Experience Design 04/27/19
byRobert Stribley
 
Guidelines for Responsive UX Design 12/12/20
byRobert Stribley
 
Introduction to User Experience Design 2/15/20
byRobert Stribley
 
Basics of Interaction Design & Strategy - 4/9/16
byRobert Stribley
 
Introduction to User Experience Design 10/06/18
byRobert Stribley
 
Introduction to User Experience Design 06/22/18
byRobert Stribley
 
Introduction to User Experience Design 2/16/19
byRobert Stribley
 
Guidelines for Responsive UX Design 11/16/19
byRobert Stribley
 
Introduction to User Experience Design 04/27/19
byRobert Stribley
 

What's hot

PDF
Guidelines for Responsive UX Design 07/20/19
byRobert Stribley
 
PPTX
Introduction to User Experience Design 02/17/18
byRobert Stribley
 
PPTX
Introduction to User Experience Design 12/08/18
byRobert Stribley
 
PPTX
Guidelines for Responsive UX Design 03/23/2019
byRobert Stribley
 
PDF
The Top Ten Elements Your Noprofit's Strategic Website Should Have
byguidecreative
 
PPTX
Introduction to User Experience Design 10/05/19
byRobert Stribley
 
PPTX
Introduction to User Experience Design 06/22/19
byRobert Stribley
 
PDF
Guide Series Interactive Design_PastPresentAndFuture
byguidecreative
 
PPTX
Introduction to User Experience Design 12/07/19
byRobert Stribley
 
PDF
Web Usability July 2011
byPrototype Interactive
 
PDF
TopTenWebTricksForYourSchool
byguidecreative
 
PDF
The Top Ten Elements Every School's Website Should Have
byguidecreative
 
PDF
WordPress for NonProfits: Top Ten Elements Every Website Should Have
byguidecreative
 
PDF
sb, ux designer - portfolio
bysbzoto
 
PPTX
Seo & UX
byJosh Patrice
 
PDF
Marga Javier • UX Designer & Strategist • Portfolio
byMargaret Javier
 
PPT
Putting the Customer's User Experience First Online
byShanelle Clapham Digital Fundraising
 
PDF
Intro to UX UI Presentation at StartCo - May 24, 2017
byDavid Sparks, UX, UI, and Usability Professional
 
PDF
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga ...
byUX Riga
 
PDF
Website Usability - Direct Marketing Association NorCal 042016
byJohn Thyfault
 
Guidelines for Responsive UX Design 07/20/19
byRobert Stribley
 
Introduction to User Experience Design 02/17/18
byRobert Stribley
 
Introduction to User Experience Design 12/08/18
byRobert Stribley
 
Guidelines for Responsive UX Design 03/23/2019
byRobert Stribley
 
The Top Ten Elements Your Noprofit's Strategic Website Should Have
byguidecreative
 
Introduction to User Experience Design 10/05/19
byRobert Stribley
 
Introduction to User Experience Design 06/22/19
byRobert Stribley
 
Guide Series Interactive Design_PastPresentAndFuture
byguidecreative
 
Introduction to User Experience Design 12/07/19
byRobert Stribley
 
Web Usability July 2011
byPrototype Interactive
 
TopTenWebTricksForYourSchool
byguidecreative
 
The Top Ten Elements Every School's Website Should Have
byguidecreative
 
WordPress for NonProfits: Top Ten Elements Every Website Should Have
byguidecreative
 
sb, ux designer - portfolio
bysbzoto
 
Seo & UX
byJosh Patrice
 
Marga Javier • UX Designer & Strategist • Portfolio
byMargaret Javier
 
Putting the Customer's User Experience First Online
byShanelle Clapham Digital Fundraising
 
Intro to UX UI Presentation at StartCo - May 24, 2017
byDavid Sparks, UX, UI, and Usability Professional
 
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga ...
byUX Riga
 
Website Usability - Direct Marketing Association NorCal 042016
byJohn Thyfault
 

Similar to Basics of Interaction Design and Strategy

PPTX
Basics of Interaction Design & Strategy - 6/12/15
byRobert Stribley
 
PPTX
Basics of Interaction Design & Strategy - 4/11/15
byRobert Stribley
 
PPTX
Introduction to User Experience Design 10/07/17
byRobert Stribley
 
PDF
Strategies for User Experience Design
byRobert Stribley
 
PPTX
Guidelines for Responsive UX Design 07/07/2018
byRobert Stribley
 
PPTX
Guidelines for Responsive UX Design 11/15/2018
byRobert Stribley
 
PDF
Ux gsg
byLama K Banna
 
PPTX
Functional Design Lab
byiFactory
 
PDF
Usability for Web Designers
byBen Woods
 
PDF
Delightful UX
byFDConf
 
PDF
Do You Know Who Your Users Are?
byKatrina Alcorn
 
PDF
UX Workshop at Startit@KBC
byUXprobe
 
PPTX
Introduction to Information Architecture & Design - 3/19/16
byRobert Stribley
 
PPT
User Experience
byMiles Price
 
PPTX
Introduction to Information Architecture & Design - 6/25/16
byRobert Stribley
 
PPTX
Introduction to Information Architecture and Design - SVA Workshop 021613
byRobert Stribley
 
KEY
User Centered Mobile Web Design
byYvette Shen
 
PPTX
Best practices in website design
byTabby Farney
 
PPTX
Library Website Evaluation
byJay Baker
 
PPTX
Introduction to Information Architecture & Design - 10/03/15
byRobert Stribley
 
Basics of Interaction Design & Strategy - 6/12/15
byRobert Stribley
 
Basics of Interaction Design & Strategy - 4/11/15
byRobert Stribley
 
Introduction to User Experience Design 10/07/17
byRobert Stribley
 
Strategies for User Experience Design
byRobert Stribley
 
Guidelines for Responsive UX Design 07/07/2018
byRobert Stribley
 
Guidelines for Responsive UX Design 11/15/2018
byRobert Stribley
 
Ux gsg
byLama K Banna
 
Functional Design Lab
byiFactory
 
Usability for Web Designers
byBen Woods
 
Delightful UX
byFDConf
 
Do You Know Who Your Users Are?
byKatrina Alcorn
 
UX Workshop at Startit@KBC
byUXprobe
 
Introduction to Information Architecture & Design - 3/19/16
byRobert Stribley
 
User Experience
byMiles Price
 
Introduction to Information Architecture & Design - 6/25/16
byRobert Stribley
 
Introduction to Information Architecture and Design - SVA Workshop 021613
byRobert Stribley
 
User Centered Mobile Web Design
byYvette Shen
 
Best practices in website design
byTabby Farney
 
Library Website Evaluation
byJay Baker
 
Introduction to Information Architecture & Design - 10/03/15
byRobert Stribley
 

More from Robert Stribley

PPTX
Best Practices for Simplifying User Experiences
byRobert Stribley
 
PPTX
Designing for Privacy in an Increasingly Public World — Speed Talk
byRobert Stribley
 
PPTX
Designing for Privacy NY Studio—10/04/21
byRobert Stribley
 
PPTX
Designing for Privacy in an Increasingly Public World
byRobert Stribley
 
PPTX
No Transit: The Criminal Treatment of Transgender Asylum Seekers in the Unite...
byRobert Stribley
 
PPTX
Birds, Bats & Wind Turbines
byRobert Stribley
 
PPTX
Free Flow: The Economic Imperative for Restoring Immigration and Labor Movement
byRobert Stribley
 
PPTX
No Transit: The Criminal Treatment of Transgender Asylum Seekers in the Unite...
byRobert Stribley
 
PPTX
Immigrant Song
byRobert Stribley
 
PPTX
Collaborative Exercises for Digital Design 3/7/18
byRobert Stribley
 
PPTX
Introduction to Information Architecture & Design - 6/24/17
byRobert Stribley
 
PDF
Collaborative Sketching for Secure & Usable Apps
byRobert Stribley
 
Best Practices for Simplifying User Experiences
byRobert Stribley
 
Designing for Privacy in an Increasingly Public World — Speed Talk
byRobert Stribley
 
Designing for Privacy NY Studio—10/04/21
byRobert Stribley
 
Designing for Privacy in an Increasingly Public World
byRobert Stribley
 
No Transit: The Criminal Treatment of Transgender Asylum Seekers in the Unite...
byRobert Stribley
 
Birds, Bats & Wind Turbines
byRobert Stribley
 
Free Flow: The Economic Imperative for Restoring Immigration and Labor Movement
byRobert Stribley
 
No Transit: The Criminal Treatment of Transgender Asylum Seekers in the Unite...
byRobert Stribley
 
Immigrant Song
byRobert Stribley
 
Collaborative Exercises for Digital Design 3/7/18
byRobert Stribley
 
Introduction to Information Architecture & Design - 6/24/17
byRobert Stribley
 
Collaborative Sketching for Secure & Usable Apps
byRobert Stribley
 

Recently uploaded

PDF
Why Investing in UI/UX Strategy Boosts User Engagement
byPixlogix Infotech
 
PPTX
Visual_Merchandising_Detailed_Redesigned.pptx
bysep221
 
PDF
CASE STUDY about Shreyas wellness Center, Quiet healing center; Auroville
byaishwaryag2304
 
PPTX
MAJOR factors affecting TO SEED STORAGE PPT
byparamanandhulagannav
 
PPTX
POMIS PROTOTYPE (Previous Meetings).pptx
byNUPDominadorGagatiga
 
PPTX
702112964-DELHI-HAAT-A-case-study data ppt
byrakshiperween3
 
PDF
VERNACULAR ARCHITECTURE - CONCEPTS & PRINCIPLES
byCattleyaVanessaPamon
 
PPTX
Noora_Custom_Color_HIV_TB_Flowchart.pptx
byparag186340
 
PPTX
Pathological Fractures Lecture.pptx ORTHOPAEDICS
bymc22367
 
PDF
Architectural Professional portfolio designs.pdf
bybuildasnest
 
PPTX
HARDITS THEORY: “to design the design as a design. PRESENTATION.pptx
bycasigbe
 
PDF
Tokyo City Urban Planning Case Study Architecture
bySDhanushKumar
 
PDF
🥳 BUKTI KEMENANGAN HARI INI SELASA 03 FEBRUARI 2026 🥰
byGRAB
 
PPTX
Azure_Landing_Zone_Proposal_with_CAF (1).pptx
bylemeli3232
 
PDF
Should you buy verified PayPal or Stripe accounts_.pdf
bywiulk201973rt6mlnjq7
 
PPTX
ENGLISH DICTIONARY PORTFOLIO FOR EVENTS.
byRie ESPERTA
 
PPTX
2D Transformation (Translation, Rotation, Scaling) in Computer Graphics
byVanshikaBhardwaj32
 
PPTX
Brain storming and Game storming IN ui ux
bysivamalarpcse
 
PPTX
etics.pptxghhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh...
byibganraffy22
 
PDF
TOC Unit 1 Finite State Machine and divisible by 3
bySanjivani college of Engineering
 
Why Investing in UI/UX Strategy Boosts User Engagement
byPixlogix Infotech
 
Visual_Merchandising_Detailed_Redesigned.pptx
bysep221
 
CASE STUDY about Shreyas wellness Center, Quiet healing center; Auroville
byaishwaryag2304
 
MAJOR factors affecting TO SEED STORAGE PPT
byparamanandhulagannav
 
POMIS PROTOTYPE (Previous Meetings).pptx
byNUPDominadorGagatiga
 
702112964-DELHI-HAAT-A-case-study data ppt
byrakshiperween3
 
VERNACULAR ARCHITECTURE - CONCEPTS & PRINCIPLES
byCattleyaVanessaPamon
 
Noora_Custom_Color_HIV_TB_Flowchart.pptx
byparag186340
 
Pathological Fractures Lecture.pptx ORTHOPAEDICS
bymc22367
 
Architectural Professional portfolio designs.pdf
bybuildasnest
 
HARDITS THEORY: “to design the design as a design. PRESENTATION.pptx
bycasigbe
 
Tokyo City Urban Planning Case Study Architecture
bySDhanushKumar
 
🥳 BUKTI KEMENANGAN HARI INI SELASA 03 FEBRUARI 2026 🥰
byGRAB
 
Azure_Landing_Zone_Proposal_with_CAF (1).pptx
bylemeli3232
 
Should you buy verified PayPal or Stripe accounts_.pdf
bywiulk201973rt6mlnjq7
 
ENGLISH DICTIONARY PORTFOLIO FOR EVENTS.
byRie ESPERTA
 
2D Transformation (Translation, Rotation, Scaling) in Computer Graphics
byVanshikaBhardwaj32
 
Brain storming and Game storming IN ui ux
bysivamalarpcse
 
etics.pptxghhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh...
byibganraffy22
 
TOC Unit 1 Finite State Machine and divisible by 3
bySanjivani college of Engineering
 

Basics of Interaction Design and Strategy

  • 1.
    Basics of InteractionDesign and Strategy School of Visual Arts | July 15, 2017 Robert Stribley
  • 2.
    Today’s presentation willbe available on SlideShare following the workshop: www.slideshare.net/stribs
  • 3.
    Robert Stribley @stribs Introduction My clientshave included: • Bank of America, PNC, Wachovia • Citibank, JPMorgan, Morgan Stanley, Oppenheimer Funds, Prudential, Smith Barney, T. Rowe Price • Boston Scientific, Nasonex • AMResorts, Choice Hotels, RCI, Sotheby’s International Realty • Computer Associates, EMC • Ford, Lincoln, Mercedes-Benz, MBFS, Mercedes-Benz Vans, smart • FreshDirect • AT&T, Nextel • Day One, Red Cross, Smithsonian National Air & Space Museum • Pearson, Travel Channel, Women’s Wear Daily
  • 5.
    About You • What’syour name? • What do you do for work? • What do you do for fun? • If you could see one museum exhibit, what would it be? Introduction
  • 6.
    Goals of thisworkshop • Learn about particular user experience principles in detail • Learn about principles for responsive design in detail • Learn about the value of creating user journeys and create a detailed user journey as a team • Brainstorm and design a responsive home page as a team • Brainstorm and design a mobile app experience as a team Introduction
  • 7.
  • 8.
    Morning • UX Principles •Grids • Project • User Journeys • Lunch Agenda
  • 9.
    Afternoon • Site Map •Responsive Design • Team Exercise: Responsive Home Page • Team Exercise: Mobile App • Review & Feedback • Q&A Agenda
  • 10.
  • 11.
    Scent of information Progressivedisclosure Information clustering & hierarchy Remove paths not taken Tyranny of consistency There is no fold Death of the homepage Know your audience UX Principles
  • 12.
  • 15.
  • 16.
    3 Clicks? Amyth Designing for scent is more successful than designing for navigation. – Jared Spool, UIE If there is a scientific basis to the Three- Click Rule, we couldn't find it in our data. - User Interface Engineering, April 2003
  • 19.
    3 Clicks? Amyth Self Study “Designing for the scent of information” - Jared M. Spool, Christine Perfetti & David Brittan, User Interface Engineering
  • 20.
  • 21.
    Tease users. Then drawthem to the details.
  • 22.
    “Progressive disclosure defers advancedor rarely used features to a secondary screen, making applications easier to learn and less error-prone.” -Jakob NielsenSelf Study “Progressive Disclosure” - Jakob Nielsen, December 4, 2006
  • 23.
    Self Study “Progressive Disclosure”– Jennifer Tildwell Progressive disclosure with menus and form design
  • 28.
    Information Clustering & Hierarchy LustmordTable by Jenny Holzer, 1994 3
  • 29.
    “Designers can create normalcyout of chaos; they can clearly communicate ideas through the organizing and manipulating of words and pictures.” —Jeffery Veen, The Art and Science of Web Design
  • 30.
    When information is clusteredappropriately on a screen, users can scan and quickly come to terms with the intent of the content.
  • 31.
    1. Group features andcontent by type
  • 32.
    1. Group features andcontent by type 2. Position them according to an intuitive hierarchy
  • 33.
    1. Group features andcontent by type 2. Position them according to an intuitive hierarchy 3. Drop or demote the less important content
  • 34.
  • 36.
  • 37.
    Reduce the fieldof view Once users commit to a path, remove irrelevant navigation
  • 38.
  • 40.
  • 41.
    Consistency is animportant but sometimes over-rated tool It’s key in maintaining a coherent experience But develop an eye to know when to break from it
  • 42.
    Design pages sothey're scalable Suppress modules or sections of the page until they're needed Don’t labor to create content just to ensure every page is "consistently" populated
  • 43.
    Death of theHome Page 6
  • 44.
    People may cometo your homepage But more and more likely not They’re more likely coming from Google or social media Many sites report only 20% of visitors landing on their homepages Some as few as 10 or 5% • 88% of traffic coming to The Atlantic not hitting home page • More than 50% of visitors to the NYT not arriving at the home page Have you ever bought a book on Amazon.com because you saw it on the homepage?
  • 45.
    More Important? • SEO* •Taxonomy • Meta data • Tagging *search engine optimization
  • 46.
  • 47.
  • 48.
  • 49.
    “Web users spend80% of their time looking at information above the page fold. Although users do scroll, they allocate only 20% of their attention below the fold.” - Jakob Nielsen, “Scrolling and Attention,” March 22, 2010
  • 50.
    “People will lookvery far down a page if (a) the layout encourages scanning, and (b) the initially viewable information makes them believe that it will be worth their time to scroll. Finally, while placing the most important stuff on top, don't forget to put a nice morsel at the very bottom.” - Jakob Nielsen, “Scrolling and Attention,” March 22, 2010
  • 51.
  • 52.
    Consider the amountof attention an audience needs on a particular screen* *It may be zero
  • 53.
    Recapping: •Scent of Information •ProgressiveDisclosure •Information Clustering & Hierarchy •Remove Paths Not Taken •The Tyranny of Consistency •Death of the Home Page •There Is No Fold •Know Your Audience
  • 54.
  • 55.
    “To me, usinggrids is very much like alphabetizing things… sooner or later, you realize that the alphabet is an incredibly useful organizing principle.” – Khoi Vinh, former design Director, NYTimes.com Grids
  • 56.
    “The true benefitof using a grid is that as you learn how to use a grid, you start to think systemically about the solutions you design. You start to try and see how various details can echo one another, how different regions of the canvas can be reused or used for similar things, how like elements can be grouped together.” – Khoi Vinh Grids
  • 60.
    More about designingwith grids: 960 Grid System 960.gs Design by Grid www.designbygrid.com Hashgrid www.hashgrid.com Grids
  • 61.
  • 62.
    Develop a museumexperience for MOMA which utilizes both a responsive desktop design and a mobile app experience, so users can engage with it both at home on their desktop computer in preparation for their trip and during their visit via mobile app. Our Project
  • 63.
    Guidelines • Since theresponsive website will display on a mobile phone, the app must not simply repeat the website content • Thought should be given specifically to how the app can help visitors during their onsite visit, but provide some value to users before and after their trip, too • Visitors will have comprehensive access to Wi-Fi throughout the entire museum space Our Project
  • 64.
  • 65.
  • 72.
    Key Findings • Abilityto highlight multiple exhibits • Access to collections • Display of upcoming events • Focus on membership • Visitor information • Learning and education information • Ability to view different locations • Anything else? • Any key differentiators? Competitive Review
  • 73.
  • 74.
    User Journeys “Design isall about entrances and exits.” - Rem Koolhaas
  • 75.
    User Journeys Definition: “A userjourney, or journey map, visualizes a path or flow through a Web site, application, or service experience—from a starting point to an end objective—based on the user’s motivations and experiences. Journey mapping helps us to create a mental model of an experience that the user goes through to achieve a goal. This valuable information lets us document and visualize existing paths that the user takes and, in turn, analyze and improve upon them.” - Shean Malik, Mapping User Journeys Using Visual Languages
  • 76.
    User Journeys Methodology: • Keepdeveloped personas in mind • Determine users’ primary needs • Consider their pain points as well • Brainstorm different ways to help their needs and address their pain points • Develop a journey according to a time-based progression • Consider how various moments in their, which can be handled digitally • Create relevant hooks and calls to action (CTAs) • Strike a balance between freedom of movement and an ideal path Self Study “An introduction to user journeys” - Jason Hobbs, September 6, 2005, Boxes & Arrows
  • 77.
  • 79.
  • 81.
    Class Exercise: Develop auser journey, which incorporate features applicable to Andy’s persona • Divide into teams • Discuss what you expect a typical user to do – At home – At the museum – With a specific exhibit – Back home • Develop a high-level diagram, which depicts Andy’s journey User Journeys 20min s
  • 82.
    Features Identified Let’s discusssome of the features your team identified. User Journeys
  • 83.
  • 84.
    Afternoon • Site Map •Responsive Design • Team Exercise: Responsive Home Page • Team Exercise: MoMA app Design • Team Presentations • Q&A Agenda
  • 85.
  • 86.
  • 87.
    Class Exercise: Develop 2high-level site maps based on features you discovered in your user journey, plus any additional content needed to flesh out the experience. • One for the MoMA web site • One for the MoMA mobile app Site Map 20min s
  • 88.
    Review Site Maps Let’sreview your site maps Site Map
  • 89.
  • 90.
    Responsive Web Design “Ratherthan tailoring disconnected designs to each of an ever- increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design.” – Ethan Marcotte, Responsive Web Design, A List Apart Self Study Ethan Marcotte: Responsive Web Design Responsive Design
  • 91.
    Responsive Design Characteristics •Mobile first • Break points • Grids • Handling navigation • Handling tables • Maintain content and features • Maintain hierarchies • Images • Text • Dropping content or features Responsive Design
  • 92.
    Mobile First • Designfor “mobile first” – the smallest device first, then work up from there • Smallest device may no longer be a mobile phone • Mobile first may encourage simple design, but it need not be simplistic Responsive Design
  • 93.
    Break Points • Responsivedesigns adjust at different “break points” corresponding to the dimensions of various devices, typically desktop, tablet and mobile • However, they’re intended to be content, not device-specific • Typically at least two: – e.g. 320px for mobile, 768px for tablet (portrait), desktop – e.g. 320px for mobile, 768px for tablet (portrait), 1280px for desktop • May also add “minor breakpoints” to address specific issues at various dimensions Responsive Design
  • 94.
  • 95.
  • 96.
  • 97.
    Grids • Grids arefluid within a responsive design – they change according to screen dimensions • For example, a desktop design might utilize a 12-column grid, tablet a 9-column grid, and mobile a 4-column grid • Depending on the screen, modules may shift both in size and in placement Responsive Design
  • 98.
  • 99.
    Handling Navigation • Navigationmay be repositioned • Often at tablet, especially mobile • In desktop, elements of the navigation can be activated via hover instead of click, since users are utilizing a cursor; whereas in tablet and mobile, these main nav elements must be activated via touch • Design navigation to be touch friendly – e.g. large, tactile targets • Beware of the “hamburger menu” Responsive Design
  • 100.
  • 101.
  • 102.
  • 103.
    Handling Navigation –Tabs • Tabs may just reduced in size • They can also be replaced with – Accordions – Dropdowns – Carousel slides • Consider the content to determine, which of these solutions works best Responsive Design
  • 104.
  • 105.
    Handling Tables • Simplestsolution for handling tables with multiples columns is to reduce the number of columns (to one if necessary) and stack them in mobile. • You can also allow horizontal scrolling • Or turn columns into individual slides users can swipe through Responsive Design
  • 106.
  • 107.
    Responsive Design Desktop Mobile -Scrolling Mobile - Stacked
  • 108.
  • 109.
    Maintain Content &Features • The goal: Wherever possible, maintain content and features across devices • Must have a strong rationale for dropping any content or features at the mobile level Responsive Design
  • 110.
  • 112.
    Maintain Hierarchies • Modulesmay be repositioned but hierarchies are maintained Responsive Design
  • 113.
  • 114.
  • 115.
    Images • Generally, imagesshould be “fluid” • They will scale down in size as the screen resolution changes • Additionally, they may maintain their size, but be cropped if they’re primarily decorative • In this case, images must be selected carefully so that important elements of them aren’t automatically cropped out • In some cases, if the image isn’t needed, it may be dropped entirely for mobile devices Responsive Design
  • 116.
  • 117.
  • 118.
    Text • Text sizeis maintained where possible, though headings and headlines may be reduced in size • Text blocks will change in width from desktop to mobile • However, keep lines of text to a maximum of 70 or 80 characters • Do not automatically hyphenate text Responsive Design
  • 119.
  • 120.
    Dropping Content orFeatures • Whenever possible, avoid dropping content or features • Occasionally, content or features can be dropped to save screen real estate or if they’re not device appropriate • Establish a clear rationale and principles for making such changes Responsive Design
  • 121.
  • 122.
    Responsive Design Responsive WebDesign by Ethan Marcotte
  • 123.
    Responsive Design The ResponsiveWeb Design Podcast is co-hosted by Karen McGrane and Ethan Marcotte. In each episode, they interview the people who make responsive redesigns happen.
  • 124.
  • 125.
    Design a ResponsiveHome Page In your teams, design a responsive home page for MoMA’s web site 1) Discuss features needed for a homepage 2) Sketch your ideas for a homepage individually 3) Share your sketches with your team mates 4) Collaborate on a single home page wireframe – for both mobile and desktop Team Exercise
  • 126.
    1) Discuss featuresneeded for a homepage Team Exercise 20min s
  • 127.
    2) Sketch yourideas for a homepage individually – Both desktop and mobile versions Team Exercise 10min s
  • 128.
    3) Share yoursketches with your team mates Team Exercise 10min s
  • 129.
    4) Collaborate ona single home page wireframe – for both mobile and desktop Team Exercise 20min s
  • 130.
  • 131.
    Design a MobileApp In your teams, design a mobile app for MoMA 1) Discuss features needed for the app and determine the 3 key screens you want to develop 2) Collaborate to design 3 keys screens 3) Review your work as a team to determine what changes should be made 4) Make any necessary revisions Team Exercise
  • 132.
    1) Discuss featuresneeded for the app and determine the 3 key screens you want to develop No sketching yet! Team Exercise 20min s
  • 133.
    2) Collaborate todesign 3 key screens Team Exercise 20min s
  • 134.
    3) Review yourwork as a team to determine what changes should be made 4) Make any necessary revisions Team Exercise 20min s
  • 135.
    Gather Your Materials Ifyou’re finished, start collecting your app and responsive homepage wires so you can present them to the class as a team Team Exercise
  • 136.
  • 137.
  • 138.
    Additional Resources Books: • InformationArchitecture for the World Wide Web – Louis Rosenfeld, Peter Morville • Information Architecture: Blueprints for the Web – Christina Wodtke, Austin Govella • The Elements of User Experience – Jesse James Garrett • Designing Web Navigation: Optimizing the User Experience – James Kalbach, Aaron Gustafson • Design of Everyday Things – Donald Norman • Responsive Web Design – Ethan Marcotte Local Events: • IA Meetup • Brooklyn UX • Content Strategy Meetup Web Sites: • Alertbox • A List Apart • Boxes & Arrows • wireframes.tumblr.com Organizations: • Human Computer Interactions (HCI) • Interaction Designers Association (IxDA) • Usability Professionals Association (UPA) Further Studies: • School of Visual Arts • Continuing Ed classes • MFA in Interaction Design • Pratt – Course in Information Design • Rosenfeld Media • General Assembly • Skillshare • Adaptive Path • The Information Architecture Institute • The IA Summit • Nielsen Norman Group • User Interface Engineering Video: The Right Way to Wireframe by Russ Unger (YouTube)
  • 139.
    Slideshare address: http://www.slideshare.net/stribs My articleon how to find an IA job: http://blog.onwardsearch.com/2012/08/information-architecture-a-guerilla-guide-to-breaking-in/ @stribs

Editor's Notes

  • #2 Basics of Interaction Design and Strategy School of Visual Arts | Summer 2017 Robert Stribley Photo by @stribs
  • #3 Preliminaries
  • #4 Introductions
  • #5 Edward Hopper Sketch - Study Sketch for Morning Sun I enjoyed the exhibit of Hopper’s sketches at the Whitney here in New York
  • #6 Introductions
  • #7 Workshop goals
  • #8 Agenda
  • #9 Agenda - Morning
  • #10 Agenda – Afternoon
  • #11 UX Princples
  • #12 UX Principles
  • #13 Everything is not important
  • #14 You’ve seen web sites with this malady: Everything is treated as if it’s important.
  • #15 Uniqlo’s homepage isn’t the worst you could encounter, but I’ll show you in a moment how my colleagues at Razorfish simplified the home page experience for the U.S. site.
  • #16 Scent of Information
  • #17 If you were to take only one thing away with you today, it would be that the 3-click rule is bunk. Can actually make for a very cluttered site if you try to flatten content so it’s all available within three clicks Users will happily click away 5, 6, 7, 8 times without noticing, if there are clear paths to what they’re looking for, concise navigation, intuitive labels, etc. Background: Studies in “information foraging” in the early 90s at PARC (Palo Alto Research Center Incorporated) Better: a dynamic tension between reducing the number of clicks and providing strong scent to content
  • #18 Uniqlo Site
  • #19 Moncler
  • #20 Self Study “Designing for the scent of information” - Jared M. Spool, Christine Perfetti & David Brittan, User Interface Engineering Also, research “information foraging” – 90s studies at PARC (Palo Alto Research Center Incorporated)
  • #21 Progressive Disclosure
  • #22 Reduce clutter, cognitive overload, so there’s less to process at once - Across multiple pages – or within a page or overlay
  • #23 “Progressive Disclosure” by Jakob Nielsen, December 4, 2006 Originated with studies in the 80s by user interface specialists Jack Carroll's lab work at IBM
  • #24 Reduce clutter, cognitive overload, so there’s less to process at once - Across multiple pages – or within a page or overlay
  • #25 YouTube – Minimized Nav
  • #26 YouTube – Expanded Nav
  • #27 Mercedes Benz product information
  • #28 Progressive disclosure in an app – weather details
  • #29 Information Clustering & Hierarchy
  • #30 Jeffery Veen quote from The Art and Science of Web Design
  • #31 When information is clustered appropriately on a screen, users can scan and quickly come to terms with the intent of the content.
  • #32 Information clustering
  • #33 Information clustering
  • #34 Information clustering Isn’t to say that you couldn’t have a lot of content on the page – e.g. Pinterest. But content is grouped logically, can be scanned easily.
  • #35 Lapham’s Quarterly draws you in with a carefully constructed (and responsive) homepage, which displays stories carefully and artfully
  • #36 Mercedes Benz
  • #37 Remove paths not taken
  • #38 Seems simple, but a lot of sites could benefit from adhering to this principle
  • #39 Remove paths not taken
  • #40 eBay does the same: sells everything from Beanie Babies to earth moving equipment Razorfish design for EMC: storage hardware versus security software & services
  • #41 The Tyranny of Consistency
  • #42 This is a “Know it when you see it” kind of problem – sometimes tough to put a finger on
  • #43 But be sure when you break with consistency, you do have a principle in mind for doing so
  • #44 Found this site by searching on Worst Home Page in the World. Clearly, it’s trying to be all things to all people. Instead, it looks like a dog’s breakfast.
  • #45 Jakob Nielsen wrote in 2002 that home pages are “the most valuable real estate in the world.” Sourcing: http://www.niemanlab.org/2012/08/coming-in-the-side-door-the-value-of-homepages-is-shifting-from-traffic-driver-to-brand/ 88% of traffic coming to The Atlantic not hitting home page More than 50% of visitors to the NYT not arriving at the home page Have you ever bought a book on Amazon.com because you saw it on the homepage?
  • #46 *Search engine optimization
  • #47 Note how the site offers plenty of scent
  • #48 There is no fold – Photo by Gavin Bell
  • #49 There is no fold - Iamthefold.com
  • #50 Jakob Nielsen, “Scrolling and Attention,” March 22, 2010
  • #51 Eyetracking tests by Nielsen Norman Group - - Jakob Nielsen, “Scrolling and Attention,” March 22, 2010
  • #52 Know Your Audience
  • #53 Yes, your site typically has multiple audiences. But not all of them need to be addressed at once. Giving proper thought to who defines a site's audience helps clean out the chaff. Example: Placing find an event functionality in an area where a using is creating an event. Not necessary for that audience.
  • #54 Recap of UX Principles
  • #55 Grids
  • #56 Grids
  • #57 Grids
  • #58 Example: NYTimes
  • #59 Example: NYTimes
  • #60 Example: NYTimes
  • #61 Learn more about grids
  • #62 Our Project
  • #63 Project
  • #64 Project Guidelines
  • #65 Our Project: Personas
  • #66 MoMA Screencaps
  • #67 Met Screencaps
  • #68 Guggenheim Screencaps
  • #69 BMA Screencaps
  • #70 Cooper Hewitt Screencaps
  • #71 Whitney Screencaps
  • #72 Smithsonian NASM Screencaps
  • #73 Key Findings
  • #74 User Journeys
  • #75 User Journeys – Rem Koolhaas quote
  • #76 User Journey Definition - Shean Malik, Mapping User Journeys Using Visual Languages
  • #77 Methodology
  • #78 Sample User Journey
  • #79 Sample User Journey
  • #80 Sample User Journey https://www.pinterest.com/daleitch/ux-cx-ui-ixd-cxux-experience-mapsjourneys-and-serv/
  • #81 Sample User Journey
  • #82 Class exercise – Develop a user journey
  • #83 Features Identified
  • #84 Lunch Break
  • #85 Afternoon Agenda
  • #86 Site Maps
  • #87 Simple site map example
  • #88 Class exercise: Develop 2 site maps
  • #89 Review site maps
  • #90 Responsive Design
  • #91 Defining Responsive Web Design
  • #92 Responsive design characteristics
  • #93 Responsive design characteristics – Mobile First
  • #94 Responsive design characteristics – break points
  • #95 Image from here: http://www.yourinspirationweb.com/2012/10/25/responsive-design-lo-studio-del-layout-e-la-gestione-dei-contenuti/
  • #96 Conceptual Diagram of Bands in responsive designs
  • #97 Responsive design characteristics - Grids
  • #98 Responsive design characteristics - Grids
  • #99 Taken from Mojo Motors’ Responsive Redesign With Fireworks: UX And Interaction Design http://www.smashingmagazine.com/2013/08/26/mojo-motors-responsive-redesign-with-adobe-fireworks-part-1/
  • #100 Responsive design characteristics – Handling Navigation
  • #101 Responsive Design - CNN
  • #102 The Boston Globe
  • #103 Quartz
  • #104 Responsive design characteristics – Handllng Navigation - Tabs
  • #105 Responsive design characteristics – handling tabs
  • #106 Responsive design characteristics – Handling Tables
  • #107 Responsive design characteristics – Handling Tables
  • #108 Handling Tables – Examples from Exis Web - http://exisweb.net/responsive-table-plugins-and-patterns
  • #109 Handling Tables – Examples from Exis Web - http://exisweb.net/responsive-table-plugins-and-patterns – Not ideal for mobile
  • #110 Responsive design characteristics – Content & Features
  • #111 Tom Ford
  • #112 Tom Ford
  • #113 Responsive design characteristics – Maintain Hierarchies
  • #114 http://blog.jerrynixon.com/2013/05/horizontal-screen-breakpoints-for-web.html
  • #115 SVA MFA in Interaction Design site
  • #116 Responsive design characteristics - Images
  • #117 Responsive Design – Images - Moncler
  • #118 Responsive design characteristics – Images - Fader
  • #119 Responsive design characteristics - Text
  • #120 Limiting the amount of text per line on a larger screen
  • #121 Responsive design characteristics
  • #122 Responsive design example
  • #123 Responsive Web Design by Ethan Marcotte
  • #124 Responsive Web Design by Ethan Marcotte
  • #125 Team Exercise: Design a Responsive Home Page
  • #126 Team Exercise: Design a Responsive Home Page
  • #127 Team Exercise: Design a Responsive Home Page
  • #128 Team Exercise: Design a Responsive Home Page
  • #129 Team Exercise: Design a Responsive Home Page
  • #130 Team Exercise: Design a Responsive Home Page
  • #131 Team Exercise: Design a Mobile App
  • #132 Team Exercise: Design a Mobile App
  • #133 Team Exercise: Design a Mobile App
  • #134 Team Exercise: Design a Mobile App
  • #135 Team Exercise: Design a Mobile App
  • #136 Team Exercise: Design a Mobile App
  • #137 Team Exercise: Review & Feedback
  • #138 Q&A
  • #139 Additional Resources
  • #140 Thank you! Slideshare address: http://www.slideshare.net/stribs IA Job article: http://blog.onwardsearch.com/2012/08/information-architecture-a-guerilla-guide-to-breaking-in/ @stribs