Camera plus - Framer.js
The project explores the possibility to add secondary camera controls in screen when hardware in handsets is ready. A marking menu pattern is prototyped as a solution in framer.js for micro-interaction design iteration and user testing.

Skill: Interface prototyping
Partner: Android Auto
Duration: 1 week
Time: 2015 fall


1. ISO adjustment


2. Focus adjustment


3. Back to default setting


Design background: 1 week exploration of micro-interaction and digital prototyping


I played around with marking menu pattern. The weightlessness of this pattern provides secondary pro-controls in a photo-taking task without covering too much space of the image.

The project deals with adding controls in a default camera App. My vision is that once the hardware cameras in handsets is ready, users would like to have more controls available on the screen when taking photos, i.e. shutter speed, ISO, aperture, focus etc.


Concept development


The micro-interaction has four steps: 
1. Hint the invisible marking menu
2. Activate the marking menu
3. Adjust the settings
4. Exit menu and display the adjustment


This mental model controls more than 2 settings and has the ability to quickly go back to the default setting. A click-wheel marking menu is introduced to host the variations. The menu shows up when and where the user touches the screen.

While both using vertical sliding to control, there is  the difference between an ISO value (a range of values) and a focus area(relative sense) in terms of how users perceive those settings. Thus, two variations are visualised according to the nature of the data.

Special thanks to Jorge Furuya & Paulo Coelho from Android Auto