Get Started. It's Free
or sign up with your email address
User Experience by Mind Map: User Experience

1. UX is ... a person’s perceptions and responses that result from the use or anticipated use of a product, system or service.

2. Elements

2.1. Focus should be on 20% of the product that provides 80% value. Essential part of the product should be exceptional, rest could be acceptable.

2.2. Findability

2.2.1. Search engine strategy

2.2.2. Marketing

2.2.3. Brand management

2.2.4. Naming

2.2.5. Word of mouth

2.3. Utility (Usefulness)

2.3.1. Appropriate for purpose

2.3.2. Expected functionality Ensure the suitability of a task

2.3.3. Expected information Focus on information of interest to users, not on the things you want to promote Communicate immediately at the top of the page that your content is indeed interesting and useful to users

2.3.4. Uniqueness

2.3.5. Differentiation

2.4. Usability

2.4.1. Usability is ... the extent to which a system, product or service can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use.

2.4.2. "Nowadays acceptance for bad Usability decreases permanently"

2.4.3. Usability experts prioritize the problems with impact to the user, product managers prioritize with impact to the achieved result

2.4.4. Learnability Simple things should be simple, complex things should be possible. In most products, consumers value practicality and simplicity over abstract concepts and emotional obstacle courses. Choose appropriate UI patterns Strive for consistency “users spend most of their time on other websites than your site.” “The most important consistency is consistency with user expectations”—William Buxton Use standards Use signifiers Over time, strive for continuity, not consistency Adhere to Gestalt Principles UI Text Styleguide UI Text Standard Konsistenz mit der Plattform Konsistenz mit früheren Versionen Konsistenz mit Marke If your way offers no clear advantage, go with what your users expect Use affordances Things that are not only designed to do something, but that are designed to look like they are designed to do something. A button that looks like a physical object you can push, for example, is an affordance designed so that someone unfamiliar with the button will still understand how to interact with it. Use animated transitions The user feels time passing faster than it does Acceleration of animation makes its duration feel shorter Use Active Discovery to guide people to more advanced features Progressive Revelation Group 5-9 elements Give feedback Dopamine from positive emotions improves learnability

2.4.5. Efficiency Enterprise software: It has to be designed not for 'understanding', but for rapid repeated actions. Performance Waiting times Time to complete a task Look at the user’s productivity, not the computer’s Navigation Wo bin ich? Woher komme ich? Wohin kann ich gehen? Warum sollte ich da hingehen? Consider Fitts' Law Ensure controllability Ensure self-descriptiveness Smartphone: Consider the thumb zone Touch: Adhere to minimal element sizes Filter: Do not refresh too soon Smartwatch: Use well-known gestures Cognitive Workload “The trick is to find the middle ground—the ‘sweet spot’—that enables people to benefit from variety and not be paralyzed by it. Choice is good, but there can be too much of a good thing.”—Barry Schwartz Emphasize the Call To Action (CTA) Eleminate unnecessary features and then hide what you can't eliminate Make the impact area of actions clear If the user cannot find it, it does not exist Reduce elements Reduce the need of interactions Keep users in autopilot mode Chunk in 4 parts Categorize well Reduce choices Reduce Opportunity Costs Keep the expected work load low Assess task load with NASA TLX Smartwatch: Avoid complex inputs Readability Make text size changeable Use short sentences Write in active voice Smartphone: Show most important info on the top 2-screen-heights Comprehension Use an inverted-pyramid writing style Use pictures Build on existing mental models Standardize dialog texts Overview first, zoom and filter, then details-on-demand Individuality Allow Individualization Device inertia Momentum behavior Selective attention

2.4.6. Errors Error messages should actually help Ensure that users never lose their work Offer error tolerance

2.4.7. Memorability Use metaphors Choose metaphors that will enable users to instantly grasp the finest details of the conceptual model Do Icon Testing Use a new object when you want a user to interact with it in a different way or when it will result in different behavior Offer users stable perceptual cues for a sense of “home” Try making your concepts visually apparent in the software itself

2.4.8. Accessibility Content / presentation separation WCAG-2 /section 508 compliance Standard compliance Browser compatibility Response time Besides colors, use secondary cues

2.4.9. Satisfaction Use priming

