今日はなんだかいろいろうまく行かない日だった。正しくいうと、最近うまく回っていないいろんなことがしわ寄せで集まってきた日だった。とかいいながら人とご飯行ったりお喋りしたりしていたのだけど…生産性…
ここ最近、仕事をしながら「言語化して説明できること」がいかに大切か、それができるになったらどれだけ汎用性があるか、を意識することが多い。自分が考えて、「やりたい」ことを他人に伝えたり、実行したことから得られた知見や反省を抽象的に今後につなげたり。
そんなこんなで、スマホのアプリデザインについて今さら言語化して把握できたことがあるのでメモします。スマホUI初心者なので、すごく初歩的なことを書きます。あと、情報を俯瞰的に見ているわけではないので粒度は多分バラバラです。
アクション別研究：「複数選択」のデザイン
複数選択機能について
主要なアプリ：メール、ギャラリー
複数選択というUXデザインについて、iOSとAndroidではアクションが異なる。ただし、複数選択という作業の必要が発生するのはレアケースなため、どちらも複数選択を行う場合はモードの切り替えというステップを要し、全面に複数選択の機能を表示することは行っていない。複数選択して実行するアクションとしては、フォルダ移動・コピー・削除などが想定され、それらは基本的に単数選択でも実行できる機能である。そのため「まとめてできると便利」という位置づけにあり、常時表示されないデザインとなっているのではなかろうか。
iOS
モード切り替え方法
iOSで複数項目を選択したいときは、画面上部の見出し中の右端にある「選択（※ギャラリー）」「編集（※メール）」の青文字をタップする。複数選択モードから戻りたいときは、「編集」ボタンが最初に置かれていた場所に太字で表示される「キャンセル」という文言タップすれば良い。これは、元のモードに戻るユーザーを大きく2パターンに分けて、それぞれにわかりやすいUIを設計しているようである。まず、意図せずタップしてしまった人や意味を理解しないままモードを切り替えてしまった人に対して、すぐに通常モードに戻りたいという気持ちに応えるために、そのままの状態からアクションができるよう同じ箇所にキャンセルを設置している。一方で、複数選択モードでしばらく操作後、モードを戻したいと考えるユーザーに対しては、画面中唯一の青文字・太字表記で目立たせることにより、機能の発見しやすさを提供している。
切り替え前後でのUI変化
「メール」アプリではラジオボタン（が左側に現れ、それに伴って各メールの情報は右側にスライド。１項目でも選択すると、見出しが「◯件を選択中」という文言に変わり、選択がないときはもともとの見出しの状態となる。一般的に、複数選択のラジオボタンでは四角い枠がイメージされるものの、この画面においてあえて単数選択時のUIである丸印を採用しているのは、iOS全体を通してテーマとなっている流線的なデザインのためであろう。ラジオボタンのデザインを踏襲していることは、選択中状態では青丸に白抜きでチェック印という表示をしていることから分かり、このチェック印によってユーザーは複数選択を行うためのボタンであることを学習することが想定される。
全選択
なお、選択することは「マーク」という表現で表しているらしく、「すべてマーク」という項目がチェックボタンの一番下に固定で表示されている。この配置は計算上のものであろう。iPhone6の場合、画面上部から項目を全て選択すると5回タップしてから当該ボタンを見つける導線がある。「すべての項目」に関する選択肢は画面上部に配置することも可能ではあるが、この設計においては面倒さを学習してこそ、全選択のありがたみがあるという思想なのではなかろうか。ラジオボタンの真下に導線があるのもポイントである。
って真面目に書いたけど画面操作間違えてた…
何も選択していない状態であれば「すべてマーク」という文言が表示されるが、一つでも選択した瞬間にアクションバーの文言が「マーク」に入れ替わる。「すべてマーク」を最初に選ぶか、「自力でマーク」するかが分岐として設定されているのであろう。個人的には「最初から画面の左下なんて選ぶ？」という感覚もある。そもそも「全てマーク」という行動があまり頻度高く発生しないのかもしれない。
選択項目へのアクション
複数項目を選択すると、次は画面下部のアクションバーに視線が移動する。ここから選ぶアクションは３つ。「マーク」「移動」「ゴミ箱」。マークってなんだマーク。さっきの「すべてマーク」とかぶってるんじゃ…とか細かいところまで普通見ませんよねすみません。
「マーク」を選択すると、トーストで３つのアクション「フラグ」「未開封にする」「"迷惑メール"に移動」、そして「キャンセル」が表示される。ここの項目はもしかしてiOSの学習機能で変わったりするのかも。
「移動」は真ん中。まあ普通メールを複数選択するのってフォルダ移動ですよね。フォルダ一覧が下からにゅっと出てきます。
「ゴミ箱」は右下。右利きの人が右手で端末を持っているときに一番触りにくい場所に置かれている。タップ後、何の表示もなくカセットがトルツメされるアニメーションが表示され、メールはゴミ箱に移動。完全な削除ではないものの、もう少し削除に対してステップ踏んであげても良いのでは、と個人的には思う。
Android（飽きたので続きは明日）
モード切り替え方法
切り替え前後でのUI変化
全選択
選択項目へのアクション
自由研究：iOS標準メールアプリ
色・文字サイズの使い分け
画面中で使われている色は、白背景をバックに、黒文字・青文字・灰色・オレンジ。
黒文字は、既に存在している情報で、注目して見るべきものを表している。目立つ順に、「見出し（太字・画面上部バー中央）、メール差出人名（太字・各カセット左上：カセット中で最初に目がいく情報）、メールタイトル（通常・カセット2行目）」。これらから読み取ることができる情報として、設計者はメールという媒体において、メール件名よりも発信者に重きを置いているということがある。
灰色は、黒文字に次ぐ情報。また、画面中のパーツを表す色。
青文字は、ユーザーによる作業で可変なものを表している。ページ遷移や、表示内容の変更など。
オレンジは、メールにフラグを設定したときに表示される。
各種アイコン
これも飽きたので明日。飽き性ですみません。
