Category Archives: Web Design

7 Mistakes to Avoid on Your Ecommerce Site

Posted on by
Reply

Some worthwhile points to consider if you have an e commerce website. The number one lesson of all is to make sure the user has a rewarding experience. That means one that makes them want to come back . . .. again and again.

By Todd Wasserman

Shopping Cart Order FrustrationWe’ve all been there. You’re all set to buy something, credit card in hand, but for one reason or another you never close the deal.

Maybe the third time you were asked to enter your credit card number you gave in. Perhaps it was the exorbitant shipping costs. Maybe the site crashed.

The truth is, there are at least seven things that send potential customers fleeing in horror from your website, some of which were chronicled in this perceptive comic from The Oatmeal. If you actually want people to stick around and buy stuff from your site, you may want to take note of and avoid these common pitfalls.

1. Your Site is Too Slow

Every 2 seconds of load time on your site equals an 8% abandonment rate, according to Gomez, the application monitor from Compuware. If you drop your load time from 8 seconds to 2 seconds, your conversion rate actually jumps up 74%.

It’s easy to see why: Do you want to waste your time waiting for a site to load?

Unfortunately, there are a lot of reasons why your site is loading so slowly. Steve Tack, Chief Technical Officer for Compuware, says many ecommerce sites are overloaded with third-party plug-ins for Facebook, Twitter and ad networks — all of which can slow a site down. Another cause is cloud issues: If you’re using a content-delivery network (CDN), your site can slow to a crawl if your service provider is having issues.

2. Your Site is Too Complicated

If you’re asking consumers to take more than five steps to buy something off your site, then you’re asking too much. Compuware recommends the following:

  • Welcome/cart contents page
  • Bill-to section
  • Ship-to section
  • Payment module
  • Confirmation/thank you page

3. Your Credit Card Entry System is Punishing

Here you may also want to take The Oatmeal’s advice about credit card entry fields. Is there anything more frustrating than entering your name, address, 16-digit credit card number and three-digit security code, and then restarting from scratch because you forgot your ZIP code? And yes, if most of your business is in the U.S., why not put the country first on the scroll instead of way down at the end, as it would appear alphabetically?

Sucharita Mulpuru, an analyst with Forrester Research, says that there’s a standard sequence of information for credit card information. If you mess with that order (by putting the credit card number before the name and address, for instance), then users are apt to enter the wrong info because they’ve been trained to log such data in a certain sequence. Says Mulpuru: “Follow the industry standard.”

4. You’re Charging Too Much for Shipping

Mulpuru says that if you’re charging more than 10% of the total cost of the item for shipping, then you’re charging too much. “You’re probably depressing your sales significantly,” she says. “People are more likely to abandon your cart.”

5. You’re Overselling Your Tablet App

If a potential customer visits your website on her iPad, that doesn’t necessarily mean that she’s keen on downloading your iPad app. “Don’t over-invest in customizing your mobile apps,” says Mulpuru. “Unless there’s a clear value, most people figure, ‘Why bother?'”

An alternative is to optimize your site for the tablet experience, something that few are doing right now, Tack says.

6. Your Site Performs Horribly on Certain Browsers

You may be a Google Chrome fan, but there’s a world full of people who are using old versions ofInternet Explorer. Have you tested your site on those other browsers? “Many sites don’t perform well across various browsers,” says Mulpuru, “so people abandon them.”

7. You’re Hitting Your Customers With Irrelevant Offers

OK, you’ve completed the sale. This person has indicated that they’re interested in what you’re selling, so it’s natural to conclude that they might want to buy something from you in the future. So why not hit them with offers for things that they’re actually likely to buy?

Mulpuru recalls, for instance, that after she bought a bed from Costco, the retailer besieged her with offers for … more beds. While deals on pillows or sheets might have made sense, a bed is something you generally purchase every five or 10 years. Says Mulpuru: “At this point, I’m not in the market for more beds.”

What peeves you about ecommerce sites? Let us know in the comments.

Image courtesy of iStockphoto, Clicknique

Five Trends Shaping Healthcare Web Design

Posted on by
Reply

trends in healthcare web designThis is an excellent article by Tanya Bechara that showcases examples illustrating trends shaping healthcare web design. Sometimes a visual clue can save tons of time. These trends share common characteristics being easy to navigate and keeping a rewarding user experience at the top of the list.

According to Pew Research 72% of U.S. Internet users have gone online in the past year specifically for health-related information – a number that will surely grow with the continued rise of healthcare consumerism. It has never been more important for health brands to deliver engaging digital experiences. Here are five web design trends that can help your organization do just that:

1. Responsive Web Design

U.S. smartphone penetration is now at 56%, and 52% of smartphone owners use their devices to look up health or medical information, says Pew Research. With a growing number of patients and caregivers turning to mobile for health related information, it’s critical that healthcare websites respond to a variety of screen sizes, and responsive design does exactly that. Whether a user switches from their laptop to tablet to mobile phone, a responsive site automatically delivers the optimal user experience regardless of screen size. 

Kaiser Permanente Health Insurance, thrive.kaiserpermanente.org, has a responsive website that features a lot of content, but even on smaller screens, it doesn’t feel overwhelming. It has all of the basic elements of good web design, including strong content hierarchy, and ease of use.

2. Flat Design

Flat design presents an approachable and engaging interface, and strips down the visual elements to expose their essential functionality, thus focusing on content and the user experience. The clear and usable interface uses flat colors, white space, minimalism and crisp typography. This approach works well for content rich healthcare sites, where design is an important element but shouldn’t overpower the content. A good example of flat design can be seen at standbuy.us. Standbuy is an organization that eases the financial burdens associated with cancer. Its website is the epitome of flat design, with minimal gradients, patterns and 3D effects used. Uniting the design with great typography and eye-catching images really makes the website pop. It’s simple, but not boring. 

3. Strong Typography & Visuals 

In the past few years the selection of web fonts has exploded – leading to greater and more advanced typography in digital solutions. 

Paired with crisp typography, a large visual or video background on your healthcare homepage will create a strong impact and convey a powerful message. Aetna’s Our Healthy website ourhealthy.com, which focuses on raising awareness about its efficient Accountable Care system, combines strong typography with impactful visuals. It engages users with bold headlines and visuals, and its use of flat design brings in elements of simplicity to the content.

4. Dynamic Navigation

Navigation is one of a website’s most critical elements. It must be easy to access so users can reach the information they need quickly. Many sites have fixed header bars that are only accessible at the top of the page, requiring site visitors to waste time scrolling back to the top to access more content. 

Today’s navigation options are much more sophisticated with headers that stay in place as you scroll down the page, in interesting and different placements, and sometimes even disappearing completely or sliding behind screen edges. 

UnityPoint Health’s website, unitypoint.org, has a dynamic navigation that adds to the user experience. As a user scrolls down the page, the navigation bar migrates with them – it’s accessible and not intrusive. It also flows well with the style and content of the website. 

5. Single Page Scrolling 

The single page website trend has grown in popularity and is a great way to add depth and interactivity to a website. It is an opportunity to engage users with animations, transitions, parallax and other effects based on the page’s scroll position. 

Single page scrolling is ideal for mobile and tablet use, where site visitors can use simple gestures such as the pinch-zoom and swipe to scroll up/down or left/right within a website. It’s not just how the site looks, but how it feels and moves.

A great example is Wellmark Blue Cross Blue Shield’s “What Matters” website whatmattersbywellmark.com, a new resource for consumers to help understand healthcare reform and insurance all in one scrolling, interactive website that tells a singular story. It’s a powerful way to navigate content and give an interactive and immersive experience on the web. It also features the other four trends we’ve outlined above – responsive web design, flat design, strong typography and visuals, and dynamic navigation.
Consider incorporating some of these design trends into your healthcare website and they will surely translate into more engaging online experiences for your visitors.

