Taste of Tech Topics

Acroquest Technology株式会社のエンジニアが書く技術ブログ

開発者が見落としがちなユーザビリティアンチパターン

こんにちは。QAエンジニアの @yuki_shiro_823 です。

このエントリはソフトウェアテスト Advent Calendar 2018の15日目の記事です。

きっかけ

私は社内で色々なプロジェクトを渡り歩き、横断的にテストを行っています。
テストをしていると、

  • 機能的には問題ないけれども、なんとなく使いづらい
  • お客様の業務に照らし合わせると、もっとこうした方がいいのでは?

という事例を時々見かけます。
「開発者にもユーザ視点で、開発時から基本的なユーザビリティを向上させられるようになってほしい!」
という思いから、いくつかアンチパターンをまとめてみました。
その一部を紹介します。

ユーザビリティの定義と本エントリで扱う範囲

ユーザビリティの定義は、ヤコブ・ニールセンによる定義やISO25010などいくつかあります。
本エントリではISO-25010の「システム/ソフトウェア製品品質」で定義されている「使用性」の一部「適切度認識性」にまつわるアンチパターンをとりあげます。
f:id:acro-engineer:20181214014259p:plain:w450

適切度認識性のアンチパターン

適切度認識性について

ISO25010では、「ニーズに適した利用かどうか認識できる度合」と定義されています。

損なわれるとどうなるか

ユーザがシステムを利用して、明示された作業及び目的の達成を実行できなくなる、と考えられます。

アンチパターン1:探し物はどこですか?

f:id:acro-engineer:20181214020750p:plain:w200

内容

表やドロップダウンリストの並びが何の順番になっているのか不明で、自分の見たいものがどこにあるのか分からない、というケースです。
業務上、最新の結果から順番に表示してほしいのに、件名の昇順になっていて使いにくいということがありました。
また、サイトを訪れる人のほとんどが日本国籍と思われるサイトで、国籍を選択するドロップダウンリストになかなか「日本」が出てこないというのもよく見ます。
f:id:acro-engineer:20181214235724p:plain

対処策

一覧であれば、業務での使用順に合わせて並んでいる、ドロップダウンリストであれば、選択肢が使用頻度の高いものから並んでいるという構成にしてほしいです。上記の例では「JP 日本」がドロップダウンリストの上位に表示されていると、ユーザにとっては使いやすいですね。
要件をヒアリングする段階で、ユーザが一覧にした内容で何をするのか、が明確にできていると後々助かります。(コーディングの段階で気づくと、修正が厄介な場合が多い問題です)

アンチパターン2:反応がない…

f:id:acro-engineer:20181214021830p:plain:w200

内容

「登録」や「検索」などのボタンをクリックしたものの、画面に何も反応がなく、処理が行われているか分からないというケースです。ユーザがボタンを連打してしまい、二重登録などが発生してしまう恐れがあります。

対処策

処理中であることが、ユーザに明確に分かるようにしてください。
こちらは、はてなブログの編集画面にある「公開する」ボタンです。
f:id:acro-engineer:20181215002713p:plain
一度「公開する」ボタンを押下すると、次の通りボタンの色が変わります。
f:id:acro-engineer:20181215004535p:plain
いかにもクリックできない様子になりました。
このように、

  • ボタンをクリックできなくする/ボタンの色を変える
  • プログレスバーなどを表示し、処理中であること示す

などがあると分かりやすくなります。
登録画面などの場合は、「登録ボタンは一度だけクリックしてください」などの注意書きがあるだけでも、連打の防止に効果があるそうです。

アンチパターン3:キャンセルのキャンセル?

f:id:acro-engineer:20181214030515p:plain:w200

内容

ユーザの操作に対して、何らかのメッセージが出るものの、次に何をしてよいか明確でない、すぐに操作が行えない、というケースです。
f:id:acro-engineer:20181215000125p:plain
パッと見ただけでは、「キャンセル」ボタンをクリックしたときに、どちらになるのか分かりません。
キャンセルをキャンセルするので、結果は「キャンセルされない」になるのですが、キャンセルがゲシュタルト崩壊しそうですね。
こちらは、キャンセルのキャンセル問題という有名なアンチパターンです。詳しく知りたい方はぜひ、以下のサイトをどうぞ。
キャンセルのキャンセル問題から考えるダイアログデザイン

対処策

メッセージの場合は、「xxxに誤りがあります。ご確認ください」など次に何をすればよいか明示するようにしてください。
また、メッセージ中の動詞とボタンの動詞をそろえるのも効果的です。

アンチパターン4:どこへも行けない

f:id:acro-engineer:20181214025231p:plain:w200

内容

ユーザがある画面から、他の画面に戻りたいと思ったときに移動する手段がないケースです。例えば、次のような画面がありました。

  • 「戻る」ボタンがない
  • ダイアログ表示で「戻る」または「閉じる」ボタンがない

f:id:acro-engineer:20181215000220p:plain:w300
こちらのキャプチャの例は、半分ネタですが、ダイアログのエリア外を押すとダイアログが消えることを知らないと、ユーザは何もできなくなってしまいます。

対処策

明確に「戻る」や「閉じる」のボタンを設けてください。
ボタンを設けない場合は、「ブラウザのバックボタンでお戻りください」など、ユーザが次の操作を行えるような指示を記載してください。

最後に

4点のアンチパターンを紹介しましたが、気を抜くと誰しもやってしまいがちなものだと思います。
何かの折にふと思い出してもらい、ユーザビリティの高いシステムを作るヒントにしてもらえると幸いです。

Acroquest Technologyでは、キャリア採用を行っています。


  • ディープラーニング等を使った自然言語/画像/音声/動画解析の研究開発
  • Elasticsearch等を使ったデータ収集/分析/可視化
  • マイクロサービス、DevOps、最新のOSSを利用する開発プロジェクト
  • 書籍・雑誌等の執筆や、社内外での技術の発信・共有によるエンジニアとしての成長

 
少しでも上記に興味を持たれた方は、是非以下のページをご覧ください。
モノリシックなアプリケーションをマイクロサービス化したいエンジニア募集! - Acroquest Technology株式会社のWeb エンジニア中途・インターンシップ・契約・委託の求人 - Wantedlywww.wantedly.com