Inline Help Box Design Pattern

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.