Monthly Archives: November 2012

UX Cambridge: James Chudley, Photos – The Unsung Heroes of User Experience Design

James Chudley is UX Director at CX Partners in Bristol, the author of Smashing UX Design, and a keen amateur photographer. He blogs at photoux.co.uk and tweets as @chudders. His new eBook on the usability of web photos will be released through fivesimplesteps.com next year.

  • I want to change the way you think about web photos. There is an opportunity for designers, directors, users, etc. to think about photos in a new way. As a profession we ignore photos and this is a bad thing.
  • For example: a website for a free food delivery service for the elderly. Put yourself in the shoes of the target audience (the children of the elderly service users). There were key anxieties in users’ minds that hadn’t been considered. Using a snowy photo conveyed the feeling: “They’ll deliver whatever the weather.” How did the user know that? How could you even begin to convey that in text or wireframe?
  • As a photographer, I can take a totally contrived photo; why then as a UX designer do we just stick a box with a cross through the middle?
  • Let’s think about designing a photo. An example from IKEA: wide open to convey space, dynamism/movement, wet foor/white wall to reflect light, etc. There are business considerations, and user considerations when looking at a photo. Can any other type of web content work so hard for your business or your users?
  • We sweat over layout and labelling and think about how people behave. Then we make a square with a cross in as a photo placeholder. This is weird. UXers are very rarely involved with selecting the photos.
  • Where are all the web photo guidelines? There is no photo equivalent of the usability heuristic rules; no rules about ‘what makes a usable photo.’ So I came up with some.
  • So why are photos important? There are quite a few online: 60bn in 2010, 100bn in 2011. Facebook, Instagram, it’s never been a more popular time to share our photos.
  • We are programmed to notice faces and emotions. Using images of people has a huge impact on people viewing it; there’s a part of the brain whose job it is just to recognise faces. You can manipulate where people look on a website by considering gaze lines in photos.
  • We did research on university sites and business services. Users hated generic smiling headshots — photos that worked well with students were of real students doing real things.
  • Facebook have a huge role in creating design patterns around photos, e.g. large photo slideshows, zooming.
  • What message are your website photos giving your users? All the photographer is thinking is ‘what message will this convey’? Example: The AA site uses a photo showing a single woman in the middle of nowhere as it gets dark — manipulates user anxiety.
  • User testing can reveal great insight into how people interpret your photos.
  • Photos are generally either useful (“content photos” e.g. Amazon) or not. Stock photography is used a lot, because photos are hard to find and source, but loses all manner of trust from users (these aren’t real people, I don’t trust this website).
  • Photos can: Support the primary task (property rental sites, product sites); convey intangibles (Buffalo shows photos of UK-based textile workers and their craftsmanship — how would you convey that feeling with any other sort of content?); show the benefits (the gorillapod SLR site shows the product in use); credibility (Arkive used a photo of David Attenborough, which immediately associates them with the brand values of the BBC); show you how (ifixit.com has large photos showing how to take the battery out of an iPod); humanise technology (sumall.com/about); consistency (John Lewis product photos are all framed and lit exactly the same; compare this to eBay photos!); show in detail (zoomable product photos — user testing showed that a main photo with an overlay next to a second zoomed-in block performed best).
  • Strategic use of photos to help sales: Emotive/lifestyle imagery at the start of the section (emotional), then specific product imagery as we shift towards rational decisions, focus on the product, detail.
  • Don’t forget: All of these things are wrapped up in the photos, yet still all we do in mockups is a cross-in-a-box.
  • What qualities does a usable photo have? Aristotle has the answers: Ethos (credibility), Pathos (emotion), Logos (logical persuasion/practical).
  • Rational appeal – will it match, fit, where is it, what do i get, etc. Emotional appeal - does it look good, entertain me, do i want it, does it look fun. Reputation/brand appeal – does it fit the brand, what qualities do i assume it as. [Social - how will i be perceived if i have this thing.]
  • Framework for evaluating web photos: 1. Fundamentals (focus, composition size exposure, quality, crop) 2. Effectiveness (rational appeal, emotional appeal, reputation/brand appeal) 3. Message communicated: What is it saying to you? 4. Anticipated user response: Change behaviour, decision making, sharing, change opinion, create desire.
  • UX people should have input into evaluating photos.
  • Mirror real behaviour on a website, e.g. how do people look at/evaluate shoes in a real shoe shop? Can we mirror that experience online?
  • Photographers’ problems: Offline vs online, cost, digital (i.e. online) is a poor relation to offline (print), brief based on campaign idea not on user needs. Photos taken intended for use on the side of a bus don’t work when you just make it smaller and stick it on a website.
  • Art director/designer problems around photography: Lack of assets, no access to photographer, lack of landscape oriented shots, lack of guidelines, retouching time.
  • Let’s push things forward: Annotate your wireframes (description, key message, photo content, response desired); drop photos into your wireframes; Use photos to tell stories to get empathy; talk to your designers; talk about photos in your usability reports; use real people photos in your personas (if the point of personas is to make you care about your users, don’t use photos of people that don’t exist!); do photo audits in the same way as you do content audits; use task models to create a shot list; and sketch photo briefs.
  • To recap: photos will be having a massive impact upon the way that people are using your products.

The slides from James’s presentation are now up on SlideShare.

