SurroundTech.com Website Design White Paper
Interface Techniques Highlighted in Surround Technologies’ Website
Usability Highlights
Have you ever clicked yourself into a website black hole, the kind where even the seemingly trusty “Back” button cannot save you? How long do you spend on average searching a website for information you need immediately? How many times do you leave a site frustrated at not having answered the questions that brought you there in the first place?
The ease of navigating a website is the most essential element of its design. And yet, customer-friendly usability often eludes even the most professionally designed websites.
It seems that the “coolness” factor of trying to outdo competitors with fancy Flash, glitzy graphics and robust programming often overpowers the most basic purpose of corporate websites, which is to enable visitors to find and access information they need as quickly as possible.
Surround Technologies has developed a Website Interface Technique that delivers on the “coolness” factor without sacrificing ease of use. Surround Technologies has implemented this Interface Technique on its own website, as well as for many clients. This White Paper explains the elements of Surround’s Website Interface Technique, and shows how it can be customized for your site.
Give Them What They Want - FAST
Surround Technologies’ Website Interface Technique is based upon the three most basic corporate website objectives:
- Applicability: Visitors must be presented with information most applicable to them;
- Find-ability: Visitors must be able to find information as quickly as possible at the time they need it;
- Discover-ability: Visitors must be given plenty of opportunities to discover additional relevant information.
Read on to learn how Surround Technologies’ own website blends the ideal site architecture with Applicability, Find-ability and Discover-ability wrapped in a professional look-and-feel to deliver information to visitors at the speed of business.
Know Your Audience
The first rule of website design is to know your audience by understanding why people come to your site. Once you have identified your visitors’ objectives, you can present them with the most applicable content. Are your visitors likely to become customers? Are they already customers? Perhaps they are business partners or investors researching your products, services and past successes?
The Surround Technologies website serves up information to visitors who fit one of two categories:
- Prospective Clients or Partners
- Existing Clients or Partners
The website further streamlines the audience into the following professional functions:
- Business or Information Technology Executives
- Information Technology Team or Department Managers
- Developers
You can read about how Surround’s website delivers custom information to each type of professional function further in this document, in the section titled “Quick Navigation to Applicable Pages.”
Tell Them Where They Are
Logo Branding at the top of every page ensures visitors never forget whose site they are navigating. And, more importantly, they will know when they leave your site. By embedding links to the Home Page within each logo, visitors will always know the quickest way to the site’s starting point.
A Benefit Statement at the top of each page of Surround’s website briefly explains the value the reader can expect to gain in that section.
Standard graphics, colors and navigation menu bars at the top and sides of each page help visitors further continue their discovery process. Additionally, color coding and a Location Breadcrumb Trails show them where they are in the website, to keep them moving forward.
Keep Them Moving Forward
At the bottom of each page, Action Item Links let visitors know what to do next and invite them to discover more. These links say such phrases as “Download a Demo,” “Read On,” “Learn More,” “See Related Article,” etc.
Always provide visitors with plenty of opportunities for easy access to additional information. This way, they will be sure to continue their exploration of the site, and discover other valuable information.
Maintain Their Interest
Hand in hand with Action Item Links is Storyboarding, which is used to increase readership and comprehension of complex or text-heavy content.
This technique is achieved by chunking large amounts of content into multiple brief pages connected by hyperlinks. A page with a small amount of text linked to another page with a small amount of text is more inviting to read than one long, scrolling page. Storyboarding allows visitors to progressively discover the information they are seeking.
Help Them Find You
A well-designed website is only useful to those who find it. To increase the chances of search engines ranking websites high in relevancy, Surround Technologies takes advantage of a design technique called Landing Pages.
Landing Pages act as strategic mini Home Pages focused on specific topics. Each Landing Page contains informative text using many relevant keywords and, like the Home Page, links to all other applicable sections of the site without appearing messy or disorganized.
These pages have their own URL based on the page content. For example, http://www.systemimodernization.com and http://www.imodernization.com/ refer to Landing Pages dedicated specifically to the modernization of IBM i software application modernization.
Multiple domain linkage is just one way websites can utilize Landing Pages. Another beneficial technique is to create multiple Landing Pages based on geographic location to generate a localized experience for visitors. For example, http://www.newjerseylansa.com, provides information on LANSA development in New Jersey. A third Landing Page technique is to present custom information based on visitors’ search keywords.
Dissecting Surround’s Website
Let’s take a closer look at the Surround Technologies website to further understand how we present the information our customers need quickly, and how you can utilize the same techniques, starting with the Home Page.
Home Page Design Techniques
Visitors will enter a site’s Home Page by one of two ways: Either they will purposefully go there by entering the website address into their browser, or they will happen across it through a search engine or other site. Often, search engines will plop searchers smack in the middle of a website. When this happens, you want visitors to be able to quickly find the Home Page as a starting point of their discovery process.
For these reasons, the Home Page of any well-designed website should be a portal that provides quick access to the information each visitor needs. It is important to note that a well-designed Home Page will draw visitors in by piquing their interest, while a poorly designed Home Page will only frustrate visitors and drive them away.
To draw in visitors, the Home Page should include some general promotional and explanatory information. At the same time, it shouldn’t be bogged down with information returning visitors already know. The content and primary design elements should aim to parse visitors according to their professional functions or interests. This objective is best achieved with a technique that uses Quick Navigation pages based on identified professional functions, described below in the section titled “Quick Navigation to Applicable Pages.”
Featured in Figure A is Surround Technologies’ Home Page. Each distinct Design Element of the Home Page is outlined in red and numbered. The numbers correspond to the Design Element sections below.
Figure A: Home Page Layout Design
Top Functional Navigation Bar with Logical Categories
Design Element 1. The Top Functional Navigation Bar provides standard and familiar top-down access to the primary functional content of the site. It is organized into logical categories that pop up relevant subcategories when visitors mouse over them (no need to click!). These menu elements can be modified easily to meet the needs of the ever changing nature of a modern website.
Below is how Surround’s website’s high level architecture is categorized.
- About Us: Provides insight about the company’s team, history, offices, career opportunities, etc. This fundamental company information answers the most critical questions visitors will ask: Who Are You? What Do You Have to Offer? Why Do I Want to Do Business With You (or Apply for a Job or Invest in Your Company, etc.)? How Do I Contact You? And more …
- Fostering Success: Tells stories about the company’s successes. Posting this information front and center shows visitors you can meet their needs just like you have done for others.
- Software Solutions: Customizable for other types of businesses, this section tells about the company’s products. This is where visitors will discover which products fit their needs..
- Consulting Services: Customizable for other types of businesses, this section tells about the company’s services. This is where visitors will learn how they can benefit from your experience.
- News: Lists the company’s latest happenings. Help visitors keep up with you by publicizing your company’s latest advancements, promotions and highlights.
- Events: Displays an events calendar, or simply lists upcoming events. Announce your conference show schedule, speaking engagements, or other important events so visitors can find you.
- Resources: This section can provide additional information visitors may require, such as downloads, online tools, white papers, links to partners, investor pages, stock quotes, etc.
Utility, Site Service and Legal Policy Links
Design Element 2. At the top and bottom of every page, visitors will find standard Utility, Site Service and Legal Policy links. These are pages that visitors may seek out at any time during their visit, and with Surround’s site design architecture, they can do so in one click from any page. These links can be customized to suit every company, but on Surround’s website, visitors will find quick links to the Home Page, a Contact Us form, a Downloads page, the Sitemap, the company’s Privacy Policy, Terms of Use and a Feedback form.
Quick Navigation to Applicable Pages
Design Element 3. The Quick Navigation pages enhance a website’s Applicability by leading visitors to the content they need based on their professional functions or interests. The audience types can be modified to fit those of any company. As an example, the following audience types were identified for anticipated visitors to Surround’s site:
- The red Surround Tech (ST) section gives a thorough overview of our product and service offerings for the General site visitors who simply want to know who we are. Typically, these people are prospective clients or partners, and we want to quickly tell them who we are and why they should partner with us.
- Executives appreciate the relevant links within the orange Executive Suite (Exec), which allow them to quickly learn how our products and services can save them time and money.
- In the green IT Manager Zone, Information Technology managers can discover how Surround Technologies’ products and service offerings can boost their team’s productivity and help them focus on the critical business needs of their customers.
- Developers can dig into the detailed technical content in the Developer Center. Here they can access valuable information, including development tools, coding techniques, the latest product downloads, technical white papers and product documentation.
Entice Them to Act Now
Design Element 4. Use Action Targets to shift visitors into high gear. This section encourages visitors to take the next step, whether that means contacting the company through a form, downloading a free demonstration, signing up for a Webinar, or subscribing to a newsletter. Invite visitors to enter their contact information in return for one of these actions, and then provide them with focused relevant responses. For example, notify them the next time you appear at a trade show in their area.
Let Visitors Discover You
Design Element 5. The Discovery section allows visitors to uncover new information without directly seeking it, such as the newest product offerings, a conference schedule, company news, or any other pertinent up-to-date information.
Draw Attention to Yourself
Design Element 6. The Billboard Message in the middle of the Home Page will quickly draw the attention of visitors and should entice them to investigate further. The message can be a customer testimonial, company slogan, mission statement, or any announcement presented as Flash animation or other type of inviting graphic.
Interior Page Design Techniques
The interior pages of any well-designed website should maintain a look and feel consistent with the Home Page so visitors always remember whose website they are investigating. And yet, each interior section should also have its own uniqueness so visitors always remember where they are in the site. For example, subtle use of color can provide a visual site roadmap without distracting the reader or consuming valuable screen real estate.
Just as the Surround Technologies Home Page draws in visitors with its inviting design, the Surround Technologies interior pages allow visitors to progressively discover information they need by keeping them engaged through additional design techniques.
Figure B. is an example of an interior page of the Surround Technologies website. Each distinct Design Element is outlined in red and numbered. The numbers correspond to the Design Element sections described in detail below.
Figure B: Interior Page Layout Design
Consistent Section Look and Feel
Design Element 1. The Billboard at the top of each interior page utilizes colors and graphics specifically designed for each site section. This technique ensures visitors always know which section they are investigating. Additionally, topping the Billboard with the Home Page company logo (with embedded links to the Home Page) and Top Navigation Bar guarantees the customer is always one click away from all other site sections.
Forge a Path with Bread Crumbs
Design Element 2. Each interior page should tell the customer where they have been so they know how to move forward. This technique is called a Location Bread Crumb Trail. A different Bread Crumb Trail technique found on some websites mimics the Web browser’s “Back” button, which can confuse visitors who may have taken an unconventional path to the interior pages. Surround Technologies prefers using Location Bread Crumb Trails, which always indicate the path to the beginning of each section and to the Home Page. This method is useful when visitors want to move up the site hierarchy to research the higher relevance of a topic. Using this method, visitors always know where they are in the site so they can make the best decision on how to move forward.
Section Mission Statements
Design Element 3. Announce to visitors how each section will benefit them by developing a concise and catchy Benefit Statement. Each statement should be specific to the site section and should grab the visitor’s attention. Think of the Benefit Statement as each section’s unique mission statement.
Content Navigation
Design Element 4. The Content Navigation menu for each section should contain a lower level of selections than those found under the Top Navigation Bar. Mouse-over graphic effects, such as buttons popping and pushing, enhance usability.
Topic-Specific Action Pane
Design Element 5. Similar to the Action Targets on the Home Page, the Action Pane is a consistent place on each interior page where visitors know they can find specific actions related to that section. “Need More Info?” and “Download Now!” are examples of Action Pane links that entice visitors to act now.
Topic-Specific Discovery Pane
Design Element 6. The Discovery Pane on interior pages is similar to the Discovery Section on the Home Page. The items listed here should allow visitors to discover more about the section they are in. Tease visitors to click on these links to keep them moving and discovering.
Content Should be Easily Digestible
Design Element 7. The most important part of any website interior page is the Content. For isn’t delivering information the primary reason visitors enter your site? Now that you’ve drawn visitors into your site, don’t lose them now with lengthy, boring text. Write content that is concise and catchy yet informative. The content on the introductory page of each section should be an overview of the section itself, using as many keywords as possible directly in the title, headings and text. Use a Storyboarding technique to give visitors digestible tidbits linked to more digestible tidbits, allowing them to progressively discover the information they need.
Sum It Up
Design Element 8. The Content Heading should sum up the succeeding paragraphs, like an Abstract of a research paper or an Executive Summary of a business proposal. The Content Heading should tempt visitors to read on for more details. And don’t forget to use plenty of keywords here to boost search engine relevancy rankings.
Don’t Leave Them Hanging
Design Element 9. Never leave visitors wondering what to do next. Present options in the Content Next Steps section, such as “For a closer look,” “Read on!” or “Learn more…”.
Conclusion
In conclusion, the most important factors in designing websites are the principals of Applicability, Find-ability and Discover-ability. In other words, websites must give visitors the information they need as fast as they need it while providing easy access to additional relevant information. Using the Website Interface Technique described within this White Paper, Surround Technologies has transformed websites of many clients, and yours can be next!