守ってはいけない、iOSのデザインルール4つ

ページコントロール(ドット)、ページトップの「送信」、プラス(+)アイコン、並べ替えアイコンの4つは、テストでユーザビリティ上の問題を引き起こすことの多いiOSデザインパターンである。

  • 4 iOS Rules to Break
  • by Aurora Bedford, Raluca Budiu, Kara Pernice, and Amy Schade
  • on July 9, 2015
  • 日本語版2015年8月31日公開

巨大ソフトウェア会社(たとえば、AppleやMicrosoft、Google)はユーザーとデザイナー双方のためにデザインガイドラインを作成している。

  • おかげで、デザイナーや開発者側は、恵まれた条件のもとで、きちんとしたものになることが期待できるインタフェースの作成を始められるようになり、まったく新しいUI要素を考案する(そしてテストする)必要がない。
  • 一方、ユーザー側も、すべてのデザイナーがこうしたガイドラインに従っていれば、同じオペレーションシステム上で走るすべてのアプリで、一貫性のあるルックアンドフィールが得られる。

スタイルガイドの遵守はほぼ常に推奨される。しかし、「公式」デザインが実際にはうまく機能しない場合もある。それにもかかわらず、理由はわからないが(たぶん、そうした推奨を守らなければいいだけのことだからか、それとも、徹底的な調査がされなかったか、あるいは非常に難しいデザイン課題に対して、それが解決策として最善と見なされたのか)、うまく機能しないデザインがスタイルガイドの中に残っていることはある。

以下のiOSでよく見る4つのデザインパターンは、Appleが広く自分たちのアプリで利用しているものであり、多数の外部デザイナーから遵守されてきたものである。そのうちのいくつかはiOSのヒューマンインタフェースガイドラインにも入っている。しかし、これらのデザインがユーザビリティ上の問題の原因となるのを、幾度となく我々は見てきた。Appleという名の神は我々を雷で打ち倒すかもしれないが。しかし、以下に挙げる4つのデザインパターンに従うことは推奨しない。ユーザビリティテストでうまくいかないからである:

1. ページコントロール: ページを示すドット

多数のiOSユーザーにとって、このページコントロールはおなじみのものだ。iOSのページコントロールは、開いているビューやページを横一列に並んだドットで示すもので、その時点で選択されているページは不透明なドットで、それ以外のページは透明なドットで表される。

iOSのホーム画面では、ドット(ページコントロール)によって、現在のビューと、他にあといくつビューがあるか(つまり、アプリページがあと何ページあるか)を示す。これはドットの最も代表的かつよく目にする例の1つだが、と同時に、ドットが我慢できるほどになんとか機能する数少ない例の1つでもある。ごちゃごちゃとアイコンでいっぱいの画面は複数あり、自分が求めているアプリケーションを見つけるには、スワイプしなければならないことをユーザーが知っているからである(アイコンを探すことに関するここでの全体のUXは理想的なものではないが、問題なのはページドットではない)。
iOSのホーム画面では、ドット(ページコントロール)によって、現在のビューと、他にあといくつビューがあるか(つまり、アプリページがあと何ページあるか)を示す。これはドットの最も代表的かつよく目にする例の1つだが、と同時に、ドットが我慢できるほどになんとか機能する数少ない例の1つでもある。ごちゃごちゃとアイコンでいっぱいの画面は複数あり、自分が求めているアプリケーションを見つけるには、スワイプしなければならないことをユーザーが知っているからである(アイコンを探すことに関するここでの全体のUXは理想的なものではないが、問題なのはページドットではない)。

