Test Flashcards
3 types of design that go into making high quality products
Functional design, aesthetic design, experience design
Design process steps
Research-define-design-prototype-validate-build-test
Defines how the product works
Design model
Research method that helps you gather unstructured data with deeper user insights.
Qualitative research
2 different types research landscape
Qualitative and quantitative
A research method in which respondents answer a questionnaire via email or on a website
Online survey
An idea generating and prioritizing technique invented by Jiro Kawakita.
J-K method
A way to assess whether your software adheres the user experience best practice or not
Heuristic evaluation
Refers to how we organize, structure and label the content on our software
Information architecture
Atomic unit of the interaction
Micro-interaction
Objects that allow you to control the product
Controls
What can the product do?
What is it asking user to do?
What does the user need to do first?
Perceivability
It is faster to hit larger targets that are closer to you than to hit smaller targets that are further away
Fitt’s Law
Established ways of doing things. In software design, they are established interface patterns
Conventions
Symmetrical objects appear more orderly and orderly interfaces are easier to comprehend
Alignment
Apps with complex and random workflow
Commerce apps
Types of mobile apps
Utility, process, consumption, commerce
Areas of a web page that users in touch devices can interact with
Tap targets
Navigation on e-commerce apps
Off-canvas
Design method used to present new mental model, complicated flow, updated design before users start to use the app
Onboarding
Payment best practices
- minimize questions
- auto-format (chunk, verify, fix errors)
- increase perception of security
Specifies an input field where the user can enter data
Input type
Apps with simple and random workflow
Consumption apps
Telling users clearly how the error occurred, what they have done wrong, and how to fix it
Error handling
Technique to indicate to our users which elements on the screen are more important, and which should be considered first
Visual hierarchy
Visual clues that tel us how a product or control should be used or operated. They make it obvious how the system works and assist learnability
Affordances
Anatomy of interaction for users
Intent-action-result
Refers to a rule that is about one big action (e.g. completing a form)
Macro rule
Helps integrate interview data into insights by considering:
- what did they say?
- what did they do?
- what might they be thinking?
- what emotions do you think they are experiencing?
Empathy map
Reviewing other products in the competitive landscape or industry to figure out how they solve the problems that we want to solve, define best practices, and conventions
Competitive benchmarking
Document that gives recruiters guidance, defines criteria for test participants
Recruitment screener
Research method that gathers data that can be expressed as numbers, percentages and graphs. It’s measurable and produces statistical data
Quantitative research
Must-have for every online survey
3 golden questions
The use of multiple methods to study one research question and get better, more accurate data
Triangulation
Competitive analysis tool that shows how our current product stacks up against the competition now or how it should stack up against a competition in the future
Customer value curve
Refers to a rule that is about specific action(one field in a form)
Micro rule
Time it takes to make decision depends on the number of options presented. More options presented, longer it takes to decide what to do
Hick’s law
An image or text that prompts visitors, leads customers to perform a desired action
Call to action
Technique that tells users how they are doing as they are completing the form
In-line validation
Native app checklist (if it has to be created)
- volume of users
- frequency of use
- unique features
- cost is justified
Website that is specifically developed for the capabilities and constraints of the mobile device. It’s code base is different from the desktop websites
Mobile websites
Apps with complex and structured forms
Process apps
Navigation on consumption apps
Content as navigation + off-canvas
Content display types
- list view
- detailed list view
- thumbnail view
- grid view
- map view
Complex forms best practices
- scanability
- field-length affordances
- remove astericks
- use descriptive labels in CTA
- steppers: show progress
Prototyping the product worth the closest resemblance to the final design in terms of details and functionality
High-fidelity prototype
The act of breaking something into smaller parts - whether that’s a product, service, piece of content or app
App unbundling
Apps with simple and structured flow
Utility apps
Websites/web apps that adjusts its appearance to suit the device that it’s being used on by altering fonts, image sizes, content hierarchy and navigation
Responsive websites
Software apps built specifically for a use on tablet or mobile devices
Native apps
Navigation patterns
- tabs
- off-canvas
- floating buttons
- content as navigation
- blended
Input type that opens an email keyboard
<input type=“email”>
Average finger size hat we should consider when designing tap target
11 mm
Give the impression that h the e mobile software is loading dates than it actually is
Skeleton states
Registration best practices
- don’t force it
- don’t force social
- flag why you ask personal details
- in-line validation
Creating preliminary model of the product for research and decision-making purposes and to reduce risks
Prototyping
Selections put in place that provide answers to questions for you. This enables people to complete forms faster
Smart defaults
Help people understand how the product is operated. Make everything discoverable, obvious and natural
Digital affordances
Design technique used for understanding mental models, vocabulary, language and making us more confident with the architecture
Card sorting
Design targets
- goals
- context
- behaviors
Ability to operate business successfully and make money
Viability
Determines what a product built to do. Defines the engineering that gives a product its capabilities
Functional design
Exploratory research method conducted with the users that help us understand their goals and the context of use
Depth interviews
Limiting the options in the design to help users get the action done as quickly as possible
Constraints
Onboarding styles
- static walkthroughs
- interactive walkthroughs
- contextual hints
Used for communicating content and rules to the team
Wireframes
Quick and cheap way of prototyping to test broad concepts and mental models
Low-fidelity prototypes
Ability to decide what is best for the product, business and the user
Product integrity
Customers have need or want a product. The product solves a problem for the user. It gives a smooth experience and makes user come back again
Desirability
Research that Involves to listening what people say
Attitudinal research
Fictional characters, which you create based upon your research in order to represent the different user types that might use your service, product or brand in similar way
Personas
High level guidelines that can help ensure that the software we create is of a high standard. They are the universal truths
Design principles
Research goals that you decide on before conducting a usability testing
Test objectives
Research that Involves watching and observing what users do, not necessarily talking to them
Observational research
More features you add, more crowded and less intuitive the app is
Danger of features
Used to collect data and compare performance among two options studied
A/b testing
Anatomy of interactions for product
Controls - rules - feedback
A strategy for managing information complexity in which only necessary or requested information is displayed at any given time
Progressive disclosure
Defines how does the product look, how visually appealing it is, its personality and what it’s look says about brand
Aesthetic design
Aid memoir to at outlines the tasks user needs to complete and questions we should ask. It keeps test on track and allows us to conduct better usability testing
Usability test script
Communicates what is happening on our software. It is the voice of your product. Should be understandable by humans
Feedback
Cheaper and easy to test way of prototyping to test more detailed concepts and flows
Medium fidelity prototype
How long it takes to get something?
What does the user need to do?
What does the user is going to get?
What will happen next?
Predictability
3 key ingredients of a successful product
Viability, desirability, feasibility
Diagram that visualizes what the customer experiences as they interact with our company, services or software
Customer journey map
Indication of how much progress users made through a process
Progress indicators
Digital controls
Tabs, radio buttons, checkboxes, switcher, buttons, fields, spinners
More specific you get about the goals, behaviors and context of your target audience, better the product is going to be. More likely, it will be adapter by wider audience
The paradox of speficity
Document that is signed by participants as an agreement to record the usability test session for note-taking and research purposes
Consent form
An interface that forgives the user for the mistakes made, instead of punishing them. It can be done by showing strong affordances, providing reversibility of actions and confirmations
Forgiveness
What part of design process iterates?
Design, prototype, validate
Conversation with the key people in your company to understand the business goals, problem, competitive landscape and to get buy-in later
Stakeholder interview
Technique that helps us process data faster and remember it more easily
Chunking
Method that car companies use as a low-fidelity design
Clay modeling
Technique used in user-centered interaction design to evaluate a product by testing it on users
Usability testing
Notify the users of communications from others and to remind them of upcoming talks or events
Notifications
Handover documentation must show:
- hierarchy - information architecture
- structure - user flows
- content - wireframes
- rules - wireframes
Sign in best practices
- keep users logged in
- show passwords
- user fingerprint/Face ID
Defines what it feels like to use the product, how easy to use it, what feelings it arises
Experience design
The idea that users have in mind about how the product works
Mental model
A group creativity technique that allows large numbers of ideas to be classified into groups for review and analysis
Affinity diagram
Refers to how people move through the app structure - screen and screen states
User flow
Methods to bring design principles to life. Are reusable design components that are used to solve common usability problems that users experience
Design patterns
Refers to technology: the degree of building something easily wigg t right and reasonable amount of resources
Feasibility
Using tooltips, guidance content on the interface to make experience smoother
Help texts
Navigation on utility apps
Floating action button + off-canvas
Input type that opens a numeric keypad
<input type=“tel”>
Navigation on process apps
Hub and spoke
Which questions to ask yourself before adding features?
- does anybody need it?
- what is the trade-off?
- what is the cost to design it well?
Up to…% of consumer electronic features are never used by anybody
9%
Google analytics, A/b testing and multi-choice survey questions.Which research landscape?
Quantative
Usability tests, open-ended survey questions and focus group. Which research landscape?
Qualitative
What involves functional testing?
Every possible scenario to make sure the product works
Name usability test script 3 high level sections
- introduction
- interview
- tasks
Depth interview objectives
- understand user goals
- understand context of use
Alan Cooper heuristics
Software should be polite
- software should be interested in me
- software should be self-confident
- software should be forthcoming
- software should have common sense
It is a powerful technique to help you organize large volumes of content or features on your website or other software
Card sorting
Steve Krug heuristics
The reservoir of goodwill
- don’t force me to do it your way
- save me steps whenever possible
Jacob Nielsen heuristics
Usability heuristics
- visibility of system status
- match between system and real world
- freedom and control
- recognition rather than recall
By who was devised affinity diagram?
Jiro Kawakita
Margin error recommended for survey output?
5%
It was devised to help teams have a shared understanding of the research finding and to make better design decisions
Empathy map
It refers to how people move through the app structure.
User flow
It sits at the top of the page and it’s persistent in that it’s always there on every page of the website
Primary navigation
Put in correct order anatomy of interaction
Intent - controls - action - rules - feedback - result
This is contextual and it changes depending on where you are in the website
Secondary navigation
3 components of which is made every interaction
Intent
Action
Result
- max 16 digits
- min 15 digits
- valid credit card number
Which rule is that?
Micro rule
- defines how the system behaves
- how it responds to actions
- how it communicates results
- how it helps fulfil intentions
Interaction design
It confirms actions, encourages users to continue and it clarifies what they can do next
Feedback
- prevents information overload
- helps users make decisions
- smoothens the flow
Progressive disclosure
You made first mock-up of information architecture and you want to test and validate what technique you would use?
Card sorting
- involve fiction
- often created without research
- often confused with marketing personas
- time-consuming to produce and maintain
- don’t always have the intended effect
Pitfalls of personas
2 main types of flow on mobile apps
- hub and spoke
- linear
…. Means how closely your prototype replicates the end state of the product
Fidelity
Waterfall method is…
Linear
3 main aspects of usability test script?
- introduction
- interview
- tasks
3 types of design that go into making high quality products
Functional design
Aesthetic design
Experience design
Soft science?
Qualitative research
Hard science?
Quantitative research
Before usability test what need to find out?
Research goals
A computer program built to perform certain action or tasks. Runs on windows or Mac OS
Software app
Native apps - run using web browser?
No
Google analytics, a/b testing, multi choice survey questions. Which research?
Quantitative
Usability tests, open-ended survey questions and focus groups. Which research?
Qualitative
Smaller sample sizes, which research and soft science. Which research?
Qualitative
Broad insight, larger sample sizes, hard science. Which research?
Quantitative
Attitudinal research includes…
Listening what people say
Which language used to build mobile websites?
HTML, JavaScript, css - code base is different
… % of apps are deleted after first open
25
Online banking, Uber, WhatsApp, calendar, sports tracking app. What mobile app type?
Utility
… % of time spent on mobile phones occurs in the top 5 used apps
85%
Amazon, ASOS, Walmart. What mobile app type?
Commerce
… % of time spent on mobile phones occurs in a single app
45%
Applying for insurance policy, register a claim, advertise your property . mobile app type?
Process
Newspapers, netflix, Facebook, online education. What mobile app type?
Consumption
Is the series of steps user has to go through to get a problem solved or a task completed.
Workflow
Book a flight. What mobile flow?
Linear
Order a book. What mobile flow?
Linear
Put something on sale. What mobile flow?
Hub and spoke
- broad content or functionality
- too many options for tabs
- all options of squeal importance
. What nav style to use?
Off-canvas
What navigation Facebook uses?
Tabs+off-canvas
What nav style to use?
- popular with utility apps
- prioritizes certain use cases
- can also be used for navigation
Floating buttons
Sports app, uber. What mobile app type and what nav style?
Utility, floating button and off-canvas
Netflix, YouTube, Spotify, news site. What mobile app type and what nav style?
Consumption app, content as navigation and off-canvas. Spotify - content as navigation and tabs.
ASOS. What type of mobile app and what nav style?
Commerce app, off-canvas
- use available data
- make educated guess
- most will benefit
- nobody worse off
Smart defaults
BBC news. Not huge amount of detail, not overly complex, don’t need a lot of info about each article to make a choice. What content view type?
List view
Amazon. Products are more complex, division making requires more variables. What content view type?
Detailed list view
House for sale. Imagery really has to tell the story. What content display style?
Thumbnail view
Food or clothes. The images need to do the selling. What content view type?
Grid view
Truliia. If geographic location matters. What content view type?
Map view
Momondo. Booking a flight. What content view type?
Prioritizing content
Spotify music dialogue box - rule (interactions)
Micro task
A preliminary model of something, from which other forms are developed
Prototype
Blueprint = ?
Annotated designs
Is a way to manage a project by breaking it up into several phases
Agile
ARe also sometimes known as modes. The software is doing something specific possibly outside of its usual mode of operation
Micro-tasks
Perceivability, predictability, affordances, constrains, feedback, conventions, fitts law, hicks law, progressive disclosure
Design principles
Chunking, alignment, call to action, visual hierarchy.
Design patterns
Software should behave like staff in a high quality restaurant
Alan cooper heuristics
Cash withdrawal
Software should be forthcoming
Remember the name in email
Software should be interested in me (Alan Cooper)
Dialog boxes asking if are you sure you want to delete it?
Software should be self confident (Alan Cooper)
Sending email, app is downloading
Visibility of system status (Nielsen)
Bank words no one understands
Match between system and real world (Nielsen)
