「UXの基本を理解し、モバイルに最適なUI設計のアプローチを学ぶ。」勉強会レポート

UIUXのプロ、講師の田中宏幸さん

2013年最後の勉強会は、前回に引き続き「UI/UX」をテーマに、

  • 「モバイル担当になったものの、何を学んだらいいのか分からない」
  • 「アプリ開発は経験積んだので、次はデザインについて学びたい」
  • 「最近”UX”や”UI”ってよく耳にするけど、それ何?」

といった方を対象に、

  • UXとはなにか
  • UXを考えることはサービスのあり方を考えること
  • モバイルUIを考える際のあり方

を、またも田中さんにお話頂きました。

 

本当に大事なUX

UX(User eXperience)はウェブサイトやアプリを使用することで得られる「体験」を意味し、UI(User Interface)は使いやすさの優位性、たとえば文字が大きくて見やすいなど「外見(機能)」に関することを意味します。

機能面の充実が一段落した後、もう1歩ユニークさを演出するために重要になるのがUX、すなわち「体験」です。ユーザーは「自分にあった良いサービス」に出会いたいと考え、一方サービスの提供者は、サービスを好きになってくれる良いユーザーを増やしたいと考えています。ユーザーが求める「自分にぴったりで、いい気分になれる、良い体験」を重視する必要があるのはこのような理由からです。

 

正しいUX(良い体験)を設計するための3ステップ

Learn→Action→Reward、この3つのステップを経ることが重要、というのが田中さんのUX設計論です。

LearnActionReward
Learn,Action,Reward。この3つの順でUXを検討することが、良い体験をデザインすること。

ここさえきちんと抑えておけばユーザーは「良い体験だった」と感じ、使いつづけてくれる、とのことです。たとえば天気予報のウエブサイト/アプリでは、

  1. Learn:自分の知りたい地域の地図をタップすると天気予報が見られるだろう
  2. Action:タップしてみよう
  3. Reward:○○地区の天気がわかった!

これで正しい体験を得るための3ステップが完了です。

 

ケーススタディ:UI/UXの考え方でカフェをつくってみよう!

UI/UXの理解を深めるために、たとえばUI/UXの考え方を取り入れてカフェをつくったらどうなるか、ディスカッションしました。

さて、どんなカフェにしましょうか?

  • 裏路地の純喫茶なのか
  • 表通りに面したカフェなのか
  • さっとでてくるコーヒーなのか
  • ドリップに時間をかけ質にこだわったコーヒーを出すのか…

いろんな切り口が考えられますが、UI/UXの観点で整理すると以下のようになります。

UIとUXの違い
UIとUXの違いをCafeの設計から考えてみる。

 

良いUX、悪いUX

UXには良いUXと、ユーザーが離れていくような悪いUXがあります。その具体例として、次の画面に進む「ボタン」があったとしたら? を例に話を進めました。良いUXではボタンが視覚情報として認識され、ボタンを押すとその場所の色が変わるなど正しく押せたことが確認できる設計になっています。一方悪いUXはボタンを押しても無反応で正しく押せたかどうかわからず、ユーザーをイライラさせてしまいます。

良いUX、悪いUXのサンプル
良いUX、悪いUXの一例

良いUXの一例として、オンライン地図サービスのGoogleマップをご紹介いただきました。

  1. Learn:目的地に早く到着したい(ユーザーは地図を見たいわけではないことに注意)
  2. Action:検索欄に目的地を入力する(屋外で雑に扱ってもミスタッチ等が少ない設計になっている)
  3. Reward:目的地に赤いピンマークが表示されるとともに目的地周辺の地図や施設が表示され、迷うことなく目的地に到着する。

目的地までのアクセス方法が表示される「経路検索」や、実際の周辺の風景がわかるストリートビューなども邪魔にならず便利な機能として活用されていますね。

 

 

UXの実例など、詳細についてはぜひ、田中さんが実際にプレゼンで使用されたスライドをご覧ください。UXハニカムやアプリケーション定義ステートメントなど、田中さんが Learn ⇒ Action ⇒ Rewardの3ステップに至るまでの王道フレームワークもバッチリ記載されています。



2013/12/06
於:株式会社スポルツ様MTGスペース
講師:田中 宏幸さん

勉強会の開催情報は…

Facebookページから発信しています。