Web Application Design Considerations
There are many things to consider while you are developing a web / enterprise / business application. This article is intended to be an overview of some of the most important considerations. I like to use it as a checklist to remind myself of all the things that I need to consider when I'm working at the front-end.
Page Load Time
Of all the characteristics of a web page; the one that probably affects user experience the most is the page load time. You can have the prettiest design, the most obvious call's to action and the slickest animations but if the page takes too long to load the user experience is going to be lousy. You must constantly try to think of ways to get a page to load faster, thankfully there are many techniques which you can apply and many tools to help you find problem areas.
Minimise the Size of the DOM
Too often I see web developers cramming pages full of hidden stuff they think is useful but is rarely used by real world users, they seem to be unaware of how it affects page load and render times.
Keep your master page/view as light as possible as it forms part of every page load, information such as user profiles or user privileges etc, should be moved to a separate information page.
Avoid prepopulating information or help popup's which are rarely used, load the data via asynchronous calls instead.
Minimise the Number of HTTP Requests
Just as important as page weight, the number of individual HTTP requests has a significant impact on the page load time.
- Use CSS gradients instead of background images
- Use image sprites for icon sets
Optimise HTTP Response Size
- Optimise images with a tool such as kracken.io
Clientside Framework & Library Selection
When choosing a clientside framework or library I strongly recommend that you choose very very very carefully, after much thought and consideration. Too often I see developers adding the latest cool framework (or several of them) to an application with little thought for how much of the functionality they will actually use. I'm all for code reuse but clientside framework and library selection is a special case as the size and number of files has an impact on user experience due to the load and processing times etc. In many cases it is worth the tradeoff, just make sure you will use over 70% of the functionality.
Obvious Calls to Action
It must be obvious to a user what they should do next so style your primary buttons and links appropriately.
Maximise Screen Real Estate
This one almost comes for free if you take the Mobile First approach to web design and carefully consider every element on the page.
Minimise Header Height
Keep primary navigation clean and simple.
Remove Unnecessary Elements
A common example of an element which is not necessary on every page is a footer bar with an application version number, the version number can be put on a separate information page.
Hide Secondary Navigation
If secondary navigation is rarely used then move it into a slide-in panel.
Users generally dislike scrolling in web applications which they use regularily, it might be ok for users casually browsing a content based web site but if you force a user to scroll frantically every time they open up a details page in a web application its not going enhance their experience. Ensure that the most important content and functionality is within easy reach near the top of the page. Its a balancing act to keep your layout as consise as possible without being too dense.
Cater for Screens of Different Sizes, Both Large and Small
When the concepts of responsive web design evolved most of the focus was on how to develop web sites so that they worked on smaller screen sizes. This was a important point in the evolution of web design but its not just about smaller screen sizes. Large desktop monitors have been getting cheaper and more popular so making use of this extra screen real estate opens up new possibilities.
Wide screen monitors are especially suited to data rich enterprise applications which often have to display large sets of data in tabular format. An example of a design which makes the most of both large and small screen sizes can be found in this article: Applying Responsive Web Design to Business Applications
Due to the way in which touch technology evolved and the way in which people first became exposed to it, they generally associate touch interfaces with smart phone and tablet devices. Touch is not limited to small screen devices however as many higher end laptops and desktop monitors now support touch interactions. The distinction between laptop and tablet devices is also blurred as some devices have swivel displays and detachable keyboards. A touch screen on a laptop or desktop monitor is a very useful tool for any user interface developer.
There are many recommendations regarding the size of touch targets and you must remember that some users have larger fingers than yours.
Almost as important as the size of a touch point is the amount of whitespace around them, the user also needs space which they can touch for scrolling.
- Font-Size - it is important that you choose font sizes which are legible on hand held devices held at arms length.
- Colour Blindness - this is especially important given the surprisingly high number of people with the condition. Color Oracle is a colour blindness simulator which allows you to check that your design is suitable for people with colour blindness. It is also useful to find work colleagues with the condition to help with testing.
- Older Browsers - large enterprises are often slow to upgrade their browsers so always remember to test your application on older browsers.
- Different screen sizes - its easy to remember to test an application on your large desktop monitor or your own phone or tablet but devices come is many different sizes, remember to test across all screen sizes.