Archive for the ‘Usability tips’ Category
Web design is a pure art if you want it to be art. And it’s a pure business if you want it to be just business. Actually it’s quite a complex phenomenon incorporating aspects of both mental and artistic creativity. While the commercial points are quite evident for any person interacting with Internet and web projects in a varying degree, the laws of visual perception are still not clear to the bitter end. You would probably agree that the ideal website should combine the visual and practical sides to impart the sacred revelation and evoke interest to your wares and services.
The top inexcusable mistake of young designers is that they appear to be distracted by aesthetics of their pages and pay little attention to the less visible yet more important side of their creations – functional side. Experts can’t help considering the value of functionality, appreciating professional copyrighting, marketing and editorial work.
We’d recommend you to take a look at Vitaly Friedman’s awesome presentation about the “invisible design” phenomenon. In his talk Vitaly insists on experiencing design instead of just looking at its visual part. So what’s essential for the design perception according to this concept? The answer is clear – that’s common language. The artist creates a masterpiece using his own language which might be unclear for the others. So you’d better forget about your own expression and your own genius ’cause in the world of web development that all won’t work. What’s really important is making the website visitors understand not only the vocabulary of the single words, but also the meaning of the whole visual sentences and phrases. Some meaning can be perceived without even seeing it distinctly. And to understand how it works, we are to look at the surrounding world differently.
A web form is an entrance, a phase transition from sheer interest to turning into an actual customer. Therefore, it is reasonable to make the form design inviting and user-friendly. The process of filling out a form should be as easy as putting two and two together, since people to who face some issues and get failures more likely associate it with your brand. And your reputation instantly looses its balance. So believe it or not, but one tiny form can mess up your brand reputation. You don’t want that, do you?
How to avoid such a fail? First of all you are to remember that any form is a business card of your brand, a face of your company. It is the very first step in your interaction with your potential clients, and it should look easy, warm and inviting.
20 Tips To Make Forms Rock!
Today we are offering you some tips to help avoid the epic fails and unconveniences associated with your web forms.
- Make forms visible and easy-accessible. Don’t hide them.
- Make them short – ask for essential info only. Avoid asking for unnecessary information not to distract the customers. Get the ball rolling with the really important data you need to know to get messages from clients or sign them up. You may ask something like “How did you know about our company?” on further stages.
- Make up a status bar to set clear expectations. People want to know how much time it’s going to take them to complete the form, and a progress bar would be a great advantage in this case. At least display the info like “Step 1 of 3″, but the best thing would be to keep it short enough to be at one little form.
So you pump quality blog content, but do you inject some creativity into your blog posts and articles? Well, don’t overlook the importance of post design as it plays a highly supportive role to engage people’s attention when they visit your site. We’re putting this list to show how you can style your blog content to encourage readers to spend more time on your blog and come for more. Though being quite generic in style, these web designs do break the mold of the blogosphere with creative approach towards blog post styling, being themed specifically to the content. The question comes then, what can you do to make your blog more attractive?
What keeps hooked on the blog post content is a cleverly design arrangement of posts – readers can spot grid style layouts with posts being placed throughout, neat column styles, scattered designs, themed post styles or ones that have a latest post being prominently shown whereas previous posts are being visually shortened.
As for the lead images, they often go with borders or shadowing (that helps the image stand out from the page) and are placed at the top of the post content to break up text heavy pages and provide visual relief. Left sidebar layout with the text framing the image or just going side by side with it is also popular when the task is to enhance the appeal of a blog. Thus, the image doesn’t fight with the post for attention, but reinforces the message.
When it comes to the post titles, to make them stand out from the standard post content blog owners use larger fonts, often with some unique font styles being applied to them. Plus, we can see post images with overlapping titles, often done to communicate more than a plain title could do on its own. In this case, the post title and image work together with the goal of enticing the visitor to read the first line of the post. Sometimes blog posts can even come equipped with a drop cap style when the first letter of the paragraph is being dropped cap to immediately draw readers’ attention to the start of the post.
Right after the post title usually goes some meta data – date & time, author attribution (to establish a human connection), and a comment count, which are worked into the design so they don’t stick out. However the layout solution for a date might be truly creative. Overlapping the post image, showing from behind of the content area, being distinguished with colors, unusual light/shadow effects, textures, or forms, they do their best to attract attention. Besides, a nicely designed comments count can as well go a long way towards encouraging the visitor to proceed with a post reading and even leave a comment, so it also needs serious consideration.
At the end of each blog post, many blogs are including things like buttons and links for social media voting and promotion, categories and tags, and clickable calls-to-actions (often a prominent ‘read more’ or ‘continue reading’ permalink at the end of the excerpt – short text snippets of posts on the blog’s home page) that will encourage readers to go and read the post entry. By the way, the text snippet length and formatting should be carefully calculated not to overload the page.
So break free of the usual blog posts design mindset, still try implementing these aspects as they can definitely increase and retain traffic on your blog.
* * *
Blog.ismaelburciaga.com
* * *
Colorcubic.com
* * *
A minute of video is worth 1.8 million words according to Dr. James McQuivey of Forrester Research.
What is meant by this statement is that eCommerce video brings products to life in a way that text and static images can’t. From the comfort of the couch, shoppers can fully experience the product through videos.
Note that 33% of online retailers planned to add video to their sites in 2010, making it a higher priority than any other advanced feature [source]. If you run an eCommerce website and underutilize or completely ignore this potentially valuable medium, it’s time to act. 2011 is the year when eCommerce video has become a mainstream and even a key component on retail websites. The race is on – your task now is to get into the game, because if you are slower to adopt eCommerce video today, you’ll soon face the problem of having to catch up very quickly. The one that uses every tactical step available for effective eCommerce video is first in line, remember that.
Why You Need eCommerce Video Now
Online videos can support multiple business objectives. You can put them on the eCommerce product pages, category pages, in dedicated video galleries, and in email campaigns (video in email marketing has been shown to increase click-through rates by over 96% and also drove a 51% increase in subscriber-to-lead conversion [source]). Connecting with your customers through video allows a much more real experience when shopping online. You create company recognition, build trust, and humanize your brand.
Benefits You Can Derive from eCommerce Video
Giving more visual info on the product, eCommerce video is an incredibly effective way to appeal to a buyer’s senses. You give fine detailing, show extra features and functions, demonstrate product in action – that gives a final push to convince shoppers when they are looking for a reason to buy the product. Plus, a good product video can bring in positive attention and additional traffic, powerful SEO juice, higher sales, and also a significant drop in calls/questions asking how the product works. Report showed that retail sites with video increase conversion by 30% and boost average shopping cart by 13% [source].
Tips for Effective eCommerce Video
The idea of providing videos for your customers may not sound a new one, but there are many online merchants who are not taking advantage of the benefits videos can offer. The stats show that visitors who view product videos are 85% more likely to buy than the visitors who do not [source], still very few online merchants integrate eCommerce videos. Talking about the principles for effective product video, here are a couple of things you can learn:
With all that hysteria that abounded concerning online shopping, a well-designed category page is absolutely critical in the success of an eCommerce online business. Here the ergonomic design means everything. If you have any intention of making profit, you have to have a category page designed to minimize user’s physical effort and discomfort, and hence maximize efficiency of browsing. Today we’re going to give you an update on the part 1 of the list of usability standards for eCommerce category pages that sell. After several hours of work put into trying to find and analyze additional five examples of effective category pages, our blog team shares this showcase, critique and optimization discussion. Check out and then look at your category page from the point of view of these good examples and improve accordingly, avoiding the denoted pitfalls.
* * *
H&M
![Making Category Pages that Sell – Examples, Critical Review, and Enhancements [Part 2]](http://blog.tmimgcdn.com/wp-content/uploads/2011/10/hm.com_.jpg?9d7bd4 "hm.com")
What’s good
- Quick look and ‘try on’ options: On H&M website, quick look appears as a pop-up window, displays color varieties, available sizes, and even gives a range of alternate views. What makes this particular quick look remarkable is a ‘try on’ option. Basically, the H&M store integrates of dressing room functionality on their website. This section allows customers to try on different styles, including clothes, accessories, shoes, and other products to see how all that items match together. Chalk it up to use in your store!
- Product image change on hover: when the user is mousing over the product’s thumbnail, alternative image is displayed to show either a whole outfit or simply a product item (it actually depends on what was primarily shown). That is done for users’ convenience, they just hover over the picture for each product alternative views without having to click.
- Adding shadow to product image: at H&M store, they wrap the product images with shadow effect. This gives a depth and kind-of push the image towards the viewer. The shadow is translucent and takes on a bit lighter color than the image that cast it, so the page feels neat and clean. Plus, there is just enough white space to let images hold this shadow attractively.
Things to Change
Category pages of the eCommerce shops are perhaps one of the most complex pages as they embrace a huge amount of information, product specifications, and even some useful tools for customers. Online store business owners spend so much money designing their category pages and driving shoppers to them, so they therefore need to make sales from these pages. Nevertheless, there are a lot of mistakes website builders make when developing a category page. Many sales catastrophes simply appear because of category page not providing enough information. In this article we will go behind the scenes of some most popular apparel eCommerce stores and represent you the list of usability standards for category pages that sell and increase the engagement level of online shoppers.
A well-built eCommerce page must include certain key elements. Many of the most successful online retailers share these very similar category page functionalities and practices. So, the implementation and proper handling of the following aspects can play a great role in changing how long customers stay on your eCommerce category pages and how many of them eventually proceed to certain product page and make a purchase.
- Offer different layout options for the category page and let customers choose.
- Make sure you achieve design simplicity and charm.
- Keep the category product page clean and easy to navigate.
- Incorporate multiple search filters and browsing refinements.
- Use visual navigation cues.
- Use properly-sized and sharp quality product images that tell a story.
- Avoid requiring clicking if you want your customers to stay.
- Offer product quick view option.
- Consider layering (when all the information is available, yet it is one click away to be shown on the same page).
- Provide enlarged images and alternative views which can be quickly viewed without leaving the page.
- Let visitors perform easy graphic manipulation actions like zooming, panning, or rotations.
- If possible, show the scale of a product and its context of use.
- Write creative and descriptive product titles that highlight the benefits.
- Make the price easy to find.
- Shout about cost-savings.
- Create contrast through size, alignment, color, shape, and other opposites.
- Mix font styles and font variations.
- Allow multiple color views on hover.
- Say about product availability and sizes.
- Include star ratings and product reviews to earn trust with the visitor.
- Integrate a prominently displayed call-to-action: ‘Buy Now’ button, ‘Add to Cart’ or ‘Proceed to Checkout’ buttons.
- If possible, display the delivery cost or other delivery details.
- State the lead time or show the countdown clock to create urgency in the customer’s mind.
- Provide clear path to follow.
The list is far from complete, however all these things are critical to netting sales. If you include these elements once, you will reap their benefits for years to come. Yet you have to decide how best to integrate them into your design. Again, we’ve been looking around for examples of excellent category pages from eCommerce apparel sites to analyze them and help you. The following optimization discussion contains just about everything you need to know about the good category pages. However, when designing and developing your category page, please avoid the pitfalls the analyzed examples made.
Note that today goes the first part of this post covering initial 5 examples, check out the part 2 of this article.
* * *
Abercrombie
What’s good
The Bliss Of Defensive Design
When we say “defensive” we generally mean something protective. Defensive design is also known as contingency design and deals with potential errors and difficulties that users may encounter while working with websites or software interfaces. The main goal is minimizing the chances of the audience drain because of stupid minor mistakes we see on websites every day. This is all about improving help sections, search and contact forms, error messages and other crisis points. Everything that makes your website joyful but not stressful!
After analyzing the users behavior on your website you may often notice that people are using some website options not the way you thought they were supposed to. Besides, they can mistype their personal info which will put them in a middle of dead end – and they will eventually abandon your website. And it’s not necessarily their fault. Defensive design is the younger brother of user-friendliness. It is aimed at eliminating dead ends in case of errors and making users enjoy staying on your web page. Sounds pretty simple, huh?
Humans make errors, systems have glitches, servers can be down, connections can be slow – you should consider all this when developing a project. If done correctly, it all can be minimized and accommodated. In healthcare it’s important to locate the disease before it causes you problems. Allowing to check on errors, defensive design is virtually the same story. It improves your traffic quality and boosts your site attendance.
Take Care of Slow Connections
Many users would rather load sites from their mobile devices and smart phones than from desktops. A great amount of people use wireless connections that are normally faster but are not always reliable. So you should think about the possible slow connections and the ways to work with them.
You may easily resolve this issue by optimizing the images, navigation and content and other graphical elements on the websites that normally have high quality graphics. Try to eliminate Flash or other specific content that requires plug-ins. The best option would be creating the cut down version of the site. It is not so money- and time-consuming as you might think. Still it helps to lure more people with mobile devices to your internet pages. Using multi-purpose code, less images and texts will be perfect for low-speed connection.
The problem lays often is designers themselves who want to implement all features imaginable into the layouts they create: special options, players, flash animations and other slow-loading elements. Be careful and think about the consequences of using extra widgets.
You may easily find mobile website templates on the net which even speed up the task even more.
Use Inline And Contextual Help
“It takes only five users to uncover 80 percent of high-level usability problems”
Jakob Nielsen
Emergence of Usability Testing
In the beginning, there was an ocean liner. It was in the late 1940s. Henry Dreyfuss designed the state rooms for ocean liners “Independence” and “Constitution” and installed them in a warehouse. A group of travelers was invited to live in these rooms for a while after installation. Their aim was to evaluate the new conditions and conveniences. This is known to be the first record of usability testing in action.
With the development of web space and virtual services, methods of usability testing are constantly updated. Today we’d like to present the basic principles and ways of usability testing of websites.
Web Projects Usability Testing – Its Types
The simple truth proposed by Jeffrey Graham is evident and states that customers who find your website difficult to use will most likely leave it, which is surely bad for your business. Usability testing could ensure you’re on the right track to make the visitors stay at your site.
The most common concept of usability testing is a feedback left by users after some interaction with your website. This could be done in a form of an interview of a website moderator with a participant – representative of the coveted potential audience. Participants go through some steps proposed by moderators and report on the results and inconveniences they face. The website owner should take into consideration all the likes and dislikes of users and enhance the website. Everything sounds clear, nothing extraordinary, as you might think, but when and where would it fit in the process of user’s interaction with a project?
According to Jeffrey Graham, you should distinguish 3 types of usability testing which are:
explorative testing, assessment testing and evaluation testing. These are like testing the website at different stages of its development: at the initial stage, closer to the site launch and after the launch correspondingly. To build a prosperous, user-friendly web page, it’s highly desirable to complete all three stages of testing. This would help you as the site owners to prevent essential problems or mistakes and feel your audience better.
![Useful Marketing Strategies for Major eCommerce Platforms [Part 2 Zen Cart, VirtueMart, osCommerce]](http://blog.tmimgcdn.com/wp-content/uploads/2011/09/shopping-cart.jpg?9d7bd4 "shopping cart")
With so many choices of marketing ideas and sales strategies, you need to work out which option will cater best for the needs of your eCommerce business. For this reason suggestive selling is a proven and tested technique for increasing profits. There is no reason not to employ this technique as it does increase sales, mainly because customers often purchase more than they have planned before. Your task is to provide a more convenient way for store visitors to find what they would like to see or what would be useful for them. Get all the benefits of working with following services and software that will simplify the task of creating cross-sell/ up-sell products functionalities or affiliate programs for Zen Cart, VirtueMart, and osCommerce. Previously, we made the list of 3 Proven Marketing Strategies for PrestaShop and Magento. All of the mentioned tools for these different eCommerce platforms can instantly grab the wheel and relieve you of much effort, so let them make the money for you!
CROSS-SELLING
If you are using Zen cart as a shopping cart software for your business (Zen Cart is a free, open source online store management system, which is PHP-based using a MySQL database and HTML components), featured Zen Cart modules will simplify the task of creating cross-sell products, so you can easily link products to each other to suggest items that customers might also wish to purchase. All these cross-sell tools are separate third-party modules to be installed in Zen Cart if you desire.
- Better Together (free-available, Zen Cart compatibility v1.3.9) is a Zen Cart discounting module allowing vendors to promote related items. Using this software you can link a product with another specific product, another product from a specific category, or any other product, with an associated discount if both are purchased together. Note that this is an order total module, which means that the discount is not shown until checkout time. This add-on should only be used with carts at 1.3.5 or better.
- Cross-Sell (free-available, Zen Cart compatibility v1.3.7) is the Zen Cart software add-on that will allow you to add up to 6 optional products on your current products pages.
- What about Cross Sell Advanced (free-available, Zen Cart compatibility v1.3.7), this is an admin add-on module for the existing cross-sell module that allows you to assign up to 6 x-sell products at one time by simply typing in the corresponding products’ model numbers into text fields. This service requires cross-sell to be installed, however does not override any files.
How can you relate products effectively to maximize your sales volume? What are the ways to attract more customers to your web store? If you ever bother answering these questions, you should pay attention to the following marketing strategies intrinsically meant to boost your sales, increase average order size and customer pool.
- Cross-selling is a sales technique that consists in offering additional products that are likely to interest the customers when they make a purchase. Cross selling refers to the practice of promoting complimentary items – you link certain products together, draw customers’ attention to the products that complement their purchase and encourage them to explore these relevant items. Often to persuade the customer to accept the recommendation, retailers may also provide a cross selling offer discount.
Cross-sell products may appear in the product info page (in this case people call them related products, meant to be purchased in addition to the item the customer is viewing) and on the shopping cart page. It is highly advisable to display cross-sells already in the shopping cart as customers tend to make more impulse buys on this stage. Anyway, choose wisely which products to highlight and where and what moment to offer cross-selling on your website. You can use the analytics website to find the best relevant associations between your products. But do not overwhelm the customer with additional products, cross-selling must be perceived as an intuitive ‘plus’.
Apart from offering associated products, there is also a widespread cross-selling form called ‘People who bought this, also bought’ – in the order details page the customer sees products that other people have purchased along with the chosen product and thus can be easily induced to make additional purchase. This is a good way for retailers to maximize the cart. Keep in mind that with cross-selling you may increase your average buying basket by 30% – that is a third of your product sales.
- Up-selling is another proven strategy to drastically increase your online profits. Retailers can enhance their checkout process with an up-sell block to offer the customers an upgraded or premium version of a product customers have chosen. Discounts may also be applied with an up-sold product.
Through selling the customers just before they complete their purchase, you easily generate add-on sales as the wallet is already out. If you are not focusing on this, you simply miss out on some serious opportunity to boost your cash flow.
Read the rest of this entry »
Follow TemplateMonster Updates
Rss Feed: