LIS650 lecture 4 Thomas Krichel

today CSS Properties –Box properties-- List properties –Table properties-- Classification properties –(Audio properties)-- Generated content properties –Paged properties Nielsen on site design http Information architecture Semantic web

the 'inherit' value Each property can have the 'inherit' value. In this case, the value of the property for the tag is determined by the containing tag. Sometimes, 'inherit' is the default value.

validating CSS It is at check your style sheet there when you wonder why the damn thing does not work. Note that checking the style sheet will not be part of the assessment of the web site.

the box model It derives from the assumption that there is a conceptual box around the element contents. The total width of the box that the box takes is the sum of –the left and right margin –the left and right border width –the left and right padding –the width of the box' contents A similar reasoning holds for the height of a box.

box properties I {border-color: } can hold up to four colors, separated by blanks –one value means: all borders have the same color –two values mean: first number for top and bottom, second for left and right –three values mean: first sets top, second left and right, third bottom –four values mean: first sets top, second sets right etc. {border-width: } can hold up to four widths, for example "thin think medium 2mm"

box border properties {border-style:} {border-top-style} {border-right-style:} {border- bottom-style:} {border-right-style:} take the following values –none No border. {border-width:} becomes zero –hidden Same as 'none', except in terms of border conflict resolution –dotted The border is a series of dots. –dashed The border is a series of short line segments. –solid The border is a single line segment. –double The border is two solid lines. –groove The border looks as though it were carved into the canvas. –ridge The border looks as though it were coming out of the canvas. –inset The border makes the box look like embedded in the canvas. –outset The border makes the box look like coming out of the canvas.

box properties II {border-top-width: }, {border-bottom-width: }, {border-left-width: } and {border-right-width: } also exist. same properties exists for {margin-top: }, {margin-bottom: } etc and {padding-top: }, {padding-bottom: } etc. {float: } can be one of 'left', 'right' or 'none' which is the default. If a float is set, the text near the tag floats on the left or right site of the tag contents. You can use this to create run-in headers.

box properties III width: sets the total width of the box height: sets the total height of the box both take a dimension or the word 'auto' e.g. img {width: 100px; height auto}

{position:} 'static' The box is a normal box, laid out according to the normal flow. 'relative' The box's position is calculated according to the normal flow. Then it is offset relative to its normal position. The position of the following box is not affected. 'absolute' The box's position (and possibly size) is specified with the {left:}, {right:}, {top:}, and {bottom:} properties that specify offsets with respect to the box's containing tag. There is no effect on sibling boxes. 'fixed' The box's position is calculated according to the 'absolute' model, but the reference is not the containing tag but: For continuous media, the box is fixed with respect to the viewport For paged media, the box is fixed with respect to the page

properties with {position:} {top:}, {right:}, {bottom:}, {left:} set offsets if positioning is relative, absolute or fixed. They can take length values, percentages, and 'auto'. the effect of 'auto' depends on which other properties have been set to 'auto'

box properties V {z-index: } let you set and integer value for a layer on the canvas where the tag will appear. Thus if tag 1 has z-index value 1 and tag 2 has z-index value number 2, they are laying on top of each other. (this is the same thing as the "layer" from photoshop) browser support for this property is limited.

the {clear: } property tells the user agent whether to place the current element next to a floating element or on the next line below it. –value 'none' tells the user agent to put contents on either side of the floating element –value 'left' means that the left side has to stay clear –value 'right' means that the right side has to stay clear –value 'all' means that both sides have to stay clear box properties VI

box properties VII The {visibility: } property sets the visibility of a tag. It takes values –'visible' The generated box is visible. –'hidden' The generated box is invisible (fully transparent), but still affects layout. –'collapse' The tag collapses in the table. If used on elements other than rows or columns, 'collapse' has the same meaning as 'hidden'. With this you can do sophisticated alignments

