The University of Edinburgh Information Architecture Guidelines Version 3

Transcription

1 The University of Edinburgh Information Architecture Guidelines Version 3 Produced by the University Website Programme September 2013 Available on the Polopoly Support wiki (EASE login required) Related guidance Content structure guidance: Attend the two-hour course Writing for the Web Course. Details available on the University Website Programme Website Available at

2 Contents Introduction... 3 What is information architecture?... 3 What does this mean for your web content?... 3 A. Using information architecture for content structure and layout Information architecture principles... 4 Navigational consistency... 4 Navigation within the website interface... 4 Avoid choice overload... 4 Clear page purpose Structuring content for users... 5 Audience first, then task Understanding user behaviour... 6 General trends... 6 Information-seeking behaviour... 6 B. University website elements Central website primary navigation Global banner Search interface Subsite banner and contact link Subsite banner Subsite banner with subsite name Subsite banner with parent link Contact link Site primary navigation Breadcrumb Site secondary navigation Section header Related links Related links associated with primary navigation (subsite) Related links associated with secondary navigation (section) Related links associated with a single page Global footer C. Page layouts Homepage and navigational page layouts Homepage with site primary navigation Homepage with no site primary navigation Summary pages Content pages D. Understanding the structure options Subsite or section? Available at 2

3 Introduction What is information architecture? Information architecture is about helping people understand their surroundings and find what they're looking for in the real world as well as online. We define information architecture as: 1. The structural design of shared information environments. 2. The art and science of organising and labelling web sites, intranets, online communities and software to support usability and findability. 3. An emerging community of practice focused on bringing principles of design and architecture to the digital landscape. The Information Architecture Institute Information architecture (IA) can include an extremely wide range of processes, approaches, and tools. This document looks at some specific elements on the University of Edinburgh website and how we apply the principles of information architecture to help us our visitors understand their surroundings and find what they're looking for. What does this mean for your web content? These Information Architecture Guidelines will help you to structure the content, lay out the pages and label the routes to content so that visitors can navigate with ease, find the items they require and complete the tasks they set out to do. If you are working outside Polopoly, and particularly if your website is mimicking the design of the central University website then these Guidelines should help you to identify how the elements of the site operate and enable you to better reflect the University website look and feel, thus giving users a consistent experience across different areas of the entire University online presence. If you are working in Polopoly some of the features included in the guidelines are already built into the system so there s no need for you to do any extra work. Available at 3

4 A. Using information architecture for content structure and layout 1. Information architecture principles These principles are applied to the various elements of University website, sometimes automatically and sometimes via the processes we have established for structuring sites and laying out pages. Navigational consistency When an item in a navigation panel is selected the contents of the navigational panel should not change: this means items should not vanish, nor should new items appear. Areas of the page layout used for particular navigational and orientation tasks should be consistent throughout the website. Navigation within the website interface Everything the user needs to interact with the website should be present and obvious within the interface. The website navigational options and labelling should negate the need for visitors to use their browser navigational tools most commonly the back button because they have confidence in the website interface. Our aim is to minimise the need for the user to click outside of the website interface while navigating the site. Avoid choice overload Any one navigational panel or grouping of links should not contain more than nine choices. There are exceptions to this rule but only when there is no practical alternative. Groups of links that have a context for your reader, like: Months of the year Staff lists presented in surname alphabetical order Modules of a particular course Where graphic design and font styling can help the user differentiate, such as: Identifying categories and subcategories Highlighting that particular sets of links have specific purposes (global navigation, primary and secondary navigation, footer links etc) Clear page purpose Be clear about what you want to achieve with a page and stick to it. We categorise pages as: Navigational signposts to help the visitor to decide quickly where to go next; link-heavy, with minimal, if any, other text. Summary providing an overview of content in a section or subsection; educating the reader and helping them make an informed choice Content the detail; each page has a singular and obvious topic focus, summarised by the title and opening paragraph. These categories occasionally overlap, with some navigational pages serving also to summarise, and some summary pages also imparting some degree of detailed content. Available at 4

