View
580
Download
1
Category
Preview:
Citation preview
Basics of Interaction Design and StrategySchool of Visual Arts | April 9, 2016 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, 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• Good Design• Q&A
Agenda
UX Principles
Scent of informationProgressive disclosureInformation clustering &
hierarchyRemove paths not takenTyranny of consistencyThere is no foldDeath of the homepageKnow 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
ExampleScreenshot
Remove Paths Not Taken
4
Reduce the field of viewOnce users commit to a path, remove irrelevant navigation
ExampleScreenshot
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 homepageBut more and more likely notThey’re more likely coming from Google or social media
Many sites report only 20% of visitors landing on their homepagesSome 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
ExampleScreenshot
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 System960.gs
Design by Grid www.designbygrid.com
Hashgridwww.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 pathSelf 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 20mins
Features IdentifiedLet’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• Good Design• 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 20mins
Review Site MapsLet’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 StudyEthan 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
Team Exercise:Design a
Responsive Home Page
Design a Responsive Home PageIn your teams, design a responsive home page for MoMA’s web site
1) Discuss features needed for a homepage2) Sketch your ideas for a homepage
individually3) Share your sketches with your team mates4) Collaborate on a single home page
wireframe – for both mobile and desktop
Team Exercise
1) Discuss features needed for a homepage
Team Exercise 20mins
2) Sketch your ideas for a homepage individually – Both desktop and mobile versions
Team Exercise 10mins
3) Share your sketches with your team mates
Team Exercise 10mins
4) Collaborate on a single home page wireframe – for both mobile and desktop
Team Exercise 20mins
Team Exercise:Design a Mobile
App
Design a Mobile AppIn 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 screens3) Review your work as a team to determine
what changes should be made4) 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 20mins
2) Collaborate to design 3 keys screens
Team Exercise 20mins
3) Review your work as a team to determine what changes should be made
4) Make any necessary revisions
Team Exercise 20mins
Gather Your MaterialsIf 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
Good Design
Good design is…Good design is innovative.Good design makes a product useful.Good design is aesthetic.Good design makes a product understandable.Good design is unobtrusive.Good design is honest.Good design is long-lasting.Good design is thorough down to the last detail.Good design is environmentally friendly.Good design is as little design as possible.
Dieter Rams: 10 Principles of Good Design
© Dieter Rams, amended March 2003 and October 2009
Good Design
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
Recommended