LIS650 lecture 3 Web site design

Thomas Krichel 2004-12-04 LIS650 lecture 3Web site design

Web site design • 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.

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.

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.

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

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.

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)

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.

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.

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

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

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.

ways to do navigation • Breadcrumbs like "store > fruit & veg > tomato" • Tabs, 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

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.

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

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

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.

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.

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

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

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

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

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

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

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.

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.

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.

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.

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.

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.

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

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

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.

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.

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.

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

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.

Nielsen on Frames • He writes: "Frames: Just Say No" • He then has a few pages where he thinks about why in exceptional circumstances frames may be ok. • We have not discussed frame in this course at all and just mention them here.

more on scannability • structure pages with 2 or 3 levels of headings • you may want to highlight keywords in some way, but not in any way that they could be confused with hyperlinks. Put the keywords in a <span class="keyword"> … </span> • use meaningful, rather than cute headings. • use one idea per paragraph • almost no humor • no metaphors • no puns

page chunking • Just simply splitting a long article by into different parts for linear reading is not good. • Devise a strategy of front pages with the important information and back pages linked from the front pages with the detail. • Base the distinction of important and not important stuff on audience analysis.

users rarely scroll • early studies showed 10% of users would scroll. • on navigational pages, users will tend to click something they see in the top portion. • scrolling navigational pages are bad because users can not see all the options at the same time. • the length of "destination" pages for users interested in details is less of a problem.

page <title> • needs to be cleverly chosen to summarize the page in a contents of a web search engine, esp. • between 40 to 60 chars long • different pages in a site should each have their own title. • No • welcome • "a" "the" etc..

headline design • Explain clearly what the page is about • Use plain language • Skip leading articles ("A", "the"..) in email subjects and page titles • Make the first word the most important one • Do not start all pages with the same word.

legibility • Use high color contrast. • Use plain or very subtle background images. • Make the text stand still • no zooming • no blinking • no moving • Left-align almost always • No all uppercase, it reads 10% slower.

rules for online documentation (if you must have some) • It is essential to make it searchable • Have an abundance of examples • Instructions should be task-oriented • Nevertheless, you may have to provide a conceptual introduction to the system • Hyperlink to a glossary

multimedia • Since such files are long, they should have an indication of their size • Write a summary of what happens in the multimedia document • For a video, provide a couple of still images. This will give people • quick visual scan of the contents of the multimedia • an impression of the quality of the image

pictures • Have a picture on a bio page • No gratuitous images • More pictures on background pages, that are reached by users with in-depth interest. • Never have a picture look like an advertising banner. • Maybe not have as many pictures of yourself on your site as Jakob Nielsen has.

animation • Animal instinct draws human attention to moving things • A spinning logo is a killer for reading, if you have it, have it spin only a few times • No scrolling marquees!

animation may be good for • Showing continuity in transition • Indication dimensionality in transaction • Illustrating change over time • Multiplexing the display • Enriching graphical representation • Visualizing three dimensional structures • Attracting attention but we will not discuss this as it is out of scope for the course

streaming video • limited by available bandwidth • could be used for • promoting television shows, films etc • give user impression of a speaker's personality (if any) • demonstrate things that move • good for demo of physical products • less good for demos of software • watch out for narration quality

LIS650 lecture 3 Web site design