box properties VII The {clip:} and {overflow:} properties let you specify how large the box of contents is. Example p {overflow: hidden; clip: rect(15px, -10px, 5px, 10px)} when the {overflow: } property is not set to 'hidden' it will take no effect. otherwise, it displays the start of the paragraph in the rectangular box. {overflow:} can also take value scroll to add a scroll bar and auto to add a scroll bar only when needed. browser support is not sure

classification properties VII {overflow: } sets what to do when the element flows out of its box. It takes values –visible contents may be rendered outside tag box –hidden contents is clipped, no access to clipped contents –scroll contents is clipped but can be reached through a scroll. Scrollbar will always appear, whether contents overflows or not. When the medium is 'print' or 'projection', overflowing content should be printed. –auto The behavior of the 'auto' value is user agent- dependent, but should cause a scrolling mechanism to be provided for overflowing boxes.

example for clipping I didn't like the play, but then I saw it under adverse conditions - the curtain was up. - Groucho Marx <!– you can try out the {overflow:} here

list properties {list-style-position: } can take the value inside or outside. The latter is the default, the property refers to the position of the list item start marker {list-style-image: } define the bullet point of a list as a graphic, use url(URL) to give the location of the graphic. {list-style-property: } –takes the values disc, circle, square, none with an unordered list –takes the value decimal, lower-roman, upper- roman, lower-alpha, upper-alpha with ordered list.

table properties I {border-collapse: } allows to choose the fundamental table model. It can take two values –'separate' implies that each cell has its own box. –'collapse' implies that adjacent cells share the same border

table properties II The properties on this slide are only useful if you choose the separated border model. You can set the distance between adjacent cells using the border-spacing: property. Set it to two distances to specify different horizontal and vertical values empty-cells: can be set to –'show' shows empty cells with their border –'hide' does not show the border around an empty cell there are some other table properties

classification properties I {display: } sets the display type of an tag, it take the following values –'block' displays the tag contents as a block –'inline' displays it as inline contents –'list-item' makes it an item of a list, you can then attach list properties to it –'none' does not display it –'run-in' (see later) –'compact'(see later)

classification properties II {display: } also takes the following values –table-- table-footer-group –table-row -- table-row-group –table-cell-- table-column –table-caption -- table-column-group –inline-table-- table-header-group these means that they behave like the table elements that we already discussed

run-in box If a block box (that does not float and is not absolutely positioned) follows the run-in box, the run-in box becomes the first inline box of the block box. Otherwise, the run-in box becomes a block box. Example on next page

example for run-in box a run-in box example h3 { display: run-in } a run-in heading. and a paragraph of text that follows it and it continues on the line of the h3

compact box If a block-level box follows the compact box, the compact box is formatted like a one-line inline box. The resulting box width is compared to one of the side margins of the block box, –left margin if direction is left-to-right –right margin if direction is right-to-left If the inline box width is less than or equal to the margin, the inline box is given a position in the margin as described immediately below. Otherwise, the compact box becomes a block box.

compact box example <div style="dt { display: compact } dd { margin-left: 4em }> short description goes here. too long for the margin description goes here.

classification properties III the whitespace: property controls the display of white space in a block level tag. –'normal' collapses white space –'pre' value similar to tag –'nowrap' ignores carriage returns only

generated contents properties generated contents is, for example, the bullet appearing in front of a list item. {content:} can be used with the :before and :after selectors. Example p.note:before {content: "note"} will insert the string "note" before any paragraph in the class 'note'. The content can be –a text string –a url(URL) where the contents is to be found –a attr(att) where att is the name of the attribute, the content of which is being inserted

generated contents properties II Here are some counter properties –{counter-reset: counter} resets a counter counter –{counter-increment: counter} increments a counter –{counter(counter)} uses the counter Example h1:before {counter-increment: chapter_counter; counter-reset: section_counter; content: "Chapter " counter(chapter_counter) ":"} and then we can use h2 for the sections, of course! browser support uncertain!

Paged media support I CSS has the concept of a page box in which paged output should be placed rule can be used to specify the size of the {size: 8.5in 11in} Valid values are one or two lengths and they words portrait and landscape. The latter will depend on the default print sheet size, country- specific.

