 |
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. |
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?
 |
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…
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. |
 |
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 |
 |
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.
 |
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. |
 |
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. |
 |
| 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. |
 |
How are they used in a project life cycle?
 |
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.
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.
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.
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.
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.
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.
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.
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
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;
Context, placement and pathways
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.
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.
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.
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.
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.
There are four main areas of metadata in terms of semantic grouping.
These are:
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.
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.
Unless a unified metadata strategy is initiated there are risks that;
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.
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.
