Skip navigation
Help

Steve Krug

warning: Creating default object from empty value in /var/www/vhosts/sayforward.com/subdomains/recorder/httpdocs/modules/taxonomy/taxonomy.pages.inc on line 33.

  

Most apps fail. This cruel reality has led many disillusioned developers to conclude, often subconsciously, that succeeding on the App Store is like striking it rich in the gold rush: you just need to get lucky.

The App Success Formula.

The idea of luck is a dangerous sedative to ease the pain of failure. Pain is a good thing. It shows something is wrong. If my app fails, I want to know why. Instead of blaming forces beyond our control, why not look at what folks like tap tap tap and Tapbots are doing to succeed again and again and again.

While applying this formula flawlessly is nearly impossible, working towards it will dramatically increase your chances of success. These concepts are based on the iOS platform, but many of the principles apply to other platforms as well.

Idea

Any successful app rests on the foundation of a solid idea, because the idea determines the ultimate potential of the execution. Avoid the temptation of jumping straight into execution after having an epiphany in the shower. A little bit of research up front can save you a lot of pain down the road.

Find a Vacuum

Vacuum

Phill Ryu (@phillryu) has an impressively consistent track record of top apps: Clear, The Heist and Classics, to name a few. His secret for validating ideas is pretty simple: find a vacuum. The App Store houses a plethora of quality, user experience and innovation vacuums. Vacuums are cool because they inherently want to be filled. A few examples:

Clear, Tweetbot and iTranslate Voice.
Clear, Tweetbot and iTranslate Voice.

Clear: among thousands of to-do apps, Clear filled a user interface (UI) innovation vacuum. Entering a crowded category seems counter-intuitive, but the biggest categories provide the biggest opportunities if you can innovate within them.

Tweetbot: Twitter bought Tweetie and dumbed it down to appeal to the masses. Tweetbot filled the Twitter power user vacuum.

iTranslate Voice: The release of Siri intrigued the world, instantly generating a vacuum for apps like iTranslate Voice that behaved like Siri but offered different functionality. Every new technology introduces a new vacuum along with it.

For sure, the low-hanging fruit is gone, but there are still tons of vacuums out there, particularly in the design department. Find a vacuum that you are passionate about and fill it.

Show Me the Money

Most apps don’t make money. If revenue is important to you, it is worth exploring what kind of apps make money and what kind of apps don’t. Building on Marco Arment’s theory of two app stores, I postulate that three categories of apps make money, and one category doesn’t.

Apps can be divided into categories by profit per user and number of downloads.
Apps can be divided into categories by profit per user and number of downloads. Large view.

Hit Apps:

  • High volume, low price;
  • Appeal to almost everybody, targeting impulse purchasers who browse the top charts and featured lists;
  • Huge launches based on intense marketing campaigns;
  • Require tens of thousands, if not hundreds of thousands of downloads to generate significant profit.

Examples: Clear ($3) and iTranslate ($1).

Premium Niche Apps:

  • Low volume, high price;
  • Target a serious niche;
  • Users find the app through thorough research and are willing to pay big bucks to improve their lives;
  • A large profit per user makes traditional customer acquisition methods (i.e. pay-per-click ads) viable and scalable.

Examples: OmniFocus ($10) and Proloquo2Go ($190).

Premium Hit Apps:

  • High volume and high profit per user;
  • The only viable space for funded startups that need to turn a big profit;
  • Rare but rewarding.

Examples: TomTom GPS ($50), Pandora (monthly $3.99 subscription) and freemium games that make a huge average profit per user through addictive add-ons and credits.

Most Apps Fail:

  • Low volume and low profit per user;
  • Even if such an app garners some attention, the limited appeal and low price limit significant success.

Developers read inspiring stories of app millionaires, look at the astounding number of devices being sold every day and develop grossly optimistic back-of-the-napkin download projections for their relatively niche apps. They conclude that if they could only capture a fraction of a percent of the market, they could sell their app at $0.99 and make a fortune.

It just doesn’t work that way. The brutal reality kicks in when the first day of sales generates six downloads, mostly from friends and family. The app idea might have scratched their itch, but it was just too niche to be a hit.

Your app idea probably falls into this category. Don’t ignore this.

Building an app that makes money is hard. David Barnard, the brilliant mind behind App Cubby, suggests that the future of sustainable revenues may lie in true freemium, scaling the cost with the value derived. Generate lots of downloads and creatively find ways to let users who find more value pay more for it. These kinds of creative monetization ideas are relatively untested for non-game apps, but that’s what makes this industry so exciting.

Make a Statement

No, I mean, literally, write something down. Whittle your idea down to its core and create one sentence that defines your app and its target market. Apple does this for their internal apps and you should do it too.

For example:

“Grades shows college students what score they need to aim for on their next exam.”

If you cannot explain the basic value of your idea in one sentence, it’s too complex. Mobile apps need to focus on doing one task extremely well, because your target market must instantly desire your app after seeing one screenshot.

After defining the app’s core, check every feature idea against this core and remove the cruft.

Design

Apple’s culture revolves around design excellence. It’s no coincidence the apps Apple showcases are always well designed. Design is the most critical component in building a successful app.

Don’t Make Me Think

Like websites, apps are incredibly disposable. If an app doesn’t make sense immediately, users feel little pain in deleting it. The title of Steve Krug’s popular book encapsulates our task as usability designers: don’t make me think. Like a well-designed doorknob, the interface itself implicitly explains its own use and value.

A few points to that end:

Kill the Baby
Every cool feature idea inevitably adds complexity to the app. Strip the app, the screens and even the elements within each screen to their essence. Good design is more about saying no to good ideas than it is about generating them.

The to-do list app on the left let cool features get in the way of the core experience.<br /><br />
Clear (right) questioned everything and only the essence survived.
The to-do list app on the left let cool features get in the way of the core experience.
Clear (right) questioned everything and only the essence survived.

Consider UI Conventions
Users have certain expectations about how the UI on their devices should behave based on the conventions they see in the operating system and the primary apps they use every day. Pay attention to the UI guidelines (iOS Human Interface Guidelines, Android User Interface Guidelines) and be sure to understand a convention before ignoring it.

In an attempt to look unique, the grade input interface on the left neglects basic navigation conventions. A similar screen from my app, Grades, applies a unique skin to familiar iOS interface conventions.
In an attempt to look unique, the grade input interface on the left neglects basic navigation conventions. A similar screen from my app, Grades, applies a unique skin to familiar iOS interface conventions.

Think Like a Human
Users have models in their head about the way the world works. Don’t design according to your database or programming limitations, but according to how the user thinks about things.

RedLaser’s scanning interface initially required users to take a picture of the barcode they were interested in (left). The app went viral when they changed the interface to match how a real barcode scanner works. Hover, beep, you're done (right).
RedLaser’s scanning interface initially required users to take a picture of the barcode they were interested in (left). The app went viral when they changed the interface to match how a real barcode scanner works. Hover, beep, you’re done (right).

Don’t Make Me Work
Users are lazy. They don’t want to read instructions and they hate typing. The best apps figure out the absolute minimum the user needs to do for the app to function.

