APIの遅延実行で崩れるユーザー体験をどう守る？

Transcript

1. APIの遅延実⾏で崩れる ユーザー体験をどう守る？
2. 吉⽥ 郁吹 (@ibuibukiki) ・LINEヤフー株式会社 (新卒2年⽬) ・Yahoo!フリマのiOSエンジニア ・ユーザー体験にこだわりたい！
3. 商品情報モジュール ・画像 ・商品説明 ・出品者情報 Yahoo!フリマの商品詳細画⾯ レコメンドモジュール ・Yahoo!オークション商品 ・この商品に似ている商品 ・この商品を⾒ている⼈におすすめ
4. 商品情報モジュール ・画像 ・商品説明 ・出品者情報 Yahoo!フリマの商品詳細画⾯ レコメンドモジュール ・Yahoo!オークション商品 ・この商品に似ている商品 ・この商品を⾒ている⼈におすすめ
5. 商品情報モジュール ・画像 ・商品説明 ・出品者情報 Yahoo!フリマの商品詳細画⾯ レコメンドモジュール ・Yahoo!オークション商品 ・この商品に似ている商品 ・この商品を⾒ている⼈におすすめ
6. 商品情報モジュール ・画像 ・商品説明 ・出品者情報 Yahoo!フリマの商品詳細画⾯ レコメンドモジュール ・Yahoo!オークション商品 ・この商品に似ている商品 ・この商品を⾒ている⼈におすすめ
7. 商品情報モジュール ・画像 ・商品説明 ・出品者情報 Yahoo!フリマの商品詳細画⾯ レコメンドモジュール ・Yahoo!オークション商品 ・この商品に似ている商品 ・この商品を⾒ている⼈におすすめ
8. レコメンドのデータは 画⾯を開いた時に取得 これまでの実装 画⾯を開く データを取得 モジュールを表⽰ スクロール可能
9. バックエンドからの依頼 負荷軽減のために ユーザーがレコメンドを⾒そうな時だけ APIを叩くようにしてほしい
10. ユーザーが レコメンドモジュールの近くまで スクロールしたところで APIをリクエストするよう変更 遅延実⾏への変更
11. ⼀⾒、問題なさそう？ 商品情報を⾒ながら 「ゆっくりスクロール」するなら問題なし。
12. レコメンドモジュールは データを取得してから表⽰ これまでの実装 画⾯を開く データを取得 モジュールを表⽰ スクロール可能
13. 使い慣れたユーザーが 先に出品者の情報を⾒ようとすると レコメンドモジュールが表⽰される前に スクロールの終端に到達してしまう これまでの実装だと...
14. 使い慣れたユーザーは？ レコメンドを表⽰するときに 画⾯がカクついてしまう
15. 新規ユーザーは 商品情報の下の⽅に レコメンドがあることを知らない これまでの実装だと...
16. 新規ユーザーは？ レコメンドを⾒る前に 画⾯を閉じてしまう
17. 解決策 ローディング表⽰を⼊れよう！
18. じゃあどんなローディングを 表⽰するのが良い？
19. 他画⾯でも使われている iOS標準コンポーネントがある 実装が簡単！ 候補1 : インジケータ
20. 他画⾯では使われていない 新規デザインの作成が必要 実装コストがかかる... 候補2 : スケルトン
21. どこまで スクロールできるか わかること そこに 何が表⽰されるか わかること ユーザー体験を守るために必要な要素
22. どこまで スクロールできるか わかること
23. そこに 何が表⽰されるか わかること
24. コストだけならインジケータ
25. ユーザー体験を守るために 「スケルトン」を選択！
26. ローディングは単なる「⾒た⽬」ではなく、 「ユーザーのスクロール体験をどう維持するか」 という設計だった。 ユーザー体験を守るための設計