How To: Design an In-Your-Face Interface for the Ultimate Web Application

June 26, 2012 0 Comments

Entrepreneurs, when it comes to starting up, you can’t simply ‘wing it.’ Your pitch, your business plan, and your product need that unmistakable spark that will get people talking. As part of our mission to contribute to the community of entrepreneurs and innovators in the Northeast, one of our engineers, Wenbin Zhang, will be on hand every other week to share with you his experience with the industry’s most popular processes, tools, tips and technological insight. You can check out some of Wenbin’s work by logging into/downloading Task Cloud 9 - Independent Software’s team-based project management platform. Follow him on Twitter at @JasonHotSauce.

How To: Design an In-Your-Face Interface for the Ultimate Web Application

If I asked you to identify the most important elements of a successful web application, you might give me dozens of different answers. And most of them would naturally fall into the same category: functionality.

The functionality of a web application works to serve many purposes. Besides helping someone finish their work quickly and with as little stress as possible, good functionality can also keep your identity secure and your system safe from hackers.

As an entrepreneur, if you find yourself developing an application, you want for it to be well-received by your audience. At the same time, you have to keep in mind that most of your users won’t have an extensive knowledge of what good software development is, or how the game changes depending upon what technology is being used to bring it to life. Most of our users won’t be patient enough to dig into your application to figure out how it works. Usually, the learning is done when they’re cracking into the application for the first time to use it. The best applications are as seamless, efficient, and simple as possible.

This brings us to today’s topic: user interface design and application development.

When someone begins to use your app, the first thing that they are going to see won’t be the brilliant idea that you’re putting in front of them, the power of the functionality, or even the stellar team that worked to make this concept a viable tool. The first thing that the user will react to is how good the product looks.

There are a few key things to keep in mind when considering the appearance of your application:

Navigation:

In my experience, I’ve learned that most users will not spend more than a few minutes trying to navigate through an application in order to figure out how to achieve a task. Your layout must be clear and simple. It’s important to note that what seems easy to you might be really difficult for those who aren’t as familiar with your concept to understand.

Luckily, there’s a great way to collect feedback. Compile a short list of tasks for a random user to perform with your application. The test user should be new to the application, and for best results, they should have no previous exposure to the system. During this feedback ‘test run,’ you should keep an eye out for the time that it takes for the user to navigate through each task, how often they use the search bar, and how they react to the application. The following are a few core things to focus on during a navigation test:

Navigation Red Flags:

The most important functionalities that you want users to access are not in the main menu and/or the first page.
Your application user interface doesn’t have clear separation for different elements. (i.e: things that are meant to be prominent should be a different font, size, color, etc.)
Relying on text to convey messages that can be communicated visually, through icons.
There are unnecessary images and elements.
You combined too much functionality in one screen, making the application ‘busy.’

A new trend in interface design is to adopt the ‘less is more’ mentality. Surely, keeping a design simple allows for users to easily process a robust functionality. Google is a very good example: to a set of fresh eyes, its primary function as a search engine is obvious due to its single-text-field homepage.

Of course, Google also has a lot of powerful applications and tools. In order to avoid overwhelming the user, Google keeps a simple directory of their tools at the top of the page in a small navigation bar. The color works well, as the black bar contrasts with the white background of the Google homepage without being dramatic or distracting.

Color:

Color is another thing can greatly affect the success of your application. Unfortunately, a lot of application developers find it tough to pick the right colors for their product because color is a very subjective issue. However, there are a few standards that are important to stick to:

The user interface should have no more than 3 main colors.
Colors should be used consistently throughout the site.
Color choice should not conflict with the functionality of the application.

Please keep in mind: there are no “good” or “bad” colors. All colors have positive and negative effects which can be represented in different contexts. The chart below shows how colors can be interpreted:

Source: Microsoft Office, ‘Color It Effective’

But also aware that color interpretation can differ from culture to culture and different pairings can have very different meanings. For example, pretend for a moment that you own a successful hat brand, who is well-known for making stylish hats out of organic materials. Your logo might have a green hat to symbolize the attention paid to the earth and sustaining its resources through organic farming. Of course, your logo would be used on your website, mobile application, social media presence, and in marketing campaigns, which seems like a completely harmless idea… Until your brand begins to sell in China.

In Western cultures, green can be relaxing, natural, earthy, etc. However, in China, the same green hat used to convey your earth-friendly brand, can have a completely different meaning. In the Chinese culture, a green hat means that a man’s wife is cheating on him. It’s important to consider the cultural ties to certain colors and symbols when developing how you want your application to look.

Surely, there’s nothing easy about application development, and designing the user interface can be a unique challenge in and of itself. However, these challenges are important to face when evaluating the development workflow for the application. In the first few minutes of using your product a user will decide whether or not they want to keep it handy. In order to maximize your popularity and success, be sure to pay close attention to your interface design.