Paged media support II You can add {margin: }, {margin-top: }, {margin- left: }, and {margin-right: } properties. They will add to the margins that the printer will set by default, and these margins you will not be able to control. You can add a {marks: crop} property to add crop marks You can add a {mark: cross} property to create registration marks.

Paged media support III You can use three pseudoclasses to specify special cases –:first for the first page –:left for any left page –:right for any right page Example :first {margin-top: 3in}

Named pages You can give a page rule an optional name. rotated { size: landscape} Then you can use this with the page property to specify specific ways to print things. Example table {page: rotated} will print the table on a landscape sheet. This comes in handy for bulky tables.

Actual page breaking Pages will break if –the current page box flows over or if –a new page format is being used with a {page: } property You can take some control with the {page-break- before: } and {page-break-after: } properties. They take the values –auto– always – avoid– left– right The latter two make sure that the element is on a left or right page. Sometimes this will require two page breaks.

conclusions These are not all the properties. Audio properties are still missing But I am not sure if I should go into more.

Nielsen on site design This is the longest of the chapters in his book. It is about the organization of sites. But the chapter itself is badly organized. It looks like a Jackson Pollock painting and reads like a bad student essay –no structure –things repeated from before

Nielsen on site design Usually there is more attention on pages design than on site design. Presumably because the page design is visual. But site design is more important. Study found that only 42% of users could find simple answers to questions on a web site.

the home page has to be designed differently than other pages. must answer the questions –where am I? –what does this site do? need a directory of main area needs a summary of the site purpose a principal search feature may be included, otherwise a link to a search page will do you may want to put news, but not prominently

the home page make the home pages a splash screen is not a good idea the name of the site should be very prominent, more so than on interior pages, where it should also be named There should be a link to the homepage from all interior pages, maybe in the logo. The less famous a site, the more it has to have information about the site on interior pages. Users should not be "forced" to go through the home page.

metaphor (why does he talk about this here?) it is usually not a good idea to have metaphor on the home page. a notable exception: the shopping cart –has become a standard feature –but still illustrates some limits of metaphors when you want to buy multiple items of the same kind when you want to move something out of the cart

why navigation? Navigation should address three questions –where am I? relative to the whole web relative to the site the former dominates, as users only click through 4 to 5 pages on a site –where have I been? but this is mainly the job of the browser esp. if links colors are not tempered with –where can I go? this is a matter for site structure

site structure to visualize it, you have to have it first. Poor information architecture will lead to bad usability. Some sites have a linear structure, but most sites are hierarchically organized. What ever the structure, it has to reflect the users' tasks, not the company structure.

Nielsen's example company A corporate site may be divided into –product information product families –individual products –employment information--investor information Now consider a page with configuration and pricing for SuperWidgets. It may belong to –company's web site-- Widgets products –products category-- SuperWidgets –pricing and configuration Nielsen says: show all five levels of navigation. Have links to WidgetsClassic and MiniWidgets on the SuperWidgets page.

breath vs depth in navigation some sites list all the top categories on the left or top –users are reminded of all that the site has to offer –stripe can brand a site through a distinctive look an alternative is to list the hierarchical path to the position that the user is in, through the use of breadcrumbs –can be done as a one liner combining both –takes up a lot of space-- can be done as an L shape –recommended for large (10k+ pages) with heterogeneous contents

large volumes of information most user interfaces on the web are clones of the design of the Mac in They are not designed to handle vast amounts of information. Nielsen does not say why. Historically, early web pages had long lists of links Nowadays, there is more selective linking Users want site maps but they don't seem to be much help.

reducing navigational clutter aggregation shows that a single piece of data is part of a whole summarization represents large amounts of data by a smaller amount filtering is throwing out information that we don't need truncation is having a "more" link on a page example-based presentation is just having a few examples

subsites most sites are too large for the page belonging to them adding much information. therefore subsites can add structure a subsite is a bunch of pages with common appearance and navigational structure, with one page as the home page. –each page in the subsite should point to the subsite home page as well as to global homepage –should combine global and local navigation

