PWA Night vol.14 ～UI/UX～
https://gyazo.com/de0d7ccf40ca5f15844a21c518bf8ec8
１人月で最高のUXを作り上げるまで DJ7誕生秘話 YouTubeの同期再生プラットフォーム
開発工程
きっかけ
これまでの同期再生サービス
日本語版がある
問題点
使い方が直感的ではない
複数追加ができない
並び替えできない
いらない機能が多い
チャットもいらない
実現したいもの
Webで可能
YouTubeの同期再生
既存サイトの不満を解消
PWA対応
1ヶ月でつくる
開発スケジュール
1週目
サービスコンセプトに価値があるか
プロトタイプ作成
ポジティブな感想をもらった
技術選定
2週目
最低限必要な機能の洗い出し
サービスの趣旨からずれない機能
使ってもらってないと不便に感じたら実装
ソフトウェアは１つのことを上手くやる
分散システム
データ保持と更新の通知
ユーザが主体的に更新をやる必要があった
サービスの構成を小さくすることができた
リアルタイム性
見ているものを一緒にする
シークバーの同期
時刻のズレを補正する
3週目
デザインの方針
ユーザが各機能にアクセスしやすくする
キュー
機能を近くに
画面を広く使う
ナビゲーションバーを配置するのは下
クリック数を少なく
動画を残す理由
使ってもらいながら開発する良さが分かった
メインは音楽同期
4週目
UI以外でUXを高める方法
同期再生まで動線を短く
出会って3秒で同期再生
読み込み時間を早く
DOM生成少なく
5週目
ユーザーに印象づける
サービス名、ドメイン、ロゴ
Qiitaの記事執筆
公開後
反応
同期再生に関するポジティブ感想
いろんな用途を考えてくれた
ふりかえり
需要に間違いはなかった
シンプルに同期再生を楽しんでもらった
今後の展望
TechFeed Pro
200の専門チャンネル
エキスパートモード
専門のエキスパートコミュニティ
２つの原則
TechFeedを運営していたが物足りなかった
エキスパートに聞いてみた
プロフェッショナルをフォローする
フォローはメンテナンスしている
PWAといえばTechFeed Pro
直接PWAとして使ったときにFBをもらっている
UI/UXでのPWAのデメリット・メリット
デメリット
遅い
無限スクロールをもつホーム画面のパフォーマンスが重い
改善された
一度は突き当たる問題
不可能が存在する
iOS上でのプッシュ通知
高度なプッシュ通知
グルーピング
通知アクション
アプリ内ブラウザ
より使いやすいUIを提供したい
デスクトップ・モバイルアプリという選択肢を提供したい
ユーザが慣れていない
PWAインストール率 4%
プッシュ通知許諾率 31.8%
メリット
適用可能性の高さ
One Product, Multi Use
ビジネス面でも様々なメリット
とりあえずPWAでが出来る
ブランデイング
高級文具のような高級感と親しみやすさの融合
ネイティブのUIエミュレートはしない
一貫性
バックエンド
フロントエンド
デザインが形になるまで早い