トライフォート小俣が考える

UI/UXの考察~UXの先を考える思考をつける~

自己紹介

株式会社トライフォート  CO-Founder/CTO小俣 泰明

＜経歴＞日本ヒューレット・パッカードや NTTコミュニケーションズなどの大手 ITベンダーで技術職を担当し、システム運用やネットワーク構築などのノウハウを習得。

その後、 2009年にソーシャルゲーム開発において業界トップクラスであり、東証 JASDAQに上場しているCROOZ株式会社に参画し、同年 6月に取締役に就任。

翌年 5月同社技術統括担当執行役員に就任。 CTOとして大規模WEBサービスの開発に携わる。

2012年 6月に退任、 2012年 8月に大竹とともにトライフォートを設立し現在代表取締役 Co-Founder/CTOを務める。

Agenda

1. UI設計、 UX設計のその前に2. 入力処理への考察3. 出力処理への考察4. UXとは心理操作5. まとめ

UI

UX

UIとは？＝ユーザーインターフェース

UI設計・UX設計とは？＝画面設計

…という風に考えられている？

1. UI設計、UX設計のその前に (1)

UI設計・UX設計＝画面設計？でいいのか。

必ずしもイコールではない。

そもそも画面設計について考えるよりも前に、デバイスのインターフェースの入力・出力処理について再度確認をしてみよう。

1. UI設計、UX設計のその前に (2)

2.入力処理への考察 (1)

【入力インターフェース処理の種類】●タッチ●スワイプ　 -画面移動、スライドメニュー          ●ピンチイン、ピンチアウト　 -写真を見る操作● GPS●音声 ●カメラ● Bluetooth　 -Bluetoothキーボード　 -iBeacon(O2O)●シェイク   　 -Lineの id交換　 -作業のキャンセルなどの処理● ６軸センサー　 -iPhoneの背景は 6軸センサーで微妙に動いている

2.入力処理への考察 (2)

Q.コンシューマゲームのコントローラーをスマートフォンの画面で表現できるのか？

？スマートフォンにおける理想的な十字キーはなんなのか？

2.入力処理への考察 (3)

A.バーチャルカーソルで表現。

コンシューマ版 アプリ版

引用： https://itunes.apple.com/jp/app/id354657332http://www.capcom.co.jp/sf4/IV/cs.html

3.出力処理への考察 (1)

【出力インターフェースの種類】●画面表示●サウンド●バイブレーション●ライト（フラッシュ）●WIFI、通信●Bluetooth　 -音声出力　 -外部デバイスコントロール

WIFI直接つなぐことによるデバイスコントロールSpheroデバイスの例

引用： http://www.gosphero.com/

3.出力処理への考察 (2)

スマホにおける UI、 UXを検討するには画面設計だけではなく

人とデバイスとがどのようにつながるかを認識した上で検討することが重要。

引用： https://itunes.apple.com/jp/app/id354657332http://www.capcom.co.jp/sf4/IV/cs.html

4.UXとは心理操作 (1)

今日伝えたい一番大事なこと全ての操作はユーザーにとって大きな作業だと認識しよう。

なぜ？

ユーザーは価値を感じるとそのサービスを使ってくれるから。

4.UXとは心理操作 (2)

UI・UXによるユーザーへの価値を高める３つの検討方法

■ケーススタディ１価値を期待させる（出力処理）

■ケーススタディ２今まで経験をしたことが無い便利な操作を気づかせる（入力処理）

■ケーススタディ３ユーザーの状況に合わせた UI、 UXであること（出力処理）

ケーススタディ 1：価値を期待させる（ 1）

ケーススタディ１価値を期待させる（出力処理）

入力処理をユーザーに求めるということは、その行為に対する見返りが必要になる。

ケーススタディ 1：価値を期待させる（ 2）

（心理状態）何が起こるかわからない

課金コインを購入

ボタンを押す行為に抵抗ができる。

楽しみにならない＋

ボタンを押す作業を強いられる

（作業）ボタンを押す

ガチャを回す

【例 1】ガチャをひくための課金コインを買いました

ケーススタディ 1：価値を期待させる（ 3）

画像引用： Flickr

【例２】 iPhoneというスマートフォンを買いました

（心理状態）開ける前から

期待に満ちている

箱をあけることに非常にポジティブな印象で開けられる。

（作業）iPhoneの箱をあける

ケーススタディ 1：価値を期待させる（ 4）

例 1と例 2の違いは？

→既にパッケージの中身への期待値情報を持っているため。

