dieter-rams-braun-clock-radio-1978-450.jpg

Simplicity the ultimate sophistication

“Simplicity is the ultimate sophistication” is one of the maxim made by a famous old figure, Leonardo Da Vinci.

Why should we adopt this maxim?

It is a good maxim to adopt as a creative professional, usually everything we create goes through an iteration or an evolution of what we may have developed during the first version of the app.

It is quite easy for us to get lost within user’s feedback and organisation’s input. Therefore, we need to always bear in mind one thing, to focus on what is important. It is normal that things can be quite chaotic during either development, designing or planning phase. Chaos can cause quite the stir, especially when time and deadlines are at the forefront of things.

When we adopt the thinking of being simple, the next concept that comes along is whether we understand the essence of the project. What is the big picture you should ask yourself, and what is the objective of every single feature that is being laid out on the screen. Do they or do they not support the overall objective for the user?

The thinking of “Simplicity is the ultimate sophistication”, in my opinion to scrap through all of the distractions and disturbances, and arrive at a point where you see it you know what it does. Just like the radio back in the days, it is a complex device with too many buttons and knobs. Then Dieter Rams changed all of that, with the aluminum chassis and a few buttons.


Picture thanks to Google and Sketch App Resources.

You can see how sophisticated and simple it is, to such a complex product back in the days.

This should be what we want to achieve, to solve a complex problems with a simple solution. Strip out the unnecessary and leave the focus. And you’d be surprised with the results. We should solution from within the goal of the user not from features of the application.

Vincent HalimSimplicity the ultimate sophistication
Simplicity.png

Design a better user interface

In creating a good user interface, it is good to remember the maxim “To focus on the user’s perspective”, although it is easy to be lost within the mindset that we know user’s best, there is nothing that beats a real user’s feedback.

In this article, it is to focus on a few things to help you create a better experience. I am sure most of you know of the things below, but it is a good reminder to go back to the basics

1. User’s feedback is everything

To improve your interface, user’s feedback and frustration is all that you need. Address them properly, although in some cases feedback can be quite ambiguous and unrelated, you can ignore those. However, generally, the benchmark of how well your application performs is by having a good user’s feedback and eliminating those frustrating customer’s feedback. Always remember, behind every frustrated customer, there is always a reason why.

2. Be consistent

In one of Ben Shneiderman’s 8 Golden Rules of designing is to always strive for consistency. This is especially true for creating a brand-new feature, utilise familiar icons, colors and menu hierarchy. This provides the user a sense familiarity, and when user’s are familiar with the interface, it increases the usability of the application.

3. Allow Shortcuts

Remember that although it is well to have your interface be as simple to use as possible. When the user has frequently used the application, it becomes more apparent that the user’s wants to have shortcut to certain actions. Similar to how we use our Macs or Windows, they come preinstalled with keyboard shortcuts, which increases their workflow and productivity.

4. Meaningful feedback

More often than not, when we develop an application, we tend to miss to provide meaningful feedback for the users. This is one of the things that increases user’s frustration when using an application, as they do not know what they did wrong and they do not know how to proceed to the next step. It is understandable that sometimes it could be an error in the code, however, to always try be mindful of how the user would feel if they were to meet a certain issue.

A recommendation that could be implemented is to mention a message that they could contact support or have someone come back to them, when faced with an unknown error.

5. Make user feel joy

You often hear “That app is a joy to use” for apps that has such a good experience and is an actual joy to use. Why? Because when the user uses those apps, they feel that it is a ‘no-brainer’, it achieves their objectives in the most efficient manner possible. They do not feel frustrated and it actually makes their day better. And you want to achieve that, although it is a long and cumbersome process of constant iteration. When you have reached that stage, your users becomes your marketing.

Vincent HalimDesign a better user interface
color-scheme-featured.png

Color Scheme

Creating a good interface and experience requires you to find the right mix of colors to display to user what is needed to be focused and what can be a supplement element. And it can be quite a tiresome process as well. Therefore I have curated different color schemes to help.

#fdbb2d
#22c1c3

#eeaeca
#94bbe9

#EE7785
#67D5B5

#3B4E32
#F8F8FF

#6a60a9
#fbd14b

#fff1b9
#3f4040

#fffcf0
#dedcee

#a5dff9
#feee7d

#4962f1
#e44c7d

#833ab4
#fd1d1d
#fcb045

#444f59
#fd999a
#fec8c9

#e85a71
#d8e9ef
#4ea1d3

#bd1550
#490a3d
#f8ca00

#fec9c9
#ee6e9f
#88dba3

#f9c00c
#00b9f1
#88dba3

#58c9b9
#df405a
#512645

Vincent HalimColor Scheme
UI-Look.png

