Designing Digital User Interfaces: Part 2/5

Terminology

Are you new to user interface design? Are you an experienced designer looking to close some gaps in theory or practice? Is your design team struggling with different levels of quality? If you can answer any of these questions with a yes, then this five-part series of articles will enable you or your team to design successful digital user interfaces.

Part 1: Universal Principles
Part 2: Terminology
Part 3: Methodology
Part 4: Devices and Software
Part 5: Design Systems and Interface Elements

In part one of this series, we dealt with the universal principles for digital user interface design and the challenges a designer has to face today. Those principles are so fundamental that they are not bound to any method or element. In fact, an interface is a part of our environment and as such needs to follow the principles of any other object that surrounds us and that we interact with. In contrast to physical objects, digital interfaces have one special aspect: they rapidly change and evolve. Therefore, it is even more crucial to design those interfaces for change — both on the inside and outside.

For you to sleep well at night, the aesthetic, the quality, has to be carried all the way through.

— Steve Jobs (1985)

There’s a good chance that you want to open your app or sketchbook now and begin designing that interface right away, using these articles as a kind of checklist. Of course, you can do that. But have you ever asked yourself what you are really doing?

Terminology

We want to design digital user interfaces. You will often hear other terms like interface design, interaction design or user experience design. I chose digital user interface design, because:

• User interface design without mentioning digital might also relate to physical interfaces (keyboards, touchscreens and product design in general).
• Interaction design is part of the user interface design. Content and interaction need to go hand in hand.
• User experience cannot be designed (Fredheim, 2011). According to Hassenzahl (2003) and others, user experience is a phenomenon that emerges from the user’s perceived experience of content, presentation, functionality and interaction. The designer is not the user (especially if a lot of different users are using the interface), and as such can only estimate or interpret how the users will perceive the interface.

Hassenzahl’s model of user experience (Source)

So we have to deal with the terms digital, user, interface and design. Let’s investigate each one in detail.

Digital

I don’t think we need to talk about the basics of bits and bytes here. We have also mentioned the ephemeral nature of digital design before. Let me just recommend one thing: learn to code and experiment with real code (Pash, 2011). I would even say some basic technical understanding of the environment you’re designing for is a must. No, you don’t have to become a developer, nor do you have to write code every day.

As I wrote in part one, knowing basic coding patterns like OOP or MVC as well as understanding variables, classes, objects and methods might be very interesting not only for developers but also for us designers. Let’s have a quick look at them. MVC stipulates a certain structure for organizing your code, independent of the programming language. In MVC, you separate data (model) from display (view) and functionality (controller). It enables you to develop different parts of the software independent of each other. You can change each part without having to touch the rest of the software. In OOP, you bring to life (instantiate) objects according to blueprints (classes). Objects contain attributes (variables) and a way to interact with them (methods). By manipulating the attributes with the provided methods, objects become an individual instance — let’s say a subject. This will not only help you to build a modular, structured and mature interface — you may also derive concepts for other tasks, like writing documentation or planning with developers, from it.

I also highly recommend that you learn UML (Unified Modeling Language). UML helps you to visually represent the logic and components of your interface: actors, activities, use cases, or conditions. With the right tools, UML can even be converted to code and vice versa. In contrast to code or static interface designs, the standardized vocabulary of UML diagrams enables you and your team to share a common understanding of how your product and interface behave.

UML activity diagram example (source)

Depending on your field of work, you might need to learn an additional set of coding skills. In web design, it might help you to understand the basics of HTML, CSS, JavaScript and how to inspect websites in the browser. For app development, it is probably good to know the programming languages Objective-C, Swift, C++ and Java as well as how to run apps and simulators in Xcode or Android Studio.

Digital is not as polished as it sounds. The users of your interface may have old devices, a bad cellular connection, may be in a hurry or stressed. A server may not respond or someone will input something you did not anticipate. You cannot design for every eventuality, but models like the UI Stack will help you to cover most cases.

The UI Stack (Source)

One more thing we need to know (but cannot take care of in most cases since we are designers, not developers) is the loading and response time of an interface, whether it is a website, app or something else. Chances are high you’ve experienced a slow ATM, a revolving door moving at a snail’s pace, waiting forever after pushing a button… you get the idea.

Performance is about improving conversions

— Wagner (2018)

