市場調査ホームニールセン博士のAlertbox守ってはいけない、iOSのデザインルール4つページコントロール(ドット)、ページトップの「送信」、プラス(+)アイコン、並べ替えアイコンの4つは、テストでユーザビリティ上の問題を引き起こすことの多いiOSデザインパターンである。2015巨大ソフトウェア会社(たとえば、AppleやMicrosoft、Google)はユーザーとデザイナー双方のためにデザインガイドラインを作成している。おかげで、デザイナーや開発者側は、恵まれた条件のもとで、きちんとしたものになることが期待できるインタフェースの作成を始められるようになり、まったく新しいUI要素を考案する(そしてテストする)必要がない。ユーザー側も、すべてのデザイナーがこうしたガイドラインに従っていれば、同じオペレーションシステム上で走るすべてのアプリで、一貫性のあるルックアンドフィールが得られる。スタイルガイドの遵守はほぼ常に推奨される。「公式」デザインが実際にはうまく機能しない場合もある。それにもかかわらず、理由はわからないが(たぶん、そうした推奨を守らなければいいだけのことだからか、それとも、徹底的な調査がされなかったか、あるいは非常に難しいデザイン課題に対して、それが解決策として最善と見なされたのか)、うまく機能しないデザインがスタイルガイドの中に残っていることはある。以下のiOSでよく見る4つのデザインパターンは、Appleが広く自分たちのアプリで利用しているものであり、多数の外部デザイナーから遵守されてきたものである。そのうちのいくつかはiOSのヒューマンインタフェースガイドラインにも入っている。これらのデザインがユーザビリティ上の問題の原因となるのを、幾度となく我々は見てきた。Appleという名の神は我々を雷で打ち倒すかもしれないが。以下に挙げたデザインパターンに従うのは推奨しない。ページを示すドット多数のiOSユーザーにとって、このページコントロールはおなじみのものだ。iOSのページコントロールは、開いているビューやページを横一列に並んだドットで示すもので、その時点で選択されているページは不透明なドットで、それ以外のページは透明なドットで表される。iOSのホーム画面では、ドット(ページコントロール)によって、現在のビューと、他にあといくつビューがあるか(つまり、アプリページがあと何ページあるか)を示す。これはドットの最も代表的かつよく目にする例の1つだが、と同時に、ドットが我慢できるほどになんとか機能する数少ない例の1つでもある。アイコンでいっぱいの画面は複数あり、自分が求めているアプリケーションを見つけるには、スワイプしなければならないことをユーザーが知っているからである(アイコンを探すことに関するここでの全体のUXは理想的なものではないが、問題なのはページドットではない)。アプリやサイトの中には、このインタフェース要素によって、ユーザーがコンテンツページをスワイプ可能であることを示しているものもあれば、ページの中のあるエリアにこれを置き、カルーセルの形でコンテンツを見せるものもある。モバイルWebとアプリの双方でこのデザインパターンは広く利用されている。これはユーザーに見落とされがちな要素でもある。ユーザビリティテストでは、このドットがインタフェース内であまりに目立たないため、他にも利用可能なコンテンツビューがあると、明確にユーザーに示せないことが多い。そのため、このドットは、機能間の移動や情報への唯一のアクセス手段といった主要機能としてはけっして使うべきではない。WatchlistやWishlistといったビューのタイトルをタップすることでビューの一覧が表示されるナビゲーションもある)。デザイナーや開発者もドットの丸の色合いを選ぶことはできる。小さくささやかな半透明のデザイン要素をページ上で目立たせるのは容易なことではない。要素の多い画像の上にこの丸を載せるデザイナーは多いが、そうすると、そうでなくてもささやかなデザインが、さらに目立たなくなる。ドットを利用するなら、ドットと背景間の色のコントラストを上げ、できればドットを単色の背景上に置いて、ユーザーにとって見つけやすくしよう。ZapposのiOSアプリは、ドットによって、ページの上半分のコンテンツビューが複数あることを示している。1つ目の画像では、ドットは背景になっている靴の上にあることがかろうじて見て取れるが、2番目の画像では、背景の写真の中に埋もれて完全に見えなくなってしまっている。サイトやアプリの中には、iOSの既存の規約すら勝手に曲げ、四角等の別の形を使ったり、ページのあちこちにドットを移動させたものもある。サイトやアプリがiOSのガイドラインで規定されているデザイン規約を順守していても、このドットを見つけて、利用するのに、ユーザーは四苦八苦している。ドットに変更を加えて、iOS標準から逸脱したものにしてしまうと、この要素を識別し、理解するのはさらにずっと困難になる。ドットを利用するのなら、コントロール対象の要素の真下の中央部に配置しよう。FabのAndroidアプリはiOS由来のドットを取り入れている。置かれているのはカルーセルの右のほうで、中央ではない。ユーザーがドットにしっかり気づいたとしても、重要なユーザビリティ上の課題はまだ残っている。ドットではコンテンツに対して、シーケンシャルなアクセスしかできないので、どんなコンテンツがあるかが表示されないのだ。ドットが示しているものが、カルーセルのアイテムであれ、デッキ・オブ・カードのページであれ、ユーザビリティ上の課題は同じだ。中でも、シンボルで各ページを表現しているカルーセルは、ユーザーにとって、とりわけコントロールしにくい。次に来る内容について、ユーザーは知る術がないので、興味のあるコンテンツにダイレクトに移動することができないからである。その代わりにどうすべきか:そもそもコンテンツへのアクセスをスワイプですべきなのかどうか、考えてみよう。ナビゲーションやテキストリンク経由のほうがアクセスしやすい可能性もある。一部のコンテンツ(テキストや画像)を削除し、スワイプすればさらに情報が出てくることを視覚的に示そう。Storeではドットを利用せずに、要素自体を減らして、このナビゲーション用カルーセルが動かせるものであるとユーザーにわかるようにしている。トップにあるフォーム送信ボタンなどiOSでは、「完了」ボタンはページトップにあるナビゲーションバー内に表示されていることが多い。フォームの「送信」ボタンも(ボタンの名前が「送信」であろうが、たとえば、「注文」など、それ以外のものであろうが)、該当フォームのトップに置かれている場合がある。このデザインパターンはAndroidアプリにも浸透しはじめている。ボタンがナビゲーションバーの右上隅に置かれている。Todoist(やることリストのアプリ)のAndroidアプリ(右)もiOSのデザインパターンを取り入れ、「送信」ボタン(チェックマークアイコン)を右上隅に置いている。(入力フォームが我々のガイドラインの多数に違反していることにも注意しよう。入力欄の中にラベルがある。GMT-8:00は何を意味しているのだろうか)。iOSアプリにも、我々はこのデザインパターンの遵守を推奨しない。理由はシンプルで、ページの上から下に進むという自然なワークフローに反しているからである。ユーザーは入力フォームの記入時、上から下に作業を行っていく。終わりまで来たときに彼らが期待しているのは、まさにそこ、つまり、記入し終わった最後の入力欄の次に、「送信」ボタンがあることだ。したがって、ユーザーはそこでボタンが見つからないと、大体の場合、当惑して、周りを見回しはじめ、どうしたらいいかわからなくなる。Order(:注文)ボタンを押す必要がある。したボタンを画面のトップに置くのは、フォーム入力における自然なワークフローに逆らうものだ。ユーザーは入力フォームのすべての入力欄への記入が終わると、自分がページの最下部にいて、次にすることが何もない状態で放置されていることに気づくことになる。モバイルの小さな画面であっても、該当する「送信」ボタンを探して見つけ出すには、不必要な労力が余計に必要になる。デスクトップでの大抵の入力フォームで慣例になっているように、そのボタンがページ最下部の最後の入力欄の下に置かれていたなら、この手間は省くことが可能だっただろう。(一般に認められているGUIのデザインガイドラインとは、モバイルであろうかなかろうが、アクションとオブジェクトは近接させるというもので、アクションボタンをその作用先のデータからできるだけ離して置くというものではない)。Order(:注文する))から切り離され、画面トップに配置されている。ページヘッダーに「送信」ボタンを置くことのメリットの1つが、iOSアプリのこのヘッダーは固定なので、入力欄を記入し終わって、入力フォームの一番下までたどり着いたどうかにかかわらず、ユーザーがいつでも容易にこのボタンにアクセス可能なことである。(カレンダーアプリでは、すべての入力欄に対して、ユーザーは関心があるわけではない、と考えていいだろう。ログインフォームの場合は違うだろうが)。Tonightのアプリにあるような、ページ最下部にある固定の「送信」ボタンを検討するとよい。画面のスペースをいくらかは犠牲にすることになる。それと引き換えに、より良質で、ユーザーブルなインタラクションフローが得られることになるだろう。Pay(:支払い)ボタンはページの最下部に常に出ていて、いつでもアクセス可能である。これによって、ユーザーは支払いボタンへのアクセスを常時確保しつつ、必要回数だけ、ページにインタラクトすればよくなる。ボタンが予想通りの理にかなった位置に表示されているからである。その代わりにどうすべきか:フォーム「送信」ボタン(等)は入力フォームの下に表示し、ページトップには出さないようにしよう。プラス(+)アイコン多数のモバイルアプリで、プラスアイコンはさまざまな機能の表示に利用されている。トップナビゲーションバー内に配置されていれば、これは「追加する」という意味であるのが最も一般的だ。アイテムの表やリスト内に配置されていると、このアイコンの意味は、なんらかのリストやグループへのアイテムの追加とも、リストアイテムの詳細情報の展開とも、取れてしまう。複数の解釈があると、アイコンの意味をユーザーが一貫して理解することは困難になる。トップナビゲーションバー内にある場合、プラスアイコン(右上隅)は新しいアイテムの追加を意味するのが最も一般的だ。MyFitnessPalのアプリでは、このアイコンによって、友達を追加することができるようになっている。プラスアイコンのユーザビリティは、それがUI内のどこにあるかで大きく変わってくる。ナビゲーションバーのような一般的な場所にあるとき、画面に表示されているコンテンツの種類から見て、新規アイテムの追加というアクションがありえそうな限り、普通は正しく解釈される。プラスアイコンがインタフェースのメインコンテンツ内に出ている場合は、そこから解釈しうる意味は複数となり、ユーザーを混乱させることになるだろう。旧バージョンのAny.doアプリは、プラスアイコンを、既に存在しているやることリストのラベルのそばに表示していた。なっていると、プラスアイコンをタップすると、既存のリストが展開されて、そこに含まれているアイテムが見えるようになるのか、それとも、該当するリストにやることの新規アイテムを追加できるのかはあいまいだ。したあいまいさは、最新バージョンではプラスをナビゲーションバーに置き直すことで解決されていた。いえ、アイコンは、今度は、まったく新規のやることリストの追加用となっているのだが。旧バージョンのAny.doのiOSアプリ(左)は、プラスアイコンの意味が曖昧で、リストが展開できるとも、特定のリストにアイテムが追加できるとも、解釈が可能だった。最新バージョン(右)では、プラスアイコンはトップナビゲーションバーに入れられ、今度は、まったく新規のやることリストの追加用となっている。プラスアイコンを活用してアクションを起こすのは、それによって何が起こるかをユーザーが誤解している場合には、特に悪影響を及ぼす。プラスアイコンは矢印やキャレット同様、Webやモバイルアプリでリストを展開するのによく利用されているため、その同じプラスアイコンが実際に取ったアクションが、ユーザーが予想していたものではないということも珍しくない。LinkedInのモバイルアプリでは、プラスアイコンは丸の中に入れられ、置かれている場所により、企業のフォローをしたり、グループに参加したりするのに利用される。ユーザビリティテストでは、詳細情報を見ようと思っていただけなのに、誤ってグループに入ってしまい、驚いていたユーザーが何人もいた。LinkedInのアプリはプラスアイコンをアプリ全体でさまざまな機能に繰り返し利用している。上に出ているメインのホーム画面では、プラスアイコンをタップすることで、企業のフォローが可能だ(だが、このことがユーザーの意図していることであるかどうかの確認はされない)。アプリ内を検索しているときには、プラスアイコンによって、グループに簡単に参加することができる。ありがたいことに、問題のあるこのアイコンはメンバーや求人についての検索結果には出ない。省略されていなければ、結果は興味深いものになっていたことだろう。プラスアイコンをアプリ中にやみくもに入れることはやめよう。インタフェース内のコンテキスト次第で、何通りにも解釈可能な場合があるからである。その代わりにどうすべきか:ナビゲーションバーに入れるのが安全ではある。他のエリアに+アイコンを表示するというデザインにするなら、必ずユーザビリティテストをして、アイコンの意味が正しく理解されているかを確かめよう。このアイコンの課題を完全に回避する唯一の方法は、利用自体をやめ、リストの展開には矢印かキャレットを、リストアイテムに関するアクションを起こすボタンとしては、テキストラベルを利用することだ。並べ替えアイコン並べ替えアイコン多くのモバイルデバイス向けアイコン同様、並べ替えアイコンもそれが何をするものかは、見た目でははっきりしない。それをじっと見ても、このアイコンでリスト内のアイテムが並べ替えられるとはおそらくわからないと思う。並べ替えアイコンで使われている横3本線は、規模は小さいが、リストをシンボル化したものだ。ある読者が指摘していたように、「ドラッグ中にアイテムから指が滑り落ちないようにする突起」なのかもしれない。このアイコンがリストの列内に表示されているときにユーザーに求められているのは、アイコンをタップし、押したままの状態で、そのアイコンに結び付いているアイテムをリスト内のふさわしい場所までドラッグするというものだ。このデザインパターンにもユーザビリティ上の課題がいくつかある。リストのアイテムの順番が並べ替え可能なとき、ユーザーはアイテム自体(単語やボタン等)を直接タップして、ドラッグできることを期待している。その代わりに、小さな解読しにくいアイコンにタッチして、ドラッグしなければならないとは彼らは思ってない。アイコンはリスト内のアイテム自体に比べると、ターゲットとしてずっと小さく、タップしにくい。したがって、その結果、インタラクションコストは増加し、ユーザーは必要であるはず以上の努力をして、タップしたりドラッグしたりすることになる。加えて、彼らはリストビューの列の中にあるすべての要素がその同じアクションを取ることを期待するようになる。アイテムやアイコンをドラッグすれば、同じことが起こるはずだと考えるようになるのである。FinanceはAppleのiOSの推奨事項を採用して、リスト内のアイテムの順番の並べ替えを行っている。右側にある横3本線のアイコンをタップして(左)、ドラッグし、選んだアイテムを移動させるというものだ。このアプリは移動中のアイテムを影付きテキストにして表示する(中央)。変更が有効になった状態がこれだ(右)。リストアイテム自体のほうがタップターゲットよりもずっと大きい。それらをタップしてドラッグしてアイテムの並べ替えはできない。おまけに、iOSのスタイルガイドで推奨されているほぼ同じ形をしたアイコンが、モバイルWeb等では、まったく違う意味で解釈されている。「ハンバーガー」アイコンとこの並べ替えアイコンの見た目は信じられないほど似ている。左側が並べ替えアイコン。右側がハンバーガーメニュー。同じもの、あるいは同じだと認識されるようなものによって、呼び出されるコマンドが違えば、ユーザーは当惑し、混乱するだろう。ハンバーガーメニューの勢いが今後も衰えないようなら、(不本意ではあるが、この機能が今後も引き続き見落とされがちだとしても)横3本線をクリックすればメニューが開くと学習するユーザーはさらに増えることになる。このやり方では並べ替えアイコンは機能しない。した食い違いによって、すでに利用したことのあるアイコンの機能についてのユーザーの再生能力は低下していくのだ。その代わりにどうすべきか:固定のアイテムをタップして、ドラッグできるようにするなら、特定のアイコンをクリックしなくても、それができるようにしよう。メニューとしてハンバーガーアイコンを単独で置くのではなく、「メニュー」という言葉を一緒に表示し、メニューが開くとわかるようにしよう。なければ、「メニュー」という言葉のみを入れよう。結論しっかりと調査がされているインタフェースパターンからの逸脱は、一般には勧められない。考えられるベストプラクティスに従うほうがよいからだ。他のiOSアプリを利用することで得られた一貫性や知識が、ユーザーの期待の下地になるとわかっているからである。どんなガイドラインやスタイルガイドも、ユーザビリティテストをすれば、あなた方のデザインでうまく機能するかどうかの証明あるいは反証が可能だ。ユーザーが利用しているところの観察をとおして我々が見てきたのは、今回挙げた4つのデザインパターンは、その利用を推奨できないといえるだけの課題が一貫してあったということである。デザインパターンビジュアルデザインモバイル・タブレットイードが提供する「ユーザビリティ評価」サービスイードは、スマートフォンアプリやサイトのUI品質をユーザー視点で評価・改善提案し、ユーザー側とビジネス側、双方の目的達成をサポートします。カラム無視」への対策Webユーザーは、情報過負荷へ適応するため、重要でなさそう、あるいは広告のように見えるエリアから注意をそらすように自分たちを訓練してきた。サイドバーは適切にデザインすれば、コンテンツを発見しやすくし、ユーザビリティをうまく向上させることができる。PCサイトでの水平スクロールと擬似スワイプの利用にはご用心PC向けのデザインでスワイプジェスチャーを模倣し、水平方向のスクロールを組み込むサイトが増えているが、コンテンツ内を横に動くことにユーザーはいまだ乗り気ではない。ハンバーガーメニューと非表示のナビゲーションはUX指標を悪化させるWebサイトのメインナビゲーションを非表示にすると、発見しやすさはほぼ半減する。その上、タスク達成に時間がかかるようになり、タスクがより難しく感じられるようになる。「カード」とは、トランプのカードに似た見た目の柔軟なサイズのコンテナに関連情報をまとめるUIデザインパターンのことである。