こんにちは、ソーシャルゲーム事業本部でUXデザインを担当している水谷です。

「アプリやWEBサイトのUI設計をしているんだけど、でき上がってみるとイマイチ使いにくい」なんていう経験はないでしょうか?この問題は、これまでのやり方から少しだけプロセスを変えることで改善できます。UI設計は決して難しいものではなく、順序立てて作業を進め、ブラッシュアップを繰り返すことで必ずよいUIが生まれます。
ユーザが迷わないUIを設計するには、どのような手順で考えていけばよいかをご紹介します。

main


優れたUIを生み出す7つのステップ


(1)プロダクトのUXを定義する
(2)UXにおける機能ゴールを決める
(3)機能ゴールに基づき画面ごとの目的を設定する
(4)ナビゲーションスキームを確認する
(5)各画面の目的を実現するワイヤーフレームを描く
(6)ワイヤープロトとして実際に操作してみる
(7)機能ゴールが達成できているか確認する


(1)プロダクトのUXを定義する


企画が進み、開発したいプロダクトの内容が固まってきたら、まずプロダクトのUXを定義します。
このプロダクトが提供するユーザ体験、価値、解決する課題は何か、
プロダクトによってユーザにどのような感情変化がもたらされるか、
どのようなユーザに利用されるか、どのような状況で利用されるか、
どのような機能を通じてユーザに体験が提供されるか、
などといった内容です。今回はUIについての記事なのでUXについて詳しくはまた別の機会にご紹介します。

(2)UXにおける機能ゴールを決める


UIは、ユーザに体験を提供する際のユーザとプロダクトの接点(Interface)となります。
ユーザはUIを通じてプロダクトを操作し、その操作結果を体験として捉え、楽しい、嬉しいなどの感情が引き起こされます。
プロダクトによって提供されるUX全体の中でも、UIは機能に関する役割を大きく担っているといえます。
「どのような機能を通じてユーザにプロダクトのUXが提供されるか」ここをしっかりと決めるところからUI設計が始まります。
例えば「アラーム付き世界時計」アプリであれば機能ゴールは以下の定義になります。
機能ゴール:世界中の時刻を知ることができ、各国の時間でアラームを受け取ることができる。

(3)機能ゴールに基づき画面ごとの目的を設定する


機能ゴールが定まったら、その機能ゴールを実現するためにどのような画面が必要かになるかを洗い出します。
今回のアプリの場合は以下のような画面の存在が考えられます。

・現在時刻表示画面   (目的:各国の現在時刻を見る)
・時刻表示国の選択画面 (目的:時刻を表示する国を設定、解除する)
・アラームセット画面  (目的:各国のアラーム時刻をセットする)
・アラーム時刻確認画面 (目的:現在セットされているアラーム時刻を確認する)
・アラーム画面     (目的:鳴っているアラームを止める)

ここで重要なのは、各画面とその目的を明確にすることです。

(4)ナビゲーションスキームを確認する


前項で作成した画面をブロック要素として、サイトマップに配置してみましょう。
画面遷移はナビゲーションスキームに基づいて検討します。
ナビゲーションスキームが適切でないと、ユーザは目的にたどり着くまで手順にストレスを感じ、プロダクトの体験に大きな問題を発生させてしまいます。
ナビゲーションスキームにはタブ型、ツリー型、ハブ型など幾つかの典型パターンがあり、どのスキームを利用するかは、画面の階層の深さ、使用頻度、類似性など考慮して決定されます。
例えば以下のように、スキームによって適切な用途が存在します。

 ハブ型 :主役となる1画面がはっきりしており、周辺にサブ機能が存在する場合
 ツリー型:多くの画面が存在し、メインページから目的の画面を辿って探すような場合
 タブ型 :複数機能を頻繁に行き来することが想定される場合

通常はこれらを組み合わせて一つのナビゲーションを構成します。
navigation

今回の目覚ましアプリの場合は、単純なハブ型構造で考えてみます。
現在時刻画面が中心にあり、各種設定や確認画面がブラ下がる構造です。

(5)各画面の目的を実現するワイヤーフレームを描く


ここでやっとワイヤーフレームを描き始めます。
UI設計のよくある間違いが画面の目的を明確にせずいきなりワイヤーを描き始めることです。
中には見事なワイヤーをパパッと描いてみせる人もいますが、そういった人は(1)~(4)までのプロセスを頭の中で瞬時に事前処理しているはずです。

ワイヤーフレームの作成には、いくつも考えるべき要素があります。
例えば、IA、オントロジーなどの分類学、ラベリング、ユーザビリティなど、どれを取っても勉強しがいがある深いテーマばかりです。
とはいえ、ひとまず細かいことは気にせず、画面ごとに決めた目的を実現するUIを描いてみましょう。まずは叩き台ぐらいのイメージで、後にブラッシュアップすればよいです。

ワイヤーフレームを描いていると、複数の画面や機能をまとめられることに気づいたり、
思ったより複雑で機能を分割した方がいいことに気づくことがよくあります。
その場合は(3)に戻って画面の目的の再定義しサイトマップを更新します。
これを繰り返して画面をブラッシュアップしていきます。
今回の例では、「アラーム時刻確認画面」は、「現在時刻表示画面」に集約できたので不要ということに気づきました。

UI作成に使う部品は、プロダクトが利用されるデバイスに応じて部品を選びましょう。
WEB上でUI作成作業ができるCacooは、あらかじめUI部品のテンプレートが用意されているのでドラッグドロップで簡単にワイヤーフレームの作成が可能です。
cacoo


(6)ワイヤープロトとして実際に操作してみる


作ったワイヤーフレームをプリントアウトして、実際に実機を操作しているイメージで
ボタンを押したり画面遷移を確認してみましょう。
操作感も含めて検証したい場合は、PrototypesBRIEFSなどのUI確認ツールも活用してみるとよいです。
元の画面に戻れなかったり、迷子になったり、操作性が統一されていなかったりなど、様々なことに気づくでしょう。
納得いくまで修正サイクルを回しある程度UIバグがなくなったら、今度は周りの人にも触ってもらいます。
作った自分は理解していても、初めて触る人は理解できないことがほとんどです。
他人が触っている様子をよく観察して、どこで時間がかかっているか、どこでミスをしたかをチェックし、再度UIのブラッシュアップを行います。
被験者には、操作中に考えていることを言葉に出してもらう手法も有効です。
exam


(7)機能ゴールが達成できているか確認する


ステップ(3)で設定した各画面の目的や、全体を通して機能ゴールが達成できているかを再確認します。
画面の目的の定義が曖昧だったり、一画面で扱う目的が多すぎたりすると、ユーザは操作に迷ったり誤った操作をして行き場を失ってしまうことになります。
その場合は、(3)まで戻って画面の目的を整理し直しましょう。
問題なければこれでほぼUI設計は完了です。


いかがでしたでしょうか。最後(7)のステップで”ほぼUI設計は完了”と書いたのは、UIの役割はワイヤーフレームによる画面構成だけでなく、インタラクティブ性、アフォーダンス、グラフィックなど、体験を向上させるためのステップが他にも存在するためです。
とはいえ、基礎の構成がしっかりしていないと、どんなに美しいグラフィックやアニメーションが乗っても決して使いやすいUIにはならないので、まずは機能ゴールを達成できる確実なUIを作成した上で、次のステップに進むようにしましょう。

DeNAでは、活き活きとしたUIを設計できるクリエイターを募集しています。:D