Internet Marketing - Matt Bailey [137]
Figure 12-16: Land’s End and Brooks Brothers navigation elements
By providing these tools alongside the ability to browse rather than replacing the browsing fully, the sites give both “browsers” and “hunters” the ability to shop in the way that is most comfortable to them.
Interestingly enough, both of these websites do something different once a visitor has browsed to the product content. The subnavigation on the left side drops out entirely but is replaced on the right side with suggested matching shirts at Brooks Brothers. On Lands’ End, there are other suggested tie options (see Figure 12-17).
Figure 12-17: Lands’ End and Brooks Brothers: both sites drop the left-side subnavigation once a specific product is chosen.
Despite the absence of the left-side navigation, the breadcrumb navigation underneath the main navigation on both sites is in a very obvious place, which allows the visitor easy access to go back to main area content. Even if the visitor goes to a previous page, they are doing so without using the Back button. When visitors use the Back button, it is mainly because there is no visible option that will take them ahead, so they go backward. Providing tools for the visitor to continue going forward, even though it is back to a previous page, the visitor is still making progress. Research shows that the use of breadcrumb navigation improves site efficiency (Proceedings of the Human Factors and Ergonomics Society 46th Annual Meeting, 1315-1319, Maldanado & Resnik, 2002; Navigation bars for hierarchical websites, Bowler, Ng & Schwartz, 2001).
AT&T uses multiple navigation styles in its home page (Figure 12-18). Because of the amount and the different types of customer segments and shoppers, the information on the home page is designed to “catch” as many people as possible. There is tabbed navigation across the top for market segments. The “main” navigation is along the top of the large graphic that is used for time-sensitive or other offers. The bottom two rows offer a significant amount of information and choices of offers, bundles, local service, and Internet access, all with graphical elements. On the bottom row of the page, the links are mostly functional for existing customers but are grouped in six columns of no more than four links. This allows for customers to quickly scan the column labels, find their need, and locate it quickly by the relevant link.
Figure 12-18: AT&T’s website segments customer and shopper needs
Friday: Develop Using Wireframes
Wireframing is a design function that can increase the speed of creating or changing your websites, online marketing, and other landing pages. Wireframes are a visual development tool used to show the basic visual elements and interactions on a page. Similar to card sorting and tree testing, it has a very basic element that starts simple and then moves on to very complex layouts. However, just the simple act of developing wireframes can begin to communicate important elements and functions of a website, rather than leaving them up to interpretation.
The essential task of wireframing is quickly communicating the layout and interaction points of a web page. This can be done on paper, whiteboard, or software developed specifically for this task. Either way, this enables a team of people to see the layout, assign content categories, add labels, and do various functions prior to the design of the website.
As mentioned earlier in this chapter, not too long ago the focus was mainly on a graphic artist to build a site based on the direction and information they were given, which was typically none to very little, and interpret that information into a vision for how they envisioned a typical user entering the website. This has changed in recent years as good designers have added interactive development to their skill sets. By developing skills in information architecture,