Call Girls in Pratap Nagar, 9953056974 Escort Service
Basics of Interaction Design and Strategy
1. Basics of Interaction Design and Strategy
School of Visual Arts | July 15, 2017 Robert Stribley
2. Today’s presentation will be available on
SlideShare following the workshop:
www.slideshare.net/stribs
3. 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
4.
5. 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
6. 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
11. 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
16. 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
17.
18.
19. 3 Clicks? A myth
Self Study
“Designing for the scent of information” - Jared M. Spool, Christine Perfetti & David Brittan, User Interface Engineering
22. “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
29. “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
30. When information is
clustered appropriately on a
screen, users can scan and
quickly come to terms with
the intent of the content.
41. 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
42. 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
44. 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?
49. “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
50. “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
52. Consider the amount of
attention an audience
needs on a particular
screen*
*It may be zero
53. 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
55. “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
56. “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
57.
58.
59.
60. More about designing with grids:
960 Grid System
960.gs
Design by Grid
www.designbygrid.com
Hashgrid
www.hashgrid.com
Grids
62. 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
63. 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
72. 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
75. 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
76. 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
81. 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
87. 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
90. 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
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
• 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
93. 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
97. 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
99. 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
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
105. 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
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
115. 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
118. 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
120. 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
123. 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.
125. 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
131. 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
132. 1) Discuss features needed for the app and
determine the 3 key screens you want to develop
No sketching yet!
Team Exercise
20min
s
134. 3) Review your work as a team to determine
what changes should be made
4) Make any necessary revisions
Team Exercise
20min
s
135. 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
138. 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)
Basics of Interaction Design and Strategy
School of Visual Arts | Summer 2017
Robert Stribley
Photo by @stribs
Preliminaries
Introductions
Edward Hopper Sketch - Study Sketch for Morning Sun
I enjoyed the exhibit of Hopper’s sketches at the Whitney here in New York
Introductions
Workshop goals
Agenda
Agenda - Morning
Agenda – Afternoon
UX Princples
UX Principles
Everything is not important
You’ve seen web sites with this malady: Everything is treated as if it’s important.
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.
Scent of Information
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
Uniqlo Site
Moncler
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)
Progressive Disclosure
Reduce clutter, cognitive overload, so there’s less to process at once - Across multiple pages – or within a page or overlay
“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
Reduce clutter, cognitive overload, so there’s less to process at once - Across multiple pages – or within a page or overlay
YouTube – Minimized Nav
YouTube – Expanded Nav
Mercedes Benz product information
Progressive disclosure in an app – weather details
Information Clustering & Hierarchy
Jeffery Veen quote from 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.
Information clustering
Information clustering
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.
Lapham’s Quarterly draws you in with a carefully constructed (and responsive) homepage, which displays stories carefully and artfully
Mercedes Benz
Remove paths not taken
Seems simple, but a lot of sites could benefit from adhering to this principle
Remove paths not taken
eBay does the same: sells everything from Beanie Babies to earth moving equipment
Razorfish design for EMC: storage hardware versus security software & services
The Tyranny of Consistency
This is a “Know it when you see it” kind of problem – sometimes tough to put a finger on
But be sure when you break with consistency, you do have a principle in mind for doing so
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.
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?
*Search engine optimization
Note how the site offers plenty of scent
There is no fold – Photo by Gavin Bell
There is no fold - Iamthefold.com
Jakob Nielsen, “Scrolling and Attention,” March 22, 2010
Eyetracking tests by Nielsen Norman Group - - Jakob Nielsen, “Scrolling and Attention,” March 22, 2010
Know Your Audience
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.
Recap of UX Principles
Grids
Grids
Grids
Example: NYTimes
Example: NYTimes
Example: NYTimes
Learn more about grids
Our Project
Project
Project Guidelines
Our Project: Personas
MoMA Screencaps
Met Screencaps
Guggenheim Screencaps
BMA Screencaps
Cooper Hewitt Screencaps
Whitney Screencaps
Smithsonian NASM Screencaps
Key Findings
User Journeys
User Journeys – Rem Koolhaas quote
User Journey Definition - Shean Malik, Mapping User Journeys Using Visual Languages
Methodology
Sample User Journey
Sample User Journey
Sample User Journey
https://www.pinterest.com/daleitch/ux-cx-ui-ixd-cxux-experience-mapsjourneys-and-serv/
Sample User Journey
Class exercise – Develop a user journey
Features Identified
Lunch Break
Afternoon Agenda
Site Maps
Simple site map example
Class exercise: Develop 2 site maps
Review site maps
Responsive Design
Defining Responsive Web Design
Responsive design characteristics
Responsive design characteristics – Mobile First
Responsive design characteristics – break points
Image from here:
http://www.yourinspirationweb.com/2012/10/25/responsive-design-lo-studio-del-layout-e-la-gestione-dei-contenuti/
Conceptual Diagram of Bands in responsive designs
Responsive design characteristics - Grids
Responsive design characteristics - Grids
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/