Kineto UI

pKineto#ui §

• It seems important to pay attention to the discussion about Apple Pencil and Dominant Hand.

  • Where to place the menu for notes and the menu for videos.

• At iOSDC2020, there was a discussion about being able to change the UI based on the orientation of the screen.

  • For example, YouTube goes into full-screen mode when in portrait orientation.
  • Kineto might also benefit from this, as there is no need to display the video in full-screen when in portrait mode.
    • What should be placed in the lower part of the screen?

• Finding Fundamental Principles in UI Design

  • It seems especially important to consider this when creating innovative UI.

• It might be a good idea to incorporate the concept of pagination.

  • axokxi also mentioned this.
  • If it’s the same page, keep it in sync.
  • This could be implemented using video processing.

• It is desirable to separate the operations for seeking and moving.

  • It would be great to generalize this.#ui design is about finding fundamental principles.

• How to perceive the app:

• “YouTube with synchronized interaction” OR "Zoom with time manipulation"

  • It would be better for users to perceive it as the latter.
  • Thinking of it as “having control over one’s own timeline” requires less thinking and is more enjoyable.

• However, it would be nice to have a way to convey whether you are truly synchronized with others.

  • Something like an IPPON-like UI?w
  • I want to express a vague “presence” or “atmosphere” through the UI.

• A fullscreen mode (meaning only the video is on the screen) might be necessary.

  • 
  • It would be nice to implement it in a way that the UI appears when you interact towards nothingness.

• Concentration mode

  • Show only the chat and the content written with the pen.
  • Display the time control bar faintly.
    • Dragging it brings it back to the normal mode.

• Normal mode

  • Show everything.
  • If there is no touch (except for the pen) for a few seconds, switch to concentration mode.

• When the size of the video is adjustable, it is unclear how to design the UI.

• Type UI and Software Keyboard

  • When using a fixed keyboard, use portrait mode.
  • When using a floating or software keyboard, use landscape mode.
  • Both should be used.
  • Like this:
    • 
    • Above the keyboard:
      • Place the reset button and emoji button.

• Kineto Whiteboard sticky notes

  • It seems that a sense of synchronization can be conveyed by varying the amount of text.
    • However, it might be too noisy, so it’s a dilemma.
  • It could also be applicable to something like moving rapidly in a YouTube live video.

---

Miscellaneous notes below:

• UI for controlling the playback position of the video

  • Is a seek bar UI like YouTube not suitable?
  • Relative control of the video playback position
  • Drag the bottom of the screen to move the playback position
  • Demo (minimum required implementation)

• Classroom screen

  • Desired information
    • Other people’s notes
    • Classroom video
    • Synchronization
    • How far behind you are
    • Where other people are
      • Does displaying this make people aware that they are not synchronized?
      • Consider displaying it anyway
  • Desired actions
    • Control the playback position of the classroom video
      • If the resolution is increased:
      • Instantly jump to the part you want to review
        • It would be nice if you could perform an operation that jumps instantly and then returns immediately.
      • Uniqueness of the classroom video
        • Rather than jumping instantly, you are moving to seek specific information
        • Other video examples: YouTube, sports broadcasts, news programs, music videos
        • Seeking information rather than scenes
    • Seek
  • Other peculiarities
    • It would be nice to be able to operate in the state of holding a pen
    • It would be interesting to have a visual effect that gives the impression that time is rewinding
    • I want to solve the issue of overlapping elements with UI
    • The bottom right of the screen is difficult to use because of the pen

• Questions (It seems good to define the UI through questions and answers, and conduct A/B testing if there are any unknown points)

  • Should the bar be displayed from the beginning to the end of the class?

    • There is room for consideration.

  • How should information about other students be displayed?

  • How should the screen be occupied?

    • I want to use the small spaces at the top and bottom for time manipulation, similar to Apple’s native Photos app.

  • What do we want users to experience?

    • Ideal- Without considering synchronization, one can freely attend classes and eventually become synchronized without realizing it.

• Places where it has an impact:

  • It’s difficult to return now because the class is about to end.
  • Similar: The person who says it’s too late.
  • Move little by little to be able to synchronize.

• In other words, it would be nice to elegantly impose restrictions on actions and have the above-mentioned impacts.

• Actually, having an obvious YouTube-style UI might not be right.

  • Isn’t “Zoom with time manipulation” more interesting than “YouTube with synchronization”?
  • Be conscious of giving a sense of synchronization.
  • Make it look like a TV-like UI to make it more like traditional linear video streaming.
  • If you have a bar, it might be better to make the center of the bar yourself, making it more self-centric.
  • It might be similar to driving, like [ SmartPlayer: User-Centric Video Fast-Forwarding].
  • Are there any other metaphors like that?
    • Running?
      • It’s the same in that the playback speed is influenced by the position of other people.
    • Reading, maybe?
      • Even in an asynchronous context, the UI of a book is very good, right?
      • But that’s not the same as YouTube.
      • Page turning.
      • Time Travel.
    • Other people’s positions are displayed on the bar, and you can sync with them by tapping.
      • (At least, even if it’s just nearby), it’s essential to know the position of others.
      • Think about how to display it neatly.

• Here’s an idea:

  • You can drag the bottom part to move it, and pinch out to change the scale.
  • I want to do the lines in a fractal grid-like way, like a map.

• Let’s go back to basics and describe the interactions that occur in text (like OOUI thinking). #kineto