Best practice in design on NREN websites A heuristic evaluation made for TERENA TF-PR February 2004 By Julia Gardner & Gitte Kudsk, UNI•C This is the first part of deliverable E – Best Practice in NREN websites.

Best practice – for whom? Demand from the economics department Suggestion from the design department What the sales department thinks is Best Practice What is best practice - and for whom Ask people with different views - and you’ll get different answers And very different results But when it comes to all The only best practise There is, is what the customer thinks is best practice. What the customer needs Result from the production department

Purpose of the evaluation As a delivery for the TERENA Task Force in Public Relations the purpose of the survey of NREN websites is to find Best Practice on how to set up and maintain an NREN website. The leaders of the deliverable will look at the current websites of the NRENs and make an assessment, for a report to be given at the next meeting in February, and will also prepare a report/presentation at this time. The formal part The purpose of the evaluation is to find best practice on how to set up and maintain NREN websites NEW SLIDE More specific this is a presentation of an assesment of the NREN websites, mostly regarding design. The report is HERE, and will be published from the TF-PR website. But now I will present some of the results from the assesment or evaluation and talk a little about best practise in websites.

Ways to make an evaluation of a website Qualitative user evaluations Usability test Field study Workshops Quantitative user evaluations Questionnaires Expert evaluation based on a list of established usability principles There are different ways to evaluate websites, most of them, - and properly the best involves the user. Qualitative user evalutations Quantitative user evaluations But to circumstances like geographics, time and resources, this evaluation is an RING Expert evaluation based on a list of established usability principles

A heuristic evaluation A usability inspection where usability specialists examine the user interface and judge whether each element complies with a list of established usability principles (the “heuristics”). A so-called heuristic evaluation (The heuristics are explained in the report) This means that we havent been talking to any users, but have made that evaluation based on usability studies from all over the world. Read Jakob Nielsens alert-boxes (www.useit.com), they are based on usability-tests of American sites, but the findings are the same we see in danish usability-tests – and test from other countries. The guidelines are not specific for NREN sites, but de facto standards that the user have come to expect on any site. It pays of to follow the de facto standards – it gives you freedom to concentrate on the interesting part – the content on the site.

Usability = User friendliness + Usefulness (relevance) Accessibility Is it possible for people with any kind of disability to use the website Navigation Is it possible for any user to find the information he is looking for Usability is defined as Usability = User friendliness + usefulness (relevance) User friendliness: strict use of facilities on the site – do users know where to click to use the site Usefulness: A question of content – do the site contain relevant information – or would the user prefer to look for it on another site. In the report we have sub-divided into these sections Accesibility Navigation Content Content Is it possible for the user to understand and use the information on the website. Is the information on the website relevant for the user.

Results of the evaluation Before we continue: The examples used in this presentation (and the report) is only to be considered as examples. The sites used are not better, nor worse that any other. I hope not to insult anyone.

