How App-Like Design Can Turn Your Site Visitors Into Customers

design image

Lisa Wehr is the founder and CEO of Oneupweb, a leading digital marketing agency representing some of the nation’s most recognized brands for more than 15 years.

We’ve all heard the expression “The customer is always right,” but what about making the customer experience on your website so thoughtful that they don’t ever feel unappreciated, forgotten or neglected?

According to AnnoyingDesign.org, the average time a user spends on a site is only 56 seconds. You have just 56 seconds to turn your site visitors into customers. Is it possible? Certainly, and app design shows us the way.

What’s the cornerstone of app-influenced design? Action-oriented design components, which create immediate functionality. It’s the purposeful construction of obvious pathways that creates user friendly navigation. Focusing on visuals, placement and interaction can transform your site and your business.


Visuals: Symbols and Icons and Pictograms, Oh My!


Take a look at the two major printing sites shown here. The first site’s homepage is heavy in text and provides only its logo as imagery. The company’s product selection is displayed in a simple column on the left-hand side of the page, providing some sense of organization, but is it user friendly? Unfortunately, it’s not. The content-dense site may be highly visible to search engines, but it’s time-consuming to navigate, which is likely costing them business.

The second company’s site follows the same structure — listing its popular products in the left navigation — however it outdoes the first company by having a much more accommodating design. The site offers visual icons (very similar to apps) for each of their services. The main navigation consists of miniature color-coded pictograms (images used in place of concepts, objects and actions), which also provides app-like usability.

print place image

Apps are all about pleasing the user by making navigation easier so people can achieve results faster. It’s more engaging and effective for a user to view primary navigation and action paths with supporting pictograms, as opposed to those that only contain text. For instance, the pictogram of a shopping cart on a navigation menu translates to “view order,” which resonates with users instantly. Not only are pictograms instantaneous, they’re also usually independent from language, allowing a global audience to confidently carry out tasks.

Below, Domino’s Pizza illustrates exactly this notion of making a task more enjoyable and better yet, faster (even speed readers combine symbols with text). Dominos.com requires specific user information from individuals as they complete online orders. The pizza company focused on the pragmatics (relations between the meaning of symbols and their users) as they made the often tedious task of filling out location information more visually appealing and less time consuming for users.

dominos image


Placement: Laying Down the Obvious Pathways


“Location, location, location” is key real estate, and should also be the golden rule of your homepage. As soon as your site appears on a user’s screen, they’re ready to go… but where?

Make all key actions on your site clearly accessible from the homepage. Unlike an app, your website is larger and has more room to fill. The main navigation of your homepage should be an ultimate go-to zone, so visitors don’t have to scroll down to find what they are looking for. The American Red Cross illustrates this tactic below. In the upper right-hand side of AmericanRedCross.org, users are provided with a search field [Figure 1], donation button [Figure 2], location finder [Figure 3], and various primary navigation items directing them to popular motives (in this case: “Give Blood,” “Volunteers,” “Take Classes” and more) for visiting the site.

red cross image


Interaction: Give the User a Bit of Control


Apps give users a feel of piloting — whether it is customization or creative routes of gathering desired info. Biggby Coffee offers customization by letting users choose the background skin of Biggby.com. Look to Adidas.com as an example of letting users run with their curiosity while still providing fast results.

Adidas’s homepage is filled with imagery, which visitors can scroll over to view multiple options [Figures 1 and 2], like voting on favorite sports players, connecting to Adidas’s social channels and shopping Adidas sportswear. And for visitors who have a precise agenda and aren’t in the mood to gallivant on Adidas.com, the company has wisely created a main navigation with pictograms for users with straightforward missions.

adidas image


Looking Ahead


Good websites in 2011 will be all about task-accommodating design, just like apps. Get ready to see revamped websites that are more visual, easier to utilize and more accessible. Here’s to a happy and user-centric year in design.


More Dev & Design Resources from Mashable:


4 Predictions for Web Design in 2011
HOW TO: Get the Most From Crowdsourced Design Competitions
HOW TO: Get More Out of Your Fonts
10 Predictions for Web Development in 2011
5 Free Annotation and Collaboration Tools for Web Projects

Disclosure: Oneupweb is a Mashable sponsor.

Image courtesy of David Salafia

More About: business, design, web design

For more Dev & Design coverage:

This entry was posted in business, Business Lists, contributor, design, Design Lists, features, how to, social media, Social Media Lists, web, Web Design and tagged , , , , , , , , , . Bookmark the permalink.