{"id":1224,"date":"2015-10-27T12:00:07","date_gmt":"2015-10-27T12:00:07","guid":{"rendered":"https:\/\/blogs.ncl.ac.uk\/web\/?p=1224"},"modified":"2015-10-22T13:05:36","modified_gmt":"2015-10-22T12:05:36","slug":"using-design-to-help-users-navigate-your-site","status":"publish","type":"post","link":"https:\/\/blogs.ncl.ac.uk\/web\/2015\/10\/27\/using-design-to-help-users-navigate-your-site\/","title":{"rendered":"Using Design to Help Users Navigate Your Site"},"content":{"rendered":"

In our training for planning and writing for the web we talk a lot about user tasks. We use the core model to identify which pages on our websites provide the answers to our users\u2019 tasks<\/strong> and also meet our business goals. These are known as the website\u2019s core pages<\/strong>.<\/p>\n

It\u2019s incredibly important that we help our users get to these core pages, as they may sometimes be two or three levels down in the site\u2019s structure. One thing we can do to help is to create inward paths<\/strong> to them from site homepages and section openers.<\/p>\n

Top task driven homepages<\/h2>\n

Deciding what goes on to a site\u2019s homepage can be a political battle. Everyone wants a link to their page. It\u2019s also often done in isolation from planning the content on the rest of the site. Not anymore. We can use our core pages and users\u2019 top tasks to determine what should go on a site\u2019s homepage.<\/p>\n

“the homepage is usually the last page we design. (How can you design the wrapping before you know what\u2019s inside?)”
\nIda Aalen, The Core Model: Designing Inside Out for Better Results<\/a><\/p><\/blockquote>\n

Take the new Information for Schools website, for example. Instead of having links to all of the main sections of the site (which can now be accessed from the menu on the left), there is a grid with links to the core pages: Events on Campus, Book a Visit and Support for Visits. There\u2019s also a feature on the PARTNERS programme with links into the core pages within this section.<\/p>\n

\"Screenshot<\/a>Design features for section openers<\/h2>\n

First off, let\u2019s deal with the question of what exactly we mean by \u2018section opener\u2019. These are the top level pages below your homepage<\/strong>. You may find it easier to think of this in terms of a hierarchy diagram, with branches for the main sections of a site coming off the homepage.<\/p>\n

\"Website<\/a>There are a couple of design features you can add to your section openers, depending on their purpose.<\/p>\n

Like your homepage, you may choose to include a top task grid<\/strong> to help your users navigate to the core pages in the section.<\/p>\n

Alternatively, you can choose to add a masthead<\/strong> which creates a visual opener for the section. This allows you to include some contextual information to answer users\u2019 questions, as well as links to other pages in the section.<\/p>\n

\"Screenshot<\/a>Visual hierarchy<\/h2>\n

Using grids and mastheads at the section opener level can help to create a visual hierarchy so your users know where they are in the site. If we have these features deeper in the site it can cause confusion. We want to create a clear distinction between the look of a section opener, and a standard content page.<\/p>\n

Here you can see the difference visually of a section opener and a standard content page at the next level down.<\/p>\n

\"Screenshot<\/a>

Top task grid on the AFRD Business and Outreach section opener<\/p><\/div>\n

\"Screenshot<\/a>

Standard content page for the AFRD Services to the Rural Economy page<\/p><\/div>\n

With persistent use of grids there\u2019s also another problem \u2013 where\u2019s all your content? With grid after grid, you\u2019re never actually providing the core content that will answer your users questions.<\/p>\n

Conclusion<\/h2>\n

You can use top task grids on homepages and section openers to help your users navigate to your core pages.<\/p>\n

Sometimes on a section opener you may want to provide some contextual content as well as links to core pages in the section. You can use a masthead in these cases.<\/p>\n

Make sure you’re creating differentiation in the design of the section openers and your core pages<\/strong>. Only use grids and mastheads for your top level pages\u00a0so they don’t lose their impact and so users know where they are in your site. Also remember that grid layouts are navigation rather than content so too many can create extra steps for users to find your core content.<\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

In our training for planning and writing for the web we talk a lot about user tasks. We use the core model to identify which pages on our websites provide the answers to our users\u2019 tasks and also meet our … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":755,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,61],"tags":[97,96],"class_list":["post-1224","post","type-post","status-publish","format-standard","hentry","category-content","category-design-and-development","tag-core-model","tag-user-tasks"],"_links":{"self":[{"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/posts\/1224","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/users\/755"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/comments?post=1224"}],"version-history":[{"count":3,"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/posts\/1224\/revisions"}],"predecessor-version":[{"id":1234,"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/posts\/1224\/revisions\/1234"}],"wp:attachment":[{"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/media?parent=1224"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/categories?post=1224"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/tags?post=1224"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}