Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

ohakutsu
November 24, 2023

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

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

ohakutsu

November 24, 2023
Tweet

More Decks by ohakutsu

Other Decks in Programming

Transcript

  1. エンジニアもUIを作るならユーザーについて知ろう!
    Qiita 株式会社
    ohakutsu

    View full-size slide

  2. ● ohakutsu(おはくつ)
    ● Qiita株式会社 プロダクト開発部 Qiita開発グループ
    ● Webアプリケーションエンジニア
    ● 2020年4月にQiita株式会社に新卒入社
    ● 現在までQiitaの開発をしています!
    自己紹介

    View full-size slide

  3. ● Qiitaで「AIサジェスト機能」をクローズドベータ版として公開しました!
    ● https://corp.qiita.com/releases/2023/11/ai-suggest-closed-beta/
    宣伝

    View full-size slide

  4. ● 「/」コマンドからAIを呼び出すと、AIが続きを提案してくれます!
    宣伝

    View full-size slide

  5. 今回のテーマ
    ユーザーにとって使いやすいUIを開発するために、
    エンジニアはどうユーザーと接すると良いか

    View full-size slide

  6. ● 「クリックイベント等の数値は見ているけど、それ以上はあまり知らないな
    ...」
    ● 「会社ではユーザーヒアリングをやっているけど、自分は参加したことないな
    ...」
    って人が多いのではないか?
    開発した機能がユーザーにどう使われているか知っていますか?

    View full-size slide

  7. ユーザーの行動には、数値上では見えない情報が隠れている

    View full-size slide

  8. 冒頭で宣伝させていただいた「AIサジェスト機能」開発中の出来事。
    「AIサジェスト機能」はいくつかプロトタイプをつくっていた。
    ● 記事のタイトルを提案してくれるもの
    ● 記事のタグを提案してくれるもの
    ● 記事の文章校正をしてくれるもの
    ● 文章の続きを提案してくれるもの
    ● など...
    実際のエピソード

    View full-size slide

  9. そのプロトタイプの1つにGitHub Copilot風のインターフェースで続きを提案してくれるものがあった。
    実際のエピソード

    View full-size slide

  10. 実際のエピソード
    GitHub Copilot風のAIサジェスト機能
    ● 社内リリース
    ○ 改善をしていければかなり良い体験になるだろう
    ○ ポジティブな評価
    ● 一部のユーザーにリリース
    ○ ユーザーヒアリングでかなり使いづらそうなことがわかった

    View full-size slide

  11. ● カーソルを別の位置に動かしたりしていた
    ○ 「...」が表示されるとカーソルを移動させ、「
    ...」が消えるとカーソルが止まる
    ○ → 「...」が邪魔をしているのではないか
    ● 提案が表示され「それはそうなんだけどなぁ、で何考えてたっけ」と声にしていた
    ○ → 思考するのを邪魔しているのではないか
    ● コピペをするためにカーソル移動をしている際に、一瞬だけ止まったときがあった
    ○ 表示された提案内容のテキストが、元の文章と混ざってしまっている際に起きていた
    ○ → 挙動に不安があるのではないか
    実際のユーザーの行動

    View full-size slide

  12. ● エンジニアが良いと感じるものを、ユーザーも良いと感じるとは限らない
    ○ 特に統一したルールが双方にとって好ましいかは別
    「デザイナーがつくったUIにしてるからうちは大丈夫!」
    ● 実際のUIは静止だけではなく動きがある
    ○ 例)モーダルの開閉、ボタンの状態変化
    ユーザーが触れるUIをつくるのはエンジニアだからこそ
    ...
    このことからわかること

    View full-size slide

  13. エンジニアも
    1ユーザーの操作・行動を直接見るべき

    View full-size slide

  14. ● 普段通りに使ってもらう
    ○ 日時、場所、使っているデバイス・機器など
    ○ 実際の使われ方とズレる可能性がある
    ● 使っている際の呟きや行動も記録する
    ○ ユーザーの視線や手の動き、心から漏れ出た言葉からも得られるものがある
    ○ 映像として残しておくとリピートして確認できるので便利
    ● 些細なことにも注意を払う
    ○ ちょっとしたカーソルの動きにも隠れた課題がある
    ○ どんな小さな動きにも何かしら理由があると考える
    これまでのユーザーヒアリングから学んだノウハウ

    View full-size slide

  15. 今回、伝えたかったこと
    ● エンジニアは実際のユーザーにどう使われるのかを知っているようで知らない
    ● エンジニアだからこそ、1ユーザーの操作を直接見るべき
    ユーザーフレンドリーな機能開発をエンジニア自身が主導して行きましょう!
    💪
    最後に

    View full-size slide

  16. ご清聴ありがとうございました
    ● 「AIサジェスト機能」クローズドベータ版の利用申請は以下のフォームから 💁
    ● https://forms.gle/idRcyLHyMAL79BqT7

    View full-size slide