Elix project vision

Elix project vision

The Elix project aims to create a universal library of all general-purpose user interface patterns commonly found in desktop and mobile UIs, where each pattern is implemented as a high-quality, performant, and extensively customizable web component. We design these components to be as flexible and reliable as the native HTML elements, a quality bar we call the Gold Standard for web components.

We believe acheiving this goal will improve the way people create software. Designers and developers will be able to readily adopt any common UI pattern without hesitation. Instead of wasting time reinventing wheels, app teams will be able to focus on their energy on the specific needs of their users and the unique value of their application. Users will enjoy applications whose fundamental interactions are more predictable and satisfying.

Comprehensive list of user interface patterns

The list below includes the general-purpose patterns which are candidates for the Elix project. Patterns we have already implemented as components are indicated with a link to the relevant component documentation.

  1. Accordion. A list that can have a single item or multiple items expanded to show more detail.
  2. AlertDialog. Asks a single question the user can answer with a set of choices.
  3. Alphabetic indices. Renders the characters in a culture’s alphabet in standard order (e.g., as a vertical or horizontal strip). If supplied with a set of strings (or array of objects with key pointing to the important data member?), the UI will disable those characters which are not found as the initial character of any string.
  4. Async operation button. A button whose caption changes to reflect an operation in progress (e.g., changing from “Sign In” to “Signing In...”) until the operation completes. The button is disabled during the operation to avoid confusion and to prevent unnecessary extra clicks.
  5. Auto-complete. A text input field that helps the user quickly enter strings from a known list. This is similar to a combo box, which is arguably better because it adds a button to dropdown and see the list of choices without having to first type. That said, nearly all web implementations of auto-complete have no button to show the choices.
  6. Auto-format. Applies a collection of heuristics for formatting text: adding smart quotes, converts double hyphens to endashes, etc.
  7. AutosizeTextarea. Text area that grows to accommodate its content.
  8. Backdrop. Shows a background region of non-interactive elements behind the region’s main contents.
  9. Breadcrumb bar. Indicates the user’s position in a navigational hierarchy.
  10. Calendar day.
  11. Calendar month navigator. Lets the user select a date, typically in the near future, by navigating through calendar months.
  12. Calendar months. Shows multiple months from a calendar.
  13. Calendar week.
  14. Calendar year.
  15. Carousel. Shows a single item from a navigable collection of items (often images or including imagery).
  16. CarouselSlideshow. Slideshow with carousel controls.
  17. CarouselWithThumbnails. Carousel showing a thumbnail for each image.
  18. CenteredStrip. Horizontal strip of items with selected item centered.
  19. CenteredStripHighlight. Centered strip showing selected item with a highlight color.
  20. CenteredStripOpacity. Centered strip showing unselected items with partial opacity.
  21. Checked list box. A list box showing a check box next to each item; the user can create a multiple selection by checking the boxes.
  22. Close box. A platform-sensitive representation of a button that will close the current dialog or window.
  23. Closable panel. Shows information (e.g., a warning, or the result of a completed operation) that can be dismissed to remove the panel from the visible page.
  24. Color wheel. Lets the user select a color in a variety of color spaces.
  25. Combed text box. A text box sporting tick marks or vertical lines to visually indicate how many characters should be entered. (Combine with masked input?)
  26. Combo box.
  27. Content with banner(s). Such as toolbar (on top) or status bar (on the bottom).
  28. Content with sidebar(s) on the left and/or right side.
  29. Date combo box / date picker. On desktop, lets the user type a date or choose one from a dropdown calendar. On mobile, opens a half-screen or full-screen date picker.
  30. Date range calendar. Lets the user select a date range, typically in the near future.
  31. Date text box. Lets the user type a date in several culture-specific formats.
  32. Delimited list. A list of items interspersed with a decorative element (bullet, vertical bar, etc.) for cleaner delineation.
  33. Dialog. A modal overlay.
  34. Drawer. Modal panel that slides in from the side of the page.
  35. DropdownList. A button that shows the current choice made from a menu of choices.
  36. Editable in place. An element that supports its own in situ editing.
  37. Editable text. A piece of static text data which can be clicked to produce a text box that can then be used to edit the data.
  38. ExpandablePanel. Expands/collapses in place with an animated transition.
  39. Expandable summary. A block of content with a “More” link at bottom; clicking this reveals the remainder of the content.
  40. Explorer. Synchronizes two elements that both support selection, typically a larger "stage" element showing a single selected item at a time, and a list of proxies for the complete set of possible choices.
  41. Fade overflow.
  42. File uploader. Allows the user to click or drag-and-drop to supply a single file for upload.
  43. Full screen expandable. A region supporting a mode in which the region will expand to fill the entire screen.
  44. Full screen. A region which fills the viewport, independent of the size of the page content.
  45. Gesture navigation. Allows the user to move between pages with swipe gestures.
  46. HamburgerMenuButton. Button that invokes a mobile navigation menu.
  47. Infinite list. A list which asynchronously loads additional contents as the user scrolls.
  48. Labeled input. An HTML input control (generally a check box or radio button) with an associated clickable label.
  49. Lazy list.
  50. Link list. Uses a platform-sensitive presentation of a set of links (or items that behave like links).
  51. ListBox. Single-selection list of items.
  52. ListExplorer.
  53. List combo box. A combo box which presents its choices as a dropdown list.
  54. ModalBackdrop. A Backdrop whose visual design signals that the overlay on top of it is modal.
  55. Media specific. Conditionally shows contents based on the type of device being used and/or device capabilities.
  56. Masked text. A text box which only accepts specified input characters.
  57. Menu bar. A row of menus.
  58. Menu. A popup menu, often in a menu bar.
  59. MenuButton. An element (by default, a button) that invokes a Menu.
  60. MenuItem. A command in a menu.
  61. MenuSeparator. A line separating commands in a menu.
  62. Mobile date/time picker. Platform-sensitive collection of elements which emulate the platform’s native date/time picker.
  63. ModalBackdrop. Semi-transparent backdrop for a modal overlay.
  64. Modes. Shows a single panel at a time.
  65. Multi list box. A list that supports multiple selection, including keyboard navigation.
  66. Multiple file uploader. Allows the user to click or drag-and-drop to supply multiple files for upload.
  67. Number with units. Facilitates entry of a number with units (e.g., “10 in.”, “5 minutes”, “60 kg”). Accepts an array of allowable units.
  68. Overlay. A transparent or semi-transparent blanket over the entire page which absorbs interactions outside a modal element. May be able to use Polymer’s overlay component.
  69. OverlayFrame.
  70. Packed columns. Packs its children into a dynamic number of columns of roughly equal height (e.g., see the Pinterest home page).
  71. PageDot. A small dot used as a proxy element for an item in a Carousel.
  72. Page number navigator. Indicates the number of pages, e.g. of search results, and also allows navigation to a particular page of results.
  73. Page transitions. Navigates between pages with animated transitions that can vary between navigation operations.
  74. Palette window. A persistent set of tools adjacent to, or superimposed on, a work surface, providing tools for manipulating the information on the surface.
  75. Panel with overflow menu. A panel fixed in width or height which allows any items which don't fit to overflow into a dropdown menu.
  76. Persistent header. A scrolling list in which the header for the group of items currently at the top of the visible list remains visible until the user scrolls the next group to the top. At this point, the new group header pushes the previous group header out of sight.
  77. Persistent navigation bar. When user scrolls page, the navigation bar shrinks to a smaller, but persistent size.
  78. Persistent panel. A panel whose contents will bump up against the top or bottom of a scrolling parent so as to remain always visible.
  79. Popout. An item that can expand (e.g., on hover) without affecting the visual position of surrounding items.
  80. Popup. An modeless element which temporarily pops up over other things.
  81. PopupSource. An element which invokes a Popup.
  82. Process steps. Shows a numbered list of steps in a task. Steps which are not yet available are disabled.
  83. Progress bar. Indicates the fraction of an operation which has been completed.
  84. Progress indicator. Platform-sensitive representation of an ongoing operation whose expected duration is unknown.
  85. Pull to refresh. A region which the user can pull down to reveal a platform-sensitive “Pull to refresh” and “Loading” representation.
  86. Radio button list. A list box showing a radio button next to each item; an alternative way to represent selection in a single-selection list.
  87. Ribbon. A space-sensitive presentation of a set of commands.
  88. Rich text editor. Supports the basics: bold, italic, insert link, etc.
  89. Scroll-up bar. Appears only when user scrolls down, then up. (See article.)
  90. SeamlessButton. A button with no border or background in its normal state, generally used for clickable subelements inside a more complex component.
  91. Seamless iframe.
  92. Search box. A text box with standard decorations (magnifying class, customizable “Search” hint) to suggest a search field.
  93. Slider. Accepts a discrete number in a constrained range.
  94. Slideshow. Plays through a collection of items with a simple crossfade transition.
  95. SlideshowWithPlayControls. Slideshow with buttons for controlling playback.
  96. SlidingPages. Primitive carousel supporting multiple input modes but no UI of its own.
  97. SlidingStage. Slides between selected items on a horizontal axis.
  98. Spin box. Accepts a discrete number, potentially in a constrained range.
  99. Splitter. A movable line sitting between two panels which can be dragged to change their relative sizes.
  100. Stacked navigation pages. As the user navigates deeper in an app, a small residual portion of the previous page remains visible (typically on the left); the user can swipe away the top page to navigate back to an earlier point.
  101. Star rating. Lets the user rate something (a restaurant, product, etc.) using the conventional star system.
  102. TabButton. Generic tab button with a text label.
  103. Tabs. Basic tabs structure for navigation and configuration.
  104. TabStrip. Strip of tab buttons.
  105. Tag text box. Tokenizes text input into a set of tags, and provides auto-completion against a set of existing tags.
  106. Text box with button. A control with a content area (usually some form of text box) and an associated button (“Go”, “Submit”, etc.).
  107. Time combo box / time picker. On desktop, lets the user type a time or choose one from a dropdown time picker. On mobile, opens a half-screen or full-screen time picker.
  108. Timeline. Positions items on a horizontal time axis.
  109. Toggle button. A button the user can click to toggle its selected state.
  110. ToolTip. A popup that appears when hovering the mouse over another element, providing more detail about that element.
  111. Toast. A message which briefly appears on a page before automatically disappearing. Typically used to display feedback after an operation has completed (e.g., “Message sent”) without requiring user acknowledgement.
  112. Tree view. Visually renders a hierarchy of items as a tree whose branches can be expanded and collapsed.
  113. Validating text input. Verifies that text input content meets some criteria.
  114. Vote up/down. A pair of buttons to vote something up or down; can reflect the current state of the user’s vote.
  115. Wizard. Steps the user through a task through a small set of pages.

In our ongoing study of user interface patterns, we occasionally add new patterns to the list. We have also found that implementing a pattern often uncovers variations or new patterns that we ultimately add to the list.

We welcome new ideas. Please keep in mind that our goal is to provide great implementations of the patterns people are already using widely in production apps, not to design or promote novel user interface patterns.