TripIt is great but the opening screen offers little motivation for users to sign up. If an app works without an account, let users explore the app and sign up later; otherwise provide an appealing walkthrough to entice users to sign up like TuneWiki.
TripIt (left) is great but the opening screen offers little motivation for users to sign up. If an app works without an account, let users explore the app and sign up later; otherwise provide an appealing walkthrough to entice users to sign up like TuneWiki (right).

Do Usability Testing
Don’t let eye scanning and focus groups intimidate you. Do whatever you can! Most basic usability problems surface by simply getting the interface in front of some potential users. Ask a few questions (“what do you think this app does? How might you do X task?”), and watch them. Do it early and often throughout the entire design and development process.

Get Emotional

The sliding pane opening animation in Weightbot, the humorous copy in Everyday, the satisfying ascending charms when you check off items in Clear; though offering little utility, these tiny details elicit a powerful emotional response. These apps exhibit a personality. You either love them or you hate them, but you definitely don’t forget them and you are much more likely to share them.

Usable isn’t good enough any more. The best apps go the extra thousand miles to pay attention to the details that make an app enjoyable. Simon Schmid wrote a thorough treatment on emotional design, but here are some basic points relating to apps.

Visuals Matter
Beautiful apps sell better, are more enjoyable to use and feel more valuable than bland apps. Though beauty can be found in rich gradients, textures and shadows, strive for the subtler attributes of elegance, readability and tasteful layout. Use skeuomorphism (UI that mimics physical objects) only where it enriches the experience and doesn’t distract from it. If you’re unfamiliar with basic graphic design principles, The Non-Designer’s Design Book by Robin Williams is a great place to start.

Paper for iPad by Fifty Three.
Paper for iPad by Fifty Three.

Experiment With Sound
Sound in a UI is a delicate, powerful and largely unexplored tool. Experiment to see if sounds can improve your app.

Tapbots’ apps beep, click and buzz just like you would expect from robotic controls.
Tapbots’ apps beep, click and buzz just like you would expect from robotic controls.

Touch Is Magic
Apple’s engineers don’t stop working until their products feel right. It’s why the first iPhone’s bouncy scrolling “scrolls like butter.” If an object doesn’t respond immediately to the touch, it reminds you that you are using a computer and not actually directly manipulating the object.

All pictures and objects in Our Choice can be directly manipulated with your fingers.
All pictures and objects in Our Choice can be directly manipulated with your fingers.

Gestures can provide a powerful connection between the interface and the user but can also be frustratingly undiscoverable if not implemented correctly. Experiment with new interactions and don’t stop working until every interaction, transition and metaphor makes sense and feels right.

Spice Up Your Words
Users generally dislike instructional copy, error messages and notifications. Why not make their day by writing quirky, witty or maybe even humorous copy! Users will appreciate the unexpected pleasure.

In my latest app, Languages, a witty error message not only softened the blow of a download error, but made people want to tweet about the experience.
In my latest app, Languages, a witty error message not only softened the blow of a download error, but made people want to tweet about the experience.

Animate With Class
Whether it’s elements moving on the screen or transitions between screens, animation can express personality and give users a sense of continuity and polish as they navigate the app.

Users opening Weightbot for the first time enjoy watching the bot unlocking itself.
Users opening Weightbot for the first time enjoy watching the bot unlocking itself.

Don’t Neglect Your Icon
The icon is most people’s first impression of your app. It also occupies a space on users’ precious home screen. The best icons are simple but memorable; they stand out without being garish. The icon should look beautiful at large sizes, yet iconic enough to be recognized within an app folder on the home screen.

Clear’s icon stands out using a bright color scheme and one simple shape. The icon on the right has too many conflicting colors and shapes to be recognizable or attractive.
Clear’s icon (left) stands out using a bright color scheme and one simple shape. The icon on the right has too many conflicting colors and shapes to be recognizable or attractive.

Programming

Your technical choices influence the experience of the app, and thus, its success on the App Store.

Go Native

The “build once, deploy everywhere” method is a terrific recipe for mediocre apps.

To start, the method itself is a myth. Different operating systems have different UI conventions and patterns. With the exception of games where a custom interface is desired, one interface that deploys to all platforms results in a foreign experience on each platform.

Facebook tried HTML5 for years. When they recently switched to native code, they were able to improve performance by 200% and increase their average user rating from two stars to four stars.
Facebook tried HTML5 for years. When they recently switched to native code, they were able to improve performance by 200% and increase their average user rating from two stars to four stars.

At very best, we can build once and optimize everywhere. Apps like Zipcar have successfully used this approach. Unfortunately, Zipcar is an exception to the rule of suboptimal apps built using this approach. There are a few reasons for this.

  • Build once, optimize everywhere encourages a bottom-up design approach where the programming heavily constrains the design of the app. It stifles design innovation by tempting you to cut corners in order to satisfy the lowest common denominator.
  • Technologies like PhoneGap essentially turn your app into a browser window that runs JavaScript code. Avoid these. JavaScript apps tend to feel slow, choppy, unnatural and error-ridden because JavaScript just isn’t ready to match native experiences.
  • Tools like Appcelerator compile native code. These perform much better but still lack the flexibility and robustness of pure native code. Since you do not have direct access to the code that is running on the phone, errors can be more difficult to locate and squash. They can also make it difficult to implement new technologies right away, giving you a disadvantage against competitors who can tie into new technologies from the day they are announced.
  • The bottom line: choose your technology based on the design, not your design based on your technology. Design your apps for the various platforms first. Then see if something like Appcelerator is capable of executing those designs without compromise.

For an in-depth view of cross-platform trade-offs, read Aral Balkan’s comprehensive treatment on the subject.

Code Quality Matters

While perfectly-formed, well-documented code does not directly affect the user, it certainly affects your ability to push out timely, robust updates, something that can be critical to continued success.

In addition, laggy, bug-ridden code definitely affects the user. The user doesn’t care if there is a good reason why the app crashed or deleted their data — it’s still the brand’s fault. I have seen cases where this alone has stolen the thunder out of the launch of otherwise promising apps.

Hourly rates can be deceiving. In the time it takes a poor coder to build one component sloppily, a quality coder can build three components robustly. If you decide you don’t like the poor coder, a new coder will most likely have to start from scratch because the legacy code only makes sense to its author. On the other hand, quality code can be reused and built upon easily.

Marketing

If you have a marketing department, good for you, but grassroots marketing by a developer or a designer can often be even more effective. Believe me, when I started, my name didn’t mean anything to anybody that mattered. Now my work has been featured by Apple, Mashable, TechCrunch, The Huffington Post, Fox News and dozens more. All this without spending a dime on marketing, aside from a few website costs.

Start Early

Many developers think of marketing as something to do after an app launches. Nothing could be further from the truth.

A huge launch is critical, especially for inexpensive apps. If your launch does not propel your app into the top charts, the app will most likely fade into oblivion almost instantly amidst the thousands of apps launching every week. An app that is not on a top chart is nearly invisible to most consumers.

