The Inconsistent & Perplexing Amazon Toggle

A lesson on the importance of using established patterns, courtesy of my frustration today with Amazon.

I’ve been lucky enough to work in the realm of design for a long time, so I get frustrated when something simple doesn’t look or work the way I expect, even if it doesn’t really matter.

Side note: I’m all for experimenting and creativity, but I’m hardpressed to see how this is good for the user in any fashion. Also, it’s totally cool for you to think I’m blowing this out of proportion. I kind of am, but details matter.

For the curious (you, I hope), if you want to read a full book description, you have to click a “Read more” control, which reveals the full summary. Here’s what it looks like:

The orientation of the little arrow (carrot, chevron, call it what you will…) makes zero sense. Typically, you expect an arrow to indicate the action it will take, but in this case, it is pointing the one direction that is least associated with revealing additional text below the current text. Does the left arrow mean that something will appear on the left, or the text will move that way or, what?!

It would make far more sense to have that arrow point right to open it and left to close it:

> Read more 
< Read less

Or down to open it and up to close it:

ⱽ Read more
⌃ Read less

Or a combo pointing right to open it and up to close it (see the next section):

> Read more
⌃ Read less

Amazon designers know better

Look no further than a few pixels above our initial example to show the right way to mark up the exact same type of control:

Yup, exactly what we’d expect.

Amazon is (in)famous for its culture of experimenting with every last detail, so I wouldn’t be surprised if this silently disappears down the road. I hope it will. But, it serves as a great reminder that not everything needs to be tested. There are a lot of established patterns that work specifically because of how humans think.

(I also wouldn’t be surprised if a Designer lost the argument about trying this in the first place.)

Arrows specifically indicate direction. They focus attention and move the eye to a specific place. This isn’t unique to the web or online products — it’s a pattern we encounter everywhere online and off.

The inconsistency only compounds the issue and frustration.

Amazon can do better.

I’m not even going to dig into the myriad other ways they’re using arrows on the exact same page…

Photo by Pablo García Saldaña on Unsplash, modified by me.