iOSアプリ 「Actions」 の UI考察

iOSアプリの「Actions」というアプリのUIを考察してみました。

AppStoreへのリンク

UI考察で得られたこと

最後のまとめにも書いてますが、このアプリの考察を通して得られたことをまず書いておきます。

・一覧画面において、オブジェクトの重要なアクションは何か、一覧画面でもアクションできるようにすべきものは何か、一覧画面ではどういうふうにアクションさせるべきか、を考えて設計する。

・違和感を感じるような挙動があった時、その違和感を取り払うためのインタラクションを考えてみる。そのインタラクションは、より現実世界にそったものになっていると違和感はなくなると思われる。

・一覧の表示形式を複数パターン検討する。表示形式ごとのメリットデメリットを明確にし、互いに補えるようにする。

・一覧表示時に各項目の中身を閲覧することができれば、認知負荷が小さくなり、対象の項目を探しやすくなる。

・一覧表示時に各項目の中身を閲覧させることが難しい場合は、対象を探す時の負荷が小さくなるように、できるだけ情報をみせる。このアプリでいうと、タイトル・色・アイテム数。

・ジェスチャー操作は、視覚上の手がかりが少ないため注意する。ジェスチャーを使わなくてもそのアクションを行えるようにしたり、ジェスチャー操作を誘発するようなインターフェースを検討する。あとはプラットフォームのルールにのっとる。

アプリ概要

ざっくり説明するとTODOと何かしらのリストを管理するアプリケショーンです。
大きく分けて｢スケジュール｣と｢リスト｣という二つの機能があります。

スケジュール機能
この機能では、直近1週間のやることを管理することができます。
曜日ごとにやることが積まれているので、いつ何をやればいいのかがわかりやすいです。
直近1週間より後のやることは、｢いつか｣という項目でまとめられていて、1週間以内になったら、対象の日のところに積まれるようになります。

リスト機能
この機能では、リストを管理することができます。
例えば、見たい映画のリストや、読みたい本のリスト、行きたいところのリスト、など、いろんなものをリスト化して管理できます。

AppStoreへのリンク

アイテムのオブジェクト考察

まず、アイテムのオブジェクトに関して考えてみます。

アイテムオブジェクトと言っているのは、「スケジュール」に追加された一つの項目または、「リスト」に追加された一つの項目のことです。

