2. MS3308 Cw1 assessment guide

4. 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

5. Strategy Plane 1.Project objective 2.User needs (desires and wants)

6. 1. Project objective Control over perception of brand identity USP Emotional engagements with identity Impressions Audio-visual design

7. 1. Project objective Measure success metrics How do you know that you have reached the finishing line? –Objective and needs met

8. 1. Project objective Analytics Visits, clicks, attention Measure the impact of changes made during prototyping stages

9. 2. User Needs Who are the users? Begin usability and user research Segmentation Demographics Psychographics Define the user group User profiles Develop personas

10. 2. User Needs Segmentation

11. 2. User Needs Demographics

12. 2. User Needs Psychographics

13. 2. User Needs Personas How To Use Personas In User Experience Design

14. Personas

15. 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?

16. The Scope Plane Translate needs and objectives into requirement 1.Content 2.Functionality

17. 1. Content Director’s “cast” analogy Assets – media types

18. 2. Functionality Director’s score analogy What will the product do and how will it do it?

19. 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

20. The Structure Plane Conceptual structures 1.Interaction design (function) 2.Information architecture (information)

21. (1) Function and (2) Information 1. Interaction design concerns Function 2. Information architecture concerns Information The blog about interaction design and usability

22. 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

23. 1. Interaction design Garrett (p. 81) describes human interaction with machine as like a dance Badly designed software is like a bad dance partner

24. 1.Interaction design Programmer’s perspective Poorly defined questions about software (programmer’s perspective) What does it do? How does it do it?

25. 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

26. 1.Interaction design What’s this?

28. 1. Interaction design

29. 1.Interaction design Conceptual modelling The familiar –Metaphor –Convention –Conceptual model of single elements (a button) –Conceptual model of entire system

30. 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

32. 1.Interaction design Managing User Error Error message example Annoying Examples - Word Are you Sure? Edit undo

33. 2. Information Architecture The structuring of information How people cognitively process information (p. 88) How do people “make sense” of information

34. 2. Information Architecture Structuring content Parent/Child relations Arrangement of categories Flows and nodes

35. 2. Information Architecture Organising Principles How nodes and flows are linked together Web structures Devices connected to humans (smart environments)

36. 2. Information Architecture Structuring content Rigid hierarchy Adaptive (balanced) hierarchy Matrix Organic web Sequence Yale Web Style Guide

37. 2. Information Architecture Avoid! Yale Web Style Guide

38. 2. Information Architecture Sequence Yale Web Style Guide

39. 2. Information Architecture Matrix or Grid Yale Web Style Guide

40. 2. Information Architecture Web Yale Web Style Guide

41. 2. Information Architecture Hierarchy

42. Balanced Yale Web Style Guide

43. 2. Information Architecture Analysis Yale Web Style Guide

44. 2. Information Architecture Presentation of Information Language and metadata What vocabulary is used (consistently) How does information describe other information

45. 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

46. Skeleton Plane What form will the product take Giving shape to structures 1.Interface Design 2.Navigation Design 3.Information Design

47. 1. Interface Design Components and layout Provides users with capacity to do things

48. 2. Navigation Design Designing the information space (and beyond) Provides users with capacity to places

49. 3. Information Design Presentation of data Provides users with capacity to see/hear/touch things (communicated to them)

50. 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

51. 1.Interface Design Wireframes

52. 1.Interface Design Paper Prototypes

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

54. 2. Navigation Design

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

56. 3. Information Design Components that display information

57. 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…

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