search and link behavior Nielson says that his studies show that slightly more than 50% of users are search-dominant, they go straight to the search. One in five users is link-dominant. They will only use the search after extensive looking around the site through links The rest have mixed behavior. They will make up their mind depending on the task and the look of the site.

search site search should be on all pages in general it is not a good idea to scope the search to the subsite that you are on –users don't understand the site structure –users don't understand the scope of the search if you have a scoped search –state the scope in query and results page –include link to the search of the whole site, in query and results page "not found? … try to search entire site "

Boolean searches they should be avoided because noone understands them. Example task. –"you have the following pets: cats dogs –find information about your pet" –users search "cats and dogs" and find nothing. –geeks or librarians among users will then say "oh, I should have used OR".

help the user search Nielsen says that computers are good at remembering synonyms, checking spelling etc, so they should evaluate the query and make suggestions on how to improve it. but I am not aware of systems that do this "out of the box". use a wide box. Information retrieval research has shown that users tend to enter more words in a wider box.

the results page computed relevance scores are useless for the user URLs pointing to the same page should be consolidated search should use quality evaluation. say, if the query matches the FAQ, the FAQ should give higher ranking. [he has other suggestions that are either unrealistic or would be part of serious information retrieval research]

metadata Nielsen thinks that metadata should be used because humans are better at saying what the page is about than machines. He recommends writing into the "name" attribute of with the value 'description' He also says you should add keywords, with your own keywords and those of your competitors. He mentions no engine that uses these…

search destination design when the user follows a link from search to a page, the page should be presented in context of the user's search the most common way is to highlight all the occurrences of the search terms. –This helps scanning the destination page. –Helps understanding why the user reached this result. –[but will be no good if the term is in the metadata]

URL design URLs should not be part of design, but in practice, they are. Leave out the " when referring to your web page. You need a good domain name that is easy to remember.

understandable URLs Users rely on reading URLs when getting an idea about where they are on the web site. –all directory names must be human-readable –they must be words or compound words site must support URL butchering where users remove the trailing part after a slash make URLs as short as possible use lowercase letters throughout avoid special chars i.e. anything but letters or digits stick to one visual word separator, i.e. either hyphen or underscore

archival URL After search engines and recommendations, links are the third most common way for people to come across a web site. Incoming links must not be discouraged by changing site structures

dealing with yesterday current contents Sometimes it is necessary to have two URLs for the same contents: –"todays_news" … –"feature_ " some may wish to link to the former, others to the latter In this case you should advertise the URL at which the contents is archived (immediately) an hope that link providers will link to it there. You can put a note on the bottom of the page, or possibly use a simple convention if it is very easy to guess.

supporting old URLs Old URLs should be kept alive for as long as possible. Best way to deal with them is to set up a http redirect 301 –good browsers will update bookmarks –search engines will delete old URLs There is also a 302 temporary redirect.

refresh header <meta http-equiv="refresh" content="0; url=new_url"> This method has a bad reputation because it is used by search engine spammers. They create pages with useful keywords, and then the user is redirect to a page with spam contents.

.htaccess If you use Apache, you can create a file.htaccess (note the dot!) with a line redirect 301 old_url new_url old_url must be a relative path from the top of your site new_url can be any URL, even outside your site This works on wotan by virtue of configuration set for apache for your home directory. Examples –redirect 301 /~krichel –redirect 301 Cantcook.jpg

http Stands for the hypertext transfer protocol. This is the most important application layer protocol on the Internet today, because it provides the foundation for the world wide web. defined in Fielding, Roy T., James Gettys, Jeffrey C. Mogul, Paul J. Leach, Tim Berners-Lee ``Hypertext Transfer Protocol -- HTTP/1.1'' (1999), RFC 2616

history 1990: version 0.9 allows for transfer of raw data. 1996: rfc1945 defines version 1.0. by adding attribute:value headers. 1999: rfc 2616 adds support for hierarchical proxies caching, virtual hosts and some support for persistent connections and is more stringent.