UX Cambridge: Jan Srutek, Small Cognitive Psychology for Big Interaction Design

Jan Srutekis a UX Designer at Flow Interactive in London. He tweets as @JanSru.

  • Cognitive Psychology helps us understand human cognitive capabilities and limitations. Car designers can’t design car interiors without knowing the physical capabilities of users; as UX designers, we need to know the limits of users’ cognitive abilities. Knowing the basics lets us evaluate our designs, and design patterns, much more meaningfully.
  • Memory. Cognitive psychology tells us that information from the environment enters our brain via our senses, is encoded into short term memory, then some (that is not forgotten) is encoded in long term memory.
  • Short term memory (STM) is important to interaction design . A commonly held belief is that the human brain can hold 7 ± 2 pieces of information in STM; this is misleading and inaccurate. The limits of human short term memory is actually 4 ± 1 ‘chunks’ of information. For example, when remembering phone numbers, we split them into chunks.
  • STM is rather limited. These limits are relevant in two scenarios: When people have to remember stuff; and when people are problem solving. Limits (whether four or seven) are not so important when people can see UI elements on the screen, so in decisions like the number of navigation items to use it is not relevant.
  • STM is easily disrupted. How often have you walked to the fridge only to forget what it was you wanted? Don’t interrupt users unless it is absolutely necessary (popups, distracting visuals).
  • Design patterns that have standardised on the web to work with STM in a better way: Inline validation; rich popup/callout (such as the Amazon cart overlay) which allow the user to perform an action (check the contents of my cart) without leaving the screen/activity they are performing.
  • Provide on-demand information in context. This happens when users haven’t internalised the concepts that the website is using (e.g. jargon that needs definition, which then requires use of STM to remember definitions).
  • Long Term Memory (LTM) is actually two different types of memory. Declarative (explicit) and Procedural (implicit). Then Declarative can either be episodic (experiences) or semantic (what/knowledge). Procedural memory is how we know how to do things. LTM is much more permanent; it can last up to a whole lifetime.
  • The storage/retrieval of LTM involves level-of-processing: “Information that is analysed deeply is recalled better than information that is analysed superficially.”
  • We can use this principle in our applications/design if we want people to engage and/or remember more about our product. To engage people, make something: Relevant, emotional, humorous, surprising/shocking, or require elaboration/reflection.
  • Examples: Investec Bank use personal focused copy when talking about investment (“your investments represent the future of your family”). And the Converge SE 2012 conference used the text: “Peel off the layers” alongside a dinosaur losing layers of skin and flesh as you scroll down the page. Ben The Bodyguard (another scroll-down animation experience) used emotions and reflection to improve rememberability.
  • Learning. People prefer learning by exploration; they jump into products/sites without reading manuals/instructions; they form hypotheses, and learn by exploring. We can facilitate/enable this process by allowing users to build an accurate mental model about how things work. Place a layer of usable interaction design between system model and user’s mental model.
  • How to support building a good mental model: A starting point that orients people; and continuously encourage exploration.
  • Example: In a 1984 study, two groups were given a control panel and step-by-step procedures to follow; the first group learned them by rote, while the second group were also shown a diagram of the system, told what the acronyms on the buttons meant, and how it works. The group that saw the concept model performed much better; they learned procedures faster and more accurately, performed actions faster, and even identified inefficiencies.
  • A relevant design pattern on the web is the  “1-2-3 orientation” pattern (3-step process common on many startup sites to explain their service’s main proposition).
  • To encourage exploration: Prevent errors and facilitate recovery, make things consistent and predictable, and provide clear feedback for all actions.
  • Games have tutorials, because nobody wants to read the manual — and they only give you tips at the moment you need them, not before and not later. Games also increase challenge levels over time, to encourage you to keep exploring the game further.
  • Guideline: Recognition rather than Recall. People are better at recognising things, or the next step, that they have seen in the past than recalling them from their memory. Relevant design pattern: Search autocomplete changes recall into recognition.
  • Attention. Attention is a limited resource (inherently linked to STM); multi-modal (each sensory channel has limited channel of attention resource); and works in both a top-down manner (you can focus your attention) and bottom-up manner (something catches your attention). So — let people focus on their tasks, not on distracting design.
  • Use progressive disclosure to reveal functionality and content in a planned manner. e.g. people are good at detecting movement, so we can use animation or motion to guide their attention.
  • An example from Picnik’s signup form: Three fields (name, password, email), which revealed additional fields (re-enter password and re-enter email) at appropriate points, then re-hid them again once complete.
  • A lot of these principles were first written about by Jakob Neilsen in 1990 as Ten Usability Heuristics – and they still work. They are based on fundamental principles of how the human mind works, and that hasn’t changed much in 10,000 years.
  • Book recommendations: Universal Principles of Design, 100 Things Every Designer Needs To Know About People; Seductive Interaction Design and Stephen Anderson’s Mental Notes card deck.

UX Cambridge: Annette Priest, How Anthropology Can Improve Your UX Practice

Annette Priest is a UX researcher and design consultant at Revel Insight. She tweets as @annettepriest.

  • Anthropology is the study of humankind.
  • To set the context: There are 5,700+ different mammals on this planet. Bonobos share 99% of their genes with humans. One of the things that makes us human is our use of tools;  and the interplay of tools and cognition is part of UX. As UXers, we create tools.
  • Archaeologists have classified human development based on tools; it is the defining aspect of development of homo sapiens. Different shapes of flaked axes in sequence shows human evolution. But we’re creating apps and websites. How do we balance our competing goals; what can we learn from anthropology?
  • “All service which a man can perform for humanity must serve to promote truth.” — Franz Boas
  • Cultural relativism: To understand a culture (or UX) requires understanding it from the inside, and not judging it by the standards of your own culture. Culture (UX) cannot be divored from biology and adaptation, nor language from culture (UX). Contemporary societies (or UX) cannot be understood without considering historical and evolutionary processes.
  • Systems thinking. Anthropological questions are all about ‘why’ – why do some cultures have different languages, practices, patterns of adoption, gender, social class, status.
  • Anthropologists use frameworks to make sense of things: Collecting, comparing, analysing.
  • Pick a branch of anthropology: Socio-cultural, biological/physical, archaeology, linguistics. You can map UX disciplines to these (user research, usability, cognitive science, ergonomics, UI design, analytics, IA, content, etc.)
  • Evaluation criteria: Land, language, values, clothing, tools, rituals, genealogy. Has lots in common with UX research in terms of the methods used (objects, photos, interviews, video, audio).
  • Explore and Analyse is the foundation of anthropology. Anthropologists have to understand the lenses they are looking through; understand your own culture. A lot of anthropology is self-reflection; identifying those lenses so you can mitigate them. Your country, language, age, physicality, gender, class, status, education and experiences. How do all of those things impact your judgements unconsciously?
  • Tip: approach things as an alien. How would an alien view this? Let’s consider ‘status’: if you’ve just arrived on earth from an alien culture, how would you know who to talk to? Rich kids of Instagram would suggest it is conspicuous consumption. It sounds like a new/modern attitude, but go back in time to the 18th century, Native Indians living in the Pacific Northwest had a ritual of ‘potlatch‘, where status was determined by competitive gift-giving; it was the foundation of how tribes coexisted peacefully. Ruth Benedict was the main person who was studying potlatch, but she interpreted it through her lens of western culture. She missed the impact of disease, population changes, labour market, or new income sources.
  • Case study: GMAC Insurance. they use anthropological principles and understanding of culture to create really good UX for their customers. They ask 3 questions when you call: 1. Can you move? (Movement has a subconscious connection with injury, they feel reassured.) 2. How do you feel? 3. Can you give me the details of the accident? The process is designed to shift you away from anxiety and towards logic.
  • Be ethical. Researchers are members of many different communities, each with its own moral rules or codes of ethics. Anthropologists have moral obligations as members of other groups, such as the family, religion and community, as well as the profession. UXers have a hierarchy of obligations too: Company, client, customers, team, coworkers. Which are the guiding ones for our own agenda?
  • “Never doubt that a small group of thoughtful, committed citizens can change the world. Indeed, it is the only thing that ever has.” — Margaret Mead
  • Visit the Museum of Archaeology and Anthropology (MAA) in Cambridge! It’s free!
  • Summary: Holistic perspective, systems thinking, use a framework, understand your bias and work to mitigate it, hypothesis generation, evidence based approach, ethics.
  • It’s about curiosity and yearning to know more about the world, thinking outside the box, becoming smarter about new sources of information and integrating those, and learning people skills.

 

UX Cambridge: Stuart Church, From Darwin to Design

