v.b. weeks 7-81 weeks 7-8 navigation. v.b. weeks 7-82 navigation lost in hyperspace the most...
Post on 19-Jan-2016
214 Views
Preview:
TRANSCRIPT
V.B. weeks 7-8 1
Weeks 7-8
Navigation
V.B. weeks 7-8 2
Navigation
Lost in hyperspace
The most important problem in hypertext is the feeling of being lost in a maze of inter-connected information pieces.
V.B. weeks 7-8 3
General navigation questions (they apply to all sites)• A. Where am I?
• B. How do I move?
• C. Where can I go and how will I get there?
• D. How can I go ‘back’?
V.B. weeks 7-8 4
Navigation: Where am I?• There is a need for a browsing utility that
allows a reader to see his/her position in relation to the whole, by showing a map (a "bird's-eye-view") of the hypertext.
• A browser should be interactive, allowing the user to point on a node on the map and go there.
V.B. weeks 7-8 5
Navigation: How do I move?
Movement between different nodes can be made using text anchors, icons, implicit links, buttons, etc.
There are significant differences between:• links to different types of information (pop-up, node,
etc.)• links within a hypertext and links across to different
hypertext• implicit links and explicit links
V.B. weeks 7-8 6
Navigation: How do I move?
• Is scrolling down a form of following an implicit link?
• Should it be made explicit?
V.B. weeks 7-8 7
Navigation: How do I move?Reader cognitive overload
It is possible to carry the non-linearity too far (offer too many links) and confuse
the reader with too many alternative paths to follow.
V.B. weeks 7-8 8
Navigation: How do I move?Reader overload can lead to:
• Readers who wish to follow everything so as not to miss information
• Readers who get frightened and want to go back
In both cases the information in the current node is missed.
V.B. weeks 7-8 9
Navigation: How do I move?1. Browser’s built-in navigation features
2. Global & local navigation system
3. Search engines
V.B. weeks 7-8 10
Navigation: How do I move?1. Browser’s built-in navigation
features
• Back & Forward• History• Bookmarks• URL• Anchor’s colour provide a sense of ‘place’
V.B. weeks 7-8 11
Navigation: How do I move?2. Global & local navigation systems
Global navigation system (site wide)
Applies to the whole site
Usually it appears as a navigation bar at the bottom or the top of the screen
V.B. weeks 7-8 12
Navigation: How do I move?Most common options:
Home / About us / Contact
Smart idea!!! Include context within the navigation system
V.B. weeks 7-8 13
V.B. weeks 7-8 14
V.B. weeks 7-8 15
Navigation: How do I move?Local navigation systems serve ‘sub-sites’ sub-site (Nielsen): a collection of web
pages within a larger site that invites a common style and shared navigation mechanism unique to those pages
Necessary, if we have a large site
V.B. weeks 7-8 16
Navigation: How do I move?
3. Search Engines!
(a different aspect of navigation)
V.B. weeks 7-8 17
Navigation techniques (for global & local navigation systems)
• Frames
• Image maps
V.B. weeks 7-8 18
Frames• HTML frames enable Web documents to
display HTML documents in multiple views.
• Displaying multiple HTML documents simultaneously enables Web designer to keep certain information visible while other information is scrolled or replaced.
V.B. weeks 7-8 19
Frames• Create the two (or more) html files you
want to display in the frame.
• Decide the design of your file (columns / rows etc).
• Create the ‘frameset’ file.
V.B. weeks 7-8 20
Frames – HTML
<html><head> <title> Frames </title> </head>
<FRAMESET ROWS= ‘40%, *’><FRAME SRC=‘file1.html’ NAME=frame1><FRAME SRC=‘file2.html’ NAME=frame2></FRAMESET>
</html>
V.B. weeks 7-8 21
Frames
Frames provide an effective and simple way to design Web sites but…
Problems with frames:
• Browser problems
• URL
V.B. weeks 7-8 22
Image Maps• Images are a valuable addition to a Web
page for their visual appeal, but their use as navigation tools is limited.
• We can only use an entire image as a hyperlink.
• The need to subdivide an image into multiple regions and use each region as a hyperlink (image map).
V.B. weeks 7-8 23
Image maps
V.B. weeks 7-8 24
Developing an image map• Create the image that map uses (jpeg, gif extension).
• Define the regions that make up the ‘hot spots’ (virtual shapes) of the map (interactive parts).
• Create the HTML file or the URL for each ‘hot spot’.
• Link the virtual shapes to the image and to the corresponding HTML file. (configuration file).
V.B. weeks 7-8 25
Image maps
V.B. weeks 7-8 26
Developing an image map – virtual shapesHTML supports the following ‘shapes’:
(x1,y1)
(x2,y2) x,yr
x1,y1(x2,y2)
(x3,y3)(x4,y4)
(x5,y5)
• Rectangle (x1,y1) (x2,y2)• Circle (x,y, r)• Poly (x1,y1) (x2,y2) (x3,y3) …
V.B. weeks 7-8 27
Developing an image map – virtual shapes‘SHAPE’ is attribute to the ‘AREA’ tag.
Its possible values are:
• Default (entire area as one image)
• Rect
• Circle
• Poly
V.B. weeks 7-8 28
Developing an image map – configuration file
<IMG SRC=‘my image’ USEMAP = ‘#MapName’ >
<MAP NAME=‘MapName’>
<AREA SHAPE=‘rect’ COORDS= ‘17,15,115,80’ HREF=URL or file.html><AREA SHAPE=‘circle’ COORDS=‘175,45,40’ HREF=URL or file.html >
<AREA SHAPE=‘poly’ COORDS= ‘171,5,11,58,20,30’ HREF = URL or file.html>
</MAP>
V.B. weeks 7-8 29
Developing an image map – software
• Mapedit – for PC Windows & Unix
• WebMap – for Mac
V.B. weeks 7-8 30
Navigation: Where can I go and how will I get there?
Apart from the set of links appearing on the information within a node, the reader can move in a number of ways depending on the structure of the hypertext.
Previous Next
Overview
Back
V.B. weeks 7-8 31
Navigation: Where can I go and how will I get there?Moving on the hierarchy
• Going back to where you came
• Going up to overviews
• Going left and right apart from back and forth
V.B. weeks 7-8 32
Navigation: Where can I go and how will I get there?
The previous and next nodes depend on the order the nodes have in a group they belong in or within the whole of the hypertext.
V.B. weeks 7-8 33
Navigation• Moving on a hierarchy can become very complex as
nodes get grouped into clusters:
Previous Next
Overview
Back
context A context B
Previous
Next Overview
Global Overview
Previous and next: Are they the same as back and forward? No - but most people mix them up and that leads to confusion.
V.B. weeks 7-8 34
Navigation: Where can I go and how will I get there?
The previous and next of a node are always fixed - but where you go when you backtrack from a node depends on how you got there.
V.B. weeks 7-8 35
Navigation: Where can I go and how will I get there?E.g. next(G)=H => prev(H)=G
A
C
G H
D
Next
Previous
Where will the reader go from H by pressing the 'back‘ button?
It is NOT defined by the structure.It depends on how he/she got there.
V.B. weeks 7-8 36
Navigation: Where can I go and how will I get there?How can I go to X?• Another side of being lost in hyperspace is not
knowing how to get to a specific node. Searching allows "hyper-jumping" directly to the required node.
• However, searching creates a hyper-jump over existing links, which was not intended by the author.
• Selecting from a Browser is also hyper jumping.
V.B. weeks 7-8 37
Navigation: Where can I go and how will I get there?SearchingSearching could take place • in all contents of all nodes (e.g. find all places
where "Fred" appears). • in specified parts of nodes (e.g. find all places
where "Fred" appears in node title)• in anchor text (e.g. find all places linked by text
including the word "Fred")(b) and (c) could coincide
V.B. weeks 7-8 38
Navigation: Where can I go and how will I get there?
What happens if you don't know the exact node you want?
• Searching should allow 'multiple hits' where a vaguely defined search query returns a set of nodes from which the reader can select. Such linking to a set of nodes (instead of only one) is called 'fat links'.
Searchpoint
Fat link
V.B. weeks 7-8 39
Navigation: Where can I go and how will I get there?Guided Tours
• Some readers tend to follow as many links as they can so as not to miss information
• One solution to avoid confusion is to provide
Guided Tours - a metaphor for tourists' guided tours - where readers are shown some of the nodes one by one, in a pre-defined order.
V.B. weeks 7-8 40
Navigation: Where can I go and how will I get there?How much more to see?
• What is out there for me? - Readers should be given the overall picture, which they miss when leaving the book.
• The picture should involve not only what is there and relation of each to others, but also size of each in the whole.
V.B. weeks 7-8 41
Navigation: Where can I go and how will I get there?The need to mark only part of your history
Bookmarks• Bookmarks allow users to dynamically mark nodes
they've seen, so that they can clearly identify them to go back later on - metaphor for physical bookmarks marking pages in books.
• By hyperjumping and bookmarking the reader is dynamically making his/her your own trails over the hyperspace.
V.B. weeks 7-8 42
Navigation: How can I go back?How can I go back?
• Backtracking is essential for any hypertext system (securing your previous position aids confidence in going forward).
• Backtracking should always be made in the same way
• Backtracking should not only be possible one level at a time, but it should allow 'jumping' to two, three or more levels back, to a node selected by the reader, or by default to the ‘home page’.
V.B. weeks 7-8 43
Navigation: How can I go back?
Is this back to where I was? (It looks different to me)
It is essential that, when a reader goes back to a node previously seen, what he/she faces is he/she left, the exact way it was left.
V.B. weeks 7-8 44
Navigation: How can I go back?Is 'back' = 'undo'? There is a semantic
difference between 'back' and 'undo'. Going back means "I've seen this node, now I want to go back" while 'undo' means "Let us pretend I didn't see this node at all". A system that treats them as different should make it clear.
V.B. weeks 7-8 45
Navigation: How can I go back?
How many levels back can I go?
In theory, a reader should be allowed to trace back his/her steps all the way to the beginning. However, in some systems this is not easily implement able (e.g. going 1000 levels back).
How can I go home?
It is important that the reader feels that he/she can always return to the starting place as this boosts confidence in travelling in hyperspace.
V.B. weeks 7-8 46
Navigation: Keeping track
• History lists show all nodes visited so far - i.e. a 'history' of what the reader has seen so far. What should go in there? A
B C
D E
F
G
Current node
E.g. Reader sees in order A, B, C, D, E, F.
Should history show:A, B, C, D, E, F or A, B, A, C, D, C, E, F, E (by including backtracking)?
V.B. weeks 7-8 47
Navigation: Keeping track
• Keeping everything in a history list means that backtracking lengthens the history list - this is how most systems do it.
• However, that also means that selecting 'back' does not correspond to going back in history, but going forward (in history list).
V.B. weeks 7-8 48
Navigation: Keeping track• If ‘back’ means ‘select the previous node
from the current one in history list’ and we keep everything in the history list, then we might enter into a loop.
• Hence, for 'going back to X' the reader cannot use the history list to make a choice.
V.B. weeks 7-8 49
Navigation: Keeping track• Path - the direct line from starting point to
current point.A
B C
D E
F
G
Current node
Path to current node
Other links
E.g. Reader sees in order A, B, C, D, E, F. Path shows A,C,E. 'Back' goes to last place explicitly linking here (i.e. it does 'Undo').
V.B. weeks 7-8 50
General navigation questionsHow can I go back? (history)
Action History listStart A AGoto C ACGoto F ACF
B
A
C
D FEHG
Keeping track in History
V.B. weeks 7-8 51
General navigation questionsHow can I go back? (history)Back ACFCGoto E ACFCEGoto B ACFCEBGoto D ACFCEBDGoto E ACFCEBDEHyperjump: H ACFCEBDEHBack ACFCEBDEHEBack ACFCEBDEHEDBack ACFCEBDEHEDBBack ACFCEBDEHEDBEBack ACFCEBDEHEDBECGoto E ACFCEBDEHEDBECEGoto G ACFCEBDEHEDBECEG
V.B. weeks 7-8 52
General navigation questionsHow can I go back? (path)
Action Path listStart A AGoto C ACGoto F ACF
B
A
C
D FEHG
Keeping track in Path
V.B. weeks 7-8 53
General navigation questionsHow can I go back? (path)Back ACGoto E ACEGoto B ACEBGoto D ACEBDGoto E ACEBDEHyperjump: H ACEBDEHBack ACEBDEBack ACEBDBack ACEBBack ACEBack ACGoto E ACEGoto G ACEG
V.B. weeks 7-8 54
Navigation - a closer lookPurpose oriented questions
Product oriented questions
V.B. weeks 7-8 55
NavigationA. Shopping sites
Purpose oriented questions:
How do I know that my finance information is secure?Incorporate security measures and advertise themGain users’ trust by letting them know that you care about their security
How can I protect my privacy?Advertise a policy that supports the privacy of shopper’s data & preferences
V.B. weeks 7-8 56
NavigationA. Shopping sitesMore purpose oriented questions:
How can I find the item I want? What if I do not know what I want?Search mechanisms and suggestions
How can I preview the product?
What if I have problems?
V.B. weeks 7-8 57
NavigationA. Shopping sitesProduct oriented questions:
How can I find books by a particular author?
How can I find similar books?
Where can I get reviews/recommendations?
How do I find out about new releases?
V.B. weeks 7-8 58
More topics on navigation
A. Clustering
B. Making the viewer intelligent– Avoid loops– Avoid reader’s overload
V.B. weeks 7-8 59
ClusteringClustering is the grouping of related nodes
together so that the complexity of large hypertexts is reduced.
Unclustered hypertext:
BT
UofW
Poetry
Tennis E-mailTheatre
Name
Phone number
V.B. weeks 7-8 60
Clustering - Clustered hypertext:
Clustering does not alter the nodes themselves; instead it introduces an extra layer.
Clustering is very useful for presenting a large hypertext in a browser. Clusters themselves can be further 'looked-into' to see the positions of nodes within the cluster.
PersonalDetails
Working Experience
Interests
V.B. weeks 7-8 61
ClusteringAutomated clustering
It is essential, as hypertexts tend to get larger and more complex that the process of clustering is taken over - partly or in whole - by the computer.
Two main methods of automatic clustering:• Content-based clustering• Structure-based clustering
V.B. weeks 7-8 62
ClusteringContent-based clustering• Each node considered individually examining its
attributes against certain criteria
Simplest form of content-based clustering:
• All nodes whose properties satisfy certain criteria form a cluster, e.g. split the pages (nodes) of these notes to clusters named Electronic documentation, Hypertext systems, SGML, Navigation, etc.
V.B. weeks 7-8 63
Clustering
• Different clusterings can co-exist on the same hypertext
e.g. University staff can be clustered by field:
Computer Science Biology
Law
V.B. weeks 7-8 64
Clustering
• and/or by position:
Researchers
Academics
Admin
V.B. weeks 7-8 65
ClusteringStructure-based clustering:
Instead of checking nodes, collections of nodes are considered examining their attributes (as a network of nodes) against certain criteria.
Simplest form of structure-based clustering is link-based clustering,
e.g.All nodes that are linked by annotation links are clustered together.
V.B. weeks 7-8 66
Making the viewer intelligent
How can we adapt our site to user’s requirments?
Protect the user:Avoid loopsAvoid reader overload
Serve the user:Adapt the site to the level of expertise of
the userCreate user’s profile and use it.
V.B. weeks 7-8 67
Intelligent sites–Protect the userAvoid loopsAllowing a reader to form a loop (i.e. to
follow links forward and reach a node already seen) will always cause a problem.
Imagine the case where a reader sees after 1000 nodes the 136th again -
"Is it the same one? Let's just follow it and see"
V.B. weeks 7-8 68
Intelligent sites–Protect the user
What is required to avoid loops?
•Keep a strict tree hierarchy in the design of the system?That is not feasible in a large system, and not even desirable.
•Loops can be detected by keeping what has been seen.(How does that fit with the History? How does it fit with the Path? )
V.B. weeks 7-8 69
Intelligent sites–Protect the user
Avoid reader overload.
Cut what was seen already
Cut what's already on the screen
Allow users to dynamically dismiss links by cancelling their anchors.
V.B. weeks 7-8 70
Intelligent sites–serve the userWhat can the site know about its reader?
The system could adapt its behaviour depending on the expertise of its reader. E.g. novice users could be protected from hyper-jumps, and could be shown many different types of nodes as one, so as to be sheltered from the underlying complexity.
Who is the expert?
Should the system believe a user who says he/she is an expert?
V.B. weeks 7-8 71
Intelligent sites-serve the user
What does the viewer already know about its reader?
Keeping track of the reader's favourite trails as a set of choices from which the reader can select next timeKeeping track of most favourite trail as default guided tour - Is it good to alter things every time?
Provide the user with info using expert systems /explanation systems
V.B. weeks 7-8 72
Intelligent sites-serve the user
Getting information about the reader's background, learning what a group of readers want by Machine Learning
Intelligent agentsHow?
V.B. weeks 7-8 73
Intelligent Agents–what are they?
Agent: someone who is employed to act on your behalf.
Intelligent agent: a software that assists people and act on their behalf. They can automate repetitive tasks, remember things, intelligently summarize complex data, learn from you and even make recommendations to you.
(Gilbert, IA: the right info at the right time, IBM Corporation, 1997, p1)
V.B. weeks 7-8 74
Intelligent Agents - How do they work?
They operate on the general principle:
If X then Y
A simple agent : mail-agent
V.B. weeks 7-8 75
Intelligent Agents – How do they work?
INTELLIGENT ??? Agents: if they have the capacity to Adopt / modify their behaviour – to learn
How?Continually monitor the user’s interaction with the computer
Direct and indirect user’s feedback
Learn from examples given by the user
Ask other agents
V.B. weeks 7-8 76
Intelligent Agents – How can they help?
Provide assistance with Web search (by providing and filtering the data)
Automate processes done by administrators (keep records, etc)
Make suggestions
Automatically notify users of recent events
top related