The new forums will be named Coin Return (based on the most recent vote)! You can check on the status and timeline of the transition to the new forums here.
The Guiding Principles and New Rules document is now in effect.
User Interface - Button design for 'update'
cmsamo
Registered User regular
Registered User regular
I am working on some buttons for a GUI. The GUI is aimed at semi literate computer users (can use word, internet, excel, can send emails etc.). I've gone for a very simple design approach, just plain coloured buttons with simple white icons to indicate function.
One part of it troubles me. When users interact with an object on the GUI, they have 2 choices:
(1) save the details and close the item (it disappears and is written to database, never to be seen again)
(2) save the details, but leave the item open on screen so it can be updated later.
For (1), I have a green button with a 'disk' icon on it, to represent saving and closing
I don't know what to do for (2). I've tried an hourglass, a pencil, and a question mark, and thought about using a clock, but none of them seem immediately intuitively obvious as a "save and update" option.
All the other functions are very easy. I just can't think of a suitable 'save and update'.
Anyone got any ideas?
One part of it troubles me. When users interact with an object on the GUI, they have 2 choices:
(1) save the details and close the item (it disappears and is written to database, never to be seen again)
(2) save the details, but leave the item open on screen so it can be updated later.
For (1), I have a green button with a 'disk' icon on it, to represent saving and closing
I don't know what to do for (2). I've tried an hourglass, a pencil, and a question mark, and thought about using a clock, but none of them seem immediately intuitively obvious as a "save and update" option.
All the other functions are very easy. I just can't think of a suitable 'save and update'.
Anyone got any ideas?
cmsamo on
0
Posts
I'm just having trouble seeing how a green disc represents saving and closing, when a blue disc so often represents saving. Users familiar with MS Office would click that button to save and then wonder why it quit their program.
I could be reading it wrong of course.
i'd use a disk for choice 2, and something more final and unique - a tick mark, maybe - for the 'save and close' option
I've got the buttons as solid blocks of colour, with white icons over top.
For (1) I could put the disk on an orange background (since the object isn't closed/dealt with) - this would tell the user they are saving the state, but not closing...
For (2) Maybe I could put a trashcan on a green background to say "Yes, the object is dealt with, so dispose of it...?
Trashcan might work well, but it tends to make people think "delete" rather than "save and close"...
Hmm...
(1) green background, Disk with an arrow through a door. Saves and quits.
(2) Blue background, just the Disk.
I'd try to avoid using colours like orange in a UI or system with only two options, unless you want to add a third Red quit button.
Green for save, Orange for save and quit, Red for quit without saving.
my 2 cents, anyway.
it's hard to say without knowing exactly what sort of entries you're dealing with - but a trashcan would probably be misleading.
would a plus sign work? a tick seems best to me still though
Save and Close:
Save and Wait:
I was using Orange because Red seemed a bit too severe and I thought users might not click it. Blue is my other colour (used for less important functions that don't save or affect data, such as toggling window size, or magnifying a view) perhaps the save and update should be blue?
Save and Close:
Save and Wait:
Are these better than the first two, or do you think they are too complicated?
PS - the reason for the "blockyness" of these buttons is that they are for a touchscreen interface.
There are 2 windows - the user can swap their positions, and also double the size of the main window (it's video so sometimes they might want to make the videos bigger to see detail).
Another consideration I had was to try and make the GUI colorblind friendly. I'm pretty sure these buttons are not friendly at the moment...
Right now, just looking at your interface, I wouldn't really have any idea what the buttons are meant to do. The top right one looks somewhat like the maximize button, so I'd probably assume that it'd do that.
The X2 button really doesn't mean anything to me as a user in this context.
I assume the blue button with an envelope on it means email it to some one. But I can't be certain of that.
For the other two, I'd honestly get rid of the icons altogether and just use text. I'd probably also move them to the left somehow.
What exactly does this application do?
When they touch on the object, they get 2 video streams related to that object. The larger window is a close view of that object, the smaller window is a wide angle con-textural view.
Once the pop-up appears, the user has to classify it via a dropdown box, and add any relevant comments. When that is done, they can 'save and close' the object, or 'save and leave open' (for example if they may need to make further observations of that object, or add more comments later). These are conditions (1) and (2) that I explained above.
The popup window should also allow the operator to be able to email a snapshot from the videos.
It should also allow the operator to double the size of the video windows (if necessary) and also swap their locations (since you may sometimes want the context window to be the larger of the two)
PS - thanks for the feedback, this is exactly the sort of feedback I was looking for. I need to make this all so simple that to even a basic user it should be blindingly obvious what the buttons do, even if it's the first time a user has ever seen the interface.
Look at the window you're using, in the top bar that says "Form 1" The red X is "close", but when people click it they assume they will either be prompted to save, or that a saved state will be recoverable (because people are idiots and WILL assume that everything is always saved.) It's become so standard that it is hard to get away from. For your icons, you might want to make save and close red, possibly with an X on it, or an arrow below the disk icon to suggest the disk is being "ejected".
3clipse: The key to any successful marriage is a good mid-game transition.
What the best thing to do is, simply have a save button and an exit button. Keep track of whether or not edits have been made since the last save and if they have, prompt them for save when they close, perhaps with a second smaller modal.
"You have not saved the changes, would you like to do so before exiting?"
[save] [exit without saving]
Obviously from comments here I need to think more carefully about my camera switching and resizing too. I'll also rework the icons to add words to say what they are doing.
For your app I would highly recommend text buttons over abstract brightly colored images and ditch the notion of icons entirely.
This is what i was going to suggest. A disk with a red X behind it for save and close. Red x's mean close. And a green disk with a check for save and keep open.
As is, a green disk with a checkmark, to me, means save and close at first glance (because the checkmark means its good), but i have no earthly clue what disk with a question mark in it means. So id click the one with the checkmark and then be pissed that it closed.
But why dont you just use standard icons? If these people are used to working with Word and Excel and email, what makes you think theyll have the patience to learn a new interface, and one that honestly doesnt need to be different. Youre writing an interface to database entries, why cant you use the standard windows interface?
Check out my band, click the banner.
If they only have partial information, they may want to fill that info in, update the record, and close the popup, but leave the item on the map (so they can access it again later). This is the "save and keep open" portion, and it leaves the item on the map and writes the partial info.
I can't go into more specifics than that other than to say oftentimes, a user will need to keep an item open on the map for a period of time while they wait for updates, before they can finally save and close it.
This is what I've settled on thus far - Adding words to the buttons makes a massive difference. I think this makes quite good sense.
And if it's low-light conditions you want to use a darker colour for the background and more muted colours to prevent eye-strain.
Good thoughts about the contrast. I'll take a look see at what I can do about that
Windows does OK Cancel Apply in that order. Reversing it just confuses me. OK being the "Save and Close" function you're looking for, Apply being the Save.
Also the question mark in the save is very out of place.
Use green for save and maybe blue for save/close. Get rid of the orange/red shade because that sends the wrong signal to your user.
fuck up once and you break your thumb / if you're happy at all then you're god damn dumb
that's right we're on a fucked up cruise / God is dead but at least we have booze
bad things happen, no one knows why / the sun burns out and everyone dies
I completely agree here. I'm a GUI programmer and I get very, very critical when the specs I'm given break established conventions. They are conventions because they work (usually) and doing it differently tends to waste time and confuse users while they get used to the different functionality.
What's wrong with OK Apply Cancel? People know what they mean, so there's less chance for confusion. Add in your icons and colors for the touchscreen usability, but follow the wording conventions.
The word update is ambiguous in this context too. Does update mean read what's in the database and overwrite what's in the dialog, or does it mean update the database with what's in the dialog? The pencil helps of course, but Apply is better wording IMO.
You click on an icon on the main GUI. A popup appears. You see a picture. Either you know what it is, or you don't. If you know what it is, you choose an item from a dropdown, and you click "save and close". If you don't know what it is, you ask someone to go take a look. You then click "Save and Update".
Thanks everyone for the input to this thread, it's been very informative and useful. I think I've had enough input to know that my original ideas don't follow convention and I need to rethink