Interaction design: desiging user interfaces for digital products
Download as PPTX, PDF5 likes3,259 views
The document provides an extensive overview of interaction design and user-centered design principles for digital products, emphasizing the importance of understanding user behavior and needs throughout the design process. It discusses various research methods, such as user interviews and usability testing, while highlighting principles like simplicity, structure, visibility, and consistency in user interface design. Additionally, the document addresses the financial and ethical implications of investing in user experience design, as well as practical exercises for improving design practices.
Interaction design: desiging user interfaces for digital products
- 1. Interaction design Designing user interfaces for digital products David Little, Senior UI Designer, DDH MA Digital Humanities: Methods and Techniques
- 2. Overview 1. 2. 3. 4. 5. Definitions User-centred design Design principles for interaction design Why this is important Design exercise
- 3. Whistlestop tour! • • • • Huge subject Can only skim the surface in one hour General introduction Suggestions for further reading and study
- 4. 1. DEFINITIONS • What is a user interface? “That part of a computer system with which a user interacts in order to undertake her tasks and achieve her goals.” (Stone, Jarrett et. al., 2001) • What we interact with when we use any kind of digital hardware or software. What we may think of when we think about a digital product.
- 5. Examples
- 10. Where the UI fits • Back-end infrastructure: servers, databases and programming. • Content (i.e. words and pictures). • Information architecture: how the content is organised and navigated. • User interface: where the user interacts with the above.
- 11. Interaction design “Interaction design is concerned with describing user behavior and defining how the system will accommodate and respond to that behavior" (Jesse James Garrett, 2011) • Research into the target users of a digital product or service. PLUS • The design of appropriate tools (interfaces) which enable users to achieve their goals.
- 12. Research is key • Design without research is guesswork… • …or may result in an interface which reflects the understanding of a product‘s programmers or architects—the implementation model, not of its users‘ and their mental model—how they think/expect things to work. • Users‘ mental models are based on experience and beliefs, not facts. Interaction design should be thought of as: • A process integral to the creation of digital products. • A group of interrelated activities. • A mindset.
- 13. The context of interaction design • Sits within a larger set of disciplines/practices, all ultimately concerned with the interaction of people with machines. • Labels can be confusing and describe overlapping activities and processes which may be carried out by one or a number of people.
- 14. User Experience (UX) design • Commonplace term in software design and beyond. • Totality of users‘ experiences of a product or service, from its content, navigation, aesthetics, interactions or even how quickly it performs or responds to users‘ interactions. • Umbrella term for a number of more defined disciplines.
- 15. The UX Venn Diagram Dan Saffer, 2009
- 16. Human-Computer Interaction (HCI) • Academic study of the interaction between humans and machines. • Computer science, psychology, linguistics, sociology, anthropolog y. • Popularised in the 1980s but with roots in older fields of ergonomics and human factors: 1900s and earlier. • Interaction design in our context can be thought of as the practical implementation of HCI research, methods and practices.
- 17. 2. USER-CENTRED DESIGN • The process of designing software / digital products around the needs of their users. “Focus on the user and all else will follow.” (Google) • Focuses on: people, their motivations, goals and behaviours. • Must be aware of technological constraints but interaction design is not a technological process.
- 18. User-centred design • Involve users at all stages of the design process.
- 19. Research • Various types of research that will take place during the life cycle of a digital product. – – – – Competitive research Organisational research User research Evaluative research • Large topic: we‘ll mainly concentrate on user research and evaluative research. • Erika Hall, Just Enough Research (A Book Apart, 2013): good introduction.
- 20. User research • • • • • Finding out about your users! Who are they? What are their goals? How do they achieve them now? How do they understand things? What is their mental model? • What contexts do they operate in? • Not asking them what they want!
- 21. Define the problem • What problem are you trying to solve? “Describe the ways in which users of smartphones and tablets use their devices to engage with arts and cultural resources online” “How do users of smartphones and tablets currently use their devices to purchase tickets and pay for online content?” (Royal Opera House mobile web app project: Royal Opera House / KCL DDH / POP) • Question should be well-defined: focus on what you need to know.
- 22. Finding users • How do you find users? – An existing user base. – An organisation‘s own information (e.g. marketing, focus groups, audience profiles): what are they willing to share? – Academic projects: project team contacts and knowledge. • If you have limited resources? – Friends, family, colleagues. – Mailing lists. – Social media.
- 23. Engaging with users • Need to be pragmatic: what are your constraints (time, financial). User research takes time and you may need to recompense people for their time. • If you have time: face-to-face, one-to-one interviews in user‘s ―natural environment‖: ethnography. • Observe users: how they work, their behaviours, what other resources they use: contextual enquiry. • What users do and what they say they actually do may well be different (c.f. Jakob Nielsen‘s First Rule of Usability). • Unstated goals, domain language.
- 24. Other ways to do user research • Interviews via Skype or Email. • Online surveys (generally better for quantitative information). • Existing published information about user behaviours. • Oh, and never use focus groups!
- 25. What to ask? • What kind of information: qualitative or quantitative information? – Qualitative: descriptive, less structured data. – Quantitative: numerical, measurable, statistical. – At initial stages of research qualitative information may be more useful. • Ask non-judgmental and non-leading questions. • Don‘t ask questions that are too open-ended (what is of relevance to the project given its constraints?) • For more information: – Box and Bowles, Undercover User Experience Design (2010) – Kuniavsky, Observing the User Experience: A Practitioner's Guide to User Research (2003). – ‗Getting people to talk: an ethnography and interviewing primer‘: vimeo.com/1269848
- 26. Analysis • Best done in a group to avoid bias. • Methodologies for research and analysis – Lazar et. al., Research Methods in HumanComputer Interaction (Wiley, 2010) • Formal methodologies, e.g. Grounded Theory (coding / categorisation of information). • Less formal: identify patterns in your data using post-its and whiteboards. • Identify user goals, priorities, motivations, tasks etc.
- 27. Constraints • What are the strategic goals (―business goals‖) of the product you are creating; what were you funded to do? • Tensions between strategic goals and user goals: how will this be managed? • What constraints do you have: – – – – Financial Time Technology People
- 28. Applying the insights: personas • Identify your users – Personas – User stories • Personas: archetypal users / composites based on the data you‘ve gathered. • Allows us to empathise with users: what do they want / need? • Helps us to move away from decisions based on personal preference (―I like‖, ―I think we should…‖)
- 30. Applying the insights: user stories • Less time-intensive than personas: high level descriptions of user goals. • As a <type of user> I want <a goal> so that <some reason>: As a learner, I want to access contextual materials about performances, including plot synopses and audio/visual content in order to deepen my knowledge of the performance. As a transacter, I want to be able to choose seats and book tickets via the app in a way that is sympathetic to the device I am using.
- 31. Applying the insights: deliverables • Other key deliverables (or documentation) – Interface sketches (pen and paper) – Wireframes (static schematic diagrams of an interface) – Prototypes: interactive prototypes (e.g. HTML/CSS) – Best tool for the job: communicate ideas for discussion with team members and evaluation with users. – Think stories and ideas, not tools. Be pragmatic.
- 32. Sketches
- 33. Wireframes
- 34. Prototypes
- 35. Prototyping and testing • Prototypes take more time to create than sketches or wireframes but are interactive—best for testing interactions and user flows etc. • Concentrate on key functionality you want to test. Rough, functional, easy to change (or dispose of). • Feedback from testing the prototypes can be fed back into further iterations of the design. • May be resource intensive but much easier (and cheaper) to address issues and fix usability problems early in the process than later.
- 36. Evaluative research: usability testing • What is usability? “The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use.” International Organization for Standardization (ISO): ISO 9241-11 • Or, how easy is it for your users to complete a task or set of tasks on your prototype? • Doesn‘t require a lab or expensive equipment. • One-to-one testing of a prototype with a user. A facilitator gives a participant a number of tasks to work through on the interface and asks them to ―think aloud‖ their decisions. • Make notes on the user‘s behaviour and, if possible, use screen recording software to record the user‘s decisions, voice and facial expression. • Demo usability test by Steve Krug (author of small, accessible books on usability testing): www.youtube.com/watch?v=QckIzHC99Xc
- 37. Iterative design • Analyse results of testing and feed back into design. • Don‘t need many participants to identify main usability problems (around four-five should be fine). • Steve Krug: short, accessible books on running usability testing: Don’t Make Me Think! and Rocket Surgery Made Easy. • How many tests should you run? It depends. Usually defined by project constraints (unless you‘re Google who once famously tested 41 shades of blue to see which performed better!). • Remote usability testing software: an alternative to running face-toface tests, but usually better for gathering quantitative information.
- 38. UCD: summary • A mindset: gives a voice to the user throughout the design and build process. • Iterative: design, test, design, test etc. • Be pragmatic. You will always have constraints. • One round of testing is better than none. • Testing one user is 100% better than testing none (but more is better!).
- 40. 3.1 Simplicity • A user interface should be kept as simple as possible for users in order that they can achieve their goals. • What is simplicity? Can be hard to define. – Reduce unnecessary complexity in the interface. – ―Keep things as simple as possible, but no simpler‖ (Einstein … maybe). – Goals, tasks and context. – Language: does the UI ―speak‖ the user‘s language—is its terminology understandable?
- 44. It depends… • …on user context. • What they want to achieve. • Mobile presents fewer options. But what if you want to do more than just see the immediate forecast?
- 45. 3.2 Structure • Ensure that the interface is clearly laid out, well organised and controls are easily identifiable. • ―Gestalt laws of perception‖: – Proximity. When elements are grouped together, people perceive them as being related. – Similarity. Elements that look similar are perceived as being related. – Closure. We fill in the blanks with ―incomplete‖ images. Commonly used in logo and icon design.
- 46. Proximity: the layout of a navigation menu
- 47. Proximity and similarity: Flickr‘s top menu bar Similarity: Icons for Adobe Dreamweaver and Fireworks
- 48. Closure: in logo design Closure: in icons Evernote reminder icon Suitcase icon: Font Awesome icon set Apple Mail icon on iPhone iOS7
- 49. Grids: an established tool from graphic design for imposing order on information
- 51. 3.3 Visibility • Visibility can be thought as ensuring that interface controls that need to be accessed by the user are as clear and visible to the user as possible. • It ties in with the idea of ―affordance‖, popularised by the design thinker and writer Don Norman: “The perceived and actual properties of the thing, primarily those fundamental properties that determine just how the thing could possibly be used.” (Don Norman, 1988)
- 52. • Affordance: ―this is for doing that‖. Underlined text on a web page is for clicking
- 53. The ―home‖ button on an iPhone is for pressing
- 54. • Use of appropriate metaphors can also promote visibility. Sometimes metaphors come from a preexisting technology, e.g.: The Gmail icon: resembles a ―traditional‖ envelope • At its most extreme this can result in ―skeuomorphism‖: incorporating elements in the UI from a previous technology that serve no purpose other than being decorative.
- 55. Skeuomorphism vs ―flat‖ design • Trends in UI design: skeuomorphic or flat? • Skeuomorphic: make interface elements look like existing or older technologies. • Flat: plain, functional. Clearer? • Which one is better? Not about aesthetics, about what‘s best for your users (beware trends!)
- 56. Apple‘s podcast app: iOS6 (skeuomorphic) Apple‘s podcast app: iOS7 (flat)
- 57. 3.4 Consistency • ―People see what they expect to see.‖ • Recognition over recall. • Consistency across a product or set of products.
- 58. 3.5 Tolerance • Well designed software should try to prevent users from making errors in the first place but is inevitable that mistakes will happen. A tolerant UI is a forgiving UI and lets users recover from mistakes they have made. • Mistakes may take many forms, e.g. an accidentally discarded email draft, a formatting mistake in a Word processor or an incorrectly filled form field.
- 59. Tolerant: the colour picker in Photoshop: only allows me to enter six digits for a hex colour code (red, green and blue number pairs).
- 60. Intolerant: the colour picker in Illustrator: allows me to enter more than six digits and then presents me with an annoying error message (also note the inconsistency across products).
- 61. 3.6 Feedback • How the UI communicates with the user after she has carried out an interaction. • Feedback may be visual, auditory or even haptic (communicated via touch): – The success message that appears after a web form has been submitted. – The whooshing sounds as an SMS is sent from an iPhone. – The sense of a Wii controller vibrating when simulating a machine gun being fired on Call of Duty.
- 62. Nielsen‘s heuristics • Jakob Nielsen‘s ten heuristics (guidelines!) for creating usable interfaces (1999): • • • • • • • • • • Visibility of system status Match between system and the real world User control and freedom Consistency and standards Error prevention Recognition rather than recall Flexibility and efficiency of use Aesthetic and minimalist design Help users recognise, diagnose and recover from errors Help and documentation http://www.useit.com/papers/heuristic/heuristic_list.html
- 63. 4. WHY THIS IS IMPORTANT • Finance • Impact • Ethics
- 64. Finance • ROI: Return on Investment • Spending time and money on the user experience will provide benefits in the longer term: – Increased sales – Competitive advantage – Increased ―conversion rates‖: users taking the actions you want them to: purchasing a product, becoming a signed-up engaged user (e.g. of an educational resource) – Reduce support / training costs – Reduce (re)-development costs – Justify the use of limited funds
- 65. Cost saving of usability testing ―The rule of thumb in many usability-aware organizations is that the cost-benefit ratio for usability is $1:$10-$100. Once a system is in development, correcting a problem costs 10 times as much as fixing the same problem in design. If the system has been released, it costs 100 times as much relative to fixing in design.‖ T. Gilb (1998) quoted on the Usability Professionals Association (UPA) website.
- 66. Impact • Impact important consideration in awarding of research funding – Impact on academia: advances in ―understanding, methods, theory and application‖ (Research Councils UK) – Wider impact on society and economy • Digital resources: investing in UX can increase impact.
- 67. Impact: example • Old Bailey Online – www.oldbaileyonline.org • JISC-funded user engagement exercise: resource was not being well-used by academic community. • Results of exercise: creation of sets of tools aimed at teachers and researchers. • Toolkits for measuring impact of digital resources, e.g. TIDSR: Toolkit for the Impact of Digitised Scholarly Resources (Oxford Internet Institute).
- 68. Ethics • All digital products have users or potential users. • (In non-profit sector): users may battle with a difficult UI if your resource is unique enough but why should they? • Jef Raskin, The Humane Interface (2000): laws of interface design: – A computer shall not harm your work or, through inactivity, allow your work to come to harm. – A computer shall not waste your time or require you to do more work than is strictly necessary.
- 69. Finally… • There are plenty of terrible user experiences already, don‘t add to them. • Engage with users and follow established design processes and principles. • Start noticing the good and bad user experiences you encounter every day.
- 74. Design exercise • Suggest design changes to the current CCED search screen to make usable by amateur local historians ―As an amateur local historian I want to easily be able to discover biographical information about individuals who lived in my local area between certain dates.” • • • • 5-10 mins: read brief 25 mins: sketch! 5 mins: prepare to present Group presentations: justify your decisions