GoConqr has a new look! Let us know what you think.

Sign up free

Flashcards

Design Pattern Quiz Review

D L UX Design English 108 cards

Design Pattern Quiz Review

Cards in this deck (108)

  1. 1A three-element combo on the main page of interface: a featured item, article, or product; a search box and a list of items or categoriesFeature, Search, BrowseA three-element combo on the main page of interface: a featured item, article, or product; a search box and a list of items or categories
  2. 2presents actionable information without requiring any input or action from the user. Makes assumptions about any settings or queries (such as location or time) related to its primary function, and presents the output for immediate response.Mobile Direct Accesspresents actionable information without requiring any input or action from the user. Makes assumptions about any settings or queries (suc...
  3. 3A continuously updated series of images, news stories, web articles, comments, or other content presented in a scrollable, vertical (sometimes horizontal) strip or rib‐ bon. Usually presented as cards. (ex. news pages, twitter, etc.)Streams and FeedsA continuously updated series of images, news stories, web articles, comments, or other content presented in a scrollable, vertical (some...
  4. 4Arrange a list of visual items into a “small multiples” grid of photos, features, applications ex. netflix, google photos, etc.Thumbnail GridArrange a list of visual items into a “small multiples” grid of photos, features, applications ex. netflix, google photos, etc.
  5. 5often the first screen a customer will see when logging in to a consumer or business platform. They show users relevant, actionable information, charts and graphs, and important messages and links or buttons, often related to key metrics or workflows.Dashboardoften the first screen a customer will see when logging in to a consumer or business platform. They show users relevant, actionable infor...
  6. 6An application structure defined by a central workspace with containers of tools around it. CANVAS, PALETTE, TOOL OPTIONS (photo editing apps, painting apps, figma)Canvas Plus PaletteAn application structure defined by a central workspace with containers of tools around it. CANVAS, PALETTE, TOOL OPTIONS (photo editing ...
  7. 7A feature or component that leads the user through the interface step by step to do tasks in a prescribed order.WizardA feature or component that leads the user through the interface step by step to do tasks in a prescribed order.
  8. 8An easy-to-find, self-contained page or window where users can change settings, preferences, or properties. Divide the content into separate tabs or pagesSettings EditorAn easy-to-find, self-contained page or window where users can change settings, preferences, or properties. Divide the content into separ...
  9. 9Views or methods of visualizing information in your software or app that are sub‐ stantially different from one another but offer access to the same information.Alternative ViewsViews or methods of visualizing information in your software or app that are sub‐ stantially different from one another but offer access ...
  10. 10An interface where users can view more than one page, project, file, or context at a time. It can consist of multiple top-level tabs, tab groups, streams/feeds, panels, or windows.Many WorkspacesAn interface where users can view more than one page, project, file, or context at a time. It can consist of multiple top-level tabs, tab...
  11. 11Providing labels, hover tools, links, and descriptions of how to use the interface are a fundamental part of making usable software.Help SystemsProviding labels, hover tools, links, and descriptions of how to use the interface are a fundamental part of making usable software.
  12. 12method of classifying and categorizing information by adding labels to it (keyword: TAGS #)Tagsmethod of classifying and categorizing information by adding labels to it (keyword: TAGS #)
  13. 13Collections are series of thumbnail photos that serve as a list of items from which a user can choose. Cards are similar but they contain con‐ tent and functionality.Collections and CardsCollections are series of thumbnail photos that serve as a list of items from which a user can choose. Cards are similar but they contain...
  14. 14shows more and more content as the user scrolls to the bottom of a long listInfinite Listshows more and more content as the user scrolls to the bottom of a long list
  15. 15Leave lots of space around tappable UI elements.Generous BordersLeave lots of space around tappable UI elements.
  16. 16animations used to inform the user that something is going to happen but it just hasn’t appeared on the screen yetLoading or Progress Indicatorsanimations used to inform the user that something is going to happen but it just hasn’t appeared on the screen yet
  17. 17Use the features that come for “free” with your mobile device. ex. direct links to other apps: camera, the phone dialer, map, or browser; and prefilling credit card passwords and addressRichly Connected AppsUse the features that come for “free” with your mobile device. ex. direct links to other apps: camera, the phone dialer, map, or browser;...
  18. 18Present only a few main entry points into the interface so that the user knows where to start (Starting Page)Clear Entry PointsPresent only a few main entry points into the interface so that the user knows where to start (Starting Page)
  19. 19Link together a sequence of pages with Back/Next links. Create a parent page that links to all of the pages in this sequence, and let the user view them either in sequence or out of order.PyramidLink together a sequence of pages with Back/Next links. Create a parent page that links to all of the pages in this sequence, and let the...
  20. 20Capture the state of a site or app in a URL or other link that can be saved or sent to other people. ex. open in youtube? pop up linkDeep LinksCapture the state of a site or app in a URL or other link that can be saved or sent to other people. ex. open in youtube? pop up link
  21. 21A well-labeled button or link that clearly gets the user out of their current screen and back to a known place.Escape HatchA well-labeled button or link that clearly gets the user out of their current screen and back to a known place.
  22. 22Display a long list of navigation options in drop-down or fly-out menus. Also called “mega-menus.Fat MenusDisplay a long list of navigation options in drop-down or fly-out menus. Also called “mega-menus.
  23. 23A comprehensive directory of links, organized into categories, that provides an at-a- glance review of the full scope of the website, and links to all major sections and pagesSitemap FooterA comprehensive directory of links, organized into categories, that provides an at-a- glance review of the full scope of the website, and...
  24. 24Place utility navigation related to a signed-in user’s site experience in the upper-right corner ex. shopping carts, profile and account settings, help, and sign-out buttons.Sign-in ToolsPlace utility navigation related to a signed-in user’s site experience in the upper-right corner ex. shopping carts, profile and account ...
  25. 25On each page in a sequence, show a map of all the pages in order to show steps in a process, including a “You are here” indicatorProgress IndicatorOn each page in a sequence, show a map of all the pages in order to show steps in a process, including a “You are here” indicator
  26. 26specific type of navigation that shows the path from the start‐ ing screen down through the navigational hierarchy, the content architecture of the site, to the selected screenBreadcrumbsspecific type of navigation that shows the path from the start‐ ing screen down through the navigational hierarchy, the content architect...
  27. 27serves as a notification or as a map of the content in the current document or screen, or as a “You are here” indica‐ tor.Annotated Scroll Barserves as a notification or as a map of the content in the current document or screen, or as a “You are here” indica‐ tor.
  28. 28Across an entire app or site, all screen templates share common characteristics to maintain a consistent layout and styleVisual FrameworkAcross an entire app or site, all screen templates share common characteristics to maintain a consistent layout and style
  29. 29The task at hand is placed front and center at most times in the user experienceCenter StageThe task at hand is placed front and center at most times in the user experience
  30. 30Arrange content items, such as search results, into a grid or matrix.Grid of EqualsArrange content items, such as search results, into a grid or matrix.
  31. 31Define separate sections of content by giving each one a visually strong title, separat‐ ing the sections visually, and arranging them on the page.Titled SectionsDefine separate sections of content by giving each one a visually strong title, separat‐ ing the sections visually, and arranging them on...
  32. 32Put modules of content into small tabbed areas so that only one module is visible at a time. The user clicks or taps on tabs to bring different content to the top.Module TabsPut modules of content into small tabbed areas so that only one module is visible at a time. The user clicks or taps on tabs to bring dif...
  33. 33Put modules of content into a collinear stack of panels that the user can close and open independently of one anotherAccordionPut modules of content into a collinear stack of panels that the user can close and open independently of one another
  34. 34Put modules of secondary or optional content or functions into panels that can be opened and closed by the userCollapsible PanelsPut modules of secondary or optional content or functions into panels that can be opened and closed by the user
  35. 35Put modules of content in boxes that can be opened and closed independently of one another.Movable PanelsPut modules of content in boxes that can be opened and closed independently of one another.
  36. 36also called a Launchpad, was the most popular navigation pattern in 2011 . This design is a landing screen with options that act as launch points into the application . (9x9 grid)Springboardalso called a Launchpad, was the most popular navigation pattern in 2011 . This design is a landing screen with options that act as launc...
  37. 37each list item is a launch point into the application, and switching modules requires navigating back to the listList Menueach list item is a launch point into the application, and switching modules requires navigating back to the list
  38. 38gives the user a snapshot of the most relevant information she needs to know, without making her navigate into another screen .Dashboardgives the user a snapshot of the most relevant information she needs to know, without making her navigate into another screen .
  39. 39displays live content—like news stories, recipes, or photos—arranged in a gridGallerydisplays live content—like news stories, recipes, or photos—arranged in a grid
  40. 40how an interface organizes their different tabs..self explanatoryTab Menuhow an interface organizes their different tabs..self explanatory
  41. 41- overlay, meaning a swipe or tap gesture will reveal a drawer that partially covers or over- laps the original screen content -inlay, in which a swipe, pan, or tap will open a drawer that pushes the original screen content partially off-canvasSide Drawer- overlay, meaning a swipe or tap gesture will reveal a drawer that partially covers or over- laps the original screen content -inlay, in...
  42. 42an inlay that pushes the content down below the menu or overlay from the topToggle Menuan inlay that pushes the content down below the menu or overlay from the top
  43. 43also known as wheels, circular menus, or radial menusPIe Menualso known as wheels, circular menus, or radial menus
  44. 44This pattern can be used to navigate quickly through content using the swipe gesture . (via page indicators (the iOS term for the horizontal line of little dots)Page SwipingThis pattern can be used to navigate quickly through content using the swipe gesture . (via page indicators (the iOS term for the horizon...
  45. 45useful for displaying multiple categories or views within a specific module. they are an affordance to swipe horizontally .Scrolling Tabsuseful for displaying multiple categories or views within a specific module. they are an affordance to swipe horizontally .
  46. 46consists of two side-by-side panels on the interface.Two-Panel Selector or Split Viewconsists of two side-by-side panels on the interface.
  47. 47Show a list of items in a single screen or window.One-Window DrilldownShow a list of items in a single screen or window.
  48. 48Show a list of items as rows in a column. When the user selects an item, open that item’s details in placeList InlayShow a list of items as rows in a column. When the user selects an item, open that item’s details in place
  49. 49Cards are self- contained components that have images, text, and sometimes actionsCardsCards are self- contained components that have images, text, and sometimes actions
  50. 50Arrange a list of visual items into a “small multiples” grid of photos,Thumbnail GridArrange a list of visual items into a “small multiples” grid of photos,
  51. 51Arrange a list of visually interesting items arranged into a horizontal strip or arc to the user scroll or swipe the image thumbnails back and forth to view them.CarouselArrange a list of visually interesting items arranged into a horizontal strip or arc to the user scroll or swipe the image thumbnails bac...
  52. 52Break up a very long list into pages, and load them one page at a time. Provide controls to navigate the listPaginationBreak up a very long list into pages, and load them one page at a time. Provide controls to navigate the list
  53. 53When the user types the name of an item into a list, jump straight to that item, as depicted inJump to ItemWhen the user types the name of an item into a list, jump straight to that item, as depicted in
  54. 54Display the letters of the alphabet, numbers, or a timeline arrayed along the scroll bar of a listAlpha/Numeric ScrollerDisplay the letters of the alphabet, numbers, or a timeline arrayed along the scroll bar of a list
  55. 55Use the last or first row in the list or table to create a new item in place, as in the fourth list itemNew-Item RowUse the last or first row in the list or table to create a new item in place, as in the fourth list item
  56. 56Permit users to enter inputs in a variety of choices, formats, and syntax, and make the application interpret it intelligently.Forgiving FormatPermit users to enter inputs in a variety of choices, formats, and syntax, and make the application interpret it intelligently.
  57. 57Instead of using one text field, use a set of text fields that reflect the structure of the requested data.Structured FormatInstead of using one text field, use a set of text fields that reflect the structure of the requested data.
  58. 58Arrange one or more fields in the form of a prose sentence or phrase, with the fields as “blanks” to be filled in by the userFill-in-the-blanksArrange one or more fields in the form of a prose sentence or phrase, with the fields as “blanks” to be filled in by the user
  59. 59Beside or below an empty text field, place a phrase or example that explains what is required or gives additional detail about what is being requested.Input HintsBeside or below an empty text field, place a phrase or example that explains what is required or gives additional detail about what is be...
  60. 60Prefill a text field with an example input or instructional text that helps the user with what to do or type. PLACEHOLDER TEXTInput PromptPrefill a text field with an example input or instructional text that helps the user with what to do or type. PLACEHOLDER TEXT
  61. 61—Password Strength MeterPassword Strength Meter
  62. 62as the searcher enters their term(s) into the search input field, offer the most likely match based on the available string of characters.Autocompletionas the searcher enters their term(s) into the search input field, offer the most likely match based on the available string of characters.
  63. 63—Sign inSign in
  64. 64—RegistrationRegistration
  65. 65—Registration with PersonalizationRegistration with Personalization
  66. 66Multi-Step registration processes often use process bars to show users where they are and what’s next .Multi-StepMulti-Step registration processes often use process bars to show users where they are and what’s next .
  67. 67—CheckoutCheckout
  68. 68Calculator-style apps, like weight trackers, tax estimators, and loan cal- culators, all require user input .Calculator FormsCalculator-style apps, like weight trackers, tax estimators, and loan cal- culators, all require user input .
  69. 69Some searches require multiple inputs to generate results . Like the other form patterns, Search forms should have only the essential or most requested fields and provide sensible defaults .Search FormsSome searches require multiple inputs to generate results . Like the other form patterns, Search forms should have only the essential or ...
  70. 70Some forms can’t fit on a single screen . In these cases, a long scroll- ing page is vastly preferable to a form broken up across multiple pages recommend that the Command button reside at the top right and the Escape button (typi- cally Back or Cancel) at the top left .Long FormsSome forms can’t fit on a single screen . In these cases, a long scroll- ing page is vastly preferable to a form broken up across multipl...
  71. 71This relevant information finds the user without them having to look for it based on location.Implicit SearchThis relevant information finds the user without them having to look for it based on location.
  72. 72Explicit Search relies on explicit user action to perform the search and get results .Explicit SearchExplicit Search relies on explicit user action to perform the search and get results .
  73. 73—Search with Auto-CompleteSearch with Auto-Complete
  74. 74blank search field returns all possible category results, and entering a search string dynamically filters down a specific listDynamic Searchblank search field returns all possible category results, and entering a search string dynamically filters down a specific list
  75. 75users can get search results faster and easier if you let them narrow the scope of the search before they actually initiate it .Scoped Searchusers can get search results faster and easier if you let them narrow the scope of the search before they actually initiate it .
  76. 76making it easy to select from previous searches instead of retyping the same keywords or search criteria .Saved, Recent, Popular Searchmaking it easy to select from previous searches instead of retyping the same keywords or search criteria .
  77. 77characterized by a separate form for entering mul- tiple criteria, along with an explicit search buttonSearch Formcharacterized by a separate form for entering mul- tiple criteria, along with an explicit search button
  78. 78Once a search is performed, the results can be displayed on the same screen or on a dedicated results screen.Search Results/View ResultsOnce a search is performed, the results can be displayed on the same screen or on a dedicated results screen.
  79. 79if searches are organized by categories or not need: OnscreenSort SortOverlay SortFormSort Patternsif searches are organized by categories or not need: OnscreenSort SortOverlay SortForm
  80. 80provide a simple one-tap solutionOnscreen Sortprovide a simple one-tap solution
  81. 81can initi- ate the overlay by tapping a sort label or icon, and it can be placed at the top, middle, or bottom of the results screen .Sort Overlaycan initi- ate the overlay by tapping a sort label or icon, and it can be placed at the top, middle, or bottom of the results screen .
  82. 82The Sort Form may require more effort from the user, who must open the form, select an option, and potentially tap “done,” “apply,” or “back .”Sort FormThe Sort Form may require more effort from the user, who must open the form, select an option, and potentially tap “done,” “apply,” or “b...
  83. 83Large sets of data can be so unwieldy as to be almost useless . To make sense of them, users often need to filter, or refine, the results . Filters let users select criteria to reduce data sets to their most manageable, relevant results Common filtering patterns include: • Onscreen Filter • FilterOverlay • FilterForm • FilterDrawer • Gesture-Based FilteringFilter Patterns
  84. 84Onscreen Filter is displayed on the Search Results screen . With one tap, the filter is applied .Onscreen FilterOnscreen Filter is displayed on the Search Results screen . With one tap, the filter is applied .
  85. 85It doesn’t take up valuable screen real estate or force a short label where a longer, more explicit one would work better . The Overlay may be ini- tiated from a Filter or Refine label, or icons that clearly depict the fil- tering criteria that can be applied .Filter OverlayIt doesn’t take up valuable screen real estate or force a short label where a longer, more explicit one would work better . The Overlay m...
  86. 86requires more effort from the user, who must open the form, select one or more options, and explicitly “apply” them .Filter Formrequires more effort from the user, who must open the form, select one or more options, and explicitly “apply” them .
  87. 87it requires an extra tap of “apply” or “done” to get the filtered results . Its main distinction is that it appears to slide out from the current screen, thus allowing the user to stay in context with the search results being refined .FIlter Drawerit requires an extra tap of “apply” or “done” to get the filtered results . Its main distinction is that it appears to slide out from the...
  88. 88Pinch, zoom, and pan gestures can be used for filtering results whose relevance is dependent on location, as on a map, chart, or graph .Gesture-Based FilteringPinch, zoom, and pan gestures can be used for filtering results whose relevance is dependent on location, as on a map, chart, or graph .
  89. 89Visual hierarchy refers to presentation of visual elements on any given layout ex. color, font, texture, contrastVisual Hierarchy
  90. 90you decide what kind of voice that text is “spoken” in. The voice might be loud or soft, friendly or formal, colloquial or authori‐ tative, hip or old-fashioned.Readabilityyou decide what kind of voice that text is “spoken” in. The voice might be loud or soft, friendly or formal, colloquial or authori‐ tativ...
  91. 91make interfaces that visually impaired users can use so they can see what they're doing and not feel sick/hurt by lookingAccessibility
  92. 92style of UI that mimics the characteristics of objects found in real life.Skeuomorphicstyle of UI that mimics the characteristics of objects found in real life.
  93. 93reduce the screen elements to the barest minimumMinimalisticreduce the screen elements to the barest minimum
  94. 94refers to designs where the form is not static or defined but rather generated algorithmically, in relationship to the objects (static or dynamic) that come in proximity video/camera activity to measure and stuffAdaptive/Parametricrefers to designs where the form is not static or defined but rather generated algorithmically, in relationship to the objects (static or...
  95. 95A group of related actions as a small cluster of buttons, aligned and with similar graphic treatments.Button GroupsA group of related actions as a small cluster of buttons, aligned and with similar graphic treatments.
  96. 96Place buttons and other actions next to the items they act upon, but hide them until the user hovers the pointer over them.Hover or Pop-Up ToolsPlace buttons and other actions next to the items they act upon, but hide them until the user hovers the pointer over them.
  97. 97menus that the user doesn’t need to open; they’re always visible on the main interfaceAction Panelmenus that the user doesn’t need to open; they’re always visible on the main interface
  98. 98The ability to reverse a series of actions performed by the userMultilevel UndoThe ability to reverse a series of actions performed by the user
  99. 99—Command HistoryCommand History
  100. 100single actions composed of other, smaller actionsMacrossingle actions composed of other, smaller actions
  101. 101—Social RegistrationSocial Registration
  102. 102lets users access their existing social connectionsConnectinglets users access their existing social connections
  103. 103the Following flow works like this: I’m browsing, I see something interesting (a tweet or a coupon), I look at who shared it, I check out what else that person has shared, and if what I see appeals to me I follow that person .Followingthe Following flow works like this: I’m browsing, I see something interesting (a tweet or a coupon), I look at who shared it, I check out...
  104. 104“introduce” the person with a photo, short bio, and lists of interests .Profiles“introduce” the person with a photo, short bio, and lists of interests .
  105. 105some Groups are implicit within social networks, while others need to be created by users .Groupssome Groups are implicit within social networks, while others need to be created by users .
  106. 106game-like elements in a nongameGamificationgame-like elements in a nongame
  107. 107Fill the page with a list of links to content-rich pages in your site or app. Show enough information about each link to enable the user to choose well.menu pageFill the page with a list of links to content-rich pages in your site or app. Show enough information about each link to enable the user ...
  108. 108A screen with no navigation options other than acknowledging its message, complet‐ ing its form, or clicking the panel away. Modals appear on top of the current screen.Modal PanelA screen with no navigation options other than acknowledging its message, complet‐ ing its form, or clicking the panel away. Modals appea...

Information

Description
UX Design Flashcards on Design Pattern Quiz Review, created by D L on 13/02/2022.
Created by
D L
Views
5
Rating

Feedback

What is it about?

What do you think of the new look?

How do you like it?