Various interface design classifications

Jump to:

The seventeen spectrums that define software “type”

  1. Single user to multi-user: Is the software to be used by just one person, or many people?
  2. Individual to collaborative: Is a person’s experience only theirs, or can many people interact with the same elements at once (even if it’s from more than one device)?
  3. Asynchronous to synchronous: If more than one person interacts through the software, do they do it at different times or at the same time?
  4. Single-culture to multi-culture: Is the software to be used by people from just one culture, or many?
  5. Passive to active use: Does the software add value without any interaction (e.g. an update daemon), or only when it is interacted with?
  6. One-off to ongoing use: Are people expected to use the software just once, or more than once over time?
  7. Practical to promotional: Is the design intended to be used for a practical purpose (e.g. a word processor) or for promotion (e.g. a landing page which sells a product)?
  8. Consumption to creation: Do people use the software to consume content or create it?
  9. Indirect to direct manipulation: Do people interact with elements on the screen indirectly (e.g. keyboard shortcuts) or directly (e.g. pinch to zoom).
  10. Textual to graphical interface: Is the interface all text, or all imagery?
  11. Simple to complex: Does the interface show few elements, or many?
  12. Windowed to full-screen: How much of the screen does/can the interface use?
  13. Single pane to multi-pane: Is the interface a single pane, or split into multiple panes?
  14. Recall-based to recognition-based: Does a user interact through commands they need to remember, or do they browse commands they can recognise and choose from?
  15. Generalist to specialist: Is the software intended to be usable by someone with a general set of knowledge (e.g. bus ticket machine) or a specialist set of knowledge (e.g. surgery support software)?
  16. Single-purpose to multi-purpose: Does the software support a single purpose, or many?
  17. Clarity-focused to discovery-focused: Does the software expect you to be able to know what to do immediately, or to have to discover how it works over time (e.g. accounting software vs video games)?

Types of pattern in design

Patterns are reusable solutions to problems. Here’s all of the types of patterns I’ve come across.

  1. Appearance (common approaches to visual design, and style)
  2. Colour combinations (most often palettes)
  3. Interaction (ways in which people interact with software, and in which that software reacts)
  4. Layout (where to put things in relation to one another)
  5. Language (common phrases and ways of writing particular copy)
  6. Typography (e.g. typographic hierarchy, font pairings)
  7. Imagery (e.g. common approaches to icon styles, types of photos used)
  8. Navigation (e.g. hub-and-spoke model)
  9. Animation (e.g. easing curves)
  10. Physical/spatial metaphor (e.g. tap a card and it turns around in 3D space to show you what is on the back)

The six layers of interaction design

These are the “materials” that I think are used in interaction design. All of these are necessary.

  1. Conceptual model: All software is built on a conceptual model. It is a designer’s mental model of how the software works, translated into code and interface. e.g. “This noun has these verbs attached”.
  2. Navigation structure: The various areas of the software are connected by navigation, and that navigation follows a structure. e.g. a hub and spoke structure.
  3. Content: Content is what a person uses the software to see. Text, imagery, icons, video, etc.
  4. Interactive elements: In order for a person to be able to interact, there must be interactive elements. e.g. buttons.
  5. Meaningful visual design: Visual design elements are meaningful if they help a person to understand and use the software.
  6. Interaction feedback: When a person interacts with software, the software should react. These reactions help the person make their next interaction.

The twelve interaction design spectrums

  1. Constrained to flexible: Software can constrain and guide a person, or it can aim to offer them as many options as possible and let them decide. Opinionated software is more constrained, for example.
  2. Familiar to novel: Familiar interaction design takes advantage of a person’s existing knowledge. Novel interaction design requires a person to explore and become familiar with it.
  3. Operationally to perceptually simple: An interface is operationally simple if there’s one interactive element per action. This can lead to clutter. It is perceptually simple if many actions are combined into one interactive element (e.g. a menu). This can lead to discoverability issues.
  4. Screen-by-screen to all-at-once: You can keep each screen simple and put all elements on separate screens, or you can put everything on one screen. e.g. a website with a different page for each topic vs. a website with everything on one page, which requires scrolling.
  5. Shallow to steep learning curve: A shallow learning curve makes use of more helping hands to help a person become familiar with the interface. It might lead to frustrating “slowness” for some users. A steep learning curve drops a person in the deep end, but might suit people who are happy to tinker to understand the interface.
  6. Static to animated: An interface can use no animation, or lots. Animation can help people to understand how the interface works.
  7. Broad to deep information architecture: A broad information architecture is generally easier to understand, but takes up more space. A deep information architecture takes up less space, but has many more levels to explore.
  8. Single-purpose to multi-purpose features: Single purpose features are designed to do one thing. They might be easier to understand, but there will be more of them. Multi-purpose features are generally designed to support different use cases, but they are naturally more complicated. e.g. one dialogue box for each text setting in a word processor, versus one dialogue box with all of the text settings.
  9. Single-approach to multi-approach actions: How many ways are there to take an action? e.g. you can make some text bold with a keyboard shortcut, a toolbar button, or a menu option.
  10. Close to distant controls: Controls can sit near the element they affect, or somewhere else. For example, a 3D modelling app might have controls that affect a 3D model next to the model, or in a toolbar far away from the model.
  11. Modeless to modal: Do various actions put the software into different modes? e.g. You can show a delete action for every element in a list, or wait until the person turns on an “edit” mode before you show actions like delete.
  12. Suitable to flexible: An interaction can be designed to suitable, so that it fits its context well. Or it can be designed to be flexible, so it works in many contexts. It’s rare if not impossible for a pattern to do both well.

