"使いづらい" をリバースエンジニアリングする UI の読み解き方

当社では、デザイナーが多忙な中でも使いやすい UI を実現するため、エンジニア主導で UX や UI に関する勉強会を定期的に開催しています。 今回はその中から、日々のプロダクト開発に活かせる、エンジニア視点での UI 設計の考え方やインターフェース改善のポイントについてお話しします。

Transcript

1. • プロダクトを少人数でスケールさせてきた僕ら Rebase Tech #0 "使いづらい " をリバースエンジニアリング する UI の読み解き方 株式会社 Rebase 髙橋 海斗（ @t-chito ）
2. 自己紹介 株式会社Rebase エンジニアリング 髙橋 海斗（たかはし かいと） プロフィール • 2019/04 に前職 (データ分析系) に新卒で入社 • 2024/07 に Rebase に入社 主な仕事 • instabase をやっています • Rails (と React) を書いていることが多いです • UX やユーザビリティの話は好きです (UI はそこそこ)
3. 自己紹介 株式会社Rebase エンジニアリング 髙橋 海斗（たかはし かいと） プロフィール • 2019/04 に前職 (データ分析系) に新卒で入社 • 2024/07 に Rebase に入社 主な仕事 • instabase をやっています • Rails (と React) を書いていることが多いです • UX やユーザビリティの話は好きです (UI はそこそこ) と言いつつ、 ここの話をします
4. エンジニアが UI を考えるときのつらみ
5. エンジニアが UI を考えるときのつらみ • デザインに関する知識がない • コーディングと思考様式が真逆 • “ユーザーの気持ち” がわからない
6. エンジニアが UI を考えるときのつらみ • デザインに関する知識がない • コーディングと思考様式が真逆 • “ユーザーの気持ち” がわからない なぜエンジニアが作る画面はダサいのか…? (Qiita 記事) より • 問題と解決手段のマッピングは専門知識 • 「こう工夫しよう」自体ハードルが高い
7. • デザインに関する知識がない • コーディングと思考様式が真逆 • “ユーザーの気持ち” がわからない エンジニアが UI を考えるときのつらみ 同 Qiita 記事 より UI: 重要なところを目立たせる vs Code: エッジケース (①) を目立たせる 1 1 2
8. • デザインに関する知識がない • コーディングと思考様式が真逆 • “ユーザーの気持ち” がわからない エンジニアが UI を考えるときのつらみ 顧客が本当に必要だったもの - ニコニコ大百科 より • “気持ち” を知るのもまた高等テク • エンジニアは実装を知りすぎていて、 “上手く躓く” ことも難しい
9. 我々に何ができるのか “なんとなく違和感は あるんだけど...” って なったとき
10. “使いづらさ” を言語化しよう！
11. “使いづらさ” を言語化しよう！ https://techplay.jp/event/822636 より 「行為の7段階モデル」で！
12. https://techplay.jp/event/822636 より ~ ユーザーには目的があり、達成のために 7 つの段階を踏む ~ by ユーザビリティ分野のつよつよな人 (ドナルド・ノーマン) “使いづらさ” を言語化しよう！ 「行為の7段階モデル」で！
13. 今回はオレオレ簡易版の 4 分類でいきます “使いづらさ” を言語化しよう！ 「行為の7段階モデル」で！ https://techplay.jp/event/822636 より どこから できる？ どうなった？ 何をすればいい？ 触ってみよう
14. 実際にやってみます！
15. 青いコンビニ さん、ごめんなさい
16. どこから できる？ どうなった？ 何をすればいい？ 触ってみよう • 題材としてセルフレジをお借りします • オフィスの下にあるんです、他意はないですよ https://www.youtube.com/watch?v=I_9vaRjxkkk より 青いコンビニ さん、ごめんなさい
17. どこから できる？ どうなった？ 何をすればいい？ 触ってみよう • なぜか通常のレジと順番が違くて混乱する ... • 買い物をしたいのであって、支払い方法はなんでもいいんだけど ... セルフレジにたどり着くと
18. どこから できる？ どうなった？ 何をすればいい？ 触ってみよう • (私の場合 iD で払いたいんですが) どれか分からない ... 支払い方法を選択する
19. どこから できる？ どうなった？ 何をすればいい？ 触ってみよう • “購入する” を押したのに “購入する” ことができない ... 商品のスキャンが終わって
20. どこから できる？ どうなった？ 何をすればいい？ 触ってみよう • 何の支払い方法選んだっけ ...？ • とくに電子マネーだと全然手がかりが無い ... https://www.youtube.com/watch?v=MVOn5rNhmKM より 支払い
21. まとめ ❏ ユーザーのやりたい事と画面は一致するか？ ❏ 「これを触ってみよう」を見つけられるか？ ❏ 触ったら何が起こるか分かるか？ ❏ 反応を見て次の行動を決められるか？ 言語化が難しい違和感も、(無理やり) 分類してやることで プロダクトの改善のきっかけになるかもしれません。
22. 22 ご清聴ありがとうございました
23. 街中ですれ違う名前も知らない「あの人」も、「あなた」も誰もが無限の可能性を 持っている。そして、「あなた」がどんな場所に暮らしていても、どんなに他人から 無理だと言われても、諦めて欲しくない。 そんな想いから、 Rebaseは生まれました。挑戦の一歩を軽くすることで、人生に 大きな変化を生み出すサポートをしたい。 誰かの人生に彩を与える「ことのはじまり」を、一緒に作りませんか。 Let's work together! https://jobs.rebase.co.jp/