IA diagrams on Flickr

July 1, 2008 by James Kelway
flickrbutton   The diagrams that have appeared on this site are now in a Flickr set here.

The set will grow, but I hope to use it as a basis to help educate/enlighten clients in what IA is and what it can offer them.

The what, when and why of wireframes

June 26, 2008 by James Kelway

I recently presented at a conference on the humble wireframe and thought it would be a good idea to run through some key points. I have also noted that some feel the wireframe is dead, though if anything its more alive now than ever. Pay heed to 37 signal’s take on the subject…

If a wireframe document is destined to stop and never directly become the actual design, don’t bother doing it. If the wireframe starts as a wireframe and then morphs into the actual design, go for it.

In the presentation I attempted to answer these questions;

Wireframes

  • • What are they?
  • • Why do we use them?
  • • When should they be used?
  • • What are the different types?
  • • How are they used in a project life cycle?
  • • Why are they important?

What are they?

pixelwireframe   They are a visual representation of the content of a web page that is the culmination of user research, business objectives and content.

Best brought together in a sequence of pages to illustrate paths of navigation and interactions on the page.

They are working documents that are not finished designs but are likely to change as the design process progresses and functional requirements are clarified.

They are NOT…

  • • Meant for an external audience without an explanation of context
  • • Meant to be the design of a page
  • • To portray any graphic elements
  • • To convey the brand of a website

Why do we use them?

To help gain understanding 
They ensure the business understands that the interface is where the user interacts with their products, where engagement begins and conversations start. 
  business

To help project workflow
They allow us to focus on the functionality of a site. They are a fast and cheap way to produce an idea of how a page on a site may work. They can be developed in parallel to creative concepts, and redrawn easily.

 

To help stakeholders
They promote debate and conversation around important elements of a site. They are a focal point for collaboration between stakeholders in a team.

To help designers and developers
They allow development teams to start developing functional aspects highlighted in the wireframe templates before visual design begins. They render the structure of the site from a concept into a skeleton of the final design, ready for the surface design

  collaboration

 When should they be used?

Jesse James Garrett very neatly summarised the five phases of website development in this model and you can read more about it here. His concise and accurate analysis of the project development phases is seen in the excellent book - The Elements of User Experience.

jjg   In short, wireframes are the skeleton of a site and precede the surface design and come after the structure. However in the agile process of development a more layered approach enables developers and designers working simultaneously. Wireframes are evolving documents of discussion and this should always be remembered.

What are the different types?

Hand drawn sketches
Are a very quick and fast way to convey a layout to others that can be changed rapidly. They are the best precursor to computer aided drawing and their low-fidelity format encourages experimentation and honest critique.
  smallsketch

Collaborative sketches
The only real difference here is that a team produces the wireframes together. It helps the group to discuss reasoning behind solutions and iteratively sketch solutions. Several solutions helps the team explore different approaches and it provides a framework for participants to articulate their ideas.

Annotated wireframes
They are produced to describe the functional elements to development teams. Elements are explained in small paragraphs alongside the diagram and this enables the wireframe to be understood without verbal explanation. They are valuable tools to clarify function and focus on a page.
  annotate

 

High fidelity wireframes
Mainly produced to canvas opinion from users in interviews about a layout or concept. They should always require a usability expert to explain the context and purpose of the diagram. It really is the nearest step before presenting the surface design of the solution. The line between wireframe and functional prototype is a thin one here, it may be better using resources on a working prototype.
  hifiwf

How are they used in a project life cycle?

widgetwire1   Even in the Web 2.0 world of development with AJAX interfaces the wireframe has a place. It may struggle to show all interactive elements (though the Yahoo pattern library’s use of wireframe diagrams negates this somewhat) but it still gives a document that can digested by large specialised project teams.

The wireframe can evolve into HTML or Flash prototypes and is a tool that encourages collaboration - this is its most important strength.

The diagram below highlights a typical journey of a wireframe through a product development cycle. It is an iterative cycle and one that moves at different rates to other tasks in the work flow of a team.

isoprocess_small

Why are they so important?

• They ensure accurate planning for functional specifications

• They ensure all project team members are well briefed

• They enable developers to start work on new functionality before the visual design begins, helping to minimise development costs

• They track changes in the design process as decisions are made to the interface, this minimizes project creep

