AR機能のUXデザインにエンジニアができること

521 Views

January 18, 19

#yjbonfire

スライド概要

https://techblog.yahoo.co.jp/advent-calendar-2018/yahuoku-ar-measure/

profile-image
スライド一覧

2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

（ダウンロード不可）

関連スライド

slide-thumbnail

深層学習による自然言語処理入門: word2vecからBERT, GPT-3まで
user-img Yahoo!デベロッパーネットワーク 194.1K
slide-thumbnail

ゼロから始める転移学習
user-img Yahoo!デベロッパーネットワーク 92.3K
slide-thumbnail

ヤフーにおける WebAuthn と Passkey の UX の紹介と考察 #idcon #fidcon
idcon fidcon
user-img Yahoo!デベロッパーネットワーク 82.9K
slide-thumbnail

OpenID Connectとネイティブアプリを取り巻く仕様と動向 Yahoo! JAPANの取り組み #openid #openid_tokyo
openid openid_tokyo
user-img Yahoo!デベロッパーネットワーク 65.6K
slide-thumbnail

運用業務とスクラムは本当に組み合わせにくいのか︖運用業務が大半を占めるプロダクト開発での試行錯誤
devsumi
user-img Yahoo!デベロッパーネットワーク 43.5K
slide-thumbnail

ヤフーのオンプレ機械学習基盤AIPFについて #ml_kubernetes
ml_kubernetes
user-img Yahoo!デベロッパーネットワーク 33.7K
各ページのテキスト
1.

Bonfire Design #4 AR機能のUXデザインにエンジニアができること ヤフー株式会社 松田 悠吾 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

2.

自己紹介 松田 悠吾 ヤフー株式会社 2017/10 中途入社 iOS Android データ分析 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

3.

今日話すこと ヤフオク!ARメジャー機能の開発経験から学んだ、 デザインを良くするためにエンジニアができること Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

4.

ARメジャーとは 出品時にカメラでかざして 配送方法を選べる機能 2つのモード ・ボックス表示 ・サイズ測定 “ヤフオク!にARメジャーを実装した話” https://techblog.yahoo.co.jp/advent-calendar-2018/yahuoku-ar-measure/ Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

5.

ボックス表示 1. 仮想ボックスを表示 2. 出品する商品に仮想ボック スを被せる 3. はみ出しがないか上下左右 から確認 4. 大きいサイズは、"+"や"-" で縦横高さを調整 5. 配送方法の決定 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

6.

サイズ測定 1. 商品をカメラの中央に配置 2. 測定スタート 3. 中心の◯で商品をなぞるよ うに測定 4. 測定ストップ 5. 配送方法の決定 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

7.

開発体制 企画 エンジニア デザイナー Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

8.

開発サイクル 仕様検討 実装 デザイン作成 ユーザー インタビュー 課題の抽象化 優先度付け Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

9.

開発サイクル 仕様検討 実装 デザイン作成 ユーザー インタビュー 課題の抽象化 優先度付け 毎日2回転を1週間 約40人にインタビュー Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

10.

実装で大切なこと スピード ・まずはUIを最短で ・ロジックはシンプルに コミュニケーション ・UIをちょいちょいデザイナーに見せる ・お互いの進捗共有 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

11.

ユーザーインタビュー 改善例① 情報量が多いと全然見ない Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

12.

ユーザーインタビュー 改善例① 情報量が多いと全然見ない ・最低限の使い方を伝える 再生時間を20秒→5秒 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

13.

ユーザーインタビュー 改善例② 何が起こったかわからない Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

14.

ユーザーインタビュー 改善例② 何が起こったかわからない ・箱を表示する際にアニメー ション ・ユーザーが間違った行動 をしたらナビ表示 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

15.

わかったこと ・ユーザーは想定した使い方をしてくれないので、 行動・視線をよく観察するべき ・作り手はもはや変人だと思った方がいい 完璧だと思っていても誰も使えなかったりする ・実際に動くものを触ってもらうことで、リアルな 感想を聞ける Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

16.

まとめ ・開発スピードを上げる アウトプットの最短経路を見つける ・デザイナーとのコミュニケーションを密に ・エンジニアもユーザーインタビューしよう Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.