MS3308 Cw1 assessment guide

CW1 Deadlines CW1 (Strategy and Scope) DEADLINE ONE: 14th Nov 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 objective 2.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 Needs Who are the users? Begin usability and user research Segmentation Demographics Psychographics Define the user group User profiles Develop personas

2. User Needs Segmentation

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 illustrated 2.References to design influences 3.Communication of idea to audience 4.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 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

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 ) 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

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 interaction 4.Testing of metaphors and convention 5.Extensive evidence of information diagrams

Skeleton Plane What form will the product take Giving shape to structures 1.Interface Design 2.Navigation Design 3.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.Wireframes 2.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.Design 2.Interviews with users 3.Plan of extensive user testing including reflective, behavioural and affective level (Linked to MS3307 methodology)