Subtle touches that make a good web application great.

October 15, 20110 Comments
Facebook Twitter Pinterest Plusone

When it comes to web applications, attention to detail is one of those things that makes a good design great. Adding polish, and tidying up every last user interface interaction to make it as smooth and user friendly as possible – truly separates your application from the crowd and in turn encourages repeat visits. I thought it would be interesting to examine some of the examples of ‘going the extra mile’ that you may not have noticed, with both large and small brands around the web.

Google+ Feedback tool.

URL: http://www.google.com/tools/feedback/intl/en/learnmore.html 

The Google+ Feedback tool is a useful application in its own right.  Traditional feedback buttons on web pages simply ask the user to describe a problem via a form – sending the details of their complaint or feedback to the developer.

Treating usability as a core value, Google have decided to allow the user to markup and select areas of the page that are potentially problematic, and send this back to the team. Analysis of the page in its current state is also collected to make the exact state the application was in at that time easier to trace and debug.

Notice how highlighting works inside the application.

I can see this being immensely useful as a feedback tool for other developers, and can only hope this is abstracted, open sourced and provided free of charge to the rest of us as a more intuitive and detailed way of gauging user feedback.

Facebook Forgot Password

Typically, a forgot password application consists of you receiving an email clicking on that link to confirm, and regaining access to your account. Facebook go a step further, as you can see from the screenshot below. You can identify yourself by a variety of methods, including who you know you are friends with. This narrows you down firstly, and then sends out a traditional email to the email on your accout as you would expect.

However, the real attention to detail happens once you regain access to your account. Facebook use this opportunity to gain more information from you as a user, asking for additional email address and telephone numbers incase you ever forget your password again.

Trello Go to your email

URL: https://trello.com/

Trello – recognising the major email providers on the web today provide a link to go directly to your inbox once you’ve signed up, rather than just telling you to go to your inbox and click confirm.

Stackoverflow Search

Stackoverflow search removes other aspects of the navigation and expands the size of the search box to encourage visitors to be descriptive in their search. The removal of other links also helps to focus the user on the task in hand. Notable they have also omitted the search ‘button’ instead encouraging visitors to use the keyboard enter key to confirm their entry.

Twitter Login and Search

Twitter have a few small details in their UI which add polish to the application. Firstly, when you first visit the website to login you will find a very subtle  and slow fade in on the form login from an opaque input to an element with a slight glow on it.

The web based search application in addition to this is also interesting. Twitter wants to appear real time (all the time), so if you search for something on their engine, for any medium to slow moving term- they hold back some of the recent tweets and display them after a few minutes of looking at the interface.

This gives the ‘illusion’ of real time, even if the tweet had been made a few hours ago.

Signing out of Twitter on the web prompts the user to download their mobile application, recognising that once someone logs out the next action is typically leaving the site.

 

Physorg.com Comment Filtering

URL: http://www.physorg.com/

Comments on this site can be rated by other members of the community. A filter slider has been included to only include intelligent debate crowdsourced from other visitors of the website.

NY Times

The NY times suggests additional articles to users only whenever they reach the bottom of the screen, encouraging visitors to read more on the site right at the moment they have finished reading the current one.  Incidently, there is a WordPress plugin available to mirror this functionality.

FastCo Design

URL:  http://www.fastcodesign.com/

Fast Company’s design articles have a clock image which denotes the time in which the post has been written. The number of visits and comments that a particular article has received is also visualised in image format.

GoodReads

URL: http://www.goodreads.com

 

Good reads rely heavily on ratings to influence user decisions. Their rating details icon image is actually an SVG graphic which reflects a smaller representation of the actual rating. This allows visitors to get the information they need that bit quicker whislt browsing.

Nizo App

URL: http://nizoapp.com/

This splash page beautifully guides the user further down the page as you scroll, finally focusing on the task in hand – getting the user to signup.

Apple

You can’t write an article about attention to detail and not mention Apple. Everything from their mobiles, and desktops to their software documentation underlines that notion. (BTW – the Apple user experience manual PDF here is well worth a read for all developers).

Take two of their recent logo designs.

In use for centuries by artists throughout history, the Golden Ratio is a number that often occurs in nature and proportions using the Golden Ratio are thought to be more aesthetically pleasing.  Apple designers have historically taken this as a personal sanctity in their work.

Both the Apple logo itself, and the more recent iCloud logo have followed the golden ration in their design.

If that wasn’t a big enough hint  – Apple programmed the LED’s on their machines to closely mirror the behaviour of the average sleeping breath rate. With the average respiratory rate of an adult, between 12-20 breaths per minute, the blink rate of the MacBook Pro 15in –  is exactly 12 cycles per minute.  Another small,  but stunning detail that most people will miss but makes a subtle difference.

Where have you found great examples of attention to detail in webdesign or elsewhere?

Filed in: Web Design
Tagged with:

About the Author ()

Paul is a regular 30 year old web bloke / programmer with a penchant for online marketing. This blog is a personal outlet, with an eclectic mix of articles.

Leave a Reply

Back to Top