SAY YES TO THE WEB ADDRESS – Holly Foster Media

SAY YES TO THE WEB ADDRESS

Shopping for a wedding dress involves a lot of research. In preparation for the big day, brides-to-be and their families usually begin their search online. I would venture to say, however, that the number of brides who actually buy their gowns online are few and far between because there is no substitute for trying on a wedding dress.

My newly engaged daughter, who lives about an hour and a half away, recently decided to begin her search by spending some time shopping back home. We decided to map out our itinerary in advance so we could use our time wisely.

As I was reading the list of shops included in her email, I decided to compare each shop’s web presence to see if they utilized good web design principals. And then I thought, why not make it a contest?

Here’s a snapshot of the home page of each of our six contestants, “above the fold.”*

* There is some debate on this point, but some designers argue “the home page should have the most important information visible without scrolling” or what is called above the fold.

Using Erik Devaney’s Hubspot article as my guide, I evaluated each site based on his eight recommended criteria (2012).

  1. Simplicity
  2. Navigability
  3. Consistency
  4. Visual Hierarchy
  5. Accessibility
  6. Conventionality
  7. Credibility
  8. User-Centricity

Simplicity

In short, Devaney recommends websites use a maximum of five colors and a maximum of three different typefaces in three different sizes.

Use of Colors
Site Number – URL – NO. OF COLORS
#3 – https://www.annaschwartz.shop/ – 0
#2 – https://www.castlecouturenj.com/ – 1
#6 – https://www.irmasbridalnj.com/ – 1
#1 – https://www.sposabella-bridal.com/ – 2
#5 – http://www.bridal-garden.com/ – 5
#4 – https://www.davidsbridal.com/ – 8
  • #3 relies only on the white background, which allows web visitors to view the images without distraction.
  • #2 uses a single shade of pale gray throughout their site.
  • #6 also uses a single shade of pale gray.
  • #1 uses a lavender shade for text box accents and tiny gold hearts as a background on their Services page.

Here’s the breakdown on the number of typefaces used for each web design. Site #4 is the only one that uses too many.

Typefaces
Site Number – URL – NO. OF TYPEFACES
#2 – https://www.castlecouturenj.com/ – 1
#1 – https://www.sposabella-bridal.com/ – 2
#3 – https://www.annaschwartz.shop/ – 2
#6 – https://www.irmasbridalnj.com/ – 2
#5 – http://www.bridal-garden.com/ – 3
#4 – https://www.davidsbridal.com/ – 7+

Bridal websites #1, #2, #3 and #6 ranked in the top three spots in each category.


Navigation & Consistency

A recent article by Andy Crestodina suggests limiting the number of links in your main navigation.

Short-term memory holds only seven items, plus or minus two.

… the more items in your navigation, the more difficult the information is to remember and process for your visitors. Visually, eight is a LOT more than seven. If you have too many, visitors’ eyes may scan past important items.

(Crestodina, 2016)
Navigation
Site Number – URL – NAVIGATION (ITEMS)
#3 – https://www.annaschwartz.shop/ – Sticky (4)
#1 – https://www.sposabella-bridal.com/ – Sticky (5)
#2 – https://www.castlecouturenj.com/ – Sticky (7)
#5 – http://www.bridal-garden.com/ – Top (7)
#6 – https://www.irmasbridalnj.com/ – Top (8)
#4 – https://www.davidsbridal.com/ – Top (17)

Sites #1, #2 and #3 landed at the top of the list for both simplicity and their low number of navigation items. Each has a limited amount of colors and a “fixed top” or “sticky” menu bar, which means it always stays in view regardless of how far the user scrolls down. #1, #2 and #3 also all have links to social media accounts, as shown in the table below. Only #6 lacked a social media navigation section.

Links to Social Media
Site Number – URL – SOCIAL MEDIA (Location)
#3 – https://www.annaschwartz.shop/ – YES (header)
#2 – https://www.castlecouturenj.com/ – YES (header)
#5 – http://www.bridal-garden.com/ – YES (header)
#1 – https://www.sposabella-bridal.com/ – YES (footer)
#4 – https://www.davidsbridal.com/ – YES (footer)
#6 – https://www.irmasbridalnj.com/ – NO

Each of the six sites utilize consistent layouts, making their sites easy to navigate.


Starting in the Lead

As you scroll down, you can see the similarity between top sites: #1, #2 and #3.

#6 also ranked high in multiple areas, but suffers from visual maladies.

  • The photo of their physical location is less than appealing.
  • The navigation bar text is too small.
  • The navigation bar does not render clearly because it lies on top of the roof tiles in the background photo.
  • A large portion of the “Welcome” text gets lost against the background.

Visual Hierarchy

By adjusting the position, color, or size of certain elements, you can structure your site in such a way that visitors will be drawn to those elements first. 

(Devaney, 2012)

In contrast to the simplicity and less-than-seven navigation elements that sites #1 and #3 employed, #4 uses A LOT of elements above the fold. The text “Enter to win $25,000 for your big day” is an example of visual hierarchy; although it is not a very good one in my opinion. The text lies on top of a looping video. I guess the collection of their visitors’ personal information is the most important thing to them, but to me it’s a turn off.

As you scroll down there’s another contest that’s advertised with a photo of a happy couple. In comparison, the other page elements are predominantly text buttons. All in all the site is just too busy.

In contrast, site #3 uses visual hierarchy wisely, marketing their name and promoting a feeling of luxury via their high quality photographs.


Accessibility & Conventionality, A Six-Way Tie

This means cross-device compatibility. I tested each site on my cell phone, and all six sites get equal points for using responsive design.

Same for conventionality, which means putting your site elements in places where people expect them to be:

  • Navigation at the top
  • Logo at the top (left or center)
  • The ability to click on the logo to return to the site’s home page

Conventionality

It’s a good design choice to place site elements in places your viewers expect them to be. That also means having the site function in a way users are used to, which usually translates to:

  • a navigation bar at the top.
  • a logo placed top left that brings the user back to the home page.
  • links that change color when the user hovers over them.

With the exception of site #5, logos were placed conventionally in the upper left hand corner. Top marks to #5, however, for making sure their phone number is in a prominent place on the home page. Many bridal shops still drive a lot of their business through appointments made by phone rather than booking online.


Credibility

… dedicate some real estate to explaining the value behind what you do.

(Devaney, 2012)

Each site, with the exception of #4, dedicates space to detail the personalized experience the client will receive when visiting the shop. Some do it more effectively than others. Here’s my take on how they rank in the credibility category, from best to worst.

Use of Convincing Narrative
Site Number – URL
#3 – https://www.annaschwartz.shop/ – How soon can I come in?
#1 – https://www.sposabella-bridal.com/ – Understated but still appealing.
#2 – https://www.castlecouturenj.com/ – Written well but the text is too long, too small, and may be overlooked.
#5 – http://www.bridal-garden.com/ – Too much of a hard sell.
#6 – https://www.irmasbridalnj.com/ – Had a hard time getting past the poor photograph, but the writing is still better than #4.
#4 – https://www.davidsbridal.com/ – Impersonal hard sell.

User-Centricity – Thoughts from a Bride-to-Be

A wedding dress is one of the biggest decisions a bride makes when planning a wedding. That decision begins with a Google search and myriad websites shouting, “BUY ME!” Where do you even begin? Below are my daughter’s thoughts captured as she navigated each of the sites. The influx of clients can build or break bridal shops, so design is critical. Here are her rankings from worst to best.

Last place: #4

“I hate their website. It reminded me of a discount department store. The dress search feature is horrendous: a mini quiz where you can only pick one style per question. I had to take the quiz twelve times to get a decent selection. Even though they have a wide variety of dresses, the site felt generic and cheap.”

(L. Ritter, personal communication, July 14, 2019)

Second to Last: #1

“My first impression of the site was terrible as the photos were placed in an inconsistent layout and the information on the title page was out of date. With no border or spacing on the photos it not only looked unprofessional, it was as if a teenager had built it. It did have an interesting list of designers but the photos were not clickable links and I couldn’t see what options from each designer were available. I also didn’t like that the appointment wasn’t able to be made online.”

(L. Ritter, personal communication, July 14, 2019)

Fourth Place: #6

“I hated the opening photo. Despite it being less than appealing, I got the impression that it’s a smaller, more intimate shop that will deliver a personalized experience. Although it didn’t allow me to see the full collections from each designer, the layout of the photos is pleasing.”

(L. Ritter, personal communication, July 14, 2019)

Third Place: #5

“I liked the home page. It’s welcoming but the description was too wordy. Even though I couldn’t look at everything in stock, I could look at a sample of each designer’s collection. It gives you a sense of what they have to offer. You can book online but you get final confirmation of your time by phone. It’s a fun website.”

(L. Ritter, personal communication, July 14, 2019)

Second Place: #2

“It’s very streamlined. Even though I couldn’t confirm an appointment online, I could submit a request. I could see a selection of their gowns with filters that allowed me to narrow down options. The photos are good quality and the information is up-to-date but the website is not a wow and is a bit too crowded.”

(L. Ritter, personal communication, July 14, 2019)

First Place: #3

“This one really looks and feels professional, oozing couture. The white background gives it a clean, high quality tone. If I went here, I feel as if I’d have a high fashion experience. The website is simple (albiet some English grammar issues due to the fact that the shop is European) and gives life to each dress it features, by displaying multiple pictures of each style without having to dig to get more information. It’s clear that they have a smaller selection of dresses but provide a much better web experience.”

(L. Ritter, personal communication, July 14, 2019)

Back to the Blogger: The Best & The Worst

Or shall I say the worst and the best? It’s easy to see why #4 comes in at last place. With eight colors, seven typefaces, and seventeen navigational elements above the fold, it just feels like their entire site shouts BUY SOMETHING on every inch of every page.

Top prize was a bit trickier, but #3 is the winner.

until nxt time …

References

Brebion, A. (2018, February 4). Above the fold vs. below the fold: Does it still matter in 2019? Retrieved from: https://www.abtasty.com/blog/above-the-fold/

Crestodina, A. (2016, September 14). Website Navigation: 7 Best Practices, Design Tips and Warnings. Retrieved from: https://www.orbitmedia.com/blog/website-navigation/

Devaney, E. (2012, January). 8 guidelines for exceptional web design, usability, and user experience. Retrieved from: https://blog.hubspot.com/blog/tabid/6307/bid/30557/6-guidelines-for-exceptional-website-design-and-usability.aspx

Ritter, L. (2019, July 14). Personal interview.

Written by

Leave a Reply

Your email address will not be published. Required fields are marked *