ΕΠΛ 435: Αλληλεπίδραση Ανθρώπου Υπολογιστή
-
Upload
olivia-rivera -
Category
Documents
-
view
18 -
download
1
description
Transcript of ΕΠΛ 435: Αλληλεπίδραση Ανθρώπου Υπολογιστή
Navigation
ΕΠΛ 435:Αλληλεπίδραση
Ανθρώπου Υπολογιστή
2Τμήμα Πληροφορικής
Introduction
Navigation appears to be one of the easiest and most obvious things about the Web. It’s all those links that take you to other pages.
Navigation seems simple, but it’s the most subtle and complex part of the interface.
The job of navigation is to clearly state where a user will travel in the information architecture.
11/11/2014
3Τμήμα Πληροφορικής
There are three types of navigation, each defined by where it takes the user
Structural navigation helps users navigate the organizational structure of the Web site.
Associative navigation allows users to jump to related information
Utility navigation catches anything important the user needs access to that structural and associative miss.
Three Types of Navigation
11/11/2014
4Τμήμα Πληροφορικής
Three Types of Navigation
11/11/2014
5Τμήμα Πληροφορικής
Global Navigation
Local Navigation
Structural Navigation
11/11/2014
6Τμήμα Πληροφορικής
On a lot of sites, it’s the navigation bar or set of links that you see at the top of a Web page.
Global Navigation
11/11/2014
7Τμήμα Πληροφορικής
When you categorized your content and chose organization systems, you probably had some items that were more valuable to the users and the business. If you created a hierarchical organization system, you also have some top-level categories. These are your global navigation.
Global navigation gives users access to anywhere else on the site, no matter where they currently are.
Global navigation has a second, less obvious but perhaps more important, function: it tells you what the site is all about and what you should use it for.
Global navigation needs to appear on every page of a Web site
Global Navigation
11/11/2014
8Τμήμα Πληροφορικής
Where to put global navigation?
At the top: But this can be limitingHorizontal navigation has its drawbacks. Vertical space on a Web page can increase forever, but there’s a limited amount of horizontal space.
Global navigation on the left: Designers use vertical global navigation less often because it limits the available space for both local navigation and page content
Overall, it doesn’t matter exactly where your global navigation lives. The essential point is that
it appears on every page of your site.11/11/2014
9Τμήμα Πληροφορικής
Local Navigation
11/11/2014
10Τμήμα Πληροφορικής
Local navigation often appears “below” the global navigation. This reinforces how your content is organized: conceptually, a category has sub-categories below it. This also places the most relevant links closest to where the user needs them.
Where to put local navigation?
11/11/2014
11Τμήμα Πληροφορικής
Navigation can also be identified by “level.” Your global navigation is navigation level one.
Level two is the first level of your local navigation.
Level three is one level of navigation down.
Levels of Global and Local Navigation
11/11/2014
12Τμήμα Πληροφορικής
Working with the global navigation—models for navigation access
Your navigation will necessarily shape how users find content. Two basic patterns:
Pogosticking: In pogosticking, users go to a subcategory, and then must go back to the parent category to choose a different subcategory.
Crabwalking: In crabwalking, users can move in a sideways fashion through categories, like the locomotion of a crab. Users choose a category and can choose links to sibling categories provided on the page.
11/11/2014
13Τμήμα Πληροφορικής
Associative navigation associates additional content with an article on a page.
Associative navigation addresses two important situations for every page on your site:
1. What happens once the user has successfully interacted with the page? What’s next?
2. What happens if this page isn’t what the user wants? What’s the safety net that catches him before he leaves your site?
Associative Navigation:What’s Next and Safety Nets
11/11/2014
14Τμήμα Πληροφορικής
Your user has navigated your site, found what he wanted to do, and done it. Now, he sits there, staring at the screen. Pretty soon he types Google in the address bar, and he is gone.
Is that really what you want? NoIf you sell things, you want him to see more things
to buy; if you sell advertising, you want more page views. But most of all, you want him so happy and engaged that his five-minute visit turns into 15, and the next day he comes back wondering what else you’ve got!
Ask yourself, what do our visitors want to do with what they’ve found? What’s the next step?
Associative Navigation:What’s Next
11/11/2014
15Τμήμα Πληροφορικής
Examples:
The GuardianYouTube Asos
Associative Navigation:What’s Next
11/11/2014
16Τμήμα Πληροφορικής
Next steps aren’t just for online stores and browsing articles. They’re critical for online applications.
Examples:GoogleDocsWikipedia
Associative Navigation:What’s Next
11/11/2014
17Τμήμα Πληροφορικής
Now imagine failure. Your user has navigated your site and found something he didn’t want. Now, he sits there staring at the screen. Do you really want to force him back to try again?
Do you want to take the risk that he’ll decide it’s a waste of time and go somewhere else?
If your visitors arrive at a page and decide it’s not what they wanted, give them another page to go to with something new to look at. Link to something on a related topic, or link to the same content in a different format.
Associative Navigation:Safety Nets
11/11/2014
18Τμήμα Πληροφορικής
BBC provides associated videos to news articlesThe New York Times is fabulous at creating safety
nets to catch wandering users. If you’d rather not read, they offer video, photos, and even audio. And at the bottom you get links to past coverage and related searches.
Safety nets are useful everywhere. At Ask.com, a set of related searches at the right of the page helps you refine your query. If your fi rst search doesn’t work, what’s to stop you from going over to Google or Yahoo! or MSN or anyone? Safety nets imagine what might go wrong and then create a mechanism for helping the user out of that problem
Associative Navigation:What’s Next and Safety Nets
11/11/2014
19Τμήμα Πληροφορικής
Associative Navigation:Safety Nets
11/11/2014
20Τμήμα Πληροφορικής
Associative navigation is all about associating more content with whatever content the user is currently looking at.
By time: Items that occur, were published, or were saved around the same time.
By type: More articles, videos, or photos, based on what the user is looking at.
By topic or subject: More items in the same category. By interest: Most popular items. By owner or group: More items by the same author
or from the same group.By community: More items based on what people like
you are checking out.
Associative Navigation:Driving associative navigation with
metadata
11/11/2014
21Τμήμα Πληροφορικής
Utility navigation connects tools and features that assist visitors in using the site.
A convention has emerged where the utility navigation lives at the top right of the page Usually, it lives there because the rest of the navigation system occupies the top and left of the page. So, the top right of the page is somewhere both out of the way, yet still accessible.
Utility Navigation
11/11/2014
22Τμήμα Πληροφορικής
Ask yourself—what common or important tasks are ignored by your global navigation?
What links will your visitors want or need if browsing your taxonomy isn’t what they want to do?
Common items that appear as utility navigation include sign-in and sign-out, access to a user’s account or profile, help, contact info, links to physical locations (branches for banks, stores, offi ces), and search.
Often utility navigation is placed adjacent to the global navigation, because it also needs to be accessible everywhere on the site.
Utility Navigation
11/11/2014
23Τμήμα Πληροφορικής
1. How is your content organized?2. What do your users want to do?3. What do you want your users to do?
The answers to these three questions will ensure your navigation includes the links it needs,
while leaving out what it doesn’t.
Designing NavigationThree Questions to Ask Yourself
11/11/2014
24Τμήμα Πληροφορικής
Sometimes, users will already have an expectation of how your content and features will be organized. Employee directories are often organized alphabetically. Events are organized by date. Other times, metadata may offer an alternative way to organize your content.
Letting users navigate content by the way it’s organized is a good way to make sure they can find what they’re looking for. Sometimes, though, you don’t want to rely on users to browse around. Sometimes, you want to make sure users can do what they came to do.
How is your content organized?
11/11/2014
25Τμήμα Πληροφορικής
This want question is pretty important. You may have a wonderful organization system, but users may prefer to navigate another way. Your organization system and your navigation system are not necessarily the same thing
However, if there’s something users come to your site to do, your navigation needs to help them do it, even if that’s different from how your content is organized. If there’s a mismatch, you’ll have a lot of frustrated users. Even worse, they’ll have trouble finding what they need, buy less, register less, download less, and see fewer ads.
What do your users want to do?
11/11/2014
26Τμήμα Πληροφορικής
A successful Web site emerges from a balance between what the user wants and what the business needs.
Navigation should help your users do what they want, but it also needs to help them do what you want them to do.
Navigation facilitates your business model. Good navigation makes your business money.
What do you want your users to do?
11/11/2014
27Τμήμα Πληροφορικής
Pagination is a special form of navigation. It’s a simple tool that lets people flip through multiple pages. Breaking a large group of items into bite-sized pieces is a common wisdom. It allows a faster download and prevents information overload. It’s useful for categories that hold a large number of products, or for extremely long documents, such as e-books or in-depth articles. And, of course, it provides more pages for advertising spots.
Pagination—Navigating Multiple Pages
11/11/2014
28Τμήμα Πληροφορικής
When deciding to paginate a form or process, you should decide how important it is that users complete the form. If it’s ok for users to abandon the form and go somewhere else on your site, then leave the global and local navigation visible. If, however, it’s critical that they finish the form, then remove the global and local navigation. The user will have fewer distractions and be able to focus on completing the process.
Paginating forms and processes
11/11/2014
Τμήμα Πληροφορικής 2911/11/2014
Καλή Συνέχεια
Just Kidding
Exercise