CS449/649: Human-Computer Interaction Winter 2018 Lecture VII - - PowerPoint PPT Presentation

▶
cs449 649 human computer interaction
SMART_READER_LITE
LIVE PREVIEW

CS449/649: Human-Computer Interaction Winter 2018 Lecture VII - - PowerPoint PPT Presentation

Jan 09, 2024 118 likes •458 views

CS449/649: Human-Computer Interaction Winter 2018 Lecture VII Anastasia Kuzminykh Create Design Ideas Create Ideas Design Create Design Ideas Create Ideas Design Create Design Ideas Create Ideas Creativity - process of producing a new

slide-1
SLIDE 1

CS449/649: Human-Computer Interaction

Winter 2018 Lecture VII

Anastasia Kuzminykh

slide-2
SLIDE 2
slide-3
SLIDE 3

Create Ideas Design

Create Design Ideas

slide-4
SLIDE 4

Create Ideas Design

Create Design Ideas

slide-5
SLIDE 5

Create Ideas

Create Design Ideas

Creativity - process of producing a new idea which has

value to someone

slide-6
SLIDE 6

Create Ideas

Create Design Ideas

Nature

Nurture

vs

Creativity - process of producing a new idea which has

value to someone

slide-7
SLIDE 7

Create Ideas

Create Design Ideas

Nature

Nurture

vs

Generating ideas: memories ordinary extraordinary Creativity - process of producing a new idea which has

value to someone

slide-8
SLIDE 8

Create Ideas

Create Design Ideas

Creative process

  • 1. Preparation
  • 2. Provocation
  • 4. Eureka moment
  • 5. Verification
  • 3. Incubation
  • 6. Realization
slide-9
SLIDE 9

Create Ideas

Create Design Ideas

  • 1. Preparation

Define the constraints: goals, parameters

  • f the challenge, resources, time

Knowledge and understanding around the challenge: both academic and casual Challenge all the assumptions

slide-10
SLIDE 10

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

slide-11
SLIDE 11

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

slide-12
SLIDE 12

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

slide-13
SLIDE 13

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

slide-14
SLIDE 14

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

slide-15
SLIDE 15

Create Ideas

Create Design Ideas

Creative process

  • 1. Preparation
  • 2. Provocation
  • 4. Eureka moment
  • 5. Verification
  • 3. Incubation
  • 6. Realization
slide-16
SLIDE 16

Create Design Ideas Sketches User stories Wireframes

slide-17
SLIDE 17

Create Design Ideas Supports 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/

slide-18
SLIDE 18

Create Design Ideas Sketches

  • illustration of how the basic

concept works

User stories

Image: http://uxmovement.com/wireframes/why-its-important-to-sketch- before-you-wireframe/

Wireframes

slide-19
SLIDE 19

Create Design Ideas As a user / <persona> , I want / need <action> so that I can <user goal>. Keep it simple A 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

slide-20
SLIDE 20

Create Design Ideas As a user / <persona> , I want / need <action> so that I can <user goal>. Keep it simple A 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

slide-21
SLIDE 21

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

slide-22
SLIDE 22

Create Design Ideas Quick, 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

slide-23
SLIDE 23

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

slide-24
SLIDE 24

Create Ideas

Create Design Ideas

Creative process

  • 1. Preparation
  • 2. Provocation
  • 4. Eureka moment
  • 5. Verification
  • 3. Incubation
  • 6. Realization
slide-25
SLIDE 25

Create Ideas Design

Create Design Ideas

slide-26
SLIDE 26

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

slide-27
SLIDE 27

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

slide-28
SLIDE 28

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

slide-29
SLIDE 29

Create Design Ideas Signifier

Design

Affordance Constraints Feedback Discoverability Mapping Conceptual Model

slide-30
SLIDE 30

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

slide-31
SLIDE 31

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

slide-32
SLIDE 32

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

slide-33
SLIDE 33

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

  • bjects

Conceptual Model - user’s understanding

  • f how the system works