KinetoのUI (axokxiコメント)

Last updated Unknown Edit Source

KinetoのUI #pKineto KinetoのUI 2020/11/29

• Apple Pencilと利き手の話、注意した方がよさそう

  • ノートのメニューと、映像のメニューをどこに置くか
  • Procreateは右利きUIと左利きUIを切り替えられる

• iOSDC2020で、画面の縦横によってUIを変えられるという話があった

  • 例: youtube（portraitにすると動画全画面になる）
  • kinetoもまさにそうかも、縦状態の時に映像画面いっぱいに出す理由はない
    • 下の部分に何を入れるか
    • フルスクリーン表示のときに使える機能とフルスクリーンじゃないときに使える機能を切り替えたい
      • 例えば、注釈はフルスクリーンのときのみ、時間の細かい操作はフルスクリーンじゃない時のみなど
      • 個人的には、見える要素の多さと集中力が反比例してる気がする、授業中はGrammarly的UIがいい

• UI設計は本来的な原理を見つける作業

  • これ、未踏的UIを作る作業なら特に意識したほうがよさそう

• pagination的概念取り入れるの良いかも

  • axokxiも言ってたやつ
  • 同じページなら同期
  • これを映像処理でやるの良さそう
    • 映像編集してる人はこういうシーケンスの区切りが目に入ってるからその動画（構成とか）に対する理解がだいぶ深いと思う、同じような体験を視聴者側にも与えたい
      • ただ、この場合動画の目的が大きく情報の伝達になってないといけない
      • 
    • もう一つの意図として、ペンが消えるとこをちゃんと区切りつけたい
      • じゃないとあとで見返したときにまとまりがない

• seekと移動は別の操作にしたい

  • これを一般化したい #UI設計は本来的な原理を見つける作業

• アプリの捉え方:

• 「同期対話できるYoutube」 OR 「時間操作できるZoom」

  • 後者としてユーザーには捉えてほしい
  • 「自分の時間軸が全て」と思っていた方が、考える事が少ないので楽
  • 既に作られた授業（30分スライドだけとか）があるとき、全体を俯瞰できた方が現実で受ける以上の理解が得られると思う（メタ的な知見）、zoomは「現実の場面（会議）をアプリ上で再現する」ことに立脚してるから、そこを超えたい
  • 「時間操作できるzoom」中心に考えるとき、アーカイブ見るときはどういうかんじに？
    • purely擬似同期か

以下雑記

• 映像再生位置の操作UI

  • YoutubeのようなシークバーUIは適していない?
  • 相対的な映像再生位置の操作
  • 画面下部をドラッグして再生位置を動かす
  • Demo (必要最低限の実装)
    • シークバー、「時間」以外何の情報も埋め込められてないのでもっと一目でいろんな情報が目に入るUIにしたい
      • iPhoneぐらいのサイズのデバイスだと今の情報量でちょうどいいけど、iPadで操作するのであれば色・区切りなど作ることでもっと情報入れれる
        • （ページ・注釈位置・時間操作位置 など）

• 授業画面

  • 欲しい情報
    • 他人のノート
    • 授業映像
    • 同期
    • 今どのくらい遅れているか
    • 他の人がどこにいるか
      • これは同期していないことを意識させてしまう?
      • まあ表示することも考えて
    • この辺のどう擬似同期になってるか、っていう情報は表示されるとごちゃごちゃするしそこまで見たい情報でもない気がするから、どっか操作を経た後で見れれば大丈夫だと思う
  • したい行動
    • 授業映像で再生位置コントロール
      • 解像度を上げると：
      • 見返したいところに一瞬移動
        • これ、一瞬移動してすぐ戻るみたいな操作できたらいいな
      • 授業映像の特異性
        • この一瞬、というよりはこの情報を求めて移動する
          • 他の映像イメージ: Youtube, スポーツ中継, ニュース番組, MV
        • シーンではなく情報を求めている
    • seek
  • その他特異性
    • ペンを持ってるからその状態で操作できると嬉しい
    • 楽しさ的なところで、時が巻き戻ってる的な演出すると面白そう
    • かぶる問題をUIで解決したい
    • ペンを持ってるから、画面右下は使いづらい

• 問い（問答でUIを定めていくの良さそう、分からない点があればa/bテスト）

  • バーは、授業の最初から最後まで表示するか

    • 検討の余地あり

  • 他生徒の情報はどう表示するか

  • 画面はどう占有するか

    • 上下の小さいスペースで時間操作をやりたい、Apple純正Photosと同じ形式

  • ユーザーに体験してほしいこととは

    • 理想
      • 何も同期性について考えず、自由に授業を受けているといつの間にか同期されている
      • 影響をあたえるところ
        • 授業がそろそろ終わっちゃうので流石に今から戻るのはきついよってやつ
        • 類似: 遅れすぎだよというやつ
        • 同期できるようにちょっとづつ移動
    • つまり、動作に制限をつけてエレガントに上記の影響を与えられれば嬉しい
    • てか、あからさまにyoutube風UIなのも違うのかも
      • 「同期もできるYoutube」より、「時間操作できるZoom」の方が面白い?
      • 「同期感」を与えると言うことを意識
        • テレビっぽいUIにすることで、従来のリニアな映像配信っぽくする
      • バーを出すとしても、バーの中心を自分にする感じの方が自分centricで良いかも
      • 運転感が近いかも、<論文ログ> SmartPlayer： User-Centric Video Fast-Forwarding
      • 他にそういうメタファーないかな
        • ランニング?
          • 他の人の位置に再生速度が影響されるという点で同じ
        • 読書か、やっぱ
          • 非同期のなかでも、本のUIはとても優れている?
            • でもそれは別にyoutubeと同じか
          • ページめくり
          • /ibjapanese/時間の移動
      • 他人の位置がバーに出て、それをタップでその人と同期できるとか
        • （少なくとも近くだけでも、）他人の位置がわかるのは必須だな
        • きれいに表示する方法は考える

• こういう案

  • 下のところをドラッグで移動できる、ピンチアウトすればスケールも変えられる
    • 線はmapのフラクタルグリッドっぽい感じでやりたい

#kineto