HIGをUIデザインに落とし込んでみた
こんにちは、CAVINインターンの竹崎です。今回は、前回書いた記事の続編ということで HIGを読んでみて、実際にWebサービスのモバイル用レスポンシブデザインをしていく上で どんな所が活きたのかをまとめてみました。
結論から言って、HIGを読み込む事でデザイン原則を網羅できるので 実践デザインでのミスを減らせると思います。さらに、HIG実践してみてユーザー視点に立つ事の 重要性、ペルソナ定義をする事が必要だということに気づきました。
では、UIデザインをする上で意識した事を実例をもとに書いていきます。
前回の記事
目次
ナビゲーションは必要最小限の機能を
こちらのナビゲーションバーはフラットナビゲーションと呼ばれます。ユーザーを目的地に誘導する際に サービス内の様々な所から遷移が可能となっています。基本的にどこのページからでも、目的地に到達ができるようになっているため、そもそもユーザーがこのサービスで何を達成したいのかを理解する必要があります。ナビゲーションはコンテンツを得るために素早く、簡単にするべきだとHIGにも書かれています。
"Design an information structure that makes it fast and easy to get to content. Organize your information structure in a way that requires a minimum number of taps, swipes, and screens."
引用: IOS HIG "Navigation"より
このデザインをする時、PC版だと5つあったナビゲーションタブを１つ減らして4つにしました。減らした１つの機能は、ユーザーが目的を達成させるために必ずしも必要ではない機能だったからです。
アイコンとタイトルを直感的に
アイコンについて、HIGの原文では、ユーザーが意図しやすいアイコンで、良く知られているイメージを使いなさいとあります。
"Use system icons as intended. Every system-provided image has a specific, well-known meaning. To avoid confusing users, it’s essential that each image be used in accordance with its meaning and recommended usage."
引用: IOS HIG "System Icons"より
ここでは、以下の二点を軸にアイコンとタイトルを改善しました。
- ユーザーがアイコンとタイトルを見て一瞬で何ができるかを想像できるか
- ビジュアルのバランスは整っているか
①の方は、ダッシュボード→ホームにタイトルとアイコンを変更。
ダッシュボードは元々、運転席の正面にあるスピードメータや燃料量などの運転の際
必要な情報が集約されてる場所を言います。Webサービスでは、あらゆる情報が１つにまとまっている
ページの事をダッシュボードと名付けることがあります。
そのため、このWebサービスでも、運用の際情報を１つの画面で確認するためのページをダッシュボードとしていました。
しかし、ユーザーがその言葉を聞いて、なんとなくでもいいからこのダッシュボードという言葉が 何かを連想できるかを考えた時、適しませんでした。また、ダッシュボードという言葉の 長さという視点で見たとき、モバイル対応だと余白が足りず、すっきりしたビジュアルにならなかったのでタイトル、アイコンを変更。
②はアイコンが抽象的すぎて、ユーザーが認識するのに負荷が掛かると感じたので、アイコンを 生産者が納品を管理する際使用するコンテナを意識したアイコンにしました。
カッコイイけど使えないよりも、ダサいけど価値があるモノ
IGの原則に当てはめてデザインしていく上で、もう１つ重要なことに気づきました。それは、ユーザーがどこの誰なのか？どこに住んでいるのか？どんな考えを持っているのか？などなど、ユーザーの定義が欠かせないということです。
プロダクトデザインに関する本や記事を見ていくと、「ユーザー目線で物を作れ」やら「ユーザーが迷わないシステム設計を」みたいなことが良く書かれててあります。しかし、ユーザーとは具体的に誰なのか？
ユーザーの定義が決まっていないと、仮説を立ててデザインをする事も出来ない上、本当にプロダクトを使って欲しいユーザーにとって価値の無いモノになるかもしれません。反対にユーザーを定義してあげる事で、仮説と改善を繰り返す事もでき、ダサいけど価値があるプロダクトを作ることができます。
HIGをUIデザインに落とし込んでみて
HIGは、UIデザインをする上で本当に基本的なデザイン原則が書かれています。そのため、なんとなくデザインから脱却するためにも、HIGやAndroidのインターフェースガイドラインは読み込む必要があると思います。HIGに書かれているデザイン原則や、ネットに書かれているTipsは、プロダクトを触るユーザーが、"違和感なく、使いやすく"するための知識ではありますが、時代や環境が変われば人間の認知心理も変化していくので認知心理に関する持続的なインプットが必要だと思います。今後もHIGや認知心理を学び実践に落とし込んでいきます。
