[TAGS]GUI, Professional Interface, Software designing, development, layouts, colors, Web Technology, AJAX, Web developer, Web 2.O
[/TAGS]
It has been a short break since I have written part 1 and part 2 of this series. Let’s recap. In Part 1 of this series, we have discussed about minimising the users’ efforts to achieve their tasks using your software. And in part 2, we have looked into using the right components and colours.
Today, let’s look into how to make your software and web applications look professional. Unless your applications are going to be used by users who preferred to type commands in the command consoles, user interfaces is probably a big consideration when they decide whether they want to use your software applications.
Part 3 Making your user interfaces professional
In the first two parts of this series, we have already been discussing about building good user-interfaces. Now let us do the extra effort to make the user interfaces professional.
What is a professional user interface?
First of all, we will define what a professional user interface is. There are probably lots of possible definitions. A search on the internet gave me this definition of professional as showing great expertise or skill in a craft or activity. Therefore a professional user interface would mean one that gives users the impression that the developers have shown good consideration and expertise in building a usable software application.
For user interfaces to be professional they must not just look professional; they must also be using the right components, right colours and focus on minimizing the efforts for accomplishing tasks as we have discussed previously. Of course I have also assumed that the functions in your applications are performing just as the users expected.
Understanding your users’ needs
One of the most important steps for designing software is gathering users’ requirements. Similarly you have to know the needs of your users before you can build the best user interfaces for them. For example, knowing these requirements allows you to put the most frequently used functions right at the front page and place other less frequent functions in the meaningful-named menus as discussed in Part 1.
Understanding who will be using your applications is useful and important too. For example, if you know that the users require quick information at a glance and will use their fingers to tap on buttons on touch-screens, you will need to increase the font size of the wordings used and make the buttons much bigger. Furthermore you will probably not use any dropdown menus as they are hard for these users to use.
However, if your users worked on a desktop computer and will probably have a big screen size, you might want to show more information that could be useful to the users as they are performing their tasks.
Using Wizards and Expert modes
Other than presenting the functions in the correct ways and adjusting font and button sizes, you also need to know whether your users are new computer users, are new to the business process or are expert users. If the majority of the users are new computer users or are new to the business process that your application promotes, then it is best to introduce wizards for common tasks.
Wizards are guided steps to perform certain functions. For example, Microsoft Word guides a person to set up a report using the Report Wizard. Usually, if a task requires certain steps to accomplish and that these steps are mostly fixed, you can present a wizard to help the user through this task. Be sure to give clear headings and description for each of the steps. Furthermore it is better to have a list showing the current step as well the pending steps.
However, if your users are expert users, they will probably be slowed down using a wizard. In this case it would be best to provide them with the necessary functions if possible to achieve the same task. For example, an expert user can bypass the Report Wizard totally and set out to make his own report in Microsoft Word.
Usually it is best to have both modes in your application so that you cater to both the new users and the expert users. However, only wizards should be used in critical processes where control is very important and when you would not want the users to perform other functions or the wrong functions during the operations.
Using the right colours
Up to now, we have discussed mainly how to present the functions to the users. As you can see, a professional user-interface is not just about how it looks but also how the users can interact with it to accomplish their tasks in the most efficient way. In this section, we will discuss the use of colours and layout to enhance the professional look.
Back in late 1990s, most applications are shown in shades of grey. And no, that is not because of the monochrome monitors. It is believed that grey makes the users focus better on their work. However, I am not so sure about this anymore. Nowadays, you can see colourful screens on your desktops. Even the Microsoft OneNote software I am using now is in shades of blue. Therefore we can see that colours are becoming important in the user-interface design.
For user-interfaces, try not to use more than 2 or 3 colours and these colours should be light and look pleasant together. Therefore you have to avoid dark striking colours. Dark orange, green or red are big no-no unless they are used in very small area such as an important button. Using striking colours will distract the users from their work.
You should also use white for most large areas. For example, if you are designing a webpage, a white background will be very suitable for any type of design most of the time. Furthermore, having a white background and black wordings has the best contrast and allows text to be read better. If you have to use other colours other than white for background, try to use a very light background. If you use a dark background, there is a good chance your users might feel irritated after using the application for sometime.
Sometimes, you might also have to take into account the corporate colours of your company or those of your clients. Having a good colour scheme that your company uses may help to provide a professional feel. Some examples are Microsoft Office where all its components such as Word and PowerPoint use the same colour scheme, giving the impression that the whole suite is integrated and works well together.
Using the right layouts
Using the right layouts is also important. It is always good to keep to some common “standards”. For example, if you are putting in the dropdown menu, you should always keep it at the top and nowhere else as that is where the users would expect it to be. As for toolbars, you should try to put it below the dropdown menus although they can be dragged to any other location. For web applications, the users would most likely look for the menu either at the top or at the left. Putting your menu at the right, for example, might confuse your users.
As a further note, do make sure that the tab stop orders for all the textboxes, buttons and other controls are in correct order, preferably in the order where the user is most likely using the controls.
Using new technologies
New technologies are being developed to improve user experiences. Recently AJAX (Asynchronous JavaScript And XML) technology has become very popular among web developers who use them to create web applications that provide almost the same experience to the users as if they are using a normal desktop application.
Features which used to appear only in desktop applications, such as drag-and-drop and displaying up-to-date real time data are becoming common in web applications that are hosted in new web browsers. If used correctly, AJAX can help to vastly improve your users’ experiences.
Another new technology that Windows developers should look forward to is the coming WinFX: Windows Presentation Foundation (WPF), formerly code named Avalon, which will come with Windows Vista in 2007. If you are interested, you can visit their website for more details: http://msdn.microsoft.com/winfx/reference/presentation/default.aspx
WPF is a set of APIs which developers can use to build very interesting user interfaces. I have seen a video presentation of an application demo built on top on WPF. The forms in that application can be flipped front and back and skewed as if they were 3D objects and at the same time display real data.
These new technologies definitely have the potential to improve your user interfaces and enhance your users’ experience when used correctly.
Summary
Summarizing the whole series, we have discussed the importance of having good user interfaces for your applications and some ways on how we can achieve it.
To design a good user interface, you will first need to understand your users’ need. Then you have to design it in such a way that the users can accomplish their tasks in the minimal time and effort. The user interface should also be comprised of the correct components and their correct uses so as not to confuse the users. Design wizards, if needed, for users who are not familiar with the business process for tasks that require many steps. Lastly, improve on the colours and layout to give a more professional feel.
Send your comments to Vincent.