graphical user interfaces Articles & Videos

  • Why So Many Info Tips Are Bad (and How to Make Them Better)

    Information tips can clarify complex UIs, but they should not hide essential information, trigger redundant information, or disrupt the current workflow.

  • Designing Effective Contextual Menus: 10 Guidelines

    Contextual menus reduce clutter and interaction cost but have low information scent. Prioritize clarity, consistency, and proximity to balance the tradeoffs.

  • The Floppy Disk Icon as “Save:” Still Appropriate Today?

    Users still recognize the floppy disk icon as ‘save,’ but evolving workflows mean it may no longer be the clearest or most appropriate choice in many cases.

  • The Hamburger-Menu Icon Today: Is it Recognizable?

    Hamburger menus are a more familiar pattern today than 10 years ago, but the same old best practices for hidden navigation still apply.

  • User-Interface Elements: Glossary

    Use this glossary to quickly clarify definitions for key graphical user-interface elements and controls.

  • Alt Text: What to Write

    Images are decorative, functional, or informative. Skip alt text for decorative. Describe the action for functional. Convey the message for informative.

  • Alt Text: Not Always Needed

    Write alt text that communicates an image's purpose without repeating page content. Focus on meaning rather than visual description.

  • Visual Design: Glossary

    Use this glossary to quickly clarify key terms and concepts related to visual design.

  • The Negative Impact of Mobile-First Web Design on Desktop

    Mobile-first web designs cause significant usability issues when viewed on desktop. Content becomes overly dispersed across long scrolling pages with expansive white space and enlarged images and fonts, making it difficult for users to consume and understand the information.

  • Overcoming the Articulation Barrier in Generative AI Using Hybrid Interfaces

    Hybrid user interfaces that combine prompt-based inputs with a graphical user interface (GUI) can make AI image-generation tools more usable by reducing users’ cognitive load and improving discoverability.

  • The UX of Phone-Tree Systems: 16 Usability Guidelines

    Phone trees are often frustrating. Badly designed interactive voice-response (IVR) systems violate many of the 10 usability heuristics.

  • The Dos and Don’ts of Pairing Typefaces

    When choosing typography to use in designs, narrow down your options by understanding the most common classifications, looking for typefaces with multiple variations and distinct characters, and pairing typefaces together with consistency and readability in mind.

  • Similarity Principle in Visual Design

    Design elements that appear similar in some way — sharing the same color, shape, or size — are perceived as related, while elements that appear dissimilar are perceived as belonging to separate groups.

  • Proximity Principle in Visual Design

    Design elements near each other are perceived as related, while elements spaced apart are perceived as belonging to separate groups.

  • The Principle of Common Region: Containers Create Groupings

    In visual design, elements within the same boundary are perceived as related.

  • Drag–and–Drop: How to Design for Ease of Use

    Clear signifiers and clear feedback at all stages of the interaction make drag–and–drop discoverable and easy to use.

  • Touch Targets on Touchscreens

    Interactive elements must be at least 1cm × 1cm (0.4in × 0.4in) to support adequate selection time and prevent fat-finger errors.

  • Toggle-Switch Guidelines

    On/off switches are UI elements that prompt users to choose between 2 mutually exclusive options, always have a default value, and provide immediate results.

  • Don’t Use Split Buttons for Navigation Menus

    Menu on hover, category landing page on click: we discuss challenges and solutions for replicating this pattern on touchscreens.

  • Input Controls for Parameters: Balancing Exploration and Precision with Sliders, Knobs, and Matrices

    Linked controls support coarse and fine parameter selection and ensure both ease of exploration and precision.