ユーザー体験未満!アプリエンジニアが UI 設計にこだわる理由とは

キュレーションサイト風のタイトルにしてみました。

さて、今日はアプリエンジニアのぼくが何故、本来デザイナーの仕事領域である UI 設計にこだわっているのかを書いてみようと思う。あれは、とあるウェブサイト作成アプリの開発と運用に携わっているときのことだった。

気がつけば世の中はモバイル全盛期。アプリのみで完結するサービスを模索した結果、シンプルでスタイリッシュな iPhone にふさわしいアプリを作ろうという方向性になった。多くの人たちがそういうアプリの出現を待っている。そう信じて、Pinterest や VSCO といった海外の良さげなアプリ UI を参考にしつつ、誰もが簡単に使えるアプリを目指して開発を進めた。

Pinterest の UI

最初は機能的に不足はしていたものの、10 年間キャラクター路線を歩んできた弊社にとって、まずまず新しい見た目を持つアプリとしてローンチした。しかし、ユーザさんにその UI は受け入れてもらえなかった。

今思うと、その UI は作り手のエゴに満ち溢れていた。Pinterest を模してアイコンのみに留めたタブは、押したらどうなるのかわからないと App Store のレビューで評され、サイトタイトルはユーザさん全員が変更しているにもかかわらず、何故かサイトデザインは初期状態のままだった。そして最終的には存在する機能すら無いと言われた。

問題はすぐにわかった。なかなか良い見た目ではあったが、ユーザさんに必要なものは何も見えていなかった。そして、改修の過程で気づいたことが幾つかある。

アフォーダンス (シグニファイア) の重要性

人は視覚から多くの情報を受け取っている。見た目から手がかりがないものは気づくことができない。

自分のメンタルモデルに頼りすぎない

自分の経験則で解決できるからといって、それだけで済ませようとしてはいけない。そのメンタルモデルがないユーザが多く存在する。

この二つは何よりも重要で、かつ、忘れがちだ。特に PC で Web に多く触れている人ほど、この問題に陥る可能性が高い。何故なら、PC にはホバー表現があるからだ。ホバー表現はとにかくすばらしい発明で、マウスカーソルで画面内を回遊させるだけで多くの情報を受け取ることができる。しかしタッチインタフェースのモバイルではそれができない。このハンデは何よりも大きい。

コントラストを利用する

モバイルの狭い画面の中でさえ、人の視線は自分の興味にしかない。特に上下の視認性は悪く、気づいてもらう為には色で工夫を施す必要がある。

アニメーションを活用する

動きに対して人の脳は敏感だ。アニメーションを使うと、作り手が望んだタイミングで視線を誘導することができる。

アフォーダンスに始まり、とにかく気づいてもらうことに集中する必要がある。人はわからないと使えない。使えないアプリなんて何の役にも立たないということを、UI 設計者は肝に銘じる必要がある。

残念ながらこのアプリはクローズを迎えたものの、ぼくに多くの経験と気づきを残してくれた。そして、それ以来 UI 設計にこだわり、現在開発しているアプリにもその知見は生かされている。

いかがでしたか?

これらは UI 設計に必要な事のほんの一部で、しかもインタフェース系の書籍にどれも書いてある基本的なことだ。何はともあれ、ユーザが悩まずに使える UI を目指すところから始めよう。まずはマイナスをゼロにすることで、ようやくユーザー体験を提供する準備が整うのだと思う。

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.