Back to UI Basics

I want to take a moment to rant about something I really hate. I hope that this gets a lot of attention because I would really love to see this standard changed. Maybe (hopefully) you feel the same way…

Has this ever happened to you?

The built-in mobile browser...You’re reading through your Twitter timeline on your iPhone and you tap a link to some article. That article links you to another article, then another, and then one which links you to a couple of photos. After looking at one photo you decide to go back to the article, so you reach up and tap the back button.

Only, the back button isn’t ”up”, it’s at the bottom of the screen.

Now, instead of going back to the article you were only half-finished reading, you’re all the way back to your Twitter timeline, with only a faint recollection of how you got to the article you were reading in the first place.

Great.

Now you’re left with two options: click back through the tweet and articles to hopefully find where you were and continue reading, or, abandon the article forever and convince yourself it really wasn’t all that interesting.

Don’t tell me it’s the “Standard UI”

After years of surfing the internet we’ve been conditioned to look to the top-left corner for a back button. Of course, there are shortcuts and other methods available as well, but the top-left corner back button has been a staple of browser UI for as long as I can remember.

That, of course, is not the case with the iPhone. Because of its limited screen real estate, the designers opted to place the back button at the bottom of the screen along with some other navigational controls. It’s different, but not unusable. And when using mobile Safari, it’s not even uncomfortable.

This all changes, however, when an app incorporates Safari and it’s controls within the app. Using the standard Safari controls is not the best option, I think, so let me take a moment to explain why.

The reason this sucks

Not only have we been conditioned to seek the top-left corner when browsing back using a desktop web browser, but we’ve been conditioned this way by mobile apps as well to browse back through their many in-app pages. This is especially true within Twitter clients because there are innumerable means to reach any content. After you’re deep within the app, it makes perfect sense to hit the back button in the top-left corner until you’re back to the beginning.

My Proposed Solution (listen up App Devs)

An alternative to the built-in mobile browser UIMove the back/forward buttons to the top bar, replacing the “back to timeline” button.

If someone only browses through to the original link, the back button remains as the “back to timeline” button. But, as soon as they go beyond the first page the button becomes a standard browser back button.

This way, it continues to function exactly as the user would expect. No confusion, no problems. The end.

If you’re concerned that this method will make it too difficult (or take too long) for the user to get back to their timeline, incorporate a touch action where the user can swipe across the back button from left-to-right and be returned to the original tweet/timeline. I’m fairly certain one of the apps incorporated this method for browsing back within the app, because I remember using it.

If you really hate that option…

I would settle for a contextual menu that appeared when the user taps the first link within the linked page they’re viewing. Instead of dutifully opening the link like normal this contextual menu would ask the user whether they want to continue using the in-app browser or open the link separately in mobile safari. It’s not as graceful as my requested option, but it certainly provides a pattern interrupt that would remind me “if you continue browsing in-app, don’t use that top back button”.

So, what do you think?

I can’t possibly be the only one who feels this way. If this bugs you too, take action! Show your solidarity by sounding off in the comments, alerting the makers of your favorite Twitter app and generally helping spread the word. Together we can defeat troubling UI!

3 comments on “Back to UI Basics

  1. Interesting point. I’ve never used an iPhone, so I can’t comment.

    This honestly is NOT a problem for Android users. There is a “back” button in the bottom left corner of the screen. It works pretty much as you describe, across nearly every application on my phone.

    • That’s exactly the problem I’m talking about :)

      While browsing the web, every instance of the back button IS in the bottom-left corner, but for navigating back within the app itself, the button is always in the top-left corner.

      Even after nearly four years I STILL tap the top-left app back button instead of the bottom-left browser back button when I’m trying to jump back a page in the site I was browsing from inside the app.

      So, either I’m an idiot, or it’s unnatural UI to have two separate back buttons.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>