what the arrow inside your textbox means (on a 3×3 grid)

I was drawing up a UI (surprised?), and somehow started thinking about where I should put the little arrow in my box of text. That caused me to pause, and think. UX Architects overthink… and then blog about it, it’s terrible. But maybe it will be useful some day.

So I concluded that the little arrow means one of six different things depending on which position (of the 9) it has on a 3×3 grid.


For those who find the image too small to read:

1. (teal) It’s part of the title, not something you action.
2. (yellow) It’s a stepper. Next, previous, but someone flipped the left one accidentally.
3. (red) Is this a video we should press “play” on?
4. (pink) Ah, a carousel or a slideshow, i know how this works.
5. (light blue) Ok, I’ve read it all. Ah, there’s more info? Or is there another page?
6. (green) If I click this link, I’ll find out more, brilliant.

The thing that surprised me the most was that when I asked a few friends about this as well (very rough-handed paper prototyping and user testing), they agreed unanimously that any arrow in the middle of a box is “play”. I wonder when that became the standard. Or if anyone has ever put a “play” elsewhere, and found it worked well.

Clearly this is an exercise and not a rule. Feel free to comment with other examples where this grid works (or breaks!).