Case Studies #12: intuitivesurgical.com

,
This Case Study is in regards to the website www.intuitivesurgical.com, a website for the company that manufactures the da Vinci Surgical System.

Navigation:
The primary navigation bar of the site is located on the left of the page. It is a darker gray from the background and stands out because of this. Small light gray dashed lines separate the links from each other.
After clicking on a link, the primary navigation bar expands to show secondary navigation with additional links to relate content.
At the bottom of the page are the common useful links found on many sites, such as “Terms of Use” and “Site Map”.
This setup for the navigation allows users to quickly find information, as the links are all located in one location. That is, clicking on a primary navigation link opens up a secondary navigation bar directly below it. This limits the time spent by users looking for the new location of the secondary navigation and clicking the links.

Architecture:
The architecture of the site is set up so that content is divided into the main categories located in the primary navigation. Each category has a main page that is then connected to sub-pages in a common “tree” outline. (The main page sections off into the different categories, which each section off into sub-pages). This is because the site is designed to provide users with as much information as possible on the products offered by the company and the resources available to different visitors. For example, physicians visiting the site can navigate to “Physician Resources” and then click the link on their specialty (such as “Cardiac Surgery”) and obtain information on how the products improve efficiency and quality of cardiac surgeries. This arrangement quickly divides the content so that users can obtain only relevant information without having to search through an entire page of compiled content.

Content/Typography:
The content hierarchy is apparent through the use of bold letters, letter size, and letter color.

Heading 1:
Large dark gray bold font, used as titles for content.

Heading 2:
Medium gray font, used sub-headings.

Heading 3:
Small blue font, used for links.

Paragraph:
Small dark gray font, used for content and information requiring sentences and paragraphs.

The content on the page is organized in paragraph form, with some information in bulleted format. This allows users to obtain all of the relevant information and to scan the headlines for specific information. This organization works for the company’s site as the products they are offering are highly sophisticated, and most visitors to the site are looking for technical details and specifics about the products. Paragraph and bullet format are the best way to get large amounts of information across to the user.
The width of the content area on the page is much smaller than the full site, as this allows users to quickly read the paragraphs line-by-line without losing their place when looking for the next line.

Grid/Structure:
The structure of the homepage for the site is in a grid format. This allows more information to be viewed on one page and the layout of the information to be customized.
The structure of the content pages on the site consist of an upper row, containing the banner, and two columns. The left column contains the navigation and links, while the right column contains the content and information.

This layout allows users to quickly find the navigation links and to separate navigation from content.

Iconography/Imagery:
The site uses six icons to help users navigate the site more effectively. These icons are:
Search icon.
Email icon.
Video icon, used to indicate links which will lead to a movie clip of the product.
Link icon. This icon is very helpful, as it is used to indicate if the content displayed is a link or not. This in addition to the dark-colored, underlined text, are the two types of links on the site. This helps maintain the uniform look of the site, as all links are one of the two types.
Reference icon, indicates clinical publications that the content uses are references.
Brochure icon, indicates a downloadable brochure.

The site also uses imagery to help users understand the information and content provided. Because the company is providing products to hospitals, the site uses several images and thumbnails of the products in action to help illustrate their usefulness to surgeons. These are set into the text to add to the information or are separately placed.

Color Palette:

The color palette of the website is comprised of various shades of gray with orange highlights. These are in addition to the common black and white site colors and blue links.
Shades of gray.
Orange highlights and boundaries.
Black, used for rollover status on links.
White, content background.
Blue, links.
This color palette is well chosen, as the colors work well together and add to the professional look of the site. This is important, as the company is trying to get more customers to purchase their product, and need a color scheme that exhibits this goal.

Site Focus:
The focus of the site is to provide potential customers with information about the products and services provided by the company. This company, which specializes in surgical equipment (most notably the da Vinci System), has made their site as user-friendly as possible while still providing the depth of information consistent with other medical sites. That is, this site is able to be viewed by both medical and non-medical personnel and still be able to be understood. The website showcases the different abilities of the equipment and resources available to different users, such as patients and surgeons.
Useful features on the site include breadcrumbs and video content.
Breadcrumbs allow a user to quickly navigate the site and be able to return to a previously viewed page without having to use the “back” button or start at the home page again.
Video content is very important on this site, as it allows users to view the content differently and see the equipment in action.

No comments: