LIS650 lecture 5 information architecture javascript, http and apache

1. Thomas Krichel 2004-12-18 LIS650 lecture 5information architecturejavascript, http and apache

2. 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

3. 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

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

5. Why is it so difficult • technical expertise • graphical design expertise • overall structure

6. IA determines • organization • content • functionality • navigation • labeling • searching

7. 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

8. Topics covered • classification • navigation • labelling • making a site searchable

9. 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

10. 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

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

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

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

14. 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

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

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

17. 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

18. 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

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

20. 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

21. 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

22. 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

23. 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

24. 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

25. 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)

26. Labels as indexing terms • use in <meta>tags, or in <title> tag • use as controlled vocabulary in the database • but some search, in fact almost all, engines do not use metadata

27. 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.

28. 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

29. 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

30. 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

31. 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

32. 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

33. 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

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

35. user needs • some want overview, others want detail • some need accuracy, others don‘t care much • some can wait, others need it now • some need some info, others need a comprehensive answer

36. user's searching expectation • known-item searching • existence searching • exploratory searching • comprehensive searching

37. 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

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

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

40. features of sophisticatedsearch engines • fielded searches • sophisticated query languages • reusable results set • customizable relevance

41. 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...

42. today • information architecture • javascript • http • apache introduction

43. the <script> • <script> is an element that calls a script. • It requires a "type" attribute that gives the type of the script language. e.g. type="text/javascript". • It takes the "src" argument that gives a URI where the script can be found. Such a script is called an external script. • It takes a "defer" attribute. If set as defer="1" you tell the user agent that the script will generate no output. This helps the user agent in that case.

44. example <script type="text/javascript"> document.write("hello, world"); </script> • Interestingly enough, you can place this script in the head or the body. • This is an example of an automated script. The user has to do nothing to get the script to run. • You can also trigger a script. To do that, we have to study some more HTML attributes. We will do that later.

45. external script • You can also create an external file, say hello.js with the line document.write("hello, world"); • Then you can call it up in the html file <script type="text/javascript" src="hello.js"/>

46. default script language • You should set the default scripting language used in the document using the <meta> element in the <head> • <meta http-equiv="content-script-type" content="text/javascript"/> • If you don't the validator does not complain, but I don't see other ways to specify the language.

47. Javascript history • A programming language that was developed by Netscape for their browser in 1995. • To counter, Mickeysoft developed Jscript. • It has been standardized by the European Computer Manufacturers Association as ECMA 262.

48. principal features • It contains instructions for a user agent to execute. Javascript is not run by the server. • It resembles Java, but not the same language. • It is an object-oriented language.

49. object • In an object-oriented language, an object is the prime focus of attention. • An object has properties and methods. • Example from real life. Let a bus be an object. • “color” of the bus is a property • “move to next station” is a method

50. objects in javascript • Properties are accessed by object_name.property_name • Methods are accessed by object_name.method_name() • where object_name is the name of an object, property_name is the name of a property and method_name() is the name of an object. Note the use of the dot and the parenthesis.