After the launch, a review here and there doesn’t help much to propel your app up the charts. It’s just the way the App Store rankings work. Ranking algorithms constantly change but they are roughly based on sales in a window of time, say four days, weighted towards the latest day. This means that marketing you do today will not affect your ranking a week from now, making fragmented press all but worthless. Only concentrated marketing blasts work. The launch constitutes your number one chance to show your app to the world in a concentrated way.

With this in view, App Savvy author Ken Yarmosh characterizes the marketing of apps as a crescendo. Marketing an app should start at the very beginning and continually develop as it consummates in a huge launch blast.

Make Friends

Connections are everything. They power your marketing machine. No connections means no warm doors, and, with thousands of apps vying for press attention every week, a warm door is gold.

I have created Twitter lists of Apple employees, members of the press and remarkable iOS developers to help me find opportunities to connect. Feel free to use them!
I have created Twitter lists of Apple employees, members of the press and remarkable iOS developers to help me find opportunities to connect. Feel free to use them!

Connect With Apple Employees, Tech Writers and Influential Designers and Developers in the Community
Realize that actual human beings run companies like Apple, TechCrunch and tap tap tap. A lot of these people are really cool and love to meet and promote people with great products and ideas. Make a list of people to connect with and actively seek opportunities to do so.

Go Where They Are

  • Twitter is a good place to start — nearly every influencer in the tech industry tweets.
  • Commenting on influential blogs or emailing the author can be a great way to initiate contact.
  • Face-to-face connections are the most powerful, so be sure to hit up the Apple Worldwide Developers Conference (WWDC) and other conferences that the Apple community tends to congregate at. Local meetups are also a great place to meet people.

Be Cool, Don’t Spam
Just because you get the opportunity to talk to someone doesn’t mean they are instantly interested in your pitch. Build a meaningful connection first. Then they’ll be asking you what cool things you’re up to. When you do show off some work, do it in the way of seeking advice and feedback rather than pitching. It comes off better and often elicits great feedback.

Give and You Shall Receive
Build meaningful connections with people by getting into their mind and thinking about their needs and wants. Maybe an influential person asks a technical question on Twitter that you know the answer to, or writes a post you have thoughts on. Be sure to respond! Do this a few times and they might just notice. Finally, remember that people have egos — be sure to let them know when you appreciate their work.

Post Interesting Stuff
Link to insightful articles and maybe even write your own blog with the things you learn about. People love to read honest journaling and analysis of apps. Websites like iDevBlogADay promote your articles to the community.

Build Buzz

You don’t want your launch to fall flat, so a few weeks before launch, start revving up the hype machine. The idea is to build up a fan base who will be the first to download your app on launch day.

Teaser websites like this one can help build anticipation and collect email addresses.
Teaser websites like this one can help build anticipation and collect email addresses. Large view.

  • Set up Twitter and Facebook accounts for your app. This gives potential fans an easy way to follow and mention your app. Use the account to post sneak peeks, updates on progress and contests. You can even use the account to follow people you think might be interested in the app. They’ll see you’re following them and might even check the app out.
  • Build a teaser website with a form to sign up to your mailing list. Include something to entice people — an attractive Web design, a beautiful screenshot and maybe even a video.
  • Create a video. Nothing builds buzz like a well-done video. The buzz behind the Clear video exemplifies that. It’s also an easy way to show the press what your app is all about.
  • Run a private beta. Your beta testers will be your biggest fans going into launch because they feel invested in the development of the app.

Get Featured

After winning an Apple Design Award, my app was featured in nearly every tech publication I had ever hoped for, but all that press combined generated fewer downloads than when Apple featured it.

So how does one get featured by Apple? Thousands of apps come out every week, and only a select few find a place on the App Store homepage.

Only a small number of apps are featured on the Apple App Store homepage.
Only a small number of apps are featured on the Apple App Store homepage.

First, the app has to be “featureable.” It must interest Apple in some way. Does it have a polished design? Does it show off the Apple platform? Is it something you cannot find on other platforms? Any of these characteristics boost your chances. The good news is that out of the thousands of apps coming out, very few feature the kind of design discussed here, making it relatively easy to stand out.

Second, you need to get Apple’s attention. Making connections within Apple can be invaluable. As a general rule, though, you need to make your own splash before Apple will make you a bigger one. Apple has an editorial team. They find apps to feature. You need to get to the places they are looking. Based on my experiences, they probably look at new apps that are “charting” — moving up the charts. For that, you need to generate a good number of launch-day sales. It takes at least a few hundred sales to chart in most categories. Besides that, think of the places you might go to find new quality apps; they probably visit the same websites.

Pitch the Press

Press reviews help establish credibility, an initial stream of downloads and visibility to influential people or Apple employees. Seek press attention at least a week or two before launch — these people are busy and you want to try to have reviews lined up to publish on launch day.

Getting the press to review your app is an important part of a good marketing strategy.
Getting the press to review your app is an important part of a good marketing strategy.

This is the part where you contact all those really great friends you’ve made within the press and tech community, giving them a sneak peek of your app and asking if they want to hear more.

After exhausting your warm doors, start cold calling. Have a story, keep it short, make it personal and don’t forget to follow up.

Build a Fan Base

The most powerful app company is one with a fan base. Sonico Mobile, a partner on our latest app, Languages, recently released an app called iTranslate Voice. The app became an instant #1 hit with very little promotion from the press or Apple. How? Sonico advertised iTranslate Voice to their 30 million strong iTranslate user base and sent out an email to their massive mailing list.

All of Sonico's apps allow users to easily follow the company on Twitter or subscribe to their mailing list.
All of Sonico’s apps allow users to easily follow the company on Twitter or subscribe to their mailing list.

A fan base takes time to develop. Be sure to make it easy for fans to join your mailing list, like your Facebook page and follow your Twitter account. In addition, consider a mass-market free app as part of a strategy to gain millions of fans. Ad bartering services like Swappit allow you to build up ad impression credits and use them all at once on a big launch.

Conclusion

Success is measured in different ways. The first version of Grades made less than $10,000, but it was a stepping-stone to an Apple Design Award, and dozens of invaluable connections. Now our company is positioned to launch top-selling apps like Languages, which is more than making up for Grades pecuniary issues.

Monetary success is hard, but it gets easier as you go. As you consistently produce quality apps, your brand becomes recognized by the press and Apple, your team gains critical hands-on experience and you develop a fan base. This is definitely a long-term game, but the payoff can be incredible. It’s a great feeling to know that millions of people are enjoying the fruit of your hard work. Learn the lessons, don’t compromise and make a dent in the universe.

(cp)

© Jeremy Olson for Smashing Magazine, 2012.

0
Your rating: None

Fair warning: this is a blog post about automated cat feeders. Sort of. But bear with me, because I'm also trying to make a point about software. If you have a sudden urge to click the back button on your browser now, I don't blame you. I don't often talk about cats, but when I do, I make it count.

We've used automated cat feeders since 2007 with great success. (My apologies for the picture quality, but it was 2007, and camera phones were awful.)

Old-petmate-feeders

Feeding your pets using robots might sound impersonal and uncaring. Perhaps it is. But I can't emphasize enough how much of a daily lifestyle improvement it really is to have your pets stop associating you with ritualized, timed feedings. As my wife so aptly explained:

I do not miss the days when the cats would come and sit on our heads at 5 AM, wanting their breakfast.