In summary, they are critical to the success of a design. If anybody claims not to use them you should be wary of the methods they employ. A wireframe is the compass that will keep a project on course, and a journey without a map is a hazardous one.

The answer is in the interface

June 18, 2008 by James Kelway

A recent article by Alex Iskold brilliantly captures the separations of where we imagine semantic search should be and the reality. Even if it were trying to knock Google off a top spot, what he highlights is that it would be an unnecessary exercise.

Google does its thing very well. Few would argue with that. Alex suggests that semantic search should do something completely different…

To really showcase semantic search, these companies need to come up with innovative UIs that will help users to understand the power that is being put at their fingers.

I also think it should display results differently, the interface should encourage an exploratory experience and allow lateral thought to occur during research. Iskold states we should move away from  the search box, as this is the wrong type of input for a user.

Search Patterns

Peter Morville is currently producing a book on search patterns and this will also highlight how facetted navigation enables the user to experience a different search journey. He has made the slides available here on Flickr.

If you look at the core of what should be shown is the relationships between items, that give relevance to the user’s query. Somehow a system needs to be designed that will reveal elements that have relationships and connections. Ontologies could be made, linking different data sets as if they were relational databases.

If a user found truly relevant and accurate information around an entity then a business objective could be fulfilled. Really targeted advertising would occur. Users are often more forgiving of adverts if what they see is relevant.

Images as a search device

But the challenge is in the interface, how do you convey a fluid, ‘noosphere‘, visually? It has to be visual because the variety of content types are so different, and to scan and associate quickly - images could allow instant recognition.

TED

Blaise Aguera y Arcas is an architect at Microsoft Live Labs, architect of Seadragon, and the co-creator of Photosynth

Recently Mike Laurie wrote a post about the use of video, virals and such like and he ended the post highlighting the Photosynth software developed by Microsoft. The video shows the potential of this software and it’s impressive. One quality is the ability of a system to collate images from Flickr that have been tagged with recognised terms and build those images around a 3D model.

Another element is the resolution of some of these images is 300 megapixels allowing a user to zoom right into them and read or see the contents.

photosynth

Photosynth showing Flickr images mapped to 3D models of the subject

If you think about this collation of files that have been tagged by a massive variety of users (from Flickr in this instance), it seems to be a big step to Tim Berners-Lee’s vision of the semantic web.

Sure these are only pictures, they are not documents, however when you think about the metadata in the file and how this can be organised to conform to a widely accepted mental model then this is really exciting.

An interactive mental model

Imagine an interactive concept model around a physical object, you could extract the related items around this and draw relationships between inter-linked entities. I recently designed a taxonomy for a science magazine, and it had to encompass every type of science from physics to psychology to civil engineering. How would you draw relationships between these fields?

Well, what I like about this model is that this would be a visual representation of a knowledge landscape (in this case using images) that could easily be with video, audio and standard web pages. It would also be a 3d representation that would encourage digital discovery.

At the moment it is perhaps too flexible for your average user, but give it time. As more digital natives reach maturity and form the majority of the browsing public, this interface will not phase them at all.

Google’s repository of human entered queries

We have a vast amount of data against document types about relationships between one and another, search engines have log files where keywords and most relevant results are displayed.

Around any search, even if it is a mathematical equation, there is a physical object that can be related to it. Be it the theory’s creator, university, or even the theory itself the physical entity (or even known concept) could form the basis of the visual model.

If we truly want to move towards a semantic web than this type of interface would offer a rich, interactive and flexible approach to showing layers of detail that would encourage digital discovery and serendipitous finding.

Producing a list of most relevant links is still a compromise to what we could display to our users. It could be far better to show a knowledge landscape for each query where there are paths to other areas of knowledge and layers of related data that can be sorted by a series of user interactions.

In a way Microsoft has produced a microfiche for the 21st century, the difference though is the librarians that have tagged it are now the users of the system and they create the content. The machine has enabled the creation of something that is entirely user  generated but it will also help in organising this huge potential of harnessing the world’s knowledge.

googlemaps

Consider how Google are also integrating wikipedia entries to their maps and geo-locating photographs. By using the map, as mental model in this case, they are merely super imposing extra data types directly onto the two dimensional base.

Perhaps this is the greatest challenge to interaction designers and visual thinkers. Visually represent the knowledge available from an interlinked network of sources that are authorities around a subject area. As Alex Isold points out we are far from the solution yet.

