I am working on a web app that offers a set of photo filters. I want to offer as frictionless an experience as possible and minimize the number of clicks / actions required for the user to perform their desired tasks.
Let's assume my web app offers two tools:
- Sketch Tool: which transforms your photo into a sketch
- Erase Background Tool: Which erases the background of your photo
In the traditional Adobe-like paradigm: you'd click on a filter tool, then a dialog with the available filter settings would pop up, then you'd click OK and the filter would be applied on the photo.
I wish to avoid all these extra steps and have the button immediately apply the filter when clicked in a single step.
I was wondering then, what would be the best way to allow the user to change the tool's settings?
I thought of three options:
- Global settings dialog: A user can access settings for all the tools in a single, global settings dialog by clicking the gear icon. My web app only offers two tools (might offer up to 4 tools in the future) by the way.
- Contextual settings dialog: When the user hovers over a tool, a small settings (gear) icon appears on top of the tool. If the user clicks on that icon, the tool's settings dialog appears:
- Contextual settings snippet on hover: When the user hovers over a tool, a small snippet containing the tool's settings will appear right on top of the tool:
My first question is: Which one of the above three ways would you prefer, and most importantly, why?
My second question is: Do you think there is a better / more standard way to do this? and if yes, what would that be?
