slide1 n.
Download
Skip this Video
Download Presentation
ΕΠΛ 435: Αλληλεπίδραση Ανθρώπου Υπολογιστή

Loading in 2 Seconds...

play fullscreen
1 / 29

ΕΠΛ 435: Αλληλεπίδραση Ανθρώπου Υπολογιστή - PowerPoint PPT Presentation


  • 75 Views
  • Uploaded on

ΕΠΛ 435: Αλληλεπίδραση Ανθρώπου Υπολογιστή. Navigation. 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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'ΕΠΛ 435: Αλληλεπίδραση Ανθρώπου Υπολογιστή' - olivia-rivera


Download Now An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
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.

Introduction

Τμήμα Πληροφορικής

slide3

Three Types of Navigation

  • 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.

Τμήμα Πληροφορικής

slide4

Three Types of Navigation

Τμήμα Πληροφορικής

slide5
Global Navigation

Local Navigation

Structural Navigation

Τμήμα Πληροφορικής

slide6

Global Navigation

On a lot of sites, it’s the navigation bar or set of links that you see at the top of a Web page.

Τμήμα Πληροφορικής

slide7
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

Τμήμα Πληροφορικής

where to put global navigation
At the top: But this can be limiting

Horizontal 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.

Where to put global navigation?

Τμήμα Πληροφορικής

local navigation
Local Navigation

Τμήμα Πληροφορικής

slide10
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?

Τμήμα Πληροφορικής

slide11

Levels of Global and Local Navigation

  • 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.

Τμήμα Πληροφορικής

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.

Working with the global navigation—models for navigation access

Τμήμα Πληροφορικής

slide13
Associative navigation associates additional content with an article on a page.

Associative navigation addresses two important situations for every page on your site:

What happens once the user has successfully interacted with the page? What’snext?

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

Τμήμα Πληροφορικής

slide14
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? No

If 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

Τμήμα Πληροφορικής

slide15
Examples:

The Guardian

YouTube

Asos

Associative Navigation:

What’s Next

Τμήμα Πληροφορικής

slide16
Next steps aren’t just for online stores and browsing articles. They’re critical for online applications.

Examples:

GoogleDocs

Wikipedia

Associative Navigation:

What’s Next

Τμήμα Πληροφορικής

slide17
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

Τμήμα Πληροφορικής

slide18
BBC provides associated videos to news articles

The 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

Τμήμα Πληροφορικής

slide19

Associative Navigation:

Safety Nets

Τμήμα Πληροφορικής

slide20
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

Τμήμα Πληροφορικής

slide21
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

Τμήμα Πληροφορικής

slide22
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, offices), 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

Τμήμα Πληροφορικής

slide23
How is your content organized?

What do your users want to do?

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 Navigation

Three Questions to Ask Yourself

Τμήμα Πληροφορικής

slide24
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?

Τμήμα Πληροφορικής

slide25
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?

Τμήμα Πληροφορικής

slide26
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?

Τμήμα Πληροφορικής

slide27
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

Τμήμα Πληροφορικής

slide28
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

Τμήμα Πληροφορικής

slide29
Καλή Συνέχεια

Exercise

Just Kidding

Τμήμα Πληροφορικής