Stuart Church is an animal behaviourist turned UX consultant. He tweets as @stuchurch.

  • Darwin’s idea of evolutionary natural selection was one of the most powerful ideas of all time; the idea is something that is useful to us as interaction designers. Animals optimise what they do in a competitive Darwinian world, in the same way we want to optimise websites.
  • Biomimicry: There are amazing examples of adaptations in the animal world that influence/inspire product design — sticky plant seeds became velcro; there are swimming costumes inspired by shark skin; turbines shapes like whale fins; and lizard feet with sticky pads inspired adhesives.
  • Evolution is “the change in the inherited characteristics of biological populations over successive generations” aka “The survival of the fittest”.
  • Biological vs cultural evolution: Genes vs Memes (memes are the cultural analogue of genes, ideas that develop and are passed on. Good ones spread; bad ones don’t.)
  • There are selection pressures on genes: Prey, Mating, Competition, the physical environment, Pathogens/disease, Predators — a massive amount of pressure on an organism to survive.
  • For memes there are also pressures: Motivation, social factors (religion being the biggest example), utility/function, meaning, etc.
  • Designs as memes: Designs are ideas that are culturally inherited. Good designs serve a purpose and persist. Poor designs are forgotten. The unit of selection is the idea rather than the design itself.
  • What can we learn about design and innovation from evolutionary systems?
  • Evolution is just one big massive A/B experiment (“The Creator, if He exists, has an inordinate fondness for beetles” — JBS Haldane).
  • Design and innovation as experimentation: The ‘Lean’ concept, treating designs as experiments, and iterating through the cycle of idea>build>measure>data>learn.
  • Failure is the norm. 99.9% of all species that have ever existed are extinct. 80-95% of new products fail in their first year.
  • Innovations are not that innovative: “new but similar” – not necessarily different and radical.
  • “The adjacent possible.” Most successful ideas and innovations tend not be that different from what already exists. (This is also why we’re not all wearing jetpacks or living under the sea.)
  • Mixing it up: “Optimal Outbreeding” is why some animals don’t mate with others extremely genetically dissimilar to themselves. Sex allows you to experiment and create new gene combinations but you don’t want to lose the good combinations you have. New innovations often come from mixing up ideas too.
  • Ethnographic researchers visited labs, and observed that many ideas were being generated when people came together to share ideas rather than when working alone.
  • Ideas can be ‘too innovative’ — look at the Apple Newton.
  • Evolution is not gradual. It is characterised by periods of relative calm, followed by bursts of speciation when there is opportunity. This is called “Punctuated equilibrium“. For example, look at tablet evolution, pre- and post-iPad.
  • Can innovation be too fast? RNA viruses mutate rapidly, but not so rapidly that they lose self-identity (error catastrophe.) Could our desire to innovate ultimately be harmful? Can users/consumers keep up with the pace of change (gadget fatigue)?
  • Geographical isolation. The act of forming different species (speciation) often occurs when a population is separated. In terms of design, this manifests itself as cultural differences.
  • Evolution and behaviour. Can also apply evolutionary thinking at the level of individual behaviour.
  • Optimality theory. Behaviours are subject to natural selection, so animals will tend to behave in ways that are close to optimal.
  • Relationships and cooperation – technology is making us much more social.
  • The Prisoner’s Dilemma is a classic game theory problem, with well-documented solutions. What does this mean for UX? Can relationships with businesses/brands learn from the prisoner’s dilemma? Initial courtship vs long relationship. Reward points as a long-term strategy (e.g. Tesco).
  • Signalling and status. Some animals signal their quality to potential mates through visual displays (e.g. peacocks). To be effective, these need to be ‘honest’ signals (i.e. costly to produce). They are effectively a handicap as they may reduce ability to carry out other tasks (e.g. flying, foraging, etc.) — “The Handicap Principle.” Are there equivalents in design?
  • Optimal foraging theory. Animals forage optimally (or nearly). Prey and patch choice can be predicted and tested experimentally. Works for human hunter-gatherers too.
  • Information foraging theory. Humans as “informavores”. Foraging theories can be applied to people searching for information (Exaptation). Key thing that has come out of this work is the concept of information ‘scent’ — trigger words and feeling confident you are on the right path. People behave in a very similar ways to animals.
  • Jakob Nielsen said: “The two main strategies are to make your content look like a nutritious meal and signal that it’s an easy catch. These strategies must be used in combination: users will leave if the content is good but hard to find, or if it’s easy to find but offers only empty calories.”
  • Final thoughts: There is a lot of insight about the broader context of what we do that can be got out of this. The idea that when we come up with designs that we are putting them into this psychological landscape, with selection pressures acting upon them, is a powerful one.

UX Cambridge: Adrian Howard, User Experience Does Not Exist

Adrian Howard is a Specialising Generalist. He runs quietstars.com in the SW of England, and tweets as @adrianh.

  •  There is a history lesson about UX we don’t talk about, how UX evolved. Before the late 50s and early 60s, there was no HCI; computers were used in government and large businesses, they were huge things, and it made more sense to optimise the people to use of the computer rather than the other way around. Closest to UX was user research into how people used computers, e.g. time/motion studies.
  • In the 60s-80s: A lot more computers were being used in business; IBM et al were making computers for business, they were being used in telecommunications, etc.
  • “There is no reason anyone would want a computer in their home.” Ken Olsen said in 1977. And it was true back then, but they were being used more regularly by actual people in businesses, etc.
  • In the early 80s there were analysts who watched people using computers and tried to work out how to make the processes better.
  • By the late 70s and late 80s, computers went from the province of geeks, to technology-enthused small children having them, to people who just wanted to play games having them. More people were trying to do things like writing letters, balancing finances, playing games, writing computer games.
  • We started seeing more and more things that we would now recognise as UX: paper prototyping, user observation, etc. We had different words for it (“Making things user-friendly” back when the phrase actually meant something and wasn’t just a buzzword).
  • In 1983, Don Norman was the first one to use User Experience Architect (UEA) as a job title. He said he invented the term because user interface was too narrow a definition.
  • Jesse James Garrett released a diagram: The Elements of User Experience – but nobody ever talks about the small-print. It states that “this picture is incomplete” — the diagram doesn’t cover what is missing; the development process and roles involved in UX; it just focuses on key considerations that go into the development of user experience.
  • Job Titles are changing: UX Architect, UX Designer, UX Strategist, UX Champion, etc. Met someone who was an “Experience Modeller”… they didn’t like it either [laughter]
  • Book recommendation: Communities of Practice, Etienne Wenger – talks about groups that share a concern or passion about what they do, and learn to do it as they interact regularly. That is what UX is.
  • UX is a Reification – a concept, like UX, The Economy, Hollywood — that we talk about as if they were real things, but they are not things you can grasp and hold; they are a set of concepts. When people start treating the concept as something that is real, odd things start to happen.
  • Treating UX as a thing has good and had aspects. It brings us all together (e.g. at this conference); but also excludes people (we have a strong idea about what is and isn’t UX and spend a lot of time arguing about it).
  • T-Shaped People Lie: the idea of ‘T-shaped skills‘ is a gross over-simplification of where people’s skills and knowledge are. It assumes a depth of knowledge that is independent from domain, and ignores the fact that people can have skills that don’t fall under what their job title might suggest.
  • Roles are not discrete. Don’t define UX; instead think about ‘the things that need to get done’ to build a great product. Pretend you don’t have a job title (“I’m The Designer”) — how do you define/explain yourself to the rest of your organisation? Pretend nobody on your team has a job title; how would that change your conversations? Pretend job title don’t exist at all; what do we have to talk about instead? What values do we have to look for in the people we work with?
  • UX in the future: The expansion of use of computers isn’t stopping, everyone is writing software, the space where software is being used is still expanding very fast; but the UX community isn’t expanding as quickly. Companies are desperately searching for information/people to do UX well. Therefore people outside of our UX community are going to be doing more UX things, e.g. developers.
  • We have models of working that involve people that just do UX work; that’s a model I’m not sure is sustainable. More people are building more software all the time, and there aren’t enough UX professionals.
  • While our community has great things and massively useful knowledge, we are sometimes blinded about how we want to work. We want control. That’s going to hurt us; the fuzzy border around skills that we’ve termed UX doesn’t exist, it’s not a real thing. Unless we start opening up our community and start bringing in the other parts we need to build great user experiences (the things that aren’t on JJG’s diagram) we are going to fade away.
  • We need to start acknowledging the things that are important, and start building a community that can carry on into the 21st century.

