HCI

Getting Around: Navigation, Signposts, and Wayfinding

Chapter 3

• Ashraf Mohamed
• Aya Adel
• Ahmed Emad
• Hager Ahmed
• Asmaa Maraey
• Omnia El-Manzalawy
• Nermeen Abdelmalik
• Mariam Abdelaziz

who are we

The patterns in this chapter deal with the challenges of navigation

Where can they or should they go next?

How can they get there from here?

How do users know where they are now?

Methods

Types

Design

Patterns

Patterns of navigation that can be useful

How to design navigation

Different types of navigation

Methods to promote wayfinding in your software

Purpose

The purpose of navigation in user experience (UX)

Important aspects of navigation

Timeline

Quiz !

Safe-explanatory pattern

Signposts are features that help users figure out their immediate surroundings

Annotated Scroll Bar

Breadcrumbs

Progress Indicator

Logo , Brand

page window titles

Signposts

Understanding the Information and Task Space

The purpose of navigation is to help the user know and understand the information space they are in

User

• what tasks they can do

Desingner

1.

Clear, unambiguous labels anticipate what you’re looking for and instruct you where to go Clear Entry Point

Good signage

Wayfinding is what people do as they find their way toward their goal ,This term is pretty ..... What ?

Wayfinding

CONTINUE

2.

Spatial Memory

Environmental clues

Sometimes, people go from sign to sign or link to link without ever really knowing where they’re going in a larger frame of reference.

3.Maps

Let’s briefly review the different types of navigation that designers commonly use and that users are probably familiar with.

Navigation

“hamburger” menu

this is a stack of three horizontal lines.

bottom of the screen

This is also found on every main screen and contains links and tools related to non‐ content aspects of the site or application

Utility Navigation

This is the site or app navigation that is on every main screen.It usually takes the form of menus, tabs, and/or sidebars

Global Navigation

Global navigation is almost always shown at the top or left of a web page, Rarely, you might find it on the right—but this placement can cause problems with page size and horizontal scrolling

Global Navigation

sign-in, help, print, Settings Editor, language tools , Mode , account settings, user profile, logout, and so on . all the utility navigation items are displayed. Often, they are collapsed behind the avatar icon, and the user must click to open it.

Utility Navigation

When a site takes advantage of social media integration, even more navigation options come into play like profile,datetime and so on. Theremight be a type of leaderboard or “trending now” component like Twitter.

Social

These are links in or near the actual content. As the user reads or interacts with the site, these links present options that might be immediately relevant to the user. They tie content together thematically.

Associative and Inline Navigation

Navigation must be designed. What navigation options are displayed, how they are labeled, and where and when the navigation displays in the UI

Design Considerations

A common form of associative navigation is a Related Articles section or panel. News sites and blogs use this a lot. When a user reads an article, a sidebar or footer shows other articles that talk about similar topics or are written by the same author.

Related Content

On smaller sites and blogs, they don’t work as well. A more common navigational technique is to list an article’s tags at the end , each tag is a link leading to an entire set of articles that share that tag.

Tags

Room

Examples

Keep Distances Short

Separate the Navigation Design from the Visual Design

Cognitive Load

What is the navigational model for your site or app? In other words, how do the different screens link to one another and how do users move between them?

Navigational Models

Lists all of the major parts of the site or app on the home screen, or “hub.” what they need to do, and comes back to the hub to go some where else. The “spoke” screens focus tightly on their jobs, making careful use of space like iPhone home screen is a good example; the Menu Page pattern found on some websites.

Hub and Spoke

Home page and every other page link to all the others . HOW ? they each have a global navigation feature, such as a top menu. As long as the user can reach any page from any other with a single jump, it’s fully connected.

Fully Connected

Slideshows, process flows, and Wizard lead the user step by step through the screens in a prescribed sequence.

Step by Step

The main pages are fully connected with one another, but the subpages are connected only among themselves You’ve seen this on sites that have subpages listed only in sidebars or subtabs. It takes two or more jumps to get from one arbitrary subpage to another.

Multilevel or Tree

Photoshop

a pyramid uses a hub page or menu page to list an entire sequence of items or subpages in one place , then has the option to use Back/Next links to step through other items in order. This is very common for content sites that publish stories as a gallery of pictures.

Pyramid

Quiz !

Back and nextMove Between sub-page

How

why

when

What

