UIを作る、減らす、完全になくす
UI作る時にどんな事を考えてるかを話しますshokai.icon
あんまりまとまりはない！
3つそれっぽく並んでるのに「まとまりない」って言うの笑ったsawachin.icon
作ったり減らしたり完全になくしたりしてるなあ
という振り返りです
UIを作る
特殊なオリジナルUI
ヒアリングの結果、新旧と既読未読の2種類の情報が知りたい事がわかった
ちゃんと人の話を聞くのは重要shokai.icon
ページ内の細かい部分ごとに
新・旧を知りたい
太さで表現
既読・未読を知りたい
色で表現
https://gyazo.com/0204f06d4ed4af1554dc3c2a87a806b2
本当に気持ち良いUIsawachin.iconteramotodaiki.icon
さらに
行毎にpermalinkがほしい
詳細な更新日時も知りたい
https://gyazo.com/96f7a02a4d5474e4a743913aa5b07c58
コンパクトだけどわりと多機能になった
できる事を説明する
全文検索の対象
タイトルと本文の両方
タイトルのみ
https://gyazo.com/d09acd7c9e73769b29d678bf0a59b431
タイトルだけを検索している時は、検索結果のプレビューの本文部分を黄色くハイライトしないようにしている
ハイライトすると結局本文も検索してるの？どっちなの？と混乱するから
ラベルで説明したら負けだと思ってるshokai.icon
PDFや画像が検索できる事を教える
https://scrapbox.io/files/638dd5165bb864001d997862.png
「検索する」というタスク遂行だけでなく
「何が検索できるか」を教える事も意図しているshokai.icon
hiroshi.icon いいはなしだ
ロックして一部だけ有料にとかも出来そうteramotodaiki.icon
そうなんですよ。気づいてしまいましたかshokai.icon
こういうUIでサーバー側の仕様（というか都合）も大丈夫か？も検討する
簡単プロトタイプ
Chrome devtoolのDOM Element複製・編集・削除が便利
https://gyazo.com/7c79c2b4707ef6e61d7036118a62a526
これめっちゃいいいいい。知らんかったsawachin.icon
毎回頑張ってUserScript, UserCSS作ってた
機能の存在は教えたい。でもあなたに権限はありません、を理由つきで説明する
Ownerは、Owner権限を移行したり、Adminを任命したりできる
これをOwner以外にも教えたい
でも、もちろんOwner以外には権限が無い
https://gyazo.com/e9cf9ed6fcbc144262e771b833ecbaaf
全員にボタンをDisableの見た目で表示し、popupで「あなたがソレをできない理由」を表示する
Disableだけど押せるボタン
APIのユーザー権限チェック機構がちゃんと動いてるか誰でも確認できる
丁寧teramotodaiki.icon
ボタンを隠すのではなくて動作しないけど敢えて見せておくのが大事なんですね daiiz.icon
社内ドッグフーディングとかでのデバッグ的な役割も兼ねている
これめっちゃ嬉しいsawachin.icon
toB系サービスだと「管理者しか実はできないこと」が多くてすぐブラックボックスになる。
わかるniboshi.icon
UIを減らす
画面が小さいと入り切らない
mobileでは、テロメアの詳細時刻と行permalinkのメニューが邪魔で行頭にカーソルを置けなかった
https://gyazo.com/f89aa8c2ccfed866716fe4560ab11362
タップではテロメアの詳細時刻を出さない
マウスクリックでは出す
https://scrapbox.io/files/638dd522039506001db1365f.MOV
あきらめと、優先順位付けが重要shokai.icon
なるほどなああああ。動かないって思ってたsawachin.icon
というふうにLTでは話したがshokai.icon
その後、タッチ長押しでテロメア詳細を表示するよう改良した
結局あきらめなかった
UIを完全になくす
無いほうがいいUIは、無いほうがいいんですよshokai.icon
デフォルトで最良な設定になっているのが一番いい
Auto project backupのenable/disableボタン
https://gyazo.com/0f620568b942eddaa75fd6e9bbbb429a
なくした
https://gyazo.com/f9a240c38d0755b4ba803636d5c39163
システムが安定していないうちは、緊急用のUIが必要だったりする
リリースした後、たまに見直すといいshokai.icon
https://gyazo.com/8897d27735f47f4e4048f5fab181cad5みたいなボタンをなくす
役割は2つ
更新がある事を教えてくれている
押すとアプリがリロードして、更新される
Scrapboxも昔こういうボタンがあった
https://gyazo.com/de6a2acaa35b65df4ee413a4438f265c
適切なタイミングで自動的に更新されていれば、こんなUIいらないshokai.icon
でも難しい
タイミングを間違えると
保存してないデータが消える
編集作業をストップさせてしまう
なくしました
ユーザーがAタグをクリックした時に、ローカルに新しいassetsが用意できていたら、pushStateではなくHTMLまるごと再読込する普通の画面遷移を行う
すごい！niboshi.iconsawachin.icon
これは本当に天才だと思う。他で聞いたことないけど名前ついてるのかなteramotodaiki.icon
いい話yado.icon
これいかにすごいか、逆に実装されてないSPAサービス使うとすごさを実感するakix.icon
某サービスはReload表示でてだいぶ面倒臭い時がある
技術的に難しいことができると、手動のUIが不要になる?hata6502.icon
デジタルサイネージを作ってた時に似たようなものを実装してみた覚えがあるsilloi.icon 発動条件
未保存のデータがあるならpushStateにする
構成要素
HTML/JS/CSSなどの素材を一括ダウンロードしておいて、アクセス毎にサーバーに取りに行かないようにするしくみ
初回レンダリング速度が上がる
全てのAPI通信に「今サーバーが持っているassetsのバージョン情報」が書かれている
ServiceWorkerがこれを自動的にチェックし、ローカルのassetsを更新する
assets cacheがかなり高い頻度で更新されるようになった
pushStateではない、いわゆる普通の画面遷移でのチラつきが低減した
常にUI減らしたい。ボタンが多いとイルカが飛び始めるshokai.icon 強い daiiz.iconhata6502.icon
おわり！！！