Me neither. I haven't stopped loving our fuzzy buddies, but this was also before we had onetwothree children. We don't have a lot of time for random cat hijinks these days. Anyway, once we set up the automated feeders in 2007, it was a huge relief to outsource pet food obsessions to machines. They reliably delivered a timed feeding at 8am and 8pm like clockwork for the last five years. No issues whatsoever, other than changing the three D batteries about once a year, filling the hopper with kibble about once a month, and an occasional cleaning.

Although they worked, there were still many details of the automated feeders' design that were downright terrible. I put up with these problems because I was so happy to have automatic feeders that worked at all. So when I noticed that the 2012 version of these feeders appeared to be considerably updated, I went ahead and upgraded immediately on faith alone. After all, it had been nearly five years! Surely the company had improved their product a bit since then … right? Well, a man can dream, can't he?

New-petmate-feeders

When I ordered the new feeders, I assumed they would be a little better than what I had before.

Petmate-lebistro-old-and-new

The two feeders don't look so radically different, do they? But pay attention to the details.

  • The food bowl is removable. It drove me crazy that the food bowl in the old version was permanently attached, and tough to clean as a result.
  • The food bowl has rounded interior edges. As if cleaning the non-removable bowl of our old version wasn't annoying enough, it also had sharp interior edges, which tended to accrete a bunch of powdered food gunk in there over time. Very difficult to clean properly.
  • The programming buttons are large and easy to press. In the old version, the buttons were small watch-style soft rubber buttons that protruded from the surface. The tactile feedback was terrible, and they were easy to mis-press because of their size and mushiness.
  • The programming buttons are directly accessible on the face of the device. For no discernable reason whatsoever, the programming buttons in the old version were under a little plastic clear protective "sneeze guard" flap, which you had to pinch up and unlock with your thumb before you could do any programming at all. I guess the theory was that a pet could somehow accidentally brush against the buttons and do … something … but that seems incredibly unlikely. But most of all, unnecessary.
  • The programming is easier. We never changed the actual feed schedule, but just changing the time for daylight savings was so incredibly awkward and contorted we had to summarize the steps from the manual on a separate piece of paper as a "cheat sheet". The new version, in contrast, makes changing the time almost as simple as it should be. Almost.
  • There is an outflow cover flap. By far the number one physical flaw of the old feeder: the feed slot invites curious paws, and makes it all too easy to fish out kibble on demand. You can see in my original photo that we had to mod the feed slot to tape (and eventually bolt) a wire soap dish cover over it so the cats wouldn't be able to manual feed. The new feeder has a perfectly aligned outflow flap that I couldn't even dislodge with my finger. And it works; even our curious-est cat wasn't able to get past it.
  • The top cover rotates to lock. On the old feeder, the top cover to the clear kibble storage was a simple friction fit; dislodging it wasn't difficult, and the cats did manage to do this early on with some experimentation. On the new feeder, the cover is slotted, and rotates to lock against the kibble storage securely. This is the same way the kibble feeder body locks on the base (on both old and new feeders), so it's logical to use this same "rotate to lock into or out of position" design in both places.
  • The feed hopper is funnel shaped. The old feed hopper was a simple cylinder, and holds less in the same space as a result. When I transferred the feed over from the old full models (we had literally just filled them the day before) to the updated ones, I was able to add about 15-20 percent more kibble despite the device being roughly the same size in terms of floor space.
  • The base is flared. Stability is critical; depending how adventurous your cats are, they may physically attack the feeders and try to push them over, or hit them hard enough to trigger a trickle of food dispensing. A flared base isn't the final solution, but it's a big step in the right direction. It's a heck of a lot tougher to knock over a feeder with a bigger "foot" on the ground.
  • It's off-white. The old feeder, like the Ford Model T, was available in any color customers wanted, so long as it was black. Which meant it did a great job of not blending in with almost any decor, and also showed off its dust collection like a champ. Thank goodness the new model comes in "linen".

These are, to be sure, a bunch of dumb, nitpicky details. Did the old version feed our cats reliably? Yes, it did. But it was also a pain to clean and maintain, a sort of pain that I endured weekly, for reasons that made no sense to me other than arbitrarily poor design choices. But when I bought the new version of the automated feeder, I was shocked to discover that nearly every single problem I had with the previous generation was addressed. I felt as if the Petmate Corporation™ was actually listening to all the feedback from the people who used their product, and actively refined the product to address our complaints and suggestions.

My point, and I do have one, is that details matter. Details matter, in fact, a hell of a lot. Whether in automatic cat feeders, or software. As my friend Wil Shipley once said:

This is all your app is: a collection of tiny details.

This is still one of my favorite quotes about software. It's something we internalized heavily when building Stack Overflow. Getting the details right is the difference between something that delights, and something customers tolerate.

Your software, your product, is nothing more than a collection of tiny details. If you don't obsess over all those details, if you think it's OK to concentrate on the "important" parts and continue to ignore the other umpteen dozen tiny little ways your product annoys the people who use it on a daily basis – you're not creating great software. Someone else is. I hope for your sake they aren't your competitor.

The details are hard. Everyone screws up the details at first, just like Petmate did with the first version of this automatic feeder. And it's OK to screw up the details initially, provided …

  • you're getting the primary function more or less right.
  • you're listening to feedback from the people who use your product, and actively refining the details of your product based on their feedback every day.

We were maniacal about listening to feedback from avid Stack Overflow users from the earliest days of Stack Overflow in August 2008. Did you know that we didn't even have comments in the first version of Stack Overflow? But it was obvious, based on user feedback and observed usage, that we desperately needed them. There are now, at the time I am writing this, 1,569 completed feature requests; that's more than one per day on average.

Imagine that. Someone who cares about the details just as much as you do.

[advertisement] Stack Overflow Careers matches the best developers (you!) with the best employers. You can search our job listings or create a profile and even let employers find you.

0
Your rating: None

  

When users land on your website, they typically read the content available. Then, the next thing that they will do is to try and familiarize themselves with your website. Most of the time this involves looking for navigation.

In this article, I’ll be analyzing the navigation elements of a particular category of websites, i.e. portfolios. Why portfolios, you ask? Because they represent an interesting blend of creativity and development techniques. As they offer an intriguing user interface and interaction, this often borderlines with what is ultimately defined as an enjoyable user experience. Should aesthetics, originality and creativity come at the expense of usability? Can they reside on the same website in harmony?

Portfolio Navigation Main Image

These themes will be explored through a brief analysis of eight portfolio websites, carefully selected by the Smashing Team and, well, scrutinized by me! My critique will encompass a blend of usability and user experience guidelines, as well as personal opinion based on my experience. Please feel free to provide your opinion in the comment section beneath this article. Also, kindly note that the websites are presented in no particular order.

Dawid Wadach

My first impression of Dawid Wadach’s website was “Whoa! Mine-sweeping! That’s surely not good usability!” For those of you who are not aware of the meaning of the term “mine-sweeping”, it refers to the the action of moving the mouse pointer over screen components (usually images) to reveal links. Although children like to mine-sweep in order to find links, both teenagers and adults hate it.

