McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous...
-
Upload
isaiah-rannells -
Category
Documents
-
view
213 -
download
0
Transcript of McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous...
![Page 1: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/1.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
One of the pages reachable from the previous slide
1
![Page 2: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/2.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
Contrast
Make different items look different.
Contrast can draw attention.
2
![Page 3: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/3.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
How can we make this more interesting?
3
![Page 4: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/4.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
Use more contrast
4
![Page 5: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/5.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
Talk about boring!
5
![Page 6: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/6.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
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
![Page 7: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/7.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
Here’s one way, but there are many other possibilities
7
![Page 8: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/8.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
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
![Page 9: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/9.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall9
![Page 10: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/10.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
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
![Page 11: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/11.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
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
![Page 12: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/12.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
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
![Page 13: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/13.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
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
![Page 14: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/14.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
Navigation
A navigational system is a visual representation of an organizational structure
14
![Page 15: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/15.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
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
![Page 16: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/16.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
Rare to use only one
Most websites build on a judicious combination of these three, with one dominant themeHierarchical plus hyperlinks very common
16
![Page 17: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/17.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
Hierarchical navigation
Implements a hierarchical organization system and provides users with a top-down view of a site.
17
![Page 18: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/18.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
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
![Page 19: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/19.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
hierarchical
19
![Page 20: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/20.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
Global navigation
For a small site, it may be possible to show the major links on every page
Global navigation
20
![Page 21: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/21.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
Global navigation bar can be vertical
Global navigation
21
![Page 22: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/22.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
Showing more levels in the hierarchy
Drop-downs or pull-outs can show the next level
22
![Page 23: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/23.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
Breadcrumbs show user “This is where you are how you got here” jejak
breadcrumb
23
![Page 24: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/24.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
Many sites have subsites masuk ke website lain
Subsites
24
![Page 25: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/25.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
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
![Page 26: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/26.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
Ad hoc links are very common
26
![Page 27: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/27.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
Ad hoc links
27
![Page 28: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/28.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
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
![Page 29: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/29.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
The most familiar example of database navigation: Google harus input words
29
![Page 30: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/30.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
Database
30
![Page 31: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/31.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
Database karena seolah-olah melihat nilai pd tabel database
31
![Page 32: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/32.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
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
![Page 33: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/33.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
Navigation elements
Navigation barsMenusFramesSite maps
33
![Page 34: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/34.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
Text-based navigation bars
34
![Page 35: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/35.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
Graphical navigation bars
35
![Page 36: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/36.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
Building context for the user with navigation bars
36
![Page 37: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/37.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
Be careful with metaphors: what do these mean? multi interpretasi
37
![Page 38: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/38.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
Intended meanings. Moral: add words, too!
38
![Page 39: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/39.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
So add words!
39
![Page 40: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/40.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
So add words!
40
![Page 41: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/41.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
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
![Page 42: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/42.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
Menus pack in a lot of information; note the dropdown from Software
42
![Page 43: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/43.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
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
![Page 44: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/44.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
Graphical site map example
44
![Page 45: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/45.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall45
![Page 46: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/46.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
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
![Page 47: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/47.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
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 48: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/48.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
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 49: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/49.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
Page-level navigation aids
49
![Page 50: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/50.jpg)
McCracken & Ayres Copyright © 2004 by Prentice Hall
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
![Page 51: McCracken & AyresCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide 1.](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c7c5503460f949301ee/html5/thumbnails/51.jpg)
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 & Ayres Copyright © 2004 by Prentice Hall51