Flag

We stand with Ukraine and our team members from Ukraine. Here are ways you can help

Home ›› Android ›› Everybody Does Right Wrong

Everybody Does Right Wrong

by Jaq Andrews
6 min read
Share this post on
Tweet
Share
Post
Share
Email
Print

Save

The right arrow is a popular navigation tool but it lacks a consistent style and function, creating much confusion for users.

Whenever I see an arrow pointing right in a website or app, I cringe a little.

There’s just no consensus on the use of the right arrow. Despite—or perhaps because of—decades of use (and, arguably, misuse), you can never be sure what a right arrow will do.

Interfaces work best when the symbols for controls are standardized: An X means “close.” A circle with a vertical line through the top is a power switch. The three-lined “hamburger” button has quickly been adopted as a menu reveal control.

The right arrow, though, is so generic that it’s employed in a multitude of functions. Even worse, it’s often stylized to resemble a slightly different symbol, further muddying the waters. In my extensive clicky travels, I’ve catalogued four main types of right arrow:

→ A literal arrow symbol, with a stem and point (Unicode: 2192).

▶ A triangle with one point to the right (Unicode: 25B6).

> A “greater than” sign (Unicode: 003E).

>> A double or triple “greater than” sign.

The triangle usually (but not always!) denotes a “play” control for audio or video. It can also—like the others—advance a slideshow, initiate progress in a software wizard, expand a directory, show a menu, activate a pop-up, or simply link to a new page.

The variety of uses this one little symbol gets up to is truly staggering. Take a little tour with me.

Literal Arrow

Until recently, probably the most prominent literal right arrow in use was in the Instagram app, where immediately after snapping a picture, users are prompted to add a filter and proceed to the next step. It’s still an arrow in the Android app, but probably not for long, because it’s been replaced by clickable “NEXT” text on the iPhone.

Literal arrow on Instagram

Either way, it’s pretty intuitive; the interface even slides the current screen off to the left.

Microsoft has a curious relationship with the literal right arrow. Depending on the app you’re using, it might mean different things—or it might not be there at all.

Literal arrow, Microsoft

Microsoft Office arrow

Literal arrow, Microsoft

Microsoft OneDrive arrow

Literal arrow, Microsoft

Windows Phone arrow

Microsoft Office Mobile and OneDrive both feature little slideshows. Office provides an encircled arrow button to prompt you to the next screen, while OneDrive uses the pretty standard series of dots to encourage swiping. It’s curiously inconsistent given that the look and feel of both apps are otherwise quite similar.

Now the Switch to Windows Phone app on Android—that one’s a bit embarrassing. There’s a progress bar along the top showing how many steps you’ve completed; an arrow in the middle of the screen representing the transition from using an Android device to a Windows Phone device; and a bland, centered “Next” button at the bottom. Swiping does nothing. Also, the app hasn’t been updated in a year and reviews indicate it gives terrible recommendations for Windows Phone apps to replace the Android apps on your device. Probably best to move on.

Triangle Pointing Right

This particular form of the right arrow is extra perplexing, because it’s usually an equilateral triangle. With all three sides the same length, there are really three directions the “arrow” could be pointing. It’s only the viewer’s predilection to look for the four cardinal directions that make an equilateral triangle in an interface point right (or left, up, or down).

Despite decades of use (and, arguably, misuse), you can never be sure what a right arrow will do

This quality becomes particularly troublesome in the Mac OS X default file navigator, Finder. Folders have right-pointing triangles next to them; click the triangle, and it rotates to point down, and the contents of the folder are shown.

triangle finder

A clearly isosceles triangle would make more sense, because at least then there would be one vertex different from the other two. But equilateral triangles look cleaner with their greater symmetry, and they work well enough due to humanity’s axial bias.

Netflix uses a slightly flattened triangle on its website for scrolling through streaming titles. You don’t even have to click, just hovering over the control sets the line of movie and television artwork parading smoothly across the screen.

triangle finder, Netflix

Perhaps because of the clean look of the equilateral triangle, it’s used all over the place. Sometimes with just a hint of isoscelization, it’s long been the “Play” button for audio and video, likely originating with reel-to-reel tape machines.

It’s no surprise, then, that it’s not only the main control, but also a logo for YouTube.

triangle finder, YouTube

Google (which owns YouTube) decided to use Play as both the name and logo for its app and media store.

triangle, Google Play

Oh, but Google Play is guilty of much worse sins than using a triangle logo for multiple services. Much, much worse …

Single Greater Than

When you visit an app’s page on the Google Play website in some browsers, you’re presented with a row of images and videos—screenshots and demonstrations, mostly.

greater-than, Google Play

If your mouse, touchpad, or touchscreen allows you to swipe through the images, great. Just don’t try using that handy-looking greater than sign on the right. For some reason, instead of scrolling immediately, a click of that button enlarges the first image. Not even the first item if it’s a video, but the first image.

