Modern websites have great strengths, such as flexibility, cross-browser compatibility and personalization, but they are also becoming increasingly simple and intuitive. This is being done through the application of subtle usability enhancements, drawn either from the Web itself or from offline interactive systems. The Web today is increasingly complex, while usage ofthe Web is becoming increasingly simple.
In this article, we’ll explore some new design approaches and techniques that you may want to develop for your own projects. We’ll present rather unusual or unconventional design approaches and try to understand what’s actually interesting about them and how we can apply them to modern Webdesign. More specifically, we will discuss the following: real-life metaphorsthat are applied to the Web, hidden complexity, subtle interactivity, context sensitive navigation and rapid CSS3 adaptation.
We have observed more Web designs in which design elements either imitate real life metaphors or hide the complexity of choice by letting users make more limited and simpler decisions. Buttons are good example of the first development. In Web design today,buttons look and interact with users just like buttons in the real world.
Buttons often look very realistic. They stand out, have vibrant colors and are very responsive: when the user hovers over or clicks on a button, they are often given visual feedback. If you compare these buttons with ATM buttons(in terms of shape, color and responsiveness), you will find some strikingsimilarities.
Affordance is a key quality of native design elements. It refers to the aspectof an object or environment that allows a user to perform some action. As Donald Norman states in his book “The Design of Everyday Things,” affordances provide strong clues to the operation of things. When affordances are taken advantage of, the user knows what to do just by looking: no picture, label or instruction required. The more familiar a design element looks on the page, the easier it is for the user to associate some concrete practical application or task with it.
Dripping in Fat
This t-shirt store uses the real-life metaphor of clothes on hangars. That’s anice idea if you don’t have too many items in your store, but difficult if you have hundreds of products.
Source: www.drippinginfat.com
XHTML Cafe
XHTML Cafe does not bore its visitors with lifeless promo content blocks: instead, it adapts a nice real-life metaphor to its profile. Attractive andmemorable.
Source: xhtmlcafe.net
CulturedCode: Status
The developers of the Culture Code list their current tasks as Flight Arrivalson their status page. Each item in the list has a description, assigned members and status. The design resembles those classic flight tables one often sees in airports. An interesting way to use a real-life metaphor for a Web design. It wouldn’t work in every context, but it fits well here.
Source: culturedcode.com
Builditwith.me
While this website may look a bit ordinary at first, what is interesting is the toggle switch in the upper-right area. Basically, it is a check box that allows users to select whether the person they are looking for should already have a good idea. But instead of using a traditional check box, the designers decided on a toggle on-off knob. While this may be a good idea in general, it’s not clear if this particular implementation works. It might actually irritate users who assume it is a slider. The interaction experience is different thanwhat you get with a slider, and rather resembles a switch.
Source: www.builditwith.me
Oh! Media
One of the many examples of an attractive, prominent, shiny and clickable button. The small icon on the right side of the button is a very subtle metaphor for action or progress; hardly noticeable, but it works. Simple yeteye-catching.
Source: www.ohmedia.ca
Apple
iPhone’s user interface has a simple on-off switch for its preferences. This metaphor is similar to many real-life objects whose buttons and settings are turned on and off with a simple switch. Straightforward.
?
Source: www.apple.com
SlideDeck
Slideshows are by nature a nice way to hide complexity because they reorganize multiple information points in a compact interactive area. SlideDeck is a good example of a design solution that integrates both horizontal and vertical sliding navigation into one element. The layout isclean and provides a good overview of available features.
Source: www.slidedeck.com
Nosotros
Nosotros has an interesting and unconventional navigational approach. Itvery cleverly minimizes complexity by reducing navigation to only meaningful icons. The blog page has six icons that serve as the navigation options for the blog. Once the user clicks on an icon to select that category,the icons for the other categories fade away. It would be interesting to see whether this approach would work on a larger scale. Calicott takes a similar approach, albeit with a different design.
Source: www.nosotroshq.com
Livestream
Many web applications have a variety of pricing plans and features, as does Livestream. This design, though, clearly communicates which plan would suit a particular category of users best. Notice the help tooltip accompanying the “Streaming” feature and the red ribbons at the bottom ofthe table. The yellow buttons are responsive, too, providing visual feedback. A simple, attractive design.
Source: www.livestream.com
Notable App: Pricing Table
Highlighting the most popular plan is a good idea, because it helps users make a decision without having to inspect the whole table. This is a good example of using the metaphor of social validation: when users are in a social situation, they will look to others to see how to behave. It’s not a conscious process, but it helps us to come to grips with difficult decisions.
Source: www.notableapp.com
Single Log-In and Sign-Up
A straightforward solution for reducing complexity is to combine multiple related features into one single feature. For instance, instead of having two separate links and pages for logging in and signing up, you could offerusers a single “Log in or sign up” button that serves both purposes.
The form would update via JavaScript after the user has selected a radio button. For this log-in form, notice that the “Submit” button says “Log in,” and there is a link to retrieve lost passwords. For the sign-up form, the label for the password field prompts users to “Choose a password” and “Sign up” and to accept the terms of service.
An alternative method would be to provide two input fields, labeled “Email”and “Password,” and then put a “Don’t have an account yet? Sign up!” link next to it. Both approaches would work fine for new and returning visitors.
Source: blog.leahculver.com
Bounty Bev
Bounty Bev is a beverage company with a beautiful one-page design. Apart from its subtle hover effects and animations, the website has some nice extras: if you scroll down the page manually with the mouse wheel, a small pop-up appears asking you if you need a lift. The typography is strong and memorable, and the design is playful. Simple, clear and personal, the website leaves a strong positive impression.
Source: www.bountybev.com
