Kineto UI (axokxi Comment)

Kineto UI#pkineto Kineto UI 2020/11/29

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

  • Where to place the menu for notes and videos
  • (axokxi) Procreate allows switching between right-handed and left-handed UI

• At iOSDC2020, there was a discussion about changing the UI based on the orientation of the screen

  • For example, YouTube switches to fullscreen when in portrait mode
  • Kineto could also do something similar, there is no need to display the video in fullscreen when in portrait mode
    • What should be placed in the bottom section?
    • (axokxi) It would be nice to switch between features available in fullscreen mode and features available in non-fullscreen mode
      • For example, annotations could be available only in fullscreen mode, while precise time control could be available only in non-fullscreen mode
      • Personally, I feel that the more elements are visible, the less concentration there is. In a classroom setting, a Grammarly-like UI would be ideal.

• Finding Fundamental Principles in UI Design

  • It seems important to be conscious of this when creating innovative UIs

• It might be good to incorporate the concept of pagination

  • As mentioned by axokxi
  • If it’s the same page, keep it in sync
  • This could work well with video processing
    • (axokxi) People who edit videos have a deep understanding of the structure and composition of videos because they see the sequence breaks. It would be great to provide a similar experience to the viewers. However, in this case, the purpose of the video should primarily be effective information transmission.
    • (axokxi) Another intention is to clearly mark where the pen disappears. Otherwise, there will be no cohesion when reviewing the video later.

• It would be nice to separate seeking and navigation as different operations

  • This should be generalized in UI design#finding fundamental principles

• How to perceive the app:

• “YouTube with interactive synchronization” OR "Zoom with time control"

  • It would be better for users to perceive it as the latter
  • Thinking of it as “having control over one’s timeline” requires less mental effort and is more enjoyable
  • (axokxi) When there are already created lessons (e.g., slides for a 30-minute lecture), I think having an overview of the entire lesson can provide a better understanding than what is possible in a physical classroom. Zoom is based on “recreating real-life situations (meetings)” in an app, so we want to go beyond that.
  • (axokxi) When thinking from the perspective of “Zoom with time control,” how should archived videos be viewed?
    • Perhaps purely pseudo-synchronized?

---

Miscellaneous Notes

• UI for controlling video playback position

  • Is a seek bar UI like YouTube not suitable?
  • Manipulating the relative video playback position
  • Dragging the bottom of the screen to move the playback position
  • Demo (minimum required implementation)
    • (axokxi) The seek bar doesn’t provide any information other than “time.” I would like to have a UI where various information can be seen at a glance.
      • The current amount of information is just right for devices the size of an iPhone, but if it’s being used on an iPad, more information can be added through colors, divisions, etc.
        • (pages, annotation positions, time control positions, etc.)

• Classroom screen

  • Desired information
    • Other people’s notes
    • Classroom video
    • Synchronization
    • How far behind one is
    • Where other people are
      • Does this make people conscious of the lack of synchronization? Consider displaying it anyway.
    • (axokxi) Information about how pseudo-synchronization is achieved and similar details might clutter the screen and may not be necessary information that users want to see. It should be fine to show it after going through some sort of interaction.
  • Desired actions
    • Control the playback position in the classroom video
      • When increasing the resolution:
      • Quickly move to the part you want to review
        • It would be nice to have the ability to quickly move and then immediately return to the previous position.
      • Specificity of classroom videos
        • Rather than focusing on a specific moment, users are seeking specific information.
          • Other video examples: YouTube, sports broadcasts, news programs, music videos
        • They are seeking information rather than scenes.
    • Seek
  • Other specificities
    • It would be nice if the UI could take into account the fact that the user is holding a pen.- In terms of enjoyment, it seems interesting to have a time rewind effect.

• I want to solve the issue of overlapping elements in the UI.

• It is difficult to use the bottom right of the screen because I have a pen.

• Questions (It seems good to define the UI through Q&A, and if there are any unclear points, conduct A/B testing):

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

    • There is room for consideration.

  • How should the information of other students be displayed?

  • How should the screen be occupied?

    • I want to perform time manipulation in the small spaces above and below, similar to Apple’s native Photos app.

  • What do we want the user to experience?

    • Ideal scenario:
      • Without thinking about synchronization, the user freely attends the class and suddenly realizes that they are synchronized.
      • Areas where impact is felt:
        • When the class is about to end, it may be difficult to go back to the beginning.
        • Similar to: “You are too late.”
        • Gradually move to synchronize.
    • In other words, it would be nice to elegantly impose the above-mentioned impacts with some limitations on the functionality.
    • Maybe having a blatantly YouTube-style UI is not the right approach.
      • Is it more interesting to have a “Zoom with time manipulation” rather than a “YouTube with synchronization”?
      • Be conscious of providing a sense of synchronization.
        • Make the UI similar to a TV to resemble traditional linear video streaming.
      • Even if we include a bar, it might be better to make the center of the bar focus on the user.
      • It might be similar to the feeling of driving, like in the [<Paper Log> SmartPlayer: User-Centric Video Fast-Forwarding].
      • Are there any other metaphors?
        • Running?
          • It is similar in the sense that the playback speed is influenced by the position of other people.
        • Reading, perhaps?
          • Even in an asynchronous setting, the UI of a book is very well-designed.
          • But that is not necessarily the same as YouTube.
          • Page turning.
          • Time manipulation.
      • Show other people’s positions on the bar and tap to sync with them.
        • (At least, knowing the positions of nearby people is essential.)
        • Think about how to display it neatly.

• Here are some ideas:

  • The bottom area can be dragged to move, and pinching out can change the scale.
    • I want to use lines that resemble a fractal grid on a map.