2015.5.21 木曜日

APP Redesign ”JR東日本アプリ” 〜UXデザインの再考〜 vol.3

SusaiSusai

JR_eyecatch2

既存のアプリを勝手にRedesignする、App Redesignの「JR東日本アプリ」、最終回はデザイン仕様からグラフィックデザインへ落とし込む過程です。
前回のTOP画面に引き続き、「運行状況確認画面」とスクロールしてくと見えてくる「JR線からの振替情報」に関する改修から説明します。

運行状況確認画面

下図に示す「運行状況確認画面」においては、前述の非構造化インタビューにより得た、ユーザに共通する不満の

”①一画面に表示される情報が多すぎて一つ一つ読む気にならない”

がペインポイントとして抽出されています。
また、ユーザコンテクストを紐解いていくと、「路線図を用いた運行状況詳細を確認する」際は、「TOP画面に小さく表示されている運行状況をなんとなく閲覧するとき」とは異なり、ユーザ自身に対して関係性の高い情報を能動的に調べるため、情報に対して積極的な心理状態で閲覧します。そんな時は、運行状況の異常事態を閲覧すると同時に、異常事態の回避に相当する「JR線からの振替情報」を同時に確認するケースが圧倒的に多くなると予測されます。

ユーザコンテクストの変化に応じたユーザビリティの配慮

よって現状、同一の画面に表示されているが、切り分けられている「運行状況確認画面」と「JR線からの振替情報」は、同一のエリアに表示するように仕様を定義しました。更に、振替運転を利用するユーザは、普段慣れ親しんだ路線ではない路線を利用するため、最適な路線を組み替えることが多少困難です。よって最適な路線へと自動的に誘導するアシスト機能や、新たに提示された路線図の詳細な時間情報が表示されるようファンクションリストを再構築しデザインに落とし込みました。

JR_ti

デザインで意識しているポイントは、ヨーロッパのメトロデザインのように少し黒色が混ざったクラシックな色を活かしたフラットデザインを意識しつつ、ベタ塗りにするのではなくグラデーションを用いることで暗さを緩和し、透明感を演出しています。
また、情報構造的には、

  • 画面上部は「運行状況と路線図」される
  • 画面下部は「詳細な文字情報や振替運転のタイムテーブル」が表示される
  • 中央部にはメニューコマンド「運転状況」⇔「振替案内」が表示される

ということを明示するように背景色をそれぞれ切り替えた結果このような配色になっています。

電車内の状況確認画面

次に「電車内の状況確認画面」について説明します。実は私達の行ったユーザテストにおいてTOP画面に続き多くのユーザビリティに関する不満を抽出したのがこの画面でした。

下図左に示す「電車内の状況確認画面」を見ると、ヘッダー部分は水平方向に電車の進行方向を示しているにも関わらず、下部のリスト部分は鉛直方向に電車の進行方向を示しています。このことがリスト領域が電車を示していることを理解しづらくしています。
この、情報を認識するまでのストレス(認知負荷)に気がついたのは、ユーザテスト中にスマホを横向きにして電車の位置を捉えようとするユーザ行動を観察した時でした。ユーザ自身、気づいていない潜在意識化でのストレスが行動に現れるといった現象でした。

絶対感覚と相対感覚の変更

よって下図右に示すように素直に電車の進行方向を水平方向に変更しました。また、全ての車両の情報を一覧させるのではなく、「状況を確認したい車両」を選択して詳細内容を確認するUI仕様に変更し、更に「自分の乗車している車両(または各電車の固有値/平均値)」に対して「状況を確認したい車両」の情報を相対的に示すような表現に変更しました。(温度は絶対温度ではなく、自分に対する相対温度に表記を変更しました。※ただしGPSと温度センサの精度は未確認。)

JR_ts

最後に、ワークショップで得た”B,車内で乗客同士が助け合える環境である_電車内のトラブルが他の交通手段に比べて圧倒的に遭遇率が高い(痴漢、暴力、泥酔、汚物等)ためなんとかしてほしい”という欲求に対する新機能の画面イメージ(下図右)と、見つけづらいと不評だったドロワーメニューの変更を反映したメニュー画面のイメージ(下図左)を作成しました。
今回は新機能非常ブザー画面に関して説明します。

電車移動は極めてプライベート領域のない密室

皆さんは電車内における他人とのトラブル(または不快な体験)に遭遇したことは有りますか?ワークショップで電車内、駅構内における不満を抽出した際に、電車の遅延に対する不満が多く見受けられました。しかし、それは他の交通機関でも同様に発生しうることで、電車特有と言える不満として人的トラブルが突出して目立ちました。

特に女性や、遅い時間に帰宅するサラリーマンは痴漢、暴力、泥酔、汚物等の不安を抱えています。しかし、トラブルが発生した時に、そのトラブルを速やかに対処するシステムはなかなか見当たりません。現状、トラブルに対応するツールは幾つか存在しますが(緊急停止ボタン、非常ボタン、ブザーを鳴らすアプリケーション等)使用に対する心理的なハードルの高さが課題です。

先ほど、単に”トラブルを対処する”手段ではなく”トラブルを速やかに対処する”システムが必要と述べたのは、速やかで大事にせず対処できないシステムはなかなか使用されないと観察したためです。不特定多数の人が存在する中で、被害者、またはトラブルに巻き込まれた人が助けを求める際に障害となるのが”速やかで大事にならずに対処”できる方法が思い浮かばないからです。

JR_np

ユーザ同士の正義感を刺激する

上図に示すイメージは今回のワークショップで抽出した欲求に紐付きデザインした、非常ブザー画面です。大きな音を出したり、必要以上に周囲の人を巻き込まずに、速やかにトラブルを対処でいないかブレストした際に、非常ブザー機能を考案しました。これは、周囲のJR東日本アプリユーザに助けを求める「近くでトラブルが有ります」という通知だけをWifi directで送信し、周囲に緊張を促すシステムです。

プッシュ通知を受信したユーザ同士が周囲を見渡すだけで、痴漢や暴力などのトラブルは減少するかと思います。
ブザー音は設定に応じて鳴らすようにすることで効果を高めます。このようなシステムをJR東日本がとりいれることで、電車に対するマイナスのイメージは減少し、ユーザは安心して電車移動ができたら良いと強く思いました。

以上でJR東日本アプリのRedesignに関する記事は最後となります。
アプリのデザインにおいて、ユーザ体験からデザインへ落とし込むことが求められることは周知の事実ですが、実際にどのようにアプリケーションを構成し情報設計を行いロジックを構築するかといったところで、デザインと工学の観点から、なかなか体系的に説明されてきておりません。今後私達は、より詳しく体験をアプリケーションへと落としこむ際の理論を説明していけたらと思います。
最後に、この記事を読んで、このアプリが使いづらいとか、このアプリを勝手に改修してほしいというお題がある方は是非ご連絡ください。

ご連絡先