UI/UX Terms Flashcards
Layout
Design layout - is the organization of text and images on a screen, web page, poster
Wireframe
A wireframe is often described as the skeleton of the eventual user interface. It’s a low fidelity sketch (sometimes literally a pen and paper sketch) of the UI. Wireframes convey main features, functions and content of a user interface, without getting into the visual design.
Prototype
Prototypes are a high-fidelity representation of the final product. Unlike wireframes and mockups, prototypes closely simulate the final experience with clickable links and other interactive elements, which means they’re ideal for usability testing, showing stakeholders what the final product will look like in action.
Some of the common prototyping tools include: InVision, Adobe XD, Sketch, Origami Studios, Webflow, Axure, Atomic, Framer, and Principle.
Draft
Preparation of preliminary version of screens/layots. It shows you fundamental design and functionality. But DO NOT freak out if it doesn’t look completely finished. Because it’s not.
Dashboard
A dashboard is a screen in your application that displays information. Normally, a dashboard provides the user a global overview, with access to the most important data, functions and controls.
Mockup
Mockups are a medium-fidelity visual representation of the design.
Mockups tend to not be interactive, which means buttons and visual representations of links won’t be clickable.
Iteration
The process of repeatedly gathering feedback on a design solution, and acting on that feedback to make targeted improvements and move towards a final design.
Input fields
Input fields - allow users to add text within a defined area
Radio button
Users make a choice among a set of mutually exclusive, related options. Users can choose one and only one option.
Placeholder
Something that marks or temporarily fills a place (often used attributively):
I couldn’t find my bookmark, so I put a coaster in my book as a placeholder.
Collapsibble list
A collapsible list is a vertical list menu that collapses down to expandable menu titles when displayed on mobile devices.
Tooltip
The tooltip (infotip or hint), is a common graphical user interface (GUI) element in which, when hovering over a screen element or component, a text box displays information about that element
Navigation bar
A set of buttons or images in a row or column that serves as a control point to link the user to sections on a website
Sticky bar
An element that scrolls with the UI and locks at a certain point in the scroll range
Gestures
Gestures let users interact with screen elements using touch
Pagination
Pagination communicates the number of elements or pages that can be loaded within a given context. It shows the user where they are and enables direct access to previous and subsequent content item.
Badge
Small element that appears on the top of icon, show a status, notice or event.
Checkbox
A checkbox is a UI element that allows the user to make a binary (yes/no, cancel/confirm) choice for a specific option.
Hamburger Button
A visual pattern of three (or sometimes two or four) horizontal lines that typically indicates a hidden menu. Tapping or clicking it reveals the menu.
Switch / Toggle
A UI element that allows the user to turn a setting on or off
UX Roadmap
A UX roadmap is a strategic document that maps out and prioritizes the problems and initiatives your UX team will work on in the future. It’s a high-level plan that brings together your UX strategy, the major steps needed to accomplish your goals, and a corresponding timeline for completion.
HMW “How might we”
“How might we” questions are short questions that launch brainstorms.
Step 1: Start with a point-of-view/problem statement.
Step 2: Break down the POV/problem statement.
Step 3: Write as many How Might We’s as you can.
Step 4: Decide on which to move forward.
Popover
A popover (Pop-up, popper, flyout) displays rich content in a non-modal dialog to describe or add additional information when users hover over, focus on, or click an interactive element. User can interact with popover content, including selecting text or clicking links.
Divider / Separator
A divider is a thin line that groups content in lists and layouts.
Dividers separate content into clear groups. Dividers should be noticeable in a layout, but not jarring.
Chart
Charts (Data visualization) can express data of varying types and sizes: from a few data points to large multivariate datasets.
Common use cases include:
- Stock price performance
- Health statistics
- Chronologies
Change over time charts include:
- Line charts
- Bar charts
- Stacked bar charts
- Candlestick charts
- Area charts
- Timelines
- Horizon charts
- Waterfall charts
Sliders
Sliders allow users to make selections from a range of values. When interacting with a slider, changes should be reflected back to a user immediately.
Modal window
A modal window is a graphical control element subordinate to an application’s main window.
A modal window creates a mode that disables the main window but keeps it visible, with the modal window as a child window in front of it. Users must interact with the modal window before they can return to the parent application. This avoids interrupting the workflow on the main window. Modal windows are sometimes called heavy windows or modal dialogs because they often display a dialog box.
Ranking
A position in a scale of achievement or status; a classification.
Drop-downs list
A drop-down list (abbreviated drop-down, or DDL; also known as a drop-down menu, drop menu, pull-down list, picklist) is a graphical control element, similar to a list box, that allows the user to choose one value from a list. When a drop-down list is inactive, it displays a single value.
Grading scale/ Grading system
Both scales use an identical grading system. VGA grades range from 10 to 100 based on the item’s condition overall. Within the 1 – 100 ratings are three grading levels – Gold, Silver, and Bronze.
Tab bar
Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy. The Tab Bar contains the Tab Scroller and Tab components.
P2E (play-to earn game)
These are largely play to earn crypto games. This is because these games use the blockchain technology of cryptocurrencies to allow people to receive payments from their gameplay.
Generic dialog
Generic yes/no popup that can be called and can return yes or no to confirm.
Grid system
Grid system links together many design elements and establishes effective hierarchy, alignment, and consistency
CTA buttons (call-to-action)
Call to action (CTA) is a prompt in GUI that tells the user to take some specified action. A call to action is typically written as a command or action phrase, such as ‘Sign Up’ or ‘Buy Now’ and generally takes the form of a button or hyperlink.
Hover state
The appearance or behavior of a button or other control while the pointer is over it but the item has not been clicked or dragged
Consistency
Agreement or harmony of parts or features to one another or a whole
Pixel density
The number of pixels that fit into an inch is referred to as pixel density
User onboarding
User onboarding is the process by which new users become proficient in an application
Workflow
Workflow describes the steps in a business work process, through which a piece of work passes from initiation to completion.
Flowchart
A flow chart is a graphical or symbolic representation of a process.
Low-fidelity prototype
A low-fidelity prototype is a quick and easy tangible representation of a concept, a use flow, or an information structure created for getting quick feedback and improving the product.
High-fidelity prototype
A high-fidelity (sometimes referred as high-fi or hi-fi) prototype is a computer-based interactive representation of the product in its closest resemblance to the final design in terms of details and functionality.
User Flow
User flow is the path taken by a prototypical user on a website or app to complete a task
Adaptive
An adaptive interface is a set of layouts designed specifically for different devices. Different versions of the same site are created, these versions are optimized to be viewed on mobiles, desktops, or tablets.
Agile
Agile is a process by which a team can manage a project by breaking it up into several stages. Instead of building the entire product at once, Agile breaks it down into smaller bits of user functionality and assigns them to two week cycles called iterations.
Diegetic UI
Diegetic UI is UI made to look like it is entirely part of the game’s narrative. It is something that the character would interact with in their world.
Diegetic UI Examples:
-Metroid Prime (the HUD is part of Samus’s suit helmet)
-Firewatch (navigation using only a map and a compass)
-Metro 2033 (watch menu & status information)
-Syndicate (DART overlay mode)
-Fallout 4 (eagle vision)
-Goldeneye 007 (watch menu & weapon selection)
-Overwatch (guns showing status)
Breadcrumb
Breadcrumb navigation systems help users understand their location in a website or app. They’ll show a sequence of steps users have to take to get where they are.
GUI
A GUI (graphical user interface) is a system of interactive visual components for computer software. A GUI displays objects that convey information, and represent actions that can be taken by the user.
UI Pattern
UI patterns are reusable solutions to common usability problems in products or on the web expressed as a collection of UI elements.
Think about a login screen. A common login UI pattern is made up of two input fields, one for a username and one for a password, and a button to submit these. We call this collection of elements a login pattern.
Gestalt Principles
A set of visual principles of grouping, underpinned by the idea that elements sharing proximity or features in common tend to be understood as related to one another.
Here’s a blog explaining the use of Gestalt principles to communicate visual hierarchy https://www.koruux.com/blog/how-to-communicate-visual-hierarchy/
Design thinking
Design thinking is a 5-stage method for creative problem solving.
The 5 stages are:
Empathize: Understand the challenge
Define: Define the problem
Ideate: Brainstorm potential solutions
Prototype: Build your solutions
Test: Test your solutions
Material Design
Material Design, often called just Material, is a design language developed by Google used in Android devices.
R&D (Research and development)
The research and development (R&D) process is a process in which new products are developed. Manufacturers of everything from pharmaceuticals to personal computers use this process to identify new ideas, take those ideas through development, and eventually release them on the open market for sale.
UX writing
UX writing - is the practice of crafting all of the customer-facing text or copy that appears within digital products. UX writing helps users understand how to use and interact with software products, including desktop and mobile apps, games, and other “multimodal” experiences including voice interactions (think talking TVs, Google Home devices, or car interfaces).
The primary goal of UX writing is to guide users to complete tasks in web products or mobile apps. UX writers are interaction designers for words.
A/B testing
A/B testing is a way to compare two versions of something to figure out which performs better.