To be fair, after the enlargement, the greater than sign does scroll through the images. And a row of “Similar” apps near the bottom of the page with the same control responds by sliding the current group off to the left to be replaced by a new group. Which … actually, is that more confusing? Should one button do two different things? Isn’t it a main point of this article that it shouldn’t?

Buttons also shouldn’t block the content they’re displaying. Netflix gets away with it above because any partially obscured artwork scrolls into view quickly. On Cracked’s mobile site, however, controls on slideshows cover up bits of each image. Even though there’s space on each side of each image, and even though the same slideshow on the desktop site has controls in exactly that space.

greater-than, Cracked

Cracked mobile 1

greater-than, Cracked

Cracked mobile 2

Again, being fair: the overlaid controls only appear when you tap the images, and you can swipe left to advance instead. But, being unfair and somewhat off-topic: see that gray circle in the upper right of the mobile screenshot? All that button (a triangle pointing up) does is scroll back to the top of the page. I’d rather be able to read all the content clearly, thanks.

Double Greater Than

Finally, do you want to fast-forward past stuff you never wanted to see in the first place? That’s the (probably unintentional) message conveyed on sites like ComputerWorld and Forbes, where “Continue to site >>” lets you skip pop-over ads. Google News, meanwhile, uses the double greater than symbol to direct you past headlines to “related” stories.

double greater-than, ComputerWorld

Being simple text characters, the two brackets are tempting. Even UX Mag can’t resist, employing them to indicate a dropdown menu. Mac’s Safari browser used them similarly, to drop down a list of additional tabs, before the most recent version in OS X Yosemite.

double greater-than, UXM

It’s good to have some symbol after menu headings, so that readers know the menu expands, even if the direction is a bit nonsensical. A menu that slides to the right would stay consistent with the imagery, but probably be unwieldy to use.

The “skip over” functionality is a better use of the double greater than symbol. Even Zco’s site uses the same symbol to advance five pages ahead on our blog, with a single greater than to advance one page.

Okay, I might be biased on that one.

 

Illustration of right arrow courtesy Shutterstock.

post authorJaq Andrews

Jaq Andrews
John 'jaQ' Andrews has been writing about technology professionally since 1999. His work appears on the blog of Zco Corporation, a mobile app development company; in the Techie section of New Hampshire's largest free weekly paper, The Hippo; and his own site, jaqandrews.com.

Tweet
Share
Post
Share
Email
Print

Related Articles

Curious about the next frontier in AI design? Discover how AI can go beyond chatbots to create seamless, context-aware interactions that anticipate user needs. Dive into the future of AI in UX design with this insightful article!

Article by Maximillian Piras
When Words Cannot Describe: Designing For AI Beyond Conversational Interfaces
  • The article explores the future of AI design, moving beyond simple chatbots to more sophisticated, integrated systems.
  • It argues that while conversational interfaces have been the focus, the potential for AI lies in creating seamless, contextual interactions across different platforms and devices.
  • The piece highlights the importance of understanding user intent and context, advocating for AI systems that can anticipate needs and provide personalized experiences.
Share:When Words Cannot Describe: Designing For AI Beyond Conversational Interfaces
21 min read

Uncover the dynamic landscape of UX design as artificial intelligence continues to reshape the field. With automated tools revolutionizing our roles, what does the future hold for designers?

Article by Michal Malewicz
The End of Design?
  • The article explores the impact of AI on UX design, questioning the future role of designers as automated tools become more prevalent.
  • It highlights the historical evolution of UX design and the commodification of design roles, emphasizing the shift from creative problem-solving to efficiency-driven practices.
  • It emphasizes the need for future designers to be generalists with strong decision-making skills, capable of leading projects and maintaining creativity in an AI-driven landscape.
Share:The End of Design?
9 min read

Discover how Flux.1, with its groundbreaking 12 billion parameters, sets a new benchmark in AI image generation. This article explores its advancements over Midjourney and Dall-E 3, showcasing its unmatched detail and prompt accuracy. Don’t miss out on seeing how this latest model redefines what’s possible in digital artistry!

Article by Jim Clyde Monge
Flux.1 is a Mind-Blowing Open-Weights AI Image Generator with 12B Parameters
  • This article examines Flux.1’s 12 billion parameters and its advancements over Midjourney and Dall-E 3. Highlights its superior image detail and prompt adherence.
  • The piece explores the shift of developers from Stability AI to Black Forest Labs and how this led to Flux.1. Analyzes the innovation impact.
  • It compares Flux.1 with Midjourney V6, Dall-E 3, and SD3 Ultra, focusing on visual quality, prompt coherence, and diversity.
  • The guide explains how to access Flux.1 via Replicate, HuggingFace, and Fal. Covers the different models—Pro, Dev, Schnell—and their uses.
  • The article investigates Flux.1’s capabilities in generating photorealistic and artistic images with examples of its realism and detailed rendering.
Share:Flux.1 is a Mind-Blowing Open-Weights AI Image Generator with 12B Parameters
5 min read

Tell us about you. Enroll in the course.

    This website uses cookies to ensure you get the best experience on our website. Check our privacy policy and