http resource identification identification of resources is assumed through Uniform Resource Identifiers (URI). As far as http is concerned, URIs are string. http can use ``absolute'' and ``relative'' URIs. A URL is a special case of a URI.

rfc about http An application-level protocol for distributed, collaborative, hypermedia information systems. … HTTP is also used as a generic protocol for communication between user agents and proxies/gateways to other Internet systems, including those supported by the SMTP, NNTP, FTP, Gopher, and WAIS protocols. In this way, HTTP allows basic hypermedia access to resources available from diverse applications.

overall operation: client side Client sends request, required items are –method –request URI –protocol version optional items are –request modifiers –client information

overall operation server side Server sends response, required items are –status line –protocol version –success or error code optional items are –server information –body

middleman intermediaries come in three flavors –proxies, i.e. forwarding agents –gateways, i.e. receiving agents –tunnels, i.e. relay points that do not change the message such as an encryption and decryption device

http assumes transport http assumes that there is a reliable way to transport data from one host on the Internet to another one. All http requests and responses are separate TCP connections. The default is TCP port 80, but other ports can be used.

Absolute http URL the absolute http URL is If abs_path is empty, it is /. The scheme name "http" and the host name are case- insensitive. Characters other than those in the ``reserved'' and ``unsafe'' sets of RFC 2396 are equivalent to their ``%HEX HEX'' encoding. optional components are in [ ]

character sets A character set is a method used with one of more tables to convert a sequence of binary digits into a sequence of characters. http shares the same registry as the MIME multimedia extensions. It is based at the IANA, at assignments/media-types/media-types The default character set is ISO

http messages There are two types of messages. –Requests are sent form the client to the server. –Responses are sent from the server to the client. The generic format is the same as for messages: –start line –message headers –empty line –body Empty lines before the start line are ignored. The request's start line is called the request-line The response start line is called the status-line.

The request headers Accept:Accept-Charset: Accept-Encoding:Accept-Language: Authorization:Expect: From:Host: If-Match:If-Modified-Since: If-None-Match:If-Range: If-Unmodified-Since:Max-Forwards: Proxy-Authorization: Range: Referer:TE: User-Agent:

The status line The status line is a set of lines that are of the form HTTP-Version Status-Code Reason-Phrase The status code is a 3-digit number used by the computer. The reason line is a friendly note for a human to read.

Status code classes 1 Informational: Request received, continuing process 2 Success: The action was successfully received, understood, and accepted 3Redirection: Further action must be taken in order to complete the request 4 Client Error: The request contains bad syntax or cannot be understood 5Server error: The request is valid but can not be executed by the server

Error codes 100Continue 101Switching Protocols 200OK 201Created 202Accepted 203Non-Authoritative Information 204No Content 205Reset Content 206Partial Content

Error codes II 300Multiple Choices 301Moved Permanently 302Found 303See Other 304Not Modified 305Use Proxy 307Temporary Redirect

Error codes III 400Bad Request 401Unauthorized 402Payment Required 403Forbidden 404Not Found 405Method Not Allowed 406Not Acceptable 407Proxy Authentication Required 408Request Time-out

Error codes IV 409Conflict 410Gone 411Length Required 412Precondition Failed 413Request Entity Too Large 414Request-URI Too Large 415Unsupported Media Type 416Requested range not satisfiable 417Expectation failed

Error codes V 500Internal Server Error 501Not Implemented 502Bad Gateway 503Service Unavailable 504Gateway Time-out 505HTTP Version not supported

Response headers Accept-Ranges: Age: Etag: Location: Proxy-Authenticate: Retry-After: Server: Vary: WWW-Authenticate:

Entity headers, common to response and request Allow: Content-Encoding: Content-Language: Content-Length: Content-Location: Content-MD5: Content-Range: Content-Type: Expires: Last-Modified

The body The entity-body (if any) sent with an HTTP request or response is in a format and encoding defined by the entity-header fields. When an entity-body is included with a message, the data type of that body is determined via the header fields Content-Type and Content- Encoding