Dawid Wadach
The apparent absence of navigation is the first noticeable thing on wadach.com.

It was only after stopping to read what I was randomly and rapidly uncovering with my mouse that I actually noticed that the hidden parts contained the portfolio of websites designed by Wadach. At this point I sat back and started looking for the website’s navigation.

Dawid Wadach
Hovering over the white area uncovers some of the projects undertaken by Wadach.

To be fair with Dawid, the menu is indeed visible as it’s located in the form of a button right next to his logo. My criticism towards this implementation is that after hovering over this button, I expected it to automatically show all the menu options. This was particularly true because there was no visible change in the menu button, nor on my mouse pointer when I hovered over it. Indeed, you need to click on the menu button in order to be provided with the main navigational elements.

That, in my opinion, is not good practice, and I feel that the main menu could have very easily been rendered visible at all times without altering the visual element of the website. Indeed, that is what Dawid did, although he wrongly placed it in the website’s footer.

Dawid Wadach
The main navigation menu on Dawid Wadach’s website.

On a more positive note, with regards to the hover effects of the main menu, they are very clear. The font itself is large and contrasts very well with the semi-transparent black background. The website also includes utility navigation at the top left hand corner, which is a good location for such navigation. It also includes features to share the website via social networks and to remove the mine-sweeping effect at the bottom left and bottom right hand corners.

Ironically, the links to all these features contain a hover effect on mouse-over (unlike the main menu button), which is a good usability practice. Additionally, the designer opted to change the user interface of the browser’s scrolling. In general, this is not a good usability practice, as it makes it harder for the user to locate and use the scroll. However, in this case the change was only done for aesthetic purposes, and the scroll interface does look like and behave like users would expect it to.

Conclusion

In conclusion, I feel that from a design and development perspective, the website is very well implemented. It makes great use of HTML5, CSS3 and JavaScript to provide a smooth and pleasant user experience. It is minimalistic and clean, so the user is not overwhelmed with clutter. From a usability perspective, though, I think that slight improvements to the navigation—especially making the main navigation visible at all times—will result in greatly improving the overall user experience, without affecting the whole look of the website.

Harry Vorsteher

When you’re greeted by a Flash animation explaining to you how to use the navigation (before actually seeing the website itself), well, it’s not a good sign. I personally think that the majority of users would do the same as I have, and close this animation before trying to understand what was being explained.

Users have become accustomed to certain conventions and are never eager to divert from the way they expect things to look and behave. Therefore, introducing a new, complex navigation mechanism was not a very good choice from the website’s designers (from a usability point of view).

Harry Vorsteher
The website greets its visitors with an animation explaining how to operate the navigation.

Upon closing this animation, users are greeted with two groups of navigation links, presumably linking to photo galleries. The reason why they were grouped in this way is not apparent until one clicks and drags the big wheel that lies at the center of the page. Depending on whether you opt to turn it clockwise or counterclockwise, this will scroll the photos to the right, or to the left, respectively.

Harry Vorsteher
The wheel mechanism that needs to be mastered in order to navigate through the website.

Provided that you notice and understand how to work the wheel navigation—as well as clicking on any of the categories as a means to see the photos in thumbnail format—navigation is painful, but bearable. But the excruciating pain comes when you opt to click on any of the thumbnails to see the large version of the photos.

The website background changes from light grey to a darker shade of grey, the photo occupies a large portion of the screen, and the navigation disappears. The mouse cursor also changes to a “left arrow” when you are close to the left-hand side of the screen, a “right arrow” if you are at the right-hand side, and a cross with the words “close” if you are at the very center.

This will enable you to see the previous photo, go to the next photo or close the current photo respectively. Unfortunately for the user, there is too much movement with the mouse cursor changing shape, the photo moving along the y-axis (depending on the mouse location), and an irritating pre-loader for every mouse click.

Harry Vorsteher
Horizontal and vertical scrolling (without scroll bars) is essential for viewing each image.

Moreover, if the user opts to click on the full-screen option, this removes the browser’s chrome, and further complicates navigation. In my opinion, this website basically sums up why Flash has been branded as evil amongst all usability and user experience professionals.

Conclusion

To sum it up, the user interface and the photos present in this website are truly nice and inspiring, as is the capability of the Flash developer. The navigation itself is very interesting and complex to develop. Thus, from a design and development perspective, the website is truly one to admire. However, I personally think this website is a usability nightmare, and it will inevitably lead to user frustration.

Because of its flexibility, Flash allows room for abuse. Unfortunately, several designers are more concerned with showing off their expertise rather than focusing on the user.

I am not particularly fond of the choice of using Flash instead of JavaScript libraries to create the animations for the galleries. Without resorting to recommending a re-design of the entire website, I think that some quick fixes would be to create a conventional menu which could be visible on every page of the screen.

Also, the photos in the galleries themselves should be re-sized to occupy 100% of the screen size (vertically and horizontally), thus removing the need for the users to scroll in order to see the full image. Finally, the images should be of a lesser resolution so as to minimize their loading time (and quite possibly remove the need for a pre-loader to appear for such a lengthy time as each image loads).

Justin Lerner

I love Justin Lerner’s navigation (and yes, it just happens that he also has an awesome name as well!). Joking aside, I think this website proves that usability can indeed be aesthetically pleasing. The main menu is conveniently and prominently placed horizontally, just below the logo. This is the exact place where users are most likely to search for it. It contains just five items, each of which corresponds to the five sections of the website. The font is large and visible, and each menu item changes color on hover.

Justin Lerner
This website adopts a grid approach so as to facilitate navigation.

Interesting too is the fact that the content belonging to each category is rendered more visible on mouse-over whilst highlighting the menu item to which that category belongs. When clicking the menu item or section, it expands in order to show the full content of that section. This implementation enables all of the website to be visible on a single page without cluttering the user interface.

Justin Lerner
The selected section takes center stage by expanding over the inactive ones. It is also highlighted in the second menu at the top.

What I am not entirely convinced of with this website is the need for the duplicate menu that resides just above the main menu. From an aesthetic perspective, it is modern and blends in very well with the overall look and feel of the website. However, from a usability perspective, having two menus with the same content usually confuses users as they try to click on the same-named section in both menus to see if it’s loading any different content.

Still, in this particular case, the smaller menu is doubling up as a sort of breadcrumb in order to show users which section they are currently viewing. Yet again, breadcrumbs have their own, specific usability guidelines, and it is recommended that they are adhered to.

Justin Lerner
The secondary menu (brown) replicates the same items as the main menu (grey).

Conclusion

In general, I feel the designer here did a great job in blending great design practices and good coding techniques to provide an aesthetically pleasing (and generally usable) website. Slight modifications can be introduced to improve the usability without adversely affecting the design, such as removing the duplicate menu and replacing it with a breadcrumb trail (although I seriously doubt that a breadcrumb trail is needed).

Additionally, the website would be better off from a usability perspective if more white space is introduced and the typography is more contrasting, since one needs to hover over the content in order to distinguish it well from its background.

Shelton Fleming

My experience with the Shelton Fleming website was very particular as it started off on a bad note, but quickly transformed into a most enjoyable one as I browsed through it. What ticked me off initially was the first screen that greets you when visiting the website; this consists of a yellow box containing the word “Ideas” in grey, and a grey box placed next to it containing the word “Experience” in yellow.