2.4.10. Consider the Kulturmodell von Hofstede

2.5. Joy of Use

2.5.1. Aesthetics "It has been shown that perceived aesthetics has a correlation with the perceived usability" Senkt Stresspegel und vermindert Fehler Why does one choose to use Gmail over Yahoo, Medium over Blogger — if the features are 99% the same? It’s definitely not about disrupting usability standards. It’s about that additional layer of sophistication that can only be achieved when you put enough time and brainpower into the tiniest details, the most subtle animations, the most elegant transitions – not just for the sake of creating whimsical dribbble shots. Graphic elements Colorscheme and contrast Typography Flat Design 2.0 Media use Don't overshoot: Life is a much more stressful and demanding environment than an app’s delights and subtle effects.

2.5.2. Innovation

2.5.3. Challenge Rewards Use rewards for hardest tasks Loading Screens 404 pages Case studies

2.5.4. Credibility Verifyability Prove with Community Conformity Tone of voice Use good copy Trustworthiness Make clear what you will store & protect the user’s information Sei supernett

2.5.5. Exclusivity Symbolism Gruppenzugehörigkeit Status Hedonic Quality

2.5.6. Positive Emotionen erhöhen Anwendungserfolg

3. Phases


3.2. Research

3.2.1. Die Gestaltung basiert auf einem umfassenden Verständnis der Benutzer, Arbeitsaufgaben und Arbeitsumgebungen

3.2.2. Das Gestaltungsteam vereint fachübergreifende Kenntnisse und Gesichtspunkte

3.2.3. Landscape

3.2.4. Generate ideas 635 Method Braindumping Brainstorming Passt die Idee zu unseren Zielen? Hilft uns die Idee dabei unsere Geschäftsziele zu erreichen? Ist die Idee organisatorisch machbar? Stehen die notwendigen Ressourcen und das notwendige Know-how zur Verfügung? Ist die Idee wirtschaftlich machbar? Sind die erwarteten Erträge höher als die Aufwände für Forschung und Entwicklung? Können die notwendigen Mittel beschafft werden? Ist die Idee zeitlich machbar? Kann das Produkt innerhalb eines nützlichen Zeitrahmens entwickelt werden? Beispielsweise auf ein wichtiges Marktereignis hin? Ist die Idee technologisch machbar? Stehen die notwendigen Technologien für die Entwicklung eines solchen Produkts zur Verfügung? Ist die Idee rechtlich machbar? Gibt es Patente, Normen oder Vorschriften, welche es unmöglich machen, ein solches Produkt auf den Markt zu bringen?

3.2.5. Sort Card Sorting Affinity Diagramming OO Analysis Use cases Abgeschlossene Handlung mit sichtbarem Resultat Aufbau eines Use Case Scenarios Use case slices UML use case diagram UML sequence diagram Entity-Relationship-Modelle Methode zum Entwurf eines semantischen Dantemodells Mehrwertige Attribute haben eine Dopelllinien-Umrandung Abgeleitete Attribute haben eine gestrichelte Umrandung Zusammengesetzte Attribute gliedern sich in Unterattribute Kardinalitäten

3.2.6. Prioritize Impact and Story Mapping MoScoW Method Must Should Could Won't Action Priority Matrix Business Value Turnover Savings Define Relevance (Kano) Basis-Merkmal Leistungsmerkmal Begeisterungsmerkmal Unerhebliches Merkmal Rückweisungsmerkmal Top task analysis

