34

A simple Google Image search will show a lot of icons related to "Undo & Redo", and interestingly, most of them, if not all are round. Take a look at the ones Microsoft Office uses:

Microsoft Office undo/redo

And some other from the Google:

Random Undo/redo icons from Google

The title says the question, but here's some more into it:

Why are undo/redo apparently standardized as curvy/round arrows?

Isn't rewind associated with a straight arrow pointing left and forward associated with one straight arrow pointing right? Why is Undo/Redo different?

And to finish, if I make my undo/redo icons straight arrows, is it less understandable?

No one of my 5000 users has really complained about it yet, but one of them suggested me to make it curvy and it got me thinking.

Here's a quick screenshot from my app to give some context:

Pixly app

Improve this question
8
  • 27
    In the context of your user's request, it actually doesn't matter why they're curved. Rather it matters that they are curved in nearly every other context. So for your buttons to have the same meaning, you likely want to match the accepted norm.
    – DA01
    Aug 27, 2015 at 16:04
  • 25
    Yes, L/R arrows have a different purpose... for navigating between items. Don't use them for undo/redo when existing icons are already well-established. Why are you forcing innovation?
    – HC_
    Aug 27, 2015 at 16:55
  • 6
    @HC_ I'm not forcing innovation, I just inadvertently made them straight, and never gave a thought to it. When one of my users noticed and suggested me to change it, I decided to have a deeper thought on why the standard is this way. I'm surely going to change them to curvy arrows now that I realize this design is already well-established.
    – Gustavo Maciel
    Aug 27, 2015 at 17:02
  • 3
    @GustavoMaciel Good choice IMO -- the less thinking a user has to do, and more defaulting to previously-understood standards, the better/easier the experience generally is.
    – HC_
    Aug 27, 2015 at 17:06
  • 5
    IMO it indicats a U turn. Undo is a U turn backward, redo is a U turn forward. It indicates that you are returning to a place you've already been, either forwards (redo) or backwards (undo). The refresh button being a near circle indicates that you are doing something and returning right where you started, neither forwards nor backwards.
    – Dave Cousineau
    Aug 27, 2015 at 20:34

5 Answers 5

Reset to default
39

I've done some search without any specific result, so I will answer considering usability principles and software history:

Legacy

The undo function was already here in the 70's but was not until the appearance and expansion of graphical interfaces and increasing popularity of desktop computers that it got its icon identity.

In those times the users didn't use a lot of applications, being the most popular the text processors. Without a doubt one of the most popular software of that time was Microsoft Word.

Take a look at its icon in 1993 : enter image description here

This is a common matter with icons (and other software components): they are very unlikely to change over time once they are established and recognizable for most users. This is the same reason why we keep using the QWERTY keyboard instead of one with another layout that allows better performance: Familiarity.
This allows the user to keep using new systems without any pain and allow companies to avoid a difficult question to answer: "Will they got this?".

Uniqueness

The straight arrows are used mainly for navigation and because of its simplicity can be used for many "movement" action, including the undo action, which allows getting back to the previous state of what we are editing.

But it doesn't work the other way around. Curved arrows are not used that frequently.

If you place a fully rounded undo button in a browser bar it could be easily be misinterpreted as a Refresh button since the icon is almost the same. So my recommendation in a context where a Refresh action could be possible in the mind of users would be to stay with something rounded but NOT fully rounded, to avoid users confusion. Of course, in specific context this won't be a problem while the appearance of the Undo icon remains as a clearly curved arrow. enter image description here

Improve this answer
10
  • 2
    I think the refresh button works in the same context as the redo button as by the logic I provided in my answer. You are essentially redoing the post to the server and then returning to the same place just at a different point in time. The user is still returning to the same point they started and not navigating away just like a redo button. Obviously you are correct you wouldn't want to use them in the same place but conceptually I think they're quite similar.
    – DasBeasto
    Aug 27, 2015 at 17:11
  • 8
    @DasBeasto: It's true that the refresh button "redoes" a certain action, but that is not what "redo button" means. A redo button is specifically for undoing a previous "undo". So conceptually they are actually quite different.
    – ruakh
    Aug 27, 2015 at 18:41
  • 1
    @Random832 I never said that that was the first undo icon, but one of the first appereances of the base icon today's undo icons are based on. See how I wrote "that it got its icon identity", identity meaning what's it's recognizable by.
    – Alejandro Veltri
    Aug 27, 2015 at 19:03
  • 1
    nice answer and well documented
    – Devin
    Aug 27, 2015 at 19:10
  • 4
    Why are you sorry for something which is not your product? The screenshot looks good to me.
    – justhalf
    Aug 28, 2015 at 6:54
