Column Two » Design & usability guidelines

Make SharePoint intranets beautiful

James Robertson — Sun, 22 May 2011 12:10:32 +0000

SharePoint is many things, but out of the box, beautiful isn’t one of them. The boxy design and shades of blue isn’t ugly per-se, but do little to inspire adoption and enthusiasm.

It used to be said that it was too hard to make SharePoint beautiful, but the following selection of examples show otherwise:

Screenshot courtesy of Kiwibank.

Screenshot courtesy of Bennett Jones.

Screenshot courtesy of Bupa Australia.

Screenshot courtesy of Commwealth Bank.

(Whether you think all — or any! — of these designs is “beautiful” is naturally a matter of taste. The key thing is that each has a clear design and brand, beyond the out-of-the-box SharePoint look-and-feel.)

SharePoint 2010 provides much better tools for tailoring the design of sites, including a range of point-and-click options. These are OK, but limited, and most intranet teams will want to go beyond this.

Lynne Warneke, an experienced SharePoint implementer, outlines the situation:

Plan carefully and budget accordingly! Branding SharePoint 2010 is ‘easier’ than branding the previous version, 2007, but it’s still a complex and involved process if you want a unique visual design that’s a significant departure from the out-of-the-box look & feel. And, as with all things involving SharePoint customisation, there’s a right way, and a wrong way.

When deploying a new intranet on SharePoint, and developing a visual design, therefore:

Start with clear brand goals. Start by defining the overall intranet brand, and use this as the foundation for the design process.
Understand the technology platform. SharePoint has its own way of managing delivering sites, that is more complex and technical than many web content management systems. Like all technologies, the best outcomes are gained by understanding the product well, building on the strengths and avoiding the weaknesses.
Get the right designer. Visual designs must be designed with SharePoint in mind, so they fit with the technology platform, and don’t introduce bottlenecks and performance issues. (There is little value in a beautiful design that costs a million dollars to implement.)
Get designers and technologists in the same room. Typical website and intranet design processes involved getting a designer to produce a Photoshop file or HTML template, and then “throwing it over the wall” to the developers. This works poorly for SharePoint, so get both groups in the same room from the outset.
Target effort for the greatest impact. As shown by the examples above, even fairly small changes to the basic template can have a large apparent effect. These include changing the top banner, updating the colours, and tweaking the standard layout elements.
Manage the effort. Obsessively tweaking the smallest design elements can be hugely costly and time-consuming in SharePoint, and can impact on upgrade options. So be clear about when to “call it quits” on getting the perfect design.
Ensure designs are accessible. Within the limits of SharePoint itself, all intranet designs should meet accessibility standards, including basic considerations such as colour contrast.

To wrap up with more advice from Lynne Warneke:

In conclusion, make sure you are working from the outset with people who know what they’re doing with SharePoint, heed their advice, be prepared to accept the application’s idiosyncrasies and work within its ‘limitations’, have enough budget to realise your vision, and within all the constraints, do have fun turning SharePoint’s corporate charcoal interface into something that will appeal to your intranet users. From experience I have learned that a more beautiful SharePoint can positively impact user adoption.

Creating & maintaining a web style guide

James Robertson — Mon, 29 May 2006 22:45:04 +0000

Maish Nichani has written a comprehensive article on web style guides. To quote:

A web style guide is a key deliverable at the end of a website design/redesign process. It is a document (usually a subsite in itself) that describes what needs to be done to maintain and grow the website according to a common set of principles derived during the design or redesign process.

Better Practice Checklists

James Robertson — Thu, 27 May 2004 10:21:55 +0000

AGIMO (formerly known as NOIE) have released their updated set of Better Practice Checklists, covering a wide range of issues surrounding online content. While these are designed to give guidance to Australian government agencies, they are equally useful for other organisations (both public and private sector).

We were very pleased to be appointed to a select panel to assist in the development of these new checklists. As part of this, we were responsible for writing the following checklists:

as well as editing or rewriting the following checklists:

Making guidelines part of the team

James Robertson — Sat, 10 Apr 2004 03:08:21 +0000

Tanya Rabourn has written an article on the use of guidelines. To quote:

Guidelines. We seem to have a love-hate relationship with them. At the same time we construct them, we worry they

HCI Bibliography: Guidelines

James Robertson — Sat, 24 May 2003 09:36:56 +0000

The HCI Bibliography has collected together a list of design guidelines, which currently contains 16 entries, and was recently updated.

Web Style Guide

James Robertson — Sat, 24 May 2003 09:34:47 +0000

Lynch and Horton have apparently released the fully text of their book titled Web Style Guide (2nd edition). To quote:

The guidance we offer in Web Style Guide has always been grounded on the functional aspects of design. In this second edition we extend our focus on functionality with additional sections on Web site accessibility, Cascading Style Sheets, and flexible page design. We include additional sections on information architecture, site maintenance, and multimedia design. And we have added illustrations and updated our Web site examples to reflect current best practices.

Section 508

James Robertson — Sat, 24 May 2003 09:21:43 +0000

In the United States, the accessibility of electronic systems in Government is mandated by Section 508. To quote:

Section 508 requires that Federal agencies’ electronic and information technology is accessible to people with disabilities. The Center for Information Technology Accommodation (CITA), in the U.S. General Services Administration’s Office of Governmentwide Policy, has been charged with the task of educating Federal employees and building the infrastructure necessary to support Section 508 implementation. Using this web site, Federal employees and the public can access resources for understanding and implementing the requirements of Section 508.

Java Look and Feel Design Guidelines

James Robertson — Sat, 24 May 2003 09:18:30 +0000

Thanks to recents posts on CHI-Web, this is another set of design guidelines: the Java Look and Feel Design Guidelines. To quote:

Java Look and Feel Design Guidelines, second edition, provides essential information for anyone involved in creating cross-platform GUI (graphical user interface) applications and applets in the JavaTM programming language. In particular, this book offers design guidelines for software that uses the Swing classes together with the Java look and feel.

Oracle Browser Look and Feel (BLAF) Guidelines

James Robertson — Sat, 24 May 2003 09:09:54 +0000

Oracle has released a set of look-and-feel guidelines for use in their applications. To quote:

The BLAF Guidelines are a set of specifications regarding common UI components, templates, flows, and general heuristics. These specifications should be used to develop html-based Oracle products to provide a consistent user experience regarding look and feel of applications, flow of applications, layout of pages, and interaction of components. Using the guidelines to design your application will also ensure a consistent suite of applications and tight product intergration.

Using a style guide to build consensus

James Robertson — Sat, 24 May 2003 09:05:12 +0000

Whitney Quesenbery has written an article on using a style guide to build consensus. To quote:

Style guides are often requested as a way to promote a common look and feel but do little to address the real problems in the way user interfaces are developed. In many situations, a collection of rules for visual design and the use of controls can seem like a band-aid; promoting surface-level consistency rather than solving the real usability problems. Even when a good style guide is created, it is often ignored after release. Worse, the style guide can become a weapon where a user-centered design process is needed. In either case, the style guide has failed to produce the desired effect. What?s missing is a consensus on the scope, ownership, or content. Solving this problem requires a change in the way style guides are developed, distributed, and used. Three suggestions for teams developing style guides are to start early, to make the emerging style guide widely available, and to plan for long-term maintenance of the guidelines.

ISO 13407: Human centred design processes

James Robertson — Sat, 19 Apr 2003 02:33:21 +0000

Recent mailing lists posts have reminded me about the existence of ISO 13407, the international standard for user-centered design processes.

Now, I haven’t seen it, and I was wondering whether anyone can comment upon its usefulness, and whether I should purchase a copy?

Intranet Guide project

James Robertson — Thu, 06 Mar 2003 03:23:47 +0000

As part of the most recent Intranet Peers in Government forum, I set a half-day project to come up with the outline of a “best practice” Intranet Guide for authors, reviewers and administrators.

This proved to be a lot of fun for all concerned, and and the two teams also came up with some really interesting ideas. I’ve now gathered their results together into a report, for use by the broader intranet community.

Download the PDF file (224k)

Your thoughts and comments on this?

Gathered resources on heuristic evaluations

James Robertson — Tue, 11 Feb 2003 10:45:37 +0000

The Usability SIG has gathered together a range of resources on heuristic evaluations, providing a good starting point for further research.

[Thanks to Todd Zazelenchuk.]

Jakob Nielsen’s 10 usabilty heuristics: annotated

James Robertson — Tue, 11 Feb 2003 10:42:06 +0000

Keith Instone has annotated Jakob Nielsen’s usability heuristics in this article, which helps to provide context to this well known list.

[Thanks to Todd Zazelenchuk.]

Alternatives to Nielsen’s heuristics

James Robertson — Tue, 11 Feb 2003 10:39:16 +0000

Todd Zazelenchuk talks about alternatives to Nielsen’s usability heuristics, highlighting that although they are very popular, they don’t always match the specific need at hand. To quote:

In a “true” HE [heuristic evaluation], Nielsen