Ecommerce Site Map
If you’re at the stage of drafting web site architecture for an ecommerce web site, you should already have a clear understanding of the objectives (what you want to accomplish), web site requirements (what you want the web site to do), and user groups (who will use the web site).
The objective in drafting ecommerce web site architecture is to align these three components into two deliverables: a site map and wireframe. Let’s begin by drafting a general ecommerce site map. The site map will help organize the required pages and help prioritize order.
Keep in mind there are six user groups who will use the ecommerce web site: potential customers (hunters & browsers), returning customers, publishers, potential employees, and employees. Potential customers who are hunting for a product know exactly what they want. They want it fast and easy. Browsers are window shopping. Although they have an idea of what they want, the web site will have to persuade them to buy.
After the site map is complete, use a wireframe to help organize how the information will be presented. At least create a wireframe for the homepage, product category page with products, product category page with sub categories, the product detail page, a page with only content, and the checkout process page. You many even want to wireframe every page in the site map.
To help wireframe an ecommerce site, use the site map and the wireframe guide below to begin drafting a layout.
It’s important to understand that most users have a computer display with 1024×768 pixels or more. According to W3Schools browser statistics, 36% of users have 1024×768 displays and 57% have an even higher screen resolution. To make sure your web site looks good (no left, right scroll), this wireframe is 960 pixels wide.
Ecommerce Website Wireframe
Header
The header area should be mostly the same throughout the entire web site. Include a logo for branding and make sure the logo is linked to the homepage. Also include a positioning statement (unique value position) to let users know what you do and why you are different. This will quickly engage their attention and validate their needs. Include a call to action like a phone number or email address so users don’t have to think when they want to contact you. Another suggestion is to add a few quick links in the site architecture for frequently accessed links, such as login, my account, store locater, etc.
Primary Links
Primary links are your global navigation that will remain the same throughout the entire web site. Utilize your primary links for your main product categories. Make sure these are text based links instead of Flash or graphics. It’s important to use text-based links so the search engines can easily read them and crawl through them to your internal web site pages. If you decide you want a drop down menu for your top navigation, avoid using JavaScript. Instead, use lists and style them with CSS. Make these notes on your wireframe so the developer has a clear idea of what you want.
Breadcrumb Trail
Breadcrumb trail navigation is a link based navigation that shows the path you traveled to arrive at a particular page. For example, you might start on the homepage, click to a product category page, click to a product sub category page, and then click to the product details. As you navigate to the final page, a link trail appears (typically above the main content) that shows the pages previously visited. Each of these links should be clickable so a user can quickly go back.
Content Area
The content area is where the site’s main text, images, sub categories, products, shopping cart, and more will show. It’s important that users can quickly scan your content and the search engines can identify the important statements. To accomplish this, title each page inside the <h1> </h1> HTML tags, use a sub title in the <h2> </h2> HTML tags, and subheadings in the <h3> </h3>, <h4> </h4>, and <h5> </h5> HTML tags. The search engines will factor the content inside these HTML tags into their algorithm when positioning your site in the search engine results. Let your designer know to how you want these tags formatted in your site architecture so their color and size help the reader scan through the web site text.
Sidebar
Use the sidebar area for the shopping cart, recently viewed products, best selling products, and articles related to the product category. It could also be used for promotions using standard banner sizes, such as the 250×250, multiple 125×125 square buttons, and the popular 160×600 wide skyscraper. Near the top of this area is a great place to add a newsletter sign up form and it doesn’t have to take up a lot of vertical space. Other options include calls to actions, recent news, upcoming events, popular blog posts, and credibility factors, such as SSL security certificate, hacker safe, and testimonials to reduce the user’s anxiety.
Footer
The footer area should remain the same throughout the entire web site architecture. You can use the footer for copyright statements, site map links, and legal information (privacy policy, terms and conditions, returns and exchanges, and shipping policy). You can also use this for credibility by placing SSL security certificate, hacker safe, and Better Business Bureau images.
In closing, this article’s goal was to give you an example of an ecommerce site map that you could customize to fit your own needs. With this site map and the wireframe guide, you can draft wireframes of important site pages that will be user friendly, search engine friendly, and aligned with business objectives.