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

McCracken & Ayres Copyright © 2004 by Prentice Hall

One of the pages reachable from the previous slide

1


Contrast

Make different items look different.

Contrast can draw attention.

2


How can we make this more interesting?

3


Use more contrast

4


Talk about boring!

5


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

6


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

7


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

8


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)

10


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.

11


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

12


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.

13


Navigation

A navigational system is a visual representation of an organizational structure

14


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

15


Rare to use only one

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

16


Hierarchical navigation

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

17


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

18


hierarchical

19


Global navigation

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

Global navigation

20


Global navigation bar can be vertical

Global navigation

21


Showing more levels in the hierarchy

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

22


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

breadcrumb

23


Many sites have subsites masuk ke website lain

Subsites

24


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.

25


Ad hoc links are very common

26


Ad hoc links

27


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.

28


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

29


Database

30


Database karena seolah-olah melihat nilai pd tabel database

31


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.

32


Navigation elements

Navigation barsMenusFramesSite maps

33


Text-based navigation bars

34


Graphical navigation bars

35


Building context for the user with navigation bars

36


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

37


Intended meanings. Moral: add words, too!

38


So add words!

39


So add words!

40


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

41


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

42


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

43


Graphical site map example

44


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

46


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.

47


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

48


Page-level navigation aids

49


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

50

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