4

I'm making an image editor app for phones with touchscreens. It will have tools that are similar to related desktop applications like brush, pencil, rubber, mask, smudge, crop, text etc. tools.

For a fluid workflow, I think these are important:

  • on small screens especially, most of the space on the screen should be dedicated to the image editing area and things like toolbars.

  • the user needs to be able to quickly switch between certain tools with minimal fuss. I imagine being able to quickly shift between the brush and eraser tool and being able to quickly press undo/redo would be important when drawing something for instance.

I think GIMP and Inkscape's toolbar based interface work well for these kinds of applications but there's just no room for huge toolbars on small screens.

I already have a toolbar at the top of the screen that has room for about 7 or 8 shortcut icons including the basics like undo and redo as this seems like a simple way to give one click access to operations. Without making the toolbar huge, there's only enough room for a handful of other icons.

I'm looking for ideas on how to make the best use of this space.

Some ideas I've had:

  • Make half of the toolbar horizontally scrollable so you can swipe left/right to make other tool buttons visible. This seems fiddly and hard to discover and isn't great if you regularly use one tool that appears on the far left and another on the far right.

  • Reduce the number of tools by combining some. For example pencil and smudge become configurable modes of the brush tool. This can be unintuitive in some cases and introduces extra steps to switch between pencil and brush mode (but if this is rare this isn't a big deal).

  • Allow the user to change which tools appear in the toolbar so the user can decide which tools they can switch between quickly. For example by double tapping an icon they can be shown a menu that lets them swap the toolbar button for another tool. This has similarities to the previous point.

Is there anything obvious I'm missing?

Improve this question

3 Answers 3

Reset to default
2

I think the most important thing when working on images on mobile screens is screen real estate. You want more image and less UI so that you can see the fine details you are manipulating. So I propose that you pack them all in as much as possible.

Here is a quick mock up of one solution:

The button is in the lower left and the screen is clean. They can pinch to zoom in and out.

Button in lower left

Tapping the Tools icon, brings up the nav of all the tools. Note the dark triangle on #3, this indicates that more tools are hidden there. Tapping and holding the icon would bring you to the 3rd ss that shows more tools.

Tapped brings up nav of tools

2nd nav

Image editing requires lots of precision work and seeing those changes are the most important.

Improve this answer
5
  • I think you're right - but your solution has one major problem: You always cover the same spot of the picture; you'll never see that spot. I guess that's why you can't avoid having some sort of toolbar.
    – Phil
    Jun 7, 2011 at 18:40
  • 1
    The user can tap and drag around. Or perhaps if you tap and hold the tools button it becomes draggable.
    – jonshariat
    Jun 7, 2011 at 18:57
  • +1 Ok, convinced ;) This could work and give you maximum real estate. Maybe you could even fade out the button after a few seconds.
    – Phil
    Jun 7, 2011 at 19:06
  • Thanks for the mockups. One big problem with hiding everything behind one button though is it requires more effort to change tools. If you want to switch between a brush and eraser for instance you've got to perform some extra clicks compared to having buttons for these tools always being visible. I don't think there's any easy answers here though and you've just got to pick between screen space and speed.
    – jcdnton
    Jun 8, 2011 at 0:15
  • Indeed, but I think screen space > speed to tools. I think most users wold agree. If you cant see, you cant see, but a few clicks for a tool you are going to use for a minute or two isnt bad.
    – jonshariat
    Jun 8, 2011 at 1:27
1

Two more ideas:

1.) Make one button that opens a layer with all tools. Something like that (but with you tools instead of buttons of course):

enter image description here

2.) Make a "drawer" to pull out. Something like the android notification bar: Android notification

Or the Google iPhone app:

Google App

Personally I think the 1.) probably works better. And of course it's preferable to have all tools available all the time but you have to set priorities with limited space.

Edit: Did you take a look at Photoshop for iPhone? It could maybe even be reduced to one toolbar with the most used 3-4 tools plus one button for the rest of the tools. Here's a screenshot (I think it's an outdated version, but the principle didn't change):

enter image description here

Hope that helps, Phil

Improve this answer
1
  • Thanks for your time. I'm actually happy with hiding several tools behind one button but I think some tools like the brush and eraser should always be available with one tap. So I could have a brush, eraser and "other" tools button, although I'm not sure about giving the first two special status. That's why I thought it might be best to allow the user to customise which tools are available within one tap.
    – jcdnton
    Jun 8, 2011 at 0:19
0

Spend $30 and grab dozens of apps from the app store and try them out. Personal preferences off the top of my head:

Image editing UIs I like:

  • camera+
  • TiltShiftGen
  • artRage

Others to consider:

  • photoForge
  • photoForge2
  • TouchRetouch
  • PhotoWizard
  • Iris
  • PerfectPhoto
  • Brushes

and many others...

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.