Why literal UI?

The world of interaction design is evolving, but recently, with the advent of lightweight web and mobile SaaS applications as well as the proliferation of new devices and inputs, we see the growing convergence of several similar ideas in user interface design that we are grouping under the umbrella of Literal UI. Literal UI brings together concepts from Natural UI, Tangible UI, Physical UI, and Tactile UI, the common thread being that they all favor direct manipulation over metaphor and look towards a broader range of human inputs.

At its core Literal UI approaches favor direct manipulation over form-based configuration or indirect manipulation through symbols or facsimiles. At the simplest level it’s the difference between touching a thumbnail to enlarge it and clicking a button that says “enlarge”; at its most complex it’s moving your hands in space to literally “sculpt” digital clay with a VR device.

To get a sense of the change, take a complex application like Adobe Photoshop with all of its tabbed palettes and tiny configuration fields all over the screen, and then look at something like the “Paper” from 53 studios (iOS), where virtually all interaction is touch. The difference is striking, and we think it will soon be the norm for all applications.

With many designers moving in this direction, with mixed results and no base of common assumptions, we feel it’s time to more clearly define a Literal UI standard and begin to work out some fundamental principles and best practices. That’s the goal of this collaborative project: to gather the collective insights of design and UX experts who are currently producing in Literal UI design and synthesize those as a starting point for others.

The principles (draft)

The following principles are intentionally high-level but all flow from the basic idea that the user should have the most direct connection possible to the digital “thing” they want to interact with using whichever of their senses is most “natural.”

  1. Clarity of mode

    Literal UI applications often synthesize work-in-progress and final product enabling a creator to make ongoing changes. It should be unambiguous to these users when they have moved from a “consuming” to a “creating” mode, and they should be able to switch modes easily.

  2. Manipulation over metaphor

    The user should be able to edit by directly manipulating what is visible rather than by typing in form fields or editing a facsimile.

  3. Sense-appropriate symbols

    Where there are second-hand representations, e.g. items in a list, they should be represented in the format of the full object. For example: thumbnails for images, short clips for videos, samples for audio, etc.

  4. Access over mystery

    When editing, the user should be able to select, inspect or interact with everything that is visible. If something cannot be changed, at minimum it should provide a description and explanation.

  5. Personal over generic

    In a shared space, the application should cater to the individual, not the generic audience. For example, when navigating and searching, the user should always see things they themselves created or edited first, before things created or edited by others.

  6. Examples over forms

    To eliminate the barrier between learning and doing, everything that can be created should have an example that can be cloned as a new instance and edited.

  7. Curation over inheritance

    Where a system has content inheritance, inherited changes should be explicitly “curated” by the user and not silently happen in the background; additionally, editing a parent should only be possible from parent itself, not the child.

  8. Convention over customization

    To minimize learning, an application should use broadly understood interaction patterns, and as few of them as possible, even if doing so increases steps in the flow.

  9. Intuition over discovery

    Applications should learn from the user, anticipate potential actions and needs, and provide them with “best-guess” solutions, rather than expecting users to discover them on their own or read documentation.

Get involved

The Literal UI project is open to all UX, development and design professionals who are interested in shaping the future of this movement.

To get involved

Fork the repo | Edit the Wiki | Contribute an example