Card scoring, blue prints and wireframes

Card scoring

Using card sorting is a way in which users can become actively involved in the development process of information architecture.

Card sorting is a useful approach since websites are frequently designed from the perspective of the designer rather than the information user, leading to labels, subject groupings and categories that are not intuitive to the user. Card sorting or web classification should categorise web objects (e.g. documents) in order to facilitate information task completion or information goals to the user has set,.

Robertson (2003) explains an approach to card sorting which identifies the following questions when using the techniques to aid the process of modelling web classification systems:

• Do the users want to see the information grouped by subject, task, business or customer grouping, or type of information?
• What are the most important items to put on the main menu?
• How many menu items should there be, and how deep should it go?
• How similar or different are the needs of the users throughout the organisation?

Selected groups of users or representatives will be given index cards with the following written on them depending on the aim of the card sorting process:

• Types of documents
• Organisational keywords and concepts
• Document titles
• Description of documents
• Navigation labels

The user groups may then be asked to:

• Group together cards that they feel relate to each other.
• Select cars that accurately reflect a given topic area.
• Organise card in terms of hierarchy – high-level terms (broad) to low-level terms.

At the end of the session the analyst must take the cards away and map the results into a spreadsheet to find out the most popular terms, descriptions and relationships. If two or more different groups are used, the results should be compared and reasons for differences should be analysed.

Blue prints

Blueprints show the relationships between pages and other content components, and can be used to portray organisation, navigation and labelling systems (Rosenfeld and Morville, 2002).

They are often through of, and referred to, as “sitemaps” or “site structure diagrams” and have much in common with these, except that tey are used as design device clearly showing grouping of information and linkages between pages, rather than a page on the website to assist navigation.

Wireframes

A related technique to blueprints is the wireframes which are used by web designers to indicate the eventual layout of a web page. It just consists of an outline of the page with the ‘wires’ of content separating different areas of content or navigation shown by white space.

Wodtke (2002) defines wireframe as “a basic outline of an individual page, drawn to indicate the elements of a page, their relationships and their relative importance”.

A wireframe will be created for all types of similar page groups, identified at the blueprint site map) stage of creating the information architecture.

Wireframes are then transformed into physical site design page templates which are now traditionally created using standardised CSS (cascading style sheets) which enable a standard look and feel to be enforced across different sections of the site.

The standards body W3C (w3.org) defines CSS as “a simple mechanism for adding style (e.g. fonts, colors, spacing) to web documents”.

CSS enable different style elements to be controlled across an entire site section of site. Style elements that are commonly controlled include:

• Typography
• Background color and images
• Borders and margins

For example, CSS will use this syntax to enforce the standard appearance of body copy on a site

Body {
margin:0;
padding:0;
color:#666666;
background-color:#f3f3f3;
font-family: Arial, ‘Trebuchet MS’, Verdana;
font-size: 70%;
background-repeat:repeat-x;
background-position:top;
}

The benefits of CSS

• Bandwidth. Pages download faster after initial page load since style definitions only need to be downloaded once as a separate file, not for each page.
• More efficient development. Through agreeing site style and implementing in CSS as part of page templates, it is more efficient to design a site.
• Reduces updating and maintenance time. Presentational markup is stored in one place separate from the content making it quicker to update the site globally with less scope for errors.
• Increased interoperability. By adhering to W3C recommendations, helps with support of multiple browsers.
• Increased accessibility. Users can more readily figure the way a site looks or sounds using browsers and other accessibility support tools. The site is more likely to render on a range of access platforms like PDAs and smartphones.

Adapted from

Chaffey, D. and Ellis-Chadwick, F., 2012. Digital marketing: strategy, implementation and practice (Vol. 5). Harlow: Pearson.