Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
「わかる」だけじゃ不十分 機能から体験のデザインへ / UX MILK Fest 2019
Search
y_kinoshi
September 14, 2019
Design
6
9.4k
「わかる」だけじゃ不十分 機能から体験のデザインへ / UX MILK Fest 2019
y_kinoshi
September 14, 2019
Tweet
Share
Other Decks in Design
See All in Design
デザインの意思決定を加速するワークショップ設計 / Workshop design to accelerate design decision-making
lycorptech_jp
PRO
0
340
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
shingo2000
1
1.5k
無自覚なランクとその影響を紐解くワークショップ / Unpacking Unconscious Privilege Workshop
spring_aki
4
330
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
2.6k
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1k
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.4k
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
3.1k
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
120
生成AIを活用した組み込みSW設計書検索システム開発
licux
7
1.3k
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
260
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
1.5k
Liquid Iron
mcduckyart
1
120
Featured
See All Featured
For a Future-Friendly Web
brad_frost
179
9.8k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Done Done
chrislema
184
16k
A Tale of Four Properties
chriscoyier
160
23k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Building an army of robots
kneath
306
45k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Transcript
「わかる」だけじゃ不十分 UX MILK Fest 2019 機能から体験のデザインへ
木下 由季子 株式会社ビデオマーケット UIデザイナー / UXデザイナー @y̲kinoshi 元・営業職 和歌山県 心理学専攻
デザイナー
2019.9.2 iOSアプリ フルリニューアル
リニューアルの背景
そもそも使われてない 詐欺アプリと呼ばれ データ取れてない 秘伝のソース WebView 一貫性がないUI 頻繁に起こる障害 読み込み重い わかりづらい 使いづらい
運用でカバー 溢れる☆1レビュー 社員でも使いづらい みせられないよ 人に勧められない
いろいろありました
UXピラミッド 目的達成できる 快適な体験 機能する 信頼できる 使いやすい 便利である 楽しい 意義がある
快適な体験 UXピラミッド 機能する 信頼できる 使いやすい 便利である 楽しい 意義がある 目的達成できる まずは
「当たり前のことを 当たり前にできる」 に焦点をあてた
策定したコアバリュー ユーザーが環境を気にせず、安心して、簡単に、 動画を楽しめるサービス
安心感、使いやすさにつなげるために 「わかりやすさ」を軸にデザイン
わかりやすさを検証するために ‒ ユーザービリティテスト ‒ モンキーテスト フィードバックを元に 修正→テストを繰り返し
事例: ポイント履歴機能の追加 App内課金で購入したポイントを使って動画をレンタルするシステムなのに、 いつ、いくらポイントを追加・消費したか確認する手段がなかった
いつ(日時) 何で(内容) いくら(ポイント数) プラスの場合は白→ ユーザーが簡単に確認できるよう 必要十分な情報で構成
テストのフィードバックを受けると…
怖 い
利用すればするほど赤い文字が並ぶ ‒ 怖い、重い ‒ ポイントを失った感覚が強い → ポイント消費すること = マイナス (動画をレンタルすること)
「動画を楽しむ」という価値を提供するサービスなのに 動画をみることに対して ネガティブな印象を与えてしまった
そもそも、なぜこの配色を採用したのか?
ポイント数の表示色についての検討 ①会計方式 ②気温方式 ③ゲーム方式 +100 ‒100 +100 ‒100 +100 ‒100
A社 B社 C社 D社 E社 11,111 22,222 ▲3,333 44,444 ▲5,555
①会計方式 ②気温方式 ③ゲーム方式 +100 ‒100 +100 ‒100 +100 ‒100 A社
B社 C社 D社 E社 11,111 22,222 ▲3,333 44,444 ▲5,555 ポイント数の表示色についての検討
ユーザーにとってわかりやすくしたつもりが 心理的負担を与える結果に うわっ⋯私ポイント、 使いすぎ⋯? うわっ⋯私ポイント、 使いすぎ⋯?
改善
過度な「マイナス感」を与えないため 文字色を変更 ポイント消費: ポイント追加: → → 赤 白 白 緑
Before After
「ポイント履歴がわかる」から 「ポイント履歴が(心理的負担なく)わかる」へ ↓ 一画面の一部の文字色の差で サービス全体の印象に影響を与えてしまう
まとめ
「わかる」だけじゃ不十分 機能しか満たしていない状態 = 機能する 信頼できる 使いやすい 便利である 楽しい 意義がある
まずは当たり前に使えること 不安やストレスを与えないこと を着実に満たしていく 機能する 信頼できる 使いやすい 便利である 楽しい 意義がある
その上で 快適なユーザー体験を デザインする 機能する 信頼できる 使いやすい 便利である 楽しい 意義がある
ご清聴ありがとうございました 資料公開してます