3.2.7. Observe/Understand Start by not being a stakeholder! Process Mapping Hypothesis Testing "Declaring our assumptions up front and testing those that present the highest risk are key steps in defining the problems a product or service team must solve" “It’s healthy, but rare, for a team to be able to list out their assumptions, so the team can determine what questions they need to ask along the way to better define needs as part of user understanding, as well as discover insights that inform product and service design" 1. Have a conversation and list out everyone’s assumptions. 2. Determine how you can turn those assumptions into questions. 3. Have the team map their questions to research approaches that would enable the team to discover answers and validate or challenge specific assumptions. 4. Through greater user understanding, determine whether these assumptions lead to other assumptions that may provide additional questions that would lead to further discovery over time. Have a hyptohesis testing phase before implementation (e.g. in Scrum a permanent Pre-Sprint) Survey Halte Umfragen kurz Behindert dich irgendetwas darin, deine Arbeit zu erledigen? Was würde dir helfen, produktiver zu sein? Gibt es einen Bereich deines Jobs, in dem du dir mehr Unterstützung wünscht? Gebe Feedback Interview O'Reilly Webcast: Interviewing Users - Uncovering Compelling Insights Bedürfnisse hinter Lösungen erkennen Glaube nicht, dass Kunden immer alles wissen Hinterfrage Prozesse immer Nutze Forschungsdaten um Aussagen zu hinterfragen A Day in the Life Understand what their current tools are, how they organise their workspace, what their frustrations are and what they’d like to improve. Involve them in the product ideation. By doing that, they’ll bring a huge amount of knowledge to the table and they’ll naturally transition towards the new tool you’re designing for them Requirements elicitation Automated Requirements Elicitation The Problem Brief 1. Problem Space 2. Goal Space 3. Consequence 4. Gaps and Barriers Focus groups Customer Journey Map Epic Storyboard Personas Develop empathy with stakeholders Diary studies Analytics report Lead Users Extreme Users Why? Not what! Mental models Logik, die erklärt, wie Dinge funktionieren und wie diese verknüpft sind

3.2.8. Competetive analysis report

3.2.9. Conjoint Analysis

3.2.10. Contextual Inquiry

3.2.11. Presumptive Design

3.2.12. Content Audit

3.2.13. Define KPIs with target values

3.2.14. Define Output, Outcome and Impact It would be better to instead measure progress in terms of new organizational behaviors created by their work. For example, what is the ratio of users of the new system vs the old system? How many of those users are able to use a new business process as a result of the initiative? Are the new business processes unlocked by this initiative ones that in turn generate positive outcomes? Instead of planning for some mythical “feature-complete” future state (remember, software is never complete), they can plan to deliver value early, then enhance that value through continuous, incremental delivery.

3.3. Design

3.3.1. Umso mehr Artefakte, desto bessere Ergebnisse

3.3.2. Unterstützt dies den Benutzer wirklich?

3.3.3. Do not create alternatives You are the professional and you should be able to justify all your decisions in the one option you have created.

3.3.4. BRDs Write user stories Abgestimmt Eindeutig Notwendig Konsistent Prüfbar Realisierbar Verfolgbar Vollständig Write in MVP chains Merkmal Vorteil Persönlicher Kundennutzen Consider all interfaces Consider exceptions Separate business from technical solutions Do not describe solutions Add test cases ("branch coverage") Consider Model Driven Architecture Add Business Case 1. An honored rule of thumb is to take their hourly wage and multiply it by three to include all the other overhead associated with an employee, from rent to heat, lights, computer support, etc.) 2. Multiply the overhead cost x the number of affected employees x the time an activity takes x the difference in productivity, positive or negative, in carrying out the activity to find the actual cost of a change. 3. A positive number will help you sell your group and your design. A negative number will help your company from making a costly mistake. Exclude special user stories, if necessary Nicht-funktionale Anforderungen FURPS Consider quality metrics Eindeutigkeit und Konsistenz Klare Struktur Modifizierbarkeit und Erweiterbarkeit Vollständigkeit Verfolgbarkeit (Traceability)

3.3.5. Mockups Only do mockups if its worth it Schränken bereits etwas den Horizont ein Avoid too sophisticated and hence distracting tools

3.3.6. Co-Creation We tend to think that most of the users are like us. Work with your colleagues beforehand Users are involved in design and development Nicht nur Ihre Mitarbeiter sollten fachübergreifend zusammenarbeiten. Auch Ihre Kunden sind wertvolle Ideengeber und sollten darum unbedingt in den Ent- wicklungsprozess einbezogen werden.

3.3.7. Consider the Elements of UX Bei der Gestaltung wird die gesamte User Experience berücksichtigt

3.3.8. Design Studio Generating lots of ideas Giving the whole team—and/or users—a voice in the design process Getting noncreative stakeholders to empathize with design challenges

3.3.9. Wireframes Ensures Focus

3.3.10. Prototypes Paper Interactive "The best way of having a good idea is having a lot of ideas"

