Minimize text size Reset text to normal size Increase text size

Interaction Design Glossary Terms

  • 2-second rule
    A generally acceptable amount of time for a user to wait for certain system responses such as an application launch or switch.
  • Above the fold [or Above-the-fold]
    The region of a Web page that is visible without scrolling. The area above the fold will vary according to a user's monitor size and their resolution settings. The region above the fold is called a screenful.
  • Accumulator
    A control that allows the selection of multiple items from a list into a new functional group.
  • Affordance
    When a control behaves as its appearance suggests.
  • Animation
    A simulation of movement by the rapid appearance of images in sequence.
  • Applet
    Small add on program that runs one specific task within the scope of a larger application. Example A mini-software program that a Java- or Active X-enabled browser downloads and uses automatically.
  • Auto-complete
    A feature that helps finish what a user is typing by predicting what the user wants to input based on previous or popular entries.
  • Banner
    Banners are graphic images that commonly function as Web-based billboards. Banner ads generally appear toward the top-center of the screen, and are used as attention-grabbing links to other sites.
  • Bitmapped
    An image that follows a pattern of square shaped pixels.
  • Bookmarks
    A list of saved links stored by a Web browser.
  • Browser compatibility
    The ability of an Internet browser to properly interpret the code that makes up web pages since there is slight variation between each.
  • Bug-tracking system
    A computer program that is intended to detect and repair programming errors.
  • Clickability cues
    A visual indication that a given word or item on a Web page is clickable. Cues that can be used to indicate the clickability of an item include color, underlining, bullets, and arrows.
  • Client-side
    Occurring on the client side of a client-server system. JavaScript scripts are client-side because they are executed by the user's browser (the client). In contrast, CGI scripts are server-side because they run on the Web server.
  • Color depth
    How many colors a computer screen can display, based on the number of bits per pixel.
  • Connection speed
    The maximum rate at which Web pages are downloaded to a user's computer. Connection speed is often quoted in bps (bits per second). Common connection speeds include dial-up (modem) at 56,000 bps, DSL/cable at 500,000 bps or higher, and T1 at 1,500,000 bps or higher.
  • Content page
    A Web page designed to convey specific information to a user. Content pages are often found two or three clicks deep within a Web site. The defining characteristic of a content page is a reliance on text, graphics, and pictures that are designed to convey information on a given subject to users.
  • Continuous text
    In a Web context, continuous text comprises sentences and paragraphs. See also Prose Text.
  • Conversion rate
    Percentage of visitors that complete a targeted transaction online
  • Critical Incident Technique (CIT)
    A method of gathering facts (incidents) from domain experts or less experienced users of the existing system identify possible sources of serious user-system or interface difficulties
  • Cross check (cross-validation)
    Quality assurance technique that compares two or more field inputs.
  • Data entry field
    A visually well-defined location on a page where users may type data.
  • Decision table
    An information mapping method that tables complicated logic
  • Deep linking
    Hypertext link to a page on a Web site other than its home page
  • Design validation
    An assessment of a website's functions and elements correspondence as identified initially with the design and the end user?s actual needs.
  • Design verification
    An assessment of the interface's correspondence with the design that was defined
  • Destination page
    The location in a Web site where a given user goes after clicking on a link. [See also Target page or Landing Page]
  • Download time
    The amount of time required for a requested page to fully appear on a user's screen.
  • Engaging or Engagement
    Capturing the user's attention or interest or maintaining their interaction.
  • Experience architecture
    Multidisciplinary approach to technology involving information architecture, interaction design and experience design practices that aim to provide a good user experience and benefit business.
  • Expert evaluation or Expert review
    See Heuristic evaluation.
  • Feature-centric
    An approach to technology that favors the complexity or amount of functionality over the user experience.
  • Fluid layout
    When a page contracts and expands horizontally inside a persons web browser despite the size of the browser window or the resolution of the monitor.
  • Font
    A particular typeface, size, pitch and spacing.
  • Font color
    The color of the text.
  • Font readability
    How easy or difficult it is to read a collection of words in a specific type style.
  • Font size
    The height of a font measured in points.
  • Forced device jumping (keyboard/mouse switching)
    Unneccesarily forcing users to change input devices to complete tasks.
  • Form elements
    Input elements like text fields, checkboxes, radio-buttons, submit buttons, select lists, textarea, fieldset, legend, and label elements.
  • Forms
    HTML pages used to pass data to a server.
  • Frame
    A feature supported by most browsers that enables the designer to divide the display area into two or more sections (frames). The contents of each frame behave like different Web pages.
  • Function
    An action or capability which a system or subsystem fulfills.
  • Gestalt Principles
    People do not visually perceive items in isolation, but as part of a larger whole. These principles include humans tendencies towards similarity, proximity, continuity, and closure.
  • Global elements
    Page links or functions of a website or application that are present throughout.
  • Global navigation
    A means to access primary content or functions from every page
  • Gloss
    An automated action that provides summary information on where a link will take a user prior to the user clicking on the link. Often, glosses appear as a small "pop-up" text box adjacent to a link. The gloss appears as the user moves the mouse over the link that is programmed with the gloss.
  • Graceful Degradation
    When a site utilizes new technology, if disabled, the content maintains effectiveness for the users.
  • Graphic design
    See Visual Design
  • Graphic elements
    An element of a user interface that displays information or can be manipulated by the user to pursue a task.
  • Graphic links
    Interactive links that reside in an image rather than hypertext.
  • Graphical User Interface (GUI)
    See User Interface
  • Graphics
    Images, icons, patterns or other visual representations.
  • Grid systems
    A system of horizontal and vertical lines providing a structural basis for page layout and design.
  • Heading
    The title, subtitle, or topic that stands at the top or beginning of a paragraph or section of text.
  • Hierarchical drill-down
    To move from high level or summary information to detailed content or data focusing in on a topic.
  • Hierarchical structures (in information architecture)
    Sometimes called a tree structure where nodes have a parent /child relationship to each other.
  • High-Fidelity Prototype
    An interactive prototype that simulates the real system or site's functionality and design details. [See also Low-Fidelity Prototype]
  • Hover help or Tool tip/Tooltip
    Usually a smaller box with information that appears or pops up if a user puts their mouse over a designated graphical element or text.
  • Hues
    The frequency of the wavelength of color; what we normally refer to as the "color" of an object.
  • Human Factors
    The multidisciplinary study of human biological, physical, psychological, and social characteristics in relation to environments, objects and services.
  • Human Factors Engineering (HFE)
    Applying what is known about human capabilities and limitations to the design of products, processes, systems, and work environments. It can contribute to the design of any system with a human interface, including hardware and software.
  • Human-Computer Interaction (HCI)
    The study of interaction between people (users) and hardware, software, websites and mobile devices. It involves computer science, behavioral sciences, design and other fields of study.
  • Hybrid navigation model (hybrid structure)
    A combination of navigation structures incorporates some combination of components possibly including sequential and/or hierarchical IA designs.
  • Hyperlinks
    An element on a web page that navigates a user to another page or location within the same page. These are conventionally blue and underlined.
  • Icon graphic
    An image that is usually interactive and represents an object or action or marker for entry into information.
  • Image links
    A clickable image hyperlinked for internal linking and web site navigation without supporting text.
  • Image map
    Regions of a single graphic image are designed to be clickable and hyperlinked to different pages or destinations.
  • Image placeholders
    Text that provides users with descriptive information about a graphic while it is downloading.
  • Interaction Design (IXD)
    The study of how a user interacts with a page, application or product.
  • Interface
    A view or presentation of an object or program.
  • Interface Design
    See Interaction Design, Visual Design
  • Internal links
    Hyperlinks within a page or site which point to additional content within the same site.
  • Internationalization
    A system whose primary design has been developed to work in multiple languages and in the cultural contexts of different locales.
  • Interviews
    One-on-one interactions between end-users and researchers to gather data about the conceptual model or design of a system.
  • Iterative testing
    A methodology in which a product is tested and changed repeatedly at different stages of design/development to eliminate usability issues before the product is launched.
  • Javascript
    A popular programming language that's built into all the major web browsers and is used to make web pages interactive.
  • Joint Advisory Design (JAD) sessions
    Meetings in which developers and users collaborate to discuss aspects of an interface under development.
  • Kerning
    The space between characters in a font.
  • Labeling systems
    The consistent selection and placement of labels that best accommodates navigation.
  • Landing page
    The location in a Web site where a given user goes after clicking on a link. Also Target page or Destination page.
  • Learnability
    How easy or difficult it is to learn to effectively use a system or interface.
  • Liquid design
    A design technique that automatically scales to fit the user's browser.
  • Local navigation
    Refers to navigation within a local area of a site or application including sub-site navigation and page-level navigation.
  • Look and Feel
    The consistent visual design and application of a corporate identity to an interface.
  • Low-Fidelity Prototype
    Low cost, illustrated design or concept usually sketched on paper or created as flat images. [See also high-Fidelity Prototype]
  • Luminance
    Subjective brightness, intensity of light.
  • Masthead
    The (usually) graphical banner at the top of a Web page that identifies the organization or group that hosts the Web site. The masthead typically contains the name of the organization and site (if different) and an organizational logo.
  • Memorability
    The degree to which users can remember how to use an interface
  • Metadata
    Data about data, it can be used to describe content on a web page or information in any other sort of media.
  • Minesweeping
    An action designed to identify where on a page links are located. Minesweeping involves the user rapidly moving the cursor or pointer over a page, watching to see where the cursor or pointer changes to indicate the presence of a link. [See also Mouseover]
  • Modal/non-modal OR modality
    A page or window that forces the user's interaction.
  • Monochrome
    Paintings, drawings, design, or photographs in one color or shades of one color.
  • Mouseover
    A Web interaction wherein some visually-apparent change occurs to an item when the user's cursor/pointer is placed over the item. Examples of visually-apparent change includes links highlighting (words, images, etc.), cursors/pointers changing shape, or menus opening. [See also Minesweeping]
  • Navigation
    The means by which users to get from page to page on a website.
  • Navigation design
    A design phase that interprets information architecture and task flows into wireframes or mockups to demonstrate and test the site structure and visual direction.
  • Navigation page
    A Web page that contains no content and that is designed solely to direct or redirect users. Navigation pages may be designed as homepages, site maps, site overviews, etc.
  • Negative space
    Unused space or white space.
  • Page density
    A measure of the percentage of the screen that is filled with text and graphics.
  • Page flow
    A hierarchy or sequence suggested by arrangement of elements on a page.
  • Page templates
    Predefined layouts or formats for sets of common web pages.
  • Page title
    Page titles refer to the text located in the browser title bar (this is the bar found at the very top of the screen of common browsers).
  • Pagination
    Dividing information into separate sequentially numbered or linked pages.
  • Paging
    A Web site design methodology that requires users to follow a series of "Next page" links to read an entire article. Moving from page-to-page is an alternative to scrolling through long pages.
  • Panels
    Visually and thematically-defined sections of a Web page. Panels are frequently placed in the left and right margins of pages. Panels often contain navigation aids, including related links. Content is not usually placed in left or right panels.
  • Paper Prototyping
    A prototyping method in which paper models are used to simulate computer or web applications.
  • Parallel Design
    A design methodology that involves several designers pursuing the same effort simultaneously, but independently, with the intention to combine the best aspects of each for the ultimate solution.
  • Path
    The route taken by a user as they move through a Web site. The path can be shown by breadcrumbs.
  • Physical consistency
    Physical consistency refers to the "look and feel" of a Web site. Physically consistent Web pages will have logos, headers, and navigation elements all located in the same place. The pages also will use the same fonts and graphic elements across all pages in the site.
  • Plug-in
    A software module that adds a specific feature or service to a larger system. For example, there is a number of plug-ins for common browsers that enable them to display different types of audio and video.
  • Point-and-click
    A term used to describe conventional Web surfing behavior. When a user visually identifies a link they wish to follow, they place their mouse pointer over the link (point) and depress the appropriate button on the mouse (click). [See also Mouseover]
  • Pop ups
    A window that is opened up by the browser, not by the user.
  • Pop-under/Pop-up
    A pop-under or pop-up is a window that is automatically invoked when a user loads a Web page. Pop-under appears below the active browser window, whereas pop-ups appear above the active window and can obscure screen contents.
  • Product Design or Industrial Design
    Design of consumer products that considers usability, human factors, ergonomics, and appearance while still maintaining function.
  • Prototype
    A preliminary model or archetype of a web page or website used to demonstrate or test the user experience and various task flows. [See also Low & High Fidelity Prototypes]
  • Pushbutton
    Pushbuttons are screen-based controls that contain a text label or an image (or both). Pushbuttons are used to provide quick and convenient access to frequently-used actions. The pushbutton control is always activated with a single click of a mouse button. Clicking on pushbuttons should cause the indicated action to take place, i.e., "search." Do not use pushbuttons to move from one location to another in a Web site.
  • Query
    A filtered request from a database.
  • Query strings
    A filter request from a database contained in the URL of a webpage.
  • Radio button
    A screen-based control used to select one item from a list of mutually-exclusive items (i.e., use radio buttons when only one item in a list of several items can be selected).
  • Rapid Prototyping
    Quickly generating mockups of what a system will look like to facilitate internal review or testing.
  • Readability
    The degree to which users can easily and accurately read information on a web page
  • Responsive Design
    A web design approach aimed at crafting sites to provide an optimal viewing experience across platforms and devices.
  • Rollovers
    A state change that involves one element being replaced by another upon the mouse going over it.
  • Scanability
    How easy it is to read and understand a body of text.
  • Scanning
    An information-retrieval method whereby users look quickly through a Web page looking for target information (headers, keywords, etc.). Scanning can be a quick and efficient information-retrieval method if Web pages are designed to accommodate scanning.
  • Screen reader
    A software program used to allow reading of content and navigation of the screen using speech or Braille output. Used primarily by people who have difficulty seeing. JAWS and NVDA are examples.
  • Screenful
    A screenful is defined as that portion of a Web page that is visible on any given user's monitor or screen at any given point in time. The size of the screenful is determined by the user's monitor size, screen resolution settings, and the user's selected font size.
  • Scroll bar
    The scroll bar is visible along the right edge of common browsers. It is defined by a movable box that runs on a vertical or horizontal axis.
  • Scroll stopper
    A graphic or other page element that may visually impede a user from scrolling to the true top or bottom of a page. Misplaced headers, horizontal lines, or sections of text in very small fonts may act as scroll stoppers.
  • Scrolling
    A method of traversing a Web page wherein users either roll the scroll wheel on their mouse, or manually move the scroll bar located on the right side of their browser's screen.
  • Section 508 [see also 508]
    Section 508 of the Rehabilitation Act was enacted to eliminate barriers in information technology, to make available new opportunities for people with disabilities, and to encourage development of technologies that will help achieve these goals. The law applies to all Federal agencies when they develop, procure, maintain, or use electronic and information technology. To learn more go to 508.gov.
  • Serif
    A projection off of the stroke of a character
  • Server-side (image map)
    Occurring on the server side of a client-server system. For example, on the Web, CGI scripts are server-side applications because they run on the Web server. In contrast, JavaScript scripts are client-side because they are executed by the browser (the client). Java applets can be either server-side or client-side depending on which computer (the server or the client) executes them.
  • Signal/noise ratio
    The proportion of strong messaging (signal) with extraneous information (noise)
  • Similarity
    Perception that elements of the same size, shape or color belong together
  • Simultaneous menus
    Menus that simultaneously display choices from multiple levels in the menu hierarchy, providing users with the ability to make menu choices in any order.
  • Site map
    A clickable, graphic- or text-based display of a Web site's hierarchy.
  • Static menus
    Menus that always shows the same choices
  • Storyboard
    A visual representation of how a user will interact with an application or interface.
  • Style sheet
    A set of statements that specify presentation of a document. Style sheets may have three different origins: they may be written by content providers, created by users, or built into browsers or plug-ins.
  • Tab
    A graphical navigation element that is most often placed at the top of a Web page. Effective tabs should be designed so that they resemble real-world file folder tabs.
  • Tagline
    A phrase or short sentence placed directly below a Web page's masthead. The tagline functions to quickly identify the purpose of the Web site. It may be a subtitle, an organizational motto, or a vision or purpose statement.
  • Target audience
    The set of users for which a system is designed or intended.
  • Target page
    The location in a site where a user will find the information they are seeking. [See also Destination page]
  • Task
    A procedure that includes goals, steps, skills, start state, inputs, end state, and outputs to accomplish an activity.
  • Task analysis
    A method used to identify and understand the activities to be performed by users when interacting with a Web site.
  • Thumbnail image
    A small copy of a larger image.
  • Tool tip/Tooltip or Hover help
    Usually a smaller box with information that appears or pops up if a user puts their mouse over a designated graphical element or text.
  • URL
    URL is an abbreviation for Uniform Resource Locator. Every Web page has a URL that is used to identify the page and the server on which the page resides.
  • Usability
    How effectively, efficiently and satisfactorally a user can interact with a user interface.
  • Usability evaluation or assessment
    A variety of techniques for measuring usability.
  • Usability testing
    Usability testing includes a range of test and evaluation methods such as automated evaluations, inspection evaluations, operational evaluations and human performance testing. In a typical performance test, users perform a variety of tasks with a prototype (or an operational system) while observers note what each user does and says and performance data are recorded. One of the main purposes of usability testing is to identify issues that keep users from meeting the usability goals of a Web site.
  • Use Experience (UE, UX)
    A broad term for several disciplines that study the effect of design on the ease of use and level of satisfaction with a product, site or system.
  • User Interface (UI), or Graphical User Interface (GUI)
    What the user sees.
  • User interface structure
    The basic content organization and its navigation model.
  • User research
    The study of the user's reactions to and interactions with a system.
  • User-Centered Design (UCD)
    An approach to designing a product or service (e.g. user interface design), in which the end user is placed in the center of the process.
  • Waterfall model
    A linear design process whereby, steps are completed and the project passes onto the next phase with evaluation completed at the end.
  • White Space
    The use of blank (uncluttered) space on a page to promote content and navigation.
  • Widget
    Screen-based controls that are used to interact with a Web site and other systems. Widgets include pushbuttons, selection lists, radio buttons, sliders, etc.
  • Wireframe
    A highly simplified sketch of the important information in a page. Also known as page architecture, page schematic, or blueprint
  • Within-page links
    Within-page links are used on content pages that contain several (e.g., three or more) screenfuls of information. Within-page links are best arranged as a table of contents for the page. Within-page links allow users to skip through textual information, resulting in a more efficient information-finding process. [See also Anchor links]
  • WYSIWYG
    An acronym for "What you see is what you get." It describes the way in which the layout on the graphical screen is a representation of the printed version of the document.