LIS650 lecture 0 Introductory lecture

1. Thomas Krichel 2004-09-11 LIS650 lecture 0Introductory lecture

2. course resources • Course home page is at http://wotan.liu.edu/home/krichel/lis650n04 • Subscribe to class mailing list https://lists.liu.edu/mailman/listinfo/cwp-lis650-krichel • Me. Do not hesitate to ask. • I plan to be in NYU on Wednesdays, and at Post Tuesdays and Thursdays. • I will be happy to tutor students hands on individually but I find it difficult to do this after class.

3. assessment • First quiz next lecture. • If you miss a lecture, let me know in advance. • In addition to the quizzes, we have • the web site assessment • the final web site • Final grade is calculated by computer. Quizzes go through a complicated discounting scheme. It disregards the worst performance.

4. the web site assessment • Comes because I found that I spent a lot of time talking in class about good design, but students seemed to find it difficult to judge web sites in a structured way. • But understanding what makes a bad web site is key to avoiding the same mistakes. • So I decided to make this a separate component of assessment to add emphasis to it. • This year it comes first, because of calendar.

5. Web site assessment • Look at the web site of a University LIS department. • A list is at http://informationr.net/wl/ • Write a text not describing, but commenting on the web site. • State the site URL, I will look at it. • Try to keep you text short please, no more than 2 pages. • Ask others for opinions if you want.

6. the final web site • Contents should be equivalent to a student essay. • It should be a contribution to knowledge on a topic. • Personal sites are no longer allowed. • Deadline to finish web site: one week after the end of the last lecture. • You will not be able to change your web site between the deadline and the time that the grade is issued.

7. today • introduction to the course • talk about you • what makes for good and bad web sites...

8. Course history • Course was first run as an institute 2002-05-13 to 2002-05-17 • Title was “Webmastering I: the static web site”. • To the curriculum committee, this title did not sound academic enough. • Since “Web Site Architecture and Design” is now the full title, WeSAD (pronounced like “wizard”) is the official abbreviation. • Webmastering is still what we want to learn.

9. teaching WeSAD • WeSAD combines many aspects: • Authoring pages • Work on the organization of data to fit onto pages • Set display style of different pages • Organize the contribution of data • Maintain a technical web installation • Some of them can be learned in a course, but others can not. • Emphasis has to be on learnable elements.

10. teaching philosophy • Point and click on a computer software is not enough • Explain underlying principles • Promote standards • XHTML 1.0 • CSS level 2.1 • Avoid proprietary software

11. WeSAD contents • Deals with the maintenance of a passive web site. Such a web site remains the same whatever the user does with it. • Topics include • (x)html • css • site usability and information architecture, as far as relevant for static web sites • http, uri, web server

12. things this course does not do • Forms: allow you to design forms that users fill in. But you do not have the programming skills to do something with the form. • Any HTML elements that require executable contents are not covered. • Frames: allow you to put several documents into one physical document. Most experts advise against them. • We do not cover image maps. • We don’t do some advanced CSS properties.

13. Other courses: webmastering II • Deals with building dynamic web sites. • Users fill in a form • Users submit the form • Web server return a page that is specific to the request of the user. • Teaches a language called PHP, that is widely used to generate such web sites. • Gets you introduced to computer programming • Gets you to train analytical thinking.

14. other courses: webmastering III • Deals with XML • XML is a syntax to encode any kind of data. • XML can be constrained to only allow certain types of data (XML Schema) • XML can be transformed to render the data in various ways (XSLT) • Achieve a separation of contents and presentation of a web page. • advanced course, has both Schema and Transformation

16. Web site usability • This is supposed to be a big topic in the LIS community. • There are a lot of articles about using individual web sites, but there is little scientific material out there related to actual design. • But it really comes down to common sense. • There is no absolute right/wrong.

17. Learn from some experts • Experts discussed here • Krug • not technical • Nielsen • has tons of technical advice • weak on overall site design • Morville and Rosenfeld • site architecture focus, but mainly common-sensical blah blah • Much of their advice discusses active web sites, not passive ones as the ones that we will build here.

18. Krug's book • Short • Deals mainly with the issue of how to build commercial web sites. • Here user confusion is the cause of lost money. • He mainly deals with sites that have • extensive scale • searching and browsing • user interaction • Our sites for this course do not have these features.

