Online Flower Shop Purchasing – Product Sites
As Valentine’s Day approaches, there are more and more banner ads advertising florist web sites where you can purchase bouquets online. I did a quick poll to find out what the most important aspects of an online flower shop were.
The men agreed that they looked for:
- Pictures (to see if it really was a beautiful bouquet)
- Price (was it affordable for them)
- Quick Purchase (once the above two were established how fast could it be ordered)
The women agreed they looked for:
- Type of flowers (specifics like orchids or lilies)
- Colour and detailed information about what flowers were in the bouquets
- Price (was it affordable)
I visited some of the top florist sites online to see how well they addressed those two different approaches.
Pro Flowers
http://www.proflowers.com
This site had the best structure for purchasing flowers. Right on the main page there were lists of bouquets, with a large easy to read price and equally prominent “Buy Now” button. The same was true once on category pages– excellent photography showing the bouquet, large price and quick “Buy Now” option. They also included an obvious “Details” button which included full flower information, height and vase selection. As for ease of ordering, you could be in and out of the site in a matter of minutes.
The navigation could be a bit larger, but at least it was simple and easy to understand. It included an option to pick a specific flower, or go straight to the special deals.
While the main site itself is not much to look at, and definitely does not encourage an excitement of purchasing, it did have large navigation and was fairly well organized.
There was a clear option for both type of flower and price range, and had a significant number of bouquets available on the main page, although they were below the fold and require scrolling for a while to access.
Unfortunately, although their flower photography is excellent with a minimum amount of distracting background, the prices are difficult to find. Throughout the site, the bouquet prices are tiny and in odd places– the title of the bouquet is much more prominent. People don’t care what a bouquet is titled, they want to see it, then see the price as fast as possible. There was no clear “buy now”. The individual detail pages had almost no information about the type of flowers, and were more interested in flowery language than language about the flowers.
From You Flowers
http://www.fromyouflowers.com
While a much more pleasing site design to the eye, and including many bouquets easily accessible on the homepage, From you Flowers also covers up the prices. You have to squint very carefully to view most of the prices– there is no need to hide them. The faster people see the price, the faster they will buy a bouquet and not leave in frustration.
They desperately need larger and bolder prices, and the orange “Order Now” button is blinding and difficult to click on. It is admirable that they have two obvious buttons for “Order Now” and “More Info” but their colour choice is poor and could drive away business. Their bouquet details are quite informative, however, including the meaning of the flowers, different names for them and exact colours available in the bouquet. It also had a facebook and email option for each bouquet. Their checkout process was obvious and easy to use.
From You Flowers is also the first to offer a “By Colour” option, which many people I talked with said they preferred to “By Occasion”. Often you will know a friend has a favourite colour and want to go straight to that, rather than navigate occasions by guesswork until finding a bouquet with the right colour. That alone puts this flower site on a cut above the rest for user friendly options.
1800 Flowers
http://1800flowers.com
This site is one of the most visually pleasing, with large easy to use links and headlines. Unfortunately, it drops the ball when it comes to prices. I have no idea why flower sites think that by hiding the price, people will be more inclined to purchase a bouquet. It is the exact opposite. Go ahead and be obvious!
The details page is extremely confusing, with suggested other bouquets, links everywhere, and the description difficult to find. Once discovered in the mess of info, banners and links, there is usually quite a lot of information about a bouquet. The ordering process is confusing, busy and difficult to use. Once you find a product that is interesting, it takes a while to figure out how to purchase it, and not a very good experience, compared with the sleek clarity of the From You Flowers checkout.
The navigation dropdowns have pleasantly surprising large readable links, which is admirable. It includes categories for flowers and on sale products, but colour is difficult to find. It also has a cleaner look without the triangles and small fonts that were on the other flower sites navigation bars. It has a side navigation column which lists all the main categories with full lists, including “Narrow by Colour”. Unfortunately, this is the last of the sets on the sidebar, and would never be seen unless knowing exactly where to look and scrolling quite a way.
What we learned:
- Make a quick purchase easy with obvious buttons
- Include full details about a product on the detail page
- Provide search parameters people want (like colour)
- Keep the prices large and easy to read
- Make checkout process fast and simple
- Use readable font sizes
- Don’t hide important link categories
Bank / Investment Login – Info Sites
Several people I have talked with mentioned that finding the login for financial sites can be very difficult. This also applies to any web site that has an important members only area. Often the homepage is all geared for new visitors trying to entice them to join and display latest news. They forget about the people that have already signed up and are being alienated by the lack of quick access to the login area.
This was mentioned by a middle aged web user who found the sign in box somewhat difficult to locate. The main problem was that the text was too small– there was no large bold header about signing in– they have a tiny “Manage Your Account” link in a monochromatic colour with the rest of the box that is difficult to see on first glance.
As you can see, this isn’t exactly an eye catching way to display the sign in area. There is no need to be subtle– returning visitors want to land on the Homepage and go straight to their account. Make it large, bright and easy for them!
In this bank site, the login area is in the same general location — top left, but notice that it is much more obvious. There is a bold contrasting colour with the rest of the top navigation, and a delineating bright colour under the actual login area itself.
This is a much better way to display a login area, though it could use a larger header. Despite the colour field behind “Secure Login”, the font size is still small enough that older visitors to the site would have trouble spotting it right away.
This has a very streamlined homepage, so that the only main area is the login, and relative to other elements on the page the text “Log On” is fairly large. The reason the login area is bold and easy to spot, however, is that everything else on the site is so small that you can’t read it at all. This is not the way to emphasize a login box.
Take a look at the rest of their navigation as well. How is anyone supposed to read this?
This site was one I received several complaints from users regarding. They said it was almost impossible to locate the Client Login. As web designers, we often know to check for a tiny bit of text at the top right– trouble is that users don’t know that. Worse still, a lot of the people using the IAA site are elderly and have difficulty reading or seeing miniscule text. Take a look at their client login size:
Even after finding the link, it is so small and difficult to click on for older users, that it is just as frustrating once discovered. People who did not grow up with computers have more trouble with their mouse control than the tech-generations. Be merciful to them and give plenty of area to click on!
At last a banking homepage where the login is bold and easy to spot! The site uses a bright blue colour field larger than anything else on the homepage to bring out the white login form fields. Even though their “Online Banking Login” is too small, due to the very nature of the box its meaning becomes clear. Excellent example of using colour to shift a visitor’s attention to important items.
What we learned:
- Don’t sacrifice the needs of return visitors to entice new ones
- Bold use of bright contrasting colour boxes is effective
- With something as important as the login title, use an over-the-top large font size! Make it easy!
Valentine Gift Baskets – Product Sites
With Valentine’s Day coming up, gift basket and chocolate sites are gearing up. Let’s take a look at the main competitors to see how easy their sites are to use, as well as their visual draw.
See’s Candies has had a specific branding look for a very long time, which works well because it is easy to recognize– they have black checkerboard stripes and a strong black logo. The way it was translated in their web site could use a bit of improvement. Each different box has been given its own black background, leaving the viewer overwhelmed by little pieces everywhere. A strong larger top black navigation bar that is solid would do a great deal to give a more streamlined look. Notice that their navigation is very small and difficult to read:
It also has a down arrow indicating more links, but in some browsers the dropdown does not work. Their left navigation is fortunately of a slightly larger size, but the links are too close to the left edge, making it difficult to quickly scan through:
The main advantage of the stark look of the site is to bring out the bright red and pink featured Valentine packages quite effectively. Even though the navigation of the overall site is difficult, within a few seconds of the site loading a visitor can find the Valentine section. Once in the area, a very simple and clear page has a thumbnail of each gift package with price clearly stated. The checkout is equally simple– it keeps a clean look without clutter and high quality photographs of the product so you know what is in the gift box.
Advantages: Quick checkout for Valentine Gifts, Lack of visual clutter
Disadvantages: Small type, Scattered Homepage, Difficult navigation, Not exciting
This web site has a rich sumptuous quality to it that almost makes a visitor’s mouth water. It has strong contrasts and subtle browns giving the site an appearance of almost being a chocolate bar itself. There are clearly denoted sections set off with excellent food photography. The navigation bar links are a bit small, but still readable:
The dropdowns from them, however, are tiny, mashed together and almost impossible to navigate:
While the site is beautiful, it was difficult to find specific products or navigate about. Once on subpages, the visuals continued to be fantastic, but the text got smaller and smaller.
Advantages: Exciting design, Makes visitor want to purchase the product
Disadvantages: Can’t find anything, Very difficult to navigate, Tiny type
The first impression is bright and cheery, although the photographs are a bit fussy looking, fuzzy and busy. If they either had fewer photos or better food photography it would definitely be a huge improvement. Like See’s, their top navigation is broken up into separate sections which tends to exaggerate the already scattered nature of the homepage design. There is also a red field around the top which is cut off as though it were a mistake. The colour field either needs to end along a horizontal plane (such as the top or bottom of the navigation bar) or continue down the sides. They also broke the main content area into three boxes with very thick red borders, which is hard to look at visually without being overwhelmed. The navigation is well organized, but the dropdown text is way too small.
As you can see, once on the main Valentine’s page, most of the space is wasted with a meaningless block of text that no-one will read. Gift baskets/boxes are all about visual appeal. The page gives the very opposite impression. A lot of the products have > in front of them which just makes the name difficult to read and looks like a mistake. Once on an actual product page there is a vast improvement. The Shopping cart section is easy to use with lots of great options, including what type of tin lid to have. They should really be promoting that on the rest of the site.
Another problem with the site is its use of colour– besides the odd top red field, there is also a strange yellowy green that is in large areas here and there on the site. You don’t want to put a somewhat sickly looking colour next to a food product.
After looking through a lot of the Mrs. Fields Photography, I have to come to the conclusion that a darker background would be advisable. Normally you never want to use black or dark brown as the basis of a web site since it is so gloomy, but there are a couple of exceptions. Fine art and photography is best served with a dark background, and the type of food products on this site would also benefit from being in a less harshly white environment. The colour fields behind text could still be white, but I think the site would benefit by having more rich dark browns as the main colour rather than fighting huge white areas.
Advantages: Well done shopping cart options
Disadvantages: Navigation broken up and dropdown text too small, site is difficult to look at with its poor use of colour and photography, too much text and not enough quick access to products, hard to find products
Here is an example of a site that uses rich browns as the base colour quite effectively. Even the navigation bar looks like a series of chocolate bars that gets a visitor excited about the product:
The moving images on the homepage get a bit old after a while because they are on a loop. It is usually best to have a rotation like that end at some point so people can safely look around at the navigation options without a distracting blur in half the page. Upon clicking on the various sections, the site begins to break down. It continues to have a fresh, inviting visual look of chocolate and interesting background patterns, but the text gets too small.
The side navigation is still a decent size, but there start to be too many little design elements here there and everywhere. The left has little dots by each link, the right has constant hr dotted lines of a different size, the top navigation keeps changing its look and they all start adding up to a very complex site that is no longer easy to maneuver through. The text size gets smaller and smaller, the pages more and more difficult to use and the main content area is divided into columns that are so narrow I’m surprised they fit anything at all. See the below three column format:
Advantages: Lovely sumptuous visual look of the product, clean interesting top navigation bar
Disadvantages: Miniscule text, almost impossible navigation, too many site elements vying with each other, main content area too narrow
It is interesting to see what other countries are doing with their site design in the same product genre. This is one of the finest British gift basket lines. They have a very clean, yet elegant look using interesting sorts of lines to indicate various areas of the site. They keep their main boxes together more in a tab structure, rather than having bits and pieces all over the homepage. Their bottom navigation bar is large and easy to read:
Whereas their top navigation could definitely go up a few point sizes.
The navigation is very organized, however, and if it were only larger the site would become very easy to navigate through. Like Mrs. Fields, they also have a text area in their valentine section, but take a look at how different it appears. They used some fantastic photography to highlight their product line, and while the text itself is way too small, the overall effect is excellent.
They have their Valentine products all carefully arranged similar to See’s with thumbnail and large price which is great when trying to scan through the products quickly. Individual pages have excellent photography like the rest of the site, but like the Americans, the text is unreadable.
I’m not sure why any site trying to sell a product thinks people like type sizes that only a 20/20 vision visitor with lots of time on their hands to squint through reading can navigate.
Advantages: Elegant visually pleasing design, clear navigation, excellent photography and organization
Disadvantages: Text is too small to read, particularly the navigation and main product pages
When Fads Go Wrong – Font Size part 2
This is a continuation of the series on web site font sizes. After speaking with a variety of web users of all ages, the number one complaint was that sites were not readable– the text was far too small.
Here is a cross section of all sorts of information related web sites whose text is the most important part of their mission.
This is a fairly standard web font size online, and as you can see it is very difficult to read. Trying to make out even this short paragraph requires some squinting and careful observation, and there are entire long articles on web sites that visitors are expected to read at that size. The web designer probably assumed the audience knew all about the Command/Control + shortcut, or had set their browser preferences to display huge type, but the only people that know about that are either tech savvy users or fellow designers. The average visitor will have no idea how to “fix” their browser. It is much better for a designer to “fix” their web site font size.
As you can see, the size a medium small look. It could be a bit bigger but isn’t too drastically tiny. The main problem here is the leading (spacing between lines). See how they are jammed right on top of each other? You can barely see a gap between the two lines making it tricky to read. Sometimes web sites get the right size, but not the right spacing.
This shows how the font colour can affect how you read web text. The cancer site had a medium grey, but the Star Wars site chose black. Even though they both have very tight spacing between the lines, it is easier to read the Star Wars text. Too much black writing for page after page can be overwhelming, however, so a nice compromise between black and light grey can usually be found around #333333 which is a slightly muted black / very dark grey.
Here is another site similar to the Star Wars example– as you can see the text is a good reading size. With long articles, if the font is too large it can cause issues with too much scrolling. Yet this is also a size that can be easily skimmed through or read. It is set at 12px which is about the minimum when it comes to readable font sizes.
Another question is the serif vs sans-serif font debate. Here we have a 12px, dark grey font, but it is serif. For some reason, in tactile printed pieces a serif is easier to read but on a screen sans-serif fonts are easier to read. This is not a hard and fast rule, however, and there are proponents of using serif fonts online. In this case I believe it is fairly obvious that the font is too small to be read easily. The text should be bumped up at least a few points to perhaps a 14px font.
Here we see a fairly typical web font size and the reason for all the complaints. Can you honestly read that? I think I’d need to get a magnifying glass out myself. It should be almost triple that size to be legible.
Remember what I said earlier about having plenty of space between lines? Here is an example of taking that to the extreme and running into trouble. There is too much leading in this paragraph– the text no longer has the feel of a cohesive block. It is also way too small.
What we learned about font sizes:
- Start with at least 12px (1.2em) and possibly go up from there
- Comfortable spacing between lines (not too much not too little)
- Stay with dark greys or black (#33, #00)
When Fads Go Wrong – Font Size part 1
After polling and speaking to a variety of people of all ages about their number one frustration with web sites, the majority answered that the text was too small. Tiny text is partly a result of a series of popular design trends that have been going round that any size over about 10px is tasteless and “horsey”. The problem is that you just lost at least half your viewers (anyone over about 40 years old whose eyesight is beginning to fail) and frustrated the other half (many people in their 20s I talked to spoke about the fact they had difficulty reading a lot of site navigation and text).
The response of most web designers is a mixed reaction of how large type showed poor design skills and that if someone can’t read it they can “Just use Command/Control +”. While a lot of web designers are well aware of the keyboard shortcut that causes a browser’s text to become larger, I asked around with regular web users and they had never heard of it. In short, the web site should have text that is large enough to be readable without mystery keyboard shortcuts.
Navigation was the first complaint of web users, so here are some screenshots from a variety of different sites to illustrate the problem and solution.
This is a section of the navigation bar at Tiffany&Co. The web designer is no doubt trying to look elegant and tasteful by making the font as small as possible. The brand name alone brings web traffic, but it can put people off from a return visit. If the memory of the web site was that of frustration whilst purchasing an Engagement ring, would they be likely to return and relive the difficulty when next they need to purchase a diamond? Possibly not.
The above is from the REI outdoors web site. At first glance this navigation looks nice and large, but unfortunately that is only one part of the web site. The actual nitty gritty navigation that people really need to know about reverts to the Tiffany look.
This is the set of navigation that people will be actually using, and as you can see it is extremely difficult to read. Here is an example of needing to Command/Control + about seven times before it is a proper size. So make sure all the navigation is nice and large, not just certain sections.
This is an example of not only tiny navigation, but extra elements crowding in causing an extremely busy look which is even more difficult to read. Tiffany and even REI understood that with tiny navigation you need plenty of white space and no distracting shapes around the navigation. If Bowhunters tried, I doubt they could come up with a navigation that is more difficult to use than this. Keep the main links clean and clutter free, particularly when they are small.
The leader in web design for some time, Apple has a medium to small size font with its most popular links extra large. Notice the “Shop iPhone” is a size that is extremely easy to read, whereas “Mac Software” is much smaller, though not as tiny as Tiffany’s links. This shows how the size of the link is crucial to the hierarchy. Apple understands what size is quick to find and click on.
This web site overall may not be impressive, but they have a decent size navigation which most people can read fairly easily. It is a bit spaced apart for the eye to jump quickly from one to the other, but in general it is a good nav bar for the average user.
Here is a medium sized navigation example at SFB. They have better spacing than the Small Boat Ship site– you can scan through the links much faster and it is a large enough size to be readable. Links in the navigation should never be smaller than this– only larger.
What we learned about font size in navigation:
- If you must use small text, be sure to leave plenty of white space
- Consistently use a readable size– not large in one area and tiny in another
- You can use size to emphasize certain links as long as they are all a readable size
- Do not space the links too far apart
- Make sure the link size is large enough to be read at quick glance by someone with poor eyesight
Introduction
About Alexa Chipman
Categories
- Content (6)
- Navigation (7)
- Typography (3)
- Visual Design (1)