FBLA UX Design terms

A/B testing

two versions of a web page are shown to users with one variable changed

accessibility

design process that enables people with disabilities to interact with a product

adaptive

different design layouts specifically designed for different devices. device type is detected and specific version of a website is shown

affordance

clues that hint the users what to do with an element. ex: handle is an affordance that the door can be opened. ex: buttons

agile

incremental approach to design - breaks down process to two week cycles called “iterations”

analytics

measure human behavior on site - help better understand patterns of usage

API

application programming interface - software that helps different applications communicate with each other

front-end development

code that builds what users see - interface

back-end devlopment

powers the front end - databases and servers

backlog

prioritized list of tasks to be completed

beacon

small bluetooth transmitters that communicate with smartphones

breadcrumbs

navigation system that helps users understand their location in a website or app - shows trail of where user has been

cache

memory that lets you store data temporarily for later use. ex: usernames, recent searches

card-sorting

testing method - asks users to write down topics on flashcards and organize them in a way that makes sense. ex: can help amazon create a structure and navigation that makes sense to users

chatbot

lets users asks questions on website through a chat interface

clickstream

path of clicks used on website to get to a certain place

commits

developers create one when they have a good place in their work, similar to drafts

conversion rate

percentage of users who complete a desired action. ex: on e-commerce site: % of customers who buy an item

CRM

Customer Relationship Management software system that helps manage business processes (sales, data, customer interactions)

CSS

Cascading Style Sheets: style sheet programming language that codes how a website should be styled. info on fonts, layouts, colors, graphics, spacing, etc

CX (customer experience)

customer experience/service design - interactions a user has with a brand while researching and purchasing a product. how a user feels about a brand and affects brand trust

data science

using big data to ask questions, make decisions, and support changes in businesses. understanding data and systems as a whole to make business decisions

data analytics

process raw data and provide valuable insights. similar to data science but more focused and narrower

design debt

imperfections and bad features that have accumulated over the design process that need to be cleaned up. can result from rushed timelines, lack of innovation, and skipping over valuable design concepts

design thinking

5 step process:


1. empathize: understand challenge and users
2. define: the problem
3. ideate: brainstorm possible solution
4. prototype: build solutions
5. test: test solutions

diary studies

qualitative research method used to collect info about users who are asked to journal every day

empathy maps

collaborative tools to visualize user behavior, mindset, feelings using info collected with research. split into 4 quadrants: user saying, thinking, feeling, doing, with user persona in the middle

end user

who product is designed for

eye tracking

uses special tools to measure eye activity of users to see where they look and what order

flat design

graphic/ui design style that has simple 2D elements, vibrant colors, minimalist typography, white space, crisp edges

flowchart

illustrates a step user takes when using product

gamification

adding game-design elements and principles into products to drive user engagement

github

collaborative development platform used by developers

grid system

organizational tools made up of horizontal and vertical lines that help designers arrange content on a screen

hardware

physical parts of a computer - circuits, chips, plugs, wires

heat map

graphical representation of which areas on the screen receive the most user attention - red areas are where user interacts the most, green is where they interact the least

HTML

hypertext markup language - programming language that codes the structure of a website

HCI

human-computer interaction - concerned with design and the user of computer technology and users experiences with them

hybrid app

mobile app that can be used on multiple mobile platforms (Android, iOS, etc), uses HTML, CSS, and JavaScript, and lives inside a native shell that lets it access device capabilities

information architecture (IA)

arranging content in an understandable manner - organizing content, using suitable structures like website navigation

interaction design (IxD)

practice of designing interactive digital products and considering how users will interact with them

iOS

mobile operating system by Apple

IP address

Internet Protocol Address: unique number made of numbers and periods used to identify devices utilizing the Internet Protocol

iteration

period of time assigned to work on smaller chunks of a product development. usually 1-4 weeks

javascript

defines how HTML and CSS should behave, helps make elements on page interactive

KPI

key performance indicators - values that help designers measure how well a product is doing. ex: task success rate, user error rate, time on task

landing page

any page that a user lands on. tied to ads, search results, for conversion goals. for marketing campaigns, slightly different - no navigation, only few buttons with specific goals (download, purchase, survey)

lean ux

based on Agile, prioritizes “learning loops” (building, learning, and measuring through iterations) over design documentation

material design

aka material, design language developed by Google used on Android devices

mental model

represents what users already believe about a product’s functionality. the more a product aligns with the user’s mental model, the easier it will be for them to use it

microcopy

smaller bits of texts on apps or webs that help you navigate. ex: button labels, error messages, placeholder text in input fields

mobile web

jumping online on a mobile device, not a separate section of web

mockup

static representations of a product, can’t be clicked through or interacted with, picture of what product will look like

MVP

minimum viable product - essential set features that a product can be launched with, then improved on. products that are MVPs can be improved later using use and gain valuable user feedback and can be released quicker

