Use LEFT and RIGHT arrow keys to navigate between flashcards;
Use UP and DOWN arrow keys to flip the card;
H to show hint;
A reads text to speech;
53 Cards in this Set
- Front
- Back
|
To Navigate according to Winston Dictionary
|
to steer or manage a ship or plane.
|
|
|
Navigation as far as HCI is concerned
|
choosing a path through a website's information space is a aspect of usability.
|
|
|
Effective navigation is a product of what two factors.
|
1. Appropriate content organization, after user interview. 2. Appropriate visual organization, that reinforces the content organization. |
|
|
Site Level Navigation
|
Pertains to understanding and moving through the information architecture of a website.
|
|
|
Page level navigation
|
encompasses techniques that enhance the comprehension of a webpage.
|
|
|
3 Strategies for an effective navigation system
|
1. choose navigation that reflects content structure. 2. Choose visual navigation elements that will build content for users. 3. be aware of built in services provides by web browsers and leverage them. |
|
|
3Major Types of navigation system.
|
1. Hierarchical 2. Ad hoc. 3. Database drive. |
|
|
Explain a Hierarchical navigation system.
|
implements a hierarchical organization system and provides users with a top-down view of a site.
|
|
|
Explain a Ad-Hoc navigation system.
|
hypertext organizational structure. used to as additional links to connect content relationships
|
|
|
Explain a Database-Driven navigation system.
|
is it rare for a pure database driven site , but search engines are database driven.
|
|
|
Information about hierarchal naviagation
|
1. its hard to navigate when you get deeper into the website but this can be helped using global navigation or adding links.
|
|
|
Global Navigation
|
Links that appear consistently in the every on of the pages, and offers navigation options for the entire site.
|
|
|
Examples of global navigation
|
1. Horizontal Nav bar at the top of a page. 2. Vertical Nav bar on the site of the page. |
|
|
secondary pages
|
pages that are able to get to the home page with one click.
|
|
|
What should you use for site that has three or more levels.
|
Use a method called breadcrumbing
|
|
|
What is bread crumbling?
|
a method of displaying a record of links the user clicked in the process of traveling to the current page.
|
|
|
Example of bread crumbing
|
Home >> Shop >> Cart >> Process Order Projects List >> Computer Graphics. |
|
|
What is a subsite?
|
A collection of pages within a website, that share common navigational system, one that may be different in style from the website as a hole. (Local Navigation System)
|
|
|
What does ad-hoc mean.
|
created for a specific purpose.
|
|
|
Navigation elements and examples
|
visual organization of text and graphics that display user options and current position in the site. (Bars and Menus)
|
|
|
two types of navigation bars
|
text based graphical |
|
|
navigation bar
|
collection of links that are grouped together on a page.
|
|
|
issues with graphic navigation bar
|
1. Limited bandwidth slowing down page load. 2. Maintenance cost ( easier change text). 3. Using some images can be confusing.(consider your audience) |
|
|
What is icon intutativness
|
user ability to correctly identifiy a particular function of an icon based on the picture.
|
|
|
How do you overcome some issues with graphic navigation
|
accompany some text explanation and input alt information for users who have graphics turned off.
|
|
|
Lables
|
Word presented as links in a navigation bar and represent a path to a subset of information.
|
|
|
how do you create some good labels
|
card sorting interviews, participant gives names to piles of cards and look for patterns, these become some ideas for labels
|
|
|
Menus
|
Present a list of possible links in the form of a drop menu or a scrollable list. (large number of option of a single page.)
|
|
|
advantage of a menu
|
allows to single lick access to a third level page, click reduction, reduction of downloaded pages
|
|
|
disadvantages of menu.
|
Not all options are visible at one time. The user must act- by mouse over to activate the list. |
|
|
Other navigation elements
|
frames site maps |
|
|
frame Now replaced with CSS |
scrollable pane that continues to occupied that same part of the browsers while the user navigates the site.
|
|
|
disadvantages of frames
|
hog browser space printing hard to bookmark |
|
|
site map
|
a graphical representation of a sites architecture. New text pages table of content that serves the same purpose.
|
|
|
Built in browsers functions
|
back an forward button on the browser. browser history address bar. color coded hyperlinks.(blue new, purple visited) |
|
|
Page level navigation forms
|
Make form field appropriate size so that the user can easily see the submit button in a single screen. Make required fields clearly.(*)Required |
|
|
Best practice for forms
|
if error, refresh with correct information already input. along with a message to what is wrong. Long forms need go to next error link. if doing data validation make sure you check for all the errors to give the user as much information as possible. |
|
|
Cycle for prototyping
|
Design Prototype Evaluate |
|
|
Cycle from website design to final production
|
Design One or More prototypes Implementation Site goes live |
|
|
Six types of prototypes
|
Evolutionary Revolutionary Horizontal Vertical Global Local |
|
|
Evolutionary Prototype
|
Prototype become part of the implmentation
|
|
|
Revolutionary prototype
|
The actual prototype is not part of the implementation it is thrown away
|
|
|
Horizontal Prototype
|
Little depth of functionality. example developed only up to secondary pages.
|
|
|
Vertical Prototype
|
presents limited number of fully functioning features
|
|
|
Global prototype
|
Has breadth and depth its a prototype of the entire site, gives users the opportunity to get a feel of the entire site.
|
|
|
Local Prototype
|
Model as very small piece, usually stand alone and is not to the rest of the pages. "Option wars" |
|
|
Benefits of prototyping
|
Cost effective. Handling usability problems before implementation. |
|
|
Disadvantages of Prototyping
|
Stakeholders need convincing Hi Fi prototypes may give management false expectations HI FI prototypes may make management shorten deadline |
|
|
Low Fi prototypes
|
Don't resemble final product at all. But fast and cheap to make. |
|
|
Advantage of paper prototypes.
|
Easy to build no wait for dev fast to change easy to refine lack of polish doenst effect user opinion of prototype. |
|
|
Disadvantages of HI fi Prototypes
|
changes take too long one bug can destroy user test |
|
|
Disadvantage of Lo Fi Prototype
|
have to create conventions for indicating an item is click able don't show tell to management because they don't look refined can simulate response time |
|
|
3 Steps to building a prototype
|
assemble a kit. -gather materials set a deadline line and stick to it.- resist improvement construct the prototype- not and illistation it has be a model of every elemement the user will encounter. Test with users for evaluation |
