Please note:
The preceding Case Studies are under copyright protection of the respective web sites. It is for academic purposes only that parts and images are copied into this blog for review.
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.
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.Case Studies #11: globalgaragesale.net
,
This Case Study is in regards to the website www.globalgaragesale.net, a website for an e-bay consignment business.
Navigation:
At the top of the page is the primary navigation bar. This contains links to the “About” page, “Services” page, “Policies” page, “Fees” page, “For Sale” page, “Locations” page, “Franchise” page, and “Home” page.
To the left of the content is a secondary navigation bar. This contains additional links such as “Company News”, “Franchise” information, “More Information”, and “What’s Hot”.
Rolling over these titles opens the navigation to show relevant links.
At the bottom of the page are the (usual) links that are seldom used but important to some users. These include the site’s Privacy Policy, Site Map, and duplicate links to the other main pages.
A user can determine which page of the site they are on by the activated tabs in the primary navigation.
The navigation is set up to provide users with information on how conducting business with the company works, to provide users with information on how to contact or visit the company at its locations, and how the user can start a franchise. These intentions are visible in the layout of the navigation. The most useful links to users (who are primarily visiting the site to learn how the service provided works) are first. Then there is information on where the business is located, and finally franchise information. This setup allows users to quickly find the information required on the site.
Architecture:
The architecture of the site is very flat. That is, there are only single pages for each link. This allows a user to find all of the relevant information without having to click through to different pages. Also, because the information being provided is very static (does not change very often), the site does not have archives of previous information. Only the newest information is required by users, keeping the number of pages to a minimum. In addition, the site does not have to showcase items or products. This is done by linking to the company’s e-bay store. This also prevents the site from having several pages in one section of the site.
Content/Typography:
The content hierarchy is apparent through the use of bold letters, letter size, and letter color.
Heading 1:
Large black font, used as titles for content.
Heading 2:
Medium black font, used sub-headings.
Paragraph:
Small black font, used for content and information requiring sentences and paragraphs.
The content on the page is organized into paragraphs, as this is the easiest way to convey the information about the service to potential customers.
When possible, information is bulleted to reduce the amount of reading required by the user.
This organization of the content works well for the site, because there is plenty of important information about the service that needs to be completely understood by users before they use the service. This prevents and/or limits liability on the company as they have expressed all information in a clear and concise manner that is available to all users.
Grid/Structure:
The structure of the site is set up as a main upper row that contains the banner and primary navigation, and two columns that bound the content of the site. The left column contains the secondary navigation, and the right column contains a slideshow of current auctions and affiliated companies.
This allows the content in the center of the page to be focused on by the user, while also quickly giving them additional information about the company without having to navigate to a different page.
Iconography/Imagery:
The site uses a few icons to help users navigate the site and be more efficient. These icons include:
Bullet icons, to help users determine clickable buttons.
Google Toolbar button, to add the GlobalGarageSale toolbar.
Rss feed button.
Print button.
Recycle icon, to display to users that GlobalGarageSale is a “green” company.
Search icon.
In addition to these icons, the site also uses imagery to help users navigate and obtain information from the site. These include:
Current auction thumbnails.
Map of location.
E-bay images, to indicate that the company is a trusted seller on the E-bay website.
Color Palette:
The site uses a simple color palette of four main colors, in addition to black and white.
Green.
Tan.
Yellow.
Blue.
Black.
White.
The color palette of the site is somewhat awkward. The background of the page is a light tan color, and links and navigation are in green and yellow. These colors do not work well together, as the tan does not help the green and yellow. These colors might work better with a white background.
Also, the green is an important aspect of the site, as the company tries to showcase that it is a “green” company. Through use of the company, users are recycling items rather than trashing them and purchasing new ones. This helps keep the items from ending up in landfills.
Site Focus:
The focus of the site is to provide potential customers with information about how the service works, how to contact and find the locations of the company, and how to start their own franchise. This is done through the different pages on the site such as those highlighting the fees associated, the company’s policies, and addresses for the locations.
A couple of possible improvements to the site could be to move the “Home” tab in the primary navigation bar to the left side, to rename a few of the links in the navigation system, and to change the background color to white.
Moving the “Home” tab to the left side of the site would keep in line with the “norm” found on other sites. The navigation bar is meant to help users navigate around the site, and moving important parts of it would only lead to confusing the user as they would not be used to finding the home button to the right of the page.
A few of the links, such as “More Information” and “What’s Hot” could be renamed to reflect more accurately the content on the pages. At first glance, these links are confusing and I had no idea what was on the pages. Renaming them would limit this confusion and prevent the user from wasting time clicking on them and finding information that is not relevant to their purpose of navigating the site.
Lastly, changing the background color of the site to white (or even a light gray) would make the site look clean and professional. Currently, the tan is “upsetting” to the green and yellow currently on the page. The colors clash and do not add to the overall appearance of the site.
Navigation:
At the top of the page is the primary navigation bar. This contains links to the “About” page, “Services” page, “Policies” page, “Fees” page, “For Sale” page, “Locations” page, “Franchise” page, and “Home” page.
To the left of the content is a secondary navigation bar. This contains additional links such as “Company News”, “Franchise” information, “More Information”, and “What’s Hot”.
Rolling over these titles opens the navigation to show relevant links.
At the bottom of the page are the (usual) links that are seldom used but important to some users. These include the site’s Privacy Policy, Site Map, and duplicate links to the other main pages.
A user can determine which page of the site they are on by the activated tabs in the primary navigation.
The navigation is set up to provide users with information on how conducting business with the company works, to provide users with information on how to contact or visit the company at its locations, and how the user can start a franchise. These intentions are visible in the layout of the navigation. The most useful links to users (who are primarily visiting the site to learn how the service provided works) are first. Then there is information on where the business is located, and finally franchise information. This setup allows users to quickly find the information required on the site.Architecture:
The architecture of the site is very flat. That is, there are only single pages for each link. This allows a user to find all of the relevant information without having to click through to different pages. Also, because the information being provided is very static (does not change very often), the site does not have archives of previous information. Only the newest information is required by users, keeping the number of pages to a minimum. In addition, the site does not have to showcase items or products. This is done by linking to the company’s e-bay store. This also prevents the site from having several pages in one section of the site.
Content/Typography:
The content hierarchy is apparent through the use of bold letters, letter size, and letter color.
Heading 1:
Large black font, used as titles for content.Heading 2:
Medium black font, used sub-headings.Paragraph:
Small black font, used for content and information requiring sentences and paragraphs.The content on the page is organized into paragraphs, as this is the easiest way to convey the information about the service to potential customers.
When possible, information is bulleted to reduce the amount of reading required by the user.
This organization of the content works well for the site, because there is plenty of important information about the service that needs to be completely understood by users before they use the service. This prevents and/or limits liability on the company as they have expressed all information in a clear and concise manner that is available to all users.Grid/Structure:
The structure of the site is set up as a main upper row that contains the banner and primary navigation, and two columns that bound the content of the site. The left column contains the secondary navigation, and the right column contains a slideshow of current auctions and affiliated companies.
This allows the content in the center of the page to be focused on by the user, while also quickly giving them additional information about the company without having to navigate to a different page.Iconography/Imagery:
The site uses a few icons to help users navigate the site and be more efficient. These icons include:
Bullet icons, to help users determine clickable buttons.
Google Toolbar button, to add the GlobalGarageSale toolbar.
Rss feed button.
Print button.
Recycle icon, to display to users that GlobalGarageSale is a “green” company.
Search icon.In addition to these icons, the site also uses imagery to help users navigate and obtain information from the site. These include:
Current auction thumbnails.
Map of location.
E-bay images, to indicate that the company is a trusted seller on the E-bay website.Color Palette:
The site uses a simple color palette of four main colors, in addition to black and white.
Green.
Tan.
Yellow.
Blue.
Black.
White.The color palette of the site is somewhat awkward. The background of the page is a light tan color, and links and navigation are in green and yellow. These colors do not work well together, as the tan does not help the green and yellow. These colors might work better with a white background.
Also, the green is an important aspect of the site, as the company tries to showcase that it is a “green” company. Through use of the company, users are recycling items rather than trashing them and purchasing new ones. This helps keep the items from ending up in landfills.
Site Focus:
The focus of the site is to provide potential customers with information about how the service works, how to contact and find the locations of the company, and how to start their own franchise. This is done through the different pages on the site such as those highlighting the fees associated, the company’s policies, and addresses for the locations.
A couple of possible improvements to the site could be to move the “Home” tab in the primary navigation bar to the left side, to rename a few of the links in the navigation system, and to change the background color to white.
Moving the “Home” tab to the left side of the site would keep in line with the “norm” found on other sites. The navigation bar is meant to help users navigate around the site, and moving important parts of it would only lead to confusing the user as they would not be used to finding the home button to the right of the page.
A few of the links, such as “More Information” and “What’s Hot” could be renamed to reflect more accurately the content on the pages. At first glance, these links are confusing and I had no idea what was on the pages. Renaming them would limit this confusion and prevent the user from wasting time clicking on them and finding information that is not relevant to their purpose of navigating the site.
Lastly, changing the background color of the site to white (or even a light gray) would make the site look clean and professional. Currently, the tan is “upsetting” to the green and yellow currently on the page. The colors clash and do not add to the overall appearance of the site.
Subscribe to:
Posts (Atom)