Principles of Interface Design || by Foo Tze Shaun

Table of Content
1.Introduction

2.What is Interface

3. Background Study

4 Principles of Interface Design

  4.1 Stay out of users’ way

  4.2 Know your user: User profiling

  4.3 Consistency is key

  4.4 Provide and request informative feedback

  4.5 Simplicity

  4.6 Principle of Metaphor

  4.7 Offer Simple Error Handling

  4.8 Shortcuts

  4.9 Undo

  4.10 Feature exposure

 4.11 Use Visual Hierarchy

5. Conclusion

1.Introduction

Have you ever wondered how successful applications and web-sites keep getting so many visitors and users every day? Well most of these web-sites have one thing in common, they all have come up with a great design for their interface. With a good and effective interface, people will continue to pour in and popularity will keep on growing non-stop. Some examples of such websites would be Youtube

Youtube Interface

Or Amazon.com.

Amazon.com Interface

Now how to make a good interface you might ask? There are a lot of simple rules you can follow, or as I like to call them principles, and I will be sharing these principles here so that even YOU can create your very own successful apps or sites.

2.Interface
What is Interface? To put it briefly, interface is the point of interaction with software or hardware with the devices such as monitor or keyboard. It is actually a concept of abstraction and encapsulation. Interface can also be defined as a system that is used for operating a computer; a system that controls the way how information is shown to a screen or output device and the way the user is able to interact with the computer.

Having an interface that is user-friendly enough is essential for the application to ensure popularity in the market, otherwise users would just look over the app thus ruining the chances of finding new customers. Here’s an example of a modern day interface.

 

3. Background Study

Legend has it that to design an interface for any apps or sites, one must master the art of interface design principles in order to defeat their competitors and become the chosen one. That might had been a tad bit dramatic but I’m telling you, these common principles are not to be missed. They’re the basic laws and foundation in designing an interface that consider the elements like colours, contrast, etc. Good product design incorporates a number of timeless principles for human-computer interaction.

The principles I will be using are from Shneiderman, Talin, and other anonymous designers.

 

4. Principles of Interface Design

4.1 Staying out of the users’ way

It may seem obvious but not anyone knows that those great interfaces are designed to stay out of the user’s way. Meaning it must giving little-to-no distractions to the users from completing their tasks, and not confusing them with too many options with a much simplified interface. This is what all interface designers should note for them to create a great interface. Try not to get too carried away with adding unnecessary features and design style just to keep up with competition.

4.2 Know who your user is – User Profiling

“Obsess over customers: when given the choice between obsessing over competitors or customers, always obsess over customers. Start with customers and work backward.” – Jeff Bezos

Before working on designing an interface, we must put some thoughts into it and identify the factors of being a good interface and one of them is know who your user will be.

·         What is their job?

·         How old will they be?

·         What is their purpose of using your application?

These are examples of questions you have to answer prior creating an interface.

Do a little background check on your user, interview them, or carry out survey, whatever works for you. Try to gather as much information on the user’s needs. Doing all these will help you design a better interface that can help users achieve their goals and objectives.

4.3 Consistency is key

“The more users’ expectations prove right, the more they will feel in control of the system and the more they will like it.” – Jakob Nielson

Your interface (elements), should always be consistent for your users. Once they learned how your system works, they will be able to do it again. The users will have a much easier time using the interface if it is consistent and will increase their efficiency.

4.4 Provide and Request Informative feedback

There must always be a way for users to interact with the interface designer and vice-versa. When users have identified any bug or error in the interface, they can easily report it by providing them an option to post feedbacks. That way the developers won’t have to go into too much trouble looking for bugs thus saving time, they can get the user side of information as well.

Also the interface must work the other way around by speaking to the users at all times. There should be some system feedback for every action from the users, be it big or small, right or wrong. Always inform the users of any impending and unexpected errors.

4.5 Simplicity

“A modern paradox is that it’s simpler to create complex interfaces because it’s so complex to simplify them.” – Pär Almqvist