Results Accessibility Navigation Content Accessibility: I am not going to define what lies in accessibility, because Drembels Weg did that at the last meeting, and Carol has presented a translation of the material on the PR-website. Some other aspects are presented in the report. --- (The de facto standards is based on usability studies all over the world. Read Jakob Nielsen alert-boxes (www.useit.com), they are based on usability-tests of American sites, but the findings are the same we see in Danish usability-tests – and tests from other parts of the world.

Every frame and page should have an unique title, so that identification and navigation is easier Disabled people using screen readers need unique and meaningful page and frame titles to navigate. But since online headlines are often displayed out of context, you also need it to help other users. You doesnt always reach a page from the home page, some times you find the page using a search engine or follow a link from another site. In these cases it is important that you can identify the page and find a link to the home page, so you can find out who owns the website, and deside if it is a credible site. A good page title consists of the name of the NREN and a meaningful title for the page. Do not use the name of the folder to which the page belongs in the web structure. On www.renater.fr the page title describes exactly what you will find on the page, and what site you are on. This page title might be a bit to long. It is important, that the title has enough word to stand on its own and be meaningful when read in a menu or a search listing. On the other hand to long titles slow down users, so as a guideline aim at titles between four and ten words.

Every non-text element should have a text equivalent The text equivalent should give a reasonable explanation of the content of the non-text element (picture, graphical representations of text/ animations/ audio or video) and describe the purpose of the element to users with screen readers. A golden rule for text equivalents (or ALT text) is that it is a user interface element, not a statement from the website. ”ALT text” should help the disabled users navigate and operate the site. For instance an ALT text for the NREN logo just stating “<NREN-name> logo” doesn’t help the disabled user, but a ALT text stating “Use this graphics as a link to the homepage” or in a shorter version ”Logo – link to the homepage” helps the user navigate. On www.forskningsnettet.dk the ALT text is just “logo”, even though the logo works as a way to get to the homepage, and this information could help the disabled user

All information must be available without colour For the seeing disabled (and for users with bas screen displays)it is important that information is not communicated through colour alone; the same information must also be available through content or marking. It is also important that the contrast between text and background is good. On www.ulakbim.gov.tr the links in the text marked with light blue disappears as obvious links when shown in black and white. Most of the NREN websites work fine in black and white, with exception of the majority of maps (topology, network, 2weather”), that can’t be read in black and white.

Results Accesibility Navigation Content

All pages must include a clearly visible link to the homepage Site logos should link to the homepage Many users prefer to start a new task from the homepage, even when a menu is available from all pages. Interactive logos are a ”de facto standard” on the Internet. Only some of the NREN sites have clickable logos, however. Note that even though a logo links to the home page, a clearly visible text link to the home page is required too. When there isnt a a clearly visibly link to the home page, the user has to click the Back-button a number of times in order to return to the home page. This is cumbersome to all the users who prefer to return to the homepage before solving a new task. Ex. Pages found through a search engine. It is not sufficient to include a link to the home page via the breadcrumb trail only. Many users do not notice breadcrumbs because they are placed at a different part of the screen and are typically displayed in a very small font.

Provide access to the main menu from all parts of the site Imagine that you have reach this page using a search engine? What would you do now? No matter what page the user is looking at, he should have easy access to all central parts of the web site. On a number of sites the main menu disappears or there is no menu at all when looking at a sub-page. It means that the user has to click on the Back-button a number of times in order to change to a new topic. On www.heanet.ie the left menu disappears when clicking on “Vacancies” in the main menu. If the user does not notice the breadcrumbs there is no access to the rest of the site apart from clicking the back-bottom. Webdesigners often belives that their ”visitors” only use the main entrance (the homepage) when the visit their website. More about breadcrumbs see next page

Use the menu to clearly indicate where a certain page belongs Where am I? A common structure problem is the missing indication of where the user is on the site. The user gets lost, because it isn't clear where he is in the hierarchy. A Bred crumb trail can be a help, but some users mistake the bread crumb for a menu, and others simply overlooks it. It is important that the user can easily decide where a specific page belongs in the web site hierarchy. Otherwise he will be completely lost if he reaches the page through a search facility: If there is no indication in the menu he is prevented having a look at related items within the same sub-menu. A number of NREN sites rely on the breadcrumb trail as their only way of showing the user “You are here”. Breadcrumbs serve two purposes: they provide information to users as to where they are located within the site, and 2) they offer shortcut links for users to “jump” to previously viewed pages without using the Back-button. However, the premise of all this is that users notice the breadcrumb trail. Usability tests show that this very often not the case. For this reason we suggest that breadcrumbs are not used as the only way to indicate where a page belongs. Only a few NREN sites use the menu to clearly indicate what part of the site the active page belongs to. It improves the user experience significantly. On www.cesnet.cz it is clearly indicated, where the page belongs because the active menu is marked with a different colour (light blue).

Give the content a useable date Is the information current? Without a date for the last update, the user have no chance of knowing Most of the NREN websites contain a date for the last update. Make sure that the Last updated date shows the day the real content was written/revised, not a misleading date for fixing a typo or changing a picture. (Make sure, that “Last updated” isn’t the operating systems file-modification date) Can the use rely on the site (reliability) On www.dfn.de both the date the page was produced and the date for last update is shown.

Write for the net Make sentences short and precise Label sections to allow the user to scan the page easily Write less Start with the conclusion Make sentences short and precise: only write what is absolutely necessary. Use bulleted list and highlight keywords to help user easily understand the content. Label sections to allow the user to scan the page easily. Users do not read every single word on a page; they scan the content because it is tiresome to read from a screen. Thus headings should describe the central conclusion of the section rather than be written in generic terms. A section explaining payments arrangements should not have the heading “Payments” but “Institutions pay xx Euro for each registered user” for instance. Hardly any of the NREN sites fulfil this guideline. A screen is smaller than paper and we read 25% slower on a screen. A usability survey shows that 79% of all users scan electronic texts instead of reading the word by word. Therefore write less, only about 50% of what you would write on paper. Use the news triangle, start with the conclusion. Look at the screen – it is small, a lot of text is often hidden below the visible content – make sure that the important part is visible.

Do not write text in a different colour unless it is a link Users click on any text written in a different colour In the example shown here from www.arnes.si the blue headings are not clickable which is quite surprising. Users have become used to the fact that links are not always blue and underlined. It means that they click on any text written in a different colour. In this example the graphics looking like arrows doesnt make it better, since an arrow often is used as an indication of a link.

Do not use animation to attract attention Several studies show, that users gets very disturbed by animations – or any movement on the screen. Animation should only be used in the rare circumstances when it actually helps explaining something more clearly to a user. There is absolutely no need for instance to have news scrolling up the page. To the user it is quite annoying to just see something interesting scrolling out of the page, knowing that he will have to wait for a while before it reappears on the screen. On www.carnet.hr there is a section with scrolling news on the home page. Users try to scroll it out of the screen or cover it with their hands in order to focus on reading the text. A study from the University of Lund (Sweden) shows that some users keep moving the mouse, so their eyes focus on hte mouse instead of the moving text. When designing websites you have to be very aware of the difference between designing to attract attention to certain elements and designing to support the users need for information.

Avoid “pogo sticking” List of services Xxx xxxx xxxxx Booking service Videoconferencing service Technology service Training courses Xxx xxxx xxxxx Videoconferencing service What is pogosticking: Pogosticking is the act of jumping up and down the hierarchy of the site, repeatedly hitting the Back-button to move to the next item in the list[1]. Users pogostick, when they cant read enough on the first page to decide if they reach the information they are seeking, when using a link. The best sites prevent pogosticking by providing sufficient information on the first level, before the user click into detail level. Good overview lists makes it easy to compare services: it differentiates the choices. [1] Pogosticking is a term coined by the usability expert Jared Spool. For further information see: http://world.std.com/~uieweb/Articles/customer_sieve.htm

Avoid “pogo sticking” - example In this example from www.ukerna.ac.uk links in the list of video services are explained so that the user knows what he gets before clicking. He does not have to pogostick in order to check the contents behind each link. About LINKS Being more excats demand more words. Jared Spool has through test found out, that 7-12 words pr link gives the best result. Less words might loose the meaning (en mindre chance for at ramme trigger ordet. More words makes them hard to understand for the user.

Design should be consistent across the site Am I still on the same site? Avoid using page designs that differs significantly. It makes you doubt whether you are still on the same site or have ended up on a new site. Subtle changes of colour or illustrations are acceptable but fundamental changes require the user to re-examine the interface to find central features. On www.sunet.se there is a big difference between the home page (white background colour) and the page describing the FTP archive. Not even the logos are similar

Search results should offer sufficient information to allow the user to make an informed choice Certain principles should be recognized on a well functioning list of search results: It must be clear what word(s) the user searched for. 2. It should be easy to perform a new, improved search if the user discovers a spelling mistake or something similar. 3. The list of results should not only contain the title of relevant pages but also an excerpt showing the context in which the search string appears. The German site www.dfn.de fulfils all the principles of good search results

”Content is king” Results Accesibility Navigation Content Webdesign is information design. The purpose of a website is to pass on information. No matter how fancy you website is – or how good the usability is – it wont be used unless the information on it is relevant and understandable for the user. On a website with the right information the user might even accept bad usability. RETUR ”Content is king”. Users are very goal-driven in their search for information – if they dont find what they are looking for, they give up – and you recieve a mail or a phone call.

Make it clear to the user what is the purpose of your site - 1 Some NREN sites state who they are as part of their logo. This is a great help especially to users who do not enter the site via the home page but rather via a sub page found through a search engine (provided that the logo is shown on all pages). Even good logos like these do not provide sufficient information on the home page, however. Usability studies of web readers show that text attract attention before graphics[1]. Furthermore many users have developed banner-blindness: graphics at the top of the page are regarded as advertisements and thus ignored. [1] Se http://www.useit.com/alertbox/20000514.html, and http://www.useit.com/papers/1994_web_usability_report.html  

Make it clear to the user what is the purpose of your site - 2 Use the first few lines of the body text on your home page to explain to the user who you are. What makes you different compared to other sites providing similar content? Users tend to look at the body text immediately when opening a new page and the first thing they should see is a heading repeating the text from the logo followed by a short, precise description of the NREN. www.dfn.de has a description of the research network on the home page. If the text is made considerably shorter and to the point, it is a perfect starting point. The first and very last sentence seems sufficient for an introduction.

Offer direct access from the homepage to topics of special interest Users are goal oriented and have limited time. They are looking for a specific answer and the faster they find it the better they like the site. Some NREN home pages have links to topics that presently attract attention within the research net community. It is very likely that many users will be looking for exactly this type of information and will thus be able to navigate quickly. On www.renater.fr the homepage has links to the “hot topics”

Inform about problems from the homepage If a problem occurs it is likely that the user will have a look at the Internet to find an explanation. It is professional customer service to provide information about maintenance or failure of the network on the home page. www.ukerna.ac.uk has a link to “Major Outages” in the “News box”.

A site map on the homepage is a concise introduction to your site A number of NREN sites have included a sitemap on their home page in the sense that they present an overview of the menu system. This is a straightforward and efficient way of presenting the content of your site and of providing easy access to any topic the user is looking for. Two findings from usability tests of other sites supports this design strategy: Many users prefer to return to the home page when they have solved a task and before starting on the next task. Users hardly ever make use of special site map pages. According to usability experts the user uses your homepage is your site map, when you look at users behaviour. Several NREN sites have included a site map on their home page. Have a look at www.carnet.hr, www.aconet.at, www.arnes.si, www.forskningsnettet.dk, www.switch.ch.

Include general contact information on the homepage A great many users use the Internet as a directory: They are looking for phone numbers and addresses. The information could be supplemented with a phone number to contact, if a user experiences problems.

Avoid organizing the material on the web according to your own organisation The most common mistake in web design is that the information is organised according to the organisations own world view, often according to the way things are organised in the organisation. The internal organisation is how ever hard to guess for the ordinary user, often the organisation is a result of historic decisions and internal political discussions. AVOID POGOSTICKING On www.dfn.de projects are divided into ongoing and completed projects. Users who are looking for a project would have to know which category to look in to be able to find it. On www.forskningsnettet.dk Ipv6 is categorised as a project In reality the only way to find a usable structure for the website is to ask the user, however you can get far by considering what questions different sorts of user would want to find answers to on the website, and thereby achieve to make a structure that facilitates this. HOWTO: Think of five situation your user could be in, and try to solve the information need.

Use cross-linking The best way to help the user find information that is categorised in a different way than he expects is to use “cross-linking”. Cross-linking is when you can find same piece of information using different entrances. Cross-linking is about trying to find out what the user might be looking for and how. EXAMPLE: The user is looking for a way to contact support. On the home page the first thing he sees is the link called Contact (kontakt) in the main menu. This page doesn’t contain information on how to contact support, because this information is categorised in the support menu. Fortunately the user can find a link on the “Contact” page that leads him to the “Contact support” page.

Clickable organisational charts Usability studies of the Internet show that users generally expect graphics to be interactive. On www.forskningsnettet.dk clicking on the different boxes in the organisational chart leads you to a description of the various levels (teams/departments), in this case Styregruppen (the steering commitee)

Customer support – helpdesk It is very helpful to state helpdesk opening hours on the customer support page Problems might occur outside opening hours. It is very useful to know when you can expect somebody to answer the phone. On www.carnet.hr the opening hours of the helpdesk is stated. What do the user need??

News Most of the NREN websites have news on the home page or a link to a news section. The best way to catch the users interest - which is the purpose of news - is to display them directly on the homepage. Certain types of news seem more relevant than others. News about maintenance or failure of the network should have the most prominent placement; general news about the NREN, conferences, meetings etc. is second in relevance. Avoid news, that isn’t relevant for the users or news the users normally would look for on other sites.

? Questions ? ? ? ? ? ? ?

Suggestion Read the rapport Have a look at your own website Can you do anything better? Feel free to ask – gitte.julin.kudsk@uni-c.dk