An example of a bad GUI

A graphical user interface is a very important aspect of computing these days. It can be found on smart phones, computers, and many other electronics out there. Many users will rely on this graphical user interface to use the product either efficiently or conveniently. Hence, it can make or break a certain product. Take for example, the following graphical user interface:

At first glance, one could not tell what it is used for. Moreover, don't you think that seeing this would make you feel like this:

What went wrong???

What went wrong exactly?

• Overall representation. It is too messy. The user might not know where to start, where to look at. Basically, there is no proper layout at all.
• The use of colours. Too many colours are being used. Colours can be a very useful tool in terms of graphical user interface design but in this case, it has been overused.
• Functionality over usability. This is a common flaw behind many graphical user interfaces. It has too many functions in a page.

Principles of Designing Quality Navigation

Quality navigation is a very important criteria for a website to be successful and should not be underestimated. A website may have many contents and therefore with a good navigation system, it allows the user to find the content they want quickly. However, a website with a bad navigation system will most likely result in the user being lost or not being able to search for the content they want. The user will not hesitate to abandon such website.

Hence, I will like to share about what I have learnt on principles to consider when designing a good navigation for website. The principles are as followed:

Provide a variety of navigation options

Different users prefer to navigate around the website in different ways. Hence, the website should provide a variety of navigation options for these users. An example of website that applies this principle is Google which allows the user to search in many categories.

Let users know where they are
A good navigation should indicate clearly and unambiguously to a user which page they are on. The website should have a title for every page to show the user which page they are currently on and the link of the page that the user is currently on should look different from the other links in the navigation. 

An example of website that applies this principle is Threadless which uses blue colour to indicate which category the user is currently at.

Let users know where they have been
A good navigation allow the users to know which page they have visited on the website. This can be done by maximising the usage of hypertext for navigation as the hypertext uses default colour such as blue for unclicked links and purple for clicked links. 

Let users know where they are going
A good navigation should allow the user to know where they are going. There are several ways to ensure that: 

• Inform the user in advance if the link is navigating to a non-HTML page such as PDF or Microsoft word as they usually expect the link to navigate to a HTML page
• Insert ALT text to indicate to the user if the navigation uses an image to link to a homepage

An example of website that applies this principle is Wikipedia that insert ALT text on its logo to tell the user it navigates to the homepage.

Be consistent

Users depend on navigation when they are lost in a website. An inconsistent navigation will only cause the user to become more lost. A navigation design should have consistency in classification, graphics and hypertext colour.

Follow web convention

Users prefer to use the navigation skills they get from one website on another as this makes life easier for them. A good navigation should follow the web convention and not avoid them to be unique because the user is sure to get lost in website that does not follow the web convention. Some examples of web convention are as followed:

• "Home" is used for the name of the website homepage
• "Contact" is used to navigate to the page that contain details such as address, email and telephone

Reference:

http://www.onextrapixel.com/2009/07/03/10-principles-of-navigation-design-and-why-quality-navigation-is-so-critical/

Iterating on the User Interface

Introduction

In the summer of 2011, I interned as a program manager within Windows at Microsoft. Program managers play an interesting and unique role at Microsoft - they are the backbone of a team that includes themselves, developers and testers. PM's define the product and at the end of the day, are the individuals responsible for ensuring that the team carries through. The most important role of the PM in the context of this post is to form a bridge between the users (customers) and the developers. As such, they play an important role in adding a human touch to the software, and ensuring that the usability is optimal.

My project over the summer was to develop a modern app for Windows 8. As revealed by the announcements at the BUILD conference in September 2011, Windows 8 will have a built in, cross platform app store. Apps are compatible with laptops, desktops, and tablets; design guidelines recommend that apps are designed for a touch first environment. After a few days of brainstorming, my team decided to build a to-do list app. As the PM, I was responsible for designing the user interface for the app.

The Initial UI

The first iteration of the user interface was inefficient, to say the least. The interface was designed with a "features first" attitude, something that I soon learned was not the correct approach when designing for people. When putting features before usability, it's easy to forget the human factor. The features took control, and I found myself designing the UI to accomodate the various functionalities. The result was a UI that required four user actions before they could begin entering a new task. This may not seem like much, but entering a new task is probably the single most important feature of the app, and one that will occur with the highest frequency. With that in mind, forcing the user to go through four loops before allowing them to start typing is a terrible idea, from a usability and efficiency standpoint.

Gathering Feedback

Upon presenting the UI to our supervisors, I quickly realized my mistake of putting features before usability. No matter how powerful and numerous the features, they are useless if not presented in an interface that enables the user to leverage them efficiently. This forms the backbone of the belief that interfaces should be designed with a "user first" attitude. Every UI element should be designed around helping the user accomplish their goal.

Another key point of feedback was to be great at one or two things rather than offering a mediocre product with every possible functionality. I decided to narrow the focus of our app - it went from a general to-do list app to a location based tasks app. Users create tasks and associate them with a location, and the app uses GPS data to trigger reminders. By narrowing the focus, we were able to simplify the UI by removing all elements that didn't help with the goal of creating location based tasks.

When it comes to consumer applications, and particularly those that are touch based, minimalism is a winner. Users do not want to deal with complexity - the faster they can get in and out of the app, the more likely they are to be satisfied. Keeping the user scenario in mind helps weed out those elements that aren't necessary and those that help the user achieve their goal.

Gathering feedback is an interesting process when it comes to UI - everyone will have their own opinion, and strong reasons for it. It's impossible to make everyone happy. I find that the best strategy is to focus on the points that were repeated by multiple individuals. If a number of people found a problem with an aspect of the UI, there is likely a way to improve it.

The Final UI

The end result looked nothing like my original UI prototype. In total, I think I went through around eight iterations. With each iteration, the usability of the UI progressively improved. Feedback with the final product was overwhelmingly positive, and users were happy with the user experience.

I'm confident that if I spent more time, I could have further improved it. As a UI designer (amateur as I am), its difficult to ever be completely satisfied with the work knowing that there are still a thousand ways to make it even better. But it's a time-quality tradeoff. The product has to be released at some point, and the ability to recognize the state in which the usability of the UI is acceptable is essential.