- Product focused – know what they want and they want it fast;
- Browsers – have time to browse around and need to see what’s new;
- Researchers – need easy way to look up and compare product information;
- Bargain hunters – look for a great sale; and
- One-time shoppers – may also be one of the other four, and hate creating and registering an account with you.
Category Archives: Web Design
Selling automotive parts online has proved challenging for MotoParts, but developing a parts-centric approach has helped the company progress. Power Retail chats to MotoParts’ Scott Shillinglaw to find out more.
With a long history in the B2B commerce space supplying wholesale auto parts throughout NSW and Australia, MotoParts decided to launch into a completely new sales channel to leverage their existing business model. As one of the largest online marketplaces, eBay was the obvious choice for MotoParts to start their online presence and drive a whole new section of growth for the business.
This decision was prompted by the rapid growth of the Australian online automotive parts sales industry (estimated to be worth $380.3 million in 2014-2015 and growing annually at a compounded rate of 17 percent) centred on New South Wales, Victoria and Queensland – areas that have the highest number of kilometres driven.
Power Retail magazine caught up with Scott Shillinglaw, Online Director for MotoParts, to see how the transition came about and how they used PARts Australia for data and technology.
Enform has always tried to work closely with the best service providers. Two of these are Motor Media and PARts Australia
Enform has expanded these relationships with greater collaboration for the development of specialised auto parts web sites for e-commerce, online parts lookup and sophisticated parts interpretor functionality.
Motor Media have years of experience in auto parts and accessories and have developed a number of web sites for leading aftermarket brands. They are a preferred PARts integrator for CMS based web sites using Joomla or WordPress as well as developing custom solutions including e-commerce. The team at Motor Media offers a one-stop-shop approach to web and graphic design.
PARts Australia provide an e-cosystem of applications and tools that help auto parts brands, suppliers, sellers and workshops manage, distribute and share product and fitment data. Their mission is to make suppliers data available wherever their customers are and in whatever format they need it in using global standards. Most importantly, its your data. You can read more about PARts Web Development services here
With this closer collaboration PARts Australia will be available to provide coding services for back end data integration and related scripting to support Motor Media’s front end expertise.
This combined approach brings together the best of both worlds with cutting edge UI and UX development coupled with some of the best parts and fitment data and code experts for a win-win.
Enform will continue to provide co-ordination and or project management services as required but this approach should speed up development of new services, sites and solutions while delivering solid support for our auto parts customers.
Organising content for a website calls for designers to ask key questions on their planned Information Architecture (IA). Usability experts the Nielsen Norman Group (NN/g) broke down these problems, providing answers to the 3 most persistent questions many designers today struggle with when building sites.
How Many Categories do you Need?
The general rule of thumb is to have enough categories to show all the information offered on your site or app. However, what’s considered ‘enough’ will greatly depend on the content and intention of a site.
Most simple sites with a small range of content will usually do fine with a few categories. This minimalist approach helps users find the information they want as quickly as possible. Take for instance, Dyson’s website for their Airblade line of products (the Dyson Airblade is the company’s take on the quick hand dryer). The entire website has a solid IA scheme since all variations of the Airblade fit into 5 categories.
Dyson Airblade Homepage
At the other end of the spectrum is RestroomDirect, a site that also sells hand dryers as well as a bunch of other fixtures for public bathrooms. Condensing all information on the site down to 5 categories makes it difficult for customers to find information on the company’s full range of products, which is why the site features 7 links in the top horizontal navigation, and 17 product categories in the vertical navigation. This combination allows users to easily access all relevant information on the site as efficiently as possible.
Both examples show the basic principle behind determining the appropriate number of categories in a website: go with what makes it easiest for users to access the information they need; don’t box yourself in by trying to hit a predetermined number.
Should you List Categories in Alphabetical Order?
Organising categories by a certain order is another issue frequently tackled by designers, many of whom feel that sorting categories alphabetically makes the most sense.
Unfortunately, there’s no one-size-fits-all approach to this problem, but what you can do is consider the following factors:
- What organising principle would be more meaningful than sorting alphabetically?
- Will visitors be familiar with the category names
- How many categories do you have?
More Meaningful Organising Principles
One approach that makes more sense than alphabetical organisation is frequency of use, which helps the majority of visitors on a site access the information they’re most likely looking for.
An example of this can be found on RightMove.co.uk, a property listing that has the categories For Sale and To Rent as the first two items in the navigation panel. This setup saves users a tremendous amount of time, since it makes sense to highlight content users are most likely to click on.
If you were to organise categories on this site alphabetically, you would get the unintuitive result below.
However, there are instances when alphabetical organisation is more efficient. If you have categories under just one label (e.g. product names or brand names), users naturally look for information they know, like a particular word—alphabetical organisation is more helpful in this situation.
Do you Need Hover Menus with Touch Devices
With the advent of mobile devices that rely on touch interfaces, UX designers are wondering whether sites should still have hover nav menus.
Hover activated menus are unwieldy for touchscreen users. Even with menus adapted for use with a tap instead of a hover, touchscreens are just too small to display an entire menu. This can result in problems scrolling the menu without deactivating it by touch something else on the page.
However, just because a part of your audience can’t use this feature, doesn’t mean you should withhold it from everyone else. Hover activated menus are still easy to use on conventional desktop interfaces.
The key here is graceful degradation: ensure that customers who can’t use hover activation still have a means of accessing your content. A good example of this setup can be found on the Fedex website, which provides both hover and tap options for all their users, whether on traditional desktop interfaces or touchscreens.
The full Fedex website has hover-activated menus
The mobile version of the Fedex site automatically replaces hover menus with a simpler tap interface
As always good website design is about taking in to account your audience and how you can get them to the information they are looking for quickly and easily. It is worth spending time in the initial concept phase on these types of questions to avoid costly redesign and coding later on. Need help with your site, want an objective review? Contact Enform today.
Web design starts with the best intentions however sometimes personal taste can de-rail the process. At Enform we believe there can be a compromise between what the client wants and what the designer delivers. But, most importantly focusing on what the user or usomer might want or need.
It is our role to inform our clients on current best practice and provide advice on what will and won’t work – keeping in mind modern web design needs to:
- Engage visitors – be visually appealing and easy to navigate
- Relevance to what the visitor wants – within the first few seconds it should be obvious who you are and what you offer
- Allow the above irrespective of device they use to access your site – mobile responsive
With all the best intentions in the world the process sometimes goes off track.
Matthew Inman, creator of The Oatmeal, once worked as a web designer. He is now a comic artist with considerable influence, and he compiled his experiences with difficult web design in a comic featured below.
In it, Inman describes the nine steps to the making of a web design disaster, and how clients unwittingly (or wittingly) cause it. We shortened those steps into four for you:
Step 1. All Is Well
Inman writes: “Everything is cool in the beginning.” It’s like the start of many relationships – the clients summarize their needs and the designer tells the client what to expect. If the clients have an existing web site for improvement, they show it to the designer, telling him or her that the previous designer was an idiot.
Step 2. The Initial Design
The designer shows the clients the initial design for comments and approval. Initial designs are expected to be further improved based on the clients’ input. To Inman, this is the high point of the whole process. Then everything goes downhill from there.
Step 3. The Client “Helps Out”
The client suggests his or her ideas for improvement. The designer complies. The client suggests more changes. They may even bring in other people to comment. These can happen several times in the web design process and indeed this step is normal in any collaboration. The result can be something both the client and the designer can be proud of. Or as is sometimes the case, the whole thing can turn into a proverbial “dogs breakfast” trying to satisfy too many different tastes, agendas resulting in a loss of clarity on key concept of the initial design.
Step 4: The Design Fails
At this point, the designer may be having a nervous breakdown. Get another designer and repeat.
A lot of anguish could be avoided if clients, at the outset, treat a designer as an expert with valuable experiences and opinions that can help the clients achieve the needs of their web site. Designers should not be treated as mere helping hands or worse, just tools to do the clients’ bidding:
Too many cooks spoil the broth – especially when the cooks do not know how to cook.
The main point is this: respect designers as experts in their field. They know what works and what doesn’t. Sure, you could collaborate with the designer to create the best site ever but, if you don’t actually possess good design sense (and you must be honest enough to recognize this), do not hobble the designer with requests that are impossible.
Right at the start of the project, communicate your needs for the web site clearly to the designer. Usually, he or she will tell you if what you want is OK or not.
Whatever you do, always have mutual respect between you and the designer. It is a key ingredient to every successful design project.
At Enform we believe in delivering what a client wants but ensuring we advise and understand any implications that may affect our 3 initial key points on what a web design needs to achieve:
- Engage visitors – be visually appealing and easy to navigate
- Relevance to what the visitor wants – within the first few seconds it should be obvious who you are and what you offer
- Allow the above irrespective of device they use to to access your site – mobile responsive
Contact us if you need advice on your design.
The average e-commerce website flow ultimately leads to one thing: checkout. The site is designed to help shoppers find the items they want, add them to the shopping cart, and proceed to the payment.
If only things were that simple.
A study by usability experts the Nielsen Norman Group (NN/g), involving actual users shopping on websites, says otherwise. The process isn’t as linear, as many shoppers use shopping carts as holding areas where they sift through their selected items, deciding which ones they want, and which ones they don’t.
So, this means the shopping cart has to do more than act as a collector of information about products. It also needs to help shoppers make final purchase decisions.
Here are some ways to do so.
Offer Access to a Full Shopping Cart
It’s a good idea to offer access to a page in the checkout flow dedicated to showing the full cart, as this helps users make purchase decisions with more ease. Users can turn to the cart to review what they’ve added so far, check product details, make comparisons, and get partial totals to meet budgets or qualify for promotions.
Although offering access to a full shopping cart would seem like common sense (in fact, it was common practice in the old days), many designers need to be told to do so today. Many websites make the mistake of only providing a mini-cart view that shows a partial view of the cart in an overlay—not an entire separate page. The latter is more effective for users who want to take their time making informed decisions on their purchase.
Provide Product Details in List Form, Offer Large and Clear Product Images
With shoppers making purchase decisions using the shopping cart, it’s important to show clearly what items are in it. The cart should list the products added to it, and include clear product images large enough to show details the shopper needs to make comparisons with other items of interest.
Crucial details to show in the cart include the product name, attributes specific to the product selected such as size, colour, quantity of items selected, and of course, price. All these details serve to help shoppers remember their selections and make comparisons between items
Product images are also essential to making product comparisons easier for the shopper. And even for users not comparing items, images serve to remind users what’s in their cart, acting as a quick visual reference.
You’ll find that shopping on sites that offer no product images, or small pictures at the least, are a pain to shop in, leaving you with no visual cues to remember.
Offer a Link to the Product Page for Full Details
It makes perfect usability sense to provide
shoppers with a way to navigate back to the full product page from the shopping cart. Be sure that your site allows users to click on a product in the shopping cart to go back to the product page so as to allow them to read more about the product or review item details.
In addition, make sure it’s easy for shoppers to know that they can quickly go back to the product page of each item on the cart. A simple way of doing this is to indicate product names as links, doing so by using different text colours or presentations. Several sites make the mistake of notifying shoppers that product names can actually be clicked through a hover response. Don’t add this layer of unnecessary guesswork—let shoppers know right away that product names are links.
The shopping cart is not the only part of the e-commerce site that needs to support decision-making, but it is a frequently overlooked one. Every aspect of a site devoted to selling items is important to the overall user experience and success of the site — our 800+ guidelines for better e-commerce sites exemplify the need to pay attention to many details. The shopping cart needs to be more than a list of items, by also supporting shoppers who use this page to make final purchase decisions.
In an effort to promote a more secure web and better reflect relevant search results, Google recently announced that it would now take into consideration website encryption, also known as HTTPS, when ranking sites on their search engine results pages (SERPs).
It’s a move that should wake up web developers who have procrastinated over their implementation of security measures, or site owners who may have wondered if their sites were “important enough” to need encryption.
According to Google, HTTPS will initially be a minor search rank signal, affecting less than 1 percent of all queries around the world. So, that means it won’t immediately have as immediate an impact as other ranking factors—like the quality of content in a web page for instance—as Google wants to give webmasters enough time to switch over to HTTPS.
Still, that doesn’t mean you can drag your feet with your site’s security, as encryption is bound to have a major effect on search ranking, what with Google being a staunch advocate of website security. It’s best to start as early as possible, and with the potential bonus of higher search rankings, there’s no better time than now.
To facilitate the switch to a more secure web, the company is looking to publish a series of guidelines around HTTPS, helping website developers better understand what needs to be done in properly encrypting their websites, as well as how to avoid common mistakes. Google adds that these tips will include best practices on things ranging from the type of certification needed, the proper use of relative URLs for resources under the same secure domain, allowing site indexing, and many more.
Furthermore, Google recommends website developers to test their HTTPS-encrypted websites through the Qualys Lab tool, while further questions on encryption and its relation to search ranking can be sent to Google’s Webmaster Help Forums where the company actively interacts with a larger community of site owners and developers.
Like most Google announcements involving its search ranking algorithms, it has drawn plenty of feedback from website owners and developers, as well as those in the SEO industry. Google’s blog post on the subject has more than 1,500 comments as of this writing. Reactions are mostly in favour of the change, with many seemingly expecting that such a development was going to happen sooner or later. One commenter opined, “So, it’s not often that you’ll get SEO tips directly from Google — but here’s one that I’m proud to be associated with: HTTPS is now being used as a ranking signal.”
Google’s announcement is consistent with its efforts to better secure its own traffic, which included encrypting traffic between its servers. Gmail now uses an encrypted HTTPS connection by default, preventing mail from being snooped when moving between users and Google’s servers.
In a time when paranoia over government cyber spying is at a frenzy, tech companies are scrambling to beef up their own security measures. In November last year, Yahoo! also announced plans to encrypt its own data centre traffic.
At Enform, we’ve long seen encryption and HTTPS as fundamental measures for improving a site’s security, no matter how small it may be. This time around, Google’s efforts only provide another incentive for webmasters to make the switch.
E-commerce solutions like PARts B2 provide detailed product descriptions and details from the supplier using a database
The basic tenet of e-commerce: Help the customer find your product and get what they want. If a potential customer can’t find your product, you obviously won’t get a sale.
However, connecting with relevant product pages is just the initial phase of the purchase process. And while it’s true that many sites have made improvements to their navigation and information architectures, many product pages on e-commerce sites are still in need crucial improvements.
Enform’s clients already know that product pages should do more than just have a product image, a generic description, and an option to add to the cart. Instead, the page should sell the product, convincing users that the product on the page is exactly what they’re looking for.
Yet as simple as that sounds, many pages fail to do this.
Product pages are especially important since they fill the gap of the traditional shopping experience, where users are normally able to touch the product, examine its packaging, and test or fit it before the purchase. Online, users can only go by what they see on the product production.
Multiple e-commerce studies by web usability experts the Nielsen Norman Group (NN/g) show that as much 20% of all observed task failures, or times when users abandoned or failed to make a purchase, were caused by poorly written or incomplete product information.
NN/g recommends the following tips for website product pages.
- Pages Should Answer Customers’ Questions
NN/g’s research specifically indicates that many users simply couldn’t find enough information to make an informed purchase decision. Now, there’s no way to guarantee that your product pages will answer all questions by potential customers, but that doesn’t mean you should settle for the bare minimum either.
The J. Peterman Company is a company known for using lengthy, verbose stories for product descriptions, in their print catalogs as well as online. They also follow their more eloquent prose with standard facts about the item for sale, such as “pointed collar,” “shell buttons at center front,” “1-inch grosgrain ribbon (antique white) at neckline and left front placket,” and “adjustable cuffs.”
Besides the most obvious features of the product, shoppers also want to know the smaller details on products they’re eyeing, and that can be anything from accents on clothes; furniture dimensions; product care information; size of toys; storage recommendations for edibles, to whether or not a hotel has a heated outdoor pool working all year.
Where many sites get it wrong is in their focus on basic information, or sometimes even the wrong information.
- Go Straight to the Point
Just because we told you not to settle for basic information, doesn’t mean you should input long-winded descriptions of your products. There’s a difference between a complete product description, and a wordy one. Users want information that describes the product, not incessant please to buy. One or two calls to action will suffice, don’t go too overboard with the marketing messages.
Forever21’s brief description covered key details about the product, its construction, and how a customer could wear the item. This was followed by a bulleted list of product details, including fabric, measurements and care which is quite a good example of going straight to the point.
Users often skim through text when browsing and reading online, and are more likely to read at the beginning of the text than the end. Given the importance of the first few lines of your product description, don’t waste it on text that doesn’t help the user.
Another great way of conveying the specifics of a product is to use product photos. NN/g’s found out that large and detailed images are a tremendous help to users wanting to know more about a product. Unfortunately, many sites settle for small images that fail to show sufficient product details.
- Make Comparisons Easy
Several online shoppers view the ability to compare multiple products as a crucial factor in shaping their purchase decisions. It’s imperative that you offer a facility to help users decide which of several products is best for them in a smooth and easy manner.
Pottery Barn listed information about dressers in a consistent and descriptive way. Two bedside-tables descriptions began with brief overviews, and then bulleted lists that provided comparable details about the products, listed in the same order for each. Each listed dimensions, followed by materials, features, finish information, and hardware details.
It also helps if you can reduce the need for comparisons by making your product line simple if your catalogue allows for it. For those that can’t, such as e-commerce sites that carry multiple vendors, some help with tools is needed.
Many e-commerce sites already have tools that enable shoppers to compare products side by side. Some of these are effective, others not so much. According to NN/g, the key here is to offer comparable information in an easy to compare manner between similar products. It also pays to be consistent in the volume of information featured for every product; customers don’t like seeing plenty of information on one product, and hardly any on another.
Overall, remember that many customers are actually looking for a reason or confirmation to buy your product or transact, try not to disappoint.
eBay Australia vendors should take note that beginning August 4, 2014, all new item listings, including those that are relisted without an image or has an image smaller than 500 pixels will be automatically blocked.
As most of eBay’s Australian Solution Partners already know, the online marketplace announced last year its plans to roll out a new image policy that would affect all product listings on eBay.com.au.
Since February 2014, the site had slowly put the new policy into effect across all listings. For those not completely aware of the change, or need a reminder on what to expect from the policy, here’s a quick refresher for you.
- All item listings must feature at least one image.
- Stock images can only be used on listings for brand new items/products, otherwise original photos should be taken of the item in its current state
- All images must have a minimum image size of 500 pixels on the longest side. eBay recommends a size of 1600 for best results
- Pictures must have no borders, text, or artwork – sometimes referred to as “graffiti”
- Watermarks are allowed, but only for ownership and attribution purposes
Graffiti, including text, borders, etc. won’t be blocked, for now, but eBay still recommends, and strongly at that, to feature graffiti-free images, as outlined in the company’s Picture Requirements.
However, there are exemptions to eBay’s new rule. The following categories are not included in the site’s image size requirements. These are:
- Sub-categories within Collectibles & Memorabilia under Music and Movies
Why the change?
According to eBay, buyers have told them that the quality of product photos found on the site leaves a lot to be desired. And with the advent of mobile, and the fact that over half of all eBay.com.au visits come from mobile devices, image quality has taken high prominence in the mobile shopping experience.
We at Enform recommend that our clients take note of the following tips for product images:
- Don’t rely on direct flash lighting as this creates harsh and unpleasant shadows. Use off-camera lights, several of them, for an eye-pleasing look to your photos.
- Use continuous lighting to minimise the effect of flaring and unpleasant reflections
- For your lighting, lights with daylight or 5500k colour temperature work best for clear photos
- Purchase or build your own softboxes for softer, more even lighting.
- Clean white backdrops work best for product imagery and no graffiti
- Square images work best on eBay, and are the safest option for mobile viewing
- Use a photo editor, even a basic one, to enhance colour, contrast, and brightness, as well as to crop the image.
- The item should take up as much space as possible on the image
- Be sure to take multiple images of products from different angles, as well as close ups to reveal details and flaws, if any.
eBay’s recommendations aren’t hard to figure out, and should only benefit you and your listings’ chances of being sold on the site.
People in web design and development know that navigation design and information architecture (IA) concepts go hand in hand. In particular, IA is used to feed information towards usable navigation design.
Still, they are not the same. In fact, the reach of information architecture goes far beyond website navigation, which has been described as being only the tip of the iceberg that rests atop the site’s information architecture.
Information Architecture Defined
A site’s information architecture consists of two major components.
- The identification and definition of the site’s content and its functionality
- The basic organisation, structure, and classifications that define the connections between a site’s content and functionality
When you view a website, you’re not really seeing its information architecture (IA). Instead, IA informs the user interface, the part of the site you interact with. The IA is documented in diagrams and spreadsheets, not in prototypes, comprehensive layouts, or wireframes.
Here is an example of an information architecture site map by the Nielsen/Norman Group’s (NN/g) website. The blue nodes show tier-one information objects, while green nodes show tier-two objects, and tier-three objects are shown in yellow.
While IA itself may not be visible to users, it definitely has a crucial impact on the site’s User Experience (UX), defined as the totality of everything the user encounters while on a website. However, users will feel the structure of the site, depending on how its content is divided and connected in ways that meet their needs.
Website Navigation Defined
A website’s navigation is comprised of several user interface components. Navigation is designed to help users locate information and functionality, hopefully leading them towards favourable actions. Main components of navigation include local navigation, global navigation, utility navigation, facets, filters, footers, related links, and more.
Examples of navigation components shown above
Some decisions have to be made when thinking of each navigation component. For instance, when usage priority is concerned, you need to ask yourself how much users depend on a particular navigation component. Placement is also another factor, calling for answers on which pages a navigation component should be present in. Lastly, the pattern is a factor that calls for questions on which navigation design patterns best support discoverability, whether it’s carousels, megamenus, or more.
IA and Navigation Relationships
The mistake many designers make when building a site is that they ignore IA and focus only on navigation. Doing so is inefficient, not to mention dangerous. Navigation that fails to address the full scope of content and functionality of a site can be a costly mistake.
For instance, imagine a design team opting to use the common inverted-L style navigation consisting of a top navigation bar and a left navigation rail, because they like how it looks. This template can be used on sites that have no more than 4 tiers, so you can only imagine the headache the design team has when they realise later on during a site inventory that many parts of the site will be more than 4 tiers deep.
IA First Before Designing Navigation
That being said, it’s important for designers to first define or redefine the site’s IA before even thinking of a design project. While it’s true that the IA has to be flexible to accommodate new information, it doesn’t have to be final before wireframing and prototyping—a first pass is enough to get an idea of the volume and complexity of the content. Making choices on your navigation components based on appearances alone can force you to remodel your IA, or cram too much information in a navigation component, ending up in your website failing to accommodate the needs of users.