James Kelway on Information Architecture, User Experience, Web and Iterative Design

 

The powerful thing about the wire frame is that it removes many emotive aspects of design that will cause division amongst clients. There are no uses of branding , colours or elements of graphic interest on a good wire frame. When they are stripped back to absolute functional essentials it is much easier to explain exactly why key elements are placed in certain areas on the page.

 

Wire frames should

• be the culmination of all the user research and applied to the schematic
• ensure the clients understand that the interface is where the user interacts with their products
• allow concentration on functional aspects of the site and not brand or graphic execution
• be a working document that will change as the design process progresses

Using PowerPoint to show wire frames is a really powerful tool as it allows an element of control over the client. As you are in a formal presentation environment, you are in charge. When you talk, the audience will listen (if they don’t, just stop the presentation until you receive undivided attention). It also allows you to reveal features in a very structured manner, on your terms, that will aid the audience’s understanding about what is being suggested.

With the animation features you can also highlight elements on the page to draw attention to a particular area. Its best to do this in stages.

 

		Conversion areas – Start by showing the money generating areas, tell them where subscriptions or sign-ups will occur. Where people can purchase products, and where the site funnels are located to convert casual browsers into users (RSS or email newsletters) or customers (online stores and subscription centres).
		Search – Highlight the prominent position of search and why it is necessary to encourage the user to discover content. If a re-classification of content has occurred its good to tie this in here with the new taxonomy design
		Login – Important to convey that this area also offers the user help to activate their access, find their password and learn more about the benefits of having membership (whatever the site offers). Also the interaction that the user will have here and technologies used.
		Core – The main area of the page that will either display products, information or an application. The reason for the site’s existence should be spelled out here. Highlight key areas and also the secondary community areas such as blogs, forums etc. Also any widgets are to be explored here that benefits the user experience.

 

By unfolding the site’s features in a very structured way you are not overloading the client with too much information. Break it down into steps, it becomes a more manageable presentation of the site interface design and architecture. Annotations also should be added alongside the wire frame. This allows the presentation to stand alone if the client needs to distribute it amongst the stakeholders.

After the presentation the real work will begin when the dialogue between interface designers and web developers starts. Remember as the design is given a branded look, and goes to usability, that the wire frame’s integrity is not diminished by personalities on the team. Changes should only occur as a result of user testing.

It is an iterative process and changes will happen but keep an eye on developments as the site takes shape. Not following a signed-off wire frame is the equivalent to not having one in place at all.

Tweet

Tags: Experience Design, Information Architecture, Usability, Web design, Wire frames

This entry was posted on Monday, January 7th, 2008 at 12:45 pm and is filed under Design Tools, Information Design, Interface Design, Persuasion Architecture, UCD, Usability, User Centred Design, Wireframes. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. if(function_exists("tweet_button")) { echo tweet_button('jameskelway', 'none'); }