CMSC434 Week 10 | Lecture 19 | Nov 5, 2013 Aesthetics and ...€¦ · from Japanese to Hebrew, and...
Transcript of CMSC434 Week 10 | Lecture 19 | Nov 5, 2013 Aesthetics and ...€¦ · from Japanese to Hebrew, and...
Human Computer Interaction Laboratory
@jonfroehlich Assistant Professor Computer Science
CMSC434 Introduction to Human-Computer Interaction
Week 10 | Lecture 19 | Nov 5, 2013
Aesthetics and Applying Design Principles
Today
1. Schedule
2. Aesthetics
3. Incorporating and Applying Design
Principles: Two Examples
We’ve come to a stage when
computer technology needs to be
designed as part of everyday
culture, so that it’s beautiful and
intriguing, so that it has emotive
as well as functional qualities.
BillMoggridge Designer, Co-Founder of IDEO
[Moggridge, 2006]
If we only design the function
of something, not what it also
communicates, we risk our design
being misinterpreted. Worse, we
waste an opportunity to
enhance everyday life.
BillMoggridge Designer, Co-Founder of IDEO
[Moggridge, 2006]
The philosophical study of beauty and taste.
what is aesthetics?
In particular, the examination of what
makes something beautiful, sublime, ugly,
disgusting, cute, fun
[Prof. Kimiko Ryokai, Interface Aesthetics, 2008]
[http://syntheticaesthetics1.wordpress.com/]
[http://syntheticaesthetics1.wordpress.com/]
Write-down the top three most beautiful
interactive systems you have ever used.
Aesthetics in HCI
Emotional design
New York Times:
“Whatever one may think of the MINI Cooper’s
dynamic attributes, which range from very good to
marginal, it is fair to say that almost no new vehicle
in recent memory has provoked more smiles.” found
in Norman Emotional Design
It’s not surprising that attractive things are preferred over ugly
ones, but are they also perceived as working better?
[Kurosu & Kashimura, Apparent Usability vs. Inherent Usability, CHI'95]
Studied different layouts of
controls for ATMS. All versions
identical in function and
number of buttons, except for
level of “attractiveness.”
[Kurosu & Kashimura, Apparent Usability vs. Inherent Usability, CHI'95]
The attractive screens
performed better!
NoamTractinsky Professor at Ben-Gurion University, Israel
Suspicious!
Clearly, aesthetic preferences
are culturally dependent.
[Moreover], Japanese culture
is known for its aesthetic
tradition.
[Quote from Norman, Emotional Design, 2004]
NoamTractinsky Professor at Ben-Gurion University, Israel
Noam received the ATM layouts from
Kurosu and Kashimura. Translated them
from Japanese to Hebrew, and reran a
similar experiment.
[From Norman, Emotional Design, 2004]
He replicated the Japanese findings
and, in fact, found a stronger
correlation between usability and
aesthetics
Follow-up Experiment!
[Ben-Bassat, Economic and Subjective Measures of the Perceived Value of Aesthetics and Usability, ACM Trans CHI’06]
Follow-up Experiment!
Within subject design,
varied usability and
aesthetics of a
phonebook application
[Ben-Bassat, Economic and Subjective Measures of the Perceived Value of Aesthetics and Usability, ACM Trans CHI’06]
[Ben-Bassat, Economic and Subjective Measures of the Perceived Value of Aesthetics and Usability, ACM Trans CHI’06]
Experimental Design Within-subject factors
[Ben-Bassat, Economic and Subjective Measures of the Perceived Value of Aesthetics and Usability, ACM Trans CHI’06]
Varying Aesthetics
“low aesthetics” system “high aesthetics” system
As determined from pilot studies
The more beautiful,
the higher the
perceived usability.
More aesthetic systems
were perceived to be
slightly more usable.
[Ben-Bassat, Economic and Subjective Measures of the Perceived Value of Aesthetics and Usability, ACM Trans CHI’06]
Usable things appear
more beautiful.
High usability systems
were always judged as
more aesthetic.
[Ben-Bassat, Economic and Subjective Measures of the Perceived Value of Aesthetics and Usability, ACM Trans CHI’06]
Fast judgment on
aesthetics and
usability.
Importance of first
impressions in shaping
users’ attitudes towards
interactive systems.
[Ben-Bassat, Economic and Subjective Measures of the Perceived Value of Aesthetics and Usability, ACM Trans CHI’06]
No positive aesthetics
effect on performance.
Performance with low
aesthetic systems was
slightly better than with
high aesthetic systems.
[Ben-Bassat, Economic and Subjective Measures of the Perceived Value of Aesthetics and Usability, ACM Trans CHI’06]
Limitations... o Only one system
o Was it “beautiful?”
o Participants: 150
engineering students
[Ben-Bassat, Economic and Subjective Measures of the Perceived Value of Aesthetics and Usability, ACM Trans CHI’06]
Visual attractiveness of a
web site contributed to
feelings of usefulness,
enjoyment, and ease-
of-use.
[Heijden, Factors Influencing the Usage of Websites, Information and Management 2003]
[Hassenzahl, The Interplay of Beauty, Goodness, and Usability in Interactive Products, Human-Comp. Interaction, 2004]
No substantial relation
between actual or
perceived usability and
beauty was found.
[Hassenzahl, The Interplay of Beauty, Goodness, and Usability in Interactive Products, Human-Comp. Interaction, 2004]
Interested in
learning
more about
this topic?
Is the following statement about iOS7 or Windows Phone?
The innovation here is the fluidity of experience and
focus on the data, without using traditional user
interface conventions of windows and frames.
Industrial Designers Society of America (IDEA) Quote from Isabel Ancona, UX Consultant
The innovation here is the fluidity of experience and
focus on the data, without using traditional user
interface conventions of windows and frames. Data
becomes the visual elements and controls. Simple
gestures and transitions guide the user deeper into
content. A truly elegant and unique experience.
Industrial Designers Society of America (IDEA) Quote from Isabel Ancona, UX Consultant
The innovation here is the fluidity of experience and
focus on the data, without using traditional user
interface conventions of windows and frames. Data
becomes the visual elements and controls. Simple
gestures and transitions guide the user deeper into
content. A truly elegant and unique experience.
Industrial Designers Society of America (IDEA) Quote from Isabel Ancona, UX Consultant Source: http://en.wikipedia.org/wiki/Metro_(design_language)
<name> is our design language… It’s modern and
clean. It’s fast and in motion. It’s about content and
typography. And it’s entirely authentic.
Albert Shum, Michael Smuga, Chad Roberts
<name> is our design language… It’s modern and
clean. It’s fast and in motion. It’s about content and
typography. And it’s entirely authentic.
Albert Shum, Michael Smuga, Chad Roberts
Albert Shum, Michael Smuga, Chad Roberts Quote from MIX2010
Source: http://ecn.channel9.msdn.com/o9/mix/10/pptx/CL14.pptx
Metro is our design language… It’s modern and clean.
It’s fast and in motion. It’s about content and
typography. And it’s entirely authentic.
examining design principles in the wild
WinPhone7
Metro
Zune
Windows Phone 7 Design Principles
Windows Phone 7 Design Principles
Clean, Light, Open, Fast
Celebration of Typography
Alive in Motion
Content, Not Chrome
Authentically Digital
Windows Phone 7 Design Principles
Clean, Light, Open, Fast
Celebration of Typography
Alive in Motion
Content, Not Chrome
Authentically Digital
Clean, Light, Open, Fast
Celebrate Typography
Alive in Motion
Content, Not Chrome
Authentically Digital
Feels Fast and Responsive
Focus on Primary Tasks
Do a Lot with Very Little
Reduction of Unnecessary Elements
Delightful Use of Whitespace
Full Bleed Canvas
Windows Phone 7 Design Principles
Clean, Light, Open, Fast
Celebration of Typography
Alive in Motion
Content, Not Chrome
Authentically Digital
Clean, Light, Open, Fast
Celebrate Typography
Alive in Motion
Content, Not Chrome
Authentically Digital
Type is Beautiful, Not Just Legible
Clear Information Design
Uncompromising Sensitivity to
Weight, Balance and Scale
Windows Phone 7 Design Principles
Clean, Light, Open, Fast
Celebration of Typography
Alive in Motion
Content, Not Chrome
Authentically Digital
Clean, Light, Open, Fast
Celebrate Typography
Alive in Motion
Content, Not Chrome
Authentically Digital
Feels Responsive and Alive
Creates a System
Gives Context to Improve Usability
Transition Between UI is as
Important as the UI Design
Adds Dimension and Depth
Windows Phone 7 Design Principles
Clean, Light, Open, Fast
Celebration of Typography
Alive in Motion
Content, Not Chrome
Authentically Digital
Clean, Light, Open, Fast
Celebrate Typography
Alive in Motion
Content, Not Chrome
Authentically Digital
Delight through Content Instead of
Decoration
Reduce Visuals that are Not
Content
Contents is the UI
Direct interaction with the Content
Directly
Windows Phone 7 Design Principles
Clean, Light, Open, Fast
Celebration of Typography
Alive in Motion
Content, Not Chrome
Authentically Digital
Clean, Light, Open, Fast
Celebrate Typography
Alive in Motion
Content, Not Chrome
Authentically Digital
Design for the Form Factor
Don’t Try to be What It’s NOT
Be Direct
examining design principles in the wild
iOS7
Design Principles of iOS7
In many ways, we’ve tried to create an interface that
is unobtrusive and deferential. One where the
design recedes and, in doing so, actually elevates
your content.
Jony Ive Quote from WWDC2013
Source: https://developer.apple.com/wwdc/videos/
Even the simple act of changing your wallpaper, has
a very noticeable effect on the way your iPhone
looks and feels across the entire system.
Jony Ive Quote from WWDC2013
Source: https://developer.apple.com/wwdc/videos/
While iOS was completely new, it was important to
us to make it instantly familiar. We wanted to take
an experience that people know very well, and
actually add to it, to make it more useful. To make
it more enjoyable.
Jony Ive Quote from WWDC2013
Source: https://developer.apple.com/wwdc/videos/
I’m not sure that I’ve seen a better communicative
artifact—across any medium—for articulating and
applying IxD principles.
…redesigning all the icons and developing a grid system
allowed us to achieve a much more harmonious relationship
between individual elements. We’ve also incorporated a
whole new palette of colors.
Jony Ive Quote from WWDC2013
Source: https://developer.apple.com/wwdc/videos/
…redesigning all the icons and developing a grid system
allowed us to achieve a much more harmonious relationship
between individual elements. We’ve also incorporated a
whole new palette of colors. Distinct, functional layers help
establish hierarchy and order. And the use of translucency
gives you a sense of your context. These planes combined
with new approaches to animation and motion create a
sense of depth and vitality.
Jony Ive Quote from WWDC2013
Source: https://developer.apple.com/wwdc/videos/
…redesigning all the icons and developing a grid system
allowed us to achieve a much more harmonious relationship
between individual elements. We’ve also incorporated a
whole new palette of colors. Distinct, functional layers help
establish hierarchy and order. And the use of translucency
gives you a sense of your context. These planes combined
with new approaches to animation and motion create a
sense of depth and vitality.
Jony Ive Quote from WWDC2013
Source: https://developer.apple.com/wwdc/videos/
Label the design principle and the approach
…redesigning all the icons and developing a grid system
allowed us to achieve a much more harmonious relationship
between individual elements. We’ve also incorporated a
whole new palette of colors. Distinct, functional layers
help establish hierarchy and order. And the use of
translucency gives you a sense of your context. These
planes combined with new approaches to animation and
motion create a sense of depth and vitality.
Jony Ive Quote from WWDC2013
Source: https://developer.apple.com/wwdc/videos/
Label the design principle and the approach
…redesigning all the icons and developing a grid system
allowed us to achieve a much more harmonious relationship
between individual elements. We’ve also incorporated a
whole new palette of colors. Distinct, functional layers
help establish hierarchy and order. And the use of
translucency gives you a sense of your context. These
planes combined with new approaches to animation and
motion create a sense of depth and vitality.
Jony Ive Quote from WWDC2013
Source: https://developer.apple.com/wwdc/videos/
Label the design principle and the approach
iOS7 Design Principles
Simplicity
Consistent, coherent design
Familiarity
Adaptive, legible typography
Unified iconography
Clarity
Deference to content
Hierarchy
Context
iOS7 Design Principles
Let’s compare