19. Krug's advice • Krug's rule #1: Don’t make me think. • a site should be obvious • if it can not be obvious, it must be self-explanatory • Things that make think • non-standard terms • jobs • employment opportunities • job-o-rama • links and buttons that are not obvious to find

20. search example • Contrast • http://www.sl.nsw.gov.au/webcat/srchhelp_w.cfm • http://www.amazon.com for search. • Note, however, that search forms are not part of this course.

21. How people use the web • Received wisdom would suggest • people read the page • then make the best decision. • That is wrong. Instead, people • scan pages • look for something that seems vaguely related to the current aim • click on it if clickable • User satisfice (term by Herbert Simon, a cross between satisfying and sufficing)

22. why do they do that? • Why do users satisfice? • Users are in a hurry. • The penalty for a wrong guess is low. • Weighing option does not seem much help. • Guessing is more fun. • Users don't figure out how things work. They muddle through • It does not matter how things work • When they have found something that is useful to them, users stick with it.

23. Krug's advice • Create clear visual hierarchy. • the more important something is, the more prominent it should be • things that relate logically should relate visually • things that are part of something else should be nested visually within it. • Use conventions • they have proven useful • users have seen them before • Break pages into separate parts • Make obvious what is clickable • Reduce visual noise.

24. Krug's advice • Krug's second law: it does not matter how many times I have to click as long as each click is a mindless, unambiguous choice. • Krug's third law: Get rid of half the words on each page, and then get rid of half of what is left. • no happy talk • no instructions

25. Building navigation • For commercial web sites, people are usually trying to find something. • It is more difficult than in a shop • no sense of scale • no sense of direction • no sense of location • Navigation can • give users something to hold on to • tell users what is here • explain users how to use the site • give confidence in the site builder

26. Navigation elements • Site ID • Sections of items • utilities • link to home page • link to search page • separate instructions sheet • Current location needs to be highlighted.

27. ways to do navigation • Breadcrumbs like "store > fruit & veg > tomato" • Flabs, like the ones seen in Amazon.com • Krug's favorite. • A table on the left or right hand side that stays the same • will do just fine for us • Pull-down menus • Rollovers

28. navigational elements on the page • All pages except should have navigation except perhaps • home page • search page • instructions pages • Page names are also important • every page needs one • in the frame of contents that is unique to the page • the name needs to be prominent • the name needs to match what users click to get there.

29. Home page design • For large site, it is a mission impossible • But above all it has to convey the big picture • tagline • clear and informative • just long enough • differentiating • clear benefit showing • lively, personable and sometimes clever • welcome blurb • but no mission statement

30. bad home pages • put a banner add even though they don't need it • let deals drive the home page • promote everything • are greedy for user data

31. That's about all from Krug, folks • The rest of the book is about how to do usability testing. • But before he gets to that he has an interesting cartoon / story. • The morale of the story, as far as I am concerned is that you need to have enough technical expertise.

32. Jakob Nielsen • The self-styled “King of Usability”. • He has a web site at http://www.useit.com • This is recommended reading. • His book, which we discuss here, is expensive and long-winded. For your purposes, stay with the web site. Use the web site, and these class notes to prepare the web page assessment. • Use your brain too. • Nielsen is very conservative. So am I.

33. his 1996 top 10 mistake list • Using Frames • Gratuitous Use of Bleeding-Edge Technology • Scrolling Text, Marquees, Constantly Running Animations • Complex URL • Orphan Pages • Long Scrolling Pages • Lack of Navigation Support • Non-Standard Link Colors • Outdated Information • Overly Long Download Times

34. same list of 1999 • Breaking or Slowing Down the Back Button • Opening New Browser Windows • Non-Standard Use of GUI Widgets • Lack of Biographies • Lack of Archives • Moving Pages to New URLs • Headlines That Make No Sense Out of Context • Jumping at the Latest Internet Buzzword • Slow Server Response Times • Anything That Looks Like Advertising

35. same list 2002 • No Prices • Inflexible Search Engines • Horizontal Scrolling • Fixed Font Size • Blocks of Text • JavaScript in Links • Infrequently Asked Questions in FAQ • Collecting Email Addresses Without a Privacy Policy • URL > 75 Characters • Mailto Links in Unexpected Locations

36. same list 2003 • Unclear Statement of Purpose • New URLs for Archived Content • Undated Content • Small Thumbnail Images of Big, Detailed Photos • Overly detailed ALT Text • No "What-If" Support • Long Lists that Can't Be Winnowed by Attributes • Products Sorted Only by Brand • Overly Restrictive Form Entry • Pages That Link to Themselves