open source

available for public use, and free. can be used modified, and built with without being in trouble

pairing development/programming

practice of working on code in twos. two developers take turns writing and revising code

padding

space inside UI element between border and content

persona

representation of target user - not necessarily a real person but constructed with real info and data about target users.

\
persona spectrum - more recent iteration to personas and help with designing more inclusively

pixel

tiny squares used to construct images on device displays. changes colors to show different images and graphics

PDLC - product development life cycle

cross-functional, iterative design process


1. brainstorm
2. define
3. design
4. test
5. launch

prototype

preliminary model of product that is used for testing.

\
low-fidelity: early stages, paper prototypes, pencil and paper, validate concepts or flows

high-fidelity prototype: concepts or flows validated, design software like sketch, look like apps and used to fine tune details on UI

pull request

lets developers share changes they’ve made to code with others on Github

refactoring

process of cleaning up and tidying code without affecting functionality, increasing its quality. done in small, incremental steps

responsive

adapt size to fit the device a website is displayed on. single layout that shrinks, stretches, and rearranges content to be easily viewed on each device type.

SaaS (Software as a Service)

software distribution model where software is licensed on subscription basis and hosted on external servers. subscribed users access through the web

scrum

empirical process. decisions based on: observation, experience, experimentation.

three pillars: transparency, inspection, adaptation

\
set of project management practices emphasizing daily communication, flexible planning, and short, focused phases of work

software development kit (SDK)

software package that contains required tools to develop on certain platforms or operating systems. help expedite the development by providing “parts” for developers instead of writing them from scratch

SEO (search engine optimization)

process of increasing website’s visibility in free, organic search results. involves writing useful content on website related to words and phrases users use in searches related to product/service

site map

visual representation of website’s pages and hierarchy

sprints

in agile software dev: periods of time to complete certain tasks. usually around 1-3 weeks

SVG

scalable vector graphics: scalable 2D graphics that can be manipulated and animated with code

task analysis

process of listing tasks or steps a user takes through experience to complete goal. done during early stages to identify problems in UX

technical debt

similar to design debt but with code: when easy but messy dev solution is done over better but more time consuming dev alternative. messy dev will need to be cleaned up eventually

UI element

element found on interface that users need to trigger certain actions. ex: buttons, input fields, toggles, radio buttons

UI pattern

reusable solutions to common usability problems on websites/products. ex: login with username, password, and submit button

unit testing

process of testing only parts of app to ensure that they are working properly. manually or automated

usability testing

research method that evaluates how easy something is to use by testing on group of representative users

user-centered design (UCD)

iterative design framework where users and their needs are always the most important idea


1. understand
2. specify
3. design
4. evaluate

user experience (UX)

refers to user’s emotions, attitudes, perceptions about product, system or service. how someone feels when interacting with app or website. good ux = useful, usable, desirable, findable, accessible, credible

user flow

intended series of steps a user takes to complete goal on product. include name steps, and description of each step

user interface (UI)

visual components a user interacts with a product

user journey maps

narrative docs that help visualize user’s process. document stages the user goes through, the tasks at each stage, user emotions, product opportunities

user scenario

early stages: mini stories that describe needs/context that brings user to product. tell: who user is, why user interested, what their goals are

waterfall

software waterfall development: each phase must be completed before next phase: ex: dev can’t start until design is done

whiteboard

tech jobs interviews: whiteboard challenges designed to assess candidate’s communication and problem solving skills. candidate given problem and whiteboard to develop solution on

white/negative space

unoccupied or blank space on page.

wireframe

blueprint of la screen. low-rep of website’s layout and content.

double-diamond design

discover, define, develop, deliver

\
\
2 modes of thinking:

convergent thinking: exploring many possible solutions

divergent thinking: analyzing, filtering, focusing ideas

ux honeycomb

defines “good” design as: useful, usable, desirable, findable, accessible, credible, and valuable

usability heuristics

1. visibility of system status
2. match between system and real world
3. user control and freedom
4. consistency and standards
5. error prevention
6. recognition rather than recall
7. flexibility and efficiency of use
8. aesthetic and minimalist design
9. help users recognize, diagnose, and recover from errors
10. help and documentation

tree testing

UX research method to evaluate hierarchy and findability of topics, using text/categories labeled hierarchically in “trees”

attitudinal research methods

focus on what users say through user interviews, surveys, and diary studies

behavioral research methods

observe user behavior through ethnographic studies, A/B testing, and user testing

interaction designer

focus on interactive parts of design. ex: does interface give feedback after button pressed, how long animation

UX writer

focus specifically on writing. ex: error messages, microropy on button, onboarding copy for app

product designer

focus more on product management

content strategist

focus on written content

UX engineers/UI developers

bring coding skillset to UX

rhthym

relationship between elements and how they interact

Continue “Lorem ipsum dolor sit amet…”

“consectetur adipiscing elit”