Tensions in interface design

Here are some interface design qualities that can be taken too far.

  1. Informative → overwhelming: High information density means that people can see more information at in the same view. This helps with information comparison, for example. But if an interface is too dense, it can be overwhelming.
  2. Visually exciting → incoherent: More colours, more visual effects, more shapes, more everything. These things make an interface exciting. But if there are too many, they also make an interface incoherent. The visual relationships between elements are hard to maintain and break down. It’s now a mess.
  3. Adaptable → unsuited: You can design part of an interface so that it handles any situation you throw at it. But adaptability can lead to a design that is not well suited to any individual situation it is used for.
  4. Familiar → boring: If you use interaction and visual design patterns that are familiar to people, the interface is more usable. But if you don’t do anything novel, it’s also boring.
  5. Novel → unfamiliar: People are excited by novelty, but are wary of the unfamiliar. If something is too advanced you might find that people don’t want to engage with it.
  6. Clean → undiscoverable: A clean interface is easier to explore, understand, and use. You can hide or remove elements to make a cleaner interface. But if you sweep too many elements under the rug, people can’t find what they want. Or they don’t know something exists in the first place. Or they can find something but it takes too long. This hurts usability.
  7. Powerful → unusable: The more features you add to an interface, the more you can do with it. But if you add too many features, they compete with one another. The interface can be confusing, and bloated.
  8. Expressive → dated: Expressive visual design choices make an interface more attractive. They help communicate concepts to people. But expressive choices are often of their time. The more expressive choices you make, the more your interface will be associated with visual trends. Over time, these trends look old-fashioned.

Factors of good animation

Animation in interfaces should:

  1. Be fast, so that no-one feels like they’ve waited for it to finish
  2. Be smooth. The animation should not have noticeable jerking or stuttering on most devices
  3. Be interruptible, so that they don’t interfere with interaction
  4. Help a person understand something about the interface, e.g. a wiggle that lets them know something has changed
  5. Follow an internal logic (e.g. the animation moves in a certain way for a reason)
  6. Be relevant to the idea/concept behind the interface. If an animation is there because “it looks cool”, it is probably not relevant
  7. Respect operating system motion preferences, like “reduce motion”
  8. Not trigger photosensitive reactions, like epilepsy

The six layers of visual design

I think you can divide visual design into these layers. Each layer builds on the previous layer but visual design doesn’t always happen in this order.

  1. Content: Textual and visual elements that deliver the message of the interface.
  2. Layout: Layout is the spatial structure/relationships of interface elements.
  3. Typography: The style of text content, including typefaces, spacing, and typographic scales.
  4. Colour: Colours in the interface. In this case shades of grey are colours.
  5. Polish: This layer includes elements and techniques that are not necessary to “complete” a design, but that are used to change how it looks. Usually these efforts are supposed to do one of the following:
    • Add visual interest
    • Improve visibility
    • Separate content
    • Connect content
    • Guide attention
    • Reinforce visual hierarchy
    • Reinforce layout
    • Reinforce brand
    • Reinforce a theme
    • Soften the interface
    • Signify affordance
    • Signify state
    • Simulate reality
  6. Animation and other visual changes: Animation is movement of elements. Visual changes include e.g. a field that is highlighted when focused.

The five purposes of visual design

  1. Attraction: Visual design attracts attention. Often through beauty. It might be the reason that people notice or engage with the interface.
  2. Information: Visual design provides information to people in various forms. This might be information on how to use the interface, for example.
  3. Expression: Designers often intend for their visual design to express practical things. An interface might be designed to make you feel happy, or to express a brand.
  4. Designer identity: Visual design often gives clues about the identity of the designer. You might call this the designer’s personal style. The designer might do this intentionally, but often they don’t.
  5. Interaction: A visual design displays elements that people can interact with, like buttons.

The five purposes of elements in visual design

