Category Archives: Design

Back to UI Basics

Published in Design on February 25th, 2012 2 Comments

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!

Welcome to the world wide web, an interactive medium in which screen resolution statistics are trivial, browser viewports are variable, and scrolling behaviour is a standard.

 – There Is No Page Fold

Life Below 600px

No Comments

Not everything has to fit in the top of the page.

Photoshop GuideGuide

No Comments

Photoshop guides that don’t suck so hard.

Lost Type Co-Op

No Comments

An incredibly cool type foundry with a unique pricing structure. Check them out!

Regarding Your Logo

Published in Design, Marketing on January 9th, 2009 No Comments

It’s no secret that I appreciate a really well-made logo and so, having designed a few myself, I think I am adequately qualified to adress the topic with some authority. Before I get too far, I want to say that I’ve outsourced many of these ideas to other thinkers who are smarter than myself and that you should read their articles entirely if you want to get the full value of this message.

To all of you who think your logo really matters, I want to tell you up front: your logo doesn’t matter. According to Mark Bixby,

“Your logo is only one very small part of building a successful brand. Its design is minimal in making your promise match your customers’ experience (read: branding). Design is an invaluable tool in communicating who you are, what you do, and why it matters. But if you can’t articulate these things yourself, design cannot do it for you.”

Going further on branding, Seth Godin reiterates that your logo is not your brand, concluding

“Take the time and money and effort you’d put into an expensive logo and put them into creating a product and experience and story that people remember instead.”

Now, that isn’t to say that you should go looking for the least expensive logo you can find. Far from it! In fact, that’s exactly how NOT to design a logo. Seeking out services that encourage design competition and crowd sourcing only hurt your business and the design industry. In fact, there have been entire campaigns created around abolishing speculative work like this. Furthermore, if you think “I’ll know it when I see it”, I just want to be the second to let you know, you’re wrong.

If you’re at all serious about your business, at all interested in improving the lives of your clients/customers (as you should be, that’s the only reason to be IN business), then do yourselves both a service and do things right.

Understand what it is that you do (or want to do) and place the interests of others before your own. Only work with a credible designer who is going to work alongside you to understand why your business exists and why anyone else should care. If they’re good at what they do they’ll have a top secret process they follow in order to produce quality work and fulfill your needs.

To summarize: your logo should only speak for you when you’re not there to speak for yourself. The brand that you’re working so hard to build can only be built on fulfilled promises and expectations, not outstanding design. So, let your business speak for itself and only use your logo as a small identifier from whom the message is sent.

Made to Stick

Published in Design on December 3rd, 2007 No Comments

I have recently finished reading a book centered around making ideas “sticky”. This has provided a lot of insight as to why certain ideas were successful and others weren’t. It is for far simpler reasons than you may think.

Every successful idea follows the same type of structure – Simple, Unexpected, Concrete, Credible, Emotional, Stories. Every idea that fails does so for it’s own unique reason.

Simple -You need to get to the core of your message. Reduce it to the point where it is memorable and powerful, not to the point of uselessness. Simple ideas are short and profound.

Put that down! Grab people’s attention by an unexpected means.

Concrete elements allow for the reader to conceptualize your message. Use terms they can understand.

Credibility makes your message more believable, more trustworthy. Citing facts, authorities, anti-authorities (someone you wouldn’t expect, like a former smoker talking about the dangers of smoking), etc. will help gain support.

Making the message emotional gives people a reason to act, a reason to care.

Stories make the message memorable.

Every successful idea in history has worked because it took advantage of one, or all six of these guidelines. Remember them.