(補足：スケジュール機能とリスト機能のアイテムは同じものになっていて、予定日が指定されていれば、「スケジュール」の一覧に表示され、何かしらのリストに指定されていれば、その「リスト」の一覧にアイテムが表示されます。）

このアイテムは、次のような情報を持っています。
・タイトル
・予定日
・リマインド
・メモ
・リスト

このアイテムには、次のようなアクションを行うことができます。
・完了
・削除
・タイトル編集
・予定日編集
・リマインド編集
・メモ編集
・リストに追加

これらのアクションが、UI上でどのような操作になるのかを見ていきたいと思います。

一覧の中でのアイテム

一覧の中でのアイテムはこのようなブロックになっています。
この一覧画面でアイテムに対して行える操作は、下記のようになっていました。

・完了：右にフリック
・予定日編集モーダルを開く：左にフリック
・アイテム編集モーダルを開く：タップ

このように、ユーザがよく行う操作は、一覧画面からアクションできるようになっており、その他の操作はアイテムの詳細モーダルから行えるようになっています。

一覧画面でアクションが行えない場合、複数のアイテムを連続して完了にするという操作はとても煩雑になります（アイテムAを選択→アクション→一覧に戻る→アイテムBを選択→アクション→一覧に戻る）。
なので、連続して複数の対象に対してアクションを行うようなケースでは、一覧画面でそのアクションを実行できるようになっていることが必要そうです。

この考えは既にいろんなUIで当たり前としてあるものだと思いますが、自分でUIを設計する際にも、重要なアクションは何か、一覧でもアクションできるようにすべきものは何か、一覧でどういうふうにアクションさせるべきか、というのをちゃんと考えて設計しないとなと思いました。


少し話は変わりますが、予定日編集に関しては、直接アイテムを移動させて予定日を変更したいと期待したのですが、この操作はできませんでした。
直接アイテムを移動させた方がより直感的な操作になると思うのですが、そうしていない理由はよくわかりませんでした。ただ、予定日編集は左フリックのジェスチャーを割り当てているので、重要度は高めなアクションと捉えていることがうかがえます。

アイテム詳細画面

次にアイテム詳細画面です。一覧でアイテムを選択するとこの画面になります。
アイテムに対する全てのアクションを行うことができます。

このアイテム詳細は、画面の3分の1を覆うモーダルのような形式で表示されおり、iOS標準のものとは異なっていました。
3分の1ぐらいのサイズなので、全ての項目に対して指が届きやすく編集しやすかったです。

各項目の編集はどういうUIになるかというと、下記のように、編集する項目ごとに、別モーダルとして編集モーダルが表示されるようになっています。

左：予定日編集モーダル、右：リマインド編集モーダル

iOS標準のモーダルだと、各項目の編集はドリルダウン形式になっていると思いますが、このモーダルだと異なる挙動になっています。
階層が深くなるにつれて、どんどんモーダルが出てきます。

このアプリで、モーダル 内でドリルダウンを使ってない理由を自分なりに考えてみた結果は下記になります。

・設定する項目ごとにモーダルの大きさが変わるので、ドリルダウンにすると挙動が複雑になり混乱につながる。

最初(アイテムの詳細モーダル)から標準のモーダルを使えばいいじゃんと言われるとそれでいい気がするので、あまり説得力のない考察ですね、、

アイテ一覧のスクロール

次に、アイテム一覧のスクロールに関しておもしろいところがあったのでそれを書いておきます。
一旦下記のGIFで動きをみてみてください。

このように、下に隠れているコンテンツがスクロールで表示される時、ベルトコンベアのように巻きあげられる動きになっています。

このような動きになっていることで、コンテンツ部分とコンテンツの下にあるナビゲーション部分(アイコンが並んでるところ)とが、シームレスにつながっているようにみせることができています。

もし、このような巻き取られるような動きになっていなかったら、コンテンツが出てくる時に、ナビゲーションの上部から急にアイテムが出現した感じになってしまいます。また、アイテムが完全にスクロールインするまでアイテムの一部分は完全に隠れているので、コンテンツとナビゲーションの境界というのがはっきりと意識されてしまいます。

こういう細かいインタラクションにより、ユーザが操作するときに妙な違和感を感じないようになっているのかなと思いました。

リスト一覧の表示形式

次はリスト一覧に関してです。
リスト一覧は見せ方が２パターンあり、互いに欠点を補う形になっています。

左がデフォルトの表示形式です。
これは、水平方向にリストが並んでおり、複数のリストの中身を横断的に閲覧することができます。
この形式のいいところとしては、リストの中身を頼りにリストを判別できるので、対象のリストを探すのがとても容易になります。

もしリストの中身が見れずにタイトルと色情報だけだった場合、対象リストを探す時の認知負荷が大きくなるのと、もし誤ったリストを選択した時に「一旦戻ってまた別のリストを選択する」という操作となってしまうので、どうしても煩雑になります。

ただ、この左の形式でもデメリットはあります。それは、リストがたくさん増えてきた時に、対象のリストに辿り着くまでに時間がかかることです。
そこで、もう一つの表示形式(画像の右)が役立ってきます。

右の表示形式だと、１画面に表示されるリストが多くなるため、リストの数がたくさんあってもスクロール量は少なくてすみます。
ただ、先ほど左のメリットとしてあげた、リストの中身を確認しつつリスト選択ができない問題はあるので、選択する時の認知負荷は大きくなりそうです。

このリスト一覧の表示形式から学べることをまとめると下記のようになるかと思います。

・一覧表示時に各項目の中身を閲覧することができれば、認知負荷が小さくなり、対象の項目を探しやすくなる。

・一覧表示時に各項目の中身を閲覧させることが難しい場合は、対象を探す時の負荷が小さくなるように、できるだけ情報をみせる。このアプリでいうと、タイトル・色・アイテム数。

リストの削除

次はリストの削除についてです。

リスト一覧でリストを長押しすることで、リストを持つことができ、また画面下部にゴミ箱アイコンが表示されます。これにより、リストをゴミ箱アイコンに持っていけば、リストを削除することができそうということが認識されます。(一応別の方法でも削除する方法はありますが、今回はそれには触れません)

この長押しの操作で思うことは、「気付きづらい」です。
これはジェスチャー操作全般にいえることなのかもしれません。

ジェスチャー操作は基本的に視覚上のヒントがないため、ユーザのリテラシーに依存するところがどうしてもある気がしています。
そのユーザのリテラシー全体を上げるためには、プラットフォーム上のアプリケーションにおけるジェスチャーの挙動を統一し、「こういうオブジェクトに対しては、こういうジェスチャーができる」というマインドを作ることが必要になると思います。そのためにもやっぱりHIGとかを遵守することは必要なんですかね。(このアプリは遵守してる感があんまりないけど)

ナビゲーション

最後に、ナビゲーションについてです。

このアプリは、大きく３つのメニューがあります。
冒頭で簡単に説明した「スケジュール」と「リスト」に加え「ログブロック」の３つです。ログブロックは、アイテムを完了にした履歴一覧みたいなものなのであまり詳しくは触れてません。

画面下部の中央にある3つのアイコンがそれぞれのメニューに対するナビゲーションになっています。

最初は、アイコンが何を表しているかがわかりにくいため、混乱しました。

このナビゲーションで気づいたことは、中央にナビゲーションが集中しているので、その両サイド部分に画面に応じたアクションボタンを配置できるということです。

スケジュール画面では右下にアイテムの新規追加ボタンが配置さていますが、リスト画面ではリスト編集ボタンが配置されています。
このように、その画面に適したアクションボタンを配置できるので、スペースの省略化にはつなげられそうな気がしました。

ただ、ナビゲーションを中央に集中させつつ、それぞれのナビゲーションをできるだけ明確にするということは気をつけないといけないと思います。

まとめ

考察して、次に活かせそうなことを抽出してまとめます。

・一覧画面において、オブジェクトの重要なアクションは何か、一覧画面でもアクションできるようにすべきものは何か、一覧画面ではどういうふうにアクションさせるべきか、を考えて設計する。

・違和感を感じるような挙動があった時、その違和感を取り払うためのインタラクションを考えてみる。そのインタラクションは、より現実世界にそったものになっていると違和感はなくなると思われる。

・一覧の表示形式を複数パターン検討する。表示形式ごとのメリットデメリットを明確にし、互いに補えるようにする。

・一覧表示時に各項目の中身を閲覧することができれば、認知負荷が小さくなり、対象の項目を探しやすくなる。

・一覧表示時に各項目の中身を閲覧させることが難しい場合は、対象を探す時の負荷が小さくなるように、できるだけ情報をみせる。このアプリでいうと、タイトル・色・アイテム数。

・ジェスチャー操作は、視覚上の手がかりが少ないため注意する。ジェスチャーを使わなくてもそのアクションを行えるようにしたり、ジェスチャー操作を誘発するようなインターフェースを検討する。あとはプラットフォームのルールにのっとる。

最後に

この記事は、OOUIの考えのもとに既存アプリのUIのモデリングを行い、そのモデリングしたオブジェクトがUI上どう表現されているのか、オブジェクトの関係性がどう表現されているのかを調べるみようと思い、書いてみました。

まだ、いろいろとまとまりがないですが、この考えのもとに数をこなしていくことで、論理的にUIを設計する力がつくんじゃないかと思っています。
なので、これからも言語化していけるように頑張りたいです。