UX Cambridge: Jeff Gothelf, Better product definition with Lean UX and Design Thinking

Jeff Gothelf is an interaction designer working for Neo in New York. He blogs at his personal site and tweets as @jboogie. His book Lean UX is out next March from O’Reilly.

  • Going to discuss defining better products using techniques of Lean UX and design thinking; how to use the ideas and philosophies behind these methodologies for better product definition and to build better products.
  • Case Study: Plancast (a social event sharing site) — had a big launch, write-up on TechCrunch, VC interest. They spent five months building the service, but it didn’t live up to hype and they sold after 3 years. The founder wrote a post mortem on TechCrunch: initial feedback made them think there was lots of interest; they measured ‘vanity metrics’ (registrations/visits) which gave them a false sense of success; the business plan was based on intuition, with no proof that the market was there. “Most social networks feed primarily on vanity… Sharing plans doesn’t present the same opportunity to show off and incur the same subsequent happy feelings.”
  • Key questions they should have asked: How long do we wait before we launch? (They took 5 months — was this too long?); How do we define the right requirements for our product? What signals are we looking for from the market? (AKA: How do we define success?)
  • All questions that can be answered with Lean UX and Design Thinking.
  • Requirements are really assumptions — guesses at what will meet the market’s need, unproven and untested).
  • If you define your product by ‘looking into a crystal ball’, you’re doing it wrong.
  • If you can build a culture that accepts that requirements are assumptions, you can build a culture of experimentation, where failure is embraced.
  • If requirements are really assumptions, we change our language: “We know” becomes “We believe”; “Let’s build it” becomes “Let’s test it.”
  • Design Thinking can help! “The ability to combine empathy for the context of a problem, creativity in the generation of insights and solutions, and rationality to analyse and fit solutions to the context.” Applies to the entire team.
  • Lean UX: “The practice of bringing the true nature of a product to light faster, in a collaborative, cross-functional way with less emphasis on deliverables and greater focus on a shared understanding of the actual experience being designed.”
  • Fundamental principle: Prioritise learning over growth. Find the right answer first, then scale it out.
  • Early product definition assumptions include: Who is our customer? What pain points do they have that our products/services solve? How will our product/service solve their pain points? What features are important? What is our differentiation (how are we going to win/make money)?
  • …which we then turn into hypotheses: “We believe that [building this feature] [for these people] will achieve [this outcome].” (Measurable business metric.)
  • “We will know we are successful when we see [this signal from the market].” == Test Driven Product Development.
  • Turn these hypotheses into experiments.
  • Case Study: TheLadders. The CEO had a ‘shower epiphany’ and decided every user would have a ‘personal job search assistant’ at the company. Lot of work — website, call centre, phone systems — months of work, based on his intuition that it would work. Nine months in, customer satisfaction/retention/sales not affected. Had a requirement; should have been a hypothesis, which becomes a starting point from which we begin. Gives us success criteria and suggests tests we can run to figure out if it might work.
  • How to test ideas: “Landing page to nowhere” to capture intent. Could have run a manual process on a small number of people. Could have focused on what outcome we were targeting.
  • Always ask yourself: What problem are we trying to solve? How will we solve it? How do we know it will work?
  • How does this change the way a team approaches a project? Measure of progress changes from output to outcome. You can launch features and they can still suck. Focus on driving team towards outcomes — which scale up towards impact (e.g. revenue).
  • Many companies currently manage to output, need to focus on outcome and not task teams with responsibility for impact.
  • Case Study: TheLadders. We were tasked with improving email response rate. Cross-functional team, small sprints, iterating, testing, qualitative and quantitative data. Pushed response rate from 14% to 68%.
  • For every hypothesis, as you collect data you end up with three options: Kill it; pivot; or double-down.
  • Case Study: Lenddo (micro-lending with the concept of a social-network based credit score). Users weren’t returning to add people to their network. We did usability testing with Balsamiq prototypes. Got feedback from the field before we committed resources, mitigating risk by not building things that people don’t want.
  • Case Study: Sesame Street. Wanted to enter the tablet education market; a new market, heavy investment, high risk, long term initiative. We treated the entire case as an assumption: wanted to make sure they were putting their money into the right project in the right way. Did class observation, watched teachers and students interact all day; wanted to see if teachers had time to look at a tablet; did the kids know what to do with these tools? Is there a viable market? Version 1: PDF content test on a tablet. Interviewed teachers before and after and observed. Learned a lot about content, how device works within context of classroom. V2: Card-sorting with features/content with teachers. V3: Clickable prototype to validate workflow.  Not a single line of code written.
  • Case Study: <redacted>. Subscription service to high-end customers that function in groups. Growth had flatlined, so they wanted to pivot the product to appeal to a broader audience, including more individuals. Risks: Significant investment, cannibalisation of current members, no guarantee new audience was interested. How will we know we’re on the right path? Made a clickable mockup on iPad, went to a convention and observed users. Only 5 days worth of effort.
  • Case Study: Agile UX NYC 2012. There are a lot of up-front costs when running a conference. We didn’t know if we should do this; would anyone attend? We did increasing levels of fidelity of testing; first we put up a launch page to capture email signups; next we put up an EventBrite page to sell tickets (no speakers, no venue). Tickets started to sell; proved the market was there and worth investing in.
  • Lean UX and Design Thinking are not just for designers. Cross-functional teams bring perspective to the product definition process from all disciplines; bring increased empathy for the user; a greater level of ownership in what you’re building; everyone understands the ‘why’ behind every initiative; you learn more, and move faster, by sharing the discovery and creation process.
  • Case Study: PayPal. Very silo’d organisation, difficult to have conversations across disciplines, and a very serial, waterfall process. Now they are literally breaking down the walls between teams, starting to work in cross-functional teams, learning how to work together and deliver products faster. Seeing benefits of working closely with developers, PMs, designers, and other departments. Working faster, focusing on outcomes instead of a set of features.
  • Defining the right product reduces the time spent building the wrong product; builds team-wide momentum and shared understanding in a recursive loop (it is more exciting to work on something for two weeks then launch it than work on it for 18 months); and ensures resources are spent on the right initiatives.
  • In summary: Requirements are assumptions; focus on outcomes; work together in cross-functional teams to come up with ideas; test those ideas ruthlessly.

