Website Survival Report Card for...
V-SPAN

This is a usability review from UsabilityInstitute.com. "Usability" refers to how easy and effective it is to use a Web site. Although it involves how a site looks (graphic artwork), it is primarily concerned with how a site works, what you click on, what happens, and whether the site does its job.

• Bookmark this site
• Contact us

The following three sections provide a general analysis of your website from a relatively quick review. Although Web design is still perceived as a highly creative endeavor, there are many aspects of it that call for standardization and compliance with widely established conventions. Implementing even a few of the ideas below can really improve a site.

	Part 1: Content Basics
			This first section is intended for typical public web sites (for products and corporate information), but also applies for the most part to intranets and software applications that run in a browser. We've been advocating many of these ideas—in the context of general software—since our 1997 book, Computers Stink, but they've been beautifully enumerated for WWW purposes in Steve Krug's book, "Don't Make Me Think."
			Click for explanation		Hover for explanation	Comments
		A1.	Logo in top left, linked to home		Most pages are, but the various function login pages do not appear to be linked.
		A2.	Tagline		Yes, but there appears to be two: 1) "Focus on Your Business Objectives and Leave the Technology to V-SPAN" and 2) "Virtual Connectivity..."
		A3.	Welcome blurb		Add something like "The world's leading provider of enterprise video, audio, and Web conferencing, bringing together employees, customers, and business partners." Possibly put it inside the top of the gray oval, centered. (It's not a slogan... it's for people who have no idea what you do.)
		A4.	Plain wording
		A5.	No 'happy talk'
		A6.	Concise wording
		A7.	Visited pages are distinguished by link color-coding		For instance, after reading each Bio on the V-SPAN Management page, one can't determine which ones have been visited. (The internal HTML style for visited links has been customized, preventing the "visited" color-coding.)
		A8.	"Utilities" are easy to find		Site map and Contact Us seem like the only utilities. Perhaps "Fast Facts" might be considered another utility since there are so few.
		A9.	Search on all pages, with box and button		At first I thought that this omission was of minor significance. Then, as I navigated more pages, I saw that the links on the right point to another level of detailed pages. For instance, a casual visitor would have a hard time re-finding the "Awards" page or the "White paper: Traditional Travel vs.Conferencing."
		A10.	"You Are Here" indicator		For instance, when you are in the Streaming page, the "Conferencing" menu header is not highlighted in any fashion (such as color-coding or an arrow). The breadcrumbs provide roughly the equivalent information but highlighting the section is a benefit.
		A11.	Breadcrumbs as links		Everyone gets at least one blue ribbon.

Students and Professional Developers: Designing a serious software application in a browser? Don't spend time and money designing the look and styles... there's more than you think involved! Instead, use GenericUI, shareware CSS and artwork that's free for non-commercial use and indefinite trial use.

Part 2: Visual Design: Fonts, Colors, Layout, Basic Interaction Design, and Accessibility
As we read in a graphic artist's ad, "Technology makes it work but art makes it sell," and you should take heed. We're not graphic artists here at Uinst, but we know good art when we see it and the common denominators that separate good pages from bad are clear. Look at the top sites and you'll see they spell out the following criteria.
	Click for explanation		Hover for explanation	Comments
B1.	Sans-serif fonts
B2.	Appropriate background color
B3.	Appropriate color hues		Matches my rule that the color scheme for most technology sites should be blue-based.
B4.	Visual representation of the information hierarchy		This is a tough one. The analogy is to a newspaper, with the most important messages at the top, and related items in boxes... that sort of thing. The hierarchy is mostly OK, but there are a handful of technique issues that need attention, such as the "Go" and info ("I") buttons. And notice on the home page that "News & Events" bounds a box that has 1 news item and 4 non-news items. See notes at end.
B5.	Conservative quantity of colors
B6.	Text sizes are "relative"		I notice that a lot of the text adjusts when I set the text size larger. The main product links are the notable exception since they're graphics.
B7.	Anti-aliased graphics
B8.	Graphics' file size doesn't slow navigation
B9.	"Alt tags" used well		For instance, the News & Events link (a graphic) doesn't have an Alt tag.
B10.	Links don't just say "Click Here"		I particularly like the way the blurbs ("Schedule a videoconference...") accompany the product names on the home page.
B11.	A style sheet (CSS) is used

Do your hands ache after a day at the keyboard??? This review sponsored by...

Part 3: Genuine Value: Useful Content & Critical Interaction Design
And now for the hard part. If all of good Web design were as clear-cut as parts 1 & 2, above, you wouldn't need much judgment and there would be a lot more good sites. But the easier the decisions are, the less significant the thinking and effort behind them... and the easier it would be to provide useful content. This section is where you make or break your rapport with the visitor. If you provide real value and give folks enough tools to get to it, they will push past the basic omissions and ignore even the most amateurish art.
	Click for explanation		Hover for explanation	Comments
C1.	Questions are answered		A genuine evaluation requires more study here but the site certainly looks like it provides the info people would come for.
C2.	Search results get the job done
C3.	Effective 'click tree'		Has some of the same issues related to B4. See notes.
C4.	Conceptual flow from upper left to lower right		I think that the secondary navigation (the links on the right side of the detail pages) should be on the left. So many other sites have used the right margin for promotional info that a lot of visitors may not realize that these are links to significant content.
C5.	Simple, outline-like site map		Yes, but needs some simple touch-up; see notes.
C6.	Primary navigation is obvious
C7.	Secondary navigation is obvious		It took me a while to realize that the boxed links on the right were the secondary (local) navigation. On some pages, such as Conferencing Tips, they're actually labeled Section Contents, whereas in the Conferencing pages there is no heading.
C8.	Contact information easily accessible
C9.	Links are clear		Things seem to have gotten a little inconsistent over time. Non-underlined links are OK as long as the whole design reinforces them, but it doesn't. For instance, on the home page, in the "Learn more about V-SPAN>>" blurb it isn't clear that the ">>" are indicating this as the drill-down link to more info.
C10.	Intro panel or animation not excessive
C11.	Graphics used only for core message		The graphics—the photographic images—are an area where V-SPAN can make a meaningful improvement. V-SPAN actually meets requirement C11 in that all of the images are of the technology in action, but they need some tuning. The animated image on the first page has 16 images so small that no mesage is conveyed... and it is "wiped" over. The 3 fixed images are superseded by the animation and the leftmost one might not be clear to many visitors. See notes for recommendations.

Summation & Next Steps

Overall Ratings:

Strives / Survives / Thrives

Bottom line: Great site that needs a some work to be awesome, but it's mostly easy touch-up work.

General comments: VSPAN.com meets the toughest of all general criteria for websites in that it provides a true online presence, not just static content. This is because, as a distance technology company, its site provides interactive functionality for the company's core services. So our valuation of the site as a whole starts with very high marks and from there we found a handful of easy things to fix. Most are typical issues that arise as content is added to a site over time and 'turf battles' occur.

The biggest item of concern is whether the site—basically the home page—should cater more to customers or to prospects, and what to do about it. After careful consideration, I've determined that sites in general should initially cater to prospects since customers already know what the site's about. Of course customer functions should only be one click away, or perhaps right on the home page, but not steal the show.

Notice, when looking at the home page that the images are all very small, and since they're photographic, their message is in intricate detail not bold shapes. Also, since there's no Welcome statement (different than the motto at the top), non-techies might not really understand what V-SPAN does for them. Keep in mind that you might think that videoconferencing is obvious to everyone, but exactly why one needs a company to help with it is probably unclear to a lot of corporate decision makers. Even with my 20 years in technology, I for one didn't fully appreciate that companies need the bandwidth, production, and logisitical capabilities provided by V-SPAN. It stands to reason I'm not alone.

The combined effect is that the basic sales message is not heavily enough allocated the home page. Of course you might say that most of V-SPAN's business is sold face-to-face but that doesn't absolve the site of serving its maximum sales role. Specific recommendations for this and other issues follow.

