LIS650 lecture 3 Minor HTML Information Architecture Thomas Krichel

today we have fun with minor HTML –tables –other HTML feature(s) minor points on line breaking –reexamining our Information Architecture as introduced by Morville and Rosenfeld

Tables HTML allows to align contents is tabular form. Tables may have a caption and/or a summary. –Both describe the table. –The latter is longer than the former. Table rows are aligned vertically. Table columns are aligned horizontally. Cells are at the intersection between rows and columns.

table illustration A table is a matrix formed by the intersection of a number of horizontal rows and vertical columns. Column 1 Column 2 Column 3 Row 1 Row 2 Row 3 Cell

HTML table design It tries to make simple things simple without making sophisticated things impossible It takes account of the fact that the absolute width of the table can not be controlled by the HTML writer but it is the hands of the reader. Not all things one would like to do are supported. Sometimes tables can lead to excessive scrolling. Use of style sheets is recommended when the table has mainly a visual function, see Thomas' homepage for a bad example.

elements & attributes not covered Many points in the table spec of HTML have one or more of the following attributes –mainly important for non-visual rendering –complicate & abstract –little used –mainly a verbosity reduction feature So I am omitting some of them in the discussion

more table talk Table rows may be grouped into –head section –body section –foot section Table columns may also be grouped into more arbitrary ways in so-called column groups. Table cells can contain –header information –table data

the element It encloses a table. It takes the i18n and core attributes. The "summary" attribute provides a summary of the table's purpose and structure for user agents rendering to non-visual media such as speech and Braille. The "width" attribute specifies the desired width of the entire table. It is intended for visual user agents. When the value is a percentage value, the value is relative to the user agent's available horizontal space.

the "frame" attribute of This attribute specifies which sides of the frame surrounding a table will be visible. Possible values: –voidno sides. This is the default value. –abovethe top side only –belowthe bottom side only –hsides the top and bottom sides only –vsides the right and left sides only –lhsthe left-hand side only –rhsthe right-hand side only –boxall four sides –borderall four sides

the "rules" attribute of This attribute specifies which rules will appear between cells within a table. Possible values –noneno rules. This is the default. –groups rules between row groups only. –rowsrules between rows only. –colsrules between columns only. –allrules between all rows and columns

the "border" attribute of This attribute sets the width of the frame of a table, if it is set to be visible. The value can only be a pixel number. Rules and frames can make for visual noise.

the element It is used to give a caption to the table. It takes the i18n and the core attributes. It is only allowed immediately after the tag start. There can only be one in any one. We will now study the alignment attributes. This is an attribute group widely used in tables. also takes those attributes.

alignment: the "align" attribute The "align" attribute specifies the alignment of data and the justification of text in a cell. Possible values: –leftleft-flush data or left-justify text. This is the default value for table data. –centercenter data or center-justify text. This is the default value for table headers. –rightright-flush data or right-justify text. –justifydouble-justify text –charalign text around a specific character as set with a "char" attribute

alignment: the "valign" attribute The "valign" attribute specifies the vertical position of data within a cell. Possible values: –top Cell data is flush with the top of the cell. –middle Cell data is centered vertically within the cell. This is the default value. –bottom Cell data is flush with the bottom of the cell. –baseline All cells in the same row as a cell whose valign attribute has this value should have their textual data positioned so that the first text line occurs on a baseline common to all cells in the row. This constraint does not apply to subsequent text lines in these cells.

alignment: "char" and "charoff" The "char" attribute specifies a single character within a text fragment to act as an axis for alignment. The default value for this attribute is the decimal point character for the current language as set by the "lang" attribute. The "charoff" attribute specifies the offset to the first occurrence of the alignment character on each line. If a line doesn't include the alignment character, it should be horizontally shifted to end at the alignment position. The direction of offset is determined by the current text direction, as set by the "dir" attribute. (obscure)

alignment: "cellspacing" The "cellspacing" attribute specifies how much space the user agent should leave –between the left side of the table and the left-hand side of the leftmost column –between the top of the table and the top side of the top row, –between the right side of the table and the right-hand side of the right most column –between the bottom of the table and the bottom side of the last row –The attribute also specifies the amount of space to leave between cells.

alignment attributes: "cellpadding" Does the same as cellspacing, but gives the distance between the border of the cell and the and the contents. Note that "cellpadding" and "cellspacing" can only one length. –if it is pixel, horizontal and vertical dimensions are the some –if it is a percentage, horizontal and vertical space are different as the percentage is applied to the

,, These three tags enclose elements that belong to the head, the foot and the body of the table. Only one head and one foot, but optionally several bodies. Put head and foot first....header information......footer information......first row of block one data......second row of block one data......first row of block two data......second row of block two data......third row of block two data...

This element allows columns to be grouped together It takes the alignment, core and i18n attributes It takes a "span" attribute that says how many columns are spanned It takes a "width" attribute, to give the width of the group. It takes percentage, pixel and relative length. A relative length is written i* where i is an integer. The higher i the more weight is given to the column when extra space is available for placing. "0*" means minimum space should be used.

example is the same as...a total of forty elements... In the latter case, you don't actually need the span=40 attribute.

element contains data about a single column. takes the same attributes as, remember, these are –alignment attributes –core attributes –i18n attributes –span –width needs to be enclosed in a element.

, and rendition and make it easier to render a table row by row. If you don't give them, the user agent has to read the whole table to find out how many columns there are at most. For long tables, this can mean additional delay.

element It encloses a table row. It takes the alignment attributes. It takes the i18n attributes. It takes the core attributes.

the element encloses a cell in a table that is not a header cell. It admits the alignment and core attributes It has an "abbr" attribute for abbreviated contents. Its "rowspan" and "colspan" attributes say how many rows or columns the cell spans. It has a "headers" attribute specifies the list of header cells that provide header information for the current data cell. The value of this attribute is a space-separated list of header cell "id" attribute values. (you can ignore this) It takes an "axis" attributes, whose purpose is so abstract that I will not cover it here.

the element encloses a header cell It admits the same attributes as, but "headers" does make no sense here. Instead, we have a "scope" attribute that specifies the set of data cells for which the current header cell provides header information. It can take the values –row: The current cell provides header information for the rest of the row that contains it. –col: The current cell provides header information for the rest of the column that contains it. –rowgroup: The header cell provides header information for the rest of the row group that contains it. –colgroup: The header cell provides header information for the rest of the column group that contains it.

Example by Lesk (1976)

Lesk's most famous

table properties I {caption-side:} says where the caption should go, either 'top' or 'bottom' {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

Lesk in HTML/CSS I have struggled to reproduce the Lesk tables in the examples area. It is at doc/examples after the directory of the course home page. You can see a version with CSS and a version without CSS.

subtle points of line breaking You can use the entity to indicate that you don't want a line break at that space, e.g. Prof. Dr. Krichel You can suggest the user agents to hyphenate a word at a certain point using the soft hyphen entity ­

the element in This can be used to include metadata in the header. It has an attribute "name" for the property name It has an attribute "content" for the property values It also takes the i18n attributes. There is no standard set of names and values. Example:

the tag in There is also a special way to pass http headers to the client The "http-equiv" lets you set http variable and send them to the client. Example: will tell the server to tell the browser that the page is written in html. more on this later, when we discuss http.

"scheme" attribute of You can give a scheme attribute to. Its content can be a name string, that the user agent may be able to do something with Or it can be a URI, where the user agent may find something to do. But there is no standard way to do things.

the element in Can fix the baseline URL for all the relative links in the document. This URL is given in the "href" attribute to base. This attribute must be present. Within the confines of what we are working with, I do not see a reason for you to use it. Example

the element in appears in the of the page. No tag end. It creates a link between the current page and others. It takes the "href" attribute to say what page is being pointed to. It takes a "rel" attribute for forward link and "rev" for the reverse link. Example: –Consider two documents A and B. Document A: –Has exactly the same meaning as: Document B: <link href="docA" rev="foo"/

values of "rel" and "rev" attributes in alternate stylesheet !! start next prev contents index glossary copyright chapter section subsection appendix help bookmark

other attributes to takes the core attributes.(no idea why) It takes the "type" attribute for the MIME type of the page linked to. It takes the "hreflang" attribute to give the language of the page linked to. It takes the "charset" attribute to give the character set of the page being linked to. It takes the "media" attribute to give the media for the page being linked to. Use the CSS media types.

and search engines Using you can give search engine things like –Links to alternate versions of a document, written in another human language. –Links to alternate versions of a document, designed for different media, for instance a version especially suited for printing. –Links to the starting page of a collection of documents. I am not sure if current engines use this.

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ölklingen, (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...

Thank you for your attention!