I'm struggling with an UI issue, so I'm hoping to receive some advice from
you. Imagine a textprocessor (i.e. Word) application in which you can edit
both text and image objects. The interface is clean and simple, only the
most needed functions are available in this app. An advantage of the
limited amount of functions is that they all fit in one toolbar without
cluttering or being miniscule. This toolbar contains a group of buttons
that can change image objects (crop button, rotate, transparency ...) and
a group of buttons that can change textareas (textcolor, bold, italic ...)
So far the introduction. My trouble is that I can't decide what to do with
the image buttons(group) when a textarea is selected and the other way
around, what to do with the text buttons(group) when an image object is
I've got two options:
1) Disable the buttons(group) which cannot be used because of the type of
object selected. This means, grey out the text buttons(group) when an
image is selected.
2) Completely remove the buttons(group) which cannot be used because of
the type of object selected.
I know that letting the system remove/show UI elements is generally not
good practice as it will lead to an inconsistent UI and a 'jumpy' UX of
the UI. But, greying out buttons may just as well be confusing for the
end-user. "Why is this grey?", "How can I enable this button? I need this
button!" are just some questions I recon the user may have when the system
greys buttons by itself.
Now, I know I've said that I've got two options, but if you have a better
idea that's very welcome too ofcourse ;)
Just a last one to think about: maybe I can grey them out and then have a
tooltip (nicely designed and usable) that says "Text editing buttons are
not available when an image is selected." I don't like UI's that can't
explain themselves and need tips like that. However, in this situation it
just might be a solution.