Some types of applications need little or no navigation at all. the user always knows where they are, but they might not easily find the tools they need because of the sheer number of features available at one time.

Flat Navigation

• The first is that they’re mix and match–an app or site might combine several of these.

• .The second thing is universal global navigation and short jumps are good things most of the time. But at other times, a mode with very few navigation options is better. When a user is in the middle of a full-screen slideshow, they don’t want to see a com‐plicated global navigation menu. They would rather just focus on the slideshow itself

Notes

• Third, all of these mechanisms and patterns can be rendered on screen in different ways. A complex site or app might use tabs, menus, or a sidebar tree view to show the global navigation on each page–that’s something you don’t need to decide until you

begin laying out the page. Likewise, a modal panel might be done with a lightbox or an actual modal dialog–but you can postpone that until you know what needs to be modal and what doesn’t

CONT . . .

The Patterns

Annotated Scroll Bar

Breadcrumbs

Progress indicator

Sign-in Tools

Sitemab Footer

Fat Menus

Escape Hatch

Deep Links

Model Panel

Pyramid

Menu Page

Clear Entry Points

What Present only a few main entry points into the interface so that the user knows where to start . When You are designing site or application that has a lot of first-time or infrequnt users. how When the site is visited or app started , present these entry points as (doors) into the main content . Why some app and website , when opend , presrnt the user with what looks like a morass of information and structure.

1- Clear Entry Points

-The spotify landing page

- ipad page on Apples site

Examples

-Tesla s landing page

-Prezi s landing page

Examples

What Fill the page with a list of links to contet-rich pages in your site or application . When You are designing a home page , starting screen , or any ather screen whose purpose is to be just a tabe of content - to show where users can go from here . Why With no distractions , users can focus all of their attention one the available navigation option . How menu page is one of you principle tools for designing site or app with many levels of functionality .

2- Menu Page

-The university of california

-sf.gov

Examples

- The Museum of Modern Art

Examples

What Link togather a sequence of pages with back/next links . When The site or app contains a sequence of items that a user would normally view one after another . Why The pattern reduces the number of clicks it takes to get around . How List all the items orpages , in order , on the pattern page .

3- Pyramid

-Powerpoint Presentaion

-Facebook photo Alpum

Examples

WhatA screen with no navigation option other than acknowledging its message. When Models are great for focusing on a single action or process . Why Its an easy model to understand - and to program . How in the same space on the screen where the users attention lies , place a panel, dialog a box .

4- Model Panel

-Airbnb loging model

-Macys confirmation model

Examples

wants to include a specific desired point or state that might be difficult to find otherwise,or it might take many steps to get there from a typical starting point

Use when :

What :

Capture the state of a site or app in a URL or other link that can be saved or sent toother people. When loaded, it restores the state of the app to what the user was seeing.

Deep Link

• Track the user’s position in the content, and put that into a URL. Track supportingdata there as well—comments, data layers, markers, highlighting, and so on—so thatreloading the URL will bring it all back.

• Deep Links gives the user a way to jump directly to a desired point and applicationstate.

How :

Why :

Deep link

• Sharing a YouTube video

• iOS; Deep linking from mobile web to mobile app

Examples :

You have pages that constitute some sort of serial process, such as a wizard, or anypages that lock the user into a limited navigation situation, such as a Modal Panel.

Use when :

What :

A well-labeled button or link that clearly gets the user out of their current screen andback to a known place

Escape Hatch

• Put a button or link on the page that brings the user back to a “safe place.”

• Limited navigation is one thing, but having no way out is quite another!
• This is the kind of feature that helps people feel like they can safely explore an app orsite (Safe Exploration pattern)

How :

Why :

Escape Hatch

• Curbed.com 404 error page with an escape hatch to the home page

• The LinkedIn Settings page, with link and avatar in the upper right as anescape hatch back to LinkedIn

Examples :

Quiz !

Signpost

The site or app has many pages in many categories, possibly in a hierarchy with threeor more levels.

Use when :

What :

Display a long list of navigation options in drop-down or fly-out menus. Also called“mega-menus.” Use these to show all of the subpages in site sections.

Fat Menus

• On each menu, present a well-organized list of links.
• Fat Menus can work with accessibilty technology
• Hint : You can adapt Fat Menus for mobile screens if necessary.