Key metrics of how users perceive performance delays (Source)

User

We are biological beings, therefore we have certain abilities, senses, behaviors, expectations, experiences and knowledge about how to deal with an interface.

How to design interfaces (in the future) for the 5 senses (Source)

There are two known concepts or frameworks that cover all those topics:

• User-centered design (UCD), a term coined by Norman (1986). Norman’s book The Design of Every Day Things (1988) is especially famous, because it shows which aspects of objects that we use on a daily basis are perceived as good or bad. He emphasizes the responsibility of the designer for the creation and perception of those objects.
• Human-centered design (HCD) covers basically the same topics as user-centered design, but is better known for the ISO 9241 (Ergonomics of human-system interaction) standard. Part 210 (Human-centered design for interactive systems) of ISO 9241 is especially relevant for us:

ISO 9241–210 provides requirements and recommendations for human-centred design principles and activities […] and is concerned with ways in which both hardware and software components of interactive systems can enhance human–system interaction.

— ISO (2010)

We might also need to consider the constructivist lens on interfaces: we all have different abilities, different behaviors and a different understanding of the world (Maturana, 1982). If you have a bit of spare time, the videos The Matrix that Embeds or Hirnprobleme (German) about autopoiesis, the brain, and language with Maturana and von Foerster are fun to watch in this context.

There is no such thing as the best or a one-size-fits-all interface design for every user. We can only guarantee the success of our interface if we know the users that will interact with it. Therefore, it is crucial to constantly test and reflect those insights in the next iterations of the interface.

There are so many guides, insights and methods about user testing available, it can be overwhelming. I personally like the beginning of Google’s video User Research, Quick ’n’ dirty, especially the slide about hitting and missing the target. It shows that user research has become cheap and simple, and can even be done completely remotely. On the other hand, it is shocking to see how many companies still do not do tests with their users. There is proof that involving your users during and after product development will have a lasting effect on your ROI. Mortensen (2018) has some convincing arguments in case you need to fight for your tests.

The best results come from testing no more than 5 users and running as many small tests as you can afford.

— Jakob Nielsen (2000)

Why You Only Need to Test with 5 Users (Source)

User needs or user-centeredness is part of every modern design methodology and tool set. Especially in design thinking or design sprints, the user is at the core of the process. Modern organizations focus on empathy with their customers as a corporate strategy (Young, 2014). We just shouldn’t forget that there are usually more users involved than the anticipated core target group: internal staff like content and maintenance specialists, people with disabilities, non-target audiences or the public.

One last piece of advice: except for educational purposes, I would recommend not to use personas for testing (Thelwell, 2017). A persona is a fictional person, created from attributes of users or prospects of a product. When using personas, the designer should base their design decisions on the persona. Thus, there are two major drawbacks: the creation of a persona itself is an act of designing — it is not a real person, so you pick some characteristics and often invent others. Second, the designer then has to interpret how the persona would interact with the interface. You prevent all that if you test with real users.

Interface

An interface in the simplest sense is an instrument that helps machines and humans to communicate with each other. Earlier on, we talked about the basic human interface capabilities:

• Eyes (sight)
• Ears (hearing)
• Nose (smell)
• Tongue (taste)
• Hands (touch)

When humans interact with other humans, they use one or more of their interfaces to send and receive information: they communicate. It might be a handshake, a smile or a conversation. Similarly, digital user interfaces offer:

• Displays and lights (sight)
• Speakers (hearing)
• Sensors, e.g. smoke detectors (smell)
• Early experiments like a thermal interface (taste)
• Touchscreens, buttons, switches, keys (touch)

Digital user interfaces are made for humans. We sometimes forget this if we are struggling with bad interfaces in terms of usability, understanding or layout. Digital user interfaces are also made from humans.

If we compare past and present, we discover that as interfaces move closer and closer to our bodies, they seem to blend in with us. As creepy or promising as it sounds, we are on the verge of becoming cyborgs. Some decades ago, you had to buy a vinyl record, a record player, an amplifier and a pair of boxes to hear your favorite songs. Then you would search for and grab the vinyl, switch everything on and place the needle on the record. Nowadays, you put in your Airpods, open Spotify on your iPhone X and play any song from any artist in the world (in this setup, there are no physical buttons or switches involved anymore).

