How to represent 'random' with an icon

Question

I've seen many times an icon to represent "random" that looks like this:

But does anyone else feel this icon is awkward?

I can understand what it wants to express, but it's just not that straight forward. People have to think about it to really understand what it's referring to.

What would be another alternative to this icon?

Answer 1

I also find the crossed-arrows icon to be awkward. While working on a music app, I needed an icon for a "play random song" action. I considered the crossed arrows but didn't use it because:

1. I just don't find it intuitive - it doesn't express a "random" action to me, and
2. If anything, I associate this kind of icon with a random mode, rather than a random action. That is, there is a sequence of things happening (e.g. songs), and pressing this icon will select a playing mode where every successive song is chosen randomly. I just wanted a one-time random song.

I was browsing wikipedia on my phone and saw their "random article" icon, which is a dice. That seemed perfect for my situation, because it's intuitive, easily represented in an icon, and implies a one-time action initiated by the user.

You can see the icon in situ by going to the mobile Wikipedia site, then opening the sidebar menu via the 3-bars icon in the top left: http://en.m.wikipedia.org/wiki/Main_Page - here's a screenshot:

And here you can see the dice icon in my app (I re-created it):

Hope that helps. I'm happy to share the Illustrator file of my version of this icon if you would find it useful.

Answer 2

The icon you posted is more of a learned icon that has been ingrained in people through digital mediums.

I agree with you 100% in that I don't think it expresses random. In design, I think this touches on the concept of perceived affordances. As a user, I'm confused with that icon because it doesn't mimic anything I'm aware of in the tangible real world.

The problem, though, is that because the idea of random is an abstract concept, it makes it especially difficult to give someone an understanding of meaning through a symbol. It's very difficult.

One of the things I initially think of is a quote on Chaos Theory -

It has been said that something as small as the flutter of a butterfly's wing can ultimately cause a typhoon halfway around the world.

I've always thought that was a powerfully evoking image when thinking of the concept of randomness. If I was coming up with something I would probably pursue something along this route.

I quickly mocked something up in Illustrator that I think kind of hits close to what you're going for, but obviously might just be a step in the right direction into what you eventually come up with.

Good Luck!

Answer 3

I was looking for visual representations of randomness for a cover some time ago, and what I found was mostly works of art. I ended up using a generative designed drawing that used randomness. The point is that randomness is an abstract concept that means the lack of predictability in many different fields and as such it will avoid any universal representation. You may think about randomness in math, philosophy, physics, biology, astronomy, genetics, religion (!), design, generative architecture, art, etc. Ironically, to be a good metaphor, an icon of randomness should change all the time, paradoxically, and be different depending on the field you want to apply it.

I discovered (or at least this is what I like to believe, in my scientific ignorance) that the two crossing arrows may refer to a concept in physics: the concept of "arrow of time", based on the idea that time is "asymmetric" (or one way direction). This concept involves another one, the "entropy", strictly related to randomness. I am a designer, not a mathematician, and I cannot explain this well, but those two arrows crossing should refer to a simplified representation of this lack of predictability which involves time. I guess a Nobel price would tell this a bit better (or more probably laugh about this) or give you some more visual examples: as an example, think about images from "chaotic systems"... Like the famous double rod pendulum:

Anyway. If you are looking for conventional representations of randomness, you will not find any other visual icon: the one you showed in your example is arbitrary and it may look "awkward" from a certain point of view because it is just a convention and does not stick to any particular field. The good thing about that icon is exactly what you may see as its limit: it became a convention and that's it.

Consider also that an icon aims to be a stylization of a concept or its metaphor, specially when representing something totally abstract or conceptually complex. You are free to create another arbitrary representation though (that will maybe become a new standard one day ;). A good approach, in my opinion, would be to restrict your research to the field you are interested in, by trying to create a closer metaphor of the thing you have in mind or your idea of randomness.

Answer 4

The FontAwesome random is pretty awkward. I wouldn't use it. The idea of rolling dice is the best one to play off of. But, I don't like giving it a discrete value. To me that represents that actual value. Just as the FontAwesome icon, seems to mean discretely switching two items. Which is far from what you want.

My best idea is to use a question mark and dice to properly represent the idea of random. The thing you need to avoid is making it look like help. So making it cocked a bit to the side, to avoid the insinuation of posing a question.

