McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous...

One of the pages reachable from the previous slide

Contrast

Make different items look different.

Contrast can draw attention.

How can we make this more interesting?

Use more contrast

Talk about boring!

This is a quiz! (Not really)

Look again at the previous slide. How many ways can you improve it?Can you put all four principles to work?Next slide shows one possible wayYou can find lots of others

Here’s one way, but there are many other possibilities

The principles are seen in combination

Eddie Bauer site (next slide) hasHorizontal alignmentVertical alignmentProximity, to group like itemsConsistency, in type size and font for links

Contrast, between SALE and most else

3. Navigation Design

Navigation design concerns with:Site-level navigation: making it easy for the user to get around the site (global navigation : berlaku utk seluruh halaman web, jika ada menu yg sama brlaku pd bbrp halaman) ingat konsistensiPage-level navigation: making it easy for the user to find things on a page (khusus berlaku utk sebuah halaman contoh:link read more pada berita/artikel yang panjang)

Navigation

Choosing a path through a website’s information space.

Its goals:To help people know where they are in a site,To give them confidence when choosing where they want to go next.

Navigation: connections

Good navigation builds on good content organization

Choose a navigation system that reflects the content’s organizational structure

Visual design and navigation design are interrelated

Choose visual navigation elements that build context for a user

Navigation: connections

When creating site-wide navigation, you are bringing together the knowledge you have collected about users and their tasks and about how users personally organize the content.

Navigation

A navigational system is a visual representation of an organizational structure

Three types of navigation systems

HierarchicalDerived from hierarchical organizational structure

Ad hocHyperlinks

DatabaseSearch engines

The most common is hierarchical, with many ad hoc links added

Rare to use only one

Most websites build on a judicious combination of these three, with one dominant themeHierarchical plus hyperlinks very common

Hierarchical navigation

Implements a hierarchical organization system and provides users with a top-down view of a site.

A pure hierarchy is rare

We add links to facilitate moving around the hierarchy without going all the way to the top; note extra links at bottom level

hierarchical

Global navigation

For a small site, it may be possible to show the major links on every page

Global navigation

Global navigation bar can be vertical

Global navigation

Showing more levels in the hierarchy

Drop-downs or pull-outs can show the next level

Breadcrumbs show user “This is where you are how you got here” jejak

breadcrumb

Many sites have subsites masuk ke website lain

Subsites

Ad hoc links

Ad-Hoc systems serve a hypertext organizational structure.

Ad-Hoc navigation systems are additional links that can help to make connections required by the content’s relationships.

Ad hoc links are very common

Ad hoc links

Database navigation

It provides a bottom-up view of a site.

A database navigation permits users to find desired information while downloading as few pages as possible.

The most familiar example of database navigation: Google harus input words

Database

Database karena seolah-olah melihat nilai pd tabel database

Building Context

It means helping users understand where they are and where they are going next.

Careful use of appropriate navigational elements help built context.

Navigation elements

Navigation barsMenusFramesSite maps

Text-based navigation bars

Graphical navigation bars

Building context for the user with navigation bars

Be careful with metaphors: what do these mean? multi interpretasi

Intended meanings. Moral: add words, too!

So add words!

Some standard meanings

Label and meaning Home: the main entry point of a Web site, generally containing the top-level links to the siteSearch: find related pages by supplying a word or a phraseAbout Us: information about the company that created the siteShop: browse for merchandiseCheck Out: supply shipping and billing information, complete transaction

Menus pack in a lot of information; note the dropdown from Software

Site maps

TextualTakes work For a big site, must be selective

GraphicalCool—for a small site.

A site map is no substitute for good navigation

Graphical site map example

Frames

A frame is an area of the browser window that stays visible as the user moves from page to pageA simple way to provide global navigationBut hogs screen real estate: you can’t do anything else with that spaceMay not printHard (impossible?) to bookmarkUsed much less often than formerly

Built-in browser services

History of pages visitedBack buttonForward buttonColor coding of links

UnvisitedVisitedActive

Don’t mess with the convention that blue is an unvisited link.

Page-level navigation aids

Remember proximity, alignment, consistency,contrast: make the layout obviousMake size of text box appropriate to the amount of data (How many forms have you filled out where some box is MUCH too small for what you have to enter? What were those people thinking?)Show which fields are required, with * or Required optional dan mandatoryMake button placement consistent: before or after its associated text

Page-level navigation aids

Make error reports clear

Say explicitly what the problem wasPerhaps change the color of the offending boxShow as many errors as possible on one page; don’t make user correct one error per attempt to send the dataDon’t make user re-enter correct dataSounds obvious, huh? Then why are so many forms terrible?Sales are lost at this point, in big bad quantities

call out box,error langsung ditunjukkan

Reference:

McCracken, D.D. & Ayres, R. (2004), User-Centered Web Site Development: A Human-Computer Interaction Approach: AND The Essence of Professional Issues in Computing, Prentice Hall.

McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous...

Documents

Transcript of McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous...

McCRACKEN POWER PLANT OHIO STATE UNIERSITY UTILITIES UTILITIES McCRACKEN POWER PLANT McCracken Power Plant was built in three phases starting …

Kaa: A Python Implementation of Reachable Set Computation ...

SDD Reachable banks - Fintro

Steve McCracken Peter McCracken, MLS Serials Solutions, Inc.

Capítulo 11. McCracken

McCracken and Beer, 2014

Real Men Don't Sing by Allison McCracken

McCracken Week 4

Reachable Workspace a partir de multiplos kinects´ para ...

Eﬃcient Representation and Computation of Reachable Sets for …krogh/checkmate/download/papers/hull.pdf · Eﬃcient Representation and Computation of Reachable Sets for Hybrid

Mccracken Culture Consumption

Volunteer Application Packet - McCracken County

McCracken, Luther

Reachable Batteries

Eﬃcient Representation and Computation of Reachable …users.ece.cmu.edu/~krogh/checkmate/download/papers/hull.pdf · Eﬃcient Representation and Computation of Reachable Sets

BALLARD & MCCRACKEN COUNTY

Projecting and Art - Laurin McCracken

“Probably…Maybe…About…”: Creating Reachable Reading Goals

Backwards Reachable Set

A Low-power, Reachable, Wearable and Intelligent IoT ...