FBLA UX DESIGN
UX Design Process
Research Define Design Prototype Validate Build Test.
When to do usability test
Research - Understand the problem Prototype - Validate solution Test - Sanity check
heurstics
Rules of thumb Characteristics of best practice Criteria to measure against
lowercase w/ no spaces
We save files with this naming convention
That's interview questions to try instead
What and why questions: Or travel apps or websites to use? why? How questions: How did you check-in please describe what you did? Specific questions about the past: Tell me about the last time you booked your flight
What you learn from usability testing
What are use are trying to do ( goals ) What are uses do (behaviours) The context of use (the environment) How are products helps them achieve their goals How are product facilitates Common behaviours What pain points and road blocks can be removed
Experience Design
What the product feels like to use.
The three golden questions
Why did you visit our website today? Were you able to complete your task today? Yes, No.. if no please specify. What would you change about our website? what improvements would you make?
Stakeholder brief
Write a 2-3 page summary of what you heard Focus on what everybody agreed Call out any contradictions for discussion Get signed off after resolving contradictions This is your brief for the rest of the project
Evaluative Research
evaluate performance once a product is ready to test or has been released
Generative Research
generate ideas at the start of a project or improvement
<body style="background-color:blue;">
how to change background color (to use hex codes, replace blue with the hex code #FFFFFF)
<style> body { background-color: rgb(20,30, 1); } </style>
how to change background color RGB
<img>
image
<strong>
important text
<i>
italic text
<a> </a>
links
what does lo-fi stand for
low fidelity
<mark>
Defines marked/highlighted text
<sub>
Defines subscripted text
<sup>
Defines superscripted text
<title>
Defines the title - shows on the browser tab
entity reference
&entity_name;
Closed Card Sort
A card sort where the categories into which information can be sorted has been pre-defined.
Open card sort
A card sort where where users can create their own grouping scheme. Tasks: Organised into groups Give groups a name Must be more than one group Must be a maximum of 10 groups No groups called miscellaneous stuff etc.
Creating a test script
Aid memoire Specifies has to be completed Specifies questions to ask
<body>
All of the content to be displayed on the page is in this tag
Survey advice
Ask the three golden questions Never ask more than 10 questions Keep all the questions on one page Don't ask redundant questions Only asked generally useful questions
Depth interviews what doesn't work
Asking for product feedback Asking for page design feedback Asking hypothetical questions Ask what people do in the future
Stakeholder interviews be aware
Avoid talking about solutions Avoid talking about features Deflect and focused on goals and problems
&
Begins an entity
<dl>
Description List
<dd>
Description definition in a description list
<dt>
Description term in a description list
Functional Design
Focusing on creating a product that will preform and fulfill all of its intended uses.
What to test
Current version Prototype Competitors Peers in other markets/industries
<ins>
Defines inserted text (underlines it)
reservoir of goodwill
Don't force me to do YourWay Save me steps wherever possible
Online surveys
Easiest way to gather user requirements Both qualitative and quantitative Powerful Unambiguous Cheap
Benefits of A/B testing
Facilitates improvements in optimisations Encourages experiments Validates assumptions (or not) Data driven design
<!DOCTYPE html>
First line in an HTML5 document. Tells web browsers that this document is an HTML5 document.
Problems with software development
Focus on features versus goals, failure to follow the process, failure to produce high-fidelity designs, failure to prioritise
Types of design to make a great product
Functional Design Aesthetic Design Experience Design
Progressive Disclosure
Give features and information when they need them.
Why have a Stakeholder brief
Give your product focus and clarity Show Stickles you are listening Can refer back to it in time times of doubt
Design target
Goals Conttext Behaviours
Negative emotions
Have a multiplier effect
Mental models
How I think it works
Design model
How it actually works
Interview flow
Introduction an explanation Easy questions first About travel habits in general Approach to booking flights Specific Recent examples Dissect example Propane points Re-And close
Whats in a test script
Introduction: We're not texting you, Speak your mind, Think out loud, Feel free to ask questions. Interview: Easy questions to start, Directly related questions, Tasks: Start with a natural task if appropriate, Then predefined tasks, Ask lots of what and why questions, Clearly explain the scenario, Really state the task.
identifying desirabilty
Is there a problem? Is our product solving it? Is the experience great?
<section>
Larger areas of document
Consent forms
Let the users know they will be recored and get them to sign.
<li>
List Item
<meta charset="utf-8">
META Tag
Usabailty testing
Not Expensive Not complicated Does not require a scientific environment
<ol>
Ordered List
"list-style-type: upper-alpha;"
Ordered list with capital letters
<body></body> Element
Page Content appears within this element
<footer>
Page or section footer
Depth interviews questions to avoid
Product questions: You like our travel app idea? Leading questions: Would you Prefer to check-in online? Future focus hypothetical questions: If you're up was available tomorrow would you use it? Closed questions: Did you check-in online?
Bias
Self referential design Knowing the answer Being defensive or precious Asking leading questions
<header>
Semantic tag at top of webpage
Software should be polite
Software should be interested in me Software should be forthcoming Software should be self confident Software should have common sense
Defining your test objectives
Specific tasks Concentrate on primary tax Define clear goals Be specific don't try and cover everything Don't confuse it would functional testing
Stakeholder interviews who should you talk to?
Sponsoring executive Product team Technology team Customer support Marketing Sales Business Analysts
<h1>
This tag defines the largest heading
<h6>
This tag defines the smallest heading
<em>
This tag is used to italicize
Types of online survey questions
Structured - Quantitive Unstructured - Qualitative
<html>
This tag marks the start of a web page document after the <!DOCTYPE html> declaration
Rules of prioritising
Things that most people do, most often, somewhat often, infrequently
<head>
This tag contains information about the document - contains metadata, information, and instructions to the Web browsers & Search Engines
<hr>
This tag creates a horizontal line across the page
<br>
This tag creates a line break
<p>
This tag creates paragraphs
<head></head> Element
Title Tags appear within this element
What is UX?
UX is a problem solving discipline.
Depth interview objective
Understand their goals Understand the contact of use
Benefits of card sorting
Understanding mental models Understanding vocabulary and language Gives you confidence
<ul>
Unordered List
"list-style-type: square;"
Unordered list with square bullets
3 key ingredients of a successful product
Viability (business), Feasibility (tech) Desirability (customer)
Usability Heuristics
Visibility of system status Match between system and the real-world Freedom and control Recognition rather than recall
Likert Scale
a numerical scale used to assess people's attitudes; it includes a set of possible answers with labeled anchors on each extreme
competitive benchmarking
benchmarking where the examples are drawn from competitors in the industry. How do Best in class websites and apps solve the problem? What are they doing really well that we can emulate? What are they doing not so well that we can improve? What conventions have been established that we need to follow?
<b>
bold text
height=""
changes height of image
width=""
changes width of image
background-color property
configures the background color of an element
<del>
defines deleted text
<small>
defines smaller text
Aesthetic Design
does the product's design look like a high-quality product?
<q>
short inline quotation
Attitudinal Research
shows how people feel during their experience with a product
behavioral research
shows what people actually do when they use a product
src="filename/link"
specify the filename/link of the image
alt=
used to show alternate text in case your image will not load
Define UX?
user experience is what it feels like to use a product, system or service...