Introduction

Video Lecture 4.2 introduced you to design principles and fundamentals, including, but not limited to mental models, affordances & signifiers, constraints, and mappings. In this exploration, we will dive deeper into some of these design principles, which are crucial standards to adhere to in order to generate at least a basic level of `good usability’ and `user experience'.

An Experiment | How to NOT Design a User Interface

Let’s do a little experiment first, shall we? Don’t worry, it will only take a few minutes.

Your Task

Go to the website User Inyerface and spend 5 minutes trying to create a user profile through steps 1-4.

In Step 1/4, you need to create a password.
In Step 2/4, you need to upload a profile picture and select your interests.
In Step 3/4, you need to provide your personal details and an address.
In Step 4/4, you need to prove that you are human by image validation.

Notes

You may use ‘fake data’ and a ‘fake profile picture’, but really try to get to the end of the registration process.
Again, your goal is to simply finish the four-step registration process as outlined above. So go ahead and try it out for at least 5 minutes!
Once you are finished or 5 minutes have passed, come back to this Exploration and continue reading on.

How Was Your Experience? | How to NOT Design User Interface

First of all, if you finished within 5 minutes, congratulations! You are a master of circumventing bad UX design! Seriously, applause!
However, most of you probably struggled to even get past step 1 in the registration process.

In any case, reflect for a moment on what you just experienced.

How was it?
Did you like the user experience?
Was the interface easy to use?
Was the process simple? Did it make sense? Not at all? What?! You couldn’t finish the registration process?!!
How did you feel while trying to use the website? Entertained? Frustrated? Lost? Angry?

What Went Wrong Here | How to NOT Design User Interface

Of course, the User Inyerface site is a prank site!

But it beautifully illustrates many instances where simple design principles are violated and the design fails the user. For the remainder of this exploration, we will review some of these principles in greater depth.

Mental Models | They Must Work for the User, Not the Designer or System Architect

Mental models are more or less what each of us thinks of `how something works’. For example, you all might have a mental model of a microwave that explains how it works.

For some people, the mental model includes putting a dish into a box-shaped device, pushing some buttons to set a timer, maybe setting the power, pushing start, and getting hot food in return.
- Simple as that, right?
For others, the mental model might include the generation of microwaves in that device which travel around the device and collide with the atoms and molecules of the dish you put inside. This causes the molecules to vibrate which generates heat and warms up your food.
- Uhh.. that sounds a bit more technical, right?

Both mental models are accurate even though they are quite different. You put cold food inside the microwave and pull out hot food shortly thereafter.

Here is the gist, Users really don’t need to operate under a scientifically correct mental model. Instead, they need to be able to relate their mental model to the presented device design, or system image (which is the representation of the mental model of the designer). In other words, we don’t need to know how the inside of a microwave actually works as it is sufficient to know how to operate it.

Think back to the experiment you just went through. Any thoughts on where a mental model you had for the registration process did not fit the system image? Which one was it? Why?

Affordances & Signifiers | Users Must be able to Discover a Possible Action

Affordances and signifiers are crucial elements in any design, software, or hardware. In short, affordances indicate what you can do with an object. For example, the remote control below has many affordances, with the main affordance being that you can control your TV, which is a mental model many of us are familiar with.

The remote control also affords "holding it" with one or both of your hands and using your thumbs to press or push the buttons. The buttons themselves are labeled, with either symbols or text. But one button stands out, the white and red Netflix button in the center.

This button is a good example of a signifier. It is, in some aspects, an affordance on steroids. It might take you a second to find the back button or the subtitle button. But you can find the Netflix button immediately. This is because the remote control designers intentionally decided to elevate and promote the Netflix button by signifying it via placement, size, and color. As a result, it stands out in comparison to the surrounding remote control keys making it easy to find.

Think of your favorite website or the last website you used to buy something online. Where are the affordances and signifiers on these websites and how can you differentiate them? To take it one step further, what are the affordance and signifiers on your favorite social media app? You might even try to answer this question for the last electronic device you used such as a toaster or blender.

Design Principles | In Conclusion

While this exploration only discussed mental (or conceptual) models, affordances, and signifiers, there are many other principles that are critical to designing a good user experience. Some of these principles are constraints, mappings, feedback, design for discoverability, and the need to bridge the gulf of execution and evaluation, which we'll explore later.

For now, keep these golden rules of good design in mind at all times, you can never go wrong with them when conceptualizing your UX project and creating your first designs!

Image attributions

“Microwave” on Wikimedia Commons is licensed under CC BY-NC-SA 4.0
Remote control” on Unsplash is free for use