iOSアプリでその他ボタン`・・・`をどのような場面で使っているかを調べた

はじめに

iOSアプリの中で、ボタンとしての・・・の表現をどのような場所で使うかというのを調べていくつかのアプリのスクリーンショットを撮っています。この記事を書いたのは2018年2月でiOSは11です。以降は便宜上、・・・を「その他ボタン」と表現します。

スクリーンショットで見るその他ボタン・・・

Apple ミュージック.app

楽曲の詳細画面

右下にその他ボタンがある

ボタンをタップすると、ActionSheetでサムネイルを表示しながらアルバムへのリンク、そしてアイコンを表示してできる操作を示している。かなりリッチな作り。

ライブラリの一覧画面

同じくミュージックアプリのライブラリ一覧画面。こちらはその他ボタンに丸い背景がある。

ボタンをタップすると、これもActionSheetがリッチな作りで詳細画面とほぼ同じ。その他ボタンの丸い背景あるなしは機能とは関係なく、見た目上の何かだということがわかる。

ここには書かないが、ミュージック.appにはこの他にもアーティストの詳細画面などでも同じようにその他ボタンが使われている。

Apple App Store.app

次にApp Storeのアプリ詳細を見る。こちらもその他ボタンに丸い背景がある。そして入手ボタンも同じように角丸のボタンになっており、このボタンの丸い背景はそのエリアにあるボタンのコンテキストに合わせようとしているのが分かる。

ボタンをタップするとやはりActionSheet。

Apple 写真.app

写真.appも写真の編集画面を開くと、ツールバー右側に丸い線に囲まれたその他ボタンがある。背景とツールバーの境目がないため、この囲みがあるほうがボタンとして分かりやすいと言われればそのような気もする。

ボタンをタップするとActionSheetっぽいが、アイコンをメインに操作を表示するカスタムな感じのViewが表示される。

しかし、そこにもまた、その他ボタンがある！その他ボタンの先にその他ボタン！
なぜこんなことになったかの理由はこの「その他ボタンの先のその他ボタン」をタップして何があるか見てみれば分かる。気になった人はなぜこうなってるのか各自考えると楽しいと思いますね。

次はApple以外のアプリを見てみる。

Instagram

フィード画面

Instagramのフィード画面では各コンテンツごとにその他ボタンがある。

ボタンをタップするとActionSheetで、AppleのようなアイコンはなくLabelだけでセンタリングして標準的な使い方をしているのが分かる。「フォローをやめる」、などのやりなおしが面倒な事が起こる（つまり破壊的）な動作は文字がキーカラーとは違う赤になっているのも分かりやすい。「報告する」は破壊的な動作ではないかもしれないが、コンテンツがブロックされて見えなくなるのであれば破壊的だし、わかりやすさもある。

ユーザ詳細

Instagramのユーザ詳細にもその他ボタンがある。

ボタンをタップすると、ActionSheetの並び順がフィードと違っていることが興味深い。「ブロック」や「報告する」といったボタンが上位で、次に「ストーリーズを非表示にする」などネガティブな操作が、アグレッシブな順序で並んでいる。

この理由を推測すると、おそらくこのネガティブな操作がユーザ詳細のその他の項目としては一番使われているからだろう。
例えば、たまたま見てしまったコンテンツが自分を不快にさせるコンテンツならそれを報告するなりして見えなくしてしまえばいいだけだが、ある特定のユーザが自分を不快にするコンテンツばかり上げていると判断した場合はユーザごと目につかないようにしたほうが手っ取り早い。

そもそもユーザ詳細をわざわざ見るのは、そのユーザが「いい投稿をしている自分の好みのユーザ」か「いやな投稿をしているいやなユーザ」かを見極めたいからじゃないだろうか。

なぜそのように考えるかというと、おしゃれさのあるPinterestのアプリでは、ユーザが多いからなのかマンガのページがスキャンされてフィードに表示されることが多く、特定のユーザが悪気があってやっているようではないのだが、たまに性的なものがあると報告機能を利用したくなる。