21

I believe that it is meant to represent an analog clock, where the Undo function shows the time sweeping backwards, while the Redo shows the time moving forwards again.

Improve this answer
5
  • 1
    Creative ocurrence, although I think it's pretty unlikely that a designer would create an icon like this imagining that the average user (or even a advance one) could make the association with an analog clock.
    – Alejandro Veltri
    Aug 28, 2015 at 2:11
  • If this really were the reason, what will happen when analog clocks become obsolete and digital ones are the norm? No one will remember what the icon meant.
    – Arc676
    Aug 28, 2015 at 14:36
  • 1
    What happens in right-to-left languages? If you're right, you'd expect right to left languages to keep undo and redo pointing the same way, to continue matching clocks. If not, you'd expect them to point the direction that is "backwards" and "forwards" for a writer or reader. Anyone got Arabic or Hebrew MS Word or similar to hand?
    – user56reinstatemonica8
    Aug 28, 2015 at 14:48
  • 8
    @Arc676 : tinyurl.com/theSaveIcon
    – nsfnotthrowingaway
    Aug 28, 2015 at 16:13
  • 1
    @knoc Touché. Extremely well played. But I have a floppy disk on my desk and I intend to keep it and pass it on to further generations :D
    – Arc676
    Aug 29, 2015 at 10:17
19

I believe it is to differentiate between the "Back Button" and "Forward Button" which is commonly represented with a straight arrow.

enter image description here

Back buttons (and forward) represent and action that will navigate backward to a different place, i.e. the page that you were on previous to the current one.

The undo button is round because it is rolling back to a previous state but not navigating to a new place, it will return you to the same place just at a previous point in time. The 360 degree circle represents the user going back but returning to the same point they started at.

enter image description here

More Reasoning:

Seen here in Google's Bidirectionality Mirroring Guidelines: enter image description here

Sometimes, both the horizontal and circular direction of time are implied in an icon. For example, the redo and undo buttons in Google Docs have both a horizontal direction and a circular direction.

In LTR, these point to the same direction in both circular and horizontal representations of time. In RTL, choose whether to show circular or horizontal direction.

Also to provide examples per Weebles comment:

Tinder:

enter image description here

Font Awesome: (used on a lot of sites)

http://fortawesome.github.io/Font-Awesome/icon/undo/

enter image description here

Adobe Ideas Iphone:

NOTE: They appear to have the less rounded icons in some versions, I'm not sure if that's a newer/older version or desktop version but would be interesting to find out why they changed.

enter image description here

Improve this answer
3
  • yes, this, distinguishes from the back button. With undo you're not just going back, you're sort of picking something up and putting it back where it was. So round seems natural.
    – the other one
    Aug 27, 2015 at 15:38
  • I would not recognize the round icon here as an undo icon. I would interpret it as a refresh icon. Can you provide any links or screenshots to show its use in applications to mean undo? I like your idea of "coming back to the same place", but I don't think any of the undo icons I'm familiar with actually do that.
    – Weeble
    Aug 28, 2015 at 9:51
  • 1
    @Weeble Ok I added couple examples I found as well as some more reasoning I found in Google's guidelines.
    – DasBeasto
    Aug 28, 2015 at 12:11
7

The undo button is commonly styled as an arrow going back on itself. If you've ever taken a wrong turn at an intersection, the first reaction would be to do a U-turn and go back to the intersection to try again. The redo button would presumably be styled as just the opposite of undo. It basically is a U-turn button. Straight left-or-right buttons can easily be confused with previous page / next page. It's only used in web browsers where it can be confused with the refresh button (a 360, so you come back to from whence you came, but still similar enough to be used accidentally).

Improve this answer
5

The idea behind those icons is to visually represent a thing coming back in a circle. Now the icons were mainly popularized by Microsoft as they became mainstream with the popularity of its office package. From a usability perspective the icons are not that bad but you have to accompany them with labels that clearly spell out the word "Undo" and "Redo." Otherwise, they become difficult to notice and kill the UX.

In fact, Apple doesn't have the two icons in its popular iWork suite and uses captions to describe "Undo" and "Redo."

enter image description here

Improve this answer

Your Answer

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

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