エンジニアもUIを作るならユーザーについて知ろう！

「[ハイブリッド開催] Wantedly x Qiita Meetup #1 フロントエンドのあれこれ」での発表スライドです。
https://wantedly.connpass.com/event/300025/

Transcript

1. エンジニアもUIを作るならユーザーについて知ろう！ Qiita 株式会社 ohakutsu
2. • ohakutsu（おはくつ） • Qiita株式会社 プロダクト開発部 Qiita開発グループ • Webアプリケーションエンジニア • 2020年4月にQiita株式会社に新卒入社 • 現在までQiitaの開発をしています！ 自己紹介
3. • Qiitaで「AIサジェスト機能」をクローズドベータ版として公開しました！ • https://corp.qiita.com/releases/2023/11/ai-suggest-closed-beta/ 宣伝
4. • 「/」コマンドからAIを呼び出すと、AIが続きを提案してくれます！ 宣伝
5. 今回のテーマ ユーザーにとって使いやすいUIを開発するために、 エンジニアはどうユーザーと接すると良いか
6. • 「クリックイベント等の数値は見ているけど、それ以上はあまり知らないな ...」 • 「会社ではユーザーヒアリングをやっているけど、自分は参加したことないな ...」 って人が多いのではないか？ 開発した機能がユーザーにどう使われているか知っていますか？
7. ユーザーの行動には、数値上では見えない情報が隠れている
8. 冒頭で宣伝させていただいた「AIサジェスト機能」開発中の出来事。 「AIサジェスト機能」はいくつかプロトタイプをつくっていた。 • 記事のタイトルを提案してくれるもの • 記事のタグを提案してくれるもの • 記事の文章校正をしてくれるもの • 文章の続きを提案してくれるもの • など... 実際のエピソード
9. そのプロトタイプの1つにGitHub Copilot風のインターフェースで続きを提案してくれるものがあった。 実際のエピソード
10. 実際のエピソード GitHub Copilot風のAIサジェスト機能 • 社内リリース ◦ 改善をしていければかなり良い体験になるだろう ◦ ポジティブな評価 • 一部のユーザーにリリース ◦ ユーザーヒアリングでかなり使いづらそうなことがわかった
11. • カーソルを別の位置に動かしたりしていた ◦ 「...」が表示されるとカーソルを移動させ、「 ...」が消えるとカーソルが止まる ◦ → 「...」が邪魔をしているのではないか • 提案が表示され「それはそうなんだけどなぁ、で何考えてたっけ」と声にしていた ◦ → 思考するのを邪魔しているのではないか • コピペをするためにカーソル移動をしている際に、一瞬だけ止まったときがあった ◦ 表示された提案内容のテキストが、元の文章と混ざってしまっている際に起きていた ◦ → 挙動に不安があるのではないか 実際のユーザーの行動
12. • エンジニアが良いと感じるものを、ユーザーも良いと感じるとは限らない ◦ 特に統一したルールが双方にとって好ましいかは別 「デザイナーがつくったUIにしてるからうちは大丈夫！」 • 実際のUIは静止だけではなく動きがある ◦ 例）モーダルの開閉、ボタンの状態変化 ユーザーが触れるUIをつくるのはエンジニアだからこそ ... このことからわかること
13. エンジニアも 1ユーザーの操作・行動を直接見るべき
14. • 普段通りに使ってもらう ◦ 日時、場所、使っているデバイス・機器など ◦ 実際の使われ方とズレる可能性がある • 使っている際の呟きや行動も記録する ◦ ユーザーの視線や手の動き、心から漏れ出た言葉からも得られるものがある ◦ 映像として残しておくとリピートして確認できるので便利 • 些細なことにも注意を払う ◦ ちょっとしたカーソルの動きにも隠れた課題がある ◦ どんな小さな動きにも何かしら理由があると考える これまでのユーザーヒアリングから学んだノウハウ
15. 今回、伝えたかったこと • エンジニアは実際のユーザーにどう使われるのかを知っているようで知らない • エンジニアだからこそ、1ユーザーの操作を直接見るべき ユーザーフレンドリーな機能開発をエンジニア自身が主導して行きましょう！ 💪 最後に
16. ご清聴ありがとうございました • 「AIサジェスト機能」クローズドベータ版の利用申請は以下のフォームから 💁 • https://forms.gle/idRcyLHyMAL79BqT7