Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

February 17 2014

10:00

February 06 2014

15:58

How To Code a Hidden Author Bio Display using jQuery

Advertise here with BSA


I was browsing through websites one day and came across one really interesting feature. Jennifer Perrin has a small blog on her website which uses a fixed top navbar. In the center you’ll find a profile avatar photo which displays her full author bio(triggered by hover). This is a really interesting feature and I’ve set out to replicate the idea using jQuery.

So in this tutorial I want to demonstrate how we can build a very simple HTML5 webpage recreating a full author bio display. The entire bio container is hidden until the user hovers over the avatar photo. Take a peek at my live demo to see what it should look like:

hidden author bio display hover tutorial screenshot

Page Setup

First I know the effect will be created using jQuery so I’ll be downloading a local copy for this project. It’s all pretty simple except for the hovering triggers based on event delegation. But we can get into that later in the article.

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Hidden Author Bio Display Demo - DesignM.ag</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://designm.ag/favicon.ico">
  <link rel="icon" href="http://designm.ag/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
  <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
</head>

I’ve also created a new stylesheet named styles.css. This has all my typical page resets along with a number of extra styles to position the bio and top navbar. To keep things simpler I didn’t use a whole lot of extra text or links within this toolbar. But for your own website it’s entirely possible to move things around as necessary.

  <header id="topbar">
    <div id="logo"><h1>MySite Logo</h1></div>
    
    <div id="avatar-icon">
      <img src="img/avatar.jpg" alt="Author avatar photo" class="authoravi">
      <div id="author-bio-box">
        <img src="img/avatar.jpg" alt="author big photo" class="bigavi">
        <h2>Jake Rocheleau</h2>
        <p>Jake is a writer and designer found all over the Internet. He specializes in UI design, frontend development, branding, and content strategy.</p>
      </div>
    </div>
  </header>

This is really the most important HTML on the webpage. Directly after the opening body tag I’ve setup a new header element as the base container. The logo and the avatar have their own separate divs positioned within this container. Whenever a user hovers on top of the #avatar-icon image, we display the internal #author-bio-box.

CSS Design

You should take a look over my basic styles and CSS resets if you’re unfamiliar with page structure. At the top I’m referencing an external web font named Montserrat Alternates. Beneath the top navigation bar I’ve setup a wrapper div which contains filler Lorem Ipsum text. You can see how the bio display works even when scrolling down through a webpage.

#avatar-icon {
  position: relative;
  width: 100px;
  margin: 0 auto;
  text-align: center;
  padding-top: 6px;
  cursor: pointer;
}

#avatar-icon .authoravi {
  width: 55px;
  height: 55px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

/* header top bar */
#topbar {
  display: block;
  position: fixed;
  top: 0;
  width: 100%;
  min-width: 750px;
  height: 70px;
  padding: 0 45px;
  z-index: 9999;
  background-color: #6e7cc9;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#6e7cc9), to(#6a74af));
  background-image: -webkit-linear-gradient(top, #6e7cc9, #6a74af);
  background-image: -moz-linear-gradient(top, #6e7cc9, #6a74af);
  background-image: -ms-linear-gradient(top, #6e7cc9, #6a74af);
  background-image: -o-linear-gradient(top, #6e7cc9, #6a74af);
  background-image: linear-gradient(top, #6e7cc9, #6a74af);
  border-bottom: 1px solid #53597c;
}

To keep this avatar centered in position I’m using margin: 0 auto on the fixed-width container. We also need a relative positioning so the interior author box can use absolute positioning. #avatar-icon becomes the new container for this absolute position, as opposed to the entire body element.

Using a fixed position on the #topbar header is key for the navigation to follow along with the user. I’m using large padding on the HTML body so everything on the page gets pushed down beneath this fixed bar. Using the CSS property top: 0 will force this bar to stay fixed at the top of the page, while the other content appears below.

/** bio box **/
#author-bio-box {
  display: none;
  position: absolute;
  cursor: default;
  width: 300px;
  top: 0;
  left: -100px;
  padding: 5px 15px 8px 15px;
  background: rgba(20,20,20,0.9);
  z-index: 99999;
  -webkit-border-radius: 0 0 7px 7px;
  -moz-border-radius: 0 0 7px 7px;
  border-radius: 0 0 7px 7px;
  -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.6), -1px -1px 3px rgba(0,0,0,0.5) inset;
  -moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.6), -1px -1px 3px rgba(0,0,0,0.5) inset;
  box-shadow: 1px 1px 4px rgba(0,0,0,0.6), -1px -1px 3px rgba(0,0,0,0.5) inset;
}

#author-bio-box .bigavi {
  width: 95px;
  height: 95px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

#author-bio-box h2 {
  display: block;
  font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif;
  font-size: 2.5em;
  line-height: 1.5em;
  text-align: center;
  color: #fff;
  cursor: text;
  font-variant: small-caps;
  letter-spacing: -0.03em;
}
#author-bio-box p {
  display: block;
  font-size: 1.5em;
  line-height: 1.35em;
  color: #fff;
  cursor: text;
}

Finally we get to the hidden author box and other internal elements. The #topbar div uses a z-index of 9,999 so that it appears on top of all other page content. Since we need this author bio to appear on top of the bar I’m using 99,999 z-index to setup the correct layout.

Width is fixed at 300px but since this bio is offset in the center, it won’t appear correct. We can’t use absolute positioning because the content itself will appear outside the boundary box. It’s smarter to use a negative left margin to reposition the author bio exactly where it should appear. Note this value should also be changed as you update the bio box width, so keep this in mind when adjusting for your own project(s).

jQuery Display Effects

Possibly the most confusing piece of my jQuery code is event delegation with the .on() method. By using the body element as my selector it works like an updated event handler to also bind events onto hidden or dynamically-appended elements. Check out this Stack Overflow post to get a better understanding.

$(function(){
  $('body').on('mouseenter', '#avatar-icon', function(e){ 
    $('#author-bio-box').css('display','block');
  });

  $('body').on('mouseleave', '#author-bio-box', function(e){
    $(this).css('display','none');
  });
});

Also worth noting are the mousenter and mouseleave event triggers. mouse over/out will trigger if the user re-hovers something other than the target element. So if we open the author bio and the user hovers the new avatar image or the bio paragraph, it would see we are hovering something new and close the whole box. Mouseleave will only trigger when leaving the entire container – much safer and provides exactly the effect we need.

So once the user hovers onto #avatar-icon we immediately display the author bio box. And once the mouse leaves those boundaries this box gets re-hidden from view. Truly a simple yet powerful script if you know how to use it.

hidden author bio display hover tutorial screenshot

Final Thoughts

I can admit that this solution probably wouldn’t work best on all websites. But if you’re designing a small author-based blog why not try it out? It is a really interesting concept which is perfect for any fixed-width title bar. Feel free to download a copy of my source code and let us know what you think in the post discussion area.


Advertise here with BSA

November 04 2013

10:00

When Flat Design Falls Flat

Flat design is the most popular trend in UI design right now.

Superficially, flat design is simple:

  1. Don’t use gradients, shadows and textures
  2. Use simple shapes, bold colors and clear typography

I believe that a few prominent flat designs sacrifice usability and best practices such as consistency for the sake of aesthetics — and this is what I’ll primarily be talking about. But first, I’d like to discuss flat design in a historical context.

Flat Design’s Origin

"A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away."

- Antoine de Saint-Exupery

Skeuomorphic Design

Flat design is a reaction to its predecessor, skeuomorphism.

Skeuomorphs are user interfaces designed to look like real-world objects.

For example, the UI below resembles how a real-world audio compressor looks and functions:

Source: Klaus Göttling

Skeuomorphs started in the 1980s as a way to ease people into computer interfaces.

Up until recently, Apple was skeuomorphism’s biggest champion, embracing the design philosophy in all of the company’s UIs and guidelines.

For instance, the old Apple Safari icon is instantly recognizable as a compass — it has shadows, gradients, and fine aesthetic details compared to its flat counterpart:

The Purpose of Flat Design

Flat design as a design approach strips away all the aesthetic frills, leaving behind only the essentials.

In a way, I see flat design as just another name for modernism, defined by a generation of UI designers who grew up with computers and have found skeuomorphism to be unnecessary.

No more gradients, drop shadows, and textures. Just beautiful typography, simple icons and shapes, vibrant colors to help establish visual hierarchies, and, most importantly, a deeper attentiveness on ease-of-use.

Flat design is driven by a desire for a more efficient and user-friendly interface.

That’s the idyllic purpose of flat design, but the current reality is so disconnected from it.

Issues with Flat Design

While there are plenty of great examples of flat design, there are also plenty of bad ones.

iOS 7′s UI Inconsistencies

Before the mobile operating system’s debut, rumors flew around: With new leadership from Jonathan Ive, iOS 7 was finally going to ditch skeuomorphic design and go flat.

And it did.

Take a look at the comparison below when iOS 7 was first announced:

Source: designmodo.com

Skeuomorphic elements are gone. No more highly-stylized icons and faux wood trim.

What’s wrong with iOS 7?

It’s inconsistent.

The icons look glaringly out-of-place, as if they were designed by different teams (and they probably were).

Some icons have gradients. Other icons don’t.

Of the icons that do have gradients, sometimes the gradients go in different directions:

Line thicknesses vary.

Symbolic representations of some icons are oversimplified and are sometimes meaningless. The Game Center icon, for example, is a group of colorful, glassy-looking circles:

What does the Game Center icon mean? How does it relate to gaming? If there was a symbolic meaning behind the icon, it’s too obscure for most people to know, thus making it a poor metaphor.

Other symbolic representations are overdone. The Newsstand icon, for example, is too complex and fine-detailed compared to its neighbors:

Consistency is crucial in creating a user-friendly design. Flat or not.

Usability Issues That Come From Being "Too Flat"

Okay, so no gradients, no textures, no drop shadows.

Keep things consistent.

And try to make it look modern.

That’s it? Piece of cake.

But there’s more to it than that.

Like any good UI, a good flat design should make usability the topmost priority.

Flat design aesthetics need to go hand-in-hand with usability. And if a decision had to be made between aesthetics and user-friendliness, the latter should be prioritized over the former.

Functionality has been neglected in some UIs that have adopted a flat design. Take Windows 8 for instance:

Source: mobiletechworld.com

Window 8′s UI is radically flat. Its brave use of bold colors and tiled Modern UI design are fresh, positive steps for the Windows brand.

But its main issue is usability.

With Windows 8, Microsoft tried to apply a tablet experience onto a desktop.

It didn’t work.

Window’s flat Modern UI (formerly known as Metro UI) is not intuitive for someone using a keyboard and mouse. According to Soluto’s Monthly Insights Report, between 44-60% of all Windows 8 users (desktop and tablet) are opting for the old interface over the Modern UI option.

Though flat design is supposed to make things easier, many people still find the old interface more user-friendly.

Jakob Nielsen ran usability tests on Windows 8 and noted several issues with its UI. The main issue Nielsen found was how the operating system’s flat design made it hard for users to know if things are clickable or not.

Source: nngroup.com

While the new Windows 8 icons are elegant and clean, they don’t appear actionable. Without a gradient, shadow, or just something that makes them distinctive, it’s hard to tell what’s clickable and what’s not.

Flat design can sometimes be so flat that it hurts usability.

If a user interface is "too flat", actionable elements can be lost in a sea of flat elements that all look the same.

There are even some concerns with iOS 7′s Control Center being "too flat":

Without any good visual hints, it’s not obvious which objects you can interface with.

Solution: Almost-Flat Design?

So how do you remedy issues with flat design? Almost-flat design.

Almost-flat design is an approach that chooses flatness only when it improves usability. It doesn’t categorically say or imply that gradients and drop shadows are evil.

Almost-flat design permits subtle shadows and gradients to create dimension, distinction, visual hierarchies, visual cues, and boundaries.

Gmail’s Almost-Flat Design

Clean and consistent, Gmail’s recent UI redesign is easy on the eyes. It’s clear that Google’s designers love flat design — they’ve been moving towards flatter and flatter UIs as of late.

Source: idownloadblog.com

However, hover your mouse over a button, and you’ll see the hover state has a slightly different color gradient as well as a useful tooltip:

These subtle aesthetic effects give users visual cues that the object is important and that it is actionable.

Users instantly recognize buttons in Gmail as clickable or tappable without the need for over-the-top embellishments ala skeuomorphism.

Crucial interface elements are easily accessible. There’s no need for twenty buttons to be visible at once because Gmail’s UI employs progressive disclosure intelligently:

The Future for Flat

Gmail’s interface is exactly what flat design is supposed to be:

  • User-friendly
  • Consistent
  • Clear