アプリやサイトの中には、このインタフェース要素によって、ユーザーがコンテンツページをスワイプ可能であることを示しているものもあれば、ページの中のあるエリアにこれを置き、カルーセルの形でコンテンツを見せるものもある。モバイルWebとアプリの双方でこのデザインパターンは広く利用されている。しかし、これはユーザーに見落とされがちな要素でもある。ユーザビリティテストでは、このドットがインタフェース内であまりに目立たないため、他にも利用可能なコンテンツビューがあると、明確にユーザーに示せないことが多い。そのため、このドットは、機能間の移動や情報への唯一のアクセス手段といった主要機能としてはけっして使うべきではない

iOSアプリのStock Market HD Stocks and Sharesで、Watchlist(:ウォッチリスト)やWishlist(:ウィッシュリスト)、Sold(:売却銘柄)、My Holdings(:保有銘柄)」といったビュー間において、明示されている唯一の移動手段が、ページ最下部にあるドットを見つけて、他の機能(ビュー)が出てくるまでスワイプすることである(訳注: WatchlistやWishlistといったビューのタイトルをタップすることでビューの一覧が表示されるナビゲーションもある)。
iOSアプリのStock Market HD Stocks and Sharesで、Watchlist(:ウォッチリスト)やWishlist(:ウィッシュリスト)、Sold(:売却銘柄)、My Holdings(:保有銘柄)」といったビュー間において、明示されている唯一の移動手段が、ページ最下部にあるドットを見つけて、他の機能(ビュー)が出てくるまでスワイプすることである(訳注: WatchlistやWishlistといったビューのタイトルをタップすることでビューの一覧が表示されるナビゲーションもある)。

デザイナーや開発者もドットの丸の色合いを選ぶことはできる。しかし、小さくささやかな半透明のデザイン要素をページ上で目立たせるのは容易なことではない。要素の多い画像の上にこの丸を載せるデザイナーは多いが、そうすると、そうでなくてもささやかなデザインが、さらに目立たなくなる。ドットを利用するなら、ドットと背景間の色のコントラストを上げ、できればドットを単色の背景上に置いて、ユーザーにとって見つけやすくしよう。

Zapposの iOSアプリは、ドットによって、ページの上半分のコンテンツビューが複数あることを示している。1つ目の画像では、ドットは背景になっている靴の上にあることがかろうじて見て取れるが、2番目の画像では、背景の写真の中に埋もれて完全に見えなくなってしまっている。
ZapposのiOSアプリは、ドットによって、ページの上半分のコンテンツビューが複数あることを示している。1つ目の画像では、ドットは背景になっている靴の上にあることがかろうじて見て取れるが、2番目の画像では、背景の写真の中に埋もれて完全に見えなくなってしまっている。

サイトやアプリの中には、iOSの既存の規約すら勝手に曲げ、四角等の別の形を使ったり、ページのあちこちにドットを移動させたものもある。サイトやアプリがiOSのガイドラインで規定されているデザイン規約を順守していても、このドットを見つけて、利用するのに、ユーザーは四苦八苦している。ドットに変更を加えて、iOS標準から逸脱したものにしてしまうと、この要素を識別し、理解するのはさらにずっと困難になる。もしドットを利用するのなら、コントロール対象の要素の真下の中央部に配置しよう。

FabのAndroidアプリはiOS由来のドットを取り入れている。しかし、置かれているのはカルーセルの右のほうで、中央ではない。
FabのAndroidアプリはiOS由来のドットを取り入れている。しかし、置かれているのはカルーセルの右のほうで、中央ではない。

たとえユーザーがドットにしっかり気づいたとしても、重要なユーザビリティ上の課題はまだ残っている。ドットではコンテンツに対して、シーケンシャルなアクセスしかできないので、どんなコンテンツがあるかが表示されないのだ。ドットが示しているものが、カルーセルのアイテムであれ、デッキ・オブ・カードのページであれ、ユーザビリティ上の課題は同じだ。中でも、シンボルで各ページを表現しているカルーセルは、ユーザーにとって、とりわけコントロールしにくい。次に来る内容について、ユーザーは知る術がないので、興味のあるコンテンツにダイレクトに移動することができないからである。

