Surface = Visual Design Skeleton = Page Structure Structure = Navigation Structure Scope = Features, Technology Strategy = Objectives, Needs The Five Planes
The Five Planes Surface Skeleton Structure Scope Strategy
The Structure Plane Structure
The Structure Plane • Interaction Design = how the system interacts with human behaviour • Information Architecture = organising, grouping, ordering, presenting content These are about understanding people, the way they work, the way they think (not really about technology at all)
Interaction Design “The dance between the user and the machine” • Conceptual Models (“does it work like a ...?” • catalogue • shopping trolley • service desk... • Error Handling • avoid permitting errors • Undo button • Plenty of warnings
Information Architecture • Architectural approaches = how the nodes (not always pages) are linked • Organising principles = ways of categorising • Language = controlling terminology • Metadata = tags about the content to help searches
Information Architecture • Like a navigation map for a large site (which would be too complex to draw or even use) • Navigational scheme • Allows users to move around the site efficiently and effectively • It's LIKE information retrieval, but web sites do more than passively supply info. They also educate, inform and persuade.
Information Architecture • Need to create a categorisation scheme corresponding to: • Our own objectives • Those user needs we intend to meet • Site content • Can be done top-down or bottom-up
Top-Down • Start from site objectives and user needs • Start from functionality and content needed to achieve these goals • Break the categories down into subsections • Now you have an empty shell of containers • Slot the content and functionality into the containers
Wake up!! • Form "buzz groups" of three people, combine with the two people nearest to you so you don't need to get up: • Imagine the Thurso District Council website, its objectives and the needs of its users • Design a top-down structure in as much detail as you can get in five minutes • (Plenary on generally agreed points and surprises)
Bottom-Up • Using already-existing material and material that will exist on launch: • Items are grouped into categories. • Categories are then grouped into a site structure. • Structures can be tested by asking users to find things. "find me a pair of grey socks"
Comparing top-down and bottom-up • Neither is without flaw: • Top-down can overlook weaknesses in the content • Bottom-up can precisely tune an architecture so much that it will not accept additions and changes. • The answer? Use both and do user testing.
Card Sorting methods • Two primary methods for performing card sorts. • Open Card Sorting: Participants are given cards showing content with no pre-established groupings. They are asked to sort cards into groups that they feel are appropriate and then describe each group • Useful as input to information structures in new or existing sites and products • Closed Card Sorting: Participants are given cards showing site content with an established initial set of primary groups. Participants are asked to place cards into these pre-established primary groups. • Useful when adding new content to an existing structure, or for gaining additional feedback after an open card sort.
Advantages • Simple – Easy for organizer and participants. • Cheap – Cost is just stationery and time. • Quick to execute – Can perform several sorts in a short period, which provides a significant amount of data. • Established – Used for over 20 years, by many designers. • Involves users – Information structure based on real user input, not the gut feeling or strong opinions of designer, information architect, or key stakeholder
Disadvantages • Does not consider users’ tasks – May lead to an information structure that is not usable when attempting real tasks. • Results may vary - May provide fairly consistent results between participants, or vary widely. • Analysis can be time consuming –particularly if there is little consistency between participants. • May capture “surface” characteristics only – Participants may not consider what the content is about or how they would use it and may sort by surface characteristics such as document types.
How to (1) • Select content • Consistent levels of granularity • Relevant to users • Representative of the site • Not too varied • Between 30 -100 items • Select participants • 7-10 individuals • Or around 5 groups of 3 • Make ‘cards’ • One card per item • Use cards, paper or Post-Its
How to (2) • Execute the sort • Instruct users • Sort cards into groups which belong to each other, name each group • Add any missing elements • Can have a miscellaneous group, but try and avoid this • Take notes, video or audio-tape the process • Analyse results • By eye, spreadsheet or software
Adaptable architectures • An adaptable architecture can adapt to additions to a section... Home
Adaptable architectures • ...as well as entire new sections. Home
The Three Clicks Rule • The Three Clicks Rule: all sections of the site must be reachable from the home page in three clicks or less • Ignore the three clicks rule • Instead, make sure your categories make sense to the user • It is more important that users arrive by a sensible unambiguous route – even though it took seven steps to get there.
Quality in Structures • A good structure is flexible and can accommodate to change • Nevertheless, after a year or so the structure will drift out of alignment with the content. Then it is time for another card-sorting exercise!
Quality in Structures • Be prepared to change site structure if: • The objectives of the site change • The user needs which you intend to meet, change. • It is seldom obvious that the site needs to change. By the time it becomes obvious, users are already experiencing difficulties!
Site Architectures • The basic unit of an information structure is the Node • A node usually corresponds to a page • In large sites, it can correspond to a section of the site • In some sites it can correspond to an item for sale • Nodes can be arranged into many structures. In real life, the structures fall into just a few classes
Site Architectures • The Hierarchical structure Home
Site Architectures • Hierarchical structure sometimes called the tree structure or the hub-and-spoke structure • This is by far the most common structure • All nodes have parents, not all nodes have children
Site Architectures • Matrix Structure
Site Architectures • Matrix navigation structures allow users with different needs to navigate in different ways. • Some want to browse clothing by colour • Others want to browse what the store has in their size. • Can, for instance, use two navigation blocks, on the left of the page, one on the right. • Humans can handle up to three dimensions / parameters / ways of browsing.
Wake Up!!! • In threes, design a site with a matrix architecture. • Why is a matrix architecture best for this site? • What are the styles of navigation that are available? • How would you do the visual layout of the navigation • How would you stop users from being confused?
Site Architectures • Organic Structures
Site Architectures Organic Structures: • Don't even think about it unless you really have a very good reason. • You'll get your users lost, then they will feel stupid and never come back • This structure works only if the navigation is the topic itself – like mazes in games.
Site Architectures • Sequential structures: • You want the users to perform a specific task, broken into a number of pages, without distractions. • E.g.: customer registration, checkout, surveys
Site Architectures Organising principles: • The organising principle is the criterion by which nodes are grouped or kept separate. • At the highest levels of the hierarchy, organisation is by site objectives and user needs • Further down the hierarchy nodes are grouped by content
Site Architectures • In a corporate information site, the highest categories could be: consumer, business, investor • In a multinational sales organisation, areas could be separated geographically
References: • www.boxesandarrows.com/view/card_sorting_a_definitive_guide • Garrett, J.J, (2003) The Elements of User Experience: User-Centred Design for the Web, New Riders, Indianapolis, USA.