Inspect Element

Web Design & Development Blog

Web applications are becoming more relevant due to the future release of operating systems such as Google Chrome OS and possibly the Apple tablet as well as the fact that people are starting to use multiple devices. Being able to get access to them from wherever you have an internet connection combined with owning multiple devices means that web apps are becoming more and more relevant and will continue to do so as internet speeds increase.

The biggest area where web application has to encourage new users to sign up is on the homepage so we’re going to take a look at what makes a great web app homepage design. Don’t forget that many of these observations can be easily applied to other aspects of web design, not just for web application homepages.

Login Areas

The nature of web applications, being accessible from any browser, means that users can login in from whatever computer they want and from anywhere in the world so login forms are important to existing users.

On Mobile Me’s homepage (below), emphasis is placed on a login area for existing users with text below encouraging users to sign up for a free trial or sign up for more.

Onehub places existing users’ login form in the header of the page, therefore not being too distracting to new visitors but also give an easy accessible way of logging in for anyone with an account.

The login form on to-do app Teux Deux’s homepage can only be accessed by hovering over the log in text at the top of the page. This isn’t immediately noticeable to existing users but when used a few times they will likely get used to the behaviour.

Observation: Most web apps do away with any kind of login form on their homepages. The only logical explanation for this is it can clutter the page for when trying to sell the service to new customers.

Price Presentation

Fever makes the price very noticeable by the use of a red circle and placing it in amongst the intro text.

Pulse use a tiered pricing structure but also state on their homepage what their cheapest option, although they only do so through the use of a plain text and a plain text link.

A similar technique is used on the home of Squarespace. The main difference here is that it is contained right below the main text located in the large header area.

Campaign Monitor dedicate a relatively considerable area to pricing describing pricing as a selling point of their service.

Observation: Not all web apps include pricing on their homepage. Most benefit from a tiered pricing structure and tend to display it on a separate, dedicated page.

Features

This is the area that sells the product or service. It’s important in letting the user know what the app actually does and a key message to get across to help a user decide whether they want to try it or not.

Mobile Me continues their minimalistic approach by displaying a simple, short list aided by simple icons. By keeping it succinct and to the point the user doesn’t have to read paragraphs of text. On the other hand however, this information, or lack of, may be too little for users to make a decision to try the app out.

Ballpark divides it’s list of features into a grid layout and combines the text with icons to add an extra visual flair, making it easier to read as it breaks the points out neatly and clearly.

Screenshots are used along with descriptions on the homepage of Invoice Machine. Doing so gives potential customers strong indications of not only what the app looks like but also how it behaves before they try it for themselves.

Screenshots

Screenshots are the focus of many web application homepages as they give anyone interesting in signing up to the product and immediate vision of how the app looks and an indication of how it is used.

Much like Invoice Machine, Task.fm mixes its feature list with a screenshot. They annotate a screenshot to promote the key features of their web application.

Peashoot displays a big screenshot in the header section of the homepage. The benefit to this is the visitor has a clear idea of what to expect of the app before they have created an account and begun using it. The transparency this offers to potential users is appealing because they’re not signing up blind, therefore increasing the chances that they will indeed create an account.

Popular image gathering tool Ember, displays two screenshots in the header area with the second one appearing below the first to display a different section of the application.

Observation: Despite having the lower market share, most web apps seem to display screenshots as being used on a browser on a Mac OS X. In fact, not a single example was found where screenshots were being presented from the point of view of a Windows user, which has a considerably larger market share than Mac OS X. Some choose to display screenshots without the aid of the chrome of a browser at all.

Ultimately, the familiarity of seeing the app displayed within something that is clearly recognisable as a browser (title, back and forward, buttons, URL area and search bar) allows the viewer to relate to the app more than if it was on it’s own.

Buttons

Web application homepages are a great example of why well designed buttons are so important in web design. Buttons are used to guide new customers to the sign up page.

Upload Robots keeps the button size consistence but changing the importance with the use of colour.

Through the main button on Squarespace’s homepage, it’s clear that you can try the service for free. They also give an option for taking a tour with the use of a secondary button. It’s obvious from the wording, size and colour that they are wanting users to signup.

Harvest

Observation: Wording on buttons can have a big affect on the number of signups to a web application. 37 signals have performed A/B tests to show the importance of wording and how it can improve conversion on the pricing page of their Highrise pricing page.

Tweet