<?xml version='1.0' encoding='UTF-8' standalone='yes' ?><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" width="24.0" height="24.0" viewBox="0 0 24 24"><path d="M17.7,7c-0.7,-1.2 -1.9,-1.9 -3.4,-2.5 c-1,-0.5 -2,-0.6 -3,-0.4 c-1.5,0.3 -2.6,1.3 -3.6,3.2 l2.9,1.1c0.2,-0.6 0.6,-1.1 1.1,-1.4 c0.4,-0.3 1.1,-0.4 1.9,-0.2 c0.8,0.4 1.3,0.8 1.4,1.4 c0.1,0.5 0.1,1 -0.1,1.4 c-0.2,0.4 -0.6,0.7 -1,1 c-0.2,0.2 -0.5,0.3 -0.7,0.4 c0,0 -2,0.4 -2.9,0.9 c-0.6,0.4 -0.9,1.1 -1.3,2 c-0.1,0 -0.2,0.2 0.1,0.3 c0.2,0.1 2,0.8 2.2,0.9 c0.2,0.1 0.3,-0.1 0.3,-0.1 c0.2,-0.4 0.3,-0.6 0.4,-0.8 c0.3,-0.3 0.8,-0.6 1.3,-0.7 l1,-0.3c0.9,-0.2 1.7,-0.5 2.1,-0.7 c0.5,-0.4 1.1,-1 1.6,-1.8 c0.4,-1.4 0.3,-2.6 -0.3,-3.7 zM9.3,14.9c-0.9,0 -1.8,0.7 -1.8,1.7 c0,1 0.8,1.8 1.8,1.8 c1,0 1.8,-0.6 1.8,-1.7 c0.1,-1.1 -0.7,-1.7 -1.8,-1.8 zM6,0.1l17.6,5.9l-5.8,17.2l-17.6,-5.9l5.8,-17.2zM22.3,6.7l-15.7,-5.4l-5.3,15.3l15.7,5.5l5.3,-15.4z" fill="#000000" /></svg>

And a fluke that looked nice, kinda like you're rolling the dice and getting "?":

<?xml version='1.0' encoding='UTF-8' standalone='yes' ?><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" width="24.0" height="24.0" viewBox="0 0 24 24"><path d="M17.9,6.6c-0.7,-1.2 -1.9,-2 -3.4,-2.6 c-1.2,-0.5 -2.2,-0.6 -3.2,-0.4 c-1.6,0.3 -2.8,1.4 -3.7,3.3 l3,1.2c0.2,-0.6 0.6,-1.1 1.1,-1.5 c0.5,-0.3 1.2,-0.4 2,-0.1 c0.8,0.3 1.3,0.7 1.4,1.3 c0.1,0.5 0.1,1.1 -0.1,1.6 c-0.2,0.4 -0.6,0.7 -1,1 c-0.2,0.2 -0.5,0.3 -0.8,0.4 c0,0 -2,0.4 -3,0.9 c-0.6,0.4 -0.9,1.1 -1.3,2.1 c-0.1,0 -0.1,0.2 0.2,0.3 c0.2,0.1 2,0.8 2.2,0.9 c0.3,0.1 0.4,-0.1 0.4,-0.1 c0.2,-0.4 0.3,-0.6 0.4,-0.8 c0.3,-0.3 0.8,-0.6 1.3,-0.7 l1.1,-0.3c0.9,-0.2 1.7,-0.5 2.1,-0.8 c0.6,-0.4 1.2,-1 1.6,-1.9 c0.5,-1.4 0.4,-2.7 -0.3,-3.8 zM9.7,15.5c-1.1,0 -2.1,0.8 -2.1,2 c0,1.2 0.9,2.1 2,2.1 c1.2,0 2.1,-0.7 2.1,-2 c0.1,-1.2 -0.8,-2 -2,-2.1 zM6,0.1l17.6,5.9l-5.8,17.2l-17.6,-5.9l5.8,-17.2zM18,0.1l-17.6,5.9l5.8,17.2l17.6,-5.9l-5.8,-17.2z" fill="#000000" /></svg>

Answer 5

The icon isn't all that awkward if you consider where it's usually used: in a music playlist. You're taking a list of tracks and shuffling them around, making it random. I think the icon represents that quite well. It's really abstracted (three shuffled lines might get the point across better, after all, as could using music notes), but it's close enough to create an association and simple enough to work well as an icon and be catchy.

So, while you might be able to completely abstract the concept of 'random' (as has been done with the die solution), a "one-size-fits-all" answer doesn't have to be your answer.

What is your app randomizing? If it's pages in a book, maybe you create an icon that shows page flipping. If it's photos, maybe you have rectangles and arrows somehow. These are quick ideas and icons are hard to do well, but I just wanted to throw a couple in to speak to the idea that a random icon can (and maybe should) be born out of what is being randomized.

Answer 6

Expanding on "dice" theme, this a bit wild alternative for web UI's using emoji:

the HTML:

<button class="button-random">🎲</button>

the CSS:

.button-random {
  // remove any initial, system styling
  all: unset;
  // prevent selection
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  // change from 720 to 360 upon hover will cause anti-clockwise rotation
  transition: transform 0.4s ease-out;
  transform: rotate(360deg);
  &:hover {
    transform: rotate(720deg);
  }
  // on click:
  &:active {
    transition: 0s;
    transform: rotate(0deg);
  }
}