• Fat Menus makes a complex site more discoverable. They expose many more navigation (Safe Exploration pattern)
• Fat Menus are a form of progressive disclosure, an important concept in UI design.Complexity is hidden until the user asks to see it.

How :

Why :

Fat Menus

• The Macy’s two-level fat menu with progressive disclosure

• Starbucks coffee menu

Examples :

• The site you’re designing uses a generous amount of space on each page and youdon’t have severe constraints on page size or download time.
• The site has more than a handful of pages, but not an outrageously large number ofcategories and “important” pages

Use when :

What :

A comprehensive directory of links, organized into categories, that provides an at-aglancereview of the full scope of the website

Sitemap Footer

• Major content categories
• Information about the site or organization
• Corporate information, Contact Us, and Careers links
• Partner or sister sites; for example, sites or brands owned by the same company
• Community links such as forums
• Help and support
• Contact information
• Current promotions
• Donation or volunteer information, for nonprofits

Here are some features that you can find found in Sitemap Footer:

• Sitemap Footer make a complex site more discoverable. The pattern exposes many
• Sitemap Footer is just aset of static links.

Design a page-wide footer that contains the site’s major sections (categories) and theirmost important subpages.

How :

Why :

Sitemap Footer

• Wall Street Journal footer

• Los Angeles Times header and footer

Examples :

This pattern is purely convention; the upper-right corner is where many peopleexpect such tools to be

Why :

Sign-In Tools are useful for any site or service for which users often sign in.

Use when :

What :

Place utility navigation related to a signed-in user’s site experience in the upper-rightcorner. Show tools such as shopping carts, profile and account settings, help, andsign-out buttons.

Sign-In Tools

Sign-In Tools

Sign-out button or link Account settings Profile settings Site help Customer service Shopping cart Personal messages or other notifications A link to personal collections of items (e.g., image sets, favorites, or wish lists) Home

Cluster together tools such as the following:

How :

Reserve space near the upper-right corner of each page for Sign-In Tools. Place the user’s sign-in name there first (and possibly a small version of their avatar, if it exists)

Examples

• Twitter sign-in tools

• Google sign-in tools

Quiz !

UtilityNavigation

-Near an edge of the page, place a small map of the pages in the sequence. -. Make it one line or column if you can. -Make it lighter or darker than the others. - If the pages or steps are numbered, use the numbers—they’re short and easy to understand.

How:

On each page in a sequence, show a map of all the pages in order to show steps in a process, including a “You are here” indicator. Indicate how far they’ve come through a series of steps—and, more importantly, how far they have yet to go before the process is finished.

why:

Progress Indicator

Examples :

Examples

On each page that is below a certain level in the navigational hierarchy. Put a graphic or text character to indicate the parent-child relationship between them. This is usually a right-pointing arrow, triangle, greater-than sign (>), slash (/), or right angle quotes (»).

How:

Why:

-Breadcrumbs show each level of hierarchy leading to the current page, from the top of the application all the way down. In a sense, they show a single linear “slice” of the overall map of the site or app. -Breadcrumbs help a user to pinpoint where they are.

A specific type of navigation that shows the path from the starting screen down through the navigational hierarchy.

What:

Breadcrumbs

Examples

Examples

Examples

An addition to ordinary scroll bar functionality so that it serves as a notification or as a map of the content in the current document or screen.

what:

Annotated Scroll Bar

Put a position indicator on or near the scroll bar. Either static or dynamic indicators.

How:

Why a scroll bar?

Because that’s where the user’s attention is focused. The track is the overview; the scrolled window is the detail.

Annotated Scroll Bar

Example:

It can give useful UI control and navigation feedback. When the shift from one state to another is visually continuous, it’s not so bad. In other words, you can animate the transition between states so that it looks smooth, not discontinuous. This helps keep the user oriented.

Why:

Add motion and transformations to the appearance of objects to indicate that an action is happening.

What:

Animated Transition

macOS dock magnification and app window transition

Example:

• Brighten and dim • Expand and collapse • Fade in, fade out, and cross-fade • Slide • Spotlight

For each type of transformation that you use in your interface, design a short animation that “connects” the first state with the second state. Some of the types of transitions to consider include the following:

How:

Animated Transition

Tesla.com, loading screen “zoom in” animation

Example:

. Prezi’s unique presentation software features animated “zoom reveals,” slides, and zoom-out animations.

Example:

For being a great audience

Thank you!