Shelton Fleming
Visitors are greeted with a splash page-like screen that fails to explain the brand identity in an obvious way.

The apparent lack of navigational elements frustrated me because I mistook this page with a splash page (which is a big no-no in usability since users can’t stand them). It is only when revisiting this page (after spending some more time on the website) that I noticed that the conversion of ideas into experience is actually the company’s tag line. Viewed from this perspective, this makes sense from a user experience perspective, as it emphasizes the company’s branding.

Shelton Fleming
The website’s hierarchy and navigation is clearly indicated through imagery and normal conventions such as highlighting.

In fact, the concept of “Ideas” and “Experience” dictates the website navigation—each section resides at opposing ends of the screen along the horizontal plane. Hovering over each of the two sections reveals a vertical side menu with intuitively-named, visible menu items. Good usability practice is also implemented through the changing of the menu text on hover.

Also, the arrow that appears on hover is a good indication to the user that the content of each menu item will be displayed right next to it—something which actually happens when clicking on the menu items.

Shelton Fleming
Color is also effectively used to indicate hierarchy and navigation options.

Conclusion

Consistent and intuitive navigation, large sans-serif fonts contrasting sharply with their background, unobtrusive imagery, and ample use of white space makes navigating through this website an enjoyable experience. Still, I would recommend removing the splash page-like design that is set up to greet visitors. It offers very little information about how it should be interpreted. Moreover, there is a very strong branding element throughout the website—thus eliciting very little need to have a page at the beginning that risks irritating users.

Chris Wang

This website prominently revolves around the projects that Chris Wang has undertaken. In fact, the first thing that one sees is a list of project titles and accompanying icons that open up in an accordion style when clicked on (revealing a gallery of images related to the project in question).

Chris Wang
At first glance it’s not immediately evident that this is a list of projects undertaken.

The project titles have a sleek orange transition on mouse hover which indicates that they are clickable. One point of criticism would be that the list of projects is not immediately evident as to what they are—the word projects next to the first listed item is a grey barely lighter than the background.

Chris Wang
The accordion effect is coupled with a horizontal gallery of the project being viewed.

Additionally, the website offers a handy keyboard navigation mechanism that uses arrow keys to enable rapid (albeit sequential) browsing of the projects.

Chris Wang
A horizontal dark yellow fill is used to indicate what is clickable.

Conclusion

Overall, the navigation is quite intuitive. It is relatively easy to switch from one project to another, and to drill down to see more screenshots from the same projects. One aspect that can be improved is the ability to close a project after viewing it, since a project always needs to be open at any given point in time. Although this first project will be replaced by clicking on a new one, the project currently being viewed takes up precious real estate that would be better used by showing the list of projects.

Jessica Caldwell

This website makes extensive use of mine-sweeping for the purpose of navigating, effectively breaking all navigation usability conventions. In a desperate attempt to find information about the owner of the website, I scrolled below the fold and located the footer which contains a list of non-clickable items grouped under the titles “Agencies” and “Brands”. The only links in the footer are those for social media and portfolio websites of the website owner (all of which link to external websites).

Jessica Caldwell
Navigation in this website is only visible on mouse hover.

Defying the odds that a user would still attempt to browse the website at this point, I decided to mine-sweep each diamond present in the home page in order to locate basic information (such as a biography of the author and contact details). It is at this point that I noticed that the diamonds contain both items that would be classified as projects done by the author, as well as the website information that I was looking for. In a typical mine-sweeping implementation, there is no apparent hint as to which diamond holds which information.

Jessica Caldwell
One of the projects uncovered by hovering over the diamond shapes.

Clicking on any of the items in the diamonds results in the content being loaded inside all the other diamonds, with the navigation retaining its place on the same diamonds. From a visual perspective, the result is quite appealing. However, this does not improve the usability in any way.

Jessica Caldwell
Clicking on any of the navigation items opens content in the same diamonds used for navigating.

Conclusion

The website offers plenty of white space—something that generally is good for usability. Aesthetically, it’s also very pleasing. Thus, in my opinion to improve the usability, the main focus should be on improving the navigation by placing a conventional menu in the top part of the website (maybe repositioning the logo towards the top left-hand side) and placing a simple menu to its right.

The diamond design for displaying content can be retained, as I think it effectively contributes towards the identity of the author. Still, I would make it occupy less vertical space so that the footer (or at least the top part of it) is visible above the fold. In this way, users will notice that the website contains a footer.

Whether or not to include clickable links inside the footer is something that the author ultimately needs to decide—replicating the top navigation inside the footer is never a good idea. However, converting the items inside the footer into useful, deep links (perhaps to specific projects that highlight the capabilities of the author) will help.

McCormack & Morrison

I personally think that with this portfolio website, the design agency McCormack & Morrison have done an excellent job translating their slogan “Good Old Fashioned New Media” into a visual experience. Indeed, the website has a strong brand identity and an almost retro feel, with powerful, bold typography.

The only links in the home page are the logo and an “About Us” link, correctly located at the top left and top right hand corners, respectively. Although the “About Us” link is disguised as a speech bubble icon, it makes use of the title tag so that it displays the text “About McCormack & Morrison” on hover.

McCormack & Morrison
The company’s tag line is used to create a strong brand identity to greet its visitors.

Perhaps less optimally located (although at least above the fold) is the “Our Work” button at the bottom right hand corner. I say “perhaps” because I wouldn’t classify this placement as a usability failure, since some people will actually look just above the fold of the website in order to locate a footer. Also, the link is in the form of a button—which in itself encourages users to click on it. Missing this button would really be a pity, because this is when you would realize that the website is indeed a one page website—it scrolls vertically to reveal projects undertaken by the agency, and horizontally to see more screenshots of the same project.

McCormack & Morrison
The projects can be viewed either by using the arrow keys or the navigation at the bottom of the website.

When viewing these projects, the “our work” button is replaced by arrow buttons that facilitate the browsing of each project. Although it is not mentioned on the website (which is a pity, really), the fact is that you can easily navigate through the projects using the keyboards’ arrow keys. This enables a very pleasant, yet rapid navigation. Another usability plus is that the website effectively makes use of the screen’s full width.

McCormack & Morrison
The company devotes a lot of importance to branding—hence the reason why each project starts off with the client’s logo.

Conclusion

In my opinion, McCormack & Morrison got most of their usability right. What I would introduce would be the ability to navigate through the projects in a non-sequential manner. While this isn’t a major issue with this website (as it only has four projects), it would be very tedious to have to go through a number of projects in order to reach the one that is interesting to the user visiting the website. Another issue is that there is no hint as to what project will be viewed next without actually having to visit each and every project.

Moka

Argentinian design agency Moka is well aware that its website will attract potential South American, Spanish speaking clients. So instead of offering the standard language changing mechanisms, it makes use of its website visitors’ IP address in order to provide the site in English or Spanish—depending on their location. In fact, manually changing the “/?lang=en” parameter in the URL to “/?lang=es” will yield the Spanish version of their website—this is good usability.

Moka
With an apparent lack of visible navigation, this website had to include navigation instructions at the bottom left side.

However, I would still provide a mechanism for users to know that the website is being shown in this language specifically for them, and provide a facility to change it to select other languages. This is because the user may be visiting the website using a device that is not theirs. Additionally, they may feel more familiar with one of the other languages that the website offers.

Moka
Samples of each project are rendered using the full size of the screen.

Back to navigation. The first thing that you’re greeted with is an abstract design along with the Moka tag-line. Having the company’s tag-line and logo prominently displayed is always good usability practice, because it informs your visitors what website they are visiting. But there is no apparent menu on the website.

Navigation becomes visible in the form of arrows that appear at both ends of the abstract design when one hovers over it. Implementing the website’s navigation in the form of mine-sweeping is never a good usability practice. To give credit to Moka, they do include instructions on how to navigate their website at the bottom left hand corner of the screen.

However, due to the placement (as well as the low-contrast the text has with the background), this is not immediately visible. Then again, if navigation is intuitive, one would not need to provide such instructions.

Clicking the navigation arrows enables the user to browse in a sequential manner through a number of projects undertaken by the company. As previously mentioned, the problem with this type of navigation is that the user needs to go through projects in a sequential manner without getting a hint of what the next project will show.

Also, the project description is barely visible, as it is located at the bottom left-hand corner of the screen. If the user fails to see it, then they will not be able to understand what they are seeing.

Moka
On mouse-over, the logo doubles up to show the “About Us” and contact information.

Another usability problem I found is that the logo breaks the convention of being clickable in order to go back to the home page. Apart from the fact that this practice is almost standard today, the website doesn’t offer any other mechanism to go back to the home page other than having to go back sequentially using the arrows.

This is something that is most likely to cause user frustration. Hovering over the logo provides the “about us” and the company’s contact information—not a bad idea in order to keep a clean user interface. However, it is not intuitive enough, since users will normally hover over your logo in order to go back to the home page.

Conclusion

To end on a more positive note, the website is clean, minimalist, provides ample white space, and prominently shows the company’s portfolio—all of these will provide a positive user experience. Introducing the ability to select which projects to view (and to view them in a non-sequential manner) would by far improve the user experience. Additionally, sticking to conventions such as providing better mechanisms to go back to the home page, being able to view the information about the company, and how to get in touch with them, would also be beneficial.

Final Thoughts

Even through a brief analysis of these portfolios, it is evident that a website can be usable while at the same time having a pleasant user interface. While there is still room for even more interpretation, it’s clear that one needs to be very careful to keep in mind that a website has one focus: enabling its users to achieve their objectives—this is ultimately what usability is all about.

In the case of portfolio websites, the users’ objectives may include knowing more about the owner of the website, viewing the projects undertaken by that owner, or contacting the owner. The objective to identify (as well as develop and design) what needs to be achieved is a tough process—but also one that will inevitably lead to a healthy return on its investment.

(il) (jvb)

© Justin Mifsud for Smashing Magazine, 2012.

0
Your rating: None

  

When users look for information, they have a goal and are on a mission. Even before you started to read this article, chances are you did because you either had the implicit goal of checking what’s new on Smashing Magazine, or had the explicit goal of finding information about “Navigation Design”.

After a couple of seconds of scanning this article, and maybe reading parts of the introduction, you may have started to ask yourself whether the information that you’re consuming at the moment is actually relevant to you—the user. Unfortunately (and as certain as death and taxes), if users cannot find the information they are looking for, chances are they will abandon their track, never to return.

Being the compassionate human being that I am, I’ll try to explain to you what this article is about, so you can make your choice either to continue reading, or not. This article is not about where you should place the menu of your website or mobile application, or about the number of options a menu should contain. It is also not about how you visually enforce the perceived affordance of a user-interface element, and why that is so important.

This article is about the tiniest of details that goes into creating the main centerpiece of your digital product—the construction of the elements of your navigation. This is the most important aid you can possibly give to your users as they are constantly seeking a reason to walk out on you.

Words, Words, Words

The first thing I do when I start to sketch out the information architecture of a digital product based on the requirements at hand is to blatantly label stuff. This is nothing unique—I simply need to formulate a label (most of the time accompanied by a short description) of all the possible information entities I discover to be able to reveal taxonomy and relationships between them. You might have a similar approach, using tools like post-its, whiteboards or even some digital application created for this purpose. This can be the inception of small problems that will constantly grow over time if we do not assess them correctly and in a timely manner: the labels are yours, and yours alone.

“Locate store” is your label of something that enables the users to find physical stores in a mobile application. “Commodities” is your label of a view that enlists all the goods your client wants to retail on an e-commerce site. “Start” is your label on the landing-page of a website. From a linguistic point-of-view, you can analyze the meaning of sentences, words and letters in different context for hours on end.

You can look at the structure in terms of morphology, syntax and phonology, or why not look at the meaning in terms of semantics and pragmatics. Fortunately, in most cases you do not have reach as far as asking a linguistic researcher about your labeling—people in your target audience will do just fine.

Navigation - Start
“This might be a good start!”

User-Testing Labels

So what is the easiest way of doing a sanity check of the way you express the information space? A really cheap and well-proven technique is Card Sorting. By using card sorting, you can transform your early taxonomy prognoses into folksonomy. Card sorting not only helps you to create an informed information architecture, it also enables you to get an insight to what keywords users relate to different activities in your product.

