UI/UXの観点から見た業務系ツールを開発するときに気をつけたい20項目

前の前に所属していた会社では、社内用の各種管理ツールやBtoB向けのソリューションなどのWebアプリケーションを開発していたことがありました。ちょうどその時期に業務系ツールのUI/UXに関してまとめておいたメモが見つかり、目を通すと意外と的を得たことが書いてあったりしたので、再び記憶から忘れ去られてしまう前にここにアップすることにしました。2011年頃にまとめたやつですが、参考できる部分があれば是非参考にしてみてください。

業務系ツールを開発するときに気をつけたいこと

1. データ(情報)を削除させる場合は、ボタン一押しで削除できるようにしない。

ユーザーが誤ってデータを削除してしまうことを防ぐ。「削除してもよいですか」などのアラートを必ず出すようにする。また誤って削除してしまっても復活できるように、削除したデータは削除フラグを立てたり、ゴミ箱用DBに保存したりしておく。

2. フォームチェックなどシステムの制御にかかわる部分は、できる限りJavaScriptに頼らないようにする。

クライアント側はあくまでも利便性のため。予期せぬことは必ず発生するので、しっかりとサーバー側でもチェックを行うようにする。

3. リセットボタンは嫌われているけど、時と場合によっては大変重宝する。

検索キーワードは検索語も検索フォームに残しておくようにする場合が多いが、検索項目が多いと検索を繰り返す場合、キーワードを手動でひとつひとつ消していくのが面倒くさくなる。こういう場合「リセットボタン」があると便利。

4. 検索結果ページには、検索件数を必ず表示し、ページング、並び替え機能を実装する。

検索機能を実装する際に忘れがちな所となるが、検索件数は必ず表示させるようにする。絞り込みを行う上でも検索件数の表示は大事。それから優先順位的に後回しにされがちであるページングの機能や、並べ替え(ソート)の機能も使い勝手の向上のためしっかり実装しておく。実装していないと、後から必ず指摘される。

5. その検索フォームは部分一致検索なのか、前方一致検索なのか明記しておく。

業務によっては、部分一致検索が便利な場合、前方一致検索が便利な場合などがある。それに合わせて検索機能を実装するはずだが、実装するだけではなく、ちゃんとその旨をページ上に明記しておくことが大事。

6. 表記に英語は使わない。イケてなくてもわかりやすく日本語で。

英語表記は洗練された印象を与えるが、全てのユーザーに同一の意味として伝えることは難しい。またシステム用語がそのまま使われていたり、この場合もわからない人には伝わらない。英語に抵抗のある人もいる。しっかり意味を伝えるためには日本語で表記することが大事。例:アクション ⇒ 操作、ステータス ⇒ 状態、Next ⇒ 次のページへ

7. 自分では当たり前だと思っていることでも、相手はそう思わない。しっかりと文字で明示する。

例えば、顧客情報の一覧表示において、メールアドレスをクリックすると、詳細画面や編集画面が開くものがあったとする。しかしメールアドレスをクリックしたら、ユーザー全員が詳細画面が開くとは思わないはず。しっかり項目をつくり、そこに「詳細を確認する」ボタンや「編集する」ボタンを配置する。

8. 言葉、文言はすべてのページで同一の表記にする。

例えば、顧客情報の表記に関して、あるページでは「ID」、あるページでは「アカウント」となっていることがある。これだと同一のものなのかどうかわかりにくい。必ず同じツール上では表記を統一させる。

9. ボタンの表記はわかりやすい言葉で!「○○する」とする。

例えば、ボタンの表記が「検索」だけだと、極端な話、検索設定なのか、検索しないのか、「検索が何なのか」わからない場合もある。必ず「検索する」とする。もっと丁寧にするなら「○○を検索する」としてもいい。

10. マニュアルは読まないと思ってよい。

マニュアルを用意しても、読まれないことも多い。必ず画面上に「何のための画面」なのか、「何のための操作」なのか説明を加えておく。マニュアルを読まなくても、画面上の表記だけで業務が行えるようにしておく。

11.重要な箇所は大きさ、色などでうまく表現する。

重要な箇所の見せ方を工夫することで、大きく利便性を向上させることができる。操作すべき箇所、データの中でしっかりチェックすべき箇所、こういった部分を迷わず見つけられるようにしておく。

12. エラーメッセージは手を抜かない。

エラーメッセージも後回しにしがちであるが、エラーメッセージをしっかりわかりやすく記述しておくことで、ユーザーからの問い合わせも減らすことができるし、業務の効率化にもつながる。

13. 操作できる部分にカーソルを当てたら、必ずポインターに切り替わるようにする。

操作できる箇所を明確にする。クリックできるのか、できないのかよくわからないものがある。カーソルがポインターに変われば、そこがクリックできる場所であるということがすぐにわかる。

14. テーブルや表を使うときは、ボーダーと文字の距離に気をつける。隙間なくぴっちりくっついていると見づらい。

抽出したデータをテーブルや表を使って表示させることが多いが、ユーザーが最も目にする部分となるので、ここは丁寧に見やすくなるように作る。Webであればpadding、line-heightなどで微調整が大事。見やすい表は、ミスを減らす。

15. IE6対応は必須。クロスブラウザー対策を怠らない。SEOは気にする必要なし。

会社によっては未だにIE6を使っている所もある。どんなブラウザーでも動くように、そしてレイアウトが崩れないように。極端な話、どうしてもレイアウトがうまくいかない場合は、テーブルレイアウトでがちがちに固めてもいいし、W3C準拠違反も時として許される。

16. ime-modeは積極的に使う。

CSSで設定できるime-modeプロパティ。テキスト入力時のIMEの初期状態を指定。日本語、英語の切り替えの多い業務の効率化に大変役立つ。

17. メニューは全ページに共通のものをつける。

トップページがメニューになっていて、次のページに進むと、一旦トップページに戻らないと他のページにいけないようなやつがよくある。メニューのつけ方はいろいろ考えられるが、やはり全てのページで共通のメニューを表示させておくのが使い勝手の観点からもよい方法。

18. とにかく軽く作る!

ページのパフォーマンスはもの凄く大事。重いページほどいらいらするものなく、業務にかなりの支障を与える。軽くしてストレスの少ないページを作る。

19. 見栄えも大事!UIにも気を配る。

業務を少しでも楽しく前向きにやってもらうためには、洗練されたデザインと使い勝手のよいUIが備わっていること。特に毎日触れるものであるのなら、なおさらのこと。ユーザーの愛着のわくようなページを作る。

20. 「ログアウト」も忘れないように!

たまにログアウトできないものがある。ログアウトはセキュリティの観点からも必要なこと。後回しにされそうな部分ではあるが、忘れないようにログアウト機能を実装する。


以上、まだ考えたら思い浮かぶこともあると思いますが、とりあえずメモにあった20項目そのまま書いてみました。とにかく業務ツールを開発する際は、そのツールを使うユーザーのことを常に考えることが重要だと思っています。自分では大丈夫だろうと思って実装した機能でも、まったくその意図が伝わっていないケースが見受けられます。真摯であること、面倒くさがらないこと、それがよいツールを作る上で必要な姿勢だと思います。

それから技術的な部分で言えば、業務ツールはほぼフォームでできています。「フォームの設計」(CRUD)を制するものが、管理ツールを制するといっても過言ではありません。しっかりこの辺の技術を習得して使い勝手の良いツールを作っていきたいですね。

コメント一覧

  • 必須

コメント