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

グローバル・リモート業務を支える技術とUI

 グローバル・リモート業務を支える技術とUI

「同僚はみんな同じ場所で同じ時間に働いている」という前提が崩れたとき、ワークツールはどう変わる必要があるのか? 自由な働き方と円滑な業務遂行を両立させるために開発されたいくつかのツールを、技術、UI、IA などの側面から見ていきます。

Lena Morita

June 17, 2020
Tweet

More Decks by Lena Morita

Other Decks in Technology

Transcript

  1. @mirka Uruguay United States UK (from Spain) Slovakia Romania Japan

    Philippines Denmark MY TEAMMATES BY COUNTRY
  2. @mirka Automattic カスタマーサポートの特徴 • 300⼈いる • タイムゾーンばらばら(ノマドも) • ⾃由シフト制 •

    有休無制限(休みは申告制で規定の祝⽇なし) 既存ツールでは ちょっと無理ぽ
  3. @mirka “⽇付”に紐づいた情報も必要 従業員のタイムゾーン シフトの時間データ 表⽰時にタイムゾーン変換 1592085821 UTC+9 ▸ 14 Jun

    2020 7:03 UTC+0 ▸ 13 Jun 2020 22:03 ⽇付ごとのデータ タイムゾーン固定 2020-06-01 Africa/Lagos +
  4. @mirka Start Jun 3, 2020 10:00 End Jun 3, 2020

    12:00 既存のシフト管理ツールは ⽇時の⼿⼊⼒がほとんど
  5. @mirka ネイティブ級のマウス操作 作り込んだUI Gesture recognizer compose( selectRange, resize, drag, hover,

    fillRange, ... ) Gesture object { type: "drag", startContext: { time: 40320, row: 3, x: 1116, y: 245, }, ... } Raw browser events Apply gesture applyGesture( options, gesture, blocks ) MouseEvent KeyboardEvent
  6. @mirka ネイティブ級のマウス操作 作り込んだUI compose( selectRange, resize, drag, hover, fillRange, ...

    ) { type: "drag", startContext: { time: 40320, row: 3, x: 1116, y: 245, }, ... } applyGesture( options, gesture, blocks ) MouseEvent KeyboardEvent Gesture recognizer Gesture object Raw browser events Apply gesture
  7. @mirka ネイティブ級のマウス操作 作り込んだUI compose( selectRange, resize, drag, hover, fillRange, ...

    ) { type: "drag", startContext: { time: 40320, row: 3, x: 1116, y: 245, }, ... } applyGesture( options, gesture, blocks ) MouseEvent KeyboardEvent Gesture recognizer Gesture object Raw browser events Apply gesture
  8. @mirka ネイティブ級のマウス操作 作り込んだUI compose( selectRange, resize, drag, hover, fillRange, ...

    ) { type: "drag", startContext: { time: 40320, row: 3, x: 1116, y: 245, }, ... } applyGesture( options, gesture, blocks ) MouseEvent KeyboardEvent Gesture recognizer Gesture object Raw browser events Apply gesture
  9. @mirka 同期&⼝頭 から ⾮同期&⽂章 へ Sync → Async
 Verbal →

    Written リモー ト組織のポテンシャル オフィスでの働き⽅を オンラインで再現
  10. @mirka WITHIN AUTOMATTIC COMMUNICATION TOOLS 1:1 Pair coding Team call

    ⼤事なこと 残しておくこと 流れてもいいこと プライベートな会話 同期性が⾼い ⾮同期
  11. @mirka Fei Wong Jessie Fortman Event supplier contract Reply Follow

    Like • デザイン考察 • 新機能の計画 • 契約書の確認願い • 新しいプロセスの提案 • 質問、意⾒、感想 • 完了報告 投稿の例 コメントの例 FEED
  12. @mirka Fei Wong Jessie Fortman Event supplier contract Reply Follow

    Like FEED @Fei Wong #contracts • デザイン考察 • 新機能の計画 • 契約書の確認願い • 新しいプロセスの提案 • 質問、意⾒、感想 • 完了報告 投稿の例 コメントの例
  13. @mirka Fei Wong Jessie Fortman Onboarding tasks Contributors • FAQ

    • オンボーディング • ドキュメンテーション ページの例 WIKI