Visual design is made up of elements. They are added for a purpose. Here are the possible purposes of each element in a design. Note that an element can exist for more than one purpose.

  1. Information: People use a design to learn something, generally. Elements like a block of text are a clear way to give the viewer information. Elements like icons or illustrations may be more abstract, but they still give people information.
  2. Structure: Elements can help visually structure a design. A divider is a simple example: it tells people that “these elements are separated from these other elements”.
  3. To guide attention: A designer’s job is partly to guide the viewer’s attention from one thing to the next. To draw their attention to the important thing. Lots of elements help to do this. Lines that guide the eye. Sprinkles that grab the attention.
  4. Visual interest: People are attracted to some things and not others. A designer might add elements to attract the viewer’s attention in the first place. Sprinkles, photographs of smiling people, large blobs with striking gradients.
  5. Interaction: Unlike in some other forms of design, interfaces are interactive. So visual elements need to exist for people to interact with. Buttons and links, for example. If there’s nothing for a person to click on, then they can’t click on it.

The eight purposes of colour in visual design

  1. Attention: Colour attracts our attention more than greyscale shades and can be used as a highlighter.
  2. Contrast: The only difference between greyscale shades is brightness. Colours adds hue as another dimension and can show that two things are separate.
  3. Classification: Because we can recognise the difference between colours, they can show you that things belong to certain groups or in order. This includes cases where a change in hue or shade represents a spectrum or scale, such as time.
  4. Signifier: Colour can represent a meaning in your interface. For example, all interactive elements could be orange.
  5. Cultural practical meaning: Groups of people associate colour with practical meaning. Red means stop.
  6. Cultural emotional meaning: Groups of people associate colour with emotional meaning. Red means danger.
  7. Visual interest: A colourful interface is more interesting than a greyscale interface.
  8. Realism and comfort: We don’t live in a greyscale world, so colour makes can make objects look more realistic, and make us feel more comfortable.

The thirteen visual design spectrums

Any given visual design sits on each of these spectrums. For every spectrum, either end is valid. There aren’t any “bad to good” spectrums like “unreadable to readable”.

  1. Textual to graphical: An interface can be all text, all graphics, or somewhere in between. Graphics includes illustrations, icons, photos, etc. Example: If you add icons to your button labels, the interface is more graphical.
  2. Spacious to dense: You can add more or less space between elements. You might often hear an interface described as “information dense”, but this applies to all elements in an interface. Example: If you separate sections with dividers as well as whitespace, the interface is more dense.
  3. Constrained to varied: An interface can have a little variety, or a lot. This is a broad spectrum that affects all sorts of properties: e.g. colour, typeface, size, and shape. Example: If you only use one text size the interface is constrained. If you use a large title size compared to the body text, it is more varied.
  4. Flat to deep: An interface can have more or less apparent depth. This is often achieved with visual effects like drop-shadows. But it’s also related to how many layers your interface has, even if it’s visually flat. Example: An interface with containers behind its content is deeper than one where the content sits directly on the background layer.
  5. Less to more brightness contrast: The colours in an interface can vary from each other in terms of brightness by a little or by a lot. Example: A pure black and white colour scheme has much more brightness contrast than an interface with shades of grey.
  6. Sharp to rounded: Interfaces can appear sharp or rounded. This is related to, for example, rounded corners, shapes chosen, and typefaces. Example: At interface with rounded corners and Comic Sans is more rounded than one with square corners and Helvetica.
  7. Light to dark: Light and dark mode interfaces are common, but there are options between the two. Example: A middle grey background colour is closer to dark than light.
  8. Greyscale to coloured: It’s normal to design with only black and white, but colour is more common. The more colour you add to an interface, whether it’s varied colour or not, the more coloured the interface is. Example: A monochrome interface that only uses shades of orange is coloured.
  9. Muted to vibrant: The colours in a design can have different amounts of saturation. Generally the more saturation in the colour palette, the more energetic the design appears. Example: A design that uses primary colours is more vibrant than one which uses dark, professional colours.
  10. Abstract to realistic: The elements of an interface can appear to be realistic, or they can be abstract. Realistic elements might imitate physical materials, but this spectrum also covers elements like cartoon illustrations and photographs. Example: Buttons with natural drop-shadows are usually more realistic than buttons without.
  11. Plain to decorated: Decoration or ornament includes visually interesting flourishes that are not usually necessary to make the design work. You can have more of these decorations, or keep the design as a whole plain. Note that this also applies to elements like typography. A traditional serif typeface is more decorated than a modern sans-serif typeface. Example: A website with abstract shapes dotted around the background is decorated.
  12. Orderly to lively: The elements in your design can all align and be ordered very neatly, which suggests the structure of the page more. Or they can dance around the page and suggest that there is no structure, although usually there is. Example: A page where elements alternate between the left and right of the page is more lively than one where they are all left-aligned.
  13. Invisibly structured to visibly structured: Most designs have a structure that elements sit within. Like a grid. The design can show this structure more, or it can hide it more. Example: A design where each container has a visible background box around its content is more visibly structured.

[← anthonyhobday.com]