Time To Revaluate Your Website

Posted on by
Reply

Denny Hatch had a great article on actionable steps I can immediately and easily implement. This is a huge gift for anyone who don’t know what they need to  know about creating a rewarding user web experience of your online presence.

I am finally putting to bed a new book, “WRITE EVERYTHING RIGHT!” It has taught me one key lesson:

If text is not easy to read, people won’t read it.

This is especially true on the Internet, where we are all one mouse-click away from oblivion.

P.R.: An Industry Creating Truly Poor Web Communications
This column was triggered when I started putting together a plan for the public relations, promotion and publicity of “WRITE EVERYTHING RIGHT!”

Which of the four major press release distribution servicesOpens in a new window would give me the biggest bang for my buck?

BusinessWire
Annual revenue: $5MM+
No. of employees: 100+
Distribution points: 1,200+
No. of clients: 20,000+

MarketWire
Annual revenue: $5MM+
No. of employees: 100+
Distribution points: ±4,700
No. of clients: 8,000

PRNewswire
Annual revenue: $5MM+
No. of employees: 26-50
Distribution points: ±1,0000
No. of clients: 1,000+

PRWeb
Annual revenue: $5MM+
No. of employees: 100+
Distribution points: ±1,0000
No. of clients: 30,000+

My conclusion: No matter how compelling and relevant your press release, it will be unreadable when handled by any of these services.

Online Readability: The Optimal Line Length
I had an exchange with Christian Holst of the Baymard InstituteOpens in a new window in Copenhagen. Here are the nuts-‘n’-bolts of making it easiest for the online reader:

“Having the right amount of characters on each line is key to the
readability of your text. It shouldn’t merely be your design that dictates
the width of your text, it should also be a matter of legibility.

“The optimal line length for your body text is considered to be 50-60
characters per line, including spaces (“Typographie”, E. Ruder). Other
sourcesOpens in a new window suggest that up to 75 characters is acceptable. So what’s the
downside of violating this range?

“Too long — if a line of text is too long the visitor’s eye will have a hard
time focusing on the text. This is because the length makes it difficult to
get an idea of where the line starts and ends. Furthermore it can be
difficult to continue from the correct line in large blocks of text.

“Too short — if a line is too short the eye will have to travel back too
often, breaking the reader’s rhythm. Too short lines also tend to stress
people, making them begin on the next line before finishing the current
one (hence skipping potentially important words).

“It turns out that the subconscious mind is energized when jumping to the
next line (as long as it doesn’t happen too frequently). At the beginning
of every new line the reader is focused, but this focus gradually wears off
over the duration of the line (“Typographie”, E. Ruder).

“In order to avoid the drawbacks of too long and too short lines,
but still energize your readers and keep them engaged, we
suggest keeping it within the range of 50-75 characters per line.”
—Christian Holst, Baymard InstituteOpens in a new window 

N.B. The six paragraphs above by Christian Holst follow his rules about line widths. All are a comfortable 75 characters including spaces.

The text you are reading now has a width in the range of 105 characters.

Compare how easy it is to read Christian Holst above vs. the difficulty in reading Denny Hatch here.
Vertical vs. Horizontal
The problem: A sheet of stationary, a book or a magazine is a vertical format. As readers, we are used to vertical documents. Our eyes are comfortable with text up to 75 characters wide.

The computer screen you are looking at is horizontal. When lines of type sprawl all the way across this horizontal screen they can be double—and more—the maximum comfort-level width of 75 characters.

Thus the text is beyond easy comprehension. It is unreadable.

Sadly, the industry totally dependent on easy reading—public relations and publicity—is a total failure.

Examples are shown in the media player at upper right, or click on the hyperlinks below to see the actual documents:

BusinessWire press releaseOpens in a new window: 184 characters wide.

MarketWire press release:Opens in a new window 140 characters wide.

PRWeb press release:Opens in a new window 128 characters wide.

PRNewswire press release:Opens in a new window 128 characters wide.

PRNewswire press release above as redistributed by The Wall Street JournalOpens in a new window:Opens in a new window 133 characters wide.

The Purpose of a Press Release
Bill Stoller, proprietor of publiscityinsider.com defines a press release as:Opens in a new window

… a pseudo-news story, written in third person that seeks to demonstrate to an editor or reporter the newsworthiness of a particular person, event, service or product.

To put it bluntly, a press release is a paid pitch just like an advertisement. Only it is designed to look like a news item rather than an ad.

To guarantee readership, the output of P.R. practitioners (flaks) must slavishly follow the dictum of the great 20th century newspaper editor Arthur Brisbane:

“Good writing has to be easier to read than to skip.”

If good writing is junked up with know-nothing design, it is easier to skip than to read.

The Background of Unreadable Websites
The dot-com boom of the mid-1990s was huge. Many thousands of young, inexperienced designers with no training and no experience were hired by a legion of young, inexperienced entrepreneurs.

In terms of reading, I suggest few of these hotshots ever got beyond “Peter Rabbit” and “Johnny Crow’s Garden.”

They are not readers. In their skewed minds they were hired to make things look pretty.

Website design is about them, not about the reader.

“The Internet is a new medium, a new paradigm,” we geezers were told. “Your old rules no longer apply. This is a world of new rules, and we make ’em.”

Those who did the hiring were too young to have been mentored by knowledgeable professionals. So the kids they hired were allowed to run wild.

After the crash of 2000—where trillions of dollars evaporated—many of these smug, full-of-themselves amateur designers lost their jobs and returned home to live with their parents.

Unfortunately, their deeply flawed ideas became the norm. Ask a Web designer why a site looks the way it does, the answer will be: “This is how it’s done.”

Ask a Web designer why type is in unreadable pastel hues or faint gray and the response is the same: “That’s the fashion today.”

A Simple Way to Make Press Releases Readable
Take a moment to look at the five examples cited above. Two of them—BusinessWire and Marketwire—are designed with lines of type splayed out across the full screen.

PRWeb and PRNewswire start off with the top parts being readable widths because of sidebars and illustrations in the right hand columns.

In the newspaper world, the top area is described as “above the fold.”  Traditionally, this is where newspaper make-up people work hard to catch the reader’s eye.

Once the Web designer runs out of this extraneous stuff at the top of a press release, all that remains below is a lot of white space. Designers abhor white space.

So they fill it with type.

Ergo, a nasty reading experience has been created.

The solution: use wide margins. Set the copy at the preferred maximum width of 75 characters for ease of reading.

Don’t worry about a lot of white space.

After all, we’re not talking about the cost of paper. This is the digital world. White space is free.

The reader needs care and feeding—not the white space.

Size Matters
I back up my desktop computer once a week onto an external drive. I then transfer all the week’s updates to my laptop.

If I have to travel somewhere, my laptop instantly becomes the main computer.

“Type smaller than 9-point is difficult for most people to read,” David Ogivly wrote.

On my laptop, these sprawling press releases are turned into mouse-type—the equivalent of 7-point type.

I don’t have time for this idiocy.

Takeaways to Consider

  • If text is not easy to read, people won’t read it.
  • “In order to avoid the drawbacks of too long and too short lines, but still energize your readers and keep them engaged, we suggest keeping it within the range of 50-75 characters per line.” —Christian Holst, Baymard Institute
  •  “Good writing has to be easier to read than to skip.” —Arthur Brisbane
  • If good writing is junked up with know-nothing design, it is easier to skip than to read.
  • In the digital world, we are all a mouse-click from oblivion.
  • Take a moment to look at your website. Is the text readable? Did your designer follow the rules?
  • If not, maybe you should fix it.
  • And hire a designer who understands word is king, while design and art are supportive elements.
  •  “God protect us from amateurs!” —Henry Castor

9 Reasons HTML5 Will Change The Online Publishing Landscape

Posted on by
Reply

Another fine piece by Don Nicholas  at Mequoda.

Over the past six to 12 months, I’ve heard that HTML5 is going to change the entire online publishing landscape again.

Some of my developer friends have been indicating that one of the large portal-based publishers has a 20-person development team secretly banging away on HTML5 web apps that will mimic, expand and replicate on the apps you currently see on Apple and Android platforms.

Online publishers will have to use HTML5 to build web apps that are part of a larger website. The new strategy for magazine publishers should focus on web first with an HTML5 publishing platform, and have associated apps be lighter versions, pulling data and functionality from the HTML5 website.

HTML5 for publishers

The magazine industry is upon a renaissance as publishers figure out how to deliver content through tablet devices. This revival is expected to increase, as there’s no shortage of pundits praising the predicted growth of the tablet market. This is seen in a recent forecast from PwC, which predicted digital magazine circulation revenues to grow to $611 million by 2015. By the end of 2012, 40.6 million people in the US are expected to own a tablet device.

HTML5 will be part of the reason that media experiences on the tablet are so desirable. The reasons listed below shed light on this technological evolution.

As some of this information is highly technical, I’ve done my best to pull the content back and present it in a manner in which we can all easily understand

9 reasons why HTML5 will change online publishing

#1: HTML5 will provide local storage to speed engagement and make things available offline.

#2: A mobile HTML5 site can be used among numerous platforms, from iPhones to Androids.

#3: Mobile sites can replicate the feel and usability of a custom-made app.

#4: Pages can be updated in real-time, so users can see new comments without having to reload the page.

#5: Media can be used, embedded and shared more easily without needing plug-ins.

#6: Dragging items from the desktop to a browser will encourage interactivity.

#7: Better SEO, especially for flash-based sites. Currently, flash-based content does not get recognized for SEO purposes.

#8: An outline structure that will allow publishers to better manage their headers.

#9: Typography additions will allow for more fonts.

Our predictions are coming true…

Apple’s changes are slowly making our predictions come true, as subscription websites appear to be the backbone of online publishing.

Anyone following the media giant should clearly see Apple’s intent; they are not looking to get into the subscription game. Instead, they want to sell “thin” apps that allow users to access a subscription-based website.

What isn’t clear, is what happens when you want to subscribe through an app. However, regardless of that outcome, HTML5 is going to change the orientation of independent apps to web apps while putting an end to the Adobe/Apple flash debate.

If you don’t believe HTML5 is the future of digital infrastructure, just take a look at Safari, Firefox 3.6, WordPress, Apple’s OSX and Google Chrome; some major players that are already pushing support of HTML5.

The future of publishing on the Internet will be dictated by the capabilities found in HTML5, as it can sufficiently handle the demands of today’s online communities. Online publishers need to realize this potential, and begin using HTML5 as the backbone of their website and applications.

A Geekier Explanation From Wikipedia

In particular, HTML5 adds many new syntactical features. These include the <video>, <audio>, and <canvas> elements, as well as the integration of SVG content. These features are designed to make it easy to include and handle multimedia and graphical content on the web without having to resort to proprietary plugins and APIs. Other new elements, such as <section>, <article>, <header>, and <nav>, are designed to enrich the semantic content of documents. New attributes have been introduced for the same purpose, while some elements and attributes have been removed. Some elements, such as <a>, <cite> and <menu> have been changed, redefined or standardised. The APIs and DOM are no longer afterthoughts, but are fundamental parts of the HTML5 specification.[2] HTML5 also defines in some detail the required processing for invalid documents, so that syntax errors will be treated uniformly by all conforming browsers and other user agents.[3]