User paths for conversion - elements in engagement

June 17, 2008 by James Kelway

This image was shown during Peter Moville’s talk about IA 3.0. What is interesting about it is how he linked this to Christopher Alexander’s text about design in architecture and also Peter Merholz’s essay Metadata for the Masses. In which he highlights ‘desire lines’ how paving is built once you see the paths that people tread.

clip_image002

If we look at online behaviour, user paths give us a solid idea of routes to content, where they return to and where they tend to go next. Human behaviour tends to follow patterns, see this article about mobile phone usage for an example of how predictable we tend to be.

Engagement is Conversation

This pattern of behaviour is something that good web analytics managers can see by interrogating their data. Alec Cochrane and I recently presented on the subject of building and measuring engagement and he summarises our talk here.

Metrics can tell you the most popular paths to frequently visited pages and we can change the interface accordingly. This can help us formulate our persuasion architecture but of course there are other things to consider…

No place like home

The homepage on a site suffers in a different way as it’s a starting place, a returning place and contains areas created as a diversion (meant for conversion) by many different stakeholders.

Add to this the fact that many users from search, email or RSS may never see it and it is an area that seems to be in a state of struggle. Serving the purpose of communicating a message from the site owners as well as serving the user.

Of course the more routes you have to your content the better the overall measure of the engagement your site has with your community of users.

Elements of engagement

image

A concept model can describe elements of engagement that need further exploration

But if we look at this in another way and think of the home as a place that should react to user’s wishes regularly, then it would be far easier to create an engaging experience.

Personas can help here but going back to the concept model would bring the greatest clarity about what needs to be presented. The concept model describes the whole site but also captures the key elements of engagement, and the parts that need representation on a homepage.

Taking this into account a typical homepage needs to offer;

  1. Fresh content that is regularly updated with visible changes aided by the use of images. (Users check back frequently for news)
  2. The use of themed areas and a cluster of stories around a subject area
  3. If Jobs are offered they need a better promotion with an idea of the amount of job types displayed to the user
  4. A consistent placement of sign-up areas throughout the site, this will enable conversions to occur and conversations to begin between you and your users.
  5. An improvement of the graphics and images used on the site needs to be made to convey quality and of being a trusted authority. (Maximise promotional areas and do not give too much emphasis to ‘most popular’ widgets. These regions can take up large amounts of screen area and though they drive some traffic, without accurate measurement we can never be sure of the effectiveness of these devices)
  6. Research material (white papers or case studies) need to be placed in an obvious position with more ‘evergreen’ content in the form of useful research that is graphically promoted.
  7. Use blog content in a way that enriches themes or offers other angles on an existing story (also helps in changing of content on homepage). Opinion pieces also help in conveying authority and tone at the place where some users are visiting for the first time and also engage with returning users looking for an opportunities to converse.

Context, placement and pathways

engagement

The points above are based on news sites that offer different elements and in turn different modes of user engagement. Obviously looking for a job is not the same as researching and looking for case studies. So context is always the major factor when we think of what elements to display.

Put together the user’s path through the site, the context of where they have come from and what they are interested in and you have the ingredients to build the best engaging experience. The tricky part is to have an adaptive interface that will allow you flexibility.

By being aware of context, placement of content to reflect interests and user’s paths it will give a road map for engagement success.

Building a metadata schema

June 7, 2008 by James Kelway

A year ago I was involved in a major restructure of 7 major websites. Each had a new taxonomy and controlled vocabulary created. A clear vision of the direction of each site was drawn up and site maps and wireframes produced. The one problem we had, was there wasn’t a generic metadata schema that was adhered to. It was a combination of ad hoc, legacy tags. Some originated from the SEO team and some from the developers and database administrators on each site.

metadata-logos

The problem was, to enable users (internal staff and external consumers) to be able to find what they needed and to discover content serendipitously, the metadata needed to be rigorously structured and adhere to recognised standards.

Various kinds of metadata were important to the sharing and re-use of articles, and this post will highlight these areas and also illustrate how we incorporated these into the metadata schema.

Purpose of metadata

The lack of metadata in a file, adversely affects search engine retrieval but also the working efficiency in collaborative teams. Data is lost, assets are not published and effort in creation is wasted. Ensuring effective metadata implementation in the documents we create and publish results in gaining competitive advantage in the search domain but also an increased efficiency in our working practice.