GET and HEAD method The GET method means retrieve whatever information (in the form of an entity) is identified by the Request-URI. If the Request-URI refers to a data-producing process, it is the produced data which shall be returned as the entity in the response and not the source text of the process. The HEAD method is identical to GET except that the server MUST NOT return a message-body in the response.

Conditional & partial GET The semantics of the GET method change to a ``conditional GET'' if the request message includes an –If-Modified-Since –If-Unmodified-Since –If-Match –If-None-Match –If-Range header The semantics of the GET method change to a ``partial GET'' if the request message includes a Range header field. A partial GET requests that only part of the entity be transferred

The POST method The POST method is used to request that the origin server accept the entity enclosed in the request as a new subordinate of the resource identified by the Request-URI in the Request- Line. POST is designed to allow a uniform method to cover the following functions: –Annotation of existing resources; –Posting a message to a bulletin board, newsgroup, mailing list, or similar group of articles; –Providing a block of data, such as the result of submitting a form, to a data-handling process; – Extending a database through an append operation.

PUT and DELETE methods The PUT method requests that the enclosed entity be stored under the supplied Request-URI. If the Request- URI refers to an already existing resource, the enclosed entity should be considered as a modified version of the one residing on the origin server. The DELETE method requests that the origin server delete the resource identified by the Request-URI.

The Semantic Web The W3C has been developing a new architecture that applies knowledge representation technology to the WWW. Using the Resource Description Framework (RDF), Statements are made using a Subject, Predicate and Object (very similar to Lisp and other predicate based languages). Each Subject, Predicate or Object are Resources in the URI sense and are identified by URIs within an RDF Statement using XML Namespaces.

Reading ``Information Architecture'' by Louis Rosenfeld and Peter Morville, O'Reilly 1998 There is now a second edition, hopefully it is better Contents is very thin, I summarize the whole book here.

Sensitivity exercise What do you hate about a web site? What do you like about a web site? All issues to do with that fall into three categories –Technical –Look and Feel –Architecture

Reasons to hate a web site Can't find it. Page crowded Loud colours Gratuitous use of technology Inappropriate tone Designer centered Lack of attention to detail

Reasons to like a web site useful attractive to look at thought provoking findabilty personalisation

Why is it so difficult technical expertise graphical design expertise overall structure

IA determines organization content functionality –navigation –labeling –searching

Good IA is important for the producer web site an important point of first contact needs to determine overall design before the site is built reorganizing a site is –costly –difficult

Topics covered Classification navigation labelling making a site searchable

The challenge of classification ambiguity: ``a tomato is a red or yellowish fruit with a juicy pulp, used as a vegetable, botanically it is a berry.'' heterogeneity –in a library –on a web site granularity format difference in perspective internal politics

Organizational schemes Exact schemes –alphabetical –chronological –geographical ambiguous schemes –topical: should be there, but not the only scheme –task-oriented –audience-specific: open or closed metaphor-driven: not as overall organization Hybrid schemes are not good

The mixed-up library adult arts and humanities community center get a library card learn about our library science teen youth

Organizational form: hierarchies keep balance between breadth and depth obey rule horizontally, no more than 5 levels vertically cross-link ambiguous items if really necessary keep new sites shallow

organizational forms: hypertext great flexibility great potential for confusion not good as a prime organizational structure

organizational forms: database powerful for searching useful if there is controlled vocabulary easy reorganization on the fly or static generation of pages –but ensure robot indexing not good for heterogenous data

Navigation aids provide context allow for flexibility of movement support associative learning danger of overwhelming the user

browser navigation aids They include –open –back –forward –history –bookmarks –prospective view –visited url color sites should not corrupt the browser.

navigation the ``you are here'' mark –pages should indicate site name –navigation should be consistent –navigation not to refer to current pages –highlight current page in a different way allow for lateral navigation

Types of navigational systems global hierarchical navigation systems –text –icon local navigation systems: integration with global system can be challenging ad hoc navigation: clear label are required

Frames are problematic potential waste of pages real estate speed of display disrupt the page model complex design

