Inline Help Box design pattern

The user needs an assistive introduction aside the interaction he is about to perform

Use when an interaction with your website is not necessarily intuitive and self-explanatory in itself.
Use inline tips to document your interface
Use when you want to motivate the user to start using the system.
Use when you want to aid the user in getting started with your web application.
Use when you want to guide the user to get a good start with your web application.
Use to gently introduce functionality to the new and untrained user.
Use the ‘hide’ functionality to avoid frustration of the experienced and trained user.

Document your interface in-line with descriptive help blocks. If you have functionality in your software that requires interaction from your users, this functionality can be easily explained in a help box just above or below the functionality that requires the user’s interaction.

As the help box itself is not part of the main functionality, it is a good idea to add a style to it that visually separates the help box from that functionality. An easy way to do this is by applying another background and font color to the help box.

Additionally, to avoid the user’s discontent with the help box, a great feature of the in-line help box is to have a “hide this box” functionality. Once the user has clicked this link, the help box will never be shown to the user again.

However, you might want to provide an option for the user to re-enable all help boxes, to allow the user to get that first-hand help that he or she started out getting.

By providing your user with assistive instruction aside the interaction, it is easier for the user to relate the instruction with how it applies to your web application’s functionalities than a disconnected FAQ or help section.

By allowing the user to easily close/hide each help box, the user is not bothered with unnessecary information once it has been understood.

The help box can also be used as a notification box that describes system updates. From Basecamp.
The inline help box at scapblog.com helps get you started using the web application.
Last.fm uses a series of help boxes that the user can choose to hide once he or she has become accustomed to how the system works.
Twitter users inline help boxes to communicate changes to the service, tips on using twitter, and more. Notice how the box includes buttons to both close and hide the inline help box, but also to take action on the tip described.

View more example screenshots

8 Comments

Moses Ting

2 Feb, 2008

I’m a fan of this UI pattern and I’ve been seeing it used alot recently.

Janko

25 Mar, 2008

I use this pattern frequently. In some cases I extend the message with an icon or some helpful links. Absolutely positive.

naresh

9 Aug, 2008

i like your website. VERY useful or web/UI designers. great work. expecting more examples.

cheers!

Walter

20 Jul, 2010

It is interesting, but could you give examples on how to re-enable the help?

Jason TEPOORTEN

28 Jun, 2012

I’ve worked on many web applications that use the inline Help Box to guide the user.

Like Janko, using an icon on the left side is quite effective.

green coffee bean extract pills

15 Nov, 2013

Today, while I was at work, my cousin stole my apple ipad and tested to see if it can survive a twenty five foot drop, just so she can be a youtube sensation.
My iPad is now broken and she has 83 views. I know this is
completely off topic but I had to share it with
someone!

gratis-community.com

23 Nov, 2013

kzmht uksri sdqu mpcy wgzrd.

www.pillsbank.com

27 Nov, 2013

My brother recommended I might like this web site. He was totally right.
This post actually made my day. You can not imagine just how
much time I had spent for this info! Thanks!