Usability and User Interface Design

As noted in previous posts, I am currently a part-time student in the MS-PTC program at NJIT. The MS-PTC community and NJIT Web services team were instrumental in the re-design of the NJIT Web site (www.njit.edu). A consultant for the re-design process submitted a proposal for using high school students to participate in actual usability testing of the NJIT Web site. The consultants submitted a NJIT Usability Testing Protocol Planning document and a Usability Testing Task Analysis document as part of their proposal.

This blog post will critique the consultant’s proposal and investigate what types of changes would be required if the usability test was conducted on a commercial Web site instead of an academic Web site.

The NJIT Usability Testing Protocol Planning document is a script for usability test coordinators to follow when test participants arrive for the formal usability test session. The protocol planning document instructs test coordinators to collect demographic data, explain the goals of the test and ask a few general interview questions before launching the actual usability test. The protocol planning document is thorough enough, but I would make some minor modifications.

Most importantly, the demographic data section asks test participants for name, address, contact information and social security number. This type of information is extremely confidential and many people are reluctant to provide it to researchers. I would include a line or two in the script to inform test participants that their confidential information will not be made available to outside parties.

I would also ask test participants to engage in ‘protocol analysis’ throughout the usability test. Protocol analysis, also knows as ‘think aloud protocol’ is a research method that elicits verbal reports from test participants. In other words, test participants should verbalize their thoughts in order to convey any successes/frustrations they may encounter when performing usability test tasks. The test coordinators can take thorough notes or revisit audio recordings to highlight any common problem areas.

The Usability Testing Task Analysis document provides some task-based questions for the actual usability test. Before gathering section-specific information on the NJIT Homepage, I would ask some ‘first impression’ questions, such as is the layout pleasing? Are the links and menus logically placed? Several questions hint at this (e.g. Get feedback on the general mix of content on the page or on the use of colors and visual “balance”), but I think these questions could be expanded to specific design elements (typography/readability, menu placement etc.) and should be moved to the front of the list. After all, the Web Credibility Research Project (www.webcredibility.org) shows that 46% of people base credibility judgments on overall visual design of a site, including layout, typography, font size and color schemes. I don’t think the NJIT site suffers from a lack of credibility, but I think the usability test team misses out on getting first impression-type feedback from users early on in the usability test.

I think the Tasks section is well-written, as the majority of tasks for potential students are covered. I would remove the question about ‘would they fit in at NJIT?’, as I don’t think this is relevant to the usability of the Web site. I would also add a question about finding information on admission requirements (e.g. for students who are questioning whether or not SAT scores are required). Perhaps a question or two about using the search box for known item searching would help. Most prospective students are searching for specific information and many will turn to the search box. The usability test team has a vested interest in ensuring that the search engine returns useful results.

If the Test Protocol Planning document and the Usability Testing Task Analysis document were written for usability testing of a commercial Web site, I would include much more information about navigation and the purchasing/payment processes. If the goal of commercial sites is to maximize efficiency of use (e.g. ensure that users can find and purchase the products that a Web site is selling as quickly and effortlessly as possible), then the goals of usability testing be focused accordingly. I may ask test participants to search for information about a specific-product, including the cost. I may also ask users if they’re comfortable conducting financial transactions through the secure portion of the site. I would also ask about product categorization. Most commercial sites, whether they’re niche sites or general merchandise sites, sell a variety of products. Users’ ability to navigate the site and find one or more products that they’re interested in is incredibly important.
I would ask several questions about whether or not the site is easy to navigate and whether or not the menus/product categorization are logical. I would also include questions designed to gauge how difficult it is to find a ‘Contact Support’ link for telephone/email questions. Customer service is key in commercial sites and successful companies need an access point/support avenue beyond the Web site. Amazon.com is successful because the Web site does a great job at product categorization and the company’s customer support is excellent.

Re-design Part II

I have completed my meager blog re-design. This post will expand on why I decided to employ certain visual elements and my successful/unsuccessful attempts at incorporating layout changes.

To start, I have to credit the tutorials at http://www.bloggerbuster.com/. The tutorials cover a wide variety of topics, some geared towards advanced HTML coders and some that cater to novice bloggers who do not have a thorough understanding of HTML.

I started with Blogger’s standard minima template. Using soothing shades of blue, I developed a personalized banner and placed it at the top of my blog. Perhaps I am partial to the nuances found in different shades of blue because the two companies I’ve worked for in my technical writing career have prominent blue logos. I’ve always enjoyed the blue/white contrast.

I used various bloggerbuster tutorials to edit the minima template’s CSS to import a patterned, blue background image. I downloaded the pattern from a personal pattern portfolio at http://www.squidfingers.com/ and think the blue and white pattern provides a nice ‘matting-like’ background to the text.

I modified the CSS to change the background color of the main posting space. Again, I chose a soft blue color. I had to search for the color’s hexadecimal equivalent and then add the hex number to the CSS, but I was able to do so easily.

I used a second bloggerbuster tutorial, along with Blogger help files, to modify the margins and padding of the side bar and the main posting area. I added some additional padding, extended the margins and placed a black border around each element. I think the black border helps to differentiate the sidebar from the main posting area.

During the re-design process, I also wrestled with layout changes, but didn’t have much luck. I was able to remove/add Widgest, but my attempt at converting the blog to a newspaper-like, 3 column layout was frustrating and unsuccessful. I eventually reverted back to the standard minima template layout.

I also tried to incorporate ‘read more’ links on each post, which would reduce the scrolling required to read all posts. Read more links would allow me to hide content in large posts and have readers simply click links to ‘unhide’ content. Granted, I didn’t start this process until the day the site re-design was scheduled to be finalized, but I had a difficult time making the CSS edits required to complete this task, so I deferred.

For typography, I used Web-friendly Verdana font for the body of blog posts and sidebar links. I chose Arial for all headings. I think this combination works well and have always thought Verdana was a pleasing sans-serif font for Web-writing.

Writing a Web-based Product Description and a Print-based Product Description

The format and presentation of Web-based written material should be vastly different than that of traditional print media. The advantages of printed material do not extend far beyond portability. Printing a document, picking up a printed magazine or newspaper will always allow consumers to read the content “on the go” (e.g. commuting on a train or bus), but the widespread adoption of Internet-capable smart devices (e.g. BlackBerry, iPhone) are slowly eroding print’s portability advantage.

This post will explain the differences between writing a technical product description that will be published on the Web and writing a technical product description that will be delivered via traditional print media (e.g. binded book that ships with the product). I will examine the contrasts between the two writing styles in terms of the following:
- audience analysis
- component description
- vivid descriptions
- effective visuals
- format and organization

Audience Analysis

Audience analysis is incredibly important when writing technical content, regardless of delivery mechanism. Before writing any material, experienced technical writers often seek advice from marketing teams or various other subject matter experts to determine the goals of the intended audience. For companies with large budgets, entire audience analysis studies are done to understand the needs and skill level of readers. The goal is to ensure that the technical content does not overshoot or undershoot the goals of the audience. Authors of Web-based writing and print-based product descriptions must have a thorough understanding of the target audience. Does the audience need specifics on the product or simply an overview? In terms of level of detail, Web-based content does not need to provide a thorough description of each industry term related to the product. Instead, Web-based technical product descriptions can rely on hyperlinks to jump readers to outside sources that explain industry terms or concepts. Print-based should assume that readers do not have a reference to describe certain terms and concepts, so the product description itself should adequately explain relevant concepts. In other words, Web-based technical product descriptions can rely on outside sources to fill in the gaps on industry-accepted information; print-based writing should strive to be self-contained. However, the extent of this relies on understanding the target audience.

Component Description

Component descriptions are partly dependent on the audience analysis. If the audience requires specifics, then the product description should adequately explain structural and functional parts of a physical product. Again, Web-based technical documentation has the advantage of length, as component descriptions can be spread out over multiple Web pages and navigated by readers via hyperlinks. Readers need only click on the links to read about the components they’re interested in. Printed-based product descriptions need to have all content in a single file. Readers will have to search through all of the material to find the content that is relevant to them. Clearly, Web-based product descriptions are more usable (e.g. easier to navigate) than print-based.

Vivid Descriptions

Vivid descriptions are equally important in any type of media. In order to give Web audiences a thorough description of a product, vivid descriptions of components must be in place. This holds true for printed documentation as well.

Effective Visuals

Effective visuals contrast in Web-based and printed product descriptions. Audience-appropriate visuals are much more important in printed documentation than in Web-based documentation. When faced with a long, printed product description, readers may be reluctant to read through all of the text. Instead, they may search for graphics that convey information in an abbreviated manner…a picture is worth 1000 words. In Web-based product descriptions, text often appears more manageable because it is spread throughout several Web pages. Effective graphics are still important, but Web readers may read more of the supporting text. On the other hand, Web-based documentation clearly has an added advantage for visuals. Animation is possible on the Web, but figures are static in printed documentation.

Format and Organization

Format and organization of information is far more important in print-based documentation than in Web-based. Due to the hyperlinked nature of Web media, traditional beginning-middle-end information flows are difficult to enforce. Readers are free to jump around while reading content. In printed material, placement of information (spatially, chronologically and priority) is much more important. Printed information is typically read from front to back and the information should be organized accordingly. Web-based product descriptions should be written with the understanding that readers will haphazardly navigate through the content and may access a chunk of information from any starting point. If sections of a Web-based product description must be laid out chronologically, special navigation instructions should be provided.

Re-design of blog

Starting today, I will be implementing some changes to the design of this blog. I will be adding a personalized banner and modifying the layout color scheme by moving away from Blogger-developed CSS.

Flash-dominated Web sites

This post will focus on a Flash-intensive Web site and describe whether or not the site effectively blends Flash and traditional HTML without compromising the overall site design.

After browsing through several Flash sites, I found the http://lab.mathieu-badimon.com/ site most appealing. The site is an interesting example of mixing unique visual design with Flash animation and scripting.

Home Page
The site’s home page includes seven different Flash animations to choose from, as shown below:

The home page and the seven different animation boxes are an interesting study in the elements of visual design. The subsections below describe several of these elements as they relate to the site.

Color
The default color for all seven animation boxes on the home page is black on a gray background. On mouse-over, each box changes to a vibrant color (e.g. the Block Clock box changes to bright orange and the Liquid Form box changes to neon green). This color contrast adds an exciting layer of interactivity to the home page. See the screenshot below:

Figure and Ground
Each animation box on the home page also moves on mouse-over, which creates an eye-catching figure/ground dynamic. The user is given the impression that the animation boxes float above the ground.

Format and Orientation
The scroll bars that appear on the bottom, left side and right side of each window allow users to alter the format and orientation of each page. This gives users a sense of control over the orientation of the animation. Each page is transformed from a static vantage point into an animation that can be viewed from a myriad of angles. See screenshot below:

Unity and Typography
The color schemes, page layouts and consistent use of typography, give the site a sense of unity. This is not easy to accomplish on a site that includes seven different flash animation pages, but each animation seems to belong to a single set due to consistent use of visual design techniques.

Grid
Most designers rely on a grid system to establish consistency, unity and order. Each animation subpage employs a consistent grid layout; the links that jump back to the homepage are always in the same location (upper right hand corner). The site is not easy to navigate, but the adherence to a grid helps.

Accessibility and Navigation
The homepage along with the animation subpages load quickly, but not as fast as static HTML-only Web page. The designer compensated for the slower load times by distracting the eye as a page loads. While an animation page loads, a well-designed progress bar crawls across the animation box. This lends a sense of rhythm to page loadings and is certainly better than staring at the detested ‘hourglass’ pointer while a page loads.

Like many Flash-heavy sites, the http://lab.mathieu-badimon.com/ site is difficult to navigate. For example, after initially loading an animation page, it was not clear to me how I could return to the homepage. As mentioned earlier, once I understood the grid layout, I was able to find the return to homepage link on each animation page, but if the viewer orients the page at an odd angle, the return to homepage link may be obscured.