Science fiction shows us what the future might offer: intelligent assistants, screens as contact lenses or games that are indistinguishable from reality (e.g. Black Mirror). We might also be faced with robots that look like humans (e.g. Ex Machina). In the more distant future, there might be artificial intelligence that can manipulate matter (e.g. Transcendence or Lucy). In the very far future, we might not need interfaces anymore because we do not really exist (e.g. Matrix) or because we are completely fused with artificial biological objects (e.g. The Night’s Dawn Trilogy).

But as long as we need digital user interfaces, we can come back to earth again. My favorite representation of a digital user interface is this illustration from Garret (2000):

The Elements of User Experience (Source)

It focuses on apps, websites and user experience, but illustrates the nature of interface design in its entirety: the visual part is only the tip of the iceberg. Underneath are areas like information architecture, interaction design, content and at the very bottom, user needs and app-/site objectives. These are often forgotten because we sometimes focus too much on the visual part instead of usability or commercial success.

Design

Each of us has a different understanding of design, based on language, culture, education and profession. For some, design represents beauty, for some a crafted object, for others a way of acting and thinking. While there has been an ongoing discourse over the last decades (Cross, 2001, Glanville, 1999 or Mareis, 2011) about what design really is like, a universal definition, accepted by everyone, is still missing. As a result, the only option is to look at the notion of design from different perspectives to form your own opinion.

The first perspective consists of the different word categories or parts of speech. A proposal by Ralph and Wand (2009, p. 108), based on a digest of existing definitions, suggests:

• design (noun): a specification of an object, manifested by an agent, intended to accomplish goals, in a particular environment, using a set of primitive components, satisfying a set of requirements, subject to constraints
• design (verb, transitive): to create a design, in an environment (where the designer operates)

Conceptual model of design as a noun (Source)

Conceptual model of design as a verb (Source)

The Oxford Dictionary (2018) suggests:

• design (noun): (1) A plan or drawing produced to show the look and function or workings of a building, garment, or other object before it is made. (1.1) [mass noun] The art or action of conceiving of and producing a plan or drawing of something before it is made. (2) A decorative pattern. (3) [mass noun] Purpose or planning that exists behind an action, fact, or object.
• design (verb): (1) Decide upon the look and functioning of (a building, garment, or other object), by making a detailed drawing of it. (1.1) Do or plan (something) with a specific purpose in mind.
• Origin: Late Middle English (as a verb in the sense “to designate”): from Latin designare “to designate”, reinforced by French désigner. The noun comes from Italian via French.

The second perspective involves the different meanings that each term inherits (Ralph and Wand, 2009, p. 105). To list just a few:

• Design as a process
• Design as creation
• Design as planning
• Design as a physical activity
• Artifact, as the object of design
• Design as a human phenomenon

The third perspective is the body of knowledge and systems within design: in the second half of the last century, design science emerged as a new discipline (Buckminster Fuller, 1957 or Archer, 1979). Since then, design has not been solely an outcome or a profession, it has become an acknowledged field of research.

There is increasing recognition that design is a discipline in its own right with a holistic and multifaceted nature

— Design Science Journal (2016)

This leads us to a possible fourth perspective. As design encompasses so many areas, it might even be seen as a meta- or trans-discipline (Jonas, 2011 or Nicolescu, 2008). Take interface design: you have to deal with ergonomics, communication design, computer science, interaction design, motion design and information architecture (Jackson, 2015). The same applies for user experience design. And if you work in a corporate environment, you should also be familiar with the basics of marketing and business models.

Design disciplines (Source)

After all of the theory I’ve discussed, the last perspective at least should sound familiar from your studies — or wake you up if you are lacking some skills. But I don’t want to close this chapter by pointing a finger at you. Let’s instead look at a definition of design that has lasted for decades despite numerous other ongoing discussions:

Everyone designs who devises courses of action aimed at changing existing situations into preferred ones.

— Herbert A. Simon

You will always find literature or people that have different definitions or understandings of the term design. And to be honest, you don’t have to deal with that every day when designing digital interfaces. For me, design is a craft, consisting of a body of knowledge, skills you can learn, as well as an attitude or principles on how to think and act when designing. I do not call the outcome of my design work a design. Instead, it might be a website, an app or a button. Design is also fundamentally human. Every time that we create something with a certain purpose, for people, then we are designing. Otherwise, we could just be playing around or making art.