Without metadata management intellectual property rights become eroded, and liability increases. Files such as an image, PDF, video or audio all need to be tagged to provide the user or employee a method in finding valuable content.

A set of Metadata Standards should govern the implementation of consistent and uniform metadata architecture. Consistency in metadata is important to enable information sharing across an organisation and to make optimal use of document management tools which rely upon this.

Metadata Organisations and file formats

For metadata to be effective, it must be incorporated into the workflow from creation to publication. This emphasises the importance of any content producer making a concerted effort to synchronise their information management.

There are significant contributors in metadata standards and after analysis the following organisation’s standards formed a basis for the metadata schema.

These are:

These standards are evident in the following formats that create types of metadata:

To aid in classification of file format types we used the Internet Assigned Numbers Authority (IANA) to give us a definitive list of file types. Its list, the Multipurpose Internet Mail Extensions (MIME) covers various formats that were used and may be used in the future. All other taxonomical types of labels (countries, regions etc) we looked towards the ISO for their classifications.

The types of metadata

There are four main areas of metadata in terms of semantic grouping.

These are:

  • Descriptive metadata – Describes the contents of a file
  • Administrative metadata – Data that can not be retrieved or inferred from the content and pertains to management of the content within a system
  • Rights metadata – Asserts the ownership of the content, who owns it and who may distribute it and usually pertains to the usage of the document.
  • Technical metadata – data about the physical properties of the content

All four areas have specific use for different reasons. The descriptive quality helps the item properties to be found either by search or by a user interface element on the page. This can be online and also offline in an application such as Adobe Bridge.

Drafting a schema

The schema was designed to incorporate the four main uses of metadata. These different facets to metadata result in different uses throughout the workflow of a publishing process.

These are revealed through tools the Adobe suite of applications and in the content of the websites where the ability to find our information is paramount to the quality of the user experience. The importance of classifying different aspects of our content is becoming increasingly important as new technologies based on the XML platform come into fruition.

The properties are unique and their use is dependent upon the content of the resource that is being tagged.

The list below outlines what we thought was of most use to be tagged from the moment content was created to the moment it became published.

Descriptive Properties  
Headline Information Type (set)
Keywords Industry Sector
Description Audience
Subject Coverage
Entity Type  (set) Genre
Scene Location created
Language Predominant colour
Administrative Properties  
Unique ID Title
Relation Date Created
Date Modified Date Published
Contact Information (set) Job ID
Instructions Description of writer
Rights Properties  
Creator Creator Job Title
Credit Line Publisher
Copyright Notice License Contact
Model Release Property Release
Other Third Party Rights Usage Rights
Provider Source
Technical Properties  
Format Colour Space
Orientation Maximum size
Original file Image
Still Image Moving Image
Text property Sound

The image below shows exactly how these fields are applied in practice.

page with metadata labels applied

Risks of not managing your metadata

Unless a unified metadata strategy is initiated there are risks that;

  1. The data communication between enterprise applications will be flawed. Thereby negating any efficiency that may be gained through hardware upgrades, workflow will be inefficient, content will reside in silos .
  1. The investment of designing taxonomies needs to be implemented at a technical level and this requires taxonomy management and data architecture. Not following up the investment of a metadata implementation by employing a data architect or someone responsible for metadata management is a critical weakness in the enterprise’s information management.
  1. Little or no use can be made of existing content and it often presents a valuable commercial resource. As the file has substandard metadata we immediately lose our content but we need to profit from its creation and value. Without a way of implementing a schema, content is effectively lost as soon as it is created.

With so many content creators working daily, the management of this information is our most important challenge. The content needs to be found easily, both internally amongst colleagues and externally amongst users.

The future

Certain properties in the schema pave the way for future search technologies. For instance entity type (such as brand, product, location, event) are complex in their variety. However this label allows that complexity of context to be stated and clarified.

Perhaps its for this reason that I see metadata being the foundation of semantic search. Only with a rich metadata schema that incorporates several different facets will we start to enjoy highly advanced searches over content that has inherent relationships. The challenge for interaction  and interface designers is to design the interface to be intuitive and allow searching in a unique, non-text field way, that is more exploratory than is possible at present.