The Back Story
Like many top companies we’ve met, Teck’s website had grown organically in response to comments about the existing site. But this caused the website to come off as unfocused and piecemeal. Though zu was initially brought in to assist with the Investor Relations area, it soon became apparent that a complete re-design would be the most logical and effective tactic.

The Process
In developing a new strategy, we turned to Teck’s offline communication materials. We also integrated elements of President and CEO Don Lindsay’s description of the company when speaking to investors and stakeholders. With these relevant content resources, we created a foundation for a new narrative structure upon which existing materials would be organized.

This structure—combined with existing corporate standards, communication elements highlighted by the IR and web teams, and a dash of zu creative flair—resulted in the clearly focused visual design and hierarchy of materials on the new site. Teck.com emphasizes the core nature and strength of the company—Diversified Mining—paired with its core reality, Responsibility. The site is secondarily a communication vehicle to the stakeholder group, Investors, and this completes the main navigation choices in the site architecture.

zu’s roles included assessment, strategy, design and graphic preparation. Teck supplied subject matter expertise, a wealth of content resources and a programming team to complete the final build on the in-house content management system (CMS). As always, zu provided the complete website production process team and whatever skill elements Teck needed to complete their own team.

The Result
Teck.com: Simple, powerful messaging and visuals crafted for a strategically operated, diversified mining company with unlimited potential. To all involved—good job! And a huge thanks to Greg Keller, Vice President, Investor Relations and Strategic Analysis, and his team at Teck for the opportunity to work together in building a useful and informative IR site.

The essential missing piece is convergent thinking: taking all new ideas, isolating the best, and determining how to apply them. Knowing which ideas are best is where experience and expertise come in. Regardless of what issue is being solved—an aesthetic experience in art or a mechanical problem in engineering—determining the best solution means being aware of the environment in which the problem exists. This includes hard knowledge of concrete environmental factors—what has come before, the limitations of the medium, implementation and recurring costs—and soft knowledge, such as accurately evaluating how different solutions will be perceived by stakeholders and end users. A solution that doesn’t correctly assess the environment is not creative—it’s naïve.

Convergent thinking is why most boardrooms environments fail at generating creativity, since part of the process involves coming up with ideas and quickly discarding some (usually most) as impractical or outright useless. Everyone is more comfortable refining their own ideas than others’. Walking on eggshells around an idea that should be discarded drags on the creative process interminably.

If you want to be more creative, learn more about your problem and your industry. If you are stumped on a web project, then either you don’t know enough about your client’s and their end users’ needs, or you don’t know enough about the possibilities of your toolset. The biggest implication of this is the realization that creativity isn’t about a “spark” as much as it is about hard work. Once you’ve put in the work to understand your problem and its ramifications, the ideas will flow—and they’ll be good.

In the same time period, the physical size of displays has also generally increased but now includes a lot more variety. A decade ago, 15” desktop screens were common, and 20” screens were about the largest in regular use. Today, anything under 19” is uncommon for desktops, with screens ranging up to 30”. But notebooks with smaller screens are everywhere, netbooks with displays even smaller yet abound, and mobile devices proliferate with comparatively tiny screens. Technology solutions have largely helped deal with this disparity, such as the iPhone’s easy zooming feature for web browsing. And with 1024 x 768 as the current default minimum target resolution, it’s really only phones with lower resolutions.

But there’s another, related issue: with the disparity in screen sizes and resolutions comes a compounded variance in pixel density. While a standard desktop 20” widescreen monitor at 1680 x 1050 has a pixel density of 99 pixels per inch, my 15” MacBook Pro running the same resolution is 128PPI. An older 19” CRT at 1024 x 768 is 67PPI, almost half—meaning that elements such as text are physically half as big on the newer screen. And mobile device disparity is even greater: the iPhone 4’s 3.5” display at 640 x 960 is 326PPI.

Designers need to rethink the scales they’ve always used for design. Increasing pixel density means that 10- and 12-pt fonts are basically illegible on many screens. While we’re accustomed to working to the lowest common denominator (for screen resolution), we need to be actively considering higher-end users in terms of pixel density.