UX Cambridge: Sarah Lacy, Playing Games With UX

Sarah Lacy is a UX and game designer. She tweets at @sarahofsandwich, and her games live in the Utopian World of Sandwiches.

  • As UX designers we like to make peoples lives better — we’ve seen massive change in technology and neuroscience in the last ten years. We’re at the forefront of a new understanding of people.
  • Games design has also changed a lot (cf. Sensible Soccer vs FIFA13).
  • We have all this understanding of how people work and what motivates them, and also have new hi-tech ways of meeting their needs.
  • The only constant throughout all of this is: How can we create meaning and purpose for the people we design for?
  • We hear about how games are bad for people, violent, or bad for your health; but recent studies have shown that games are  developmentally, cognitively and emotionally beneficial.A study in Texas showed that gamers were better than surgeons at skills relating to surgery.
  • A New Zealand study aimed to create a computer game that could cure depression; they created Sparx, with a 44% cure rate compared to 26% cure rate with traditional medicines.
  • There are lots of studies into the social benefits of games; they make you feel closer to the people you play with, make it easier to relate to people; a study showed that girls who played games with their parents were less aggressive.
  • The perception of games among parents has also changed in recent years; now they are seen as a way to encourage the family to spend time together.
  • Most games don’t aim to have these effects — imagine if they set out to do good!
  • What makes a good gaming experience? Requires defining what an experience is — something that happens to someone, can be crafted or guided, but is ephemeral. A great experience makes you feel alive and fulfilled; if you want to get people to spend time doing something, it has to feel worthwhile.
  • A book or film is a consistent experience; a game is a different experience each time. The people who play it are participants in the outcome. In any one session, a player can be happy, sad, angry, frustrated, bored — the sense of engagement is what you’re looking to encourage.
  • Swearing is a positive outcome of a game playtest — the player has completely lost their inhibitions and only cares about what is happening in the game.
  • Csikszentmihalyi wrote The Psychology of Optimal Experience. He interviewed creative people and discovered many talked about getting into a ‘State of Flow’ — the exact right balance of challenge and skill — this applies to computer games. With a game you can design an experience that causes a Flow experience to happen to players.
  • Games are a series of unnecessary challenges that you need to undertake, and involve: Autonomy: what happens if I do this thing? Mastery: I want to do this thing to get better at it. Purpose: I believe I can make a difference here. You are always the hero of your own story.
  • Leads onto Joseph Campbell’s The Hero’s Journey. Narrative patterns of stories apply to games; but you are always the protagonist. You choose between safety and risk, and are rewarded and experience growth. Within a game you’re safe and can play around with possibilities.
  • When you’re playing a game, stuff happens to your brain. In Don Norman’s Emotional Design, he discusses how what you’re feeling affects what you’re thinking (“Affective Thinking”). When you’re relaxed and happy, you are more open to learning, creativity, curiosity, and more able to see the bigger picture, solve problems, improvise and create.
  • Dopamine isn’t released when you’re rewarded, it happens when you want something. Playing a game is a constant loop of wanting and rewarding = neurotransmitters to make you feel good.
  • Shigeru Miyamoto (creator of Zelda and Mario) — when he talks, he sounds like a UX Designer. He says he really wants to make awesome experiences.
  • The notion of experience design is a lot broader now than it has ever been. The experiences we deliver to people in ten years will be completely different. When we design experiences for people we focus on emotion, context; those are the things that are going to endure. In ten years time when the technology has changed, those are the things that will still matter.
  • As UX Designers we are emotion architects; we create and develop vision, and seek to innovate, understand and empathise, and encourage players or users to live their lives to the fullest. What I came to realise is that game design and UX designer is the same thing. Game design is experience design.

