declan bright

Web Application Design Considerations

sprinter

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.

Performance

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.

Master Page/View

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.

Information Popup's

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.

Optimise HTTP Response Size

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.

Usability

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.

Minimise Scrolling

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

Touch Interactions

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.

Touch Targets

There are many recommendations regarding the size of touch targets and you must remember that some users have larger fingers than yours.

Whitespace

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.

Accessibility

Browser Testing

Related Articles

View Comments