3.3.11. Flowchart

3.3.12. Sitemap

3.3.13. Five Dimensions 1D: words should be simple to understand, and written in such a way that they communicate information easily to the end user. 2D: visual representations are all graphics or images, essentially everything that is not text. They should be used in moderation, so as to not overwhelm. 3D: physical objects or space refers to the physical hardware, whether it’s a mouse and keyboard, or a mobile device a user interacts with. 4D: time is the length that the user spends interacting with the first three dimensions. It includes the ways in which the user might measure progress, as well as sound and animation. 5D: behavior was added by Kevin Silver in his article, What Puts the Design in Interaction Design. It is the emotions and reactions that the user has when interacting with the system.

3.3.14. Follow your Design Strategy Designprinzipien helfen Entscheidungen zu treffen Designprinzipien öffentlich machen

3.3.15. Galeriemethode

3.3.16. Styleguide

3.4. Evaluation

3.4.1. Internal Ein Experte deckt statistisch betrachtet gerade mal 25% aller Probleme auf, wogegen drei Experten bereits über 70% der Probleme identifizieren (Nielsen, 1992) Internal Survey Internal Review Wer da ist ist da, wer nicht da ist stimmt zu Keine Rückmeldung ist Zustimmung Feedback Workshop Feedback Matrix Inspection ISO Standards The mother of all usability checklists Psychological Usability Heuristics Nielsen Heuristiken (1994) Enhanced Nielsen Heuristics Quinones D. - Heuristics for transactional web apps (2014) Style guides (own or external) Usability Heuristics for transactional web sites Usability Checklist (Web) Gestural Heuristics Whiteboard Daily Scrum Expert Review Meeting Minutes Cognitive Walkthrough Untersucht hauptsächlich Erlernbarkeit Annahme, dass der Benutzer immer den kognitiv einfachsten Weg wählt Hallway Test Heuristic Markup Comparative Assesssment

3.4.2. External Survey AttrakDiff IsoMetrics Nach Kano Single Ease Questions (SEQ) System Usability Scale (SUS) Free & Beautifully Human Online Forms | Typeform User Testing Das Verfeinern und Anpassen von Gestaltungslösungen wird fortlaufend auf der Basis benutzerzentrierter Evaluierung vorangetrieben Guerilla Testing Interview Customer Meeting A/B Testing Observation Complete Observer Observer as Participant Participant as Observer Complete Participant Google Analytics Feedback System Usabilla Get Satisfaction Heatmaps Experiment GOMS

3.4.3. Summarize Discussion Documentation/Wiki Decision of Next Step RoadMap

3.4.4. Establish Data-Driven Success

3.4.5. Check KPIs

3.5. Der Prozess sieht Iterationen vor

3.5.1. „Die geeignetste Gestaltung für ein interaktives System kann normalerweise nicht ohne Iteration erreicht werden.“

3.5.2. Menschzentrierte Gestaltungsaktivitäten

4. Effects

4.1. Better product

4.1.1. Increased customer satisfaction and loyalty This is extremely difficult to measure, and should be used as a primary cost justification only in extreme cases. That said, one method of measuring customer loyalty is in terms of customer retention. (Important especially in organizations that know when their customers are most likely to defect to a competitor or a more mature product offering.) The calculation takes into account the cost of new customer acquisition and amortizes the cost over the average customer retention period. Increasing average customer retention is a cost savings for the company, and can cost justify UX & usability work related to customer loyalty. The metrics of success will come from sales and marketing.

4.1.2. Deeper insights

4.1.3. Revenue boost Either incremental revenue from add-ons or through an easier sales process, which is typically called "conversion rate" though that often gets mixed up with "website conversions". The metrics for this are typically found in the sales and finance department. Coupled with the estimated costs of usability testing and UX development, you'll be able to work out over what timeframe it will take for the UX work to pay for itself.

4.1.4. Increased retention

4.1.5. Recommendations more likely

4.1.6. Decreased stress level Stress => schnell, aber hohe Fehlerquote

4.2. Reduced costs

4.2.1. Reduced cost of late correction

