spring 2012   introduction
the course team➝  Prof.Jeffrey Huang (responsible)➝  teacher: Hendrik Knoche➝  teaching assistants: Michal Fok, Oscar Bola...
course basics               ➝  6   credits   ➝  2 h lecture   ➝  4 h studio/lab   ➝  6 h home based preparation   ➝  no wr...
the course structure➝  1  design brief➝  4 design reviews➝  13 interactive lectures/seminars➝  13 studio sessions (attenda...
assessmentthe final grade is based on: the grades of four mandatory reviews "     (submitted documentation and its presenta...
assignment dates➝  10th   Mar – Microsoft Imagine Cup summary"               round 1 competition deadline ➝  19th Mar   – ...
how is your design evaluated? by a panel of expertsQ: how do you assess concepts or designs?A: Scott Jenson (former direct...
what is this course?Personal Interaction Studio focuses on  ➝  mobile  devices as the platform (personal)   ➝  interaction...
resources➝  all communication and further readings, links etc.   will go through moodle ➝  please enroll with the key: per...
syllabus1.    introduction2.    data collection3.    analysis4.    design techniques5.    mobile i/o6.    screen design7. ...
relation to design process➝  understand   brief➝  research background – refine problem➝  ideate candidates➝  prototype solu...
example➝  Don’t   forget your friends!   ➝  “Can’t   do it today. But I’ll call you next time.”
things you will learn (about)➝  brainstorming, ice breaking➝  interviewing➝  qualitative analysis➝  sketching➝  personas➝ ...
topics addressed in this class➝  design  thinking ➝  interaction design➝  user experience
design briefPeople’s physical and mental health are one of the mostprecious goods available to them.Mobile phones have bec...
imagine cup 2011
attention➝  http://www.youtube.com/watch?  v=vJG698U2Mvo
more details…✱attribution: parts of these slides are based on Angela Sasse  and Sven Laqua s course on interaction design ...
why mobiles?“The most profound technologies are those that disappear.” Mark Weiser
mobile life
what is design?    hard to grasp – industrial design, graphic design,     software design, interface design, product desig...
why design?➝  post  WWII declining American manufacturing   quality disillusioned purchasers who, after being   attracted ...
why design digital products➝  digital   products shortcomings:   ➝  requirecomputer-centred thinking   ➝  poor behaviour, ...
the design funnel  concept                                                                  conceptgeneration             ...
sketchbook➝  jotdown and annotate ideas (no idea is bad)➝  explore & refine➝  develop variations, alternatives and details➝...
what is interaction design (IxD)? ➝  its   about the design of behavior"  http://designmind.frogdesign.com/blog/behaving-b...
interaction design within a company➝  management➝  marketing➝  engineering➝  design   teamHow to achieve buy-in for your i...
jobs - interaction designresponsibilities include: ➝    lead interaction design (entire product lifecycle), tools and deli...
design philosophy➝  centred   on human needs   ➝  individualor group   ➝  support goals and activities   ➝  design technol...
what is UX? “User experience encompasses all aspects of the end- users interaction with the company, its services, and its...
user-centred “User experience and interface design in the context of creating software represents an approach that puts th...
product centred “The user experience for Mac OS X applications encompasses the visual appearance, interactive behavior, an...
bad UX➝  “Technology    that does not work the way they   expect makes people feel stupid.” ➝  “if you intend to drive peo...
impact on users’ lives➝  User: “… so I have all these files and documents, all over   my desktop, different versions of doc...
user experience (UX)                     industrial/graphic                          design                          form ...
lived experience any account of what is often called the user experience must take into consideration the ‘felt’ experienc...
framework for design                                             and interaction takes place in a   has general & specific...
Garret’s planes of UX➝  strategy  – what user wants to achieve➝  scope – what functions and features are required➝  struct...
Garret’s planes of UX                                        concrete        surface                                      ...
levels of interactionuser’s/corporate goals   output in the real world   GOAL LEVELuser’s knowledge         computer’s rep...
personas➝  represent user groups ➝  system may be used by   one or several personas     ➝    different characteristics    ...
scenarios➝  persona-based     scenarios "   concise narrative description of how persona   interacts with system to achiev...
storyboards
scenarios vs. use cases ❝… scenarios are an interactive means of defining the behaviour of a product from the standpoint of...
eliciting UX requirements➝  in-depth qualitative data➝  interviews➝  in-depth analysis such as Grounded Theory and   Disco...
general reading➝  recommended     books (available at EPF-BIB)  ➝  Cooper,Reimann & Cronin (2007) "    About Face 3, Wiley...
summary➝  focus  on design approaches, methods and tools➝  learning by doing➝  interaction design is a relatively young an...
practical part – design techniques
brainstorming➝  group  size <10 – ideally between 5-7 + facilitator➝  find and set up comfortable space➝  appoint recorder ...
brainstorming – how to➝  address  what, how, when, where and why➝  give people time on their own (5 minutes silence)   at ...
ice breaker➝  effective    to start a training, team-building event➝  goal:       ➝  get to know each other    ➝  get into...
ice breaker – when to useif participants➝  come from different backgrounds➝  need to bond quickly to work on common projec...
the iceparticipants have    ➝  not  met before   ➝  different age, status or levels in an organization   ➝  different back...
ice breaker – methods (introductory)everyone draws name, nationality, focus of studyand one human element, e.g.:   ➝  one ...
assignments➝  fill   in questionnaire
Upcoming SlideShare
Loading in...5
×

PxS'12 - week 1 - Introduction

2,454

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,454
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

PxS'12 - week 1 - Introduction

  1. 1. spring 2012 introduction
  2. 2. the course team➝  Prof.Jeffrey Huang (responsible)➝  teacher: Hendrik Knoche➝  teaching assistants: Michal Fok, Oscar Bolanos➝  guest lecturers – tba
  3. 3. course basics ➝  6 credits ➝  2 h lecture ➝  4 h studio/lab ➝  6 h home based preparation ➝  no written exam
  4. 4. the course structure➝  1 design brief➝  4 design reviews➝  13 interactive lectures/seminars➝  13 studio sessions (attendance mandatory)➝  1 sketch book➝  reading assignments➝  interactive exercises all in English
  5. 5. assessmentthe final grade is based on: the grades of four mandatory reviews " (submitted documentation and its presentation):1.  results and design ideas from requirements capture (i)" through sketches, scenarios, storyboards and personas2.  design idea presentation through first (lo-fi) prototype (i)3.  interactive prototype / demonstrator on device (g)4.  final presentation interactive prototype on device (g)" and5.  participation in the class/studio (i) 6.  sketch book (i)7.  final short video (produced in week 14) (i)" ✱(i) = individual ✱(g) = group
  6. 6. assignment dates➝  10th Mar – Microsoft Imagine Cup summary" round 1 competition deadline ➝  19th Mar – 1st review (rc results + ideas)➝  2nd April – 2nd review (design solutions)➝  30th April – 3rd review (prototype)➝  21st May – final review documentation for each review is due on the Sunday before the review at 12:00 ✱ late submissions are subject to penalty
  7. 7. how is your design evaluated? by a panel of expertsQ: how do you assess concepts or designs?A: Scott Jenson (former director of Symbian): “First I ll be asking ‘what’s the value of this? , that is ‘Will people really want it? [… the] second is simplicity.” Jones & Marsden (2006) “…being humble as these [designs] are evaluated and seen to fall short, and to need refining.” Jones & Marsden (2006)
  8. 8. what is this course?Personal Interaction Studio focuses on ➝  mobile devices as the platform (personal) ➝  interaction design ➝  studio as the teaching format ➝  the idea is to generate, communicate, evaluate, iterate and improve design ideas through synthesis by re-defining problem and the solution ➝  it is NOT a programming course
  9. 9. resources➝  all communication and further readings, links etc. will go through moodle ➝  please enroll with the key: persint➝  http://moodle.epfl.ch/course/view.php?id=6881
  10. 10. syllabus1.  introduction2.  data collection3.  analysis4.  design techniques5.  mobile i/o6.  screen design7.  prototyping8.  -14. guest lectures and seminar
  11. 11. relation to design process➝  understand brief➝  research background – refine problem➝  ideate candidates➝  prototype solution(s)➝  select solution➝  implement delivery➝  learn from feedback
  12. 12. example➝  Don’t forget your friends! ➝  “Can’t do it today. But I’ll call you next time.”
  13. 13. things you will learn (about)➝  brainstorming, ice breaking➝  interviewing➝  qualitative analysis➝  sketching➝  personas➝  scenarios➝  storyboarding➝  elevator pitch➝  lo-fi prototyping ➝  hi-fi prototyping➝  designing, critiquing, re-designing➝  communicating your ideas – show and tell, posters, presentation "
  14. 14. topics addressed in this class➝  design thinking ➝  interaction design➝  user experience
  15. 15. design briefPeople’s physical and mental health are one of the mostprecious goods available to them.Mobile phones have become a large collection platform forsensor data either direct through e.g. GPS andaccelerometer or indirectly by providing sensor data fromother sources, which can be used to inform people’sdecision making and daily life.Your task is to design an application that empowers peopleto leverage sensed data for their well-being in terms of either:- personal health, "- environmental health or "- social health.
  16. 16. imagine cup 2011
  17. 17. attention➝  http://www.youtube.com/watch? v=vJG698U2Mvo
  18. 18. more details…✱attribution: parts of these slides are based on Angela Sasse and Sven Laqua s course on interaction design at UCL
  19. 19. why mobiles?“The most profound technologies are those that disappear.” Mark Weiser
  20. 20. mobile life
  21. 21. what is design? hard to grasp – industrial design, graphic design, software design, interface design, product design … in interaction design (Fallman 2003) :➝  scientific/eng. process (conservative)➝  art form (romantic)➝  ad-hoc activity (pragmatic, bricoleur) none are adequate – design is unfolding " both problem and solution evolve through sketching (prototyping)
  22. 22. why design?➝  post WWII declining American manufacturing quality disillusioned purchasers who, after being attracted by external style, found products unsatisfactory in use➝  American industry got decimated from 1960s on from imports from Japan and Germany where greater attention to production quality and a more holistic approach to design were the norm.➝  key differentiator for products➝  key skill in IT – differentiator for employees
  23. 23. why design digital products➝  digital products shortcomings: ➝  requirecomputer-centred thinking ➝  poor behaviour, rudeness➝  reasons ➝  ignorance about users ➝  conflicting interests ➝  lack of process
  24. 24. the design funnel concept conceptgeneration selected iterative overall concepts exploratory clarification resolution granularity general coarse medium fine
  25. 25. sketchbook➝  jotdown and annotate ideas (no idea is bad)➝  explore & refine➝  develop variations, alternatives and details➝  refer back, reflect➝  record other good ideas you see ➝  collection material (pictures, screen shots), tape them
  26. 26. what is interaction design (IxD)? ➝  its about the design of behavior" http://designmind.frogdesign.com/blog/behaving-badly-in-vancouver.html➝  designing the mechanisms for interacting with a product (Cooper 2007)➝  …designing interactive products to support people in their everyday and working life (Preece et al, 2002)
  27. 27. interaction design within a company➝  management➝  marketing➝  engineering➝  design teamHow to achieve buy-in for your ideas? How do you communicate your ideas to them? What’s the language – same as yours? Scott Jenson: “Design is about semantics and syntax. First you need to see what people do and want – the semantics and then you have to find a way to make that possible – the syntax.”
  28. 28. jobs - interaction designresponsibilities include: ➝  lead interaction design (entire product lifecycle), tools and deliverables, including: ➝  persona development ➝  use cases, user task flows ➝  user interface concepts and interaction models ➝  annotated wireframes ➝  information architecture ➝  documentation of design concept in detailed UI specs ➝  effectively communicate interaction models and design ideas to the team, leveraging above tools / documents➝  identify appropriate user research techniques and metrics for gauging success➝  guide product direction and set UI requirements based on user research, functional requirements, and business goals➝  recommend concepts for testing and interpret consumer feedback / results
  29. 29. design philosophy➝  centred on human needs ➝  individualor group ➝  support goals and activities ➝  design technology to fit human needs and characteristics➝  involve users whenever possible➝  mix analytical, creative and pragmatic approaches➝  pick from range of design tools➝  use existing best practices but not uncritically➝  monitor design process and reflect on it
  30. 30. what is UX? “User experience encompasses all aspects of the end- users interaction with the company, its services, and its products. The first requirement for an exemplary user experience is to meet the exact needs of the customer, without fuss or bother. Next comes simplicity and elegance that produce products that are a joy to own, a joy to use. True user experience goes far beyond giving customers what they say they want, or providing checklist features. In order to achieve high-quality user experience in a companys offerings there must be a seamless merging of the services of multiple disciplines, including engineering, marketing, graphical and industrial design, and interface design.” Nielsen, Norman Group
  31. 31. user-centred “User experience and interface design in the context of creating software represents an approach that puts the user, rather than the system, at the center of the process. This philosophy, called user- centered design, incorporates user concerns and advocacy from the beginning of the design process and dictates the needs of the user should be foremost in any design decisions.” Microsoft
  32. 32. product centred “The user experience for Mac OS X applications encompasses the visual appearance, interactive behavior, and assistive capabilities of software. With the Aqua graphical user interface, Universal Access features, and user-assistive technologies like the Address Book framework, Apple Help, and VoiceOver, you can deliver the cohesive and professional user experience that Macintosh users have come to expect. Its easy to leverage the user experience technologies of Mac OS X to make great Macintosh software.” Apple
  33. 33. bad UX➝  “Technology that does not work the way they expect makes people feel stupid.” ➝  “if you intend to drive people away from your site, it’s hard to imagine a more effective approach than making them feel stupid.”➝  JJ Garrett: Elements of User Experience
  34. 34. impact on users’ lives➝  User: “… so I have all these files and documents, all over my desktop, different versions of documents in different folders, and documents I don’t need any more. I never get round to tidying up. I keep emails because I might need because of the address, or the content. But I never get round to putting them into the address book and deleting the mails, so they just pile up. My electronic workspace is a mess.”➝  Q: How does that make you feel?➝  User: [thinks] “It makes me feel that I am a bad person.” From Richard Boardman’s (2005) PhD thesis on Improving Tool Support for Personal Information Management
  35. 35. user experience (UX) industrial/graphic design form behaviour content information architecture, interaction designer animation etc. Cooper 2006
  36. 36. lived experience any account of what is often called the user experience must take into consideration the ‘felt’ experience: emotional, intellectual, and sensual aspects of our interactions with technology. “We dont just use technology, we live with it.” John McCarthy, Peter Wright 2004: Technology as experience. MIT Press
  37. 37. framework for design and interaction takes place in a has general & specific characteristics CONTEXT physical incl. other USER SYSTEM technologies interacts with to attain social cultural GOAL temporal
  38. 38. Garret’s planes of UX➝  strategy – what user wants to achieve➝  scope – what functions and features are required➝  structure – navigation – how are screens linked and grouped➝  skeleton – placement of buttons, tabs, blocks of text, pictures➝  surface – series of pages in high fidelity
  39. 39. Garret’s planes of UX concrete surface “When designers make choices that do not align with planes above and below, you end up with a jumble of skeleton components that don’t fit.” structure scopeGarrett’s planes Of UXP strategy abstract
  40. 40. levels of interactionuser’s/corporate goals output in the real world GOAL LEVELuser’s knowledge computer’s representation TASK of task domain of task domain LEVELuser’s knowledge computer command DIALOGUEof language language LEVELuser’s hands, eyes computer keyboard, INPUT/ display OUTPUT LEVELhuman structures Computer structures
  41. 41. personas➝  represent user groups ➝  system may be used by one or several personas ➝  different characteristics ➝  different goals➝  e.g. buyers of a new car ➝  Jean-David (playboy): " go fast, impress women ➝  Aurelie (soccer mum): " fit in many kids, be safe ➝  Bob (the Builder): " haul big loads, be reliable
  42. 42. scenarios➝  persona-based scenarios " concise narrative description of how persona interacts with system to achieve goals➝  context-based scenarios " how product can serve needs of persona, created before any design is done➝  to key path scenarios – refined with design➝  to validation scenarios – based on ❛what … if❜" focus on illustrate requirements (the what), " top-down decomposition to functionality (the how)
  43. 43. storyboards
  44. 44. scenarios vs. use cases ❝… scenarios are an interactive means of defining the behaviour of a product from the standpoint of specific users (personas). This includes not only the functionality of the system, but the priority of functions and the way those functions are expressed in terms of what the user sees and how she interacts with the system. use cases, on the other hand, are based on exhaustive descriptions of the functional requirements of the system, often of a transactional nature, focussing on low-level user actions and accompanying system response.❞ Cooper 2006
  45. 45. eliciting UX requirements➝  in-depth qualitative data➝  interviews➝  in-depth analysis such as Grounded Theory and Discourse Analysis➝  ethnographic methods ➝  mostly observational ➝  can be combined with surveys, interviews, qualitative studies
  46. 46. general reading➝  recommended books (available at EPF-BIB) ➝  Cooper,Reimann & Cronin (2007) " About Face 3, Wiley ➝  Jones& Marsden (2004) " Mobile Interaction Design, Wiley ➝  ScottMcCloud (1993)" Understanding Comics, Harper Perennial (on order) ➝  Schneiderman & Plaisant (2010) " Designing the User Interface. Addison-Wesley. ➝  Preece, Rogers & Sharp (2002)" Interaction Design, Wiley
  47. 47. summary➝  focus on design approaches, methods and tools➝  learning by doing➝  interaction design is a relatively young and rapidly developing field➝  interaction designers have to address new technologies and adapt their methods and tools➝  collect artefacts: " paper, pictures, audio, video
  48. 48. practical part – design techniques
  49. 49. brainstorming➝  group size <10 – ideally between 5-7 + facilitator➝  find and set up comfortable space➝  appoint recorder - up-coming ideas on shared display, flip chart, whiteboard➝  ice-breaking exercise – to familiarize members of groups➝  define problem clearly➝  goal: generate as many ideas as possible adapted from www.mindtools.com/brainstm.html
  50. 50. brainstorming – how to➝  address what, how, when, where and why➝  give people time on their own (5 minutes silence) at beginning then ask to share them➝  encourage ➝  todevelop ideas of others further or use as new seeds ➝  enthusiastic, fun, criticism OK➝  includeeveryone to contribute (practical and impractical ideas) and develop
  51. 51. ice breaker➝  effective to start a training, team-building event➝  goal: ➝  get to know each other ➝  get into the event ➝  become comfortable contributing to event ➝  establish level playing field ➝  create common sense of purpose➝  ingredients: ice, a breaker (method), a facilitator
  52. 52. ice breaker – when to useif participants➝  come from different backgrounds➝  need to bond quickly to work on common project or goal➝  are unfamiliar with topic at hand➝  don t know the facilitator but should and vice versa
  53. 53. the iceparticipants have ➝  not met before ➝  different age, status or levels in an organization ➝  different backgrounds – different perceptions of each otherchoose method accordingly &don t try to uncover the whole iceberg
  54. 54. ice breaker – methods (introductory)everyone draws name, nationality, focus of studyand one human element, e.g.: ➝  one little known fact about me ➝  true/false - three to four short statements – the group guesses which one is false, or ➝  pair interview – interview and then introduce partner to the group ➝  trading cards➝  lo-fi social network
  55. 55. assignments➝  fill in questionnaire
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×