Irresistible UI

Understanding what factors affect user interactions is critical in creating the best user interface for them. I have found that there are three specific factors that drives users, and not all of these factors are applicable, it entirely depends on the purpose of the website or application.

Milestones

A goal and small milestones are important, this is especially true for those websites that are built for teaching and learning. For instance, a Math learning platform for kids that is called, Mathletics, provides a way for kids to practice their problem solving skills, however, to encourage kids to feel that they have achieved a certain level of mastery, they are awarded with a kind of reward, these can come in virtual badges.

By using this mechanism, unconsciously kids are motivated to be better, and they are able to compare themselves with their peers. Thus, allowing them to be better. When a goal or a certain milestones are set, for the appropriate purpose of the application, it can provide designers a tool to help their users be better. Remember, an ideal milestone should be small, but when aggregated over a period of time can be substantial.

Progress

Progress can be related to milestones, because when you have reached a certain milestone, there is a progress in your journey using the application. Why is progress another factor when its the same as milestones? Although milestones are set for the users to reach them, you would need to show the users the progress on how far they have come to reach the milestones. This is true when you are creating games.

Games that involves story and progress, usually comes equipped with Memoir or a Journal, which summarizes the story, however, another purpose to it is to show the players on how far they come in their progress in completing the game. Providing a way for user on their progress, gives them a way to be engaged on your application, which will retain them and not abandon the time and effort that they have placed in your application.

Feedback

Feedback is an important factor when creating a good user interface, as we can see today. When an application uses the right amount of feedback based on a user’s action, it feels more premium, especially that like click or tap on Instagram, when that heart pops up, this makes you constantly engaged. By providing a good amount of feedback, users know that their action do have an effect, and this keeps the user keep on going.

An example, that uses feedback brilliantly is a bidding application, the idea of paying virtually almost nothing to get an expensive item is very alluring, but there is a catch, you would need to compete. And when you bid you get that feedback of almost getting the item you want, however the moment, where there is only 15 seconds left on the clock and you thought you almost had the item, it resets because someone outbid you, the ‘almost-win’ situation, makes most of us wants to keep on going.

As you can see that, using the right amount of feedback will keep the user engage in your application, this depends on the purpose of the application, and it may vary differently among each circumstances.

Vincent HalimIrresistible UI
colour_1520143460.jpg

Understanding Colours

Colours have always played a big role in the world of design. A good user interface utilise a few colours to distinguish between different elements. Most of the cases, it will contain a primary colour, and a few supplement colours. I have read a few articles out there and have always experimented with different mixture of colours. Below are some of the things that I have found quite helpful, and hope this will help both designers and developers out there.

With colour you can direct your users.

In the context of creating a user interface, this is excluding branding. Correct colour combination can be used to guide users on what the results they will be expecting.

For example, the colour red and any hue of reds, let users know that the action can be serious, if they are unsure they should avoid. Such an action will be like deleting a record, or archiving a record in the screen. Or red, can also be used to direct a users attention to a certain element in the screen. For example, if you have a long article and you are using side navigation to jump between chapters, using a red can be optional to let the user know what chapter they are in.

Whereas, yellow and any hue of yellow, let users know that this is a warning. And they should take heed of the notes placed in the alert box. In most cases, yellow would be used as a warning, however, yellow can also be used to add a splash of brightness in your user interface to avoid it being too dull.

On the other hand, green provides a feeling of being safe. And green has always been used to let users know that they have successfully completed an action. And not only to inform users that they have successfully completed an action. You can use green or a hue of green to create buttons that let them know that is safe to press, for example, in some application using green for a Draft button is a good way to let them know that it is a safe zone.

Users see colours first before text

More often than not, what I have always experienced when designing a user interface, users are lazy to read messages that are displayed on the screen. They tend to just ignore whatever message that is being displayed, and use colours as the anchor point whether it’d be good or bad. Which is why, when we submit an action, and the alert box is green, we tend to just ignore and continue away with whatever we are using.

And this is true as well, in my experience. When the alert box is red in colour, user will be quite anxious and will have a higher probability of reading what is on the screen. However, this is not saying that you need to make things red to make user aware. But a good mixture of when to use the colour red can be quite effective.

Using correct colours to increase legibility

When you design a good user interface, you will always ensure that it does not only look beautiful but legible as well. When using good colour combination, you are able to increase the legibility of the text in the screen. Thus, this will result in the user staying in the website longer, as they don’t have to strain their eyes to read. The usual combination that designer use usually a soft background colour and a solid colour for the text, such as light blue and dark grey or even white and black.

I hope this article will help those out there when designing. Leave a comment below on what are your thoughts.

Vincent HalimUnderstanding Colours