While this isn’t entirely true, the best interfaces are always simple. By simple I mean they only contain everything that is needed and less unnecessary elements with all those fancy gifs, animations, colours, and etc. Avoid adding in too many features that you would want in the interface; instead try focusing on what users really need. Never get carried away with the design.

4.6 Principle of Metaphor

Try using elements or behaviour of other systems which are familiar to the users to make them feel more comfortable and at home. Familiarity to the users can be a huge impact to them; a complex system would be easier to access and understand if it is depicted in a way that resembles some commonplace system. For example, an audio or video player has these functions (play, pause, and rewind) engraved in their system, this is the tape metaphor which they are basing it from.

Factors to be considered when using a metaphor:

Ø  If you have chosen a metaphor for your interface, try to stick with it throughout the entire designing process. Don’t just use it at a specific point like on a single button.

Ø  You can incorporate several metaphors for an interface as long as it’s appropriate.

Ø  Do keep note that some metaphors don't cross cultural boundaries well.

4.7 Offer Simple Error Handling

It is inevitable that your users will make a mistake, no matter how clear the UI design is. Make the design of the UI more tolerant and forgiving towards the users and make it so that users cannot make a serious error. If there is any error, a simple and comprehensive solution should be offered by the system automatically. This can help the users prevent any more future errors from ever occurring again.

4.8 Shortcuts

I think I speak for all of us when I say shortcuts make life easier. The most commonly used shortcuts ctrl+c (copy) and ctrl+v (paste) have been the most helpful of them all even until now. With all that said, it is not the worst idea to provide shortcut keys to the UI to help experienced users, who also frequently uses the UI accomplish their task with pinpoint accuracy and pacing. A list of commands, abbreviations, and functions would be a good idea to add into the interface if the user demands it.

4.9 Undo

By adding this feature, users are encouraged to explore unfamiliar territory. It can help with relieving anxiety if they know any actions they do can be reversed by a click of a button. Make it flexible for the user with the reversal of action by providing different units of reversibility like single or grouped action.

4.10 Feature exposure

Allow the user to see clearly and expose the list of all features that are available. Use your judgement to expose what is necessary and be careful not to overwhelm the user with too much detail. It is wise to use the structure of an onion when doing this, where peeling away a layer of each skin will reveal more details on the specific region, this can also called the level of “hiding”. Users may prefer a UI that utilize the power of abstract models; some may even prefer the features which are “up front” and “in their face” depending on their personalities.

4.11 Use visual hierarchy

“Designers can create normalcy out of chaos; they can clearly communicate ideas through the organizing and manipulating of words and pictures.” – Jeffery Veen

Use visual effects to inform your user which feature in the UI is the most important by utilizing the elements of design such as colour, size, placement, and etc. Make sure they synergises with one and another. This will help reduce the appearance of complexity of the UI.

Conclusion

Whilst researching for the principles of Interface design, my understanding of it has expanded immensely and I may use that knowledge in the future if I were to ever design an interface. I have come to a realization that in designing an interface isn’t as easy as it sounds; there are a lot of depths and techniques which we are required learn in order to be create a unique and original interface which the world could appreciate.

This background study will help me in my assignment 2 where my group were asked to come up with a new design for “MILO”. I will apply a few of these principles in my group project, principle of simplicity, feature exposure, feedback, and shortcuts.

 

Reference

• Treehouse Blog. 2012. 10 User Interface Design Fundamentals - Treehouse Blog. [online] Available at: http://blog.teamtreehouse.com/10-user-interface-design-fundamentals [Accessed: 21 Feb 2014].

• Sylvantech.com. 2014. A Summary of User Interface Design Principles. [online] Available at: http://www.sylvantech.com/~talin/projects/ui_design.html [Accessed: 21 Feb 2014].

• Faculty.washington.edu. 2014. Shneiderman's Eight Golden Rules of Interface Design. [online] Available at: http://faculty.washington.edu/jtenenbg/courses/360/f04/sessions/schneidermanGoldenRules.html [Accessed: 21 Feb 2014].