welcome to interface aesthetics...
TRANSCRIPT
![Page 1: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/1.jpg)
Interface Aesthetics 01/26/09
Welcome to Interface Aesthetics 2009!
![Page 2: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/2.jpg)
Interface Aesthetics 01/26/09
Kimiko Ryokai
![Page 3: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/3.jpg)
Interface Aesthetics 01/26/09
Daniela Rosner
![Page 4: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/4.jpg)
Interface Aesthetics 01/26/09
What is aesthetics?What is design?What is this course about?
OUTLINE
![Page 5: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/5.jpg)
Interface Aesthetics 01/26/09
Why interface aesthetics?INTRODUCTION
![Page 6: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/6.jpg)
Interface Aesthetics 01/26/09
Why interface aesthetics?Technology as part of everyday culture, so that it’s beautiful and intriguing, so that it has emotive as well as functional qualities.[Moggridge, 2006]
INTRODUCTION
![Page 7: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/7.jpg)
Interface Aesthetics 01/26/09
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.[Moggridge, 2006]
INTRODUCTION
![Page 8: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/8.jpg)
Interface Aesthetics 01/26/09
Designing for a new broad spectrum of people.
INTRODUCTION
![Page 9: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/9.jpg)
Interface Aesthetics 01/26/09
Phases in the adaptation of technology [Liddle, 2006]
Enthusiast phase“Exploit me!”
Professional phase“Help me work!”
Consumer phase“Enjoy me!”
![Page 10: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/10.jpg)
Interface Aesthetics 01/26/09
Aesthetics in HCIAESTHETICS
![Page 11: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/11.jpg)
Interface Aesthetics 01/26/09
Aesthetics in HCIVisual attractiveness of a web site affected users’ enjoyment as well as their perceptions of ease of use and usefulness.
AESTHETICS
[van der Heijden, 2003]
![Page 12: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/12.jpg)
Interface Aesthetics 01/26/09
Aesthetics in HCIAesthetics is a strong determinant of the pleasure the user experiences during the interaction.
AESTHETICS
[Hassenzahl, 2004]
![Page 13: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/13.jpg)
Interface Aesthetics 01/26/09
Does aesthetics have an effect on the user’s performance?
AESTHETICS IN HCI
![Page 14: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/14.jpg)
Interface Aesthetics 01/26/09
Aesthetics and usability [Ben-Bassat, Meyer, Tractinsky, 2006]
aesthetics
usab
ility
low high
high
mid
low
![Page 15: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/15.jpg)
Interface Aesthetics 01/26/09
“low aesthetics” system
Manipulating aesthetics [Ben-Bassat, Meyer, Tractinsky, 2006]
“high aesthetics” system
![Page 16: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/16.jpg)
Interface Aesthetics 01/26/09
Results of the study by Ben-Bassat et al.
AESTHETICS IN HCI
![Page 17: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/17.jpg)
Interface Aesthetics 01/26/09
The more beautiful, the higher the perceived usabilityMore aesthetic systems were perceived to be slightly more usable. [Ben-Bassat, Meyer, Tractinsky, 2006]
AESTHETICS IN HCI
![Page 18: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/18.jpg)
Interface Aesthetics 01/26/09
Usable things appear more beautifulHigh usability systems were always judged as more aesthetic.[Ben-Bassat, Meyer, Tractinsky, 2006]
AESTHETICS IN HCI
![Page 19: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/19.jpg)
Interface Aesthetics 01/26/09
Fast judgment on aesthetics and usabilityImportance of first impressions in shaping users’ attitudes towards interactive systems.[Ben-Bassat, Meyer, Tractinsky, 2006]
AESTHETICS IN HCI
![Page 20: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/20.jpg)
Interface Aesthetics 01/26/09
Perceived usability and aesthetics are positively correlated.
AESTHETICS IN HCI
![Page 21: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/21.jpg)
Interface Aesthetics 01/26/09
No positive aesthetics effect on performancePerformance with low aesthetic systems was slightly better than with high aesthetic systems. [Ben-Bassat, Meyer, Tractinsky, 2006]
AESTHETICS IN HCI
![Page 22: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/22.jpg)
Interface Aesthetics 01/26/09
Aesthetics has a positive effect on perceived usability, but not on performance.
AESTHETICS IN HCI
![Page 23: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/23.jpg)
Interface Aesthetics 01/26/09
Limitations?AESTHETICS IN HCI
![Page 24: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/24.jpg)
Interface Aesthetics 01/26/09
“low aesthetics” system
Manipulating aesthetics [Ben-Bassat, Meyer, Tractinsky, 2006]
“high aesthetics” system
![Page 25: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/25.jpg)
Interface Aesthetics 01/26/09
Limitations- Limited aspect of aesthetics- Nature of the task - 150 engineering students …
AESTHETICS IN HCI
![Page 26: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/26.jpg)
Interface Aesthetics 01/26/09
What is aesthetics?AESTHETICS
![Page 27: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/27.jpg)
Interface Aesthetics 01/26/09
What is aesthetics?The philosophical study of beauty and taste.
Examines what makes something beautiful, sublime, ugly, disgusting, cute, fun, etc.
AESTHETICS
![Page 28: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/28.jpg)
Interface Aesthetics 01/26/09
Your top 10 beautiful objectsPlease write them down on the Post-Its.
AESTHETICS
![Page 29: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/29.jpg)
Interface Aesthetics 01/26/09
Aesthetics in designAESTHETICS
![Page 30: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/30.jpg)
Interface Aesthetics 01/26/09
Three levels of human processingVisceral levelBehavioral levelReflective level
AESTHETICS
[Norman, 2004]
![Page 31: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/31.jpg)
Interface Aesthetics 01/26/09
Visceral levelAESTHETICS
![Page 32: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/32.jpg)
Interface Aesthetics 01/26/09
What nature does. Physical features,look and feel, dominate.
VISCERAL DESIGN
![Page 33: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/33.jpg)
Interface Aesthetics 01/26/09
Visceral design is about initial reactions. “I want it!” And then you might ask, “What does it do?”
VISCERAL DESIGN
![Page 34: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/34.jpg)
Interface Aesthetics 01/26/09
Visceral design is about initial reactions. “I want it!” And then you might ask, “What does it do?”
VISCERAL DESIGN
![Page 35: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/35.jpg)
Interface Aesthetics 01/26/09
The principles underlying visceral design are consistent across people and cultures. If you design according to these rules, your design will always be attractive even if somewhat simple.
VISCERAL DESIGN
![Page 36: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/36.jpg)
Interface Aesthetics 01/26/09
Behavioral levelAESTHETICS
![Page 37: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/37.jpg)
Interface Aesthetics 01/26/09
Behavioral design is all about use. Appearance doesn’t really matter. Performance does. What usability practitioners focus on.
BEHAVIORAL DESIGN
![Page 38: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/38.jpg)
Interface Aesthetics 01/26/09
Expectation driven. Positive affect results from feeling in control. Lack of control and mismatch between expectations and actual experiences produces negative affect.
BEHAVIORAL DESIGN
![Page 39: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/39.jpg)
Interface Aesthetics 01/26/09
Reflective levelAESTHETICS
![Page 40: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/40.jpg)
Interface Aesthetics 01/26/09
It is all about message, about culture, and about the meaning of a object or its use.
REFLECTIVE DESIGN
![Page 41: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/41.jpg)
Interface Aesthetics 01/26/09
What owning it means for us. Concerned with reflective self-image.
REFLECTIVE DESIGN
[tokyoflash.com]
![Page 42: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/42.jpg)
Interface Aesthetics 01/26/09
Conscious and aware of emotional feelings. It uses the rich history of prior experiences, one’s own self image, and personal meanings to evaluate any experience.
REFLECTIVE DESIGN
![Page 43: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/43.jpg)
Interface Aesthetics 01/26/09
Visceral
• What nature does• Immediate reaction• Look and feel
dominate• Consistent across
people and cultures
• Sub-conscious
Behavioral
• All about use• Performance
matters• Appearance
doesn’t matter• Expectation driven• Usability• Sub-conscious
Reflective
• All about the message
• Reflective self-image
• What owning it means for us
• Rich history of prior experiences
• Conscious and intellect driven
AESTHETICS
![Page 44: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/44.jpg)
Interface Aesthetics 01/26/09
HCI as both a research and design disciplineThe field is analytical, capable of finding fault, but not capable of actual design. We need to become designers, not just analyzers.
DESIGN
[Norman, 2004]
![Page 45: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/45.jpg)
Interface Aesthetics 01/26/09
What is design?DESIGN
![Page 46: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/46.jpg)
Interface Aesthetics 01/26/09
Design
Verb:
The process of originating and developing a plan for a product, structure, or component.
Noun:
The final plan or the result of implementing that plan.
DESIGN
![Page 47: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/47.jpg)
Interface Aesthetics 01/26/09
Design in different disciplines [adopted from Moggridge, 2006]
human & subjective technical & objective
physical design
digital design
industry design
graphic design
web design
interaction design
HCI
mechanical engineering
productionengineering
hardwareengineering
softwareengineering
physical sciences
computersciences
physical ergonomics
![Page 48: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/48.jpg)
Interface Aesthetics 01/26/09
Design in different disciplines [adopted from Moggridge, 2006]
human & subjective technical & objective
physical design
digital design
industry design
graphic design
web design
interaction design
HCI
mechanical engineering
productionengineering
hardwareengineering
softwareengineering
physical sciences
computersciences
physical ergonomics
design disciplines human sciences engineering technical sciences
![Page 49: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/49.jpg)
Interface Aesthetics 01/26/09
physical design
digital design
industry design
graphic design
web design
interaction design
physical ergonomics
HCI
mechanical engineering
productionengineering
hardwareengineering
softwareengineering
physical sciences
computersciences
Design in different disciplines [adopted from Moggridge, 2006]
human & subjective technical & objective
design disciplines human sciences engineering technical sciences
![Page 50: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/50.jpg)
Interface Aesthetics 01/26/09
Design
![Page 51: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/51.jpg)
Interface Aesthetics 01/26/09
Content vs. containerThe content is important but…
DESIGN
![Page 52: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/52.jpg)
Interface Aesthetics 01/26/09
There is what you say and how you say it
DESIGN
[Paul Watzlawick, 1922]
![Page 53: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/53.jpg)
Interface Aesthetics 01/26/09
You cannot not communicate[Paul Watzlawick, 1922]
DESIGN
![Page 54: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/54.jpg)
Interface Aesthetics 01/26/09
Design as communicationDesign is a conversation between designer and user, even though the designer is no longer present once the user enters the scene.
DESIGN
[Norman, 2004]
![Page 55: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/55.jpg)
Interface Aesthetics 01/26/09
Conceptual models [Norman, 2004]
designer’sconceptual
model
user’sconceptual
model
systemimage
![Page 56: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/56.jpg)
Interface Aesthetics 01/26/09
Designed affordancesMessages from designer to user, attracting attention to the set of desired possible actions.
DESIGN
[Norman, 2004]
![Page 57: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/57.jpg)
Interface Aesthetics 01/26/09
Artists and designers are trained to use the language of implicit meanings to add a rich communicative element over and above direct functional communication.
DESIGN
[Moggridge, 2006]
![Page 58: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/58.jpg)
Interface Aesthetics 01/26/09
Good designers learn the rules before they start breaking them.
DESIGN
![Page 59: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/59.jpg)
Interface Aesthetics 01/26/09
Good design comes from the successful synthesis of a solution that recognizes all the relevant constraints, and the nature of the constraints defines the difference between design disciplines.
DESIGN
[Moggridge, 2006]
![Page 60: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/60.jpg)
Interface Aesthetics 01/26/09
Core design skills1. Synthesis2. Frame/reframe3. Envision alternatives4. Choose best approach5. Visualize and prototype
DESIGN
![Page 61: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/61.jpg)
Interface Aesthetics 01/26/09
“Elements of Design Process” [Moggridge, 2006]
constraints
synthesis
framing
ideation
envisioning
uncertainty
evaluation
prototyping
visualization
selection
![Page 62: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/62.jpg)
Interface Aesthetics 01/26/09
Iterative non-linear processLike a pinball game.
DESIGN
![Page 63: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/63.jpg)
Interface Aesthetics 01/26/09
“Elements of Design Process” [Moggridge, 2006]
constraints
synthesis
framing
ideation
envisioning
uncertainty
evaluation
prototyping
visualization
selection
![Page 64: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/64.jpg)
Interface Aesthetics 01/26/09
Design is never doneDESIGN
![Page 65: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/65.jpg)
Interface Aesthetics 01/26/09
GRiD Compass computer: first sketch [Moggridge, 1980]
![Page 66: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/66.jpg)
Interface Aesthetics 01/26/09
Design challenges change all the time
DESIGN
![Page 67: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/67.jpg)
Interface Aesthetics 01/26/09
“Hierarchy of complexity” [Moggridge, 2006]
Anthropometrics
Physiology
Psychology
Sociology
Anthropology
Ecology
The sizes of people, for the design of physical objects
The way the body works, for the design of physical man-machine systems
The way the mind works, for the design of human-computer interactions
The way people relate to each other, for the design of connected systems
The human condition, for global design
The interdependence of living things, for sustainable design
![Page 68: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/68.jpg)
Interface Aesthetics 01/26/09
What this course is aboutINTERFACE AESTHETICS
![Page 69: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/69.jpg)
Interface Aesthetics 01/26/09
Technology as part of everyday culture, so that it’s beautiful and intriguing, so that it has emotive as well as functional qualities.
INTERFACE AESTHETICS
[Moggridge, 2006]
![Page 70: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/70.jpg)
Interface Aesthetics 01/26/09
physical design
digital design
industry design
graphic design
web design
interaction design
physical ergonomics
HCI
mechanical engineering
productionengineering
hardwareengineering
softwareengineering
physical sciences
computersciences
Design in different disciplines [adopted from Moggridge, 2006]
human & subjective technical & objective
![Page 71: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/71.jpg)
Interface Aesthetics 01/26/09
How to communicate meanings through designLook at design principles.
INTERFACE AESTHETICS
![Page 72: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/72.jpg)
Interface Aesthetics 01/26/09
COURSE SCHEDULE
Introduction
Typography I
Layout & the Grid
Typography II
Critique I: Type / Layout
Color
Pictograms, Logos, & Icons
Critique II: Color & Signs
Print Media
Web Design
Critique III: Web
Project Progress Report
Synthesis
Exhibition
01/26
02/02
02/09
02/23
03/02
03/09
03/16
03/30
04/06
04/13
04/20
04/27
05/04
05/11
![Page 73: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/73.jpg)
Interface Aesthetics 01/26/09
COURSE SCHEDULE
Introduction
Typography I
Layout & the Grid
Typography II
Critique I: Type / Layout
Color
Pictograms, Logos, & Icons
Critique II: Color & Signs
Print Media
Web Design
Critique III: Web
Project Progress Report
Synthesis
Exhibition
01/26
02/02
02/09
02/23
03/02
03/09
03/16
03/30
04/06
04/13
04/20
04/27
05/04
05/11
Assignment 1: Typography I
Assignment 2: Layout
Assignment 3: Typography II
Assignment 4: Color
Assignment 5: Logos & Icons
Assignment 6: Print Media
Assignment 7: Web Design
![Page 74: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/74.jpg)
Interface Aesthetics 01/26/09
COURSE SCHEDULE
Introduction
Typography I
Layout & the Grid
Typography II
Critique I: Type / Layout
Color
Pictograms, Logos, & Icons
Critique II: Color & Signs
Print Media
Web Design
Critique III: Web
Project Progress Report
Synthesis
Exhibition
01/26
02/02
02/09
02/23
03/02
03/09
03/16
03/30
04/06
04/13
04/20
04/27
05/04
05/11
Assignment 1: Typography I
Assignment 2: Layout
Assignment 3: Typography II
Assignment 4: Color
Assignment 5: Logos & Icons
Assignment 6: Print Media
Assignment 7: Web Design
Pick 3 pieces and present them with a unified theme.
![Page 75: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/75.jpg)
Interface Aesthetics 01/26/09
The course formatLectures, in-class exercises, and discussions.
INTERFACE AESTHETICS
![Page 76: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/76.jpg)
Interface Aesthetics 01/26/09
The course is NOT aboutHow to use tools, implementing “working prototypes,” or a complete graphic design course.
INTERFACE AESTHETICS
![Page 77: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/77.jpg)
Interface Aesthetics 01/26/09
Week 2Typography I
INTERFACE AESTHETICS
![Page 78: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/78.jpg)
Interface Aesthetics 01/26/09
Homework for week 2Think about your favorite object (could be a physical thing or a virtual thing) and describe its aesthetic quality based on the three levels of processing — Visceral, Behavioral, Reflective — we have discussed in the class.
Post your writing on the course website with a photo or a sketch/illustration of the object. Please submit your post by Sunday evening.
INTERFACE AESTHETICS
![Page 79: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/79.jpg)
Interface Aesthetics 01/26/09
INTERFACE AESTHETICS
![Page 80: Welcome to Interface Aesthetics 2009!courses.ischool.berkeley.edu/.../week1_intro_interface_aesthetics.pdf · Interface Aesthetics 01/26/09 Design Verb: The process of originating](https://reader035.vdocuments.site/reader035/viewer/2022070802/5f02f10f7e708231d406c571/html5/thumbnails/80.jpg)
Interface Aesthetics 01/26/09
Thanks!INTERFACE AESTHETICS