Grip Icon vs. Navicon

Ever since Facebook and GMail began misusing the grip icon as a navicon, countless UI frameworks and websites have started to mix the icon metaphors as well. Here are the differences, and why it’s important to be consistent…

The difference between gripping then pulling and tapping then navigating

grip icon

The grip icon has the affordance of gripping and pulling a UI object in a direction perpendicular to the position of the lines composing this icon (see gription). Most commonly, the grip icon provides a cue for rearranging items vertically in a list:

list icon

Tapping the list icon should reveal a list of actions:

Incorrect use of the grip icon

Facebook and GMail incorrectly use the grip icon. You can tap the grip icon and reveal the main menu. You can also drag the left edge of the screen with your thumb and pull to the right to reveal the main menu.

Facebook’s incorrect use of grip icon

GMail’s incorrect use of grip icon

2 options to correct the usage

Tap the list icon then Navigate

Drag the grip icon (rotated 90°) then Navigate

Consistent use of the grip icon can go a long way to teach people about touch interface paradigms. It also helps your app stand out as a polished and respectable citizen on the mobile platform.

4 thoughts on “Grip Icon vs. Navicon

    • Thank you for your comment. I agree that whomever used that grip icon instead of a list icon intended to communicate “hey, tapping this will reveal a list”. My whole point is that the meaning for the grip icon has already been established as a way to say “you can grab this and drag it”. If the intent is to say “tap this to reveal a list”, use the list icon. Save the grip icon for those actions where it’s really useful.

    • I agree with Kevin, its a list icon. It’s treatment as a button, and its placement do not suggest it has a grip action. The list icon you propose with the bullets is too distracting to the eye.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s