その代わりにどうすべきか:

  • そもそもコンテンツへのアクセスをスワイプですべきなのかどうか、考えてみよう。ナビゲーションやテキストリンク経由のほうがアクセスしやすい可能性もある。
  • 一部のコンテンツ(テキストや画像)を削除し、スワイプすればさらに情報が出てくることを視覚的に示そう。
iOSのApp Store ではドットを利用せずに、要素自体を減らして、このナビゲーション用カルーセルが動かせるものであるとユーザーにわかるようにしている。
iOSのApp Storeではドットを利用せずに、要素自体を減らして、このナビゲーション用カルーセルが動かせるものであるとユーザーにわかるようにしている。

2. トップにあるフォーム送信ボタンなど

iOSでは、「完了」ボタンはページトップにあるナビゲーションバー内に表示されていることが多い。そして、また、フォームの「送信」ボタンも(ボタンの名前が「送信」であろうが、たとえば、「注文」など、それ以外のものであろうが)、該当フォームのトップに置かれている場合がある。このデザインパターンはAndroidアプリにも浸透しはじめている。

iOSのカレンダー(左): 入力フォームを送信するAdd(:追加) ボタンがナビゲーションバーの右上隅に置かれている。Todoist(やることリストのアプリ)のAndroidアプリ(右)もiOSのデザインパターンを取り入れ、「送信」ボタン(チェックマークアイコン)を右上隅に置いている。(入力フォームが我々のガイドラインの多数に違反していることにも注意しよう。たとえば、入力欄の中にラベルがある。また、GMT-8:00は何を意味しているのだろうか)。
iOSのカレンダー(左): 入力フォームを送信するAdd(:追加) ボタンがナビゲーションバーの右上隅に置かれている。Todoist(やることリストのアプリ)のAndroidアプリ(右)もiOSのデザインパターンを取り入れ、「送信」ボタン(チェックマークアイコン)を右上隅に置いている。(入力フォームが我々のガイドラインの多数に違反していることにも注意しよう。たとえば、入力欄の中にラベルがある。また、GMT-8:00は何を意味しているのだろうか)。

iOSアプリにも、我々はこのデザインパターンの遵守を推奨しない。理由はシンプルで、ページの上から下に進むという自然なワークフローに反しているからである。ユーザーは入力フォームの記入時、上から下に作業を行っていく。そして、終わりまで来たときに彼らが期待しているのは、まさにそこ、つまり、記入し終わった最後の入力欄の次に、「送信」ボタンがあることだ。したがって、ユーザーはそこでボタンが見つからないと、大体の場合、当惑して、周りを見回しはじめ、どうしたらいいかわからなくなる。

以下の例(PinkberryとNordstrom)では、入力フォーム記入後、ユーザーはSign In(:サインイン)ボタンやPlace Order(:注文)ボタンを押す必要がある。こうしたボタンを画面のトップに置くのは、フォーム入力における自然なワークフローに逆らうものだ。つまり、ユーザーは入力フォームのすべての入力欄への記入が終わると、自分がページの最下部にいて、次にすることが何もない状態で放置されていることに気づくことになる。モバイルの小さな画面であっても、該当する「送信」ボタンを探して見つけ出すには、不必要な労力が余計に必要になる。が、デスクトップでの大抵の入力フォームで慣例になっているように、そのボタンがページ最下部の最後の入力欄の下に置かれていたなら、この手間は省くことが可能だっただろう。

(一般に認められているGUIのデザインガイドラインとは、モバイルであろうかなかろうが、アクションとオブジェクトは近接させるというもので、アクションボタンをその作用先のデータからできるだけ離して置くというものではない)。

iPhone向けのPinkberry(左)とNordstrom(右)の作業領域は、Submit(:送信)ボタン(ラベルは各々Sign In(:サインインする) と Place Order(:注文する))から切り離され、画面トップに配置されている。
iPhone向けのPinkberry(左)とNordstrom(右)の作業領域は、Submit(:送信)ボタン(ラベルは各々Sign In(:サインインする)とPlace Order(:注文する))から切り離され、画面トップに配置されている。

ページヘッダーに「送信」ボタンを置くことのメリットの1つが、iOSアプリのこのヘッダーは固定なので、入力欄を記入し終わって、入力フォームの一番下までたどり着いたどうかにかかわらず、ユーザーがいつでも容易にこのボタンにアクセス可能なことである。(カレンダーアプリでは、すべての入力欄に対して、ユーザーは関心があるわけではない、と考えていいだろう。ログインフォームの場合は違うだろうが)。いずれにせよ、いつでもアクセス可能なボタンがあることがあなた方にとって重要なら、代わりに、Hotel Tonightのアプリにあるような、ページ最下部にある固定の「送信」ボタンを検討するとよい。そう、画面のスペースをいくらかは犠牲にすることになる。しかし、それと引き換えに、より良質で、ユーザーブルなインタラクションフローが得られることになるだろう。

Hotel Tonight: Pay(:支払い)ボタンはページの最下部に常に出ていて、いつでもアクセス可能である。これによって、ユーザーは支払いボタンへのアクセスを常時確保しつつ、必要回数だけ、ページにインタラクトすればよくなる。ボタンが予想通りの理にかなった位置に表示されているからである。
Hotel Tonight: Pay(:支払い)ボタンはページの最下部に常に出ていて、いつでもアクセス可能である。これによって、ユーザーは支払いボタンへのアクセスを常時確保しつつ、必要回数だけ、ページにインタラクトすればよくなる。ボタンが予想通りの理にかなった位置に表示されているからである。

その代わりにどうすべきか:

フォーム「送信」ボタン(等)は入力フォームの下に表示し、ページトップには出さないようにしよう。

3. プラス(+)アイコン

多数のモバイルアプリで、プラスアイコンはさまざまな機能の表示に利用されている。トップナビゲーションバー内に配置されていれば、これは「追加する」という意味であるのが最も一般的だ。しかし、アイテムの表やリスト内に配置されていると、このアイコンの意味は、なんらかのリストやグループへのアイテムの追加とも、リストアイテムの詳細情報の展開とも、取れてしまう。複数の解釈があると、アイコンの意味をユーザーが一貫して理解することは困難になる。

トップナビゲーションバー内にある場合、プラスアイコン(右上隅)は新しいアイテムの追加を意味するのが最も一般的だ。たとえば、MyFitnessPalのアプリでは、このアイコンによって、友達を追加することができるようになっている。
トップナビゲーションバー内にある場合、プラスアイコン(右上隅)は新しいアイテムの追加を意味するのが最も一般的だ。たとえば、MyFitnessPalのアプリでは、このアイコンによって、友達を追加することができるようになっている。

プラスアイコンのユーザビリティは、それがUI内のどこにあるかで大きく変わってくる。ナビゲーションバーのような一般的な場所にあるとき、画面に表示されているコンテンツの種類から見て、新規アイテムの追加というアクションがありえそうな限り、普通は正しく解釈される。しかしながら、プラスアイコンがインタフェースのメインコンテンツ内に出ている場合は、そこから解釈しうる意味は複数となり、ユーザーを混乱させることになるだろう

たとえば、旧バージョンのAny.doアプリは、プラスアイコンを、既に存在しているやることリストのラベルのそばに表示していた。こうなっていると、プラスアイコンをタップすると、既存のリストが展開されて、そこに含まれているアイテムが見えるようになるのか、それとも、該当するリストにやることの新規アイテムを追加できるのかはあいまいだ。こうしたあいまいさは、最新バージョンではプラスをナビゲーションバーに置き直すことで解決されていた。とはいえ、アイコンは、今度は、まったく新規のやることリストの追加用となっているのだが。