5 But navigational pages should not be used to communicate detailed content. 2. Structuring content for users When thinking about your content and how to structure it, you need to have: 1) a common understanding of the goals of your unit the part of the University that you represent. What aspects of these goals are looking to achieve with your content? How will communication via your online presence tie in with other activities print, events, media relations, one-to-one engagement via phone, , letter etc.? 2) understanding of your audiences needs. What do they use your content for? How does this tie in with other communication you have with them? Web stats, market research and usability research will help to answer these questions. Organising your content isn t as simple as sitting down and drawing a tree diagram deciding or negotiating with your colleagues on what goes where and how to label your categories. If you do this you are likely to end up with a site that works for you and your colleagues. Or indeed a site that works for no one, as you compromise and try to find common agreement. Too often, a site structure is created which then dictates the content that is subsequently generated; it should be the other way around; content requirements should drive structure. What do we want to achieve online? What does our audience want to know or do? What content do we need to generate to meet these requirements? How can we organise this content in a way that meets audience needs and expectations? Audience first, then task Structure your content for your target audiences If key tasks are common to all (or most) of your audiences, it may be appropriate to promote these within your structure Within each audience section, focus on the high priority reasons they have for interacting with you online Not everything you publish is of equal importance or value. Identify what s important and give it emphasis or priority: Important to the business goals of your unit Important to your target audience(s) Focus on what they want to know, not what you want to tell them. However, generic About us (basic who, what, where, why, when information) sections are still important. Available at 5

6 3. Understanding user behaviour General trends Everyone is different, but there are some commonly-observed trends in website user behaviour that need to be catered for both in terms of how we structure our online information and in terms of the content that appears on each page. Website users: scan: they rarely (if ever) read a page from beginning to end. are task-driven: they have a goal to achieve when visiting your site. expect answers quickly: if they don t find what they want easily they ll go elsewhere, or pick up the phone or . like obvious navigation choices: o So make it easy Don t make me think. o Everything in three clicks is a myth. Users are happy to click if choices are obvious and can be made with confidence. Information-seeking behaviour In addition to catering for each target audience, the site structure needs to cater for the different information-seeking behaviours that exist within any audience. Known-item seekers: Know what they want Know what words to use to describe it May have a fairly good understanding of where to start Exploratory seekers: Have some idea of what they need to know May not know how to articulate it May not know where to start to look Don t know what they need to know seekers: May think they need one thing but need another May be looking at a website without a specific goal in mind Re-finding seekers: Looking for things they have already seen May remember exactly what it is Have little idea about where it was Integrating navigational and summary pages into your site structure helps to meet the needs of all these types of users. Available at 6

7 B. University website elements This is how the corporate University website applies the information architecture principles. If you mimic the corporate design, regardless of the system that you use, you must implement the elements as specified. If you use a different look and feel, you must adhere to the principles and pay particular attention that these elements are consistent with the principles: global banner and global utilities (2), breadcrumb (5), search interface (3) and global footer (10). The key elements used on the University website which are covered in this section are: 1. Central website primary navigation 2. Global banner and global utilities 3. Search interface 4. Subsite banner and contact link 5. Site primary navigation 6. Breadcrumb 7. Site secondary navigation 8. Section headers 9. Related links 10. Global footer We explain how each element operates and how it helps a user to orientate themself and navigate around the website. Available at 7

8 1. Central website primary navigation This navigation is designed to help users orient themselves within the central website and navigate between the key central areas. IA principles: The items in the navigation panel do not change when an item is selected. There are fewer than nine choices. There is consistent labelling - when an item is selected the section the users goes to has the same name reflected in the banner title and the breadcrumb. NOTE: Once a visitor leaves the central website - usually by going to a specific College, School or Department website the central website primary navigation is removed. 2. Global banner The global banner consists of global utilities that are always available. The purpose of the global banner is to enable the user, where-ever they are in the site, to do three things 1) always get to the University homepage 2) always get to the site map the list of Schools and departments 3) always search the University website The global banner always contains the crest and the University name. It should not be supplemented with other information such as a School or subsite name. IA principles: Navigational consistency - wherever the user is, selecting the banner will always take them to the University homepage at These are the key navigational tools that visitors can use regardless of where they are on the website. Available at

