4 Designs I Made for Image Export

Few hours ago, I released the 1.1 version of OhBoard. This update was exclusively dedicated for a frequent request: save canvas into image. I put a lot of thoughts into the user interface of this feature, because I thought this particularly will be something that people use very often in the future. So, it was crucial to get it right.

My ultimate goal was not only to keep it simple, but make it useful. I did’t want to blow off this great addition by inserting complicated procedures, I rather chose the most convenient route. I’d like to share with you today the direction I started from, the final results I ended up with, and everything in between.

Here’s the initial design:

Note: the overlay is activated when you click the Export button.

What I thought about this design:

  • The overlay mask was too light, I feared potential users will be distracted from what they are supposed to do.
  • The border of the image was also too light. I wasn’t sure if people can realize immediately that’s the image they should save.
  • The explanation text was small for first-time user. They might not directly pay attention and don’t know what to do to actually save the image.

Second iteration:

What I thought about this design:

  • The mask/border color now looked natural and not distracted.
  • The explanation text was now bigger, but I still felt like it needed to be more visually appealing.
  • The cancel button was kind of off-balanced, and lonely on the side.

Third iteration:

What I thought about this design:

  • Adding the highlight was a big difference visually, so the explanation text was all good for now.
  • Didn’t really buy into the dashed border, that still couldn’t show users that’s the image they should save.
  • Took away the whole cancel button and only allowed users to hit esc or click outside of the dialog. But felt like not every user are going to like keyboard shortcut or moving the mouse out of the dialog.

Fourth/Final iteration:

What I thought about this design:

  • Changed back to solid border, but with a darker color. Now it looked like a real image container.
  • Added a link for cancel with a lighter color. And gave a “hit ESC/click on the mask” title which essentially serves as a little tip for users who want advanced controls. It took care both sides of people.
  • Just felt right.

Overall, I think this is a great process. I will continue to make little improvements to the user interface as I use OhBoard even more heavily. And let me know in comments any feedback that you have about the design!

If you are interested in keeping up with OhBoard and Stephen, subscribe to the blog & follow on Twitter!

More in Behind the Scene (5 of 8 articles)