Designing a Timeline for Mobile Video Editing
80 points by buss_jan 10 months ago | 14 comments- sippndipp 10 months agoQuick Questions out of curiosity: What ideas have been rejected during the design process?
- computerfrank 10 months agoThere were a ton of different design variations! The differences were mostly in the details. The main requirement was to build a video editor that does everything that a video editor does, but as well as possible. And because this editor is designed to work within third-party apps that license the SDK, we wanted it to be well-designed but neutral, as easy to use as possible. One example of a rejected idea: We had played around with the idea of collapsing and expanding the clips when you scroll vertically in the timeline, like an accordion, but it turned out that traditional vertical iOS-native scrolling felt better.
- computerfrank 10 months ago
- djfobbz 10 months agoOverall, I love it! I tried to import an MP3 from OneDrive into the video editor; it showed that it imported, but on playback, there was no sound. However, I could clearly hear the sound in the import preview window. Then, I tried replacing it with a sound already included, and then replacing it back with my MP3 to see if that would work, but the app crashed.
- computerfrank 10 months agoThanks for sharing! We will have a look and try to reproduce the issue you’re seeing.
- computerfrank 10 months ago
- xnx 10 months agoI have not used this video editor. Are there specific UI innovations over other mobile videos editors like CapCut?
- computerfrank 10 months agoGreat question! The most important difference is probably that this is an SDK, which means that it can be built into all kinds of apps by other companies that want to offer video functionality.
There is a demo app on the iOS app store, check out the link in the article if you want to give it a spin!
- computerfrank 10 months ago
- sippndipp 10 months agoGreat insight for everyone who wants to design more complex UIs.
- mariuswies 10 months agoWish I knew some of these takeaways before I had to come up with a mobile timeline concept myself — nice article!
- nolist_policy 10 months agoBy the way, the Samsung gallery has a nice video editor with a timeline built in.
- blueboo 10 months agoThe phone form factor is yelling something at us and UX designers just can’t hear it.
Hint: We don’t spend our days scrolling horizontally
- computerfrank 10 months agoValid point! I agree in general. For timelines though, I believe that most people expect timeline user interfaces to be horizontal. Vertical scrolling may be more comfortable, but it clashes with existing mental models for video editing.
You’re right, it may be worth exploring a vertical timeline though, especially for more experimental video editing concepts! It would definitely be possible to implement with the IMG.LY SDK.
- computerfrank 10 months ago
- pavlov 10 months agoI’m curious why they chose SwiftUI. In my experience, this kind of highly responsive editor UIs are best implemented using immediate mode GUI techniques. A declarative layer like SwiftUI or React is often a hindrance.
The article alludes to these issues:
”All these gestures must behave as expected and not interfere with each other. We found it unexpectedly difficult to fine-tune and harmonize these interactions with pure SwiftUI, so we used some proven legacy iOS techniques to get it right.”
The use of the word “legacy” kind of sounds like they went with SwiftUI simply because it’s the newest thing rather than through an evaluation of implementation strategies…
- worstspotgain 10 months ago> they went with SwiftUI simply because it’s the newest thing rather than through an evaluation of implementation strategies
Not that it applies to this project, but in my experience, this is one of the plagues of the lower-paid engineering team.
On the books it looks like the company is saving money by hiring on the low end of the salary scale. In practice the budget is spent inching away at minor upgrades, while enthusiastically adopting new techs for experimentation and resume-padding purposes.
- computerfrank 10 months agoHi! I wrote the article.
Excellent question! You are right, we definitely did not choose to implement it in SwiftUI because it’s easier than it would have been with UIKit.
Our main concern was to build a future-proof solution for our SDK customers. Apple has repeatedly made clear that they consider SwiftUI the future of UI development for their platforms.
Even though we were not able to implement the whole timeline experience without falling back to UIKit techniques, we think the result was worth the extra effort. For example, it is very flexible in terms of appearance and theming, including sizes, colors, animations, and behavior.
- 10 months ago
- worstspotgain 10 months ago