Next part: Methodology

Quotes

• Archer, B. (1979). Design as a Discipline. Design Studies, 1(1), pp. 17–20.
• Buckminster Fuller, R. (1957). A Comprehensive Anticipatory Design Science. Royal Architectural Institute of Canada, 34(9), pp. 357–361.
• Cross N. (2001). Designerly ways of knowing: design discipline versus design science. Design Issues, 17(3), pp. 49–55.
• Design Science Journal. Welcome to Design Science Journal. [online] Available at: http://www.designsciencejournal.org/ [Accessed 15 Nov. 2017].
• Fredheim, H. (2011). Why User Experience Cannot Be Designed. [online] Smashing Magazine. Available at: https://www.smashingmagazine.com/2011/03/why-user-experience-cannot-be-designed/ [Accessed 2 Apr. 2018].
• Garrett, J. J. (2000). The Elements of User Experience. [online]. Available at: http://www.jjg.net/elements/ [Accessed 7 Apr. 2018].
• Glanville R. (1999). Researching Design and Designing Research. Design Issues, 15(2), pp. 80–91.
• Hassenzahl, M. (2003). The Thing and I: Understanding the Relationship Between User and Product. In: Blythe, M., Overbeeke, K., Monk, A. and Wright, P., ed., Funology, Dortrecht: Kluwer Academic Publishers, pp. 31–42.
• ISO (2010). ISO 9241–210:2010. [online] International Organization for Standardization. Available at: https://www.iso.org/standard/52075.html [Accessed 5 Apr. 2018].
• Jackson, R. (2015). UX Infographics: 9 to Pin to Your Wall. User Experience Magazine, 15(3).
• Jonas, W. (2011). Schwindelgefühle — Design Thinking as General Problem Solver? Paper presented at the EKLAT Symposium. pp. 3–4.
• Mareis, C. (2011). Design als Wissenskultur. Bielefeld: Transcript.
• Mortensen, D. (2018). User Research: What It is and Why You should do It. [online] Interaction Design Foundation. Available at: https://www.interaction-design.org/literature/article/user-research-what-it-is-and-why-you-should-do-it [Accessed 3 Apr. 2018].
• Nicolescu, B. (2008). Transdisciplinarity — Theory and Practice, Cresskill, NJ: Hampton Press.
• Nielsen, J. (2000). Why You Only Need to Test with 5 Users. [online] Nielsen Norman Group. Available at: https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/ [Accessed 3 Apr. 2018].
• Norman, D. (1986). User Centered System Design: New Perspectives on Human-Computer Interaction. Hillsdale, NJ, USA: Erlbaum Associates.
• Norman, D. (1988). The Design of Everyday Things. New York, NY, USA: Basic Books.
• Oxford Dictionary (2018). Design. [online] Available at: https://en.oxforddictionaries.com/definition/design [Accessed 2 Apr. 2018].
• Pash, A. (2011). Learn the Basics of Coding. [online] Available at: https://lifehacker.com/5867110/learn-the-basics-of-coding [Accessed 13 Jun. 2018].
• Ralph, P. and Wand, Y. (2009). A proposal for a formal definition of the design concept. In: Lyytinen, K., Loucopoulos, P., Mylopoulos, J., and Robinson, W., ed., Design Requirements Workshop, 1st ed. Berlin, Heidelberg, Germany: Springer, pp. 105–108.
• Sheff, D. and Jobs, S. (1985). Playboy Interview: Steve Jobs. Playboy Magazine, 32(2).
• Simon, H.A. (1996). The Sciences of the Artificial. 3rd ed. Cambridge, Massachusetts, USA: MIT Press, p.111.
• Thelwell, C. (2017). Are Personas Ruining your Product? [online]. InVision Blog. Available at: https://www.invisionapp.com/blog/personas/ [Accessed 13 Jun. 2018].
• Wagner, J. (2018). Why Performance Matters. [online] Web Fundamentals. Available at: https://developers.google.com/web/fundamentals/performance/why-performance-matters/ [Accessed 3 Apr. 2018].
• Young, I. (2014). Becoming Person-Focused. [online] Available at: https://rosenfeldmedia.com/practical-empathy/becoming-person-focused/ [Accessed 13 Jun. 2018].