How to provide a more fluid and scalable UI with new added features
- to adopt a similar mental model to DSLR camera operation: switch between commands and actions, instead of showing all buttons and UI at once, prioritize and group functions.
How to make widgets more accessible and efficient
- to lower the learning bar to understand the UI, focus on user tasks to simplify the flow. Learn from mobile camera apps, simple WYSIWYG model while still powerful with advanced settings
IA StructureModes: Record or Time-lapse, Capture Preview and Video FeedSettings: The camera has Setting Profile, difference between auto and manual modesViewport: View of All / Individual Camera Modules: naive stitch, list, side by side
Design IterationsIteration 1:My first iteration is to design the button group, which helps prioritize functions. But the introduction of modes is making design more complicated. The coupling relationship makes users more confused with the view and action dependency. Also the location of the customization view is not scalable, and taking up the valuable screen space. Iteration 2:For the next iteration, I tried to have the left sidebar showing the default parameters while expanding to edit: powerful but also too complicated, not mapping to camera controller mental model. Live feed as a separate way to streaming views, is designed with more visual emphasis to encourage user interaction to try it out.Iteration 3:While research and keep trying out different layout, it's critical to remember the base principle of balancing simplicity with being powerful. Then I introduce the toggle control of camera settings to allow for hide / show components.