UI Design - Undo/Reload button conundrum

Initially the red button icon was there to alert the user that they can “RELOAD” the original graph data. The “clockwise” motion indicates “reload” in my view.

As things progressed, I decided to implement a single UNDO scenario, and thought “why not use the same button”?

Programmatically this works fine, except that now UNDO looks not necessarily correct. Undo should look anti-clockwise?

The example above shows at the bottom, a mirror image of the red button (anti-clockwise).

So, the question is, which one to go with?

Because the original symbol is “Refresh” and not “Redo” you cannot use the same symbol.
But yes, traditionally for LTR locales, Undo is anti-clockwise or facing left, and redo is clockwise or facing right.

But no, you can’t use the same symbol as refresh.


If you switch to what Jeff suggests for a refresh symbol, you can use the original refresh symbol for redo, and the mirrored for undo :slight_smile:

what I use is the UNicode symbol &U267B for “recycle”

[quote=420529:@Tim Parnell]Because the original symbol is “Refresh” and not “Redo” you cannot use the same symbol.
But yes, traditionally for LTR locales, Undo is anti-clockwise or facing left, and redo is clockwise or facing right.

But no, you can’t use the same symbol as refresh.[/quote]

It’s not “Refresh”, It’s Reload. But same thing though.

Let’s say that I have no space, or not want to introduce another icon. Yep. Just saw Jeff’s suggestion. That one still looks anti-clockwise but better.

Maybe I have to change the icon with code depending on the cicumstance - it may not be that simple.

Yeah, I’m not sure about that one Dave. I’ve pretty much tried to make a single icon as reload/recycle/undo. Selecting the control key will change the function, but the icon itself won’t change.

There must be a better way out.

You don’t have to introduce a new icon, but you cannot have two completely different meanings with similar symbols like that. You only need to change the reload symbol to the circular symbol Jeff suggested. When the reload symbol is distinctly different from undo like that, you will be able to use the anti-clockwise arrow to mean undo. For extra clarity, you should probably mirror the circular symbol so that it goes clockwise as that’s the expected direction for reload/refresh.

Do not do that. Symbology should never change, it’s a language.

Do not do that either. Check with the Apple HIG about UI consistency and clarity. Hiding functions with “hold this key” impedes discoverability and makes your UI more difficult to use.

Yep, but Jeff’s icon indicates anti-clockwise (undo).

I think I need a more “indeterminate” icon that can represent both.

Undo is an “undo this action” action. Reload is an “update the data”. You can’t represent both with similar symbols, they are completely different actions. It sounds like you have them on the same button, which is even worse.

The only case in which it would be appropriate would be if undo button was to undo the reload the data action. At which point the user has stagnant data, which I would assume your app doesn’t do…?

Well, it sort of is like stagnant data.

CTRL+Red Button reloads the original unedited data. (easier that closing and opening the file again). Selecting the button without CTRL simply undoes the last edit made to the graph.

To me the function is fine, but the representation is not.

IMPORTANTLY, any saved changes made to the graph are never finite. The user can ALWAYS reload the original graph data. It’s a safety thing.

Ah, okay. If the undo is specifically related to the reload data then a keydown alternate for undo and swapping the symbology may work for this case. If the undo is only for the reload data then you could use the same icon mirrored as well. Be sure it’s documented somewhere :slight_smile:

What about redoing the undo after a refresh? :stuck_out_tongue:

That’s up to him, he said he didn’t want to add another button.

Yeah, it’s a tricky one.

I know I’ve gone about this in an “arrrse-about” manner, but it’s the way I wanted to do things from the very beginning.

It was essential that the “original” data cannot be lost.

So when the user creates the graph, it is saved in a “secret” location :). No filename is required either, it has a time/date stamp. The user can edit the graph willy nilly, it has one level of undo. If they screw up, the the original can be re-loaded. The original data is NEVER changed or lost. This relieves the user from having to think about making a backup. Simple, Easy.

The ICON that represents that, is in question. Maybe something more ambivalent? There must be a more appropriate icon, and that’s what I’m asking here.

Perhaps your terminology is slightly off?

Does this accurately describe the functionality?
[Anti-clockwise] Revert to original data
[Clockwise] Reload newest data

If there are no other options, I think the symbology is correct.

And I won’t be adding another button.

I go by this philosophy: Every and any step introduced into a procedure or system, programming or otherwise, introduces another potential point of failure, just by being there.

So best be careful about the steps, and try to drill down into what is only “necessary” to make that system work effectively and efficiently. For the User or the Developer.

Whats the difference between ‘reload newest data’ and ‘load data’?
Still feels like a fundamental concept issue here.

On the one hand you have the function ‘discard the settings changes’
And at any time ‘refresh the data based on what the settings look like NOW’ (which could be the originals)
The user doesn’t know you kept a sneaky copy of ‘what it looked like with the original data’

At any time , you can refresh the data based on the settings I can see
And 'put the settings back the way they way’ (plus possibly refresh the data based on the settings)

Those actions don’t belong on one button.
It’s understandable, but - I cant help feeling you are justifying this because you don’t have much screen estate and you don’t want to lay out the screen again.

A live refresh solves the problem.
When a setting is amended, refresh the graph.
If the settings are reverted, refresh the graph.
So you only need a ‘revert’ button

(If you don’t want to refresh on every keystroke, use a timer set to 1/2 a second, and don’t refresh if no changes have been made)

Yeah, there is a certain amount of truth to that. But I do have enough screen estate:

Down the right hand side are the graph editing icons. It’s not finalised, and I made sure to leave space for other potential un-forseen icons.

Perhaps this is the “un-forseen” case where I need to add another icon. Perhaps I shouldn’t have said “And I won’t be adding another button.” Seems like adding another button may be the best way forward afterall.

I don’t want them both red though - or should they look the same except one in a mirror image. Complications, complications perhaps. Clarity is best.