McShefferty

Simplicity series - Design principles

In the first part of the simplicity series we looked at some methods of shifting the focus on to simplicity, discussing some of the challenges you may encounter in an organisation. Next we are moving on to look at some design principles for achieving simplicity.

Image of a simple lego character Photo credit to: Emma b

It may be relatively straight forward to make something look simple but does it still achieve its goals? In part 1 we will be looking at some of the barriers to taking a simplicity focussed approach to design. In part 2 we will look at some of the methods we can apply to achieve simplicity.

We prefer simplicity over complexity

Users are better able to process information when it is presented in a simplified form. Structuring your content in a logical and hierarchical way can add clarity to complex information. Many of the methods of organising content are based around the Gestalt principles of perception. One of the fundamental Gestalt principles is that of “pragnanz”. This states that we as humans are looking for regularity and simplicity in our world. For example we see a series of circles in the Olympic Rings, rather than an arrangement of more complex shapes.

5 overlapping rings - showing how we perceive the simplest shapes
[Simplicity - Illustration of how we perceive the rings in the simplest form rather than more complex shapes]

Gestalt principles of perception provide us with further methods that can be used to inform everyday design decisions and there are a wide variety of methods you can use to enhance the simplicity of a design. Let’s take a look at some of these:

Closure and proximity

Two common principles that are used on almost every website you visit are those of closure and proximity. Elements can be shown to be related by containing them inside another element. A basic example of this would be containing your related elements inside a box. Example of closure
[ChallangePost - Example of closure]

Example of proximity
[Bootstrap - Example of proximity in use]

Similarity

We perceive elements that are similar in their appearance to be related. Again this is another common concept used throughout design. Whether it’s styling headings, links or iconography - by using consistent styles for related items we can make a design much easier for users to interpret. You can find numerous examples on almost any site you visit. In the example below we can see distinct styles for links, iconography used to provide further context and consistent heading styles for article titles, published date etc.

Example of consistent element styling
[Smashing magazine - Example of Consistent element styling]

Focal points

We are drawn to elements that are in contrast to their surroundings. This approach is often used on primary calls to action, as seen in the example below. Be aware that the more focal points you use the less effective they are. This is of particular importance when you are trying to provide a clear path for users.

Example of a focal points
[Proto.io - Example of a focal point on primary Call To Action]

Progressive disclosure

Only show the user what they need to see, when they need to see it. It’s a simple concept but your design needs to match the user’s expectation. Consider the task(s) the user is trying to complete. Is everything they need available? Is there a clear call to the secondary or advanced features?

A good example of progressive disclosure can be found within Gmail. Gmail offers “just in time” alerts that offer the user control and allow them to easily undo mistakes.

Example of just in time messaging
[Google mail - Providing just in time messaging]

If you remove something the user is expecting to see and don’t offer the right cues to find it, you may create more problems than you solve. This happened when Microsoft hid rarely used options in their Office suite of products: “Most of the requests for Office 2003 were for features that were already there, just hidden away.”

Limit the number of choices

Users can easily feel confused and overwhelmed when you throw too many choices at them. We have limited attention and decision making powers.

Research has shown that the more options that are provided to a user, the less likely they are to make a decision. To exacerbate this issue, having more options also leads to less reported user satisfaction with their chosen option (Lyengar, 2000).

Examples of this in action can be seen in the pricing and membership options of services. Typically the user is presented with three options.

Example of providing a limited number of options
[Mailchimp - Limited number of options provided when signing up]

To conclude

Throughout the series we have looked at some of the barriers we can face when wanting to design for simplicity and how to overcome them. We then moved on to look at some of the principles and methods you can employ to help achieve simplicity in your design. This series hopefully provided a good introduction to simplicity in design, take a look at the links and references for further reading.

Further reading

The complexity of simplicity - UX Matters
Progressive disclosure - NNgroup
Simple and Usable - LukeW
Smart defaults
Design principles - Smashing magazine
Laws of Simplicity - John Maeda
Refining Simplicity - UXmag
Simple and Usable - Giles Colborne
Simplicity is not overrated

References

Iyengar, S. (2000) When choice is demotivating, [Online], http://www.columbia.edu/~ss957/articles/Choice_is_Demotivating.pdf [Jan 2014]

Simplicity series - Shifting the focus

Occam’s razor states that:

❝The simplest solution is probably the right one❞

A lot of the focus of User Experience design is related to keeping things simple. Simplicity sounds easy right? When designing all you have to do to keep it simple is to remove stuff right? Wrong. There is a lot more to simplicity than merely stripping things back to the bare bones.

Image of a simple lego character Photo credit to: Emma b

It may be relatively straight forward to make something look simple but does it still achieve its goals? In part 1 we will be looking at some of the barriers to taking a simplicity focussed approach to design. In part 2 we will look at some of the methods we can apply to achieve simplicity.

Shifting the focus

Sophisticated methods can be employed to provide simple solutions to the user but before considering these methods your organisation may need convincing of the benefit of simplicity.

The primary block to achieving simplicity can often be organisational, including how services/products are sold and how customer feedback is gathered. This in turn impacts future design decisions. Research has shown that when evaluating products purely on features, those with the most features are considered superior to those with fewer by prospective users. It is important to understand that this is only true before the user has used the product or service. I would hypothesise that this user behaviour is changing but is still prevalent in some areas, particularly where the person making the decision on the purchase is not the end user.

Let’s look at a typical product business scenario: Your product is selling but you want to keep improving to stay ahead of your competitors. You brainstorm some ideas for features to add, and get feedback from customers. You asked your customers whether they want feature X they say yes along with requesting some other features that they think would be useful. So feature X and a bunch of other features get built into the next release. Now if you actually tested the system with end users, you would find 99% of them wouldn’t use feature X at all! Now consider the negative impact adding a whole bunch of feature X’s can have on the complexity of the user experience - you quickly end up with an unusable product.

VHS Video players (VCR’s) are a great example of this. Customers make their choices based on feature lists - as this is the information they were presented with in the shop. When they get them home and become a user they realise they have many features they don’t use. Not to mention that these added features create such a complex user experience that even simple tasks are hard to complete. We’ve all seen numerous instances of video players sitting there flashing ‘00:00’ - as the users were unable or didn’t want to invest the time / cognitive effort in figuring out how to set the time.

The organisational and changes to process required may include:

How you sell your product

Move away from feature lists. Instead, solve problems and provide solutions to real customer needs.

How you gather user feedback

Use the right testing method for the insight you are trying to gain. This might include observation, surveys, multi-variant testing, discovery or interviews.

How you make design decisions

Have a clear vision for the product and a measurable goal.

Further reading

Why testing everything doesn’t work
Total user control is a designers nightmare
How to interview users to find out what they really want
Features vs benefits

Next on the Calendar

No events on the horizon.