Another test is a Word Association game. Take all potential labelings of your navigation design and try them out on users asking them to “say the first thing that comes to mind” (in regard of what they believe to be found beneath such a navigation option—call it Think-Aloud Protocol with a twist. For example, you could say “Products” and the participant might respond with “Price, description, information, stock”. Market researchers have used this technique for decades to ensure that the right message is conveyed by their target audience when promoting products.

Two important questions that you need to find to an answer to at this stage are:

  1. Can the users relate the labels in the navigation design to their explicit goals of exploring your digital product?
  2. Are the meaning of the words metaphorically and visually separated enough not to be confused with each other?

Navigation - Change
“Ok, so lets change ‘Commodities’ to ‘Our Products’ and ‘Locate store’ to ‘Our Stores’.”

Removing Redundancy and Lowering the Reaction Time

In his master-piece “Don’t make me think”, Steve Krug writes, “When I look at most Web pages, I’m struck by the fact that most of the words I see are just taking up space, because no one is ever going to read them.” The more information we cram into our navigation, the harder it becomes for the users to quickly grasp the different options.

In 1935, the American psychologist John Ridley Stroop published “Studies of interference in serial verbal reactions” along with the now renowned “Stroop effect”. Stroop had found that given the task of naming the color a word was written in, took longer and was more prone to error if the word itself was the name of a different color (e.g. the word “Blue” written in the color red).

What we can learn from Stroops discovery is that we have a hard time not reading words—even though we are given a task explicitly instructing us not to. Have a quick look at the navigation in your design and ask yourself can be removed without losing its meaning.

Navigation - Change
“It seems I really donʼt need the word ‘Our’ in front of ‘Products’ and ‘Stores’.”

What Did Product ‘A’ Do In Situation ‘B’?

If you still have not managed to convince your employer that early user testing will pay off in the long run, you should at least have the courtesy to look at the benchmark. In what way have others solved their navigation design? Just spending some time looking at what others have done will help you reach valuable conclusions. This can be really time efficient and a good way to increase product usability, since users will be able to use previously acquired knowledge by simply recognizing similar terminology used in other products.

Navigation - Contact
“It does seem like all other websites in our business area have their contact information beneath an option labeled ‘Contact’. I better change ‘Reach us’.”

Symbols, Pictograms & Icons

Symbols, pictograms and icons in digital user interfaces are long gone from luxury to necessity. They contribute to signature, personality, recognition, and abstraction in our visual language. Furthermore, studies have given evidence suggesting that user interfaces have less favorable perceptions of usability and usefulness when only relying on textual expressions.

Why did I willfully write “Symbols, pictograms and icons” and not just “Icons” as we all love to call them? Before I start to use only the word “Icon”, I want to make sure we are all on board as to the differences (without digging too deep into the perilous depths of semiotic science).

What Is What

A symbol is typically defined as an abstract representation that requires conventional knowledge amongst the users for them to fully understand their meaning. People in some cultures have learnt that the meaning of an octagon shaped sign in a tone of red communicates “Stop.” So a symbol earns meaning over time through conventional use.

A pictogram on the other hand is usually defined as simplified pictorial representation. Pictograms—or pictographs—are, as far as possible, self-explanatory and most often do not require any deep previous learnings to make any sense. You often see pictograms (and ideograms) on signposts and in environmental design since they are least contingent to produce cultural misunderstandings. For example, a sign with an arrow indicating a direction.

The definition of the word “Icon” can be a bit vague depending on the context of use, but I like to say that an icon can be a sign, symbol, picture or image that stands for or represents an object in its resemblance as an analogy for it.

Whether you should use a symbol, a pictogram, an icon or a combination of all three to help you communicate information, all depends on the situation you find yourself in. Disregarding what we use, there is some common knowledge and analysis we can use to make sure that the receivers (i.e. our users) actually understand what we are trying to convey with our design.

User-testing Icons

There is an abundance of ways to perform user testing and peer reviews of iconography. My two absolute favorites are what I have come to call “tag-that-icon” and “connect-the-dots” mainly because they are quick to perform and they give great insights into users’ spontaneous opinions (plus, they are actually quite fun to prepare and execute).

You can perform tag-that-icon in one of two ways:

  • Method 1:
    Give several icon suggestions to the participants and ask them to tag them with whatever comes to mind within three minutes.
  • Method 2:
    Randomly show the participants one icon at a time during a day and ask them to come up with tags for each icon during 20-30 seconds.

The latter has most probably proven itself to be really good and better for testing different metaphors for one specific icon when the number of participants are low.

When you have a set of icons and labels that are closing in on finalization, you can then do connect-the-dots testing. All you need to for the test are printouts with one section of all your suggested icons (in a random order) and one section with all your labels (in a different random order). Then, give the printouts to the participants and ask them to draw a line between an icon and the label they think it is coupled with.

Navigation - Test
“At least I can be certain that all my suggested icons works for the ‘Directions’ menu option.”

Removing Redundancy Re-Visited

Just as with labels, avoiding redundant information in the icons is just as important. This is of course quite a bold statement from a designer, but there are many cases out there in the wild that simply add so many details to an icon that it starts to disrupt the users’ ability to interpret and differentiate them. This becomes most evident when you have common shapes in the icons that affects their intergroup saliency (i.e. the quality by which an object stands out relative to its neighbors).

Navigation - Circles
“Do I really need the circles? If I look at them briefly or squint, they all look the same—I better change that!”

Picture/Word Interference

Given a set of lined drawings of simple objects coupled with distractor words, humans show an clear effect of reduced response time in naming the drawn object. This is also known as Picture Word Interference (PWI). What PWI can be interpreted to mean is that when an icon is paired with a label in a way that the user does not connect together, it becomes much harder for them to work out the intended meaning.

For humans, a label with “Banana” coupled with a cucumber icon would be unclear as to what it is. What makes matters even worse for users in a navigation context is; “What should I really follow—your icons or your labels?” Avoid creating distracting stimulus through semantic interference between your icons and labels.

Looking at contextual consistency and standards in regards to iconography can really help you. There are some really great resources out there for finding inspiration, but you can also use them as a source of knowledge in finding trends and standards in iconography. If 9 out of 10 result with the term “Favorites” on Iconfinder.net that contain a star or a heart-shaped icon, then that may probably be a good starting point for your “Favorites” icon as well.

Navigation - Icons
“I have no idea what I was thinking. I think I have to throw away all of these, restart all over again and do some more user testing.”

Six Navigation Design Guidelines

After reading all of the above, you should have a good foundation to take your navigation design to the next level and place it in its intended environment along with the rest of the design and perform controlled user testing and see how they interplay. Here are 6 navigation design guidelines for you to consider as you embark the journey of designing the navigation of your upcoming project:

  • Clarity:
    Make sure that your navigation has a linguistic and semantic clarity that communicates to your users in an direct, efficient and adequate way.
  • Simplicity:
    Avoid using technical labels and icons that no one recognizes. Speak the language of the user rather than using complex terms and form factors unfamiliar to your users.
  • Saliency:
    Avoid having redundant and repetitive terms and shapes in your labels and icons that affects their intergroup saliency. This can easily influence your users ability to differentiate and interpret them as a whole.
  • Context:
    Look at the consistency and standards for labels and iconography used in the context that you are designing for. It is more efficient for your users to recognize rather than needing to interpret information that is unfamiliar to them.
  • Correlation:
    Avoid creating distracting stimulus through semantic interference between labels and icons. Reduce uncertainty and make sure that they clearly communicates one message as they are put together.
  • Tonality:
    Ensure that the tonality of the message is still consistent at the end of the design work. Colors, typography and form heavily affect the way your audience conceive and interprets the information.

Of course, not all types of navigation design contain both labels and icons. Some just use icons and some just use labels. you have roughly three cues for guiding your users: One factual (the label), one helpful (the icon) and then—the sometimes subliminal—character (color, typography and form). They do not always need to co-exist since different context requires different solutions. But your message can easily become blurred the fewer of them you use.

So ask yourself this: Can I afford to be vague in the way I communicate and help my users to reach their goal? (Hint: No!)

(il)

© Petter Silfver for Smashing Magazine, 2012.

0
Your rating: None

First time accepted submitter osman84 writes "I've been developing web/mobile apps for some time, and have managed to build up some decent experience about usability. However, as I'm growing a team of developers now, I've noticed that most of the young ones have a very poor sense of usability. Unfortunately, since I was never really taught usability as science, I'm having trouble teaching them to develop usable apps. Are there any good books that make a good read for general usability guidelines for web/mobile apps? I have a couple from my college days, but I'd like something more recent, written in the era of mobile apps, etc."

Read more of this story at Slashdot.

0
Your rating: None

Management requires people to recognize what reality is, not what they would like reality to be or what they think it ought to be, to avoid "cloud-cuckoo land". Game designers must do the same with their designs. Good playtesting is the key.

0
Your rating: None