remote navigation system I table of contents –good in a hierarchical web site –reinforce the hierarchy –facilitate known-item access –resist temptation to overwhelm user indexes –presents key term without hierarchy –key terms found from search behavior –links terms to final destination pages –use term rotation

remote navigation systems II site maps –is a graphical representationof the site's contents –new because no equivalent in print –there are automated tools to generate site maps –seldomly well-done –to be kept simple guided tours –important for sites with restricted access –should feature linear navigation

labelling a label is short expression that represents a larger set of information. example: ``contact us'' labelling is an outgrowth of site organization, that we have discussed previously. labelling communicates the organization of the site

Why bother we need to guess at how users respond to a label users will not spend much time interpreting the label appropriate tone, no ``hot'', cool'', `stuff'' should reflect thinking of the user, not of the owner it is easy to have unplanned labelling

Good labelling Sticking with the familiar –main, main page, home, home page –search, find –browse –contact, contact us, feedback –Help, FAQ, Frequently Asked Questions –About, About Us Labels may be augmented with scope notes

Grammatical consistency contact us, search our site, browse our content contact, search, browse contact information, search page, table of contents (also good in student essays)

Labels as indexing terms use in tags, or in tag use as controlled vocabulary in the database but some search, in fact almost all, engines do not use metadata

Textual labels born in Vöklingen, (Saarland) in 1965, I studied Economics and Social Sciences at the universities of Toulouse, Paris, Exeter and Leicester. Between Febrary 1993 and April 2001 I lectured in the Department of Economics at the University of Surrey. In 1993 I founded NetEc, a consortium of Internet projects for academic economists. In 1997, I founded the RePEc dataset to document Economics. Between October and December 2000, I held a visiting professorship at Hitotsubashi University.

labels as headings good practice: –consistency in terminology: wording on labels is uniform and cohesive –consistency in granularity chunks covered by labels at the same level is roughly equal chunks covered do not vary by their depth

Iconic labels There is only a limited ``vocabulary'' of commonly understood labels it is fine for some key concepts labels need to be very consistently placed they can communicate a graphic identity for the page they are easy to find on a page, provided that page is not long

Designing labelling systems I start from existing one –put in table or tree (on paper) –make small changes towards consistency ``benevolent plagiarism'' from competitors and academic sites use controlled vocabularies, example yellow pages

Designing labeling systems II use a thesaurus, example legislative indexing vocabulary –``see'' link –``see also'' links –broader terms –narrower terms labels from contents: best judged by an outsider labels from query logs labels from user interviews labels from modeling user needs

fine tuning a labelling system remove duplicates sort alphabetically homogenize case and punctuation and grammar remove synonyms according to audience make labels as different from one another as possible search for gaps look into the future keep scope focussed consider granularity

why not make a site searchable not a tool to satisfy all user's needs not good on poor contents not a cure for bad browsing! needs good planning

why make a site searchable cope with bad organization (Foyle's) dynamic contents large contents

user needs some want overview, others want detail some need accuracy, others dont care much some can wait, others need it now some need some info, others need a comprehensive answer

user's searching expectation known-item searching existence searching exploratory searching comprehensive searching

integrated searching and browsing literature deals with separate browsing and searching systems browsing and searching in a single system with multiple iteration and associative learning takes place

designing search interfaces I level of expertise –boolean? –concept search? amount returned –comprehensive? –verbose? how much to make searchable

designing search interfaces II search target –navigation pages? –HTML only? are there specific types of data that users will want multi-lingual? audience difference

features of sophisticated search engines fielded searches sophisticated query languages reusable results set customizable relevance

Deal with problems getting too much: suggest boolean AND getting nothing: suggest boolean OR or truncation bad answers: suggest to contact an expert, may be not...

The Semantic Web The combination of Web Services and the Semantic Web should give the Web the ability to turn any existing Web Resource into a full node in a purposefully built knowledge representation system with a functional component that allows that knowledge to be acted on. And both are based on the simple Uniform Resource Identifier.

example This statement says that the Resource identified by the URI was created by the person Thomas Krichel: Ora Lassila

Thank you for your attention!