Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

UI/UX Design > UI/UX Terms > Flashcards

UI/UX Terms Flashcards

1
Q

Layout

A

Design layout - is the organization of text and images on a screen, web page, poster

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Wireframe

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Prototype

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Draft

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Dashboard

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Mockup

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Iteration

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Input fields

A

Input fields - allow users to add text within a defined area

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Radio button

A

Users make a choice among a set of mutually exclusive, related options. Users can choose one and only one option.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Placeholder

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Collapsibble list

A

A collapsible list is a vertical list menu that collapses down to expandable menu titles when displayed on mobile devices.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Tooltip

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Navigation bar

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Sticky bar

A

An element that scrolls with the UI and locks at a certain point in the scroll range

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Gestures

A

Gestures let users interact with screen elements using touch

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Pagination

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

Badge

A

Small element that appears on the top of icon, show a status, notice or event.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

Checkbox

A

A checkbox is a UI element that allows the user to make a binary (yes/no, cancel/confirm) choice for a specific option.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

Hamburger Button

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

Switch / Toggle

A

A UI element that allows the user to turn a setting on or off

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

UX Roadmap

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

HMW “How might we”

A

“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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

Popover

A

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.

24
Q

Divider / Separator

A

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.

25
Q

Chart

A

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:

  1. Line charts
  2. Bar charts
  3. Stacked bar charts
  4. Candlestick charts
  5. Area charts
  6. Timelines
  7. Horizon charts
  8. Waterfall charts
26
Q

Sliders

A

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.

27
Q

Modal window

A

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.

28
Q

Ranking

A

A position in a scale of achievement or status; a classification.

29
Q

Drop-downs list

A

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.

30
Q

Grading scale/ Grading system

A

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.

31
Q

Tab bar

A

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.

32
Q

P2E (play-to earn game)

A

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.

33
Q

Generic dialog

A

Generic yes/no popup that can be called and can return yes or no to confirm.

34
Q

Grid system

A

Grid system links together many design elements and establishes effective hierarchy, alignment, and consistency

35
Q

CTA buttons (call-to-action)

A

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.

36
Q

Hover state

A

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

37
Q

Consistency

A

Agreement or harmony of parts or features to one another or a whole

38
Q

Pixel density

A

The number of pixels that fit into an inch is referred to as pixel density

39
Q

User onboarding

A

User onboarding is the process by which new users become proficient in an application

40
Q

Workflow

A

Workflow describes the steps in a business work process, through which a piece of work passes from initiation to completion.

41
Q

Flowchart

A

A flow chart is a graphical or symbolic representation of a process.

42
Q

Low-fidelity prototype

A

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.

43
Q

High-fidelity prototype

A

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.

44
Q

User Flow

A

User flow is the path taken by a prototypical user on a website or app to complete a task

45
Q

Adaptive

A

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.

46
Q

Agile

A

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.

47
Q

Diegetic UI

A

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)

48
Q

Breadcrumb

A

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.

49
Q

GUI

A

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.

50
Q

UI Pattern

A

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.

51
Q

Gestalt Principles

A

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/

52
Q

Design thinking

A

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

53
Q

Material Design

A

Material Design, often called just Material, is a design language developed by Google used in Android devices.

54
Q

R&D (Research and development)

A

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.

55
Q

UX writing

A

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.

56
Q

A/B testing

A

A/B testing is a way to compare two versions of something to figure out which performs better.

UI/UX Design (3 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions