Reflection

I am currently employed as a technical writer, but the Tamarack Tee site marks my initial entry into the blogosphere. I didn’t have a problem developing the written content for the posts up to this point, but the HTML/CSS aspects were another story. Although I am familiar with HTML, I do not consistently create/maintain Web sites at my job so my design skills needed hands-on practice. Luckily, the recent re-design of my blog provided plenty of it. The Tamarack Tee blog initially employed a standard Blogger template. As the weeks progressed, I added several widgits and modified the default color scheme. Several weeks ago, I completely overhauled the design of the blog. I included a unique background pattern (downloaded from the Internet), adjusted the background colors, embedded a personalized banner and a personalized movie (currently hosted on Google videos). I also tweaked the column widths to enhance readability and use more white space. I did experiment with a newspaper-style, 3 column layout, but abandoned the change when I became bogged down in HTML that was over my head. I think the contents of each post meets the stated goal of the blog, to provide information and track my comprehension of various visual design elements. The posts are well-written and comprised of original thoughts without relying too much on canned content. I probably should have included more links to outside references throughout the posts, but I think any technical writer/visual designers who my stumble on to the Tamarack Tee blog will recognize the validity behind the posts.

As I continue with the blog, I will continually overhaul the layout and color scheme. I may also modify the goals of the blog, moving more towards technical writing instead of visual design. I'm hoping to report on my current goals of learning XML, XSLT and perhaps some scripting work (FrameScript, JavaScript etc.).

Communications Templates

As a technical writer, Microsoft Word and Adobe FrameMaker template generation and maintenance comprise the bulk of my design efforts. As with any technical documentation template, the majority of the design elements focus on the text. Any useful technical document relies on effective graphics, but readable text and all of the visual design features that contribute to readable text are the most important aspects of a usable technical documentation template.

Font choice, spacing, character styles, paragraph styles, white space and table formats are some of the text-based issues that must be considered during template design for technical documentation. Unfortunately, visual design elements such as color schemes, HTML code, CSS and video are rarely relevant to Word/FrameMaker technical documentation. My template design knowledge is confined to word processing software only, without much experience in Web templates or templates in other applications. In an effort to enhance my template design skills, I developed a suite of communications templates for a fictitious company, kr3c. kr3c is based in Princeton, New Jersey and specializes in environmentally-sensitive technology programs.

The kr3c templates I developed are available here (select Document Design>kr3c Templates link).

A note or two about the design of each template appears below:


Business Card
All kr3c employees are required to order business cards. The template was designed in Microsoft Visio and incorporates the logo and color scheme of kr3c. The logo is blue; the green elements of the business card reflect the environmental conscience of the company.



Professional Letter
In order for kr3c to communicate with potential customers and vendors in a formal manner (e.g. not via email), kr3c needed a formal letter template. The Microsoft Word template is fairly straightforward, includes the marketing-approved logo and employs a readable font (12 point Times New Roman).



Services Invoice
Any company that sells goods and services requires a standardized invoice template. I used Microsoft Excel to develop kr3c’s invoice template. As I do not have extensive experience with Excel, I required additional development time to organize the formulas used to calculate the Line Total values. Again, the invoice uses the standard kr3c logo and blue color scheme, providing a sense of unity to all of the marketing collateral.



Documents and White Papers
kr3c research and design teams will need to write a substantial mix of customer-oriented documentation and internal-only documentation. The Microsoft Word template allows kr3c departments to easily write all types of documentation. The title page includes the kr3c logo, document title/subtitle, publication date, part number (05-xxxx-xx) and company address. Each page in the template includes a kr3c Confidential Information footer. This footer will be present in internal documentation, but removed when documents are made generally available to the public. The intent is to protect kr3c intellectual property. The template contains a Change History table along with the front matter (TOC, LOF, LOT) that is critical to documentation navigation. Several paragraph styles are embedded in the template, giving document authors the freedom to format text accordingly (Headings 1-4, Appendix Headings 1-4, bulleted list, numbered list, body text, figure/table captions etc.) All text, except for captions and Headings, text is rendered in simple Times New Roman 12 point font. The font is easily read, installed by default on most computers and easily converts to PDF. The font for captions is 12 point Helvetica and the font for Headings is Arial. All of these fonts are plain, vanilla fonts that were deliberately chosen to avoid distracting from the content. The audience for kr3c technical documentation is interested in document content and the ideas the content conveys; elaborate and flourishing typefaces have their place in template design, but they’re not needed in kr3c technical documents.




PowerPoint Presentations
In order to establish a presence in the marketplace, kr3c will need to present ideas at various conferences and customer sites. The look and feel for all of these presentations should be consistent. Consistency informs customers that kr3c employees are on the same page. Much like the documentation templates, the goal of kr3c PowerPoint presentations is to convey valuable information. The visual aspects of the PowerPoint template should not detract from the content. As a result, I designed a minimalist template that uses marketing-approved kr3c colors and a generic white background. The initial slide contains a placeholder for the presentation title and the presenter’s name. The footer for each slide provides a placeholder for the date of the presentation and the kr3c confidentiality statement (again, to protect IP). The second slide contains a Rev. History table with an 05-xxxx-xx part number placeholder (identical with the part numbering scheme in the documentation template). All successful presentations begin by outlining the agenda. An agenda slide is third. For any post-presentation follow up questions, the final slide lists information for contacting kr3c marketing or visiting the kr3c Web site.

Collaborating Online

As the Web migrates towards online applications (Web 2.0), collaboration is becoming a vital aspect of content development. Wikis, CMS, documentation repositories (Documentum) and other distributed platforms enable multiple authors to contribute to a single project. As part of the MS-PTC program at NJIT, I often rely on Wiki collaboration, forums/chats and general collaboration to finalize program projects.

Wikispaces is a shared environment for content development that was used successfully throughout the MS-PTC program, especially for PTC 605. Classmates and I set up a Wikispace that allowed us to collaborate on individual HTML pages, each of which describes a visual design element. Each classmate staked ownership to a specific design element and then developed an initial version of the page. After the initial development phase, other students edited/modified the pages to generate a united Wikispace with consistent font choices, layouts, color schemes and page headings. The process worked and even though the pages initially looked different, they eventually had a similar look and feel. This consistency could not have been accomplished without collaborative editing. The initial version of each page used vastly different layouts, but subsequent edits standardized each page. The end result was that each page looked like parts contributing to a consistent whole, namely a Wiki on visual design.

I think the process of collaborative Wikispace editing worked well and the instructions to make each initial page look like the home page were helpful. Without top-down, ‘template-like’ parameters, the collaboration would have been much more difficult and the unity of the Wikispace would of suffered. I think some initial parameters about how individual pages should be laid out, typography, headings etc. are required at the beginning of any collaborative project. You may argue that such requirements defeat the purpose of an open-source, collaborative environment, but some rules must be in place to ensure a uniform look and feel to the individual pages. Otherwise many cycles are spent wrestling with formatting issues instead of focusing on content.

I didn’t have any issues working with the Wikispaces software, but formatting text and image loading were rather problematic. For some reason, I had trouble enforcing consistency in the headings of my page. I did manage to set my page up within the suggested guidelines (e.g. make it look like the home page) and made some significant textual and layout edits to other pages (copyediting, clarifying/rewriting content, resizing/repositioning graphics).

The end result of the PTC 605 collaboration is a Wikispace that provides a readers with thorough descriptions of numerous visual design elements. The page is http://605.wikispaces.com/.

Moodle is a popular online forum for virtual classrooms. After adjusting some its less-than-user-friendly default settings, I was able to follow coursework and assignments without a problem. Although the Moodle homepage is too busy for my tastes, I was able to follow and participate in course-related discussions. Due to schedule constraints, I did not use Moodle’s chat option, but found that I was able to get all of the information I needed through bulletin board and assignment postings.

For final project collaboration, I relied on the kr3c Wikispace and the Moodle bulletin board. I posted early versions of my project, but haven’t received feedback from classmates. As we close in on the final project due date, I will take a more active role in collaborating/getting feedback on my project and submitting feedback on the projects of other students.

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.

Web 2.0

Web 2.0 means different things to different people. Marketing teams view Web 2.0 as a viable way to localize sales efforts while video/audio artists view Web 2.0 as an efficient vehicle for delivering their works to viewers/listeners. Alternatively, many people see Web 2.0 as a meaningless buzz phrase, primarily because much of the Web technology that enables Web 2.0 has always existed in the Internet/WWW infrastructure.

The common denominator for all Web 2.0 definitions is the Web as a platform. The vast permutations of Web 2.0 can be traced back to what type of platform is being implemented:
- personal opinion (blogs)
- personal networking (LinkedIn or Facebook)
- video (YouTube or Hulu)
- photography (FlickR)


Web 2.0 transforms the Web from a one-way "pull" technology to a two-way "push and pull" platform. In the early days of the Web, information was maintained on Web servers and "pulled" by Web browsers for viewer consumption. Web users were consumers for the majority of content on the Web.
With Web 2.0, viewers can still pull information from Web servers, but can also "push" personalized information onto the Web (i.e. with Web 2.0, users are information consumers and information producers). This subtle difference opens up a broad range of collaborative, personalized and localized possibilities, including applications/services that are Web-based instead of hard drive-based.

However, some problems accompany the Web 2.0 movement towards collaboration and user-generated content. Attention must be paid to copyright/intellectual property laws and security loopholes, especially when personal information moves online.

Microblogging is a primary example of Web 2.0's highly personal "push and pull" technology. Specifically, the microblogging capabilities available at www.twitter.com. Twitter is a free social networking and microblogging service that allows its users to send and read other users' updates (otherwise known as tweets), which are text-based posts of up to 140 characters in length.

Updates are displayed on the user's profile page and delivered to other users who have signed up to receive them.
Another hallmark of Web 2.0 collaboration is open APIs, which allow applications to hook into other Web services. The Twitter API is generally available to the development community.

Although some folks may find the mundane everyday tasks of others mind-numbing and dull, Twitter claims to have over 3,200,000 accounts registered as of October 2008.

Social Bookmarking

This post is about social bookmarking, which is typically done via a Web site such as www.delicious.com.


Social bookmarking is a democratic taxonomy that allows the community to peer review the content of the Web. As with all democracies and systems built from the ground up, the system only works when participants cooperate and adhere to an understood set of rules.

For example, the term folksonomy is often used to refer to the tagging that powers social bookmarking/social networking Web sites. As the name suggests, average "folks" are responsible for creating the tags. If done correctly where a spirit of cooperation prevails, content is tagged properly and users can rely on tags to easily navigate and search through online content (photos (as in FlickR or SmugMug), Web sites (as in delicious) or personal content (as in Facebook or MySpace) etc.). If meaningful tags are consistently applied to content, key words can be used to search for relevant content (e.g. I may search FlickR for the "NewJersey" tag to find New Jersey-related photos).

If the content is tagged improperly or certain posters do not follow a set of agreed-upon rules, a certain sense of chaos ensues, where key words or tag classifications often steer users to content that has nothing to do with the search parameters. For example, unscrupulous photo posters, who hope to drive traffic to their Web site or advertise a product, may recognize that New Jersey is a densely populated state and therefore a much-used tag among FlickR users. These unscrupulous posters, who have no direct interest in New Jersey, may violate the agreed-upon rules by improperly applying the "New Jersey" tag to a photo or two of the product they hope to adversite. If this subterfuge and misapplication of tags is done on a large scale, the tagging system and metadata of a social bookmark/networking site lose effectiveness.


My Social Bookmarks

I have created an account on the delicious social bookmarking Web site; here are the specifics for my account:




For my delicious account, I have included a number of Web sites that directly relate either to my day-to-day job responsibilities or my MS-PTC coursework. I have included links to sites about usability, FrameScript, style manuals and technical writing blogs. I check in with these sites several times a week to track technical communication/usability trends and stay informed about cutting edge technical communication concepts. I included a bookmark to an excellent XML tutorial that I hope to complete this year.


Advantages of Social Bookmarking

Much like Wikis, social bookmarking sites are especially helpful for professionals who work in collaborative environments. For example, if I'm part of a particular project development team at work and I'm responsible for developing training or editing technical material, I may develop a list of bookmarks to supplement my training or editing lessons. I can point other team members to my social bookmarking account to help them hone their editing skills and hopefully reduce my workload.

On the other hand, tech-savvy SMEs can develop social bookmarking sites that provide links to technical concepts that may help me write documentation. For example, instead of having an SME take valuable time to explain Python or Pearl programming concepts to me, the SME could point me to a social bookmarking site that contains links to useful Web sites about Pearl or Python. This would reduce the burden on the SMEs.

Data visualization

Here is a rough animation I put together to explain MP3 compression. I originally intended to use Flash, but trial versions are no longer available. Instead, I settled for a series of graphics strung together via SnagIT screen video recording.

Customized typefaces

In today's global marketplace, large companies require a consistent approach to the marketing and branding of their products. This is especially true for large technology companies (computer hardware and software manufacturers) that often have product lines and corporate offices that span multiple continents. The marketing and technical support teams at such large technology companies have a vested interest in ensuring the marketing collateral/technical specifications that the Bangalore office presents to Indian customers is identical to the marketing collateral/technical specifications that the San Jose office presents to American customers. Obviously the technical aspects should be identical, but the look and feel of the information (e.g. typeface, layout and color schemes) should also be identical. Consistent presentation of information to customers is a key aspect of global product branding. This consistency presents a uniform, united face to customers and reassures customers that even though multiple geographic locations may contribute to the development of a product, all locations are working together with a singular vision.

A critical, but often overlooked aspect of brand consistency is typeface. Brand consultants often note that a typeface for customer collateral (advertising, Web page, marketing, technical specifications, user documentation) should nicely complement the product and be rolled out in a consistent manner. For example, Intel migrated all of its online and hardcopy marketing information to the sleek, Web-friendly Verdana typeface in 2006.

In an effort to standout among the millions of products in today's marketplace, an interesting typographic trend is accompanying the branding recommendations described in the previous paragraph: customized typeface design.

Many companies with generous marketing budgets are not satisfied with standard market typefaces, such as Times New Roman, Helvetica or Arial. Instead, they are turning to small-scale designers for custom typefaces. Custom typefaces provide a distinct visual element for a company and its products. Companies work with the design house to develop a unique typeface family. Afterwards, the company rolls out the typeface for all publications, internal reports, office documents, signages and advertisements to complement their corporate identity.

A Google search for 'customized fonts' turns up two popular typeface design companies:

• The Ascender Corporation, which has designed custom fonts for Microsoft, Agilent and LexMark
  
• Porchez Typofonderie, which is a French design studio that has developed custom fonts for a variety of companies.

Some examples of customized fonts developed by Ascender and Porchez Typofonderie appear below:

The Lexmark family was developed by Ascender and ties together the wide range of Lexmark products from the web to product packaging:

Mencken Head was exclusively developed by Porchez Typofonderie for the Baltimore Sun Newspaper. The objective was to couple a unique flavor with clarity for headlines and article text:

Typeface - Highway Gothic

One of the most challenging aspects of any design or documentation project is choosing the typefaces. The goals of the project and the target audience must be kept in mind to ensure that the chosen typeface nicely complements the design. For example, the monospace courier typeface, which was designed to simulate the output from a typewriter and is perfect for sample code in an API document, would probably not be an ideal choice for formal invitations. The spacing is too bulky.

Brand-savvy companies often allocate large sums of money to ensure that logos and marketing collateral use a typeface that promotes the company's vision. Technology companies often rely on sleek, futuristic typefaces while traditional companies (e.g. financial and newspaper companies) often rely on exquisite flowing typefaces.

The Federal Transportation Authority, which also spends a considerable amount of money on typeface, must account for more than aesthetic concerns. Safety and readability are primary concerns for transportation officials. This is especially true for the typeface that adorns most of the signs along the United States Interstate Highway System, Highway Gothic. Highway Gothic is a sans serif typeface that was designed for optimal legibility at long distances and great speeds.

This post examines the legibility, readability and "personality" of the Highway Gothic Series E-Modified typeface, which has been used on U.S. Interstate signs for 50+ years. An example of the typeface appears below:



Legibility

A good rule of thumb for determining the legibility of a typeface is to cover the top or bottom half of a word or sentence. If the word or sentence can be easily read by just looking at half of the letters, then the typeface is likely to be perceived as legible. Highway Gothic passes this legibility test. The substantial x-height (height of a typeface's lowercase x) of Highway Gothic coupled with its symmetrical, sharp lines for "straight-line letters" (A,E,F,H,I,K,L,M,N,T,V,W,X,Y,Z) ensure that all letters are easily recognized.

Readability

Readability refers to how easily a line of text can be read. Because Highway Gothic is proportional instead of monospace, the natural appearance and flow of the typeface results in high readability scores. The space between letters ensures that words can be read at great distances. The space within letters, especially the round portions of the "curved-line letters" (B,C,D,G,J,O,P,Q,R,S,U), is generous enough to avoid a sense of constriction or tightness. Also, the generous height of the ascender, which is the distance that letters extend beyond the x-height, has a positive impact on readability.

Personality

Obviously the U.S. Federal Transportation Authority does not randomly select the typeface for road signs of the interstate highway system. For safety purposes, readability in difficult situations (night time driving, fog, rain etc.) was incredibly important. Multiple typefaces were tested, but Highway Gothic was the best fit (although Clearview is slowly replacing Highway Gothic on road signs throughout the U.S Interstate system).

I think the personality of Highway Gothic is conducive to the goals of the U.S. Interstate road signs. The primary goal of the typeface is to relate information (e.g. looking for Trenton? Use exit 42 in ¼ mile), not to appeal to the aesthetics of the reader. I think the clear lines of Highway Gothic emphasize its practical nature. The typeface is straightforward and utilitarian (or workmanlike, if you prefer), not flowing and pretentious.

Independent Bloggers

Hardcopy media, such as magazines and newspapers, require long lead times for formatting and printing. Even though digital publishing solutions have made processes more efficient, daily newspapers require large-scale printing cycles. The print cycles ensure that newspapers will always report yesterday’s news. However, long lead times are partially beneficial. They allow a wide spectrum of content contributors. Reporters write and submit a story, which is then run through a variety of ‘quality control’ stations (editor, proofreader, fact checker etc.) before finally being submitted to a formatter, who finds a home for the story in the pages before printing.

Newspapers have suffered a precipitous drop in revenue throughout the 21st century, primarily because hardcopy delivery mechanisms have been supplanted by the immediacy of online content, including Web sites and the blogs. Although the instantaneous nature of blogs meets the needs of today’s 24-hour news cycle, many individual bloggers are essentially one-person publishing departments. For independent blog owners, many of the content development and ‘quality control’ responsibilities are theirs alone. Independent bloggers are arguably responsible for the following roles:

• Researcher
• Author
• Editorial/opinion
• Editor
• Ombudsman
• Legal/copyright
• Photographer/illustrator
• Graphic designer
• Web programmer

This post describes how independent bloggers take on each role listed above and compares how the blogger’s responsibilities differ from someone else doing the job in a more traditional setting (e.g. a daily newspaper).

Researcher

As with any media that is intended to be consumed either by the general public or a specific subset of the population, valid and reliable information is paramount. The media’s content must have foundation that is based on sound research. In a traditional newspaper setting, staff reporters may rely on interns or stringers to research pertinent information for a story. The reporters then combine that information with their unique style to generate stories. Independent bloggers, who should ideally adhere to the same standards for information, must perform their own research.
Most newspapers have strict policies for conducting research. If the facts of a newspaper story are incorrect, most papers issue post-publication corrections or retractions. Although independent bloggers strive for accurate research, blogs are not help up to the same editorial standards as newspapers. Errors or incorrect information in blogs is rarely retracted, perhaps due to the rapid pace and turnover of blog posts.

Author

In addition to gathering content for a story through independent research, independent bloggers are the sole authors of content that is posted on their site. In order to avoid plagiarism charges, independent bloggers must accurately cite sources or develop original material. Research is often not enough, bloggers must have the ability to distill information into coherent content that is easily digested and understood by readers. In a newspaper environment, authors often collaborate on a story and share the byline when the story appears in the paper. In independent blogs, original content is written by the blogger.

Editorial/Opinion

The blogosphere is often labeled as a democratic voice that stands in opposition to the corporate, shareholder mentality of mainstream media. In other words, blogs give each member of society a platform to voice their opinion and editorialize about almost anything. In order to be well-regarded, blogs must have valid opinions that are backed by facts. The interpretation of facts often causes friction in both the blogosphere and society. Newspapers also publish opinions, but opinion pieces are usually attributed to editorial boards. Editorial boards are groups of editors who dictate the tone and direction of a newspaper’s editorials. Independent bloggers must determine the tone and direction of the opinions expressed on their site. Also, bloggers must ensure that the opinions are backed by a valid interpretation of facts.

Editor

Newspapers often employ editorial staffs to perform content and copy edits on stories before the stories are printed. After an independent blogger writes original content, he or she must edit the material. Writing and editing the same content is often difficult, as I’ve learned from my technical writing career. After content is written, a fresh perspective is often needed to catch typos or formatting/mechanical errors. Independent bloggers do not enjoy the luxury of editorial staffs; they must monitor their own work for errors.

Ombudsman

Many newspapers employ an ombudsman, whose only responsibility is to represent the interests of the public by investigating and addressing complaints against the newspaper. These complaints are typically reported by individual readers. Although one could argue that the nature of an independent blog grants the blog immunity from community complaints, any responsible blogger should take steps to recognize such complaints. What, if anything, is done in reaction to the complaints is at the discretion of the blogger. For example, if a reader complains that a blog post is inappropriate for children, the blogger must act as an ombudsman to first determine if the complaint is valid and second, decide whether or not to delete the offending post.

Legal/Copyright

In today’s era of digital media and litigiousness, strong copyright laws protect the intellectual property of companies and individuals. Corporations, especially in highly technical industries, fiercely protect their intellectual property and confidential data. Corporations, including newspapers, are equipped with well-paid legal teams that monitor the Web for potential copyright violations. If independent bloggers wish to use images or ideas that have been downloaded or copied from the Web, then they must ensure that the images or ideas have not been copyrighted. Copyright violations that lead to litigation, though they rarely occur against independent blogs, can be costly for blog owners.

Photographer/Illustrator

Many blogs incorporate images or graphics to enhance visual appeal. Independent bloggers may rely on public domain images to populate their blogs, but they’ll have to take great care to avoid copyright issues. As an alternative, many bloggers prefer to post original photographs and illustrations on their blog. Thus we may add another facet to independent blogger responsibilities, photographer and/or illustrator.

Graphic or User Interface Designer

Corporate Web sites have large staffs of graphic designers, who dictate the look and navigation scheme of a Web site. Graphic designers may collaborate on the layout, color palette, and overall usability of a Web site. Many of these designers are specially trained in color schemas or usability, leading to visually appealing, expertly designed Web interfaces. Again, independent bloggers singularly decide on their blog’s color scheme and general layout. A blog may contain some informative content that is relevant to a large number of potential readers, but still fail if it is poorly designed.

Web Programmer

The HTML code, Content Management System and software that power most blogs will eventually have problems. The problems may be limited to certain browsers or scripting environments, but software issues will certainly appear throughout the lifetime of a blog. Independent bloggers do not have an IT staff to troubleshoot problems when they appear. Instead, bloggers must spend their own time isolating and fixing the issue to avoid blog downtime.

Video Design

Video provides designers with the opportunity to showcase a variety of visual design principles. Static media (such as single-frame digital images, painting, photography etc.) also allows designers to couple images with design principles, but the dynamic, multi-frame nature of video allows the principles to be combined in a variety of unique combinations throughout a single work.

This post will explore the design principles present in the "The Hoaxer's Door" video, which is embedded below:




My first impression of the video is tied to the typography and background, which nicely complements the theme of the video. The theme centers around a secretive hoaxer, who repeatedly reports phony emergencies to 999 (England's 911 equivalent). The calls are placed purely for entertainment value, as the hoaxer delights in covertly watching police, firemen and ambulance crews respond to his phantom emergencies. The hoaxer's anonymity is a critical aspect of the video's theme. The typography, texture and background color of the video reflect this anonymous, secretive theme. The mismatched/random font style and size, along with the stark white background and black vertical margins, bear a striking similarity to the stereotypical ransom notes that appear in movies (e.g. each character in the letter is individually cut from a magazine source and pasted onto a piece of paper to form a letter from an anonymous, untraceable author).

Despite the mismatched font sizes, which typically result in text that is difficult to read, the content is surprisingly readable. I attribute this to the rhythm of the video. As the video runs, some of the text appears one letter at a time while other text appears simultaneously as entire blocks of content. However, the intervals between frame changes and lack of background noise (e.g. the focal point of the video is always the text) creates an agreeable rhythm that allows the reader's eye to quickly scan and process the text.

The video uses words (and only words) to tell a story; text is the primary vehicle of the video, so the video is not cluttered with unnecessary images that would draw the viewers eye away from the text. Also, the color scheme is consistent. Color is used to enhance readability rather than distract from it. Black text on a white background is used throughout the video, but the use of color behind certain letters provides a nice aesthetic contrast.

The video is unified by a simple design, with text at the foreground and judicious use of white space providing a simple background in each frame. Again, this nicely complements the text-based focal point of the video.

Target Audience Ages and Website Design

Web design collateral often emphasizes that an audience analysis is a critical first step when developing or re-designing a Web site. Designers may plan, develop, and implement an elegant site, but the site may not draw traffic or founder if it does not satisfy the needs of its target audience. Audience analysis ensures that Web designers fully account for the goals of the site and select a layout/style that caters to the target audience.

Audience analyses are typically produced as part of the Web development process, but this post will perform a partial audience analysis on two existing Web sites. The analysis will focus on the age of the site’s target audience.

• http://www.noggin.com/ is the Web site for the Noggin cable television channel. Noggin concentrates on preschool programs and features original series. The target audience for the Noggin Web site is young children.
• http://www.guinness.com/ is the Web site for Guinness beer, which is a dry stout brewed in Dublin, Ireland. The target audience for the Guinness Web site is adults who are of legal drinking age (21+ in the United States).
  

www.noggin.com

The site also shows evidence that certain pedagogical concepts were incorporated into the design, such as visual and auditory learning. The visual layout of the Noggin site is certainly tailored to the target audience. A pastel color scheme with large fonts and graphics immediately grabs the attention of young children. Young children do not have fully-developed attention spans, so Web sites that target them should not include long paragraphs of text. Instead, movement and activity maintain the interest of young children. The Noggin site correctly favors playful graphics over text. Most of the graphics are animated on mouse-over, which adds an element of interactivity. In addition to visually appealing graphics, the site offers audio clips. When users drag the mouse over the character graphics, the characters “speak” to the users. Although the ideal learning situation for many young children is kinesthetic/tactile (see the popularity of Play-Doh and finger painting), such interactions are not possible on the majority of computers (discounting touch screens). Instead, the site does a great job of providing the type of audio and visual interaction that children enjoy.

The screenshot below includes some text boxes (left side in black font) and pointers (red arrows) that show the auditory and visual features of the Noggin homepage:





Since the Noggin site is for a revenue-generating television station, a valid observation is that the goal of the site is not truly educational. The goal of the site is to promote the Noggin brand and the characters that appear on the channel’s programs. The goal of users, most of whom navigate to the site with the help of their parents, nicely complements the goals of the site (e.g. most users want to see and learn more about the characters from their favorite Noggin programs).
I do think that cultural aspects play a large role in how the Noggin site is perceived by users, primarily because the Noggin channel is based in the U.S. Children from other countries, where televised entertainment perhaps does not play a prominent role in their lives, may enjoy the site, but would lack a reference point for the content.




www.guinness.com

The Web site for Guinness beer is restricted to adult audiences (or at least to adults who are of legal drinking age). This restriction is designed into the site’s initial page. The initial page includes an age check to (supposedly) ensure that users can legally purchase alcohol. Because the site must consider international users where legal drinking ages vary, a country-specific drop down box is provided. See the screenshot below:






Most users visit the site to learn about the history of Guinness, view special promotions or purchase merchandise. The target audience, as with most alcohol advertising, is young people between the ages of 21-35, depending on legal drinking age. When the site does attempt to convey information, it uses learning styles that complement the target demographic. Flashy graphics and visuals are favored over text. The layout and color scheme of the site is very modern and sleek, including a nifty interactive timeline about the history of Guinness beer (see screenshot below). Clearly, the site favors the visual over the verbal.







The roles and goals of potential users are fairly straightforward. Users are interested in learning more about the product promoted by the Web site. A certain number of users visit the site to purchase Guinness merchandise. The site does a reasonable job of accommodating shoppers, but merchandise is not the focal point of the site. If the site designers wanted to sell more merchandise, they could include prominent pictures of the merchandise on each page of the site. Instead, merchandise marketing is relegated to specific pages only.

Corporate Blogs

The generic term ‘corporation’ often gets a bum rap. When the term is preceded by a modifier, such as Campbell Soup Corporation or Adidas Corporation, people naturally project their thoughts and opinions (positive or negative) away from the term itself and towards the product that the corporation produces (e.g. “Campbell makes tasty, but salty, soups” or “Adidas makes comfortable sneakers”). Right or wrong, the standalone term ‘corporation’ is often vilified in pop culture as a litigious, profit-driven entity whose concerns do not extend beyond shareholders to the average citizen. Even Teddy Roosevelt noted that:

"Corporate cunning has developed faster than the laws of the nation and state. Corporations have found ways to steal long before we have found that they were susceptible to punishment for theft."
-Teddy Roosevelt in the New Haven Register 1909.

In a small-scale effort to modify public perception, many corporations are embracing blogs. Blogs provide an accessible face to corporations that are often viewed as faceless and impenetrable to outsiders (the reflective, black panel skyscrapers that house many corporate headquarters don’t help). Corporations are finding that blogs provide an immediate communication path between employees and customers, resulting in usable feedback from both sides. However, in order to maximize return on investment, corporations must employ a well-designed blogging strategy.
This post will leave descriptions of blogging strategies to the experts and consultants; instead the post will examine two existing corporate blogs (Intel and Turkey Hill Farms).

Intel
(http://blogs.intel.com/)

A Google search reports that Intel supports many blogs. http://blogs.intel.com/ is one of many sites that targets Intel’s vast customer base, with special bloggers who write for small, specialized audiences. Each post is tagged according to content, allowing readers to subscribe only to posts that interest them. For example, several of the posts carry the ‘multicore’ tag, which informs readers and subscribers that the contents of the post involves multicore processor technology.

According to the ‘About this Blog’ description page (http://blogs.intel.com/about), the page is a portal for several blogs that are authored by researchers and technology experts who share their opinions on industry trends and invite feedback from customers with questions about Intel technology.

Length of entries varies, but most posts are between 100-300 words. Posts are succinct, but long enough to explain concepts. Various studies show the most successful corporate blogs include postings that are not too verbose. Epic posts are rarely well-received by readers of corporate blogs.

The blog is easy to read and navigate due to an efficient use of white space, clean lines and readable fonts (Verdana, I think). The blog employs a consistent navigation bar, a search box and timestamps for each posting. A separate text box highlights the most popular posts (based on the number of comments).

The blog projects an overall corporate image of efficiency and clean design, perhaps due to the visually appealing, consistent use of colors along with judicious use of graphics. The intent of the blog is to facilitate dialogue between Intel employees and customers. The exchange of information is text-based and the blog designers did a nice job recognizing this and not cluttering the page with unnecessary graphics and avatars.


Turkey Hill Farms
(http://icecreamjournal.turkeyhill.com/)

The intended audience for the Turkey Hill blog is ice cream lovers, not necessarily those who are completely loyal to the Turkey Hill brand. In addition to plenty of marketing content about Turkey Hill, the site also includes some general interest content about how ice cream is produced.

The stated goal of the blog is to gather a collection of whimsical thoughts and stories about ice cream, particularly the Turkey Hill brand of ice cream. Turkey Hill Farms is located in Lancaster County, Pennsylvania. The blog also promotes Lancaster County tourism, including attractions other than the tour of Turkey Hill farm.

The site encourages comments on each post and often prints email responses to posted stories. The site must draw a surprising amount of traffic, as many of the posts include between 20 and 100 comments (“I scream, you scream, we all scream for ice cream” indeed). Episodic posts also include information about how ice cream is made, including Q+A sessions with a Turkey Hill food scientist where readers supply the Qs and the scientist supplies the As.

The average blog entry is 2 or 3 short, easily digestible paragraphs. The goal of the blog is to promote Turkey Hill ice cream in consumer-friendly ways. I think the site is a nice mix of lighthearted posts and interactive polls.

The design uses a clean, organized layout. Many of the posts are supplemented by cartoonish graphics and photographs of ice cream, which enhance the blog’s theme. Navigation through current and archived posts is easy, as are contact links for Turkey Hill farms. An interesting link of other ice cream blogs is a nice feature.

The site projects an overall corporate image of family friendliness and responsibility. Questions may be submitted and seem to be answered in a reasonable amount of time, showing that Turkey Hill Farms has invested the staff and capital required to maintain an active blog.

Launch - September 2008

Greetings from the first post to the Tamarack Tee Technical Writing blog!

The blog will contain original posts about technical communication and elements of visual design, including typography, color theory, user interface design etc. I will also post some FrameMaker or FrameScript topics, as I am currently designing FrameMaker templates in support of an upcoming product launch.

That's all for now.