Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. CS3240 - Human Computer InteractionLecture 3 : Managing Design Processes Lecturer : Dr Bimlesh Wadhwa dcsb @n s ed sg
  2. 2. Content• Development Methodologies p g – Rapid Contextual Design & Ease of Use Method• Four pillars of Design – 1 User Interface Requirements • Users, Requirements, Collection methods – 2 Guidelines, Documents & Process , • Refer previous Lecture • Interface and Interaction Styles 1-2 3-2
  3. 3. Development Methodologies• Rapid Contextual Design - RCD – Holzblatt et al 2005• Ease of Use Method – IBM• Others – GUIDE, STUDIO, OVID , , 1-3 3-3
  4. 4. Rapid Contextual Design Contextual Inquiry Interpretation Sessions and work modeling Model Consolidation and Affinity diagram Building Personas Visioning Storyboarding User E i U Environment Design tD i Paper prototypes and mock-up interviews 1-4 3-4
  5. 5. Rapid Contextual Design Talk to customers, while they work Interpret the data; create a shared perspective I t t th d t t h d ti Consolidate; create visual representation of work Develop Personas Review & ‘walk’ the consolidated vision Use i U pics and graphs to describe concepts; storyboarding d h t d ib t t b di Single representation of users and the work; built from from storyboards 1-5 Conduct interviews and tests with actual users; provide verification of design before committing to code 3-5
  6. 6. Ease of Use Method 1-6 3-6
  7. 7. The Four Pillars of Design 1-7 3-7
  8. 8. Users or Stakeholders• Who are they?• What are their abilities ?• Th i t k and E i Their tasks d Environment ?t 1-8 3-8
  9. 9. Users or Stakeholders Check out Check-out operators• Suppliers•LLocal shop l h owners Customers 1-9Managers and owners
  10. 10. Users - categories• primary: frequent hands-on• secondary: occasional or via someone else• tertiary: affected by its introduction, or will influence its purchase f 1-10
  11. 11. Users - capabilities •size of hands may affect the size and positioning of input buttons motor abilities may affect the i t b tt t biliti ff t th suitability of certain input and output devices • height if designing a physical kiosk • strength - a child’s toy requires little strength to operate, operate but greater strength to change batteries • disabilities(e.g. sight, hearing, dexterity) 1-11
  12. 12. Personas• Generally personas are synthesized from Generally, data collected from interviews with users. – a name and picture p – demographics (age, education, ethnicity, family status) – job title and major responsibilities – goals and tasks in relation to your site – environment ( h i l social, i t (physical, i l technological) 1-12
  13. 13. Users -Tasks• Tasks: – their context – what information do they require? y q – who collaborates to achieve the task? – why i the task achieved the way it is? h is th t k hi d th i ? 1-13
  14. 14. Users - EnvironmentEnvironment or context of use: — physical: dusty, noisy, vibration, light, heat, humidity, .. — social: sharing of files, of displays, in paper, ff f across great distances, work individually, privacy for clients — organisational: hierarchy, IT department’s attitude and remit user support communications remit, support, structure and infrastructure, availability of trainingg 1-14
  15. 15. ExamplesInteractive system for food stalls in a university’s self-service cafeteriaUsers : under 25 , comfortable dealing with technologyFunction : calculates total cost of purchases.Environmental : noisy and bE i t l i d busy; users lik l t b t lki likely to be talkingwith friends and colleagues while using the system. 1-15
  16. 16. Interactive system for control of functioning ofnuclear power plant plant.Users : well trained engineer or scientist competent tohandle technologyFunction : monitors the temperature of the reactors pEnvironmental : uncluttered restrictive , might need to uncluttered,wear protective clothing 1-16
  17. 17. Interactive system to support distributed design teamse.g. f car d i for designUsers : professional designer, prepared to learn system to g ymake his job better; likely to be multi-lingualFunctional : communicates information between remotesitesEnvironmental : physically di t ib t d over wide area, filE i t l h i ll distributed id filesto be shared, product to comply with network technologiesand communication protocols 1-17
  18. 18. Methods to collect User Information Interviews Questionnaires (Personal, Focus (Survey ) Group) Observation Participatory (Ethnographic) Design Qualitative and Quantitative 1-18
  19. 19. InterviewsPersonal & Focus Group interviews• Immediate responses• Allows users to express themselves in own words• Allows collection of a large volume of rich data• Allows discussion, probing and unexpected insights• Useful in Investigating problems 1-19
  20. 20. Interviews - guidelines• Prepare and distribute agenda, outline of topic and p g p questions that will be asked• Ensure that each question is open ended, unambiguous and contains only one idea• Use skilled interviewers with good listening skills• Ensure interviews last no longer than 30‐60 minutes, depending on type• Select a comfortable and neutral setting and ensure p participation by all p y• Include highest level of management available if possible• Record interviews rather than relying on memory 1-20
  21. 21. Questionnaires• Qualitative & quantitative sections• Manual or electronic distribution• Quick & Cheap distribution• Good reachability• Relatively low resource consumption - human and financial 1-21
  22. 22. Questionnaires - guidelines • “Sell” importance before distribution and provide an incentive. • Keep them short, structured and grouped according to purpose. • Let respondents know the number of questions. • Give clear instructions, appropriate time and due date for return. • Use terminology or language familiar to your users users. • Use “satisfactory,”“unsatisfactory” scale, rather than “1,2,3”ranking. • Allow flexibility to go back change “skip” or “save” responses back, change, skip save responses. • Avoid surveying for information you can find another way. • Test or pilot to a sample group before , ,,,,, www.coolsurveys.comwww snapsurveys com www surveycrafter com www coolsurveys,,, 1-22www.questionpro.com
  23. 23. Observation• Think-aloud technique• Diaries• Interaction logs 1-23
  24. 24. Observation - guidelines• Segment the g p from which y want feedback g groups you• Try to understand each group’s goals and interests thoroughly.• Record your observations. Take careful note of all informal information gathering.• Use open‐ended questions when you interview verbally verbally.• Avoid putting your own bias on observations. Consider a neutral third party if impossible• Allow sufficient time for observation. 1-24
  25. 25. Ethnographic Observation• Preparation• Field Study• Analysis• Reporting R ti 1-25 3-25
  26. 26. Ethnographic Observation 1-26 3-26
  27. 27. Participatory Design• Origin: Scandinavia, Scandinavia – named Cooperative Design. ‘Good systems cannot be built by design experts who proceed with only limited input from users…’ 1-27 3-27
  28. 28. Participatory Design Durin’s D i ’ model of th f d l f the four l levels of user participation l f ti i ti 1-28 3-28
  29. 29. Scenario DevelopmentDay-in-the-life scenarios:• characterize what happens when users perform typical tasks• can be acted out as a form of walkthrough• may be used as basis for videotape• useful tools – table of user communities & tasks – table of task sequences – flowchart or transition diagram 1-29 3-29
  30. 30. Data Recording• Notes, audio, video, photographs 1-30
  31. 31. Data CollectionPotential pitfalls • Representative Sample p p –Small, good enough, wrong • Bias -Outside consultant or third party • Wrong methodology –QQualitative or quantitative data •Timeline –Be realistic Be realistic. 1-31
  32. 32. Data Analysis–Manual–Desk top tools (spreadsheets & databases)–Survey software programmes–Statistical packages 1-32
  33. 33. Data Analysis• Data processing or preparation plan –T Transcription of interviews and observation fi di i ti fi t i d b ti findings –Editing responses –Coding responses Coding •Data entry y •Data analysis 1-33
  34. 34. Data Analysis• Recording and Presenting Survey ResultsDescriptive summary•Text or tabular (including cross‐tabulation) ( g )Descriptive statistics•Frequency counts, ranges, measures of central tendencyGraphicalG hi l representation t ti•Charts, graphs, histograms 1-34
  35. 35. Quantitative Data Analysis• Averages • Mean: add up values and divide by number of data points • Median: middle value of data when ranked • Mode: figure that appears most often in the data• Percentages• Graphical representations give overview of data Number of errors made N b f d Internet use Number of errors made 10 4.5 mber of errors made mber of errors made < once a day 4 8 3.5 3 6 once a day 2.5 4 2 once a week 1.5 2 1 NumNum 0.5 2 or 3 times a week 0 0 0 5 10 15 20 1 3 5 7 9 11 13 15 17 User once a month User 1-35
  36. 36. Qualitative Data Analysis “ I am thinking it’s j g just a lot of information to absorb from the screen. I just I don’t concentrate very well when I’m looking at the screen . I have a very clear idea of what I ‘ve read so far but it s because of ve far… it’s the headings I know OK ….there is so much reference to all those previously said like ……maybe it would be nice to have this navigation, extra links …” Verbalisations show evidence of dissatisfaction, confusions, , ,and that user is having problem in achieving overall task goal. 1-36
  37. 37. Summary –Development MethodologiesUser Interface Requirements• Development methodologies help offer validated processes with predictable schedules and meaningful deliverables.• Collecting User Interface Requirements can be notoriously difficult but well-documented success stories inform and inspire. inspire• Ethnographic observation can provide information to guide task analysis.• Scenarios are useful for managerial and customer presentations, and helps to plan usability tests. 1-37 3-37
  38. 38. Guidelines documents and processes – Terminology (objects and actions), abbreviations, and capitalization – Words, icons and graphics – Screen-layout issues y – Input and output devices – Direct-manipulation clicking, dragging, dropping, and g gestures – Error handling and recovery procedures – Online help and tutorials – Training and reference materials 1-38 3-38
  39. 39. Conceptualize InteractionInterface Interaction Metaphor Type Type
  40. 40. Interaction TypesInterface Types 1-40
  41. 41. Interaction Types 1-41
  42. 42. Instructing• Users give instructions to a system – Typing commands – Selecting options from menu g p – Speaking aloud commands – Pressing buttons – Using fn-keys• quick, efficient, repetitive action ff 1-42
  43. 43. Instructing - examples 1-43
  44. 44. ManipulatingThe central ideas of user control:• Visibility of Object and Actions• Rapid, reversible, incremental actions• Replacement of complex command-language syntax command language with direct, visual manipulation of the object of interest. 1-44
  45. 45. Manipulating - examples 1-45
  46. 46. Conversing• User & system as dialog partners• Good for cases where user needs to find information or discuss issues – Advisory systems – Help facilities• Simple Voice recognition, menu-driven to natural language based systems 1-46
  47. 47. Conversing-Examples • Ik help centre Ikea h l t…… ………. An unedited conversationBen: no one does. i hate you.Anna: If I have unintentionally offended you then I apologise If think that I am not providing you with useful information aboutIKEA you can contact the Customer Service at your nearest IKEAStore.Ben: and what will they do? hmm? they can’t sack someone that’snot real. you get away with murder. who do you answer to? isthere a virtual boss somewhere sitting in his virtual office?Anna: As I am only an advanced computer program, I cannotanswer more than one sentence at a time. Please simplify andrepeat the most important question within your previous input and input,I will try to reply as accurately as possible. I am opening a page 1-47now which you can use if you wish to contact Customer Services.Thank you very much!
  48. 48. Conversing - Examples• A k , Ask jeeves – kid A k Kid Ask A k j kids, Ask Kids 1-48
  49. 49. Exploring• Enables users to explore and interact with p environment• Users move through virtual or physical environments• Context aware systems – based on location and/or Context-aware presence of people in the vicinity of sensing device. 1-49
  50. 50. Exploring - example CAVE project p j 1-50
  51. 51. Exploring - exampleAmbient Wood project 1-51
  52. 52. 1-52
  53. 53. Interface Paradigms 1980s interfaces• 80 – single user 80s i l Command desktop apps WIMP/GUI 1990s interfaces Advanced graphical (multimedia, virtual reality, information visualization)• 90s – multimedia apps, Web Speech (voice) web interface Pen, gesture, and touch Appliance 2000s interfaces Mobile• 2000s– robotics, Multimodal Shareable mobile interfaces Tangible Augmented and mixed reality Wearable Robotic 1-53
  54. 54. Recent shifts• How to enable people to access and interact with p p information in their work, social, and everyday lives• Designing user experiences for people using interfaces that are part of the environment with no controlling devices.• What form to provide contextually-relevant information to people at appropriate times and places• Ensuring that information, that is passed around via interconnected displays devices and objects is secure displays, devices, objects, and trustworthy. 1-54
  55. 55. Command interfaces• Efficient, precise, and fast ,p ,• Large overhead to learning set of commands. 1-55 55
  56. 56. WIMP/GUI interfaces• Windows• Icons• Menus• Pointing device 1-56
  57. 57. Windows• Windows were invented to overcome physical constraints of a computer display, enabling more information to be p y g viewed and tasks to be performed.• Scroll bars within windows also enable more information to be viewed. 1-57
  58. 58. MenusFlat , drop down, pop up, contextual, and expanding. drop-down, pop-up,• Flat menus – good at displaying a small number of options at the same time and where the size of the display is small – Nested lists of options require several steps to get to the desired option 1-58
  59. 59. Menus• Contextual menu – P id access t often-used commands th t make Provides to ft d d that k sense in the context of a current task. • right-click 1-59
  60. 60. Menus• Expanding menus – Enables more options to be shown on a single screen th i possible with a single fl t menu . than is ibl ith i l flat – More flexible navigation, allowing for selection of options to be done in the same window – M t popular are cascading ones Most l di • primary, secondary and even tertiary menus • downside is that they require precise mouse control • can result in overshooting or selecting wrong options 1-60
  61. 61. Icons• black and white -> color, shadowing, photorealistic images, images 3D rendering, and animation rendering• very detailed and animated -> visually attractive and informative, inviting, emotionally appealing, and f l alive i f ti i iti ti ll li d feel li• The mapping between the representation and underlying referent can be: – similar (e.g., a picture of a file to represent the object file), file) – analogical (e.g., a picture of a pair of scissors to represent ‘cut’) – arbitrary (e.g., the use of an X to represent ‘delete’) 1-61
  62. 62. Multimedia• Combines different media within a single interface with various forms of y interactivity – graphics, text, video, sound, and animations 1-62
  63. 63. BioBlast multimedia learning environment 1-63
  64. 64. Multimedia - Characteristics• Facilitates rapid access to multiple representations of p p p information.• Provide better ways of presenting information than can either one alone.• Enable easier learning, better understanding, more engagement, and more pleasure.• E Encourage users t explore e.g. diff to l different parts of a t t f game or story.• Users develop tendency to play video clips and y y animations, while skimming through accompanying text or diagrams. 1-64
  65. 65. Virtual reality and virtual environments • Computer-generated g p p g graphical simulations p providing: g – “the illusion of participation in a synthetic environment rather than external observation of such an environment environment” (Gigante, 1993) • provide new kinds of experience, enabling users to interact with objects and navigate i 3D space i t t ith bj t d i t in • Create highly engaging user experiences 1-65 65
  66. 66. Web interfaces• Early websites were largely text-based, text based, providing hyperlinks• Concern was with how best to structure information at the interface to enable users to navigate and access it easily and quickly• Nowadays, more emphasis on making pages distinctive, striking, and pleasurable. 1-66
  67. 67. 1-67
  68. 68. SwimStudio 1-68
  69. 69. Usability versus attractiveness• Vanilla or multi-flavor design? g – Ease of finding something versus aesthetic and enjoyable experience• Users read the web like a: – “billboard going by at 60 miles an hour” (Krug billboard hour (Krug, 2000)• Need to determine how to brand a web page to catch and keep ‘eyeballs’ 1-69
  70. 70. Speech interfaces• Where a person talks with a system that has a spoken language application, e.g., timetable, travel planner l• Used most for inquiring about very specific information, e.g., flight times or to perform a transaction, e.g., buy a ticket• Also used by people with disabilities – e.g., speech recognition word processors, page h iti d scanners, web readers, home control systems 1-70 70
  71. 71. Speech interfaces• Directed dialogs – where the system is in control of the conversation – Ask specific questions and require specific responses• Flexible systems allow the user to take the initiative: – e.g., “I’d like to go to Paris next Monday or two weeks. weeks.” – Guided prompts can help callers back on track • e.g., “Sorry I did not get all that. Did you say you wanted to fly next Monday?” Monday? 1-71
  72. 72. Mobile interfaces• Handheld devices intended to be used while on the move, e.g., PDAs, cell phones• Applications running on handhelds have greatly expanded, e.g., – used in restaurants to take orders – car rentals to check in car returns – supermarkets for checking stock k t f h ki t k – in the streets for multi-user gaming 1-72
  73. 73. Mobile interfaces• Small screens, small number of keys and restricted y number of controls.• Innovative designs including: – roller wheels, rocker dials, 2-way and 4-way directional keypads, softkeys• Usability and preference for these control devices varies – depends on the dexterity and commitment of the user 1-73
  74. 74. Shareable interfaces• Shareable interfaces are designed for more than one g person to use – provide multiple inputs and sometimes allow simultaneous input by co located groups co-located – large wall displays where people use their own pens or gestures –i t interactive tabletops where small groups i t ti t bl t h ll interact t with information using their fingertips, e.g., Mitsubishi’s DiamondTouch and Sony’s Smartskin 1-74
  75. 75. A smartboard 1-75
  76. 76. DiamondTouch Tabletop 1-76
  77. 77. Tangible interfaces• Type of sensor-based interaction, where physical yp , p y objects, e.g., bricks, are coupled with digital representations• When a person manipulates the physical object/s it causes a digital effect to occur, e.g. an animation g g• Digital effects can take place in a number of media and places or can b embedded i th physical d l be b dd d in the h i l object 1-77
  78. 78. Tangible interfaces Examples • Chromarium cubes – when turned over digital animations of color are mixed on an adjacent wall • Flow Blocks – depict changing numbers and lights embedded in the blocks • Urp – physical models of buildings moved around on tabletopBeat Blocks : 1-78Candy Sequencer :
  79. 79. Wearable interfaces • First developments was head- and eyewear-mounted cameras that enabled user to record what seen and to access digital information. • Since jewelery head mounted caps smart fabrics Since, jewelery, head-mounted caps, fabrics, glasses, shoes, and jackets have all been used – provide the user with a means of interacting with digital information while on the move 1-79&index=19
  80. 80. Steve Mann - pioneer of wearables 1-80&playnext=1&index=2
  81. 81. Robotic interfaces• Four types yp – remote robots used in hazardous settings – domestic robots helping around the house – pet robots as human companions – sociable robots that work collaboratively with humans, and communicate and socialize with them – , as if they were our peers 1-81
  82. 82. Which interface?• Is multimedia better than tangible interfaces for learning?• Is speech as effective as a command-based interface?• Is a multimodal interface more effective than a mono- modal interface?• Will wearable interfaces be better than mobile interfaces for helping p p find information in foreign cities? p g people g• Are virtual environments the ultimate interface for playing games?• Will shareable interfaces be better at supporting communication and collaboration compared with using networked desktop PCs? et o ed des top Cs 1-82
  83. 83. Summary• Much system development for the PC platform will continue to use advanced GUIs, in the form of multimedia, web-based interfaces, and virtual 3D environments• Mobile interfaces have come of age – Increasing number of applications and software toolkits available• Speech interfaces also being used much more for a variety of commercial services• Appliance and vehicle interfaces becoming more pp g important• Shareable and tangible interfaces entering our homes, schools, public p p places, and workplaces p• An important concern that underlies the design of any kind of interface is how information is represented to the user so they can carry out ongoing activity or y y g g y task. 1-83