ui elements Articles & Videos

  • The Two UX Gulfs: Evaluation and Execution

    With every interaction, users must overcome the twin challenges of understanding the current state of a system and figuring out how to change it. Designers can support them by being aware of these gulfs and bridging them with a transparent conceptual model.

  • "Get Started" Stops Users

    A generic Get Started call-to-action attracts clicks, but also misleads users and acts as a roadblock for those looking to get information about the company.

  • Modal & Nonmodal Dialogs: When (& When Not) to Use Them

    Modal dialogs interrupt users and demand an action. They are appropriate when user’s attention needs to be directed toward important information.

  • Why Zen Mode Isn’t the Answer to Everything

    Interfaces that temporarily hide the UI elements to emphasize content often increase the interaction cost, cognitive load, and the number of attention switches.

  • Visual Indicators to Differentiate Items in a List

    Users are 37% faster at finding items within a list when visual indicators vary both in color and icon compared to text alone. If choosing between using color or an icon, icons with strong information scent perform better than color alone.

  • Usability Testing of Icons

    To ensure that people understand the meaning and purpose of icons, conduct multiple types of tests at various stages of the product-development cycle.

  • List Thumbnails on Mobile: When to Use Them and Where to Place Them

    Decide whether and where to display thumbnails for list items based on the images’ importance relative to associated text, on whether images will be displayed for all list items, and on whether the small images are recognizably different from each other.

  • Slider Design: Rules of Thumb

    Selecting a precise value using a slider is a difficult task requiring good motor skills, even if the slider is well designed. If picking an exact value is important to the goal of the interface, choose an alternate UI element.

  • Accordions on Mobile

    Accordions conserve space in mobile designs but they can also cause disorientation and too much scrolling. Easy design fixes improve the usability of these UI elements.

  • Timing Guidelines for Exposing Hidden Content

    Events triggered via hover or click require distinct timing to avoid accidental activations and ensure that the user feels in control of the interface.

  • Animation for Attention and Comprehension

    Moving elements are a powerful tool to attract users’ attention. When designing an animation consider its goal, its frequency of occurrence, and its mechanics.

  • Maximize the Content-to-Chrome Ratio, Not the Amount of Content on Screen

    On a large screen, hiding the chrome significantly affects discoverability and interaction cost, with virtually no improvement to the content-to-chrome ratio.

  • Icon Usability

    A user’s understanding of an icon is based on previous experience. Due to the absence of a standard usage for most icons, text labels are necessary to communicate the meaning and reduce ambiguity.

  • Instructional Overlays and Coach Marks for Mobile Apps

    Instructions in mobile applications must be designed for optimal scannability, as users tend to dismiss them quickly and do not read thoroughly.

  • Maps and Location Finders on Mobile Devices

    Maps of business locations may be more visually appealing than a simple list view, but they introduce too many usability issues on mobile devices.

  • Scrolling and Scrollbars

    Despite posing well-known risks, websites continue to feature poorly designed scrollbars. Among the ongoing problems that result are frustrated users, accessibility challenges, and missed content.

  • Search: Visible and Simple

    Search is the user's lifeline for mastering complex websites. The best designs offer a simple search box on the homepage and play down advanced search and scoping.

  • Why Frames Suck (Most of the Time)

    Frames break the unified model of the web and introduce a new way of looking at data that has not been well integrated into the other aspects of the web.