こんにちは！2015年10月14日（水）にAccSellメール・マガジン第75号を発行しました！
- ［連載］中根雅文の「全盲のコンピューター利用に関する四方山話」
- 第74回: JAWSと点字ディスプレイ (3)
- ［連載］植木 真の「こんなブログ記事見つけました！」
- 第33回: 守ってはいけない、iOSのデザインルール4つ
［連載］植木 真の「こんなブログ記事見つけました！」
第33回: 守ってはいけない、iOSのデザインルール4つ守ってはいけない？
iOSといえば、Apple。そのデザインパターンについては、Webデザインに関わっている皆さんならご存知のように、きちんとしたガイドラインがあることで定評があります。現に、iOSに関してはiOS Human Interface Guidelinesというガイドラインで、事細かに基本的なルールが文書化されています。
しかし、それを「守ってはいけない」という記事があります。こちらです。
この連載でも何度かご紹介している「ニールセン博士のAlertbox」に掲載された記事なのですが、ニールセン博士というのはWebユーザビリティの世界的権威であるヤコブ・ニールセン氏のこと。
この記事では、次の4つについては、そのAppleのガイドラインを守ることを推奨しないとしています。
- ページコントロール： ページを示すドット
- トップにあるフォーム「送信」ボタン
- プラス（＋）アイコン
- 並べ替えアイコン
しかし、これらのデザインがユーザビリティ上の問題の原因となるのを、幾度となく我々は見てきた。Appleという名の神は我々を雷で打ち倒すかもしれないが。しかし、以下に挙げたデザインパターンに従うのは推奨しない。ユーザビリティテストでうまくいかないからである
定評のあるAppleのガイドラインに含まれているデザインパターンもあるものの、ユーザビリティテストをやってみると問題となるケースがあるというのです。どちらかというと、アクセシビリティよりもユーザビリティ寄りの内容ではありますが、見た目での分かりやすさという点においては、認知障害や学習障害のあるユーザーにとっての問題点とも共通項があるのではないかと思います。
では、一緒に読んでみましょう。
1. ページコントロール： ページを示すドット
しかし、これはユーザーに見落とされがちな要素でもある。ユーザビリティテストでは、このドットがインタフェース内であまりに目立たないため、他にも利用可能なコンテンツビューがあると、明確にユーザーに示せないことが多い。そのため、このドットは、機能間の移動や情報への唯一のアクセス手段といった主要機能としてはけっして使うべきではない。
まず一つめは、ドット。この記事にスクリーンショットがありますが、たしかにiOSのホーム画面で使われていますよね。全部でいくつの画面があって、現在表示しているのがいくつめの画面なのかをドットを用いて視覚的に示しているアレです。
Webページでも、WebサイトのHOMEページでよく使われているカルーセルなんかで使われていますよね。
ZapposのiOSアプリは、ドットによって、ページの上半分のコンテンツビューが複数あることを示している。1つ目の画像では、ドットは背景になっている靴の上にあることがかろうじて見て取れるが、2番目の画像では、背景の写真の中に埋もれて完全に見えなくなってしまっている。
このZapposのiOSアプリのスクリーンショットは、分かりやすい事例ですね。右側のスクリーンショットでは、ドットがあると言われても気づかない可能性が大ではないでしょうか。Webページのカルーセルでも、時折こういうケースを見かけることがあります。
そして、これはドットに限った話ではなく、背景が写真で前景に文字がある場合も同様です。写真を背景にした場合は背景色にいろいろな色があるので、単一の前景色だと部分的にコントラストが不十分になってしまい、文字を読み取りづらくなることがあります。
FabのAndroidアプリはiOS由来のドットを取り入れている。しかし、置かれているのはカルーセルの右のほうで、中央ではない。
次のFabのAndroidアプリのスクリーンショットでは、ドットが右端に配置されています。見た目が同じであっても、配置が異なると途端にユーザーにとっては分かりにくいものになってしまうという例です。
ビジュアルをデザインする際、オリジナリティを出そうとするデザイナーさんの気持ちはよく理解できるものの、他でもよく使われていて一般化しているようなUIでは、あまり逸脱しないほうがよいということです。このあたりのさじ加減は難しいところですね。
では、どうすればよいか、ということで次の二点を挙げています。
- そもそもコンテンツへのアクセスをスワイプですべきなのかどうか、考えてみよう。ナビゲーションやテキストリンク経由のほうがアクセスしやすい可能性もある。
- 一部のコンテンツ（テキストや画像）を削除し、スワイプすればさらに情報が出てくることを視覚的に示そう。
2. トップにあるフォーム送信ボタンなど
iOSアプリにも、我々はこのデザインパターンの遵守を推奨しない。理由はシンプルで、ページの上から下に進むという自然なワークフローに反しているからである。ユーザーは入力フォームの記入時、上から下に作業を行っていく。そして、終わりまで来たときに彼らが期待しているのは、まさにそこ、つまり、記入し終わった最後の入力欄の次に、「送信」ボタンがあることだ。したがって、ユーザーはそこでボタンが見つからないと、大体の場合、当惑して、周りを見回しはじめ、どうしたらいいかわからなくなる。
次は、フォームの送信ボタン。これはワタクシも気になっていたことです。記事でも指摘している通りで、フォームに入力する際は上から順に入力していって、最後に送信ボタンがあるというのを期待しているわけですが、なぜ右上の隅に置くことをルールにしたんでしょうかね。
つづきはメルマガで……。