The Complete User Interface Flashcards
Why is it important to analyze how other designers use design patterns?
Because it helps you understand what works and what doesn’t.
What is Center Stage?
Center stage is a design pattern where the most important information, panel, window, or toolset appears prominently at the center of the user interface. It helps users focus on what’s important when carrying out tasks.
Center stage, a common user interface design pattern, appears in most application: websites, spreadsheets, and software packages.
What are Movable Pieces?
Movable pieces form a design pattern that supports multitasking. It allows users to resize and move panels or windows around the user interface. The ability to customize the user interface in this way also allows the users to prioritize their tasks and actions. It is a relatively problem-free design pattern to implement in a design.
What are Titled Sections?
Titled sections form a design pattern that helps the user skim contents and identify interesting or useful information. They are sections of content in which each section has a title that clearly indicates the subject of that section. Users will be able to navigate a page quickly and effortlessly. Titled sections thereby help users to complete tasks.
What is Responsive Enabling?
Responsive enabling is a design pattern in which the user is shown all of the information and user interface elements he or she needs for a task, but only those items necessary for the first sub-component of the task are enabled. As the user makes a selection, more options are enabled, whilst other, redundant options are deactivated.
What are Two-panel selectors?
Two-panel selectors form a design pattern that enables users to view a list of items in one panel and view the content of a selected item in another. Traditionally used in email and file management applications, they are helpful when users need to switch between overall items and specific content multiple times while performing a task.
What are scrolling lists?
A scrolling list makes all options available on the page, window or panel, with items further down the list accessed by scrolling. Scrolling lists are often used in user interface designs where there are a number of options that open in a separate section of the dialog box, window, page, or in another panel. Typically, scrolling lists consist of a column of options, arranged in alphabetical order, or some other meaningful sequence. The user can move back and forth (up and down) through these options by clicking the arrows, pressing the directional keys on the computer keyboard, swiping a touchscreen or scrolling a mouse.
What are archive lists?
Archive lists consolidate data sets into broad categories, listed by the day, week, month or year in which the information items were uploaded or edited. As you can see from the example archive list below, for each action on a certain date, the type of action is added to allow the users to narrow their search according to the day and the group to which their target item would belong.
What are list inlays?
A list inlay allows the user to view the contents of all items in a list, from one screen, by simply clicking on the item. Typically, the list shows clear labels or brief descriptions of the contents; then, upon the user’s clicking on an individual item, more in-depth details are shown beneath the corresponding label. The user is then provided with the utility to close the item by clicking on the general region of space occupied by the item contents, the brief list description/label or some designated button/icon, such as a plus/minus symbol.
What are mega dropdown menus?
Mega menus (sometimes spelled “megamenus”) are a type of expandable menu in which many choices are displayed in a two-dimensional dropdown layout. They are an excellent design choice for accommodating a large number of options or for revealing lower-level site pages at a glance.
What are navigation module tabs?
A module tab is a User Interface (UI) design pattern where content is separated into different panes, and each pane is viewable one at a time. The user requests content to be displayed by clicking (or in some instances hovering over) the content’s corresponding tab control.
What is Pagination?
Pagination is a user interface pattern that divides content into separate pages. If you scroll to the bottom of a page and see the row of numbers — that row of numbers is a site’s or app’s pagination.
What is a Global Navigation?
Global navigation is a region of the graphical user interface reserved for buttons, links, search bars, or any other design element affording movement from one set of content to another.
What are Breadcrumbs?
Breadcrumbs are an important navigational element that supports wayfinding — making users aware of their current location within the hierarchical structure of a website. Breadcrumbs are a list of links representing the current page and its “ancestors” (parent page, grandparent page, and so on), typically going all the way back to the site homepage.
What are Search boxes?
A search box, search field, or search bar is a graphical control element used in computer programs, such as file managers or web browsers, and on websites with the dedicated function of accepting user input to be searched for in a database.
What is Inline Linking?
Inline links are a design pattern that uses hyperlinked words—conventionally blue, underlined words—to guide users to another page containing related information. Designers employ inline links so that the information linked from the highlighted words does not clutter the user’s current webpage. Instead, users can follow the link if they are interested in finding out more.
What are Tag clouds?
A tag cloud is a list of tags, where the font size of each tag is larger or bigger depending on its weight. Weight in tag clouds can be represented in three different ways: Size represents the number of times that a tag has been applied to a single item.
Tag clouds were a huge fad in 2009 and have actually been a fad for several years. Even so, usability studies show that most normal users don’t know what they are and don’t know how to deal with them.
What are Sitemap footers?
A sitemap footer is a design pattern used to provide users with links that are important to all users regardless of their current position within the site hierarchy. In this respect, they act similar to the global navigation section of a webpage. Especially in larger websites, sitemap footers tend to relieve the pressure on global navigation bars.
What are input fields?
Input fields are an essential user interface design element, providing users with the means to enter non-standardized responses. They are used in many different situations, but most people will have come across them when entering personal details and delivery addresses on e-commerce web forms, or sending online queries
What is auto-complete?
By giving users the option of completing words and forms based on what they’ve typed before, it shortcuts their search and input tasks.
What is refined search?
A refined search design pattern allows users to zero in on their desired content by indicating the specific category for which they want to display the results. It increases the users’ sense of control of events in the user interface, thereby ensuring the options are more and more specific to their current aims and objectives.
What is a forgiving format?
The forgiving format design pattern allows the user to make mistakes. A forgiving format does not just correct mistakes users make; it also allows the users to take a variety of approaches to a problem so that in the event they do not know or have the ability to take one particular approach, they can resort to another.
What are input hints?
Input hints form a design pattern that helps users establish what information they should enter into an input field. They are concise descriptions given inside or just beside the data entry fields, descriptions that guide users to input the right information. Such hints give users the confidence to complete their tasks without too much mental effort.
What are your achievements?
Displaying achievements involves providing users with information relating to their performance levels. This design pattern can give them the incentive to persevere with a task, depending on the nature of the experience. Moreover, it can encourage users to get involved in an online community by offering them the opportunity to gain collectible achievements (e.g., ‘medals’ or elevated status).