iOS 7′s and Windows 8′s versions of flat design often sacrifice usability and well-established design best practices for flatness.

To be fair, both Apple and Microsoft are listening to criticism.

Before iOS 7′s release, Apple addressed some usability issues such as updating the slide to unlock function with an arrow pointing to the right to gives users a better visual cue, and they have tweaked the color gradients for the Safari and Mail icons so the operating system’s app icons are more cohesive.

And Microsoft just released Windows 8.1 which will allow users to bypass the Modern UI interface entirely, going straight to the desktop version instead.

Ultimately, good design — whether it’s flat or not — should aim to address problems for its users through clear visual communication, efficient design, and user-friendliness.

Related Content

About the Author

Rick Debus is the founder and CEO of Signazon.com, a national e-commerce printing company based in Dallas, Texas. With over 15 years of web design and development experience, he’s passionate about bringing unique and innovative solutions to the Internet. Connect with him on Google+.

The post When Flat Design Falls Flat appeared first on Six Revisions.

October 28 2013

15:06

Introduction to A/B & Multivariate Testing in Web Design

Advertise here with BSA


Anyone who is familiar with increasing website conversions has probably heard about A/B testing. It is a way for webmasters to display 2 variants of the same page out to their audience at random, and then gauge results based on user performance. A/B testing(or split testing) is very popular on sites where users are more interactive on the page. Think about projects like social networks, SaaS products, e-commerce shops, business portfolios, etc.

split testing ab dribbble shot philip clark

There is also a higher stage of this process called multivariate testing. Here you can include more than just 2 options which may range out to A/B/C/D+ testing. The concepts are all similar but you’ll need to run tests for longer in order to acquire accurate results. In this guide I want to introduce the idea of split testing and how webmasters or project directors can get started.

What to be Testing?

This is a common first question and it’s completely reasonable to ask. You want to think about areas on your webpage, newsletter, or other digital interface which could be improved for an easier user performance. Blog headlines, sidebar advertisements, main navigation links, anything which should be commonly accessed by users is fair game.

The goal is to see which of your 2 designs performs best in a general 50/50 split of your traffic. You want to determine the average percentage of users who click your headlines more frequently, or click on the quicker, or something like this. It’s all about “fixing” your website’s first impression to get users more interactive on the areas you want them to be interacting with.

Online Tools

I would recommend a list of tools, but many of them do charge money for a full account. SaaS products have become more relevant and it is often easier for webmasters to pay money to a 3rd party service and have them manage the backend.

If you want a free product then definitely try out Google Website Optimizer. Their old URL has gone down and the service is now combined into Google Analytics. But it is completely free to use and directly ties into your Analytics traffic results. This is the best way for a new tester to dive right into the process.

visual website optimizer vwo homepage layout screenshot

But when you know you want something more detailed, I would highly recommend Visual Website Optimizer. You can signup for a free plan which has some pretty relaxed limits. It does include a majority of the paid plan features – however you are limited to testing only 1,000 visitors per month. For high-traffic websites it’ll take a lot longer to obtain useful results. But on low-traffic websites this is a great way to start manipulating your interface and seeing how it affects conversion rates.

Newsletter Designs

Not every website needs to or should run a newsletter. But for larger communities it is the perfect way to keep people visiting over time. You can include new items for sale, free downloads, or recent blog posts. And it is a great way to check out the response from visitors onto your internal landing page(s).

A/B testing for newsletter designs is much more common than you might think. It is somewhat easier than testing a website, and it can be handled by many e-mail delivery services. Both Campaign Monitor and MailChimp offer split tests as a part of their system. You can build two distinct email layouts and have them divided into a rough 50/50 split out to your subscribers.

email newsletter ab testing split multivariate mailchimp diagram

Obviously your goal for testing here is the same as anywhere else. How can you redesign buttons, links, headers, and content to engage visitors into clicking through to your website? Once subscribers can flesh out your newsletter they will be more likely to actually read what it says. Maybe one of your links or headlines gets somebody curious and they go through your entire landing page.

Web copy is just as powerful as small design changes. Many case studies online talk about this minor difference which can have a tremendous impact on your conversion rates. Don’t try to assume minor updates are silly and will have no effect, because you may be surprised when you see the results!

Testing in Phases

I want to add that you can’t give up too easily on this stuff. Waiting around for 5,000 visitors may not be enough of an audience to completely gauge how you changes are working. Don’t be too steadfast to move onto your next idea without allowing enough time to pass.

The best way to manage your A/B testing is in phases of updates. Either look for small wins through single-element updates, or try updating a lot on the page and see which version of the layout works best. These two scenarios are both helpful and they can both be run using an A and B option. But what you are testing for will play a huge role in the process.

android ux ui testing mobile app screenshot dribbble

If you feel more comfortable doing minor changes between design iterations this is another solution. Just be sure that you leave time for enough visitors to check out the page and give you some helpful feedback. Writing down a full list of ideas can be a great start towards figuring out what you hope to test, and how these tests may improve the percentage of user interaction.

Related Websites

There are some really cool blogs online which discuss the ideas of A/B testing. Some include tips while others focus on case studies and real impactful results. Check out some of these links if you want to learn more.

Closing

There are plenty of similar online articles which delve into the A/B testing process. I would greatly recommend looking for case study articles in Google. These will provide context for what other webmasters have tested, and what the results were. It may actually save you time in the long run when brainstorming ideas that you should be checking out on your website. A/B split testing most likely isn’t needed for every website, but when understood properly it can provide value into any creative project.


Advertise here with BSA

October 14 2013

15:00

The Problem with Android is Choice

Android is flexible. Most reviews tout that as a key advantage of the operating system, particularly when it’s being compared with iOS.

To quote recent switcher Andy Ihknato:

Android has a consistent core philosophy that I find instinctively compelling: why wouldn’t a phone give its sole user a vote on how their device works?

Here’s why that’s a bad idea:

  1. Choice reduces user satisfaction.
  2. Choice reduces usability.
  3. Choice reduces product quality.

I’ll explain in a moment. But first, let’s see how choice plays out in the Android world.

Android: A Layer Cake of Choices

So you’ve decided to buy an Android phone.

Great! Which one?

Verizon (a top U.S. mobile service provider) offers you this dizzying amount of options to pick from: G2, Lucid 2, Spectrum 2, Enact, and Intuition by LG, Galaxy Note 3, Galaxy S 4, and Galaxy S III by Samsung, One and Droid DNA by HTC, Moto X, Droid Maxx, Droid Ultra, Droid Mini, Droid 4, and Droid Razr M by Motorola, Hydro Elite by Kyocera, Marauder and Perception by Pantech, and the G’zOne Commando 4G LTE (really, this is the name of this smartphone) and G’zOne Commando by Casio.

Thankfully there are filters on Verizon’s site. You can filter for DROID, 4G Technology, ECO Specs, Certified Pre-Owned, Global Ready, Physical Keyboard, NFC, and Accessory Bundles.

What? Fine.

At some point you make a decision on which phone to buy.

You download a bunch of apps and set up your home screen. Good news! You have choices here too.

There’s a drawer with an alphabetical list of all your apps.

On some phones, there’s a Favorites page.

You can have a potentially infinite number of home screen pages (which is different from the Favorites page).

And on each of those, you can create folders.

There’s a dock at the bottom that’s shared amongst all the home screens, but not the alphabetical list or the Favorites page.

You can set up shortcuts on your lock screen that look like — but are different from — the dock.

And don’t forget: You can have multiple copies of the same app in the same place:

There's more than one pile of crap here.There’s more than one pile of crap here.

Later, a friend texts you a hilarious photo. You’d like to save it for later. You’re presented with these choices:

Note that this dialog window has a scroll bar.

And that list of choices only gets longer because each app you install adds itself to it.

Over time — talking to friends, reading blogs — you’ll realize you’ve barely scratched the surface of Android choice.

You can install custom lock screens!

Launchers!

Replacement phone apps!

Different fonts!

Each choice comes with its own set of choices: entire marketplaces of themes, screens upon screens of settings, a never-ending buffet of choices. Some conflict with each other, some are crashy, some slow down your entire Android experience.

Sounds like fun, right?

Choice Reduces Satisfaction

As a society we’re deluded about choice.

We perpetuate the myth that more is better — yet there’s research going back decades to suggest the opposite.

Perhaps the most famous is Sheena Iyengar’s 1995 "jam jar study", which showed a 4x increase in options decreased purchases by 85%.

Iyengar’s study is not alone. Barry Schwartz’s excellent book The Paradox of Choice covers the problem in detail. Of particular interest is his discussion of how choice affects buyer’s remorse. The more choices you consider, the more likely you’ll be to regret your decision, and the less satisfied you’ll be.

That’s bad enough in a traditional retail environment, where you make your purchase and move on. But it’s worse in the world of software, where apps are cheap and each app provides its own array of options.

On Android, it’s easy to end up in an infinite, layered world of choices; never quite satisfied, never quite sure if what you’ve got is the best, and — critically — never done.

Choosing vs. Tinkering

There’s a distinction here between choosing and tinkering.

We all have friends who tinker with their cars, their bikes, their computers. It’s a hobby, and the constant fiddling is a destination in itself rather than just the journey. For such hobbyists, a plethora of choices is necessary: it’s the fuel that powers the tinkering.

I think many who extol Android’s flexibility fall into the tinkerer category, including some tech bloggers. They love all the ways they can customize their phones, not because they’re seeking some perfect setup, but because they can swap in a new launcher every week. That’s fun for them; but they’ve made the mistake of not understanding how their motivation differs from the rest of us.

Choice Reduces Usability

We often talk about the best products being simple. But that’s not quite it: The best products are opinionated.

A great product is one you can disagree with because its creators have made choices on your behalf. If they’re good product designers, they’ve made good choices, and the result is that much-lauded simplicity.

But if they’ve punted too many times — resolving tough decisions with a checkbox here, a slider there — then they’ve shifted that responsibility onto you.

It’s like going to a restaurant, ordering, and having the waiter ask you, How much coriander do you want on that? OK, and should we cook it for twelve minutes or for eighteen?

Choices can be a burden when you’re qualified to make them, and a disaster when you’re not.

Do you know what to choose here?Do you know what to choose here? I don’t. I bet someone at Google does. Perhaps they could make the choice for us.

Most of us (even us product designers) don’t want to be product designers when we’re using someone else’s product. We just want to live our lives.

Choices vs. Preferences

It’s also worth distinguishing between choice and preference.

Preferences can be a great way to support multiple use cases, or subgroups in your user base. Vertical vs. horizontal layout for widescreen vs. normal displays. Small vs. large fonts for young vs. old eyes.

But there’s a fine line between valuable preferences and excessive choice. Everyone has preferences, including every member of your product team. (Indeed, failure to resolve team disagreements can be a source of user-facing choice.)

Catering to all individual preferences creates a bloated, bland product. Not to mention a UI that’s impossible to navigate.

Furthermore, people are notoriously bad at identifying what we want. And what we do want is influenced heavily by what we know — our expectations are constrained by our experience.

To deliver a product that will improve people’s lives, we must sometimes break expectations and force users through a period of adjustment. The long-term path to user satisfaction sometimes involves short-term dissatisfaction.

Apple has been remarkably good at this type of product development — from OS X to their Intel transition to iOS 7– breaking away from past choices to provide a streamlined, initially unfamiliar product that’s forward-looking.

Microsoft, on the other hand, tends to retain all the choices of the past, as Windows 8′s dual UI illustrates. That’s a shame. No matter how good Metro might be, a sizable number of users will revert to the old UI because they know it. And that ensures Metro will remain sup-par: Microsoft’s product teams can avoid tackling difficult product design problems because users can always resort to the old experience.

The situation is similar on Android: by allowing extensive customization — and by permitting vendors, carriers, and users to replace built-in apps with third-party ones — Android’s product team has excused themselves from finding optimal solutions and making tough decisions.

Choice Reduces Product Quality

It takes a lot of code to produce software. And bugs are unavoidable because developers are human, and because that’s what happens with a system whose many, many moving parts are constantly changing with an incomplete awareness of each other and the dependencies among them.

To test effectively, it’s necessary to replicate as many of the conditions under which the product might run as possible. And to fix a bug, a developer needs to reproduce it–make it happen again so she can see what’s really going on.

So, software teams spend a huge percentage of their time finding and fixing bugs.

The more variation, the more testing, and the harder it becomes to replicate a bug when it’s found.

This is why Android’s fragmentation — the array of Android versions and devices an app must support — is such an issue.

We can’t control fragmentation, but we can avoid exacerbating it. When we introduce excessive choice, we increase the number of possible environments in which something could break, and the number of conditions we have to test. That increase isn’t additive, it’s multiplicative: the number of conditions downstream of a choice is multiplied by the number of options it provides.

On its own, this isn’t an excuse for eliminating choices. But it is the technical cost those choices incur — something we ignore at our product’s peril.

This is also why seemingly harmless choices aren’t so harmless; why "Let’s just stick a checkbox in Advanced preferences" isn’t an answer.

We need time to test and debug. And when we do, something else has to give.

The problem of choice isn’t limited to Android. Android is just a current, prominent, and severe example.

Simple, elegant, usable, opinionated products are few and far between because the product teams willing to make hard choices are rare.

So, what have you left out of your product lately?

Epilogue: Dealing With User Feedback

With Emu in beta, we get a lot of feedback.

We love feedback — it’s wonderful that people care enough about our product to email us.

But we don’t implement every request — that way lies exactly the sort of bloat I’ve discussed here.

To begin with, the loudest users aren’t necessarily the most typical; someone might request a feature that would genuinely improve his experience, at the expense of most other users.

More importantly, user feedback requires sleuthing. Users often don’t know, or can’t articulate, what they really want. So we look at each request and ask, What is this person really trying to accomplish? How do we best serve that goal?

Sometimes the result will be more effective — and better-suited to the underlying need — than whatever the user requested in the first place.

And that sort of innovation is incredibly satisfying.

Related Content

About the Author

Dave Feldman is a product designer with a background in user experience, product management, and front-end development. He’s the co-founder and chief product officer of Emu. He’s held positions at Yahoo! and AOL. Check out his website Operation Project and follow him on Twitter @dfeldman.

The post The Problem with Android is Choice appeared first on Six Revisions.

September 27 2013

14:01

Web Design Concepts to Entice User Interaction

Advertise here with BSA


Landing pages and social websites thrive on user interaction. It is the grinding mechanism which keeps people visiting your webpage over and over again. How you design an interface can say a lot about how people should maneuver through menus, links, buttons, and other similar page elements. Each solution is different and there certainly isn’t any prominent correct answer.

In this article I want to go over some more popular web design concepts for creating alluring interfaces. You want visitors to be swept away by the design and practically fall in love with your website. A beautiful design coupled with a beneficial experience is what can help your web application or website layout stand apart from the rest.

Relating to the Interface

The key to any enticing interface is to make the user wants to interact with your website. Obviously the primary reason should be their interest in your product or service… you want people registering an account because they actually want to. But it helps to give them a little incentive by designing catchy interfaces which practically sell themselves.

pinterest create a new board form ui design screenshot

Consider the newer photo sharing startup Pinterest as one example. All of their forms use big readable typography with CSS3 gradients on the buttons and input fields. Also the glowing borders are a nice touch to inform the user which field is currently highlighted. Even more importantly is that all the page elements blend so nicely into the website color scheme. Interacting with forms on Pinterest feels completely natural – as it should be on any website.

tumblr website buttons input fields new post screenshot

Tumblr is another case example where the buttons and input fields have been carefully crafted to blend nicely with the layout. The uniform posting box looks very similar for any type of content including photos, videos, or even plain text. The more you can blend forms into your website, the more relatable they will appear to your visitors.

By creating this natural connection it evokes a sense of safety and commitment. People want to fill out your forms and interact with the page because the elements don’t appear like they’ve all been thrown together at the last minute. Put in some TLC to your website’s form design and I promise it will pay off in the long run.

Design Elements that Pop

Similar to relatable interfaces we also want a design which can practically jump off the page. To phrase this another way, visitors should be able to determine which page elements are interactive and which ones aren’t. You can accomplish this task through all sorts of different methods like border styles and box shadows.

rightsignature homepage layout css3 design screenshot

The homepage design for RightSignature is one good example because of their advancing design trends using CSS3. The top navigation and right sidebar areas remain fixed on the page, as they also include the most interactive features. The visitor can scroll through all of this information while simultaneously registering for a new account. Also take note the registration form only requires two simple fields for the username and e-mail address. A lower barrier-to-entry will get a lot more signups because it takes less time and less hassle from the user’s perspective.

dribbble textured popular shots layout design

I am also a big fan of Dribbble’s layout because of the many design changes which have taken place over the years. Dribbble has always been using a very similar layout style, except the colors and textures have been tweaked ever-so-slightly. You could even incorporate the idea of A/B testing into your website to determine which colors or UI designs would be most appealing to your audience.

Readable Content

It might go without saying, but readability is a huge factor to user interaction. People keep using content-based websites and social networks because of the ability to skim content and quickly recognize its purpose. Consider a homepage dashboard with all the latest news from a user’s feed. How can they quickly determine between a website blog post, a user status update, or a new photo album?

medium blogging posts users homepage layout screenshot

The new micro-blogging platform Medium has grown very popular in a short period of time, especially among tech-lovers and startup enthusiasts. Each blog is made to conform into Medium’s typical layout design which utilizes big typography – nice and easy to read even at a distance from the monitor. This not only makes people want to write more articles, but it also gets readers more willing to stick around and read through a post if the content is easily legible.

etsy products list web design interface layout

A somewhat related yet different circumstance may be found on Etsy. People come on here looking for custom hand-made trinkets or neat little gifts for friends. The product gallery is designed in a way that you can quickly check out what is for sale, how much it costs, who the seller is, and other types of related items for sale. It is one of my favorite growing marketplaces because the design is so eccentric that it immediately catches your attention. Also the products are generally unique and often not sold anywhere else, so it’s a marketplace of rare items with an extremely intuitive process for buyers and sellers.

Points and Profile Badges

Not all websites have the option of creating profile pages for each user. This is typically common amongst social networks and communities which thrive on user-driven content. Applying unique rewards such as badges or points will get people much more interested in using your product. Stack Overflow is one such example where you can earn points by linking to threads, answering questions, or even asking questions of your own.

github user profile kyle bragger screenshot stats repositories

Another great example can be found on the Github profile pages. Here you can see every repository created by a certain user, along with their work done in other people’s repositories. You can also find stats like their follower count and the total number of starred repos. Point systems work best if you build them on top of the existing website functionality. It is a motivator which gets people pushing to contribute more content and grow their profile on your website.

Uniform Layouts

One final piece of advice for improving user interaction is to get all your pages designed in the same fashion. Uniformity is very important as I outlined in the first section of this article. As people use your website more frequently they become accustomed to the interface. A uniform design helps people grow to expect certain interfaces to behave in a certain way, and people will gradually learn all the little tricks of how your website works.

reddit social news community simple design homepage layout

Possibly one of the largest case study examples would be on Reddit. This social news community allows people to register an account and submit, vote, or comment on news stories. It has scaled tremendously over just a few years as subreddits have grown proportional to the userbase. As more people get comfortable with how the system works, it becomes easier for them to engage deeper into the website and contribute even more content. Think about this concept for your own website and how you might implement uniform design techniques to improve the overall user experience.

Closing

These are just some examples of design trends you may try in your layouts. I have played with a number of fantastic web applications, and the best ones have always been designed with the user in mind. Focus on the end user and consider if your webpage is optimized for the easiest frontend performance. Additionally if you have similar ideas or suggestions on usable interfaces feel free to share with us in the post discussion thread.


Advertise here with BSA

August 20 2013

06:30

AfterLogic WebMail Pro v7: The Future of Webmail-Frontends


  

I switched to Gmail. Do you know why? Not because of the features, partly because of the spam protection, but what really got me was the design. I was tired of the webmail interfaces of the 90s. Every service out there went 2.0 except for webmail interfaces. They got stuck in the last century. Had AfterLogic WebMail Pro v7 already existed a few years back, I might not have made the switch. WebMail Pro v7 is a PHP solution, any ISP or corporate email maintainer should take a long hard look at.

May 24 2013

18:03

The Perfect User Interface: GoodUI Equips Web Designers with Solid Marketing Knowledge


  
goodui-w550

Jakub Linowski, UI designer from Toronto, Canada, is used to be working for the bigger brands. He obviously possesses knowledge not only in the field of webdesign craftsmanship but also in the field of marketing. The latter is what he conveys through his side project GoodUI.org. If you are a web designer interested in maximum conversion aka massive sales, you should definitely care for obeying what Linowski teaches you. Not each and every tip will be a fit to every project, though. Just as it is in real life, if the shoe fits, wear it. If not, don't...

August 10 2012

13:47

April 03 2012

11:00

How to Design a User-Interface Element in Photoshop

In this tutorial we will be creating a small user-interface element.  Most of the attention will be given to the slider, however we will do our best to improve the over-all look of the interface element. We will focus on the creation of a “filter” slider and a call to action button. We will try to achieve a nice color contrast by using a few tones of blue with a few gray tones. By adding really small details, we will improve the overall quality and look of our user interface piece. This tutorial is meant for designer of all levels, especially for beginners and intermediate level users with an approximate completion time of 20 to 40 minutes.

Final Result

Step 1

We will be starting this user interface element by creating a new document of the following size: 900px width; 500px height. It doesn’t matter what size you create your document, but it must be wide enough for us to have some “breathing space”. On the background, apply a pattern overlay style with a nice, subtle pattern. There are hundreds of awesome subtle patterns on SubtlePatterns.

Step 2

Create a white, rounded rectangle by using the Rounded Rectangle Tool (U). Mine is 310 pixels wide and 160 pixels high. Apply some drop-shadow to it, as shown in the screenshot.

Step 3

Add some white inner shadow.

Step 4

We will add some Outer Glow, which will be black. The outer glow with the stroke and drop shadow applied will give us a nice shadow all around the shape.

Step 5