9 IA principles: Navigational consistency - wherever the user is, selecting the Schools & departments link will always take them to the Schools and departments page at this url 3. Search interface Ideally a subsite should use the University website-wide search service, although this is not mandatory. The essential aspect is that your website search covers the whole University website. The advantages of the University-wide search service is that: It is cookie-compliant it provides a consistent search experience with most of the website it is an actively-managed service Guidance on how to integrate the University-wide search service into your site is on the Support wiki (EASE login required) The initial site-wide search interface should be simple a text entry box and Search button The initial results are University website-wide by default. Research shows that that more users are looking across the University website than locally which is why the Whole University tab comes first. The search must provide the user with the opportunity to search both across the whole University website and this subsite only. IA principles Navigational consistency the nature of the tabs offered on the search page do not change regardless of where the user was on the whole University website when they conducted the search. 4. Subsite banner and contact link 4.1 Subsite banner The subsite banner defines each subsite within the University website. The subsite banner helps to indicate to our website users what the subsite is about and what kind of information it has. Because the banner remains the same throughout the subsite it helps the website users understand where they are in the University website and when they have moved to a new subsite. Every banner has a unique image. The banner appears consistently on every page on the site and is associated with the site s primary navigation. Both the primary navigation and the banner are persistent throughout the subsite. Only when a user moves into a new subsite does the banner and primary navigation change. So if a new subsite is created at a lower level, the banner does not cascade. The new subsite has a new banner and new site primary navigation. Available at 9

10 Subsite banner with subsite name The name of the subsite appears in a transparent box in the top left-hand corner of the subsite banner Subsite banner with parent link A parent link displays the name and link to a site that sits above the subsite in the structure. The parent site must be above the subsite in the breadcrumb trail and there needs to be a clear association between your subsite and the parent site. If used then the site parent name and link must appear in the top left-hand corner of the subsite banner and the site name displayed in a red stripe across the bottom of the banner. IA principles: Banner displays on every page in the subsite on a standard template. The name of the site is consistently displayed on the banner. The name of the parent section (if used) is consistently displayed on the banner. The parent section is always above the subsite in its breadcrumb. The banner and the site primary navigation remain consistent throughout the subsite. There is consistent labelling the name of the site displayed on the banner is the same as the name as displayed in the breadcrumb and the primary site navigation. 4.2 Contact link The contact link is displayed at the bottom right of the subsite banner. The Contact link should go to a page within the same subsite containing contact details relevant to the page content. Any other links on a page reading 'contact' or similar should go to the same place as this top contact link. The contact link title text gives context about the page content. It should not be a repeat of the link text. Available at 10

11 5. Site primary navigation Site primary navigation is presented in the left-hand navigational panel of the subsite. The first item in the subsite primary navigation will be the homepage. The link text will be the word Home, and the link title will contain the full name of the subsite. Every section of the subsite and any single pages at the same level in the site structure as the homepage will be displayed in the site primary navigational panel, except for the contact details page. The site primary navigation will persist throughout the subsite and will not change. IA principles: Navigational consistency the items in the navigational panel remain consistent when a user selects one of the items. Avoid choice overload there should be no more than nine items. 6. Breadcrumb The breadcrumb offers users a complete route back to the University homepage with each tier in the navigation being a live link. The breadcrumb trail terminates at the page currently being viewed. This final item should not be a link. The breadcrumb for subsites which are under the Schools and departments area of the University website begins with two tiers: University home > Schools & departments > Available at 11

