This is because users are used to the common navigation model in desktop applications and are distracted by the fact that web applications run inside a browser. Unlike a webpage, a web application is not content based and used for multiple purposes. Therefore users must be explained that the web application is nothing like a webpage and a web browser is just a tool used to display the web application, just like it is only a tool to display a webpage. Another major difficulty in creating web applications is the fact that every user is used to another platform with each its own specific methods and tasks. We will look at some solutions when designing web applications.

Page design

To let users know what task they are currently performing in a web application is probably one of the most important aspects when designing a page layout. This can be done by placing the title or subject of the current page in a very consistent location, and make sure the title or subject is very well readable. The next step is to make sure where to go, and what actions to do next to complete one task. A clear and consistent navigation is therefore absolutely necessary in page design. External links are absolutely forbidden, because this only distracts users from their current task and makes the web application look and feel more like a regular webpage. Also for regular web pages, content is written and built for indexing, in order to make sure a webpage can easily and accurately be found in search engines. This of course is not applicable for web applications, because they should never be found in search engines. Cross browser compatibility is another factor of page design which is very important in regular web pages, but not in web applications because web applications are specifically made for a few users, who can all be taught to use one browser. Of course when the user group of a web application expands to many thousands of users this topic will become more relevant to web applications.

Different pages of a web application need to be very light. Light in the form of being small in byte size and using only few images, so the application can be loaded very fast every time. This is especially important for the first page. The first page of a web application is a very important one, but whenever designing a web application it is a major issue what to exactly put on the main page. The main page can contain many different elements but is suppose to show the general statistics of an application which do not take too long to load.

�

Sugar CRM Mainpage

This is because users always have to go through this page before getting somewhere to perform the tasks they want. When a new user enters the system it is best to start a guided tour through the application or some sort of help function to get a user started. With these statistics a user can be guided to performing a relevant task which again leads us into the next subject of this article.

Task specific navigation

All information has to be ordered thoughtfully without any distractions to make sure someone only focuses on the current task. Tasks might also have a number of sub tasks available which need to be presented to the user during or after the main task has been completed. The most common tasks need to be placed on top. Whenever needed all tasks can also be shown in order of execution, to make it even more simple for users. During each and every step of these tasks it is also important to guide a user through this step. Sometimes this may seem unnecessary but in most cases user assistance is very important and can help users complete their task faster and can decrease communication with the supplier of the web application. To make sure all tasks will be completed and there will be no data corruption in any task, browser navigation elements should not be used at all. Users can not use these navigation items, because they are not made for use in a web application and they may return unknown or incorrect pages. Best is to hide these elements or teach the user not to use them.

Form layout

In web applications there is no search for information like on a regular website. The need for completing tasks by inserting data is probably most important and in order to do this the web application needs to have a very good form layout. In a good form layout users will run through the data insert form much quicker and find it easier to insert data. The use of scrolling is to be kept to a minimum, to make sure a user can oversee what is already filled in and what is left to be completed. Therefore another technique must be used to display only the needed elements. A wizard is a good example of data entry without lengthy forms. A step-by-step question and answer technique will work very good for most users, but can be annoying sometimes when internet connection fails or is slow. Another solution for this problem can be the display of elements organized in groups. This very much used technique works good for web applications even with a slow internet connection.

When we look at the form itself and the requirement to make sure a user can run through the form quickly and adequately we see that when having 2 columns the form is much shorter, but also much slower. Having 2 columns means showing the label of a field on the left and the input field itself on the right. Can you imagine the moving eyes of the user! From left to right and back, and so forth… Instead when using a top to bottom form with every field label just right above the input field itself users can move from top to bottom very fast because there is no need to look anywhere else. A disadvantage of this is that labels and fields are not easy to differentiate. This can be solved by using a different visual weight for important elements in the form. This means making the labels of all fields look bolder, but also making sure the primary action in a form attracts more attention than other actions. This is very user friendly because in this way the web application itself guides the user through the steps of a task.

�

 

� 

Example of good form layout

Error messages

Errors must be shown with a very user friendly message, and possibly some form of advanced information. This advanced information may never distract users from the friendly message in any way. To continue helping the user complete the tasks, a solution for every problem must also be provided. When receiving an error stating the login information is incorrect, the application also has to provide ways of making sure the user typed the username and password correctly. This can be done for example by checking the status of the caps lock or num lock buttons. Also after these steps the user needs to be provided with an option to reset the password or have it sent to an e-mail address.

When inserting faulty data in a form, new information about this form has to be provided on the same page. This means that when a form field is filled in incorrectly, the same form will be shown with the inclusion of the error message about this field. This is a much better approach than using a different page to display an error message and then send the user back to the previous page without the error message.

Both comments and pings are currently closed.