37. top ten guidelines for the homepage • Include a One-Sentence Tagline • Write a Window Title with Good Visibility in Search Engines and Bookmark Lists • Group all Corporate Information in One Distinct Area • Emphasize the Site's Top High-Priority Tasks • Include a Search Input Box • Show Examples of Real Site Content • Begin Link Names with the Most Important Keyword • Offer Easy Access to Recent Homepage Features • Don't Over-Format Critical Content, Such as Navigation Areas • Use Meaningful Graphics

38. Nielson's book • page design 16—97 • content design 98—160 • site design 162—259 • intranet design 260—293 • accessibility 296—311 • i18n 312—344 • future predictions 346—376 • conclusions 378—396

39. screen real estate • on a screen that displays a web page, as much as possible should be the contents of the page. • Ideally the contents should occupy more than 50% of the screen. Most often it does not. • Some white space is almost inevitable • Cut navigation to below 20% of screen • When examining a page for usability, remove features by trial and error. If the page is still usable without the feature, remove it. Simplicity wins over complexity.

40. cross-platform design • Unlike traditional GUI systems, the web offers very little to control the designer • Users could come right into the middle of the site from a search engine. • Users could use a variety of devices, e.g. web browser for car drivers • Most pages only look good on an 17in monitor with at least 1024×768 pixels. It should not be that way. • WYSIWYG is dead! • Separate contents from presentation, use style sheets.

41. resolution independent design • Never use fixed width in pixels except perhaps for thin stripes and lines • Make sure that design looks good with small and large fonts in the browser. • Graphics must work at 100dpi and better. • Text in graphics to be avoided. • Provide a print version for long documents.

42. be conservative • Avoid non-standard HTML code. • Take account of installation inertia. Figures for 1998/1999 show 1% of browsers updated a week. • Only use technology that is at least 1 year old, if not at 2 years old. Let other make the errors that come with trial.

43. semantics versus presentation • The original HTML tags were all based on semantics. For example <h2> is a second level heading. • Semantic encoding was lost with the "extensions" invented by the browser vendors. • There will be a wide variety of browser in the future. It is already impossible to test pages on all user agents. • Style sheets already make it possible to style the page according to the "media" used by the user agent.

44. watch response times • Users loath waiting for downloads. • Classic research by Mille in 1968 found: • delay below 0.1 second means instantaneous reaction to the user • 1 second is the limit for the user's train of thought not to be disrupted • 10 seconds is the limit to keep the user interested, otherwise they will start a parallel task • low variability of responses is also important but the web is notoriously poor for this.

45. factors affecting speed • The user's perceived speed depends on the weakest of the following • the throughput of the server • the server's connection to the Internet • the speed of the Internet • the user's connection to the Internet • the rendering speed of the computer

46. making speedy pages • keep page sizes small • reduce use of graphics • use multimedia only when it adds to the user's understanding • use the same image several times on the site • make sure that the / appear at the end of the URL for directories. http://openlib.org/home/krichel/ downloads faster than http://openlib.org/home/krichel

47. know your limits • 1 second implies maximum pages size of 2KB on a modem, 8 KB on ISDN, and 100 KB on a T1. 10 seconds implies maximum size of 34KB on a modem, 150KB on an ISDN and 2MB on T1, Nielsen writes. • I doubt these numbers. • It would be good to find an update on these numbers.

48. get some meaning out fast • What matters most is the time until the user sees something that makes sense. The time for the full page to be available matters less. therefore • top of the page should be meaningful without images having been downloaded • use meaningful "alt" attribute for images • use "width" and "height" attribute so that the user agent can build the page quickly • cut down on table complexity. top table should be particularly easy.

49. Nielsen on style sheets • "one of the greatest hopes for recapturing the Web's ideal of separation of presentation and contents". • That why this course studies them extensively! • Use a single style sheet for your site. • Always use external style sheets. • organizational benefits maximized • faster loading • Make sure your site still looks reasonable in your browser when you turn CSS off and reload the page

50. Don't go crazy with CSS • More than two font families (plus perhaps one for computer code) and your page starts looking like a ransom note. • Gimmicky looking sites will hurt the credibility of you site. • No absolute font sizes. • If you have multiple style sheets, use the same HTML class tags in both.