Add the stroke to the shape. It must be a light-grey color (#b2b0b0). This will be the “base” rectangle which will be a shadow for the upcoming layers which will be placed over it.

Step 6

Create a new rectangle shape, it must be of the same width but the height must be 10 pixels more. Be sure that the new rectangle fits the upper part exactly, then apply some black drop shadow to it. Set the Blend Mode to: Multiply, Opacity to 25%, Distance to 1, Spread and Size to 0. Duplicate this layer then move it up by 2 pixels. Duplicate the last layer one more time and move it by 2 pixels up as well. Now you have a nice “stack” of well-styled rectangles placed one over the other. And, as you can see, the shape we’ve created in the first step now works as a shadow for all sides, except the bottom part (the effect we wanted to achieve).

Step 7

It’s time to create a new shape that we’ll color grey, again, use the Rounded Rectangle Tool (U). Be sure to set the Radius to 10px as we want to have our corners fairly round. This shape will be the base of our slider. Apply some gradient overlay styling as shown in the figure. I’ve chosen this light-maroon color because it will perfectly contrast with blue and grey colors, the ones we are going to use a bit later.

Step 8

Apply some stroke to the shape with a little bit darker color, which is: #c4b8b5

Step 9

Create a simple square of about 12 x 12px and align it on the slider bar. Apply all the styling shown on the screenshots below for a nice final result.

Step 10

Create 3 lines using the Line Tool (U). Two of them must be the same size while one should be 2 pixels smaller in height. This will make our buttons look better and they won’t have the “blank” look. Apply some white drop shadow to make the lines even more noticeable.

Step 11

Duplicate this pin and leave some space between them. You can leave as much space you’d like, because this will be our “marked/checked” area which is going to be highlighted.

Step 12

Use the Rectangle Tool (U) or Rectangular Marquee Tool (M), followed by the Bucket Tool (G), fill the space between the pins with any color. Apply some Gradient Overlay style of a nice light and dark blue, which looks awesome in combination.

Step 13

Add some dark blue stroke to the highlighted area to make it stand out and grab attention.

Step 14

By Using the Line Tool (U) and holding the SHIFT button you can create straight lines. Create some 5-7px sized lines and be sure to have an equal spacing between each. I have a spacing of 19 pixels between each line. Create enough lines to fill the upper part of the slider. All of them must be light grey colored (#ebeaea). If you’d like to make the “checked” part of the slider stand out more, you can create those blue colored lines under the slider. They will only cover the blue part of the slider (from the ending of the first pin till the beginning of the second one).

Step 15

Add some price tags over the lines. If you want to add the price over each line, you can, but you should keep in mind that this will mess up the layout a lot and will distract the user, that is why I decided to add the price tags only over the first and the last grey lines (the beginning and the end of the slider) and to the first and last lines which belong to the highlighted area.

Step 16

While the slider looks pretty nice, it doesn’t look very attractive by itself, that is why we will add some extra elements to make the interface stand out. By using a Sans-Serif font (I am using Helvetica, but Arial may work just great for you), add some text above the slider. Let’s assume this interface is for an e-commerce website; therefore we will add the name of the buyer and how many items are in his cart. As you can see there are 2 different rows of text, with different styling. The font size used for the name is 14px while the size for the cart statement is 12px. This will add more importance to the name, rather than the cart, that’s why it won’t bug the user about seeing a huge-sized text about how many items he has in the cart. The “cart” text itself is going to be highlighted by a applying a darker-grey color to it and adding some “underline” paragraph styling. Take a look at the screenshot for exact details.

Step 17

I have added a nice grey icon at the top right corner to show some extra info. My icon says that the website is using some kind of “Super-fast-shipping method”. You can find all kind of icons (vector, png, psd) on IconFinder

Result So Far

As you can see, we have done a pretty nice job tweaking the slider interface, but as you can notice, there is too much space under the slider and the bottom of the rectangle. We can either make the rectangles fit the current space used, or we can improve this piece of user-interface elements by adding a few more things which will make it definitely stand out!

Step 18

Create a black rectangle by using the Rounded Rectangle Tool (U) with a radius of 3 pixels. This will be the base of a “Call to Action” button. Apply some black shadow with an opacity of just 18% to give it a light-grey drop shadow look.

Step 19

Add some Inner Shadow to the button base. It won’t be so clearly seen right now, but when we change the base color to blue, the shadow will be clearly seen.

Step 20

Add some gradient overlay to the button as we obviously need to get rid of the black color. For this gradient overlay styling we are going to use exactly the same colors we have used to apply the Gradient effect to the highlighted area of the slider.

Step 21

We could add a simple stroke but because of the gradient effect applied on button, it won’t look all that good. For the stroke, we are again using the gradient effect, with a bit darker blue colors: #15488b and #1c60b9.

Step 22

Finish up this button by adding some “Buy Now” text with black drop shadow effect applied.

Success so Far:

As you can see, we have almost finished our slider. It isn’t a final result yet because there are some pixel-imperfections. While the pixelation isn’t a big deal for some, it should not be ignored. If you have a really quick look at the interface, you won’t see any imperfections, however, if you look at it for 10 seconds you can spot some really unattractive spots like the ends of the slider bar and the bottom corners of the base rectangle shapes.

By zooming in you can clearly see the pixelation that we talked about. This can be solved in a few ways, but we will go through a simple one. This isn’t the best solution because we are going to change the shapes a little bit, but we’ll easily get rid of these pixel imperfections. Grab the Rectangular Marquee Tool (M) and Bucket Tool (G) and start fixing pixel by pixel.

It works for us in this case because it’s a pretty small area to fix and won’t require a lot of effort. After you are done with one side, you can move to the other side and repeat the exact steps in order to get an acceptable result.

Final Result

Hope you’ve enjoyed this tutorial. Do share your thoughts with us in the comments!

March 29 2012

09:00

Mobile UI Design Patterns: 10+ Sites for Inspiration

Advertise here with BSA


Mobile UI Design Patterns: 10+ Sites for Inspiration

User interface design patterns are solutions to common design challenges, such as navigating around an app, listing data or providing feedback to users.

Mobile apps and sites have unique UI design requirements because, compared to their desktop counterparts, they’re used in smaller screens and, at least with today’s modern mobile devices, rely on fingers instead of a keyboard and mouse as input mechanisms.

Whether you’re designing a mobile app UI for the first time or in need of specific design solutions, these mobile UI design pattern resources will surely help!

1. Mobile UI Patterns

Mobile UI Patterns

Mobile UI Patterns is a great site to visit to see common mobile UI design patterns such as activity feeds and notifications. The patterns are organized into 20 categories so that you can easily find what you’re looking for.

2. Inspired UI

Inspired UI

Inspired UI is an excellent mobile UI design pattern gallery with over 1,000 screenshots of real mobile apps. Design patterns featured in the site include sign up pages and check-in user interfaces.

3. lovely ui

lovely ui

This site features common mobile app user interface elements such as buttons, lists and popovers. lovely ui was created by NYC-based interactive designer Diana Frurip.

4. Mobile Design Pattern Gallery

Mobile Design Pattern Gallery

This design pattern gallery is a supplement to UX designer Theresa Neil’s mobile design pattern book published by O’Reilly Media. This gallery features an anti-patterns section featuring UI design techniques to avoid. You can also view the design patterns on Flickr.

5. pttrns

pttrns

Over 30 mobile UI design patterns (e.g. splashscreens and walkthroughs) are featured on pttrns, a gallery site with large screenshots and a clean interface. The site is by Robin Raszka (founder of popular iOS development firm Tapmates) and chemiX.

6. Patterns of Design

Patterns of Design

This site seeks to present notable mobile app UI patterns from exceptional iPhone and iPad apps. Patterns of Design is by Will Simons, a freelance UX designer and project manager.

7. 4ourth Mobile Design Pattern Library

4ourth Mobile Design Pattern Library

This wiki resource is a general reference guide to mobile UI design patterns. It discusses a wide array of design patterns such as slideshows and pagination, to advertising within your mobile app.

8. Android UI Design Patterns

Android UI Design Patterns

This blog by German technologist/developer/Android user Juhani Lehtimaki publishes posts that cover Android UI design patterns. In each post, a design pattern is discussed and relevant screenshots from mobile apps are included.

9. android pttrns

android pttrns

android pttrns, inspired by pttrns (featured above), is a gallery of Android app UI design patterns. It currently only has a few patterns, such as action bar and tab bar.

10. Official Developer Documentation of Mobile Operating Systems

Mobile OS manufacturers typically have official docs geared for professionals developing for their platform. These docs often include guides on UI design patterns.

Related Content

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

December 29 2011

05:00

Cognitive Dissonance: Why Your User’s Brains Hurt

Cognitive Dissonance and The Choice Paradox

Cogni-Huh What-O-Nance?

A powerful cause of dissonance is an idea in conflict with a fundamental element of the self-concept, such as “I am a good person” or “I made the right decision”. The anxiety that comes with the possibility of having made a bad decision can lead to rationalization, the tendency to create additional reasons or justifications to support one’s choices. A person who just spent too much money on a new car might decide that the new vehicle is much less likely to break down than his or her old car. This belief may or may not be true, but it would reduce dissonance and make the person feel better. Dissonance can also lead to confirmation bias, the denial of disconfirming evidence, and other ego defense mechanisms.

Options

options-laptops
Everyone likes having options, right? I mean, if there was only one car ever made, regardless of how well it was built, or how cool it looked, there is nothing fun about being forced into a decision.

We want to personalize! We want the red convertible with the tan leather interior and the iPod hook-up, with custom rims. Green just won’t do! It’s this definitive decision that makes us happy, even ecstatic when we find the perfect [insert your idea of perfect here]. However, it is this same choice that can ruin an otherwise perfect experience.

Observed in many cases is the paradox that more choices may lead to a poorer decision or a failure to make a decision at all. It is sometimes theorized to be caused by analysis paralysis, real or perceived, or perhaps from rational ignorance. A number of researchers including Sheena S. Iyengar and Mark R. Lepper have published studies on this phenomenon.[2] This analysis was popularized by Barry Schwartz in his 2004 book, The Paradox of Choice.

I Want More Options… No, You Don’t

We are very busy people, we have schedules to keep, places to be, things to do. We don’t always have a gratuitous amount of time to make an informed decision and rely on what we’re presented with to help us make that choice. User Interface Designers, UX Professionals and hopefully “decision makers” know the value of a persons time, and ensure choices are as simple as possible.

Consumers have been bred to think more is better. We’re all guilty of it in some way or another but the fact is, choice suppresses conversion. We are more likely to be unhappy with our decision if we have too many options to choose from.

If we can not limit the number of options, there needs to be some method to narrow them down. This could be anything from a customer rating system to, putting the most common choice(s) up front.
options

Conclusion and Sources

Sometimes we can’t take away the number of options we’re asking the user to choose from. But we can try and solve for the best possible outcome. By giving the user a means to drill down their choices, or offering up a “Best Value” or “Popular Choice” we help minimize cognitive dissonance thus giving them a richer user experience.

When Choice is Demotivating: Can One Desire Too Much of a Good Thing?
Cognitive Dissonance Wiki
Changing Minds

Sponsored by

Made By Tinder

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)



Cognitive Dissonance: Why Your User’s Brains Hurt

September 26 2011

10:00

With Great (CMS) Power Comes Great Responsibility

Advertise here with BSA


With Great (CMS) Power Comes Great Responsibility

One of the biggest advantages of using a content management system (CMS) is that it allows developers to empower site owners with unprecedented control of their website.

Giving website owners the ability to create, edit and manage their web property has many benefits. However, having too many features and site-management capabilities can burden the client and can wreak havoc on a website.

Read on for the five most common mistakes web developers make in an effort to empower their clients.

Mistake #1: WYSIWYG Editor Overload

What You See Is What You Get (WYSIYWG) editors (or rich-text editors) are great features to install in content management systems because they allow content creators the ability to create, edit and manage web pages without the need to know HTML.

WYSIYWG editors are so useful to end-users that you’d find most open source content management systems with it enabled by default. For example, WordPress has the Visual Editor and it’s the default content-editing view.

But is it really a good idea to let your client center text and turn it purple? Probably not. Ever been to a site with blue underlined text that wasn’t clickable? How about a company website that have hyperlinks in bolded, black text? These probably happened because they had out-of-the-box, un-customized WYSIWYG editors, which usually comes with everything but the kitchen sink.

In fact, the first thing most of our clients ask about is if they can limit how much their editors can use formatting.

Consider customizing WYSIWYG editors to only have the following:

Text Formatting

  • Heading 1
  • Heading 2
  • Heading 3
  • Heading 4 (if needed)
  • Blockquote
  • Ordered and unordered lists
  • Italics
  • Bold
  • One or two special CSS classes for emphasizing or de-emphasizing text

Web Content Elements

  • Links
  • File upload/attach
  • Images
  • Tables (with instructions to use properly on tabular data only)

Get Rid of

Below, see an example of a rich-text editor with too many options and features. It burdens the user interface and, when used improperly, can make web pages look like a Myspace page.

By configuring the CMS’s rich-text editor, content creators can have a less intimidating time composing content.

Of course, this is just a general guideline. Some project might need more and some might need less. A good practice would be to determine what’s needed and what’s not for each project instead of shortcutting the process and simply just providing the client with everything.

Mistake #2: Clients Editing CSS or HTML

A reasonably astute person with a desire to learn can edit HTML and CSS. But that’s true about anything. Just as car manufacturers don’t expect us to understand the inner workings of a car to be able to operate it, we shouldn’t expect our clients to know CSS and HTML to be able to run their website.

Like many design agencies, we tried to train our clients and their staff with HTML and CSS so that they could be fully empowered to make changes to their site. But every time, typically within a year or so, the client was so sick of it and had wasted so much time and money doing something they hated that they had us take back control of their websites.

When deploying content management systems, consider limiting access to the style sheets only to experienced professionals.

Mistake #3: Confusing "Empowered" with "Expert"

There was a recent Harvard Business Review report that talked about a number of studies that have shown that in order to be an expert at something, you need to have 10,000 hours of experience at it. It applies to chess, and music and business. It could also apply to web design and web development.

While you might have been in this industry for 5 or 10 years, your clients might only have a few hours experience as an operator of a site.

Don’t just turn over a CMS and hope that your client has enough experience to be an expert at usability and web design. Make sure you’re available for when they’re stuck.

Mistake #4: Giving Them More Than They Ask For

We’ve had a couple of clients come to us and tell us that their last web developer created a site that doesn’t do what they need it to do.

When we looked closer, we discovered that it did, in fact, do everything they needed it to do. And a lot more.

By going in, modifying the interface and removing and renaming things, we were able to create a much easier UI to use.

We know too many developers who create too many features for a project. Of course, when they put the product in front of real users, it becomes quickly obvious that it’s not user-friendly.

Mistake #5: Thinking That the Default CMS Settings Is Good

Today’s content management systems are so robust that you can pick any of the top five systems and 99% of your clients will have more features than they need.

What clients need is the ability to get their job done, and as web developers, it’s our responsibility to facilitate that. We need to make educated, experienced decisions so that our clients don’t have to. We need to help clients focus on what makes them awesome (as a person and as a company) and give them tools to leverage that.

Conclusion

As developers, we need to step up to the plate and make sure that our clients have tools that not only empower them in being able to manage the content on their site, but also empowers them to make the best use of their time.

Giving clients more choices and abilities to mess around with their website isn’t the same thing as empowering them. We might really just be hampering them and slowing them down with too many options, features and doodads.

Related Content

About the Authors

Katie Methe is one of the sharpest Drupal Chicks on the East Coast. Her experience with Drupal ranges from small websites to complex and advanced databases. Catch up with Katie on Twitter @katiemethe or join the Gravity Switch mailing list to stay up to date!

Jason Mark is an educator, business owner, and author. His Massachusetts-based firm, Gravity Switch, continues to be the leader in web, iPhone and iPad development in New England, and Jason keeps their carbon footprint down by bicycling to work year round. Follow him on Twitter @jasonnmark.

August 11 2011

14:56

33 iOS Mobile App Screen Views for Design Inspiration

The iPhone has become a leading mobile device in our modern technological era. And with this innovation comes access to the hugely popular app store. iOS developers have been working hard to create some of the most ingenious applications to date. And I’ve collected a list of 33 fantastic iOS app designs for your inspirational pleasure.

Momento

Groups

Epicurious

Be Happy Now

Pennies

Birdbrain

Reeder

Squarespace

TimeTuner

Ego

Gowalla

Bills

Pastebot

Beats

Convert

Flickr

Satisfaction Remote

Surf Report

Viator Tours & Activities

Tweetbot

Get Home

ColorSnap

Colorendar

GlobeConvert

Mooch!

Consume

Digg

Highrise

Shine

Itinerary

Dring

Speak, Piggy!

The Cartographer


July 08 2011

10:00

Essential E-Commerce Website Features: Tips and Examples

Advertise here with BSA


Essential E-Commerce Website Features: Tips and Examples

There are many different approaches you can take when designing an e-store. However, you might notice that effective e-commerce websites have certain site features that are absolutely critical to the shopper’s experience.

We will look at these common features that you will find in almost all e-commerce websites.

Product Navigation

Perhaps the most important component of an online store is its navigation system.

Good website navigation is essential for any site, but much more so for e-commerce sites. Users need to have the ability to browse among different categories and products quickly through an intuitive navigation system. Investing in the information architecture of an e-commerce website is paramount in the site’s success.

Amazon

Amazon has had one the best-designed (and also extensive) navigation systems out there. The categories of the products that can be found on the site are well organized and give users the ability to swiftly navigate between different product categories.

As you’ll see in the preceding examples, a left vertical navigation menu is popular because it allows us to include more links versus a horizontal navigation menu.

Amazon

Overstock

Overstock represents its comprehensive primary product navigation system as a vertical menu bar. In addition to the site’s primary navigation menu, Overstock has a robust navigation menu in the site’s footer.

Overstock

Overstock

Olive & Myrtle

This e-commerce site sells eco-friendly products. It has a vertical navigation menu on the left. They chose to style the "Sale" link so that it’s bold and in red in order to make it more prominent.

Olive & Myrtle

Via Snella

When an e-store has a small amount of products or product categories, a horizontal menu bar can be all that’s needed for product navigation. In the example below, you can see that Via Snella, a male fashion company that’s only been in business since 2006, can get away with a simple filter navigation arranged horizontally.

4th Street Cookie Company

The 4th Street Cookie Company is primarily a physical, brick-and-mortar store. However, they complement their physical store sales through their online shop. The product navigation in this case doesn’t need to be as extensive as a store like Amazon.com, since the cookie company only has a handful of unique products to offer. They’ve resorted to a thumbnail navigation for navigation to product pages.

4th Street Cookie Company

Mozilla Store

The Mozilla store uses a left vertical navigation menu, displaying the product categories they have in the site.

Mozilla Store

etnies

This e-store provides shoppers two ways to browse products: a vertical navigation menu and a drop-down menu that appears when you hover over the "Shop" menu item in the site’s horizontal menu bar.

Trilby Phoenix

In this e-store, you can browse products using the left vertical navigation menu. The menu is subdivided into three main categories. Clicking on one of the main categories displays more links.

Empire Patio Covers

Empire Patio Covers uses a horizontal navigation menu. To get around the lack of space that’s associated with fixed horizontal navigation menus, submenu items are progressively disclosed using drop-down menus.

Empire Patio Covers

OneHorseShy

The product navigation system on this e-store is simple. You can browse by theme or by product.

OneHorseShy

Search Box

Having a clear and well-positioned search box is crucial to an e-commerce site. The ability to search an e-commerce website is very important because many online buyers have a specific item that they are looking for. A search box is a powerful site feature that will improve findability and navigability.

Often, search boxes in e-commerce stores are in very prominent positions, high up in the layout, enticing the user to search the site for the product they want.

Etsy

The search box of Etsy is a jutting fixture of the site’s design. It also allows you to limit your search within specific categories.

Etsy

TasteBook

This e-commerce site has a search box that’s highly visible and placed in a high-value location. It has placeholder text to give users ideas on what they could search.

TasteBook

Cosmicsoda

The search box in Cosmicsoda is located on the right sidebar. Its unusual shape and eye-catching design can draw the attention of site users.

Cosmicsoda

ThinkGeek

ThinkGeek places its search box on top of the vertical product navigation menu to make it easy to find. In addition, grouping the search box and product navigation menu makes sense because they are two site features that can be used together.

ThinkGeek

Airfix

Airfix has a search box widget that has options for advanced search criteria filtering. This example demonstrates a good way to provide a persistent advanced search feature that’s compact.

Airfix

Shopping Cart

A shopping cart is almost always present in e-commerce stores. The shopping cart is usually the first screen in a checkout process. Products in the user’s shopping cart are typically displayed in a table/matrix format.

Its purpose is to display the items that the user has decided to purchase. It’s a highly functional feature that gives you a summary of the things you’re buying.

Common elements of shopping cart pages are:

  • Product name
  • Short product description (if the product name needs further explanation)
  • Product’s price
  • Total cost of products in the shopping cart
  • Product image thumbnail that displays a preview of the item
  • Quantity box that allows users to modify the number of items they want to purchase

DesignByHumans

The shopping cart of DesignByHumans is clear and functional.

DesignByHumans

The Brown Corporation

This example displays most of the common features we repeatedly see in shopping cart pages: quantity box, cost summary, the ability to remove a product or modify the quantity you want to purchase, etc.

The Brown Corporation

BustedTees

The shopping cart of BustedTees gives you suggestions of other things you may wish to purchase based on the items currently in your shopping cart.

BustedTees

Atom Bicycles

When you hover over the shopping cart icon on this e-commerce website, instead of being directed to a shopping cart page, it will show you a short summary of items in your cart. This is a convenient way for shoppers to quickly see what they have placed in their cart without having to wait for another web page to load.

Atom Bicycles

Threadless

The Threadless shopping cart is clean and straightforward.

Threadless

Featured Products

Often, e-commerce stores have certain products they want to highlight. These products are often found on the front page of the site. These products are usually items that are on sale/clearance or new items that have recently been added to the inventory.

There are many ways to put featured products on center stage. A popular method is to have an image slideshow at the top of the home page’s layout.

Alexandalexa

The image slideshow on this e-commerce website takes center stage. At set intervals, it changes slides to display featured products and news.

Alexandalexa

Rifle Paper Co.

Featured products on the Rifle Paper Co. website are displayed in an image slideshow, as well as in a 3-column thumbnail arrangement below the main slideshow.

Rifle Paper Co.

River Island

A big featured area can be seen in this e-commerce website. It takes up a significant amount of home page real estate.

River Island

Chicago L-Shirts

Featured items in this e-commerce website are displayed as the site’s background. As you navigate through the items using the left and right arrows on the left, the background image changes.

Chicago L-Shirts

Product View Filtering and Sorting

When displaying a category of products or a list of search query results, having the ability to filter or sort products can greatly enhance the ability of the user to find exactly what she’s looking for.

Crate&Barrel

Crate&Barrel allows you to filter products by price, type and more. The e-store also allows you to sort products alphabetically or by price.

Crate&Barrel

Ten Little Monkeys

The Ten Little Monkeys e-commerce site, which sells designer clothing for kids, gives shoppers the option to sort products chronologically or by price.

Ten Little Monkeys

Bridge55

Bridge55 has a vertical checklist of product attributes to help you filter products so that you can find ones that match your criteria.

Bridge55

Product Images

The main disadvantage of e-commerce websites when compared to traditional physical retail stores is that websites can’t give shoppers the ability to touch and see products.

Thus, images of the products being sold must be included and displayed in an enticing way. Images must be big enough to see details and features of a product.

Free People Clothing Boutique

This clothing e-store has high-resolution images. Browsing through product photos gives shoppers an interesting user interface that allows them to drag their mouse over areas of the photo to see the area in greater detail/resolution.

Free People Clothing Boutique

Storenvy

Many e-stores place thumbnails of other product images below the current image. However, in this example, they are arranged vertically on the right side of the current product image being viewed, making them highly visible to users.

Jules

The product images on this site are beautiful and large. They integrate well with the other contents of the product page.

Jules

Black Estate Vineyard

Photos of the wines being sold in this e-store are masterfully arranged to complement the site’s design.

Black Estate Vineyard

Jax Vineyards

Large product images secondarily serve towards the aesthetic appeal of this e-store’s web design.

Related Content

Mohammad Moradi is an undergraduate in computer engineering. He spends his free time studying and researching web-related topics such semantic web and search engines. Moreover, he is a web/graphic designer. Contact him via moradi.c85@gmail.com. (He likes email among others!)

June 27 2011

18:34

Is It Time to Rethink Website Navigation?

Advertise here with BSA


The hyperlink has been a staple of the Internet since it began. The Web simply wouldn’t be a web at all if we didn’t link from one web page to another. Links make the Web work.

So it would make sense to put a lot of time and effort into how we design our links and navigation systems.

But, this isn’t always the case. Oftentimes, we shortchange the information architecture phase of a site build and fall back to one of the few tried-and-true design patterns — a canned template — for designing site navigation.

The Status Quo of Site Navigation

One of the many beautiful things about Web Design is the near-limitless options available to us. Yet, still, our navigation systems seem stuck into the existing preformed solutions.

For small, personal sites, a simple top horizontal navigation bar is the typical option.

For larger sites with more pages to link to, we default to a stacked vertical navigation bar to give us the ability to include more links.

In other situations, we find that drop-down menus or fly-out menus are used to keep the navigation menu compact.

Drop-down menu on Google home page.

It’s easy to see why we have these options. To some degree, we have been forced to conform to them because of the early limits in web design.

As time went on, our users got used to the status quo. As a result, we’ve been hesitant to rethink the way navigation systems are designed.

And even if we didn’t put our users first, why spend time creating something new when the hackneyed solutions work? (At least we think they do, anyways.)

But are these conventional forms of navigation still the best solutions?

Natural Evolution

Since its inception, Web Design continues to evolve at a rapid pace. Our designs are getting easier to use, they’re more pleasing to experience, they have become richer in features, and are better optimized for speed.

Through the changes, our conventions for navigation have stayed the same, perhaps with the exception of the short surge we saw of entirely Flash-based websites that introduced some pretty unique navigation system designs.

This Flash site forgoes the common navigation design patterns we see in most websites.

While there are plenty of reasons to avoid going back to the days of entirely Flash website builds — whether your reasons are related to performance, SEO, web accessibility, independence from a proprietary technology, etc. — for most of our projects, we may still be able to gain some inspiration from what Flash sites showed us, especially in the rethinking of how website navigation can look and function.

As web browsers become broader in features and as web design specifications continue to advance — most recently with CSS3 and HTML5 — our design opportunities broaden.

Website navigation should be at the forefront of our minds as we take advantage of these new technologies for the betterment of the user experience.

We have already seen CSS3 in action to some degree, most notably on responsive web designs that transform the navigation menu’s layout on-the-fly depending on the size of the user’s display (with the help of media queries).

On the Forgotten Presidents site, navigation layout changes from horizontal to vertical depending on display size.

Change with Purpose

Of course, changing something just for the sake of change is a poor excuse. We shouldn’t be changing the design and layout of navigation systems just because we have the tools to do so.

Instead, we should approach the situation by looking at existing issues with navigation design, and how we may address them with the new techniques available to us.

Some of the bigger questions touch on things such as where the navigation should be located, how expansive it should be, what shapes it consists of and what kind of feedback it will provide users. All of these lead to huge decisions that play a pivotal role in how usable, flexible and practical your design is.

Newegg provides the ability to navigate its immense inventory of products with multiple navigation solutions.

The New Face of Navigation

CSS can do some downright exciting things these days and it’s in the nature of many designers to experiment and push the boundaries of innovation.

For example, blogger and web developer Chris Coyier shows that we can draw adaptive shapes that can transcend the scalability limitations of images.

Graphic designer/web developer Alex Girón shows us that we can create pretty impressive animation effects and transformations with his experiment involving the solar system’s orbit.

This sampling of possibilities demonstrates some pretty impressive capabilities. It doesn’t take long to see that these experiments can be adapted practically to solve design problems.

With shapes, and the ability to animate them, we have the building blocks to create flexible and imaginative interfaces.

Offline Inspiration?

We don’t have to go far to see new twists on navigation. Our computers, stereos, appliances, vehicles, and even our keyboards all use a wide array of shapes, sizes and colors to build interaction.

The spacebar on your keyboard is not larger than the other keys because it contains more characters. It’s used the most, so it’s the largest — an application of Fitt’s Law.

Source: Wikipedia

Compare the size of your spacebar to your Y key, for example. In your web design, could the Home link (or any other frequently used navigation link) also benefit from the same boost in size over a less important link?

The interfaces on our sound system receivers, remote control, and car dashboards all house a wide variety of size, shape and color to denote differences in importance and function.

We hold the ability to craft these solutions in our web interfaces without sacrificing flexibility or accessibility, the traditional reasons we’ve stayed away from them, using progressive enhancement and other best practices.

To illustrate my point, I put together a quick example of an early-generation-iPod-inspired navigation using just HTML and CSS.

iPod illustration by Matthieu Riegler, Wikimedia Commons

In reality, a circle can often provide a much more convenient use of space when compared to rectangular shapes.

Also with all of the active areas of our navigation naturally placed at equal distance from each other, this type of navigation is consistent with Fitts’ Law.

Of course, this may or may not be the best solution for any single situation, but that is the beauty of our profession. Designers should be taking the time and consideration to explore all of the constraints each project comes with and working out individualized and ideal solutions.

Take Advantage of New Opportunities

Now, more than ever, we have the opportunity to use our creativity to solve complex issues with our navigation systems. The rapid adoption of CSS3 unlocks a huge amount of design potential. We can start to think outside of the limited array of design patterns we have for site navigation.

Related Content

About the Author

Jason Gross is a freelance web designer focused on creating clean and user friendly websites. Jason currently lives in Indiana and can be found on Twitter as @JasonAGross or on the web at his personal blog and portfolio.

May 30 2011

14:53

10 Important UI Design Considerations for Web Apps

Advertise here with BSA


10 Important UI Design Considerations for Web Apps

When I finished building my first web app (CompVersions, which allows you to collect feedback from clients), I was surprised at the number of user interface decisions and considerations I hadn’t accounted for at the beginning of my journey. I’d like to share some of those things with you.

Many of these design considerations might seem superficially obvious, but once you’re going through the design and development process, it’s easy to forget about them because they’re like condiments — you hardly notice them when they’re there, but if they’re missing, your food just doesn’t taste right.

Blank State

The blank state is how your app will look and function when the user hasn’t entered any data yet (except perhaps their email address after signing up for an account). This is the first interaction and scenario that your user will encounter with your app and it can make or break their first experience and impression.

This state is a critical time for retaining users, because, at this point, users haven’t had enough invested into using the app for them to be discouraged to look for another solution.

One way of dealing with the blank state is to use media to show the user how to use your interface, e.g., a video or a product tour with screenshots. For example, upon signing up for a Fitbit account and logging in as an authenticated user for the first time, you’re presented with a slideshow of the different components of the app.

You can also provide your UI with cues, tips, and hints for first-time users, pointing out features in-line. For example, below, you can see that FreshBooks displays a message that tells you that you haven’t created any estimates yet, and then provides you with a link for creating one.

For my web app, the first time you log in, you’ll see four boxes that are numbered sequentially. You can’t progress to the second box without completing the first one so that there’s no guessing and the user immediately knows what to do to get started. There’s also only one textbox and button visible at the blank state, so there’s no ambiguity about what the next step should be. As users complete each step, the next box is unlocked for them, and they can proceed.

Let’s look at a couple more examples of blank states. At Basecamp, the first thing they show users is a video that gives you an overview of the way the web app works.

Dropbox has an interesting approach. They start you at a "Get Started" tab that has a numbered list of action items that steps you through what you need to do to get maximum value from using Dropbox.

As you complete the action items, they’re crossed out, and the box on the left incrementally fills up until you are complete.

Dropbox incentivizes exploration and use of the app by giving you rewards for completing items in the "Getting Started" tab, effectively gamifying the training and familiarization stage of their product.

Quota/Usage Information Displays

If you have limits to things such as storage, number of projects you can create, etc. you should constantly give users visual cues of how much they have left so that, if needed, they can upgrade their account before they reach the limit. It’s best to include some visible measurement of the unit that has a cap.

You don’t want to blindside your users by suddenly telling them they’re out of storage space or whatever it is that has a limit. Imagine that you’re working under a tight timeline, and you’re composing an email that has large file attachments. You hit the Send button only to find out that your file quota has been reached. You’d be one frustrated user.

Let’s go through some examples of quota/usage information displays.

On Gmail, you can see simple textual information showing how much storage you’re using and how much storage you have (in MB), as well as a percentage of how much storage you’ve used up. They’ve located this at the footer of the layout using a distinct color (green) for prominence.

Dropbox goes with a simple visual display showing you a bar with the percentage of storage you’ve used up.

On Evernote, the quota/usage information isn’t persistent in the interface; you have to visit the Settings page in order to see it. This isn’t as intuitive to locate as having it displayed persistently on the user interface (or providing a shortcut link to the usage information).

For my app, I went with a simple text display that shows storage space allotment and the quotas for the number of clients and projects the user has.

Plan Upgrading/Downgrading

How do you design the UI to remind users that they can upgrade their plan without interfering with their workflow? Once a user has bought a plan, they may want to upgrade or downgrade, and you don’t want to send them out of your app to do that. It should be seamless and convenient, so changes to the user’s plan are best done within the app.

Let’s go through some examples of how apps deal with changes in the user’s plan.

The FreshBooks upgrade reminder is persistent, positioned at the web app’s footer. It’s a constant reminder without being an obstruction to the workflow of the user, as it’s located outside of the task area of the UI.

The upgrade screen on Basecamp shows you clearly what you get from changing your plan.

The upgrade screen in Dropbox is clear and simple, as shown below.

On my app, CompVersions, here’s what the upgrade screen looks like.

States of UI Elements

Elements such as buttons, text areas, input fields, and so on can have several states. Normal, hover, disabled, active, inactive, focused states, etc. help users determine what possible actions they can perform on a given element. It gives them visual cues as to what they’re interfacing with, and what they aren’t.

These states are very important considerations. They add a tactile look and feel to your UI, and give your app a sense of being alive.

States are obvious on things like navigation menus and buttons because these are standard user interface elements, but what about on sections that you want to draw attention to or what about uncommon UI elements?

In CompVersions’ case, I wanted to guide the user through the four boxes with as many subtle visual cues as I could. One way was to have the outlined box change color when they hovered over a box (i.e. the box lights up) to indicate that it’s an interface-able UI element.

When the cursor leaves the box, it dims back down.

They all seem so seamless, but I had to make a conscious decision and write CSS rules for each state.

Here’s an example of different states of UI elements on Fitbit when you’re logging food. The inactive state is compact, but has clear instructions on how to interface with the element (an Add a note text control). When you click the Add a note text control, it switches to the active state featuring a text area (a standard text input UI element) with in-line instructions that says, "Write a new note…" which simultaneously deals with the blank state scenario (i.e. no note has been added yet).

Let’s look at an example of a hover state on Basecamp’s pricing table. When you hover over a pricing plan, the plan becomes highlighted and displays a tool tip with more information.

Keep the User Interface Simple and Intuitive

This is something that all UI designers will tell you but is a difficult concept to grasp until you’ve had to design your own UI: Keep it simple.

Making decisions on what goes and what stays is tough. How do you present the user interface of your web app as simply as possible, while still making it powerfully feature-rich? How do you design 30 different possible user actions in one screen without making it look like the cockpit of a fighter jet?

One thing you should practice when applicable is progressive disclosure. If the user doesn’t need a button, menu, or link — hide it. Get out of the user’s way and allow them to do what they want to do without having to wade through a ton of choices.

For example, on Dropbox, there are multiple contextual commands you can perform on your files. Here’s the inactive state of files in your Dropbox:

When you hover over a file, a contextual menu is progressively disclosed showing additional tasks you can perform on the targeted file or sub-folder, such as Delete or Move.

This concept sounds very easy to do in theory, but it’s surprisingly hard especially if your app has a lot of features.

Do you have to have an Edit command on every editable item at all times, or do you just progressively disclose this command when the user hovers over an editable item? If it’s the latter, how do you indicate that there are possible commands that can be performed, if the user hasn’t hovered over the item yet? Do you use an icon to save some space or do just use a text command that says Edit or do you have both an icon and a text command? If you use an icon, what would be an intuitive symbol for it? Does the symbol conflict with other icons already existing in the interface? If you use a text command, should it say Edit or Edit item?

And that’s just one element out of the many that you’ll have to be making constant micro-decisions on; decisions that are often going to be hard to reverse after users have taken on your app because even slight changes in user interfaces require retraining and recalibration from your users, which hinders their workflow.

Keeping things simple, intuitive and consistent really makes the UI easy to use, and this all takes a lot more work than many would think.

Use Visuals Smartly

Images and icons can help ease-of-use. Using visuals such as icons, graphs, charts, photos, etc. can replace long blocks of text and data tables altogether. It can make the readability of data easier and they can be used to provide visual cues as to what a certain command does.

Visuals are powerful elements in a graphical user interface. Let’s look at some examples of how visual elements are used in some web apps.

Below, a trash can icon, which is a recognizable and ubiquitous symbol for a Delete command, is progressively disclosed as a possible action when you hover over a to-do item on Basecamp.

Below, you can see a trash can icon, an icon that allows you to drag-and-drop the to-do item, and, at the far right, a chat bubble icon that when clicked, allows you to comment on the to-do item.

Think about the reasons for the design choices made in the above contextual menu. Why is the Edit command a text link? Perhaps because it’s the primary task a user would be performing the most, and the UI designer wanted it to have a more distinct visual appearance (using the inverse of Gestalt psychology’s Law of Similarity). Why are the icons arranged the way they are? Why is the comment bubble icon separated from the other icons?

Provide Instructions and Information at the Proper Places

There are times when you’ll need a callout box or notification area that tells the user something specific that they need to know to most effectively use the UI to its fullest potential. Provide as many of these helpful information as much as you can, at the right places, and make sure they’re integrated in the interface in such a way that they don’t pose as a hindrance to the user’s workflow.

For example, if you use icons for commands, you can use the alt and title HTML attribute to give the user a quick summary of what the icon will do when they hover over the icon.

Don’t overdo it. The key is to identify the places where more information and instructions are needed. If there are too many tooltips, hints, callout boxes, etc. the user can become desensitized to them and they can interfere with the use of the app because they constantly distract the user.

Optimize UI Speed

A web app should be responsive and fast. When there’s huge delays between sequential tasks, the user may develop an unconscious resistance to using the app. Apps are tools to accomplish specific jobs, and if it’s not fast, then it’s not a very effective tool.

For the most part, using best practices for optimizing page response times will help ensure you’re giving your users as fast and as efficient as an experience as possible. Most of these best practices are commonsense and, for maximum bang for your buck, you should focus on front-end web page performance first (e.g. reducing the file sizes of your page assets and reducing the number of HTTP requests needed to render a web page).

Use CSS when you can. Reduce your need for JavaScript. Don’t use Flash if there’s another comparable option (as it can be a resource hog).

Design using data to help you make informed decisions and to help you see if you can start using CSS3 to save on having to load CSS background images for rounded corners and color gradients. Use CSS3 as much as you can. Avoid using images if you don’t have to — rounded corners, text shadows, box shadows and a whole host of other popular aesthetic elements render much quicker than images in web browsers that support them.

Educate yourself on practical CSS3 by using this slideshow presentation created by Lea Veroukeep; refer to it constantly as you develop your app.

Designing with progressive enhancement in mind can help you optimize front-end performance. Allow yourself to make some sacrifices in aesthetics for users using older browser like IE6 for the overall good of your entire user base (if data suggests old browser usage is relatively low).

Use the Appropriate Cursor Pointer and Alt Attributes

This is a mini-tip that many of us forget. JavaScript DOM manipulation can make any element clickable. However, sometimes we forget to style clickable elements appropriately. Styling clickable elements by changing the cursor to a pointer helps indicate that an element is interactive. This is one of those things that you don’t notice until it’s not there.

Let’s say that you created span elements that are clickable using a web development library like jQuery.

HTML

...
<td><span class="delete-row">Delete this record</span></td>
...

jQuery

$('span.delete-row')
.click(function() {
$(this).parent('tr').remove();
});

Although the HTML element is interactive, it doesn’t change the mouse pointer to a cursor. To do so, you can use either CSS or jQuery.

CSS

span.delete-row {
cursor: pointer;
}

jQuery

$('span.delete-row')
.click(function() {
$(this).parent('tr').remove();
})
.css('cursor', 'pointer');

Also, use alt attributes on images, which can assist people in determining what icons are for if you’re using them in the UI. For example, even though you’re using a trash can icon instead of the word "Delete", let the alt attribute of the icon say "Delete".

Not only do alt and title attributes help screen readers for visually impaired users, it also helps remove ambiguities for users that aren’t visually impaired.

Finished State

You need to consider what the app will look like when data has been entered. In the case of CompVersions, I wanted to show (in chronological order) a particular flow — client information, project names, stage names and image names — in one view.

With Basecamp, this is the dashboard view. The user gets a quick snapshot of all of their projects and the activity associated with that project.

For Dropbox, this is just a listing of all the files and folders in your account.

This state tends to be the first screen that’s designed/mocked up when designing our app because this will be the most frequently seen/visited state once a user starts using our product.

Conclusion

There are many other examples of web apps that have successfully done all of the above. Once I went through this process and discovered these things, I started to notice of them in other apps — it becomes a natural habit, I suppose.

In my experience, it was surprising to realize how many little things you had to really think about, consider, and decide on when crafting an interface. It’s easy to gloss the details over when you want to ship a product as quickly as possible, but if you take some time to really polish the little things, your interface will be as awesome as possible and your users will enjoy using it.

The best compliment you can get when designing interfaces is that they’re easy to use. I hope the things I shared with you here get you a step closer to that praise.

Related Content

About the Author

Marc Gayle lives in Jamaica and is bootstrapping CompVersions with blood, sweat and care. He’s a proud advisor to Kingston Beta, an organization set up to help nurture local tech entrepreneurship. He blogs at marcgayle.com. Follow him on Twitter @marcgayle.

May 24 2011

10:00

Designing Effective FAQ Pages

Advertise here with BSA


Designing Effective FAQ Pages

FAQ stands for "frequently asked questions." As the name implies, it is a type of web page (or group of web pages) that lists questions frequently asked by users, usually about different aspects of the website or its services. The answers are typically shown with the questions.

FAQ pages aim to make finding answers easy for users. The ideal FAQ page helps people use the website without the need for outside assistance. More often than not, unfortunately, this ideal is not realized.

This article explores various aspects of FAQ pages, from design to efficiency issues. We will also look at some examples (and counter-examples) of great FAQ pages.

Where FAQ Pages Go Wrong

Here are a few things that detract from the usefulness of an FAQ page.

The Questions Aren’t Frequently Asked

Imagine that you’ve just launched a new website and have included an FAQ page. Why? If you don’t have any users yet, then you certainly haven’t received any questions (much less frequently asked ones).

Without user feedback, questions on this page are simply the site owner’s assumptions of what his users might want to know.

The Questions Are From Left Field

We’ve all seen FAQ pages that have bizarre questions — questions that have probably never entered anyone’s mind. Such questions are ones that website owners would like to be asked (e.g., "Why is this website so amazing?", "Who are the talented people running this website?").

The Page Label Isn’t Intuitive

The first time I saw an "FAQ" link was 10 years ago. I wondered about it for a while and eventually learned its meaning. Designers must be considerate of users who don’t understand technical terms. "Frequently asked questions" is clearer than "FAQ."

Also, descriptive and standard labeling is important. For example, California Court uses the label "Q&A," but that’s even more ambiguous than FAQ. Unless you have a good reason, stick with the standard label of "FAQ" or "Frequently asked questions."

The FAQ Page Isn’t Really Needed

Many websites have an FAQ page, but some don’t need one at all. Sometimes users find all the information they’re looking for and have no further questions. This means that the information architecture was designed well.

Imagine an online shop that presents prices and shopping instructions in one particular location; say, on a separate page or part of the home page. But if the FAQ page addresses pricing, it will be redundant; yet some users might seek it out to find pricing information. Link to the main pricing page instead.

Here’s a rule of thumb: if one type of information can be relayed in many ways on one website, there is something wrong with the information architecture of  the website. Everything should be placed in its proper location.

How to Design an Effective FAQ Page

A good FAQ page lightens the load on help desks and customer support calls, which translates to cost savings and convenience for the user (since they don’t have to send a help ticket or pick up the phone to have their question answered). Thus, the importance of a well-crafted FAQ page can’t be denied.

When designing FAQ pages, have the following tips and strategies in mind.

Say "No" to FAQ Pages

Start by saying "No" to FAQ pages. In web design, you should strive for simplicity and you should constantly eliminate things that simply aren’t needed. The FAQ page supports the rest of the website’s content; if it doesn’t enhance what’s already there, it shouldn’t be a priority.

When an FAQ page is needed, it will be your users indicating the need for it. Perhaps you’ll start getting the same questions over and over again or a reoccuring feedback you get is the need for an FAQ page. Let users determine whether they need an FAQ or not.

Gather the Right Questions

The questions on the FAQ page must be real. For a new website, choose a timeframe (say, one month), and then survey and categorize the questions that users ask during that time via direct calls or email. You could even announce your open question period on the website.

If patterns emerge, it probably indicates a topic that should be addressed on the FAQ page. In this way, you can update the FAQ page regularly. This method is effective because users are actually participating in the page’s creation.

For example, The Invoice Machine invites questions, thus showing off its desire to create an FAQ page filled with useful questions.

Providing Good Entry Points

To use an FAQ page, users must be able to find it. Provide an obvious entry point: a distinct, clear and well-positioned link will do the trick. The two most common places for an FAQ link is in the primary navigation or site footer; these sections are separated from the rest of the web layout (often by color, hue, solid lines or white space) and thus stand out. Visitors are used to checking the navigation menu and footer for important links.

Bet Your Followers links twice to its FAQ page, once in the header and once in the footer. Users won’t have any trouble finding it.

GoSiteWave puts their FAQ links in the primary navigation menu and footer, providing two entry points.

The Resumator has a well-positioned and clear link to its FAQ page.

Readability

FAQ pages are generally text-based, so readability is important.

Readability can be achieved in different ways: text decoration (always minding the contrast between text and background), as well as line- and letter-spacing. Good CSS typography applies here.

Bet Your Followers uses contrasting colors to good effect.

As a counter-example, Vegas Uncork’d loses on legibility because of the lack of contrast between background and text, as well as the small font size.

Categorization of Questions

Users who are looking for an FAQ page probably got confused somewhere else on the website. Don’t make it worse with tangled topics.

Basic categories increase readability — a major building block of efficiency. Name the categories intuitively to avoid further confusion.

AGIA displays categories in a tree schematic, with a short description of each.

Here’s one idea: put the most important questions and answers in a distinct category. IMDB puts its top questions in their own category, no doubt increasing findability.

Mint has a well-categorized FAQ page. The categories are named well, too. In addition, they list the most frequently viewed questions.

Notable also has good categories, as well as a list of top FAQs.

Using icons can be effective in supporting categories, as Vertical Response does here.

While ABA English categorizes relatively well, the naming is inappropriate, so readability suffers.

Search

For ease-of-use, search functionality is essential for longer FAQ pages. When an FAQ page has many categories and subcategories, each described in detail, search becomes more important than ever.

FAQ search should differ from the general search system of the website, and this difference must be denoted in order to reduce the amount of search results and make finding the right questions easier.

IMDB adds a heading to indicate that the search will retrieve helpdesk topics only.

The label of the search feature on the FAQ page of SurveyMonkey works well.

Providing Visuals with Answers

Often, a picture is worth a thousand words. If images can help solve a user’s question, don’t hesitate to use them.

For example, The Bank of Washington offers screenshots to illustrate the answer to a question like, "How do I recover my lost password?"

Tips For Structuring an FAQ Page

If you have only a few questions and answers, put them together rather than on separate pages.

Of course, page length must be considered. Endless scrolling will tire users and cause them to leave before finding answers to their questions. Keep the page as short as possible. Make sure each question and answer pair is valuable.

Some circumstances make long pages unavoidable; linking to the top of the page after each answer is a good solution.

For the sake of readability, distinguish questions from answers, whether by color, size, typeface or decoration.

ETS has a well-structured FAQ page. Questions and answers are organized by topic, and the topics are collapsed by default, thus saving space.

CrazyEgg puts its questions on one page and answers on another, which is not very convenient for users.

Despite the wealth of material on NASA‘s website, the difference between the questions and answers isn’t very clear.

The way NetFaqs separates questions and answers is problematic.

PodShop indicates questions with a different background, a simple and effective way of creating a distinction between questions and answers.

The "Back to top" links on Rapid XHTML allow users to return to earlier sections of the page without having to scroll up.

Conclusion

Designing FAQ pages, amid all the other pages of a website, can be complicated work. Keep in mind that "FAQ" is a general name for the type of page that answers real questions and guides users. Most users have had trouble somewhere else on the website and are looking for a specific answer, so design the page in a way that actually helps them.

Related Content

About the Author

Mohammad Moradi is an undergraduate in computer engineering. He spends his free time studying and researching web-related topics such semantic web and search engines. Moreover, he is a web/graphic designer. Contact him via moradi.c85@gmail.com. (He likes email among others!)

May 10 2011

10:00

Effective Website Help Systems: Tips and Examples

Advertise here with BSA


Effective Website Help Systems: Examples and Best Practices

Web designers should regard every user who comes to our websites as potential newcomers, providing enough instruction and guidelines for them to complete their tasks and get familiar with the site.

Almost every type of website has to help its users, but in different ways. The type of website will determine the type of help system you should be providing.

Moreover, the effectiveness of a help system has a direct relationship to the quality of the site’s design. A poorly designed help system — however good its content — makes for a shoddy user experience.

In this article, we’ll study some approaches to designing effective help pages through examples, which might inspire you in your work.

What Is a Help System?

We see many terms and types of help systems used in the context of site design: "Help," "Support," "FAQ," "Docs," "Knowledge Base," etc. All of these web pages are intended to provide assistance to users.

Help systems should be conveniently accessible in locations where users can possibly need answers to their questions, e.g., when they get started using a website, and when they could benefit from useful information.

They’re critical because they are one of the last places a website visitor will look before deciding to give up and search for another website that will fulfill their requirements. Therefore, help systems can be crucial in retaining your site visitors.

While help systems are important and oftentimes indispensable, many website designs overlook the usefulness and importance of them. The reason for this is usually a lack of awareness by the website owner of the need for help content or of the benefit of integrating it into the content of the website.

For example, in the case of an online shop, you could put purchasing instructions on the home page or somewhere where users could easily find them, instead of creating a separate help section. This would also increase findability.

Some Examples of Help Systems

To help with the discussions that will follow, let’s look at just a few examples of help systems.

As you can see below, the site, Marie Catrib’s, puts its contact information and hours of operation in the footer of its home page. This subtly embeds the content for what is sometimes a completely separate page right into the footer. This information can be considered a part of the site’s help system.

An FAQ (which stands for frequently asked questions) is a place to answer questions that many users repeatedly ask or think of.

In other words, it could be a subset of guidelines from a top-level category like Support or Help for larger site help systems.

In most of cases, "Help" would be a better name for a top-level page. "Support" is usually used on commercial websites that offer some sort of technical service. Some sections are named "Help/support center."

Below, you can see Josh Lockhart’s website uses a "Help" link as an entry point to his help pages. The help pages is further subdivided into sections such as "How to Install," "How to Buy," "FAQ," and so on.

What follows is another example of a help system. Given its content (which is various categories), "Help Centers" is the right name for this section of Google’s site. Because they have many products, their system is very comprehensive and must be organized well in order for it to be effective and usable.

California Courts has a suitable help center, with well-defined categories. Icons are used to facilitate visual cognition of the different sections of the help system.

Survey Monkey‘s help center has well-crafted categorization.

Ten Little Monkeys lists some help pages under the heading, "help & information" on the footer.

BrightKite, like Ten Little Monkeys, uses the "Help" heading on the footer, and then lists some useful help pages that are part of their help system.

As a counter-example, Fine Point puts only their contact information in its help center, a lesson in misnaming and of an incompletely designed help system. As a good convention to follow, "Contact" or "Contact us" should be the label of this web page.

Help Page Features

All help pages, whatever their individual characteristics, have some common features.

  • The pages must be clear and illustrative.
  • They should have a short, descriptive explanation of each topic that can be read quickly. Users who come to help pages are usually already confused, so they aren’t inclined to read long blocks of text.
  • Following good scanning aids (such as bolding keywords) can increase readability.

In the example below, you can see that Maverick Label bolds important parts of the text and so helps the user along.

Despite the simple design, the links on System 7 Today work well to highlight important subjects.

In addition to these features, some other attributes deserve consideration. Let’s review them.

Accessibility

One of the most important aspects of any page is accessibility, but it’s even more critical for help pages. Help pages should be simply and quickly accessible.

Link to them in the header and footer, especially on long pages and the home page. Users shouldn’t have to dig into deeply buried pages. The experience should be straightforward.

For example, Traffik puts clear links on a plain background to increase readability.

ProWorkflow places a direct link to its support page in their primary navigation bar.

Invoice Machine follows the pattern we’ve seen above but also shows what can be found on the help page with descriptive text.

Constant Contact uses appropriate wording ("Learning center") for its resources and distinguishes it aesthetically from other links.

AAFP‘s breadcrumb shows the long path to the help center. Being so buried, the section could escape the attention of users.

Finding Google‘s help center from the home page is rather difficult. In fact, Googling it is quicker.

Categorization

To prevent confusion, help systems with a lot of content should be carefully structured by topic. For a help system to be effective, you must spend time in information architecture. Have a small number of main categories, each of which can have sub-categories.

There are different ways to categorize, but in general, put more important topics and common issues higher up in the structure.

Also, consider using icons to increase visual cues for the categories, as well as add life to the page.

In the example below, Apple‘s help center is brilliant, like its products! The topics are well categorized and cover all areas users might need help on.

ProWorkflow organizes its help content into several categories, each containing sub-categories.

Campaign Monitor uses icons to support its categorization, putting everything in the right place.

To prevent congestion, Google puts less important items on another page, accessible by a link.

Hostway is another example of classification with icons but with its own style.

HWG‘s FAQ page has very simple categorization, without anything superfluous.

Apache’s help system is another page of pure HTML. It’s simple but gets the job done.

Searchable Content

For extensive help systems, being able to search can be very useful.

Search results should display all of the information about a topic at a glance. But to be truly useful, it should display only pages from the help section and not the rest of the website so that the results presented doesn’t get overwhelming or confusing.

Google‘s help center has section-specific search appropriately labeled "Search Help," to indicate that you’re only searching the help center.

Storenvy‘s search feature is well positioned and well labeled (i.e., "Search Support").

TiVo also shows good positioning and creates a distinctive space for the search box. The colors add to the beauty.

ProWorkflow, despite good categorization, lacks search, which could cause difficulty.

Link to Other Resources

Sometimes users end up in the wrong place or can’t find what they’re looking for. Provide them with other useful options, like other help topics, a forum and so on via relevant hyperlinks.

The usefulness of such links will depend on their location: visible, nearby and distinct is best.

ThinkGeek lists almost every other place a user might want to go, and they put it in the right place and with a good heading.

Notable links to the latest forum posts, a good idea to introduce new resources and improve discoverability.

Like ThinkGeek, Yahoo organizes links under informative headings, which are helpful.

Contact Information

Putting contact information in the right place is another way to help users. When users can’t find what they’re looking for, they’ll ask, so you should be accessible in some way: phone, email, online chat, etc.

While contact information commonly appears on the home page and, of course, on the contact page, putting it on the help page is a good idea for fallback in case the user can’t find what they’re looking for.

Contact information on Crazy Egg is well presented and well positioned.

iPersonalAssistant offers simple contact information, without any unnecessary decoration. Like Crazy Egg, it also welcomes email.

TiVo offers live chat, an invaluable feature for a website.

ThinkGeek provides thorough contact information. And it is well positioned.

Help.com invites users to submit a ticket, which is handy, but perhaps less so than live chat. Of course, both methods require enough staff on hand to satisfy demand.

Getting User Feedback

To improve help material, assess its efficiency and gauge user satisfaction, feedback is important. The process shouldn’t be time consuming, or else users won’t participate; star or numerical ratings work better than forms.

A very simple survey by Microsoft asks whether a help resource was helpful or not.

Help.com asks users to write their suggestions, complaints and other feedback. While the feedback may be more detailed, analyzing it is tiresome work. And given the time required to participate, users might decline anyway.

Yahoo‘s complex form seems overly burdensome on users.

A cosmic survey by NASA! Displaying the average rating and number of ratings is smart. And they even provide help (see the question mark).

Putting It All Together

We’ve reviewed some essential elements of help pages. Many help pages don’t have any of them, while some present them concurrently.

Nearly perfect help sections are rare, and the ones out there tend to belong to the most successful companies on the web.

Campaign Monitor exhibits all of the traits of a perfect help section.

Like its other features, web giant Yahoo has a great help area.

Conclusion

This guide has introduced some essential tips and best practices for designing effective help pages. I hope that you’ll be able to heed the rules that apply to you and not pay too big a price for bypassing the rest. So start experimenting, while remembering the basics.

Related Content

About the Author

Mohammad Moradi is an undergraduate in computer engineering. He spends his free time studying and researching web-related topics such semantic web and search engines. Moreover, he is a web/graphic designer. Contact him via moradi.c85@gmail.com. (He likes email among others!)

May 09 2011

10:00

The Origins of User Interface Terms

“The way that you accomplish tasks with a product – what you do and how it responds – that’s the interface” – The genius HCI expert Jef Raskin defines an interface this way!”

Being a UX Enthusiast working mostly on the web, the web UI terminologies and interactions patterns are obviously a part of my daily work life, where I build user experiences by creating wireframes and interfaces which help the user accomplish a task easily. The various interaction patterns have always fascinated me and have left me wondering how closely a human-computer interaction is being related to some obvious real-time objects that we interact with, in real-time – enter the metaphors in Human-computer interaction.

As humans, we learn new concepts when they are correlated to some existing systems, which we are already accustomed to and this is the base principle followed by HCI experts while giving birth to new interaction patterns and UI elements which help the user to interact with the system much better.

Here is an effort to list some of the UI elements/terminologies which were heavily inspired from real-life objects, to make things simpler for the user.

The ‘Mouse’, and ‘Mother of all Demos’

The Metaphor: Mice
The Concept: Hardware resembling the mice which enables point and click on a computer screen based on x and y coordinates

The starting of the ‘Graphic Interfaces’ era was marked towards 1968 when Douglas Engelbart of Stanford Research Institute, presented a direct manipulation on a computer screen, a standard typewriter keyboard, and a rolling box called ‘Mouse’. The term mouse was obviously coined due to the appearance of the device, which resembles a mouse. This presentation finally became the turning point for the whole generation of computers, and was called ‘The Mother of All Demos’, and paved the way for richer and usable GUI based applications.

The ‘Desktop’ metaphor

The Metaphor: Desktop
The Concept: Desktop refers to the area behind the windows in a GUI using this metaphor

A term which you would not miss using in an average day at work! The ubiquitous ‘Desktop’ metaphor, which was introduced way back in the 1970s at the Palo Alto research center, still persists because of the human tendency to easily recall something when related with a real-time object.

The main reason for this introduction was due to the fact that most of the users of computers at that time didn’t have a computer science background, and they were using the system for accomplishing tasks like producing, distributing and presenting business documents. Hence, the term ‘Desktop’ instantly clicked among the users and was adopted as standard terminology up to now.

Pull-down menus and Dialog Boxes

The Metaphor: Pull-down menu / Dialog box
The Concept: The type of interaction where a list of items will be displayed as if they are pulled down when clicked on a single element. Dialog box refers to a single forced window which communicated a message to the user.

In 1984, Macintosh – The first Graphical UI computer terminal, was released by Apple and two new elements were also born – ‘Pull-down menus’ and ‘Dialog boxes’. Larry Tesler with Bill Atkinson worked together to introduce this really useful interaction to the world.

Pull-down menus/Drop-down menus play an important role in defining the information architecture of high-scale applications with huge amounts of data. This element is literally inspired from the way they interact with the user when clicked on them.  Similarly, ‘Dialog box’ which actually enables a ‘dialog’ between the computer and user, is yet another example of literal inspiration implemented in UI element terminologies.

The Dock

The Metaphor: Dock (a platform built out from the shore into the water and supported by piles; provides access to ships and boats)
The Concept: UI element that typically provides the user with a way of launching, switching between, and monitoring running programs.

By 2000, Apple was back with some out-of-the-box innovations in UI. ‘The Dock’ concept was introduced in the Mac OSX by that time, which was actually an area docked to the bottom of the screen with the launch icons commonly used applications, which helps switching between applications.  The dictionary meaning of ‘Dock’ is ‘a platform built out from the shore into the water and supported by piles; provides access to ships and boats’. This is one of the trademark interactions of a Mac OSX machine still.

Spotlight and Dashboard

The Metaphor: Dashboard of a vehicle, where all the controls are laid out.
The Concept: A section where all the important functions of an app or a system are laid out upfront.

Later on, Mac OSX saw the addition of a couple of more new concepts – ‘Spotlight’ and ‘Dashboard’. Spotlight was the global search spot for the entire OS located at the top right of the Mac OSX screen. It is designed to allow the user to quickly locate a wide variety of items on the computer, including documents, pictures, music, applications and lots more. With the literal meaning ‘spotlight’, this was yet another addition to a UI element which related to a real life object / metaphor.

Dashboard, on the other hand, is an application for Apple’s Mac OS X operating systems, used for hosting mini-applications known as widgets. Inspired from the real world ‘dashboard’ for vehicles, which is the control panel having all the controls and knobs needed to keep the vehicle in control, this term is also now commonly used in applications, where all the main functionalities are grouped in a single page and termed ‘Dashboard’ (a very common example is the WP Dashboard ).

Carousel

The Metaphor: The Carousel machine for children which rotates.
The Concept: UI element where the contents are rotated in a timely basis.

With the usage of jQuery in front-end engineering, this term has become very common in modern day web design. Carousel is a jQuery plugin which facilitates the display of images/blocks in a rotating pattern similar to the large rotating machine with seats for children to ride. This plugin is very widely used to showcase photos and items on a webpage.

Accordion

The Metaphor: The music instrument which is played by compressing and expanding.
The Concept: UI element with compressible and expandable list of items.

Accordion is a vertically stacked list of items (e.g. labels or thumbnails). Each item can be “expanded” or “stretched” to reveal the content associated with that item. There can be zero or more items expanded at a time, depending on the configuration. With the wide adoption of jQuery, Accordion has gathered popularity in web UI. The inspiration comes from the musical instrument ‘Accordion’. It is played by compressing or expanding a bellows whilst pressing buttons or keys, causing valves, called pallets, to open, which allow air to flow across strips of brass or steel, called reeds, that vibrate to produce sound inside the body.

Widgets

Wikipedia says Widget is an element of a graphical user interface (GUI) that displays an information arrangement changeable by the user, such as a window or a text box. The defining characteristic of a widget is to provide a single interaction point for the direct manipulation of a given kind of data. The term has a direct relation with the term ‘Gadget’. When used in computer terminology, the term ‘Window gadget’ was gradually converted to ‘Widget’, and once ruled the roost in desktop applications. Still widgets play an important role in many OS’s, and is a popular term in web and desktop apps.

Breadcrumbs

The Metaphor: The trails of pieces of bread.
The Concept: A navigational guide denoting the current hierarchy level in which the user is.

This is an integral part of an application, and plays an important role in the information architecture of the same. This little element keeps the user informed about his current location in terms of the web application. Especially while exploring a huge web site/app, having multiple levels of navigation, the user often gets lost after digging deep into some specific page. With a breadcrumb, the user can easily understand the hierarchy of the page which he/she is browsing and can navigate between levels easily. Now the story of origin of breadcrumb dates back to your nursery school times :D! Yes… Do you remember the ‘Hansel and Gretel’ fairy tale and how they escaped from the wicked witch? The breadcrumb trail that Hansel left for their family to follow is the actual inspiration for our little ‘breadcrumb’ UI element.

Radio Buttons

The Metaphor: The buttons in old-time radios.
The Concept: A UI element used to receive input from user, where the input is a boolean value.

This little button, which stands for a Boolean value has a story of its own to tell. Back in the day, the car radio had toggle buttons, ie., when one of the buttons was pressed, other buttons would pop out, leaving the pressed button the only button in the “pushed in” position. Yet another inspiration!

Progress Bar

Once adoring the flash pre-loaders, the progress bar is everywhere. This component, that conveys the progress of a task, was inspired from something that was created way back in 1896, by Karol Adamiecki, popularized by Henry Gantt around 1910-1915s. The Gantt Chart – used to represent work breakdown structure of a project and dependency relationships between various activities is the primary inspiration for the progress bars which is prevalent all around on computer based UIs.

These are just a few of the numerous relationships that exist in the world of computer based UI, and all these point to the intellect of the human mind, which always pushes the limits and discovers new ways to better our world. Please feel free to share your thoughts on these and suggest other elements which you have come across at any point of time in your career. The domain of UI is expanding with more and more media burgeoning day by day, like the mobile space, virtual reality, gaming and much more, and lets keep our fingers crossed and witness some groundbreaking concepts in days to come.

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl