Content | Bright Matrices

Category: Content

Some Helpful Advice from a Nitpicky Web Developer

Ever heard the phrase “the devil’s in the details?” I’m here to tell you it’s true!

For every clean, elegant, and professionally designed website or web application, there are droves of slipshod, sloppy, or just plain lazy pieces of code I encounter every week. What pains me most is that many of these quirks are really simple to fix and can go a long way to adding to your reputation and credibility.

I’ve put together six examples of detail work that you should include in your digital design and development. These suggestions may seem nitpicky, but as a professional web developer who’s been coding and designing websites for over a decade, these “fit-and-finish” items are the ones that always jump out at me when browsing a site or web application.

1. Display Current Copyright Dates

Most websites these days have copyright dates in their footers, usually followed by the formal name of the company or organization and legal text such as “all rights reserved.” Make sure the year displayed here actually matches the current year! Nothing says “out of date” like a mismatched copyright year. This is especially glaring following New Year’s Day. Scripting languages such as ColdFusion, JSP, PHP, and JavaScript can easily handle dynamic dates, as can content management systems.

2. Match Link Names and Page Titles/Document Names

Your users want to get to your content as easily and quickly as possible, so don’t make the process more complicated or confusing by using mismatched names in your website links. Make sure the language you’re using in the link text is a good match, if not exact, to the document or resource at the other end. You want your users to be confident that what they clicked on is what they needed. And please, avoid acronyms or business jargon! Simple language is best.

3. Use Accurate Singular/Plural Descriptors

This is one of my personal pet peeves: if you’re going to display a list of items, show a group of updates, or otherwise show a collection of objects dynamically, always add a condition in your code to change the descriptors from plural to singular when there’s only one item. I can’t stand to see phrases like “1 search results found” or “1 new tweets.”

4. Link Banner Graphics Back to the Home Page

Users have come to expect that clicking on the website’s banner or logo will take them back to the main page of the site. Make sure your banner is linked this way so users won’t get frustrated, or, at the very least, give them an obvious way to get there using a “Home” link or icon (a house is typical). For mobile applications, a “Home” icon in the contextual menu can help solve this problem.

5. Use Clear and Distinct Timestamps

If you’re managing a news website, blog, or any site or application that has time-specific or time-sensitive content, always show the publication date or the “last update” and make sure it’s easy to locate. This is especially important for users arriving at your site from search engines; they’ll want to know that the content you’re providing is the most current or up-to-date for their needs. I personally prefer to see timestamps right below the headline/byline, or, if that’s not possible, at the bottom of the article before any comments.

6. Make Your Social Channels Prominent or Easy-To-Find

Is your organization or corporation on Twitter, Facebook, or YouTube? That’s great, but don’t curtail your efforts by burying the channels in your “Contact Us” or “Resources” pages. If you’re actively using these channels, place social icons in prominent locations, such as the header (near the search box is a great spot for visibility) or anywhere where other contact information, such as phone numbers, is displayed.

What Advice Do You Have?

What about you, my faithful visitors? What common mistakes or omissions do you come across in your browsing that you would suggest as improvements to the site’s owners and developers? Share your recommendations in the comments below.

Where Users Fear to Tread? On the Heels of Great Footers

May 16, 2011 / brightmatrix / 0 Comments

Of all the elements in a modern website, the footer is probably the least appreciated. Users have come to expect basic contact information, privacy policies, and other legal-oriented details to live in the footer, but that doesn’t mean footer designs need to be dull collections of links or tiring repeats of the main navigation. Done well, footers can be helpful, informative, and even mischievous elements in a website’s overall visual design.

In this post, I cite four examples of well-crafted and thought-out footers I’ve come across, leaving room to expand the list as I discover other fine specimens. Of course, suggestions are welcome!

1. Marketwire

Marketwire is a Canadian communications corporation that offers unique solutions to help organizations listen, monitor, analyze, measure, and connect with their audiences in both traditional media and “new media” channels. Their suite of tools and dashboards allow their clients to gather valuable insights into their customers and competitors and make actionable results to increase their value, influence, and reputation.

Marketwire chose to let their website’s main content sections do the talking, so the footer is tasked to show essential contact information with a few informative links. The sweeping gray stripe offers a clear separation from the main content and neatly caps off the overall design. Critical touchpoints, national and international phone numbers and social media channels, are presented in a clean and prominent fashion. Large, colorful social media icons pop nicely off the monochrome background and into focus.

This is a simple but effective design that gets straight to the point and doesn’t leave current or potential customers wondering where to go next.

2. Federal Reserve Bank of Kansas City

The Federal Reserve Bank of Kansas City is one of the twelve banks that make up the Federal Reserve System, the central bank of the United States (Disclosure: I work for the Federal Reserve Bank of Philadelphia, part of the Federal Reserve System). Alongside their dual mandate of monetary policy and bank supervision, the Federal Reserve Banks promote community development in their districts, enrich financial literacy among the public, and publish research data and documents on a wide array of economic topics.

The Kansas City Fed’s footer displays their site’s major website categories, a listing echoed in the top navigation. These categories, however, are shown in alphabetical order vs. the more topical choices in the top navigation, and surface the next level of content to help users find what they’re seeking. All titles are short (no more than four words) to ease scanning.

Bold category headings stand out nicely and draw the eye to key starting points. Common footer elements, such as a link back to the home page, contact information, privacy policy, and FAQs, are centered and offset from the primary and secondary categories to be easily discovered. The bank’s address and phone number have a third distinct style to complete the typography in the banner and headings. Seals at the top and bottom of the footer provide nice visual breaks.

Most Americans aren’t familiar with the inner workings of the Fed and can get lost amidst the vast amount of online content they offer. The Kansas City Fed’s footer delivers a lot of options, but does so in a roomy, clear presentation that can help ease information overload.

3. Wall Street Journal

One of the most recognized news publications in the United States, the Wall Street Journal delivers a staggering array of financial, national, and international news to its readers.

Offset in tones of deepening gray with ice blue links, the five columns of links in the WSJ’s footer are easily scanned and digested despite the fineness of the font size. The reversed contract color scheme is easy to read and distinct from the otherwise busy conglomeration of content in the main section of the site. As with the Kansas City Fed’s footer, key sections are in boldface. The WSJ’s RSS feed and social media links are embedded with small icons whose colors help them to stand out in the crowd. Alternate editions of the WSJ are collected together in the rightmost column and ruled off with a thin, dashed white border.

With nearly 100 links to various content pieces throughout the WSJ’s digital empire, the footer possesses a clean and pleasing design that gives a great overview of the wealth of available information.

4. ThinkGeek

A veritable gold mine of geeky goodness, ThinkGeek is a Fairfax, Virginia-based company specializing in collectables, apparel, games, and all manner of merchandise appealing to the geek in all of us. ThinkGeek is well known for its infectious creativity, whimsical demeanor, inventive products, and outrageous April’s Fool fake-outs.

ThinkGeek’s footer is another clean arrangement of major site categories divided into easily scannable lists. Bold, bright color gradients give richness and depth without sacrificing readability. Timmy, the impish monkey mascot of ThinkGeek, directs your attention to the company’s Twitter stream, videos, and blog from his vantage point at the footer’s left edge. Random “customer action shots” offer additional bursts of fun, user-contributed content that keep the experience fresh.

Best of all, the scene of rampaging robots that grace the bottom of each page turns into a mob of marauding zombies upon reaching the footer. It’s a subtle touch, but an extra bit of awesomeness to reward users for adventuring this far below the fold.

Document Metadata, SERPs, and First Impressions: Check Your File Data for Improved Results

April 19, 2011 / brightmatrix / 1 Comment

I’m sure you’ve found yourself in this situation before: you turn to search engines like Google or Bing to research a topic and come across rather obscure-looking titles or unhelpful descriptions embedded in the results pages. They could look something like this:

What is this stuff, and why is it in your results?

The Origins of Document Metadata

What you’re seeing is called “document metadata,” and it is automatically included in programs such as Microsoft Office. Metadata typically consists of the document’s author and a title. Unless you or your IT staff has customized your program’s settings, the values for these items are usually generated from your login name and the first line of text in your document.

You probably won’t notice document metadata if you pass files back-and-forth through e-mail, but it becomes both visible and vital if these files are posted to the web or internal, web-based collaboration tools within your organization.

Why should you pay attention to metadata?

The Importance of Document Metadata

Correct and valid document metadata can go to great lengths to:

Improve the user’s experience. The online content your organization publishes will be difficult for users to identify if it comes up with the title “Chapter1.doc” in the results. This goes for both the search engines themselves as well as your own website’s search engine.
Boost your visibility in search engine result pages (SERPs). Adding relevant keywords to the title, author, and description of your documents can push these items up in SERP rankings.
Reduce the chances of releasing internal or sensitive data to the public. The default settings for your documents’ metadata could include non-public, potentially sensitive, or personally identifiable information such as user names, contact information, and server or network names, among other details. Errant metadata could violate legal disclosure agreements or give social engineers valuable clues into the nature of your internal network.

Microsoft has a helpful article that shows you how to find and update (or remove) metadata in your documents. Metadata is also passed along when you create PDFs from your office application, so you should take care of your data at the source.

Document Properties and First Impressions

Another tip that may help, especially when creating PDFs, is changing some of “initial view” settings in the document properties. These settings determine how the PDF will appear whenever the user opens the document in the browser or their desktop.

I personally prefer the following defaults in Adobe Acrobat:

These settings guarantee that the user sees most, if not all, of the first page in their screen instead of a part of a graphic, magnified text, or, worse, nothing at all … which can happen if the top half of your opening page is blank (for example, if you break print publications into article PDFs without cover pages). Showing the document title helps when the file is open on user’s desktop: if they have more than one window open, the title can help them distinguish between it and files in other open windows.

Social Authority in Search Results and Lessons from the Past

December 11, 2010 / brightmatrix / 2 Comments

I read a very interesting article on Mark Schaefer’s blog {Grow} today that discussed some relatively new topics in the search world: “social scoring” and “social authority.” He cited excerpts from interviews with Google and Bing that explain how both search firms are considering changes to their algorithms to account for the influence of content authors.

The concept of “social authority” is a sea change in how online content is indexed and discovered. With the rise of user-contributed content over the past few years, the fact that Google and Bing are giving more credence to this medium is, to me, a logical outcome. We’ve already borne witness to real-time search results appearing in our queries; calculating the weight of one’s social authority is merely the next step.

Reading through the comments, however, this trend doesn’t seem to sit well with folks.

Is social authority going to be gamed? Of course it will. One of the reasons the phrase “search engine optimization” still tastes funny in many mouths is due to “black hat SEO” that used sneaky and misleading techniques to propel biased or unrelated content to the top of search engine rankings. Google’s Page Rank, once considered a key metric in figuring out the overall importance and relevance of your online real estate, has pretty much fallen off the radar due to numerous attempts to exploit the algorithm.

Social authority doesn’t have to be scary. What needs to happen to prevent a dark future for this concept is twofold.

Google, Bing, and other search entities need to be relentlessly proactive in how they integrate social authority into their results. I expect results that incorporate author authority to improve steadily over time as the search firms gather more data on the authors, their influence (including how that influence is generated and calculated), and the nature of their publishing platforms (Twitter, Facebook, blogs, etc.). Evolution of search algorithms needs to be intelligent enough and sophisticated enough that the relevant content “naturally” rises to the top.

Content authors need to come clean and stay that way. We all witnessed how black hat SEO came to ruin the party for those who genuinely and continuously thought about how to get the right content in front of the right viewers. We have to heed the lessons of the past and do things right this time around. Authors must be counseled on how to continue to create excellent content, in the proper medium, in the proper context. They must understand that silver bullets do not exist and that cutting corners will come back to bite them in the end.

Let’s fight hard to prevent “social authority” and “social scoring” from becoming the next four-letter words in the content world.

Notes From Edward Tufte’s “Presenting Data and Information” Course

August 4, 2010 / brightmatrix / 0 Comments

On July 28, 2009, I attended Edward Tufte’s “Presenting Data and Information” course in Philadelphia. Tufte is well respected for his expertise in data visualization and equally renowned for his complete disdain of PowerPoint as a communications tool.

I recently came across a page-and-a-half of handwritten notes I had taken during the lecture and wanted to share what I recorded. Below are elaborations on these notes.

Begin with the content by asking the question: “how can something be explained?” Be guided by the task. Don’t choose the mode of presentation in advance: it’s not about pre-specifying the dataset or methodology.
The character of relationships between elements is just as vital as the elements themselves. Provide “reasons to believe”.
Use causality thinking: which properties effect and govern the cause.
Annotate everything: annotation is the heart of explanation. Annotations reside in the background. They are subtle, but clear and help avoid optical clutter. Annotating “linking lines” adds credibility and texture to causal links.
Use tables; don’t be afraid of them. People read huge tables all the time: think sports, weather, market data, etc. “Bring your presentation up to the level of the sports section.”
Replace “chart junk” with evidence (but not selected evidence; avoid being a “cherry picker”).
Supergraphics are interactive: they allow individuals to explore and find what’s important to them and encourage discussion among an audience. Everyone will look at a different section at the same time. Find a really good supergraphic to open your presentation and give it to the audience on handouts.
There is no such thing as information overload: there is only failure of design. Add detail to improve clarity and content. Use more tables than graphics, especially for smaller numbers.
PowerPoint is “a corrupt method of displaying information”. PowerPoint presentations set up a dominance relationship with extreme information denial (“a long and winding road”).
Integrity, relevance, and interest are content properties that design will not correct.
Find good reports and copy them (but have good taste); “stay out of the design business. Don’t get it original; get it right”.
For intellectual models, avoid marketing speak and corporate pitches; you want “non-fiction credibility”.
Use wall charts in project management. Make comparisons over space vs. a sequential series of slides (“stacked in time”).
Letter codes, legends, keys, etc., are impediments to learning. They are not universal, but instead “one-off” creations that are good for only one instance. Get viewers out the decoding business: use direct labels.
There two issues in information design: multivariate problem: the dimensions of data need to be communicated on a two-dimensional display (“flatlands”). Every interesting analytical problem is more than one to two dimensions or factors. Information resolution: A way to measure progress in communication and presentations. Think: what is the rate of information throughput in my presentation?
Use the “brute force” method: build a model by getting a real object in the room.
The segregation of information by modes of production is a conceptual error.
Don’t insult or fail to respect your audience. Maintain intellectual integrity without patronizing. It’s not considered “dumbing down” to remove jargon for dispersal to a larger audience.
Give users the freedom to consume the material how they want.
For the opening screens (home pages) of websites, show off what people can learn there. People are good at scanning: they will scan, then scroll, then click; keep it flat and rich. 90% of every screen, excluding navigation, should be content.
Sparklines reduce “recency bias” by showing changes over a larger span of time.
When giving presentations, remember the following: Work on content. Practice. Show up early. Use handouts and Word documents (never PowerPoint slides). Leave more than one copy of technical reports. Define what the problem is, who cares, and what the solution is.

Here are several key quotes I jotted down during the lecture:

“Do whatever it takes to display something.”
“Document everything and tell people about it.”
“The metaphor is the map.”
“A feature that is buried is not a feature.”
“Talent imitates, but genius steals.”
“The person who heads up web design is a content expert.”

The course was more lecture than seminar, but Tufte kept me interested and engaged throughout the day. A bit prickly in person, he’s nevertheless an excellent presenter. I would highly recommend the course as a “professional development opportunity” (i.e.: training) for those interested in how to present content and data in pretty much any form, not just visual representations. Plus, you get all four of his books to add to your library, which is an excellent take-away… more so than a flash drive or fancy badge clip.

Bright Matrices

Writings & musings of Mike Zavarello (a.k.a. brightmatrix), a "red mage" web developer.