旧バージョンのAny.doのiOSアプリ(左)は、プラスアイコンの意味が曖昧で、リストが展開できるとも、特定のリストにアイテムが追加できるとも、解釈が可能だった。最新バージョン(右)では、プラスアイコンはトップナビゲーションバーに入れられ、今度は、まったく新規のやることリストの追加用となっている。
旧バージョンのAny.doのiOSアプリ(左)は、プラスアイコンの意味が曖昧で、リストが展開できるとも、特定のリストにアイテムが追加できるとも、解釈が可能だった。最新バージョン(右)では、プラスアイコンはトップナビゲーションバーに入れられ、今度は、まったく新規のやることリストの追加用となっている。

プラスアイコンを活用してアクションを起こすのは、それによって何が起こるかをユーザーが誤解している場合には、特に悪影響を及ぼす。プラスアイコンは矢印やキャレット同様、Webやモバイルアプリでリストを展開するのによく利用されているため、その同じプラスアイコンが実際に取ったアクションが、ユーザーが予想していたものではないということも珍しくない。たとえば、LinkedInのモバイルアプリでは、プラスアイコンは丸の中に入れられ、置かれている場所により、企業のフォローをしたり、グループに参加したりするのに利用される。ユーザビリティテストでは、詳細情報を見ようと思っていただけなのに、誤ってグループに入ってしまい、驚いていたユーザーが何人もいた。

LinkedInのアプリはプラスアイコンをアプリ全体でさまざまな機能に繰り返し利用している。上に出ているメインのホーム画面では、プラスアイコンをタップすることで、企業のフォローが可能だ(だが、このことがユーザーの意図していることであるかどうかの確認はされない)。アプリ内を検索しているときには、プラスアイコンによって、グループに簡単に参加することができる。ありがたいことに、問題のあるこのアイコンはメンバーや求人についての検索結果には出ない。しかし、もし省略されていなければ、結果は興味深いものになっていたことだろう。
LinkedInのアプリはプラスアイコンをアプリ全体でさまざまな機能に繰り返し利用している。上に出ているメインのホーム画面では、プラスアイコンをタップすることで、企業のフォローが可能だ(だが、このことがユーザーの意図していることであるかどうかの確認はされない)。アプリ内を検索しているときには、プラスアイコンによって、グループに簡単に参加することができる。ありがたいことに、問題のあるこのアイコンはメンバーや求人についての検索結果には出ない。しかし、もし省略されていなければ、結果は興味深いものになっていたことだろう。

プラスアイコンをアプリ中にやみくもに入れることはやめよう。インタフェース内のコンテキスト次第で、何通りにも解釈可能な場合があるからである。

その代わりにどうすべきか:

  • ナビゲーションバーに入れるのが安全ではある。しかし、他のエリアに+アイコンを表示するというデザインにするなら、必ずユーザビリティテストをして、アイコンの意味が正しく理解されているかを確かめよう。
  • このアイコンの課題を完全に回避する唯一の方法は、利用自体をやめ、リストの展開には矢印かキャレットを、リストアイテムに関するアクションを起こすボタンとしては、テキストラベルを利用することだ。

4. 並べ替えアイコン

並べ替えアイコン
並べ替えアイコン

多くのモバイルデバイス向けアイコン同様、並べ替えアイコンもそれが何をするものかは、見た目でははっきりしない。それをじっと見ても、このアイコンでリスト内のアイテムが並べ替えられるとはおそらくわからないと思う。並べ替えアイコンで使われている横3本線は、規模は小さいが、リストをシンボル化したものだ。あるいは、ある読者が指摘していたように、「ドラッグ中にアイテムから指が滑り落ちないようにする突起」なのかもしれない。このアイコンがリストの列内に表示されているときにユーザーに求められているのは、アイコンをタップし、押したままの状態で、そのアイコンに結び付いているアイテムをリスト内のふさわしい場所までドラッグするというものだ。このデザインパターンにもユーザビリティ上の課題がいくつかある。

