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