![Page 1: CS449/649: Human-Computer Interactioncs449/w18... · Creativity - process of producing a new idea which has value to someone . Create Ideas Create Design Ideas Creative process 1](https://reader035.vdocuments.net/reader035/viewer/2022081407/604a119655e46b5386296567/html5/thumbnails/1.jpg)
CS449/649: Human-Computer Interaction
Winter 2018
Lecture VII
Anastasia Kuzminykh
![Page 2: CS449/649: Human-Computer Interactioncs449/w18... · Creativity - process of producing a new idea which has value to someone . Create Ideas Create Design Ideas Creative process 1](https://reader035.vdocuments.net/reader035/viewer/2022081407/604a119655e46b5386296567/html5/thumbnails/2.jpg)
![Page 3: CS449/649: Human-Computer Interactioncs449/w18... · Creativity - process of producing a new idea which has value to someone . Create Ideas Create Design Ideas Creative process 1](https://reader035.vdocuments.net/reader035/viewer/2022081407/604a119655e46b5386296567/html5/thumbnails/3.jpg)
Create Ideas Design
Create Design Ideas
![Page 4: CS449/649: Human-Computer Interactioncs449/w18... · Creativity - process of producing a new idea which has value to someone . Create Ideas Create Design Ideas Creative process 1](https://reader035.vdocuments.net/reader035/viewer/2022081407/604a119655e46b5386296567/html5/thumbnails/4.jpg)
Create Ideas Design
Create Design Ideas
![Page 5: CS449/649: Human-Computer Interactioncs449/w18... · Creativity - process of producing a new idea which has value to someone . Create Ideas Create Design Ideas Creative process 1](https://reader035.vdocuments.net/reader035/viewer/2022081407/604a119655e46b5386296567/html5/thumbnails/5.jpg)
Create Ideas
Create Design Ideas
Creativity - process of producing a new idea which has value to someone
![Page 6: CS449/649: Human-Computer Interactioncs449/w18... · Creativity - process of producing a new idea which has value to someone . Create Ideas Create Design Ideas Creative process 1](https://reader035.vdocuments.net/reader035/viewer/2022081407/604a119655e46b5386296567/html5/thumbnails/6.jpg)
Create Ideas
Create Design Ideas
Nature Nurturevs
Creativity - process of producing a new idea which has value to someone
![Page 7: CS449/649: Human-Computer Interactioncs449/w18... · Creativity - process of producing a new idea which has value to someone . Create Ideas Create Design Ideas Creative process 1](https://reader035.vdocuments.net/reader035/viewer/2022081407/604a119655e46b5386296567/html5/thumbnails/7.jpg)
Create Ideas
Create Design Ideas
Nature Nurturevs
Generating ideas: memories ordinary extraordinary
Creativity - process of producing a new idea which has value to someone
![Page 8: CS449/649: Human-Computer Interactioncs449/w18... · Creativity - process of producing a new idea which has value to someone . Create Ideas Create Design Ideas Creative process 1](https://reader035.vdocuments.net/reader035/viewer/2022081407/604a119655e46b5386296567/html5/thumbnails/8.jpg)
Create Ideas
Create Design Ideas
Creative process
1. Preparation
2. Provocation
4. Eureka moment
5. Verification
3. Incubation 6. Realization
![Page 9: CS449/649: Human-Computer Interactioncs449/w18... · Creativity - process of producing a new idea which has value to someone . Create Ideas Create Design Ideas Creative process 1](https://reader035.vdocuments.net/reader035/viewer/2022081407/604a119655e46b5386296567/html5/thumbnails/9.jpg)
Create Ideas
Create Design Ideas
1. Preparation Define the constraints: goals, parameters of the challenge, resources, time
Knowledge and understanding around the challenge: both academic and casual
Challenge all the assumptions
![Page 10: CS449/649: Human-Computer Interactioncs449/w18... · Creativity - process of producing a new idea which has value to someone . Create Ideas Create Design Ideas Creative process 1](https://reader035.vdocuments.net/reader035/viewer/2022081407/604a119655e46b5386296567/html5/thumbnails/10.jpg)
Create Ideas
Create Design Ideas
2. Provocation
Overcoming associative limitations
Concept of po by Edward de Bono
Framing and reframing problems
Design Fixation
Force of habits
![Page 11: CS449/649: Human-Computer Interactioncs449/w18... · Creativity - process of producing a new idea which has value to someone . Create Ideas Create Design Ideas Creative process 1](https://reader035.vdocuments.net/reader035/viewer/2022081407/604a119655e46b5386296567/html5/thumbnails/11.jpg)
Create Ideas
Create Design Ideas
2. Provocation
Overcoming associative limitations
Concept of po by Edward de Bono
Framing and reframing problems
Design Fixation
Force of habits
Practice true randomness
Connect and combine
Change the routine
![Page 12: CS449/649: Human-Computer Interactioncs449/w18... · Creativity - process of producing a new idea which has value to someone . Create Ideas Create Design Ideas Creative process 1](https://reader035.vdocuments.net/reader035/viewer/2022081407/604a119655e46b5386296567/html5/thumbnails/12.jpg)
Create Ideas
Create Design Ideas
3. Incubation
Mindful procrastination can sometimes be helpful
Different aspects of creativity require different brain activity
Most ideas are formed subconsciously
![Page 13: CS449/649: Human-Computer Interactioncs449/w18... · Creativity - process of producing a new idea which has value to someone . Create Ideas Create Design Ideas Creative process 1](https://reader035.vdocuments.net/reader035/viewer/2022081407/604a119655e46b5386296567/html5/thumbnails/13.jpg)
Create Ideas
Create Design Ideas
4. Eureka moment An idea that might solve the challenge is pushed to the conscious level
Usually difficult to explain how you came up with this idea
Always write it down in the moment no matter what
![Page 14: CS449/649: Human-Computer Interactioncs449/w18... · Creativity - process of producing a new idea which has value to someone . Create Ideas Create Design Ideas Creative process 1](https://reader035.vdocuments.net/reader035/viewer/2022081407/604a119655e46b5386296567/html5/thumbnails/14.jpg)
Create Ideas
Create Design Ideas
5. Verification
All ideas are rough when they are first visualized - get through the criticism
Be optimistic, give your crazy ideas a chance
No right answers, only working solutions
![Page 15: CS449/649: Human-Computer Interactioncs449/w18... · Creativity - process of producing a new idea which has value to someone . Create Ideas Create Design Ideas Creative process 1](https://reader035.vdocuments.net/reader035/viewer/2022081407/604a119655e46b5386296567/html5/thumbnails/15.jpg)
Create Ideas
Create Design Ideas
Creative process
1. Preparation
2. Provocation
4. Eureka moment
5. Verification
3. Incubation 6. Realization
![Page 16: CS449/649: Human-Computer Interactioncs449/w18... · Creativity - process of producing a new idea which has value to someone . Create Ideas Create Design Ideas Creative process 1](https://reader035.vdocuments.net/reader035/viewer/2022081407/604a119655e46b5386296567/html5/thumbnails/16.jpg)
Create Design Ideas
Sketches User stories Wireframes
![Page 17: CS449/649: Human-Computer Interactioncs449/w18... · Creativity - process of producing a new idea which has value to someone . Create Ideas Create Design Ideas Creative process 1](https://reader035.vdocuments.net/reader035/viewer/2022081407/604a119655e46b5386296567/html5/thumbnails/17.jpg)
Create Design IdeasSupports brainstorming
Doesn’t have to look good
Fast and simple
Speeds up your work
Supports communication
Tells a story
Sketches - illustration of how the basic
concept works
Image: http://uxmovement.com/wireframes/why-its-important-to-sketch-before-you-wireframe/
![Page 18: CS449/649: Human-Computer Interactioncs449/w18... · Creativity - process of producing a new idea which has value to someone . Create Ideas Create Design Ideas Creative process 1](https://reader035.vdocuments.net/reader035/viewer/2022081407/604a119655e46b5386296567/html5/thumbnails/18.jpg)
Create Design Ideas
Sketches - illustration of how the basic
concept worksUser stories
Image: http://uxmovement.com/wireframes/why-its-important-to-sketch-before-you-wireframe/
Wireframes
![Page 19: CS449/649: Human-Computer Interactioncs449/w18... · Creativity - process of producing a new idea which has value to someone . Create Ideas Create Design Ideas Creative process 1](https://reader035.vdocuments.net/reader035/viewer/2022081407/604a119655e46b5386296567/html5/thumbnails/19.jpg)
Create Design Ideas
As a user / <persona> ,I want / need <action>so that I can <user goal>.
Keep it simpleA
communication tool
Keep breaking them down
Have acceptance
criteria
Keep them visible
Prevent dead-ends
User stories - description of a feature from
an end-user perspective
![Page 20: CS449/649: Human-Computer Interactioncs449/w18... · Creativity - process of producing a new idea which has value to someone . Create Ideas Create Design Ideas Creative process 1](https://reader035.vdocuments.net/reader035/viewer/2022081407/604a119655e46b5386296567/html5/thumbnails/20.jpg)
Create Design Ideas
As a user / <persona> ,I want / need <action>so that I can <user goal>.
Keep it simpleA
communication tool
Keep breaking them down
Have acceptance
criteria
Keep them visible
Prevent dead-ends
“As a user I want to send an email.”
“As a user I need to type in an email address”“As a user I want to type in an email subject”“As a user I want to type in an email text”
User stories - description of a feature from
an end-user perspective
![Page 21: CS449/649: Human-Computer Interactioncs449/w18... · Creativity - process of producing a new idea which has value to someone . Create Ideas Create Design Ideas Creative process 1](https://reader035.vdocuments.net/reader035/viewer/2022081407/604a119655e46b5386296567/html5/thumbnails/21.jpg)
Create Design Ideas
Sketches - illustration of how the basic
concept works
User stories - description of a feature from
an end-user perspective
Image: http://uxmovement.com/wireframes/why-its-important-to-sketch-before-you-wireframe/
As a user / <persona> ,I want / need <action>so that I can <user goal>.
Wireframes
![Page 22: CS449/649: Human-Computer Interactioncs449/w18... · Creativity - process of producing a new idea which has value to someone . Create Ideas Create Design Ideas Creative process 1](https://reader035.vdocuments.net/reader035/viewer/2022081407/604a119655e46b5386296567/html5/thumbnails/22.jpg)
Create Design IdeasQuick, cheap and easy
Main groups of content
Used as the documentation
Using pixelated widgets
Structure of content
Only basic visualization
Wireframes - static representation of the UI
layout and user flow
Image: https://www.behance.net/gallery/13421913/Wireframes-Restaurant-App
![Page 23: CS449/649: Human-Computer Interactioncs449/w18... · Creativity - process of producing a new idea which has value to someone . Create Ideas Create Design Ideas Creative process 1](https://reader035.vdocuments.net/reader035/viewer/2022081407/604a119655e46b5386296567/html5/thumbnails/23.jpg)
Create Design Ideas
Sketches - illustration of how the basic
concept works
User stories - description of a feature from
an end-user perspective
Wireframes - static representation of the UI
layout and user flow
Image: http://uxmovement.com/wireframes/why-its-important-to-sketch-before-you-wireframe/
As a user / <persona> ,I want / need <action>so that I can <user goal>.
Image: https://www.behance.net/gallery/13421913/Wireframes-Restaurant-App
![Page 24: CS449/649: Human-Computer Interactioncs449/w18... · Creativity - process of producing a new idea which has value to someone . Create Ideas Create Design Ideas Creative process 1](https://reader035.vdocuments.net/reader035/viewer/2022081407/604a119655e46b5386296567/html5/thumbnails/24.jpg)
Create Ideas
Create Design Ideas
Creative process
1. Preparation
2. Provocation
4. Eureka moment
5. Verification
3. Incubation 6. Realization
![Page 25: CS449/649: Human-Computer Interactioncs449/w18... · Creativity - process of producing a new idea which has value to someone . Create Ideas Create Design Ideas Creative process 1](https://reader035.vdocuments.net/reader035/viewer/2022081407/604a119655e46b5386296567/html5/thumbnails/25.jpg)
Create Ideas Design
Create Design Ideas
![Page 26: CS449/649: Human-Computer Interactioncs449/w18... · Creativity - process of producing a new idea which has value to someone . Create Ideas Create Design Ideas Creative process 1](https://reader035.vdocuments.net/reader035/viewer/2022081407/604a119655e46b5386296567/html5/thumbnails/26.jpg)
Create Design Ideas
Design
Interface - a surface/place where two independent systems, bodies or spaces meet / form a common boundary, and communicate with each other
![Page 27: CS449/649: Human-Computer Interactioncs449/w18... · Creativity - process of producing a new idea which has value to someone . Create Ideas Create Design Ideas Creative process 1](https://reader035.vdocuments.net/reader035/viewer/2022081407/604a119655e46b5386296567/html5/thumbnails/27.jpg)
Create Design Ideas
Design
Interface - a surface/place where two independent systems, bodies or spaces meet / form a common boundary, and communicate with each other
Interface - a communication channel
Communication - exchanging of information
![Page 28: CS449/649: Human-Computer Interactioncs449/w18... · Creativity - process of producing a new idea which has value to someone . Create Ideas Create Design Ideas Creative process 1](https://reader035.vdocuments.net/reader035/viewer/2022081407/604a119655e46b5386296567/html5/thumbnails/28.jpg)
Create Design Ideas
Semiotics - the study of signs and symbols
Representamen (signifier) - the form of the sign
Object (signified) - the actual reference of the sign
Interpretant - what people make of the sign
Sign - anything that communicates a meaning
Design
![Page 29: CS449/649: Human-Computer Interactioncs449/w18... · Creativity - process of producing a new idea which has value to someone . Create Ideas Create Design Ideas Creative process 1](https://reader035.vdocuments.net/reader035/viewer/2022081407/604a119655e46b5386296567/html5/thumbnails/29.jpg)
Create Design Ideas
Signifier
Design
Affordance
Constraints
Feedback
Discoverability
Mapping
Conceptual Model
![Page 30: CS449/649: Human-Computer Interactioncs449/w18... · Creativity - process of producing a new idea which has value to someone . Create Ideas Create Design Ideas Creative process 1](https://reader035.vdocuments.net/reader035/viewer/2022081407/604a119655e46b5386296567/html5/thumbnails/30.jpg)
Create Design Ideas
Signifier - indicators of any type that communicate the action needed so the affordance can take place
Design
Affordance - the possible use for an object when interacting with it
![Page 31: CS449/649: Human-Computer Interactioncs449/w18... · Creativity - process of producing a new idea which has value to someone . Create Ideas Create Design Ideas Creative process 1](https://reader035.vdocuments.net/reader035/viewer/2022081407/604a119655e46b5386296567/html5/thumbnails/31.jpg)
Create Design Ideas
Signifier - indicators of any type that communicate the action needed so the affordance can take place
Design
Affordance - the possible use for an object when interacting with it
Constraints - restrictions that limit the possible actions available with an object
![Page 32: CS449/649: Human-Computer Interactioncs449/w18... · Creativity - process of producing a new idea which has value to someone . Create Ideas Create Design Ideas Creative process 1](https://reader035.vdocuments.net/reader035/viewer/2022081407/604a119655e46b5386296567/html5/thumbnails/32.jpg)
Create Design Ideas
Signifier - indicators of any type that communicate the action needed so the affordance can take place
Design
Affordance - the possible use for an object when interacting with it
Constraints - restrictions that limit the possible actions available with an object
Physical - caused by physical features
Cultural - based on what is culturally accepted
Semantic - based on the meaning of the situation
Logical - use reasoning to determine the alternatives
![Page 33: CS449/649: Human-Computer Interactioncs449/w18... · Creativity - process of producing a new idea which has value to someone . Create Ideas Create Design Ideas Creative process 1](https://reader035.vdocuments.net/reader035/viewer/2022081407/604a119655e46b5386296567/html5/thumbnails/33.jpg)
Create Design Ideas
Signifier - indicators of any type that communicate the action needed so the affordance can take place
Design
Affordance - the possible use for an object when interacting with it
Constraints - restrictions that limit the possible actions available with an object
Feedback - conveys effects of user’s actions
Discoverability - whether it’s possible to figure out how to use an object by interacting with it
Mapping - indication of the relationship between objects
Conceptual Model - user’s understanding of how the system works