12 The breadcrumb for subsites in the central area of the University website begins with: University home > IA principles: Navigational consistency - the breadcrumb does not change except when the user goes up a level or down one more level in the hierarchy, when an item is removed or added to reflect where they currently are. Navigation within the website interface users can navigate up and down the subsite and section hierarchies using the breadcrumb links. There is consistent labelling - each tier in the breadcrumb is consistent with the name displayed on each subsite and page in the trail. 7. Site secondary navigation Site secondary navigation is presented within the body of the page or in the right-hand navigational panel. The right-hand navigational panel is used only at the deepest level of that part of the subsite. Every link in the right-hand panel must be to a single page, enabling the items listed in the panel to remain unchanged as the user moves between them. Available at 12

13 If there is a further section below this section then the right-hand navigational panel should not be used. Because of the persistent section header, the navigation labels do not need to repeat the terms used in the section header. Secondary navigation link text should not repeat link text from elsewhere on the page (eg in primary navigation) unless that link goes to the same destination. The link title can be used to give more information if necessary. IA principles: Navigational consistency the items in the navigational panel remain consistent when a user selects one of the items. Avoid choice overload there should be no more than nine items. 8. Section header The section header is persistent throughout the section. The section header offers a link back up to the overview page for that section. If the section is at the top level of the subsite and thus appears in the site primary navigation then there should be consistency between the label in the left-hand navigational panel, the breadcrumb and the section header, though the navigation label may be more concise. Available at 13

14 IA principles: Navigation within the website interface users can navigate to the overview of the section using the section header link. There is consistent labelling between the section header and the label in the breadcrumb, and, if necessary, the subsite s primary navigation. 9. Related links Related links can be presented below both the primary and secondary navigation panels, as well as at the end of the body of a content page. In all cases they sit under a title saying Related links. The related links should directly relate to the subsite, section or page with which it is associated. 9.1 Related links associated with primary navigation (subsite) If a related link is added at subsite level, it must be relevant throughout the entire subsite, because it will be available throughout the whole subsite under the site primary navigation shown in the left-hand navigational panel. Available at 14

15 9.2 Related links associated with secondary navigation (section) If a section is displaying site secondary navigation in the right-hand navigational panel, and the link is relevant to all the pages in that section, then it can be added as a section related link. 9.3 Related links associated with a single page If a link isn t appropriate for every page or section, then it should be added only to the relevant page. Available at 15

16 IA principles Avoid choice overload a related link appearing under the left-hand or right-hand navigational panels should not repeat items which are already present in the navigation. 10. Global footer Links in the global footer are consistently presented across the University website in accordance with the graphic design. These links should at minimum include: 1. Website terms and conditions 2. Privacy and cookies statement 3. Website accessibility statement 4. Freedom of Information Scheme 5. MyEd login button These can link to the main University pages, as in the corporate website (as long as your site is compliant with these), or to your own local policies. A local footer should be consistent throughout the subsite. Available at 16

17 C. Page layouts 1. Homepage and navigational page layouts Homepages and navigational pages present access to all the sections of the subsite. All links on your homepage should go to pages within your subsite or conceptually below it; this means the content actively managed by your unit. 1.1 Homepage with site primary navigation If your homepage layout includes the site primary navigation in the left-hand navigational panel, it is acceptable to cherrypick the most important sections or pages to display as summaries and links in the centre of the homepage. 1.2 Homepage with no site primary navigation If the homepage layout does not display the site primary navigation, then every item in the primary navigation must be displayed on the homepage as a summary or link so they are made obvious to the visitor and are easy to access. The primary navigation then becomes apparent when the user goes down a level from the homepage. Available at 17

