ITスキルが高くない管理者が運営する想定のウェブサービスの開発で、引渡し時に使い方をどうやって教えるか、ちょっと悩む。現場教育してもその場限りだろうし、マニュアルを用意しても読まないだろうし。一番効果的なのは操作画面に説明をちりばめることかなと思う。だけど入力欄ごとに何行も説明書きがあるのは、使い慣れるに従ってうざく感じられようになるに違いない。
思いついたのは、マウスをホバーしたときにツールチップを表示すること。
|
1 2 3 4 |
<div title="会員の名前をフルネームで入力してください。必須です。"> <label for="name">名前:</label> <input type="text" id="name" /> </div> |
非常に原始的な方法だけど、使い方に迷ったときにはマウスでポイントすればヘルプが出るのは悪くない。ウェブアプリに大げさな仕組みを組み込みたくないので、フロントエンドのテンプレートだけで、それもJSとか使わずにHTMLだけで実現できるのも都合が良い。ツールチップの表示スタイルはブラウザ依存だけど、管理者が使うブラウザは限定されているので問題ないだろう。
参考サイト
HTML5/グローバル属性/title属性 要素に補足情報を付ける – TAG index Webサイト
http://www.tagindex.com/html5/attribute/title.html