リストのアイテムの順番が並べ替え可能なとき、ユーザーはアイテム自体(単語やボタン等)を直接タップして、ドラッグできることを期待している。その代わりに、小さな解読しにくいアイコンにタッチして、ドラッグしなければならないとは彼らは思ってない。アイコンはリスト内のアイテム自体に比べると、ターゲットとしてずっと小さく、タップしにくい。したがって、その結果、インタラクションコストは増加し、ユーザーは必要であるはず以上の努力をして、タップしたりドラッグしたりすることになる。加えて、彼らはリストビューの列の中にあるすべての要素がその同じアクションを取ることを期待するようになる。つまり、アイテムやアイコンをドラッグすれば、同じことが起こるはずだと考えるようになるのである。

YAHOO! FinanceはAppleのiOSの推奨事項を採用して、リスト内のアイテムの順番の並べ替えを行っている。右側にある横3本線のアイコンをタップして(左)、ドラッグし、選んだアイテムを移動させるというものだ。このアプリは移動中のアイテムを影付きテキストにして表示する(中央)。変更が有効になった状態がこれだ(右)。リストアイテム自体のほうがタップターゲットよりもずっと大きい。しかし、それらをタップしてドラッグしてアイテムの並べ替えはできない。
YAHOO! FinanceはAppleのiOSの推奨事項を採用して、リスト内のアイテムの順番の並べ替えを行っている。右側にある横3本線のアイコンをタップして(左)、ドラッグし、選んだアイテムを移動させるというものだ。このアプリは移動中のアイテムを影付きテキストにして表示する(中央)。変更が有効になった状態がこれだ(右)。リストアイテム自体のほうがタップターゲットよりもずっと大きい。しかし、それらをタップしてドラッグしてアイテムの並べ替えはできない。

おまけに、iOSのスタイルガイドで推奨されているほぼ同じ形をしたアイコンが、モバイルWeb等では、まったく違う意味で解釈されている。つまり、「ハンバーガー」アイコンとこの並べ替えアイコンの見た目は信じられないほど似ている。

左側が並べ替えアイコン。右側がハンバーガーメニュー。
左側が並べ替えアイコン。右側がハンバーガーメニュー。

同じもの、あるいは同じだと認識されるようなものによって、呼び出されるコマンドが違えば、ユーザーは当惑し、混乱するだろう。ハンバーガーメニューの勢いが今後も衰えないようなら、(不本意ではあるが、この機能が今後も引き続き見落とされがちだとしても)横3本線をクリックすればメニューが開くと学習するユーザーはさらに増えることになる。しかし、このやり方では並べ替えアイコンは機能しない。こうした食い違いによって、すでに利用したことのあるアイコンの機能についてのユーザーの再生能力は低下していくのだ。

その代わりにどうすべきか:

  • 固定のアイテムをタップして、ドラッグできるようにするなら、特定のアイコンをクリックしなくても、それができるようにしよう。
  • メニューとしてハンバーガーアイコンを単独で置くのではなく、「メニュー」という言葉を一緒に表示し、メニューが開くとわかるようにしよう。でなければ、「メニュー」という言葉のみを入れよう。

結論

しっかりと調査がされているインタフェースパターンからの逸脱は、一般には勧められない。考えられるベストプラクティスに従うほうがよいからだ。他のiOSアプリを利用することで得られた一貫性や知識が、ユーザーの期待の下地になるとわかっているからである。どんなガイドラインやスタイルガイドも、ユーザビリティテストをすれば、あなた方のデザインでうまく機能するかどうかの証明あるいは反証が可能だ。ユーザーが利用しているところの観察をとおして我々が見てきたのは、今回挙げた4つのデザインパターンは、その利用を推奨できないといえるだけの課題が一貫してあったということである。

さらに学ぶ

調査レポート(英文)