DESIGN. 7. Navigation and information structuring.

Size: px

Start display at page:

Download "DESIGN. 7. Navigation and information structuring."

Gerald Lucas
5 years ago
Views:

1 DESIGN 7. Navigation and information structuring

2 User-Centred Design ISO : Human-centred design for interactive systems Meets requirements Plan the user centred process 4. Evaluation against requirements 1. Specify the context of use 3. Produce design solutions 2. Specify user requirements

3 How do you create a usable navigation structure? Two common methods: Affinity diagramming Card sorting For use with end-users!

4 Group exercise Firstly, some preparation... Create a food/grocery list for: A company barbecue party, or The family weekly food shopping, or Formal dinner with some new friends One item per sticky

6 Affinity diagrams Simple and quick Initial visual analysis easy but limited Should be conducted with end-users Can also be used by design group members Must consider different user types / usage situations

7 Card sorting techniques Explore how users group different items of information Most universally used usability method for web/intranet structures Conducted with end-users, usually working individually Typically uses physical cards, but can be electronic Each card has a name of a piece of information printed on it

8 Card sorting in progress

9 Card sorting open vs closed Open card sorting Typically includes items (cards) Participants sort items they feel are similar into groups Participants name the groups In large card-sorts, the groups can in turn be grouped at a higher level Used as a basis for creating a new structure

10 Card sorting open vs closed Closed card sorting Participants sort items into pre-named groups based on where they best fit Can include more cards than an open sort closed sorting is quicker to do Used to assess the strengths and weaknesses of a proposed structure

11 Card sorting How many users? Typically participants for a basic card-sorting activity It depends how statistically reliable you need to be The activity is done individually (you don t need to bring all participants together at the same time!) More people are needed if you wish to divide up participants into groups and analyse differences between them

12 Method overview (open card sort) 1. Select content to be sorted 2. Print information titles on cards 3. Number the cards to facilitate later analysis (random numbering) 4. Shuffle the cards 5. Ask the user to sort the cards into groups of related content 6. Ask users to name the groups 7. If there are many groups, create a second level and name overall groups 8. Have a post-sort questionnaire / short interview to discuss sorting strategy, missing content, etc.

13 A finished card sort

14 Other data to collect Relative positioning of card piles Cards that are difficult to place Heading labels used Suggestions for missing content

15 Working with the data Simple/small scale sorts manually or spreadsheet

16 Note: This type of spreadsheet diagram of what items are grouped where assumes limited number of categories / consistent category naming (e.g. Closed sort)

17 Working with the data Larger studies Cluster analysis using a statistics package or purpose-built tool

18 Results a dendrogram from IBM s EZsort package

19 Large structures A single open card sort can t usually include more than items This is typically sufficient to establish the top level and give good input to the 2nd level For larger/deeper structures the approach can be used iteratively first establish the top levels, then a new set of card sorts for major subsections.

20 Card sorting was used to structure Swedbank s Swedish intranet ( Kanal 1 ) First an overall card sort, followed by specific card sorts for the main subsections.

are unlikely to be meaningful places to look for content from a user s

21 It can be risky to design a navigation structure without such objective data Better, but not brilliant Thinking ahead and Spotlight sound good but are unlikely to be meaningful places to look for content from a user s perspective. Our portfolio is where they try to organise their products and services.

22 Navigation design & layout Pre-requisite: Structure (at least top levels & size) Next steps? Where to place it? How? Navigation style Categorization and labelling/headings Ordering and visual grouping Personalisation?

23 Where do users expect to see navigation-related elements Our own research from January internet users participated (Follow-up study to previous ones in 2005 and 2009)

24 Main navigation Home

25 Search

26 Shopping basket Dec 2005 Jan 2009 Jan

27 Navigation solutions Appropriate navigation style will depend on the nature of the content, the user, and usage situation Remember that navigation is not the only means of movement

28 The nature of the categories influences how many there should be there is no universal magic number

29 Global vs local navigation

30 Mobile first approach to navigation presentation

31 Traditional information site menus - relatively straightforward, though limited

32 Unclear left navigation where am I?

33 Global functionality can be perceived as local Poor contrast in left menu / navigation can be missed

34 3 quite different ways of handling navigation levels

35 and how it currently works on a smartphone

36 Moving between desktop and mobile can be a problem if navigation is very different

37 Inconsistent subnavigation Meaningless concept images used in teaser/ navigation elements Meaningless Här link

38 Sub-navigation opens on the right side, mainly under the scroll line on a typical wide screen

39 The super drop down menu - potential to provide a better overview / more direct access

40 A broad flat structure can work for scanning through all the alternatives

41 The traditional deep tree structure (hasn t changed much in 20 years!)

42 Sometimes an ordered flat list is the only sensible way

43 Menu items Begin labels with the keyword Be concise e.g. Product list rather than List of available products Use terminology familiar to users Semantically distinct items (unambiguous) Action options vs object options Verbs vs Nouns Give the user consistent cues as to what happens upon selection...

44 Menu items Sub-dialogue (not a direct function) Sub-menu

Menu items ordering / grouping Alphabetical? Only useful when the user knows the wording, and there is no other logical order (e.g. Font lists) By frequency of use or criticality?

45 Menu items ordering / grouping Alphabetical? Only useful when the user knows the wording, and there is no other logical order (e.g. Font lists) By frequency of use or criticality? Extremely frequent or critical items at the top (though provide shortcuts for high freqency items anyway) By logical task flow? Related to the order of users work.

46 Alphabetical is often not the most sensible approach

50 Ordered by importance / most frequently used

51 Menus presented as link lists Avoid line wrapping where possible Though don t reduce menu items to meaningless abreviations Bullet link lists Users generally prefer bulleted link lists Users are more accurate/perform better when using them Increased spacing between links also helps

52 A lot of background information impossible to scan through the menu

53 The arrow next to the menu item is to help indicate that a submenu exists, but it creates other problems here.

FILE ORGANIZATION. GETTING STARTED PAGE 02 Prerequisites What You Will Learn

FILE ORGANIZATION. GETTING STARTED PAGE 02 Prerequisites What You Will Learn FILE ORGANIZATION GETTING STARTED PAGE 02 Prerequisites What You Will Learn PRINCIPLES OF FILE ORGANIZATION PAGE 03 Organization Trees Creating Categories FILES AND FOLDERS PAGE 05 Creating Folders Saving