MS3308

Cw1 assessment guide

CW1 Deadlines

• CW1 (Strategy and Scope) DEADLINE ONE: 14th Nov- 2013

• CW1 (Structure and Skeleton) DEADLINE TWO: 28-Nov-2013

• CW1 (Surface and revisions of the above) DEADLINE THREE: 06th Jan 2014

Strategy Plane

1. Project objective2. User needs (desires

and wants)

1. Project objective

• Control over perception of brand identity

• USP• Emotional engagements

with identity• Impressions• Audio-visual design

1. Project objective

• Measure success metrics

• How do you know that you have reached the finishing line?– Objective and needs met

1. Project objective

• Analytics

• Visits, clicks, attention

• Measure the impact of changes made during prototyping stages

2. User NeedsWho are the users?

• Begin usability and user research

• Segmentation• Demographics• Psychographics

• Define the user group • User profiles • Develop personas

2. User NeedsSegmentation

2. User Needs Demographics

2. User Needs Psychographics

2. User Needs Personas

How To Use Personas In User Experience Design

Personas

Strategy Plane What evidence do we need?

1. Project objectives described and illustrated2. References to design influences3. Communication of idea to audience4. How will the product be tested and by

whom?5. Detailed profile of user group?

The Scope Plane

• Translate needs and objectives into requirement

1. Content 2. Functionality

1. Content

• Director’s “cast” analogy

• Assets – media types

2. Functionality• Director’s score analogy

• What will the product do and how will it do it?

The Scope Plane What evidence do we need?

1. What assets are required?2. List of assets (grouped)3. Description and illustration of functionality

1.Comic strip showing stages and space of interaction

2.Offer alternatives

The Structure Plane

• Conceptual structures

1. Interaction design (function)

2. Information architecture (information)

(1) Function and (2) Information

• 1. Interaction design concerns Function

• 2. Information architecture concerns Information

The blog about interaction design and usability

1. Interaction Design• How do you do? What sort

of ways do you affect the world: poke it, manipulate it, sit on it?

• How do you feel? What do you sense of the world and what are the sensory qualities that shape media?

• How do you know? What are the ways that you learn and plan (or perhaps, how we want you to think)?

Interaction Design Bill Verplank

YouTube

1. Interaction design• Garrett (p. 81) describes

human interaction with machine as like a dance

• Badly designed software is like a bad dance partner

1. Interaction design Programmer’s perspective

• Poorly defined questions about software (programmer’s perspective)

• What does it do?• How does it do it?

1. Interaction design HCI gone wrong

• Technology and humans do not always make a good fit

• People are taught to use software

• Should be more usable – intuitive

• Software that works with people

1. Interaction design What’s this?

1. Interaction design What’s this?

1. Interaction design

1. Interaction design Conceptual modelling

• The familiar– Metaphor– Convention

– Conceptual model of single elements (a button)

– Conceptual model of entire system

1. Interaction design Is it possible to be too metaphorical?

• Garrett (p. 84-86) makes the case that it is…

• Concept and real world should not be too explicit

Webpages that suck

• Make it implicit/intuitive is more functional

• Go light on metaphor

1. Interaction design Managing User Error

• Error message example

• Annoying Examples - Word

• Are you Sure?• Edit undo

2. Information Architecture

• The structuring of information

• How people cognitively process information (p. 88)

• How do people “make sense” of information

2. Information Architecture Structuring content

• Parent/Child relations• Arrangement of

categories• Flows and nodes

2. Information Architecture Organising Principles

• How nodes and flows are linked together

• Web structures

• Devices connected to humans (smart environments)

2. Information Architecture Structuring content

• Rigid hierarchy• Adaptive (balanced)

hierarchy

• Matrix• Organic web• Sequence

Yale Web Style Guide

2. Information Architecture Avoid!

Yale Web Style Guide

2. Information Architecture Sequence

Yale Web Style Guide

2. Information Architecture Matrix or Grid

Yale Web Style Guide

2. Information Architecture Web

Yale Web Style Guide

2. Information Architecture Hierarchy

2. Information Architecture Hierarchy

• Balanced

Yale Web Style Guide

2. Information Architecture Analysis

Yale Web Style Guide

2. Information Architecture Presentation of Information

• Language and metadata

• What vocabulary is used (consistently)

• How does information describe other information

2. Information Architecture What evidence do we need?

1. Research “possible” user behaviour and decide how system will respond– Interaction– Feedback

2. Develop conceptual models– Cognitive Walkthroughs

3. Conceptual testing of interaction4. Testing of metaphors and convention5. Extensive evidence of information diagrams

Skeleton Plane

• What form will the product take• Giving shape to structures

1. Interface Design2. Navigation Design3. Information Design

1. Interface Design

• Components and layout• Provides users with capacity to do things

2. Navigation Design

• Designing the information space (and beyond)

• Provides users with capacity to places

3. Information Design

• Presentation of data• Provides users with capacity to

see/hear/touch things (communicated to them)

1. Interface Design

• Related to assets

• What to include and how it is arranged

• Salient content• Reducing clutter• Less is more

• What evidence do we need to see?

1. Wireframes2. Paper prototypes

1. Interface Design Wireframes

1. Interface Design Paper Prototypes

2. Navigation Design

• Enable smooth passage through info space (node to node)

• Communicate relation between nodes

• Communicate relation between entire contents and interface

• What evidence do we need to see?

1. Design elements that relate to navigational charts (navigation design of nodes and flows)

2. Navigation Design

3. Information Design

• Visual display of information– Charts– Lists– Icons

• Chunking– Colour coding– Sign posts– Labels– Icons

• What evidence do we need to see?

1. Designs of all components that display information or chunk it

2. Style sheets (CSS)

3. Information Design Components that display information

The Surface Plane

• Attractive things work better

• First impressions

• Sensory responses to design

• Following the Eye (attention)

• Feelings and Emotions– Relating to colour,

touch, sounds…

The Surface Plane

• What evidence do we need to see?

• Think MS2306 – emotional design

1. Design2. Interviews with users3. Plan of extensive user

testing including reflective, behavioural and affective level (Linked to MS3307 methodology)