ついでにPinterestのアプリでも...を使っているかを見てみよう。

Pinterest

ボタンをタップすると、ActionSheetではなく、オリジナルな選択肢が表示されるモーダル画面が表示される。タイトルは「詳細」なのが少しひっかかる。

破壊的な操作である「ピンを報告」の色が他と一緒だが、一番下にあるのは分かりやすい。

Dropbox

同じようなパターンだけ掲載しても面白くないので、次はDropboxの詳細画面を見てみる。Dropboxは面白いことにその他ボタンを位置画面に2つのタイプ違いを表示している。まずナビゲーションバー右のいつものその他ボタンと、もう一つのタイプはコンテンツのその他ボタンで、後者は丸い枠がついている。

この丸い枠を付けているのは curl ... のようにLabelが収まらない場合の三点リーダに見えてしまうのを避けているのではないかと思う。つまり、紛らわしさを避けつつ控えめにボタンだということを表現している。

それを裏付けるのが、ディレクトリ内コンテンツの見た目をアイコン表示からリスト表示に変更すると分かりやすい。丸い枠が付いたその他ボタンは、右寄せのその他ボタンになり枠が無くなる。右寄せのため、Labelが省略された三点リーダとは勘違いしないだろう。

ここまでの気づきを軽くまとめる

• ナビゲーションバーにあるときはその他ボタンはボタンとして見分けが付くので、丸い枠や背景なし
• Labelのすぐ近くにある場合は丸い枠でボタンであることを表現

Dropboxのその他ボタンをタップしてみると、少しリッチなActionSheetになっている。これもおそらく「共有」がユーザに一番使われているか、使われることを想定している。

さらにDropbox社自身は「アップグレード」をしてお金を払ってほしいという意志も感じる。しかしユーザファーストとして「共有」を選択肢の中で優先していることが感じられる。破壊的操作である「削除」が赤く一番下にあるのも分かりやすい。想像するに次のような論理で並べていると感じる。

/* まずどのディレクトリに対して操作を行うかを明確にするために */
- ディレクトリの詳細情報を表示する

/* 一番Dropboxユーザが使っているのは共有、もしくは使って他ユーザを増やしてほしい？ */
- 共有

/* アップグレードして便利な機能を使ってほしいしお金が大切 */
- オフラインアクセスを許可 [アップグレード]

/* スターを付けてユーザが目印的なものを付けることで整理の役に立つ機能も使われているか、使ってほしい */
- スターを付ける

/* 操作をグルーピングすると次のものが並ぶ */
- 名前変更
- コピー
- 移動

/* 操作のグルーピングの最後、さらにこれはキーカラーとは違う色（赤）で強調する */
- 削除

タブにあるその他タブ

タブバーは実はその他ボタンがiOSの初期からある

最近見なくなったが、iOSの標準のアイコンとして、タブとしてはその他ボタンがあり、TabBarControllerにViewControllerを6つ以上登録すると5つ目と6つ目が自動でここにまとめられる。

その他ボタンの名称

その他ボタンと読んできたが、これはAppleのHIGによると More ボタンと言う。日本語ではその他でもいいと思うが念のため。

Tab Bar Icons
https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/system-icons/#tab-bar-icons

iOSのタブバーでは上記コンテンツは組み込みで標準のものが用意されています。しかし、タブバー以外には用意されているわけではありません。

まとめ

• ナビゲーションバーにあるときは・・・はボタンとして判断しやすいので、丸い枠や背景なし
• ナビゲーションバーやツールバーではない箇所にある場合、それがボタンだと分かるように丸い枠でボタン感を表現（・・・）
  • 特にLabelのすぐ近くに・・・がある場合も丸い枠でボタンであることを表現し（・・・）
  • （・・・）に背景色を付けるかどうかは、その近くに同じように背景色のあるボタンがあるかどうかも
• タブとしてはその他（More）ボタンがあるのでユーザは見慣れているはず
  • 少なくともiOSの標準のデザインから離れてはいない
• タブ以外に使う場合、デザインとしては別途素材の用意が必要