4.2.2. Reduced training and support costs If customers generate calls or support tickets or other uncompensated overhead costs to the business, then those costs should be measured. The easiest way to do this is how airlines handle the it. When a passenger, for example, calls an agent to check flight status, the airline knows how long that call will last, and based on the average cost/minute for phone agents (including salary, benefits, and overhead like the phone line, office space, electricity, etc), the airline can assign a $ value to the cost of the call. Because airlines handle large volumes of calls every day, if there is an increase of 2500 check flight status calls/day at a cost of $2.00/call (theoretical cost!), then we could expect that would increase uncompensated support costs by $5,000/day. If the airline wanted to do a $50,000 eye tracking usability study to get that number down to 1225 calls/day (assuming a clean 50% improvement), then that usability study would pay for itself in 20 days. Be wary in cases where training and support are part of the company's core business model - otherwise it doesn't make sense to decrease these costs, (i.e., if the company's revenues are earned from consulting)

4.2.3. Increased productivity Most often found when there are large pools of employees completing certain repetitive tasks. Metrics are found in operations, HR, and finance (for overhead items like office space, equipment, etc.) For example, if you optimize the UX on a series of screens so that what was once a 5 minute task is now a 2.5 minute task, then you've increased a person's productivity by 100%. That's huge. HUGE. If the company has 100 phone agents who have an average salary of $40,000 + benefits (~$8,000) (+ an unknown amount for overhead), you could either release or retask those agents on other activities with a savings of $2,4000,000/year. (half of 100 agents x $48,000)

4.2.4. Reduced code maintenance

4.3. Less risk

4.3.1. Reduces the risk of building the wrong thing Though folks who make product decisions often claim an empirical approach to product work is unnecessary, it was found they cannot predict the results of A/B tests, which sort of puts the lie to their claim. Or a PO (or someone higher up) takes requests from user groups, stores them in a backlog, and the focus is kept on work completion

4.3.2. Projects fails without happy users 70% fail because not accepted by the user

4.4. Faster development

4.4.1. Avoids rework Again, this is a function of the number of developers needed to complete project work. Bad UX is often a reflection of poor design and complexity in the underlying code. A hallmark of good UX is the elimination of unnecessary or marginal features. This reduces the complexity of the code base, making it more robust and less buggy. As a wise man once said, "there are no bugs in the code you don't write."

4.4.2. Reduces Development time Measured in terms of development resources and time to market. For example, if moving to a system with design patterns and object oriented CSS will decrease the need for an additional UX hire and 5 developer hires (a reasonable ratio), then that's a cost savings of all of those non-hires salaries + benefits + overhead (computers, software, office space, desk, etc). Similarly, if a strong UX framework decreases the development time from 6-months to 3-months for a project that will increase revenues by $100k per month, then bringing the project to market 3 months early adds $300k to this year's revenues.

4.4.3. UI is major part of Dev Phase

4.4.4. Better ability to deliver to deadline

4.4.5. Reduced development waste

4.5. Higher ROI

4.5.1. Always estimate ROI in terms of annual dollars Of course, all of these increases/savings must be compared to the costs associated with UX, usability, and development endeavors. I recommend that all metrics be stated in the terms of increases/decreases over the course of a year - annualized costs - because that’s a term the folks in budgeting will understand, and a dollar amount that provides the most realistic impact. (Not too much, not too little.) So, if your project is designed to increase revenue by 20% on a million dollar revenue stream, then the dollar amount should be reported as "$200k annually."

4.5.2. Companies focusing on UX peform better than their peers

4.5.3. Spend 10% to get 83%

4.6. Sell UX

4.6.1. Show horror video clips from usability test sessions to executives.

4.6.2. Don't talk about theoretical effects, show them results in your own area.

4.6.3. Start with ... Management Corporate Vision R&D Product Development Process Is there time for user research?

4.6.4. Capture your audience’s attention—using emotion versus logic.

4.6.5. Hold your audience’s attention and maintain their interest.

4.6.6. Understand what benefits a company wants from UX.

4.6.7. Move senior leaders to a favorable action—an offer.

4.6.8. What Sells? Positive emotion simple UX tools everybody can understand listening case studies

4.6.9. What doesn't sell? Representing UX as the only answer Relying too much on ROI arguments Using UX jargon

5. mvc / User Experience / A Short Summary