1. Home page:
   • Get a graphic artist to create better linkage between the V-SPAN logo and the slogan, "Focus on Your Business Objectives and Leave the Technology to V-SPAN". Perhaps use italics for the slogan, but if italics are used, consider a graphic so that pixelating does not occur.
   • Add Press kit and Press Releases to top menu. The press is among the most frequent visitors to corporate sites and you want to make them extremely welcome.
   • Move "Site Map" and "Contact Us" to the top right side of the page, perhaps immediately above the menu bar. Make them plain text, not graphics. Consider adding either "Fast Facts" or "Press Kit" to this small group of "utility" links.
   • On the dropdown menus, consider changing from images to text, perhaps Verdana, bold which seems popular. And re-enable the rollover display of the destination page name in the Windows Status bar;it's being deliberately hidden.
   • In the Meeting Center box, move the "I" (information) buttons to the right of the "Go" buttons. Either make the shape, font, and shading of the new "I" buttons identical to the Go buttons (possibly with a different color, perhaps blue), or make the new "I" buttons identical to Microsoft's standard lowercase white I in a blue circle. Another option is to widen the moved buttons and use the word "Info."
   • Consider eliminating the three photos at the top, or converting them to drawings of the various media. Only convert them to drawings if an artist can come up with a very stylish motif that also conveys the message.
   • Consider changing from 16 mini-images to a series of full-size images that are bright enough and clear enough to show the solution in action. Consider embedding text descriptions into the images. Take a look at http://www.documentum.com for a good allocation of space to a "feel good" image. It cycles through several images with overlaid text.
   • The item, "Leading Companies to Gather for V-SPAN User Experience >>" needs an explicit link. The whole phrase is currently a link but not underlined. If underlining is not preferred, use a "More..." link instead.
   • The News & Events item needs, somehow, to be bounded by a box that is connected only to its heading.
   • If the IP-Video-Connect link at the bottom of the page is important, put it in the News section.
   • To the right of "Why V-SPAN," eliminate the graphic effect of the three gray squares. The page already has tremendous visual style, and these are not such a strong theme that they add much.
   • In the "Why V-SPAN" section, the link to drill down needs to be distinguished from the three blurbs above it. Eliminate its check mark and the gray background; center it; I'm not sure how to make it more clear that it is a link, whereas the other three bolded text blurbs are not. I just don't think the ">>" succeeds as a cue. Perhaps eliminate the blue/bold-ing from the other three items.
2. Consider—if security is not a concern—adding a page or set of pages that really show off (via photos) the physical plant of V-SPAN, from the production floor to studios and horsepower rooms. Visiting the brick-and-mortar site really impresses upon a visitor the wealth of logistical support that they are enlisting... a resource they couldn't possibly duplicate for the price. The web visitor is cheated of this tremendous sales message.
3. engageSchedule page:
• Logo on this and other login pages is not linked back to home page.
• Move the "Choose a different Product >> " to the bottom-center and eliminate the ">>". Perhaps simply make it a Back link if the only access to this page is from the home page. It's not clear that this is the exit/cancel link.
4. Site Map page:
   • Eliminate the blue backgrounds behind the level 1 links. They disguise the fact that the items are links.
   • Put links to all pages on this page. For instance, the whitepaper is not on here. This is the place to be exhaustive even if it means scrolling. People are on this page because they couldn't find what they wanted.
   • Consider changing from alpha order (which has already been overridden) to conceptual. In other words, follow the order of the dropdown menus as much as possible.
   • Use only indentation and font size (not blue bars, not centering) to indicate subordination of topics. For instance, outdent "Company Info" and indent sublinks.
   • Eliminate the hyphens, or if you keep them don't underline them.
5. On all pages with secondary navigation, as a quick fix, add a heading, "Section Contents." Perhaps there's a more comprehensive solution.
6. About V-SPAN Page: Correct the Alt tags on right-side menu.
7. Webconferencing Demo page:Change the coloring of the field names and backgrounds to match the Contact Us page.
8. Customize the Internet Explorer icon, so that when visitors save a favorite it shows some distinction and reinforces corporate identity. For example, notice what happens when you save a favorite from this page. For instructions see Jessett.com. I can make an icon for you, to play off of the "V" if you want.
   

Hope this helps and let me know what you think,
Jack Bellis, UsabilityInstitute.com