18 1.3.1 Subsite homepage layouts Homepages without site primary navigation contain eight panels, which are used to consistently present different types of content in the same locations on subsite homepages across the University website. Panels 2 to 7 can present content in one of three formats, all with or without an image: A heading (link), a summary paragraph, a link A heading (link), a series of subsequent links presented as a bulleted list A heading (link), a series of subsequent links presented as a comma-separated list It is essential that all primary navigation items are represented on the homepage. If the Dynamic subsite layout is being used, primary navigation items should not be exclusively displayed on the rotating slideshow they must be represented elsewhere also. Managing the feature panel content All overview pages that appear in your site primary navigation should appear elsewhere on the homepage. They should not appear exclusively in the feature panel. All features should link to content on your site or one of its subsites (for example a school feature linking directly to a subject area). It should not link to content on other sites (such as the central University News and events section). There s more about Managing the feature panel on the Support wiki Available at 18

19 1 Feature panel: Must include an image. The editorial focus can be one permanent item, can change to address the unit s priorities throughout the year, or can feature multiple showcase items in a rotating slideshow. It s likely that changes to the focus of content of this box would result in changes being required in other boxes. Items in the panel shouldn t result in links to items in your primary navigation. 2 News & events: Alternatively labelled News or Events. If the unit does not wish to give news and events such a high priority, a link should be located in the quick links box (8) and the box used for other purposes. News and events should not appear in other locations on the homepage. 3-5 Primary activities: Items in these boxes should reflect the high priority audiences and activities identified in the unit s business objectives for the website. 6-7 Lower priority activities: Items in these boxes should reflect the lesser priority audiences and activities identified in the unit s business objectives for the website. 7 7 About: If the unit does not wish to give About us such a high priority, a link should be located in the quick links box (8) and the box used for other purposes. About us should not appear in other locations on the homepage. 8 8 Quick links: This box can contain any other key links that have not been accommodated elsewhere on the homepage. The links can go to the overview pages of sections of the site, or to pages of content identified as particularly popular. This box cannot contain an image. Available at 19

20 2 Summary pages Summary pages provide overviews of content at lower levels of the subsite structure. A summary page should summarise and link to everything in that section. It should not link to things that are not in that section, and should not contain content in its own right. The content items are presented in the body of the page, typically using boxes, though if the section being summarised is suitably small, it may be preferable to use a series of paragraphs. Summary pages may also have a right-hand navigational panel depending on whether there are further subsections below it or just single pages. When there are only single pages, and so the right-hand navigational panel is present, the content in the panel directly corresponds to items appearing in the summary boxes. (see 7. Site secondary navigation) 3 Content pages Content pages are the place to include more detailed content. Each page has a singular and obvious topic focus, summarised by the title and opening paragraph. Content pages may also have a right-hand navigational panel depending on whether there are further subsections below its section, or just single pages alongside it. (see 7. Site secondary navigation) D. Understanding the structure options Your content structure is closely connected to the detail of the content you want to publish. Subsite or section? You will need to decide whether your content is best suited to being published as a subsite (described as a Standalone Section Type in Polopoly) or should be presented within a larger structure where it can integrate more easily with other relevant content already aimed at the same audience. Both options present distinct advantages and disadvantages. The web publisher should make a decision on which approach to take based on the nature of the content, and on the likely user experience of the primary target audience. Integration into an existing subsite Advantages: The subsite banner is retained throughout the user journey and with the original primary navigation maintained in the left-hand navigational panel, it s easy to explore high level sections and return to the homepage. Disadvantages: It s not so easy to explore different sections at the deeper levels of the site. The user must rely on breadcrumbs for direct navigation, or return to a previous page and then navigate down the structure again. Example of the section for the Science and Religion Masters course integrated in the School of Divinity website: Available at 20

21 New subsite Advantages: With a new primary navigation, it s easy for the user to explore various areas of the site using the primary and secondary navigation panels. Disadvantages: It s not so easy for the user to find the school or department with which the subsite is associated, and to be aware of, and access, the content there which is common across the school or department. Including a parent link in the new subsite banner is a way to provide a route to the school or department level. Linking to the school or department content at relevant points in your content may also be necessary but can be confusing for the user. Example of a subsite for the MSc Biotechnology programme: Available at 21

22 Available at 22