One mitigating factor is that most browsers have now adopted the “zoom the entire page” model instead of “make the text larger”, resulting in a better experience for those outliers who we fail with our designs. But relying on technology to compensate for our failure to accommodate our users isn’t a reassuring thought. There is a definite opportunity here for designers focusing on legibility and usability to lead the way on web design trends.

The navigation drives home SIAST’s primary messages of diversity and workplace rewards suited to individuals. The primary needs of site users—viewing current opportunities, and finding SIAST careers—are also addressed at this top level.

With the site as part of SIAST’s “Total Rewards” campaign, the accompanying content was put at the forefront. Integral to the campaign are the stories and testimonials of current employees. Knowing that pages titled “testimonials” get very little traffic (users see them as inauthentic and overly promotional), we instead designed the site’s architecture around providing the stories as a primary part of the site design, available on every page. The implementation keeps the stories close at hand and avoids constantly overwhelming the user with text. Typical user apprehensions over testimonials are lessened by the sincerity of the stories, which focus more on personal growth than on marketing catch-phrases, and are augmented by the photography, which is professional but not polished and uses actual employees rather than unrealistic stock photo models.

SIAST’s stories of Total Rewards have been worked consistently throughout the site, with the diversity of experiences in the testimonials tying in to the overall message. Unlike many corporate careers sites, SIAST has kept the content fresh by adding new testimonials regularly, ensuring that anyone repeatedly checking career postings will see a new story every time.

Common to many institutions, SIAST is tied to an existing careers system that has been outside the scope of the website work to date. Job postings are currently viewed as PDFs, creating problems with searchability and reuse. An eventual reworking of this system will facilitate the spread of job postings to aggregators and allow individual job postings to be dynamically pulled to relevant areas of other SIAST websites.

Ads: The more pages of content you are forced to cycle through, the more ads you are served. This is the reason articles are infuriatingly broken into multiple pages. Good from a business sense, perhaps, but certainly not good for user experience.

Legacy: When people still accessed the Internet with 2,400 baud modems, pages loaded so slowly it made sense to break content into easily downloaded chunks. Once it became ingrained that pagination was good usability, it somehow got lost that average Internet speeds are hundreds of times faster now. If your only reason for breaking content into numbered pages is download speed or tradition, you’re probably better off with the content on one page.

Laziness: Organizing information well can be challenging, and good information architects aren’t easy to find. Templated blogging platforms reinforce this bad usability with their architecture designed to accommodate any content while excelling at none. Far more useful than a link at the end of a post to an “older post” is a list of similar, relevant articles.

Disregard: If a website provides a service no one else does, it can survive for a time ignoring how people actually use their data. If users are trying to compare items in a list, or have the ability to resort tables based on different headings, you probably shouldn’t be paginating.

Scale: Sometimes there is just too much content to architect well, like Google search results, and the effort becomes pushing as much relevant information as possible to the first page. Though the other pages become unnecessary, they are still better ways to present this information, like loading in new content when the user scrolls to the bottom of the screen.  Cooliris is a dramatic display of how much better image searches could be without pagination.

A caveat in conclusion: test with your users.  Pagination may be greatly overused, but it still has its place, so think critically about why you’re using it and evaluate if it really is adding more than it’s detracting from the user experience.

Non-retail companies have a more difficult time determining what merits prominence, or even if information should be segregated. The former depends on the site’s target demographic, and the latter on how much information there is to present.

Well-designed primary navigation not only directs users efficiently to the information they want, but doubles as a sales pitch about the company. For retail sites, it tells the user what kinds of products they’ll find for sale. The primary navigation at CNN immediately tells you what kind of news you’ll find there, and gives you an idea of how important each type of news is to them by order of priority. The primary navigation may not even be a series of choices; Grooveshark presents a simple search bar that encapsulates the purpose of the site.

The difficult part is never deciding what should be primary navigation, it’s cutting out what shouldn’t, which comes down to determining the primary demographic and what their needs are. Of course, that’s easier said than done, and most clients want every possible visitor to be a “primary demographic”, but that’s another discussion entirely. Once a target demographic is known and their needs are identified, there’s still the potential to segregate navigation to primary navigation that informs and markets to the user, and secondary information.

zu has been working with Cameco on the redesign of their website. Many different target demographics were identified (employees, job seekers, regulators, the media, people looking for information about the nuclear industry, and many others), but the primary demographic was narrowed down to investors. The primary navigation specifically targets this demographic with information relevant to them and providing an overview of the company from an investment standpoint. The navigation highlights information specific to investing, shows the range of Cameco’s operations for those only familiar with their mining operations, and makes it clear that marketing the industry and good corporate practices are also top priorities for the company. So what was left out, and how were other demographics accommodated? Generic information about the company was moved to secondary navigation; the whole site is largely information about the company, so the “About” section serves as a quick overview for random information seekers. Job-seekers were considered an important demographic, but was kept as secondary navigation because having careers in the primary navigation didn’t help with the messaging to investors, and because people coming to the site looking for jobs don’t need to be sold to, they will seek out and find what they need.

The media is generally directed to a specific page, or, like job seekers, are looking for their specific information, and don’t need to be marketed to. The needs of regulators and employees overlapped with those of investors, so information targeting them is within the primary navigation. While the structure and terminology was chosen to target investors, these other demographics were also considered for clarity. For example, there were many possibilities for “Investors”, but other investment-related terms were rejected for potential ambiguity on whether it was about investing in Cameco, or investments Cameco has made; “Financial Information” is awkward and incomplete; and other terms were potentially confusing to secondary demographics.

It’s always a struggle to keep information out of the primary navigation (particularly convincing a client, who then has to pacify demoted corporate divisions). The utility of a website is greatly improved when not only is the primary demographic known, but spoken to directly through navigation that both informs and serves as the company pitch.

twitpitch: Best practices for well-designed primary navigation. Some good user experience examples from @zutweets Levi Myers http://bit.ly/2KR7U1

The same thing can be said about websites—when you overload users with too much information and too many choices, you end up reducing the utility at the expense of catering to a minority user group; or worse, at the cost of satisfying internal corporate politics. The reality is the more choices a user has, the more uncertain and less satisfied the user will be with their choice. In the book, “The Paradox of Choice: Why More is Less”, Barry Schwartz describes how even when the choice is trivial and reversible and the only cost is time, people are still more likely to stick with their first decision, even if it doesn’t fulfill all of their needs. Additional research indicated that people without choices were actually happier with a sub-optimal solution as opposed to those with many choices who ended up with a better solution.

Directing a user to information relevant to them is of high importance, and is the basis of information architecture, without which a website can’t succeed. But it’s also important to consider the psychology of decision-making, from which it’s clear that too many choices leads not only to dissatisfaction, but may even misguide users to areas that are not of interest.

One of the most overlooked areas of web navigation is having too many paths to the same information. Multiple paths add another level of choices, forcing the user to choose a navigation structure before choosing where they want to go. Clients rarely say, “there’s too many ways for the user to get to our information.” It would take great user testing before a user would say, “I saw three possible ways to the same information; I tried one and it wasn’t actually what I wanted, but I assumed the other choices were the same thing so I didn’t try them either.”

Usage statistics can also be misleading. The statistics may show that many users are reaching a page via a feature box, but if the site hasn’t been tested without the feature, there’s no way to know if all the users might still find the page through other navigation.

When a user gets to a page with one kind of navigation, that’s the navigation they’ll most likely try first when going to a new page. Does it have what they’ll be looking for? Feature boxes are, by design, limited to only a few prominent options; breadcrumb trails can only show you pages higher in the hierarchy. While a related information feature with highly-contextual links is very useful, it’s not possible to predict everything a user will want to view, so alternate, accessible navigation will still be needed.

I’ll end with an example. Breadcrumbs trails are now nearly ubiquitous, and often extremely useful. On a site like homedepot.com, the side navigation is constantly changing, so the breadcrumb trail serves as a record of how you got where you are. However, on many sites, breadcrumbs are added without actually evaluating their usefulness for that site. Sites with expanding hierarchical navigation are common, and often show the same information as the breadcrumb trail (sonystyle.ca is an example). Is the benefit of the simplified linear presentation worth the cost of adding another choice and more visual clutter? It needs to at least be considered.

Ultimately, every website needs a good compromise between maintaining interest with information upfront, and keeping the choices few enough that users come away feeling satisfied.