Session Description: “The first thing that grabs shoppers is a website’s design. But not all retailers can afford high priced designers with experience. This session will go into detail on the latest, most compelling site designs, with current examples, and tell retailers how they can achieve the same thing without spending bucketloads of money. Among the topics: the prime elements that create instant engagement; placement of elements on a page; specific wording and images that capture readers’ attention; the importance of search engine landing pages vs. the home page; font colors, type sizes, image sizes and amount of copy to create the optimal experience for shoppers.”
Christopher Pawloski, Art Director for Solid Cactus, presented some common ecommerce design mistakes and a few Web design secrets to overcome them. Halley Silver, Director of Ecommerce for King Arthur Flour, shared with attendees that her favorite things are free – or really, really cheap.
Common Ecommerce Design Mistakes:
- everything means nothing (what’s important? nothing stands out)
- products get less attention than aesthetics (no products on home page)
- trying to be creative by not following conventions
- rainbow pallets (using more than 3 – 4 colors)
- bad typography (following simple rules can really help)
Web Design Secrets:
- Good (great) design is invisible. It’s only when it’s done poorly that we notice it.
- Don’t decorate – communicate. Design for interaction. Design for conversions.
- The customer experience IS your brand. Your brand is NOT your logo.
- There are rules and guidelines. Great design is C.R.A.P. (Contrast – Repetition – Alignment – Proximity).
Web Design Secret #1: Good (great) design is invisible. It’s only when it’s done poorly that we notice it.
Few people come to a Web page to admire its visual design. They come to purchase! Give visitors clear direction on how to make that purchase – you’ve only get a few seconds of thought to accomplish this.
Visitors can quickly look over a page and determine if it is not relevant to their goals. Online retailers need to demonstrate to visitors that they are an authority and not just pushing a product. A consistent use of icons throughout can assist this.
Some sites focus too much on aesthetics, displaying only a few product listings and little information. Don’t sacrifice important interaction elements in order to make room for aesthetics.
A good visual presentation should include organizational elements. For example, a consumer electronics website may want to focus on product demonstration and variations, including product reviews, picture gallery and videos, and technical specs.
Web Design Secret #2: Don’t decorate – communicate. Design for interaction. Design for conversions.
Aesthetics do not make us a professional. Understanding the medium and being able to deliver solutions does.
Create branding elements that give the user a feel for lifestyle while still giving the user functionality and control. This can be accomplished with a good use of clean typography and showing off products – not cluttering them.
Give shoppers a good idea of what your business is right away and provide simple links to get them where they need to go.
Web Design Secret #3: The customer experience IS your brand. Your brand is NOT your logo.
Rely on customer experience – not branding elements. There is no such thing as brand loyalty on the Web. Online shoppers want a great deal, free shipping, and an excellent customer experience. Give them a good experience and they’ll return, even if the price is a little higher than somewhere where they’ve had a bad experience
Web Design Secret #4: There are rules and guidelines. Great design is C.R.A.P. (Contrast – Repetition – Alignment – Proximity)
Contrast – Elements that aren’t the same should be very different so they stand out. Making them “slightly different” confuses the user into seeing a relation that doesn’t exist.
Repetition – repeat styles down the page for cohesive feel. Style related elements the same way in one area.
Alignment – everything on the page needs to be visually connected to something else, nothing should be out of place or distinct from all other design elements.
Proximity – creates related meaning. Make sure design elements are simple and consistent.
Favorite Things that Are Free – or Really, Really Cheap:
- Use Color Scheme Designer for color pallet selection
- Use BittBox for textures and backgrounds
- Use Communitymx for users of Adobe products needing support and help content
- Use Smashing Magazine for new and interesting things going on in design, tips and tutorials
- Use the Firefox Web Developer Toolbar for handy things, like how would my site look IF etc.
- Use Firebug for more technical stuff, such as finding code within your page to figure out why things look or are acting they way they are
- Use Screengrab to take a snapshot of any portion of a Web page and it will look exactly as it should
- Use IE6 Update to offer visitors a browser update in the information bar at the top of the browser
- Use Chartbeat – for real-time analytics (faster than Google Analytics)
- Use Twitter to follow people and keep up with what’s going on:
Book Recommendation: Don’t Make Me Think, by author Steve Krug – drives home the point of website design and walks through usability testing.Google+