UX Cambridge: Harry Brignull, From Print to Digital: designing The Week Magazine’s iPad app

Harry Brignull is a UX Consultant for Brighton consultancy Clearleft. He also maintains the DarkPatterns.org site, blogs at 90 Percent of Everything, and tweets as @harrybr.

  • Had a ealisation about our industry: We are all big, fat liars. We have an unwritten agreement about how design happens in our studios — we pretend its neat, never falters, proceeds towards a destination. Agency websites feature ridiculously good-looking wireframes; studio quality photos of our workshops. We pretend it happens in a tidy, linear fashion.
  • In reality it is a massive landscape of possibilities where we have no map, so we have to explore — and that involves red herrings, dead ends, fruitless avenues, and insights that are obvious in retrospect. Early stage design is messy and involves mistakes. We need to start being honest about this so our clients understand what this is all about.
  • The Week Magazine is a summary of the world’s top news that week; subscriber count has always been growing since they launched.
  • Our first big insight, then, was that we are not being brought in to reinvigorate a dying publication; they had a winning formula, we have to not screw it up.
  • Looked at their layouts across the years — it has never changed. Main story always laid out in a grid – event, editorial, commentary, future. We realised it’s not lazy, it’s clever — once you’re familiar with the layout, you can consume the articles faster.
  • How much of this can you fit on an iPad screen? Tiny proportion when compared by pixels on an iPad 2. Strength of the print edition is that it is lightweight and scannable — the content isn’t going to fit onto the iPad screen.
  • Trying to mimic a print version using a multi-column layout gives users a staccato reading experience, with 4-6 words per line.
  • The MailOnline iPad app was so complex it launches into a 19 page tutorial on first run.
  • The client had heated discussions about their goals for their app — only agreed that we had to not screw it up.
  • Did hours of interviews, then a stakeholder workshop — had low opinion of them before, but true valuable output is in shared vision it creates. Did empathy maps/persona sketches, then UI sketches; reviewed sketches with reference back to the empathy maps.
  • Useful, but not for the reason you’d expect. The Romeo & Juliet effect is when a barrier is placed between a person and their desires, the object becomes more alluring — it happens to clients when they have a design idea that never gets implemented, and can lead to radical new change requests partway through. The workshop avoided this, as it meant all those ideas had been explored and rejected already.
  • List of ideas derived from the workshop were all standard things/truisms — but as they came from the stakeholders, they had a sense of ownership.
  • Information Architecture: We need section pages with excerpts of articles; Contents, Section page, Article page.
  • Advertising team wanted ads to appear in relevant sections, we wanted to avoid ads altogether. Pitched idea of full-screen ads appearing between section pages.
  • Made an iOS native app, took it into usability testing. Made the classic architects mistake — designing for fictitious user behaviour that only exists in our heads. Users were casually flicking back and forth between sections (causing the ads to appear much more often), not getting the idea of the three-tier IA, and some that would get down into an article would then get stuck.
  • The feeling of not understanding how your users can be so dumb is actually denial that your design decisions have been so wrong.
  • Problem: Articles pages were too similar to section page, we were not giving enough emphasis to the transition between the two levels.
  • Realised we could use two-pane layout like Apple Mail, with sections on left and the article on right — now we have 2, very distinct, IA layers.
  • Second round of usability testing; all problems solved.
  • We still make some mistakes with gestural UI. The map-based interface used a different UI for moving through articles, which contrasted with the rest of the app and was disconcerting to users. You have to evaluate your interface in context — the whole is greater than the sum of its parts.
  • What made the project successful was how everyone reacted after the first round of user testing. We were lucky to have a client that understood good design process involves mistakes and wrong turns. No mistakes means you’re not exploring or trying anything new.
  • We all stand to benefit by being a lot more honest about how we do design, so next time you’re writing or presenting — don’t be scared, just tell it how it happened.

Harry’s own write-up of his presentation can be read here:

http://www.90percentofeverything.com/2012/04/20/from-print-to-ipad-designing-a-reading-experience/

UX Cambridge: Vasilis van Gemert, New Smarter Defaults in Web Design

Vasilis van Gemert is a Dutch developer living and working in Amsterdam. He is currently the Principal Front-End Developer at Mirabeau and a member of the Fronteers board. His personal site is vasilis.nl, he posts links daily at dailynerd.nl, and tweets at @vasilis.

Edit: You can now access the slides from Vasilis’s talk on his website.

  • More and more you hear people say the web has changed – but how has the web changed?
  • The size of the web has changed; we’ve gone from 640×480, then 800×600, now it’s 1280, but also 320×480 — the web isn’t growing any more
  • Everybody has a mouse — except for everybody that doesn’t
  • Everybody has broadband — except for everybody that doesn’t
  • All monitors are calibrated — only those of visual professionals
  • Computers get faster every year — except for those that don’t (and we want stuff that lasts for years)
  • The Dao of Web Design was saying the same thing years ago
  • futurefriend.ly described how you could develop for the future (but basically said “We don’t know”)
  • Old Kindles are good ways to test contrast of designs
  • Last month, 60-70 different mobile devices entered the market
  • Going to talk about some new defaults positions we should consider for interaction design, visual design, content strategy, functional design
  • New default: Touch First – a standard dropdown menu with a touch device doesn’t work (there is a default link for the top-level, click area is too small for fat fingers. Redesign, make bigger links, suppress the top-level link. Never forget the keyboard, don’t remove the focus outline
  • Think in layers – progressive enhancement (“is a principle, not a technique”)
  • On the web we have to support old browsers, modern browsers, future browsers, robots, humans, small screens, fat fingers, etc.
  • The web design stack: content, typography, layout, paint
  • Content will work for everyone, any browser. Typography works just about everywhere (small screens). After that let’s think about layout.
  • New default: Small Screen First
  • Expanding a website to fill more space is easy, but shrinking to a small screen is hard – forces you to focus, what’s really important, first things first
  • Brad Frost’s Ish (http://bradfrostweb.com/demo/ish/) to test sites at different screen sizes
  • It’s up to the visual designer to decide breakpoints — never let the developer decide these things [laughter]
  • Showing a video of filling in a non-optimised form on iPhone (scrolling, wrong keyboards) and improved version (top-aligned labels, html5 input types)
  • New default: Content First
  • How we used to make websites — a logo, navigation, sub-nav, widgets, footer, then cram content into space left over
  • Now we start with the content… and then ask yourself; do we need widgets, sub navigation, header, a logo? (example – all blogs used to have a sidebar, now the ‘default’ is to not have a sidebar)
  • If we do need these things, do they need to be in the place where they are? Logo is in the most important, expensive place. Header is huge — but people come for the content, not for your header
  • Browsers are our friends, not enemies (mostly), this means clean code, this means we can actually redesign a site — we always talked about redesigning with stylesheets only, but it was never a reality due to browser issues; now it could actually be possible
  • New default: CLI First – the web is not just articles, what devices will we use in 2 years?
  • Use the command line – test your app before you design it (see Luke Wroblewski’s article, discussing how they built and tested the API before they designed the site) — it’s a really interesting approach, so find a good nerd to work with
  • A solid API also lets others do the work, and they can make things you don’t have the time or imagination to make

Sketchnotes of the session by Jenny Willatt:

Sketchnote of Vasilis van Gemert talk at UX Cambridge 2012

UX Cambridge: Caroline Jarrett, How to find out about the usability of your website using a survey

Caroline Jarrett is a usability consultant. She tweets at @cjforms.

  • Recommended book: Letting Go of the Words by Ginny Redish
  • “Can a usability test just use a questionnaire, no observation?” (Audience: you need to see what they do, not just what they say; observation gives us context, avoids bias)
  • Surveys have inherent bias – people will say what they think you want to hear
  • It’s not a usability test unless it’s got some observation in it
  • The more interesting question is: Can we use surveys to assess usability of our websites?
  • Survey data can aid by triangulating between survey data and data from elsewhere (e.g. user testing)
  • Surveys can assess: effectiveness at task completion; satisfaction; demographics (stuff that can’t be tracked with analytics)
  • What is “the product” that we are assessing? Is it the website, a section, a page?
  • Net Promoter Score (NPS) — “Would you recommend us to a friend” — expands ‘the product’ up a level to be ‘the brand’, but can be horribly muddied if you try to fudge the question
  • Survey Tip: Ask one question at a time
  • Best thing you can do with surveys is looking at goals: “what did you come to this website to do today?”
  • Survey Tip: Find out about users’ goals
  • There are other goals to consider: What the organisation wants to achieve, What are our aims in doing a survey
  • Establish your goals for the survey (what are the questions you need answers to)
  • Types of survey goals: Exploratory (don’t know what is out there, so we send and hope or use a website popup. If you don’t know anything, any answers are better than no answers, as long as you don’t try using them as descriptive statistics with them); Comparative (explore trends, compare before and after – great for looking at trends, but you have to use the same questions every time, therefore you have to get the questions right first time); Descriptive (you know what is out there, go and count them — e.g. national census — got to do this properly with balanced sampling to avoid bias and measuring error); Modelling (find factors that show cause and effect – you’re seeing behaviours, trying to find out why)
  • You can combine types of survey – e.g. cohort studies use comparative, descriptive and modelling together
  • Examples of poor survey questions: poor defaults, double questions (two questions stuffed into one), options that we should already know the answer to via tracking, use of jargon, grid of radio buttons (contributes to user dropout)
  • Bad surveys can have a negative effect on brand
  • Survey Tip: Interview first (talk to your users – good surveys always start with interviews, so you can understand how people want to respond to your questions)
  • Survey Tip: A successful survey is a process that involves loads of testing