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

McCracken & AyresCopyright © 2004 by Prentice Hall Contrast Make different items look different. Contrast can draw attention. 2

McCracken & AyresCopyright © 2004 by Prentice Hall How can we make this more interesting? 3

McCracken & AyresCopyright © 2004 by Prentice Hall Use more contrast 4

McCracken & AyresCopyright © 2004 by Prentice Hall Talk about boring! 5

McCracken & AyresCopyright © 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 way You can find lots of others 6

McCracken & AyresCopyright © 2004 by Prentice Hall Here’s one way, but there are many other possibilities 7

McCracken & AyresCopyright © 2004 by Prentice Hall The principles are seen in combination Eddie Bauer site (next slide) has Horizontal alignment Vertical alignment Proximity, to group like items Consistency, in type size and font for links Contrast, between SALE and most else 8

McCracken & AyresCopyright © 2004 by Prentice Hall 9

McCracken & AyresCopyright © 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 konsistensi Page-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

McCracken & AyresCopyright © 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

McCracken & AyresCopyright © 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

McCracken & AyresCopyright © 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

McCracken & AyresCopyright © 2004 by Prentice Hall Navigation A navigational system is a visual representation of an organizational structure 14

McCracken & AyresCopyright © 2004 by Prentice Hall Three types of navigation systems Hierarchical Derived from hierarchical organizational structure Ad hoc Hyperlinks Database Search engines The most common is hierarchical, with many ad hoc links added 15

McCracken & AyresCopyright © 2004 by Prentice Hall Rare to use only one Most websites build on a judicious combination of these three, with one dominant theme Hierarchical plus hyperlinks very common 16

McCracken & AyresCopyright © 2004 by Prentice Hall Hierarchical navigation Implements a hierarchical organization system and provides users with a top-down view of a site. 17

McCracken & AyresCopyright © 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

McCracken & AyresCopyright © 2004 by Prentice Hall hierarchical 19

McCracken & AyresCopyright © 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

McCracken & AyresCopyright © 2004 by Prentice Hall Global navigation bar can be vertical Global navigation 21

McCracken & AyresCopyright © 2004 by Prentice Hall Showing more levels in the hierarchy Drop-downs or pull-outs can show the next level 22

McCracken & AyresCopyright © 2004 by Prentice Hall Breadcrumbs show user “This is where you are how you got here”  jejak breadcrumb 23

McCracken & AyresCopyright © 2004 by Prentice Hall Many sites have subsites  masuk ke website lain Subsites 24

McCracken & AyresCopyright © 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

McCracken & AyresCopyright © 2004 by Prentice Hall Ad hoc links are very common 26

McCracken & AyresCopyright © 2004 by Prentice Hall Ad hoc links 27

McCracken & AyresCopyright © 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

McCracken & AyresCopyright © 2004 by Prentice Hall The most familiar example of database navigation: Google  harus input words 29

McCracken & AyresCopyright © 2004 by Prentice Hall Database 30

McCracken & AyresCopyright © 2004 by Prentice Hall Database  karena seolah-olah melihat nilai pd tabel database 31

McCracken & AyresCopyright © 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

McCracken & AyresCopyright © 2004 by Prentice Hall Navigation elements Navigation bars Menus Frames Site maps 33

McCracken & AyresCopyright © 2004 by Prentice Hall Text-based navigation bars 34

McCracken & AyresCopyright © 2004 by Prentice Hall Graphical navigation bars 35

McCracken & AyresCopyright © 2004 by Prentice Hall Building context for the user with navigation bars 36

McCracken & AyresCopyright © 2004 by Prentice Hall Be careful with metaphors: what do these mean?  multi interpretasi 37

McCracken & AyresCopyright © 2004 by Prentice Hall Intended meanings. Moral: add words, too! 38

McCracken & AyresCopyright © 2004 by Prentice Hall So add words! 39

McCracken & AyresCopyright © 2004 by Prentice Hall So add words! 40

McCracken & AyresCopyright © 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 site Search: find related pages by supplying a word or a phrase About Us: information about the company that created the site Shop: browse for merchandise Check Out: supply shipping and billing information, complete transaction 41

McCracken & AyresCopyright © 2004 by Prentice Hall Menus pack in a lot of information; note the dropdown from Software 42

McCracken & AyresCopyright © 2004 by Prentice Hall Site maps Textual Takes work For a big site, must be selective Graphical Cool—for a small site. A site map is no substitute for good navigation 43

McCracken & AyresCopyright © 2004 by Prentice Hall Graphical site map example 44

McCracken & AyresCopyright © 2004 by Prentice Hall 45

McCracken & AyresCopyright © 2004 by Prentice Hall Frames A frame is an area of the browser window that stays visible as the user moves from page to page A simple way to provide global navigation But hogs screen real estate: you can’t do anything else with that space May not print Hard (impossible?) to bookmark Used much less often than formerly 46

McCracken & AyresCopyright © 2004 by Prentice Hall Built-in browser services History of pages visited Back button Forward button Color coding of links Unvisited Visited Active Don’t mess with the convention that blue is an unvisited link. 47

McCracken & AyresCopyright © 2004 by Prentice Hall Page-level navigation aids Remember proximity, alignment, consistency,contrast: make the layout obvious Make 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 mandatory Make button placement consistent: before or after its associated text 48

McCracken & AyresCopyright © 2004 by Prentice Hall Page-level navigation aids 49

McCracken & AyresCopyright © 2004 by Prentice Hall Make error reports clear Say explicitly what the problem was Perhaps change the color of the offending box Show as many errors as possible on one page; don’t make user correct one error per attempt to send the data Don’t make user re-enter correct data Sounds 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 51