Wednesday, January 13, 2016

How a Simple Tip Will Make Your Users Less Frustrated with Your Product and Reduce Your Support Requests



photo credit: freeimages.com/photo/direction-1445172


You instinctively know your own product inside and out and that's great.

What about your users, though?
Is it clear to them what each section and text box stand for?


It's good to ask users, clients, trusted advisors for feedback about the interface and the wording.You should do it especially if you're not the end user of your product. If you are lucky to be the creator of a product and also the customer so basically eating your own dog food that's a great position to be in because you constantly see areas for improvements.

As we were working on a new feature of qSandbox* we noticed that some sections and fields required more explanation. We love clean and minimalistic interface so we decided to use tool tips.That way the UI is not cluttered and when the user needs more info they can just hover the question mark to get more info. It's a simple (tool)tip but very useful.

* qSandbox is about test/staging WordPress Sites. The recently launched feature allows WordPress theme/plugin authors to configure a demo site which will in turn host multiple private WordPress demo installs. The prospects can try the themes and plugins before they buy. By having a private demo site each of the prospects won't have to see other piece of test/demo/garbage content that other people may have entered. Theme/plugin authors don't have to waste time cleaning up the demo site from time and can focus on the work they love. Additionally, it is way more professional to have the demo setup in seconds.

If you're curious how we've implemented the tooltip. Here's how.

You need to create a method (or copy the code below) and just pass some information to it. It will be responsible for outputting the necessary HTML markup. In this example it uses Twitter's Bootstrap so by using the CSS classes glyphicon glyphicon-question-sign the question mark will be rendered.

<?php

// Usage
App_Sandbox_HTML_Util::help( 'This is a question mark that provides more info.' );

?>

<?php

/**
 * @package qSandbox.com
 * @author Svetoslav Marinov <slavi@orbisius.com>
 */
class App_Sandbox_HTML_Util {
    /**
     * Usage: App_Sandbox_HTML_Util::help();
     */
    public static function help( $text ) {
        $text_esc = htmlentities( $text, ENT_QUOTES, 'UTF-8' );
        $str = "\n<span class='glyphicon glyphicon-question-sign' rel='tooltip' title='$text_esc'>&nbsp;</span>\n";
        return $str;
    }
}

To activate the tool tip use this in JavaScript.
$("[rel=tooltip]").tooltip();