※箱を開けた後の心理状況ではなく「箱を開ける、ガチャをひく」といった中身が見えない状態からどう感じるかが重要。

ケーススタディ 1：価値を期待させる（ 5）

全ての操作が期待に満ちたものであるか。

ガチャを回す（作業）ボタンを押す

（心理状態）ボタンを押す時から期待に満ちている

この心理状態を作れることが重要。

【ボタンを押すことの価値を体験させる】

ボタンを押した後の価値をイメージさせる

ボタンを押すことの価値を体験させる

ケーススタディ 2：便利な操作を気づかせる（ 1）

ケーススタディ 2今まで経験をしたことが無い便利な操作を気づかせる（入力処理）

重要なのは教えるのではなくユーザーに気づかせること。

ケーススタディ 2：便利な操作を気づかせる（ 2）

【例 1】Windows8のUI

チュートリアル的に全ての機能を伝えると自分で発見したわけではないため、感動が薄れる。

UI、UX操作において、自分だけが気づくことができたように感じる状況にさせることがユーザーのこころをつかむ。

左端からスワイプすると起動したアプリが出てくる。（初めてのユーザーでは気づきづらい）

こんなことできるんだ！という体験が価値になる。

ケーススタディ 2：便利な操作を気づかせる（ 3）

【例 2】 iPhoneのシェイク

ユーザーが実際に使う使わないを別にして、こういう発見が UI、UXがにおけるユーザーのグリップになる

iPhoneをシェイクすると入力したテキストを削除できる

偶然シェイクしたら消せるんだ！という体感になる。

ケーススタディ 3：状況に合わせたUI、UX（ 1）

ケーススタディ 3ユーザーの状況に合わせた UI、 UXであること（出力処理）

ユーザーのニーズ全てをスマホのUIに入れるのではなくニーズの発生タイミングを秒単位で認識して対応することが重要！

ケーススタディ 3：状況に合わせたUI、UX（ 2）

【例 1】ニュースを見た時ユーザーのニーズ例は様々

・ FOMAの意味がわからないからその意味を調べたい　→固有名詞はクリックすると辞書検索できる・ AKB板野のファンなので Facebookや Twitterにシェアしたい　→シェアボタンをつける・「枝野氏が抗議」が自分のビジネスのネタになるので　その情報をまとめておきたい　→ Evernoteへ投稿できる・「ジャニーズ主演ドラマ」についてもっと深く知りたい　→関連情報のリンクをつける・特に気になるニュースがない、つまらない　→興味があるニュースカテゴリを　チェックリスト化してフィルターしていく・他のニュースが見たい　→他のニュースへのリンクをつける

全てスマホの UIに入れることが重要ではない

ケーススタディ 3：状況に合わせたUI、UX（ 3）

ユーザーのニーズは様々で全部のニーズを UIに入れることは、車を買いに来た人にバイクを売りつけようとしているようなもの。

スマホ画面は非常に小さいため、ニーズではない機能はノイズどころかネガティブに捉えられる。

→それぞれのニーズがどのタイミングで発生するのか秒単位で認識して対応することが重要

ケーススタディ 3：状況に合わせたUI、UX（ 4）

【例 2】ニュースサイトにおける潜在的なニーズを掘り起こす

潜在的なニーズ

・最新のニュースを誰よりも早く見たい　→誰よりも早く見た気持ちになりたい　（例）最新のニュース速報を PUSH通知で　自分だけが受信できる。

・有益なニュースを見たい　→本当に有益がどうかではなく、有益だと思えること　（例）ニュース記事にランク付けをつけて　高いランクと記載する

・知識がたまっていることを視覚的に認識したい　（例）ニュースを読んだ記事数をグラフ化する

ケーススタディ 3：状況に合わせたUI、UX（ 5）

UX設計の理想型は・・・

潜在的なニーズまで掘り起こした上で、秒単位でのユーザーのニーズの変化を把握し、UI、UX（画面だけでなくすべてのインターフェース）に落としこむこと。

まとめ

iPhoneと Xperiaやギャラクシーどちらも機能の差はほとんど無い。

しかし日本では iPhoneの方が人気が高い。

これはユーザーインターフェイスが好まれている、触り心地がいいから。

参考：カンター・ジャパン「 2013 年  9 月から  11 月のスマートフォン販売シェア調査」より

→製品の良さはサービスそのものよりも強い力を持つことがある。

UI.UX設計を突き詰めサービスを勝ちに導こう！