student it website usability review

Website Usability Evaluation

for

Student IT websitewww.its.otago.ac.nz/students

conducted by

Scott Evangelou, MEntrwww.usable.co.nz

Wednesday, 5 November 2008

Of 21 | website usability evaluation of http://www.its.otago.ac.nz/students | 11/04/08

http://www.its.otago.ac.nz/students

http://www.usable.co.nz/

Table of ContentsIntroduction............................................................................................................3Summary of Findings.............................................................................................4

Strengths...........................................................................................................4Areas for improvement......................................................................................4

Following conventions...........................................................................................5Detailed findings....................................................................................................6

Navigation.........................................................................................................7Functionality......................................................................................................9Functionality is satisfactory................................................................................9Control...............................................................................................................9Help and Support............................................................................................10Language.........................................................................................................11Feedback.........................................................................................................11Consistency.....................................................................................................12Error handling..................................................................................................12Workflow Support............................................................................................13Visual Clarity...................................................................................................13Other...............................................................................................................15

Webpage speed report........................................................................................16Analysis and Recommendations.....................................................................18

Recommended 5 minute readings.......................................................................20“Usability 101 - Introduction to Usability” ....................................................20“Key Research Findings Related to User-Centered Design“ ......................20“Usability evaluation versus usability testing”..............................................20


IntroductionThis document presents the findings of an expert usability review of the Student IT website interface conducted by Scott Evangelou (user experience specialist).

This sort of review is formally referred to as a heuristic evaluation, which involves one or more usability experts examining the interface to judge its compliance with recognised usability principles (the "heuristics").

This review considered the following standard set of criteria (heuristics):

- Navigation- Functionality- Control- Help and Support- Language- Feedback- Consistency- Error Handling- Workflow Support- Visual Clarity

Results were then analysed and collated. The usability issues identified are presented in this document, with specific recommendations for remediation of the issues, where possible.

The review was conducted between 3-4 November 2008. The reviewer used Mozilla Firefox 3 on a Windows XP Professional operating system. Screen resolution was 1024x768 pixels. Internet connection type was a www.wic.co.nz wireless connection at 3936 kbps (about 70 times faster than a dial-up modem).

The primary purpose of a heuristic evaluation is to allow the website editor(s) to recognise common usability strengths and weaknesses with the ultimate aim of improving ease-of-use for the website customer. However, a scientifically-designed usability test - with real representative website users performing real tasks - is the only method of objectively observing website visitor behaviour; assessing for website task efficiency, effectiveness and customer satisfaction. Thus, a full usability study is recommended as a follow-on to this website usability evaluation.

NB: a usability evaluation will commonly identify 87% of usability issues; usability testing: 54% with an overlap of 41% between the two methods. However, a usability review will not accurately identify customer satisfaction issues; whereas usability testing will. See “Usability evaluation versus usability testing” - www.humanfactors.com/downloads/sep03.asp#kath


http://www.humanfactors.com/downloads/sep03.asp#kath

http://www.wic.co.nz/

Summary of FindingsThe www.its.otago.ac.nz/students website is generally easy to use.

Strengths✔ site structure is simple✔ a search function is available✔ access is provided from the homepage to major parts of the website✔ features and functions that a visitor is likely to require are provided✔ functionality is clearly labeled; sufficient white space is used✔ no unnecessary plug-ins are required; animation is avoided ✔ alternatives to graphic links are provided✔ all popular browsers are supported✔ on-line help is available

Areas for improvement11 usability issues have been identified, which range from low to high in severity. Correcting these issues will improve the website ease-of-use.

Detailed findings are listed below; and informally discussed in a Video Report of Recommendations included as part of this report.

NB: the video includes bonus material not covered in this report!



Following conventionsOver 80% of websites follow the same design conventions. Thus, the majority of website visitors expect standard elements to operate in a predictible way. An average website visitor will spend less than 30 seconds on a webpage. Would you rather they spent that time finding their way around an unconventional layout, or focusing on achieving their task(s)?

We recommend your website follow these conventions:

1. make top-left logo clickable back to the Student IT homepage2. create a “Home” or “Student IT home” link at the top of the navigation

menu and top level of the breadcrumb trail (rather than “ITS” which is confusing)

3. modify the “Page Not Found” error message for conciseness yet provide additional options to save the user from remaining lost

4. eliminate unecessary imagery; optimise necessary images5. reduce webpage download time from 56 seconds to under 20 seconds6. meet usability criteria as outlined in the following detailed findings


Illustration 1: Subject of evaluation: Otago Student IT website

Detailed findingsThis review assigns a severity rating to each issue. The severity rating is based on a simple matrix that considers the frequency (how often will the problem arise?) and impact (how much will it affect the visitor?).

Impact Low Medium HighFrequencyLow Low Medium MediumMedium Medium Medium HighHigh Medium High High

Table 1: Severity rating matrix

For example, using the table above an issue with a Medium impact and a Low frequency is rated as having a Medium severity.

Assigning severity ratings can be somewhat subjective. Ratings should be considered as an aid to decision-making only.

Within each of the following sections, the most important issues are listed first(red items indicate issues and green are proposed solutions).


NavigationNavigation refers to the ability to find your way around the website.

An effective navigational scheme provides the visitor with a clear indication of the current location within the overall structure, as well as providing access to other parts of the website.

Generally, navigation for the Student IT website is effective. Webpage addresses match titles, menu items and breadcrumb trails.

Issue 1 – is there a clear indication of your current location?Severity: MediumSometimes, it is unclear what your current location is on the website.Where this issue occursSitewide

Recommendations✔ Suggest a change in colour, background-colour and/or font-weight for the

Navigation menu item that indicates the webpage you are currently visiting✔ Suggest a breadcrumbs trail with the full path of the webpage - indicating

your current location within the website.E.g. Student IT homepage > Online Resources > Blackboard


Illustration 2: Where am I?

Illustration 3: Am I on the ITS website?

http://www.its.otago.ac.nz/students/onlineresources/blackboard

http://www.its.otago.ac.nz/students/onlineresources


Issue 2 – is there a clear and constant link to the homepage?Severity: MediumLink to the homepage is not clearly labeled.Where this issue occursSitewide

Upon first glance, the top level of the breadcrumbs indicate the homepage is "ITS" which is confusing. Am I on the ITS website or the Student IT website or the University of Otago website (as the top left click-able logo suggests)?

There is no link titled "home" in either the Navigation menu or anywhere else on the website.

Conventions dictate the top left logo should be click-able to the homepage, but it is not. Users clicking there are dropped on the Otago homepage, where they are left, lost, without Student IT website navigation.

Recommendations✔ Suggest the top left logo be clickable to the Student IT homepage, which

follows conventions✔ Suggest the top of the Navigation menu contain a “Student IT homepage”

hyperlink, as this follows conventions✔ Suggest “Student IT homepage” as the top level of the breadcrumb trail

rather than “ITS” - ITS is confusing as this is the Student IT website, not the ITS website

Issue 3 – is a webpage sitemap provided?Severity: MediumA sitemap - commonly used for navigation - is not provided.Where this issue occursNavigation menu(s)

RecommendationProvide a sitemap webpage to aid visitors in navigating the website, as this follows conventions.


FunctionalityFunctionality is the extent to which those features and functions that a visitor is likely to require are provided.

Functionality is satisfactory.

ControlControl refers to the relationship between the visitor and the website.Where possible, the visitor should be in control of the interaction. For example, the visitor should be able to cancel an operation if it is taking too long.

Control is removed if a website forces visitors down a particular path without due regard to flexibility and natural workflow, or if it forces visitors to wait for events that may take a long time.

A control issue exists for your website.

Issue 4 – is webpage size is less than 100kb?Severity: MediumResearch shows that webpages should be sized less than 100kb and take less than 20 seconds to download on a 56kbps modem.Where this issue occursSitewide.

Recommendation✔ Your homepage is 264kb and takes 56 seconds to download on a dial-up

modem. This size should be reduced by optimising images and reducing total objects on the webpages

✔ The results of a www.websiteoptimization.com/services/analyze download analysis of your homepage are found on page 15 of this report. Suggest you run this test for every webpage on your website and follow the report recommendations


http://www.websiteoptimization.com/services/analyze/

Help and SupportVisitors should be able to get ready access to assistance – both online and offline.

Help and support are satisfactory, but with one issue.

Issue 5 – is online help available?Severity: LowOn-site help is only available in the left-hand navigation menu.Were this issue occursSitewide.

Help should also be supplemented with placement in other areas, such as part of the “Page Not Found” message (shown below). Message should be more concise and provide further options for the user to achieve their goal.

RecommendationAlter the “Page Not Found” message to read as shown below.

Apologies! Please try the:✔ Left-hand “Navigation” menu,

✔ Sitemap ,

✔ Search function or

✔ Help section


Illustration 4: "Page not found" error message

http://www.its.otago.ac.nz/students/help

http://search.otago.ac.nz/search?q=&btnG=Search&site=studentit&entqr=0&output=xml_no_dtd&sort=date:D:L:d1&client=studentit&numgm=5&ud=1&oe=UTF-8&ie=UTF-8&proxystylesheet=studentit

http://www.its.otago.ac.nz/students/sitemap

LanguageYour website should speak the visitor's language. Terminology should be clear and consistent. Jargon should be avoided.

Issue 6 – is language simple and jargon avoided?Severity: MediumLanguage is simple but wordy and jargon is common.Were this issue occursSitewide.

Descriptions are unnecessarily wordy. Jargon may be difficult for beginner computing students.

Recommendations✔ create a webpage containing a definition of all jargon terms used, and/or✔ use a mouseover function that explains a jargon term in a pop-up tool-tip,

and/or✔ integrate jargon definitions into a 'Frequently asked questions' webpage

(also a benefit to search engine optimisation efforts)✔ Undergo a complete edit of all webpages for conciseness, consistency

and jargon-freedom

FeedbackThe visitor should be kept informed of what is going on at any time. This applies not only to the actual use of the website, but to ongoing interactions.

No feedback issues exist.


ConsistencyWebsite should be internally consistent. Global elements (such as 'search' fields and navigation) should be in the same position throughout the website.

Websites should also follow conventions, so that the visitor does not have to learn a new interface or interaction style to use the website.

Issue 6 – is only one word or term used to describe an item?Severity: MediumWhere this issue occursSitewide.

Multiple words are used to describe the same items.

RecommendationPerform a macro-edit of all webpages for terminology consistency.

Issue 7 – are standard colours used for visited links?Severity: LowWhere this issue occursNavigation menus.

Recommendation✔ style left-hand menu item to change colour, background-colour and/or

weight when visitor resides on that webpage✔ style left-hand menu item to change colour after the webpage is visited

Error handlingWhere possible, websites should prevent errors from occurring by being clear, unambiguous and simple.

When errors do occur, they should be explained in simple language. The visitor should be informed of what happened and why, and how to rectify the problem. An escalation process should be available if the visitor cannot resolve the problem.

See Issue 5 page 10.


Workflow SupportThe system should enable visitors to carry out procedures in a way that suits their preferred work patterns and sequences.

No workflow support issues exist.

Visual ClarityThe website should be clear and uncluttered. The purpose and function of each visual element should be apparent. Fonts should be of a suitable size and contract.

Issue 8 – is sufficient white space used?Severity: MediumScreens should not be filled with text; white space should be sufficient to support clear layout.Where this issue occursSitewide

Recommendations✔ Some webpages have significant text. Suggest a website-wide, (objective

party) edit for conciseness. Conciseness editing typically can eliminate 70% of wording, thus encouraging more efficient use of the website; and avoiding unnecessary scrolling

✔ Some of your target users may have visual impairments – rather common amongst the older generations – thus your body font-size should be adjustable


Issue 9 – do all images have an 'alt' attributeSeverity: LowIcons aside of each Student IT notice lack an “alt” attribute and are confusing. What are their meanings? Where this issue occursNotices page

An 'alt' (alternate) attribute is useful for those with visual impairments. 'Alt' attributes should precisely describe the images they are attached to.

Recommendations✔ avoid unnecessary use of imagery✔ eliminate the icons, or use a legend to explain their significance✔ revise all image alternate attributes to precisely describe their graphics


Illustration 5: What is the meaning of each of these icons?

For example, this alternate text should read: “Photograph of a Student IT advisor assisting students in the Central Library Electronic Resource Area (ERA)”


Illustration 6: Banner on "University computing" webpage

Illustration 7: Alternate text describing the banner

OtherTwo of the issues identified did not fit within the predefined categories.

Issue 10 – is website findable?Severity: HighStudent IT website is not findable from a google search nor from within the Otago University website search function.Where this issue occursWeb-wide and Otago University website-wide

Recommendations✔ consider seach engine optimisation (SEO) conventions by including a

properly constructed meta description in the header of every webpage✔ ask for configuration of the Otago University search to pickup the Student

IT website within its top results for that keyphrase✔ ask for the Student IT website to be updated in the Otago University XML

sitemap schema and pushed out to google via their sitemap acceptance function (or other similar manner)

✔ use a redirect from the old SCS website to the new Student IT website; maintaining the old SCS is confusing, unecessary and damaging to search engine optimisation efforts for the new website

✔ delete the old SCS website

Issue 11- must website visitors scroll?Severity: MediumResearch shows that website visitors do not like to scroll.Where this issue occursSitewide

A recent USA study showed that only 23% of website visitors will scroll a hompage on the first visit. In our own usability studies, the majority of participants either refused to scroll a webpage or reluctantly scrolled - with complaints – because they were forced to scroll in order to complete a task.

Recommendation✔ Do not make your visitors scroll. Simply restructure website content to

appear above the fold: at the very least, on the homepage.✔ Suggest a static homepage fitting above the scroll, and a separate

webpage exclusively for notices.


Webpage speed reportGenerated from websiteoptimization.com/services/analyze/

URL: http://www.its.otago.ac.nz/studentsTitle: Welcome to Student IT, Student IT, University of Otago, New ZealandDate: Report run on Mon Nov 3 18:03:13EST2008

DiagnosisGlobal StatisticsTotal HTTP Requests: 22Total Size: 264207 bytes

Object Size TotalsObject type Size (bytes) Download @ 56K (seconds) Download @ T1 (seconds)HTML: 4691 1.13 0.22HTML Images: 31739 8.13 1.97CSS Images: 191608 39.59 2.42Total Images: 223347 47.72 4.39Javascript: 36024 7.78 0.79CSS: 145 0.43 0.40Multimedia: 0 0.00 0.00Other: 0 0.00 0.00

External ObjectsExternal Object QTYTotal HTML: 1Total HTML Images: 9Total CSS Images: 7Total Images: 16Total Scripts: 3Total CSS imports: 2Total Frames: 0Total Iframes: 0


http://websiteoptimization.com/services/analyze/

Download TimesConnection Rate Download Time14.4K 209.17 seconds28.8K 106.79 seconds33.6K 92.16 seconds56K 57.06 secondsISDN 128K 20.53 secondsT1 1.44Mbps 5.80 seconds

SIZE# TYPE URL COMMENTS80962 CSS IMG www.its.otago.ac.nz ... /studentitheader_long.jpg Header size = 254 bytes 29807 CSS IMG www.its.otago.ac.nz ... 640/backrepeat_bottom.jpg Header size = 253 bytes 28588 CSS IMG www.its.otago.ac.nz ... 03/3639/rightcolumnh1.jpg Header size = 253 bytes 22594 CSS IMG www.its.otago.ac.nz ... /0016/3643/headingone.jpg Header size = 253 bytes

17275 SCRIPT http://www.its.otago.ac.nz/__lib/js/edit.js Header size = 265 bytes Congratulations! This file was compressed.

15420 CSS IMG www.its.otago.ac.nz ... 0016/3661/body_header.gif Header size = 252 bytes 13809 CSS IMG www.its.otago.ac.nz ... 0018/3636/rightcolumn.jpg Header size = 253 bytes 13177 IMG www.its.otago.ac.nz ... image/0015/3336/tutor.jpg Header size = 253 bytes

11247 SCRIPT http://www.its.otago.ac.nz/__lib/js/general.js Header size = 265 bytes Congratulations! This file was compressed.

7502 IMG www.its.otago.ac.nz ... stats_misc_tracker.js?... Header size = 264 bytes

7502 SCRIPT www.its.otago.ac.nz ... s/awstats_misc_tracker.js Header size = 264 bytes Congratulations! This file was compressed.

4691 HTML http://www.its.otago.ac.nz/students

Header size = 599 bytes Congratulations! This file was compressed. View a formatted version of this HTML file

4115 IMG www.its.otago.ac.nz ... /3663/studentitheader.gif Header size = 251 bytes 2547 IMG www.its.otago.ac.nz ... 2/university_web_logo.gif Header size = 250 bytes 2257 CSS* www.its.otago.ac.nz ... gns/design_123/styles.css Header size = 583 bytes 1065 IMG http://www.its.otago.ac.nz/?a=3529 Header size = 566 bytes 1036 IMG http://www.its.otago.ac.nz/?a=3525 Header size = 564 bytes 1020 IMG http://www.its.otago.ac.nz/?a=3527 Header size = 567 bytes 679 IMG http://www.its.otago.ac.nz/?a=3531 Header size = 569 bytes 598 IMG http://www.its.otago.ac.nz/?a=3528 Header size = 570 bytes 428 CSS IMG www.its.otago.ac.nz ... searchmagnifyingglass.jpg Header size = 250 bytes 380 CSS* www.its.otago.ac.nz ... _file/0015/3570/print.css Header size = 273 bytes

73 CSS www.its.otago.ac.nz ... xt_file/0016/3571/ie7.css

Header size = 271 bytes Congratulations! This file was compressed. View a formatted version of this CSS file

72 CSS www.its.otago.ac.nz ... ext_file/0017/3572/ie.css

Header size = 271 bytes Congratulations! This file was compressed. View a formatted version of this CSS file

264207* Total (^unique objects)#Congratulations. This site is using HTTP compression, otherwise called content encoding using gzip. The sizes reported here are for compressed content sent from the server to the client.* CSS alternate stylesheets may be referenced in the HTML but are not actually downloaded until they are needed and are therefore not included in the total page size.


http://www.its.otago.ac.nz/__data/assets/text_file/0017/3572/ie.css

http://www.its.otago.ac.nz/__data/assets/text_file/0016/3571/ie7.css

http://www.its.otago.ac.nz/__data/assets/text_file/0015/3570/print.css

http://www.its.otago.ac.nz/__data/assets/image/0014/3641/searchmagnifyingglass.jpg

http://www.its.otago.ac.nz/?a=3528





http://www.its.otago.ac.nz/_designs/design_123/styles.css

http://www.its.otago.ac.nz/__data/assets/image/0015/3642/university_web_logo.gif

http://www.its.otago.ac.nz/__data/assets/image/0018/3663/studentitheader.gif


http://www.its.otago.ac.nz/awjs/awstats_misc_tracker.js

http://www.its.otago.ac.nz/awjs/awstats_misc_tracker.js?nojs=y

http://www.its.otago.ac.nz/__lib/js/general.js

http://www.its.otago.ac.nz/__data/assets/image/0015/3336/tutor.jpg

http://www.its.otago.ac.nz/__data/assets/image/0018/3636/rightcolumn.jpg

http://www.its.otago.ac.nz/__data/assets/image/0016/3661/body_header.gif

http://www.its.otago.ac.nz/__lib/js/edit.js

http://www.its.otago.ac.nz/__data/assets/image/0016/3643/headingone.jpg

http://www.its.otago.ac.nz/__data/assets/image/0003/3639/rightcolumnh1.jpg

http://www.its.otago.ac.nz/__data/assets/image/0013/3640/backrepeat_bottom.jpg

http://www.its.otago.ac.nz/__data/assets/image/0017/3662/studentitheader_long.jpg

Analysis and Recommendations• TOTAL_HTML - Congratulations, the total number of HTML files on this page

(including the main HTML file) is 1 which most browsers can multithread. Minimizing HTTP requests is key for web site optimization.

• TOTAL_OBJECTS - Warning! The total number of objects on this page is 22 which by their number will dominate web page delay. Consider reducing this to a more reasonable number. Above 20 objects per page the overhead from dealing with the actual objects (description time and wait time) accounts for more than 80% of whole page latency. See Figure II-3: Relative distribution of latency components showing that object overhead dominates web page latency in Website Optimization Secrets for more details on how object overhead dominates web page latency. Combine, refine, and optimize your external objects. Replace graphic rollovers with CSS rollovers to speed display and minimize HTTP requests. Consider using CSS sprites to help consolidate decorative images. Using CSS techniques such as colored backgrounds, borders, or spacing instead of graphic techniques can reduce HTTP requests. Replace graphic text headers with CSS text headers to further reduce HTTP requests. Finally, consider optimizing parallel downloads by using different hostnames or a CDN to reduce object overhead.

• TOTAL_IMAGES - Caution. You have a moderate amount of images on this page (16 ). Consider using fewer images on the site or try reusing the same image in multiple pages to take advantage of caching. Using CSS techniques such as colored backgrounds, borders, or spacing instead of graphic techniques can help reduce HTTP requests.

• TOTAL_CSS - Congratulations, the total number of external CSS files on this page is 2 . Because external CSS files must be in the HEAD of your HTML document, they must load first before any BODY content displays. Although they are cached, CSS files slow down the initial display of your page. Remember to place CSS files in the HEAD and JavaScript files at the end of the BODY to enable progressive display.

• TOTAL_SIZE - Warning! The total size of this page is 264207 bytes, which will load in 57.06 seconds on a 56Kbps modem. Consider reducing total page size to less than 100K to achieve sub 20 second response times on 56K connections. Pages over 100K exceed most attention thresholds at 56Kbps, even with feedback. Consider optimizing your site with Website Optimization Secrets, Speed Up Your Site or contacting us about our optimization services.

• TOTAL_SCRIPT - Caution. The total number of external script files on this page is 3 , consider reducing this to one or two. Combine, refactor, and minify to optimize your JavaScript files. Ideally you should have one (or even embed scripts for high-traffic pages) on your pages. Consider suturing JavaScript files together at the server to minimize HTTP requests. Placing external JavaScript files at the bottom of your BODY, and CSS files in the HEAD enables progressive display in XHTML web pages.

• HTML_SIZE - Congratulations, the total size of this HTML file is 4691 bytes, which less than 50K. Assuming that you specify the HEIGHT and WIDTH of your images, this size allows your HTML to display content in under 10 seconds, the average time users are willing to wait for a page to display without feedback.


http://www.websiteoptimization.com/speed/tweak/suture/

http://www.websiteoptimization.com/speed/tweak/suture/

http://www.websiteoptimization.com/speed/tweak/javascript-optimization/

http://www.websiteoptimization.com/contact/

http://www.websiteoptimization.com/speed/

http://www.websiteoptimization.com/secrets/

http://www.websiteoptimization.com/speed/tweak/parallel/

http://www.websiteoptimization.com/speed/tweak/css-sprites/

http://www.websiteoptimization.com/secrets/

http://analyze.websiteoptimization.com/secrets/performance/II-3-object-overhead.html

http://analyze.websiteoptimization.com/secrets/performance/II-3-object-overhead.html

• IMAGES_SIZE - Warning! The total size of your images is 223347 bytes, which is over 100K. Consider switch graphic formats to achive smaller file sizes (from JPEG to PNG for example). Finally, substitute CSS techniques for graphics techniques to create colored borders, backgrounds, and spacing.

• SCRIPT_SIZE - Warning! The total size of external your scripts is 36024 bytes, which is over 20K. Consider optimizing your JavaScript for size, combining them, and using HTTP compression where appropriate for any scripts placed in the HEAD of your documents. You can substitute CSS menus for JavaScript-based menus to minimize or even eliminate the use of JavaScript.

• CSS_SIZE - Congratulations, the total size of your external CSS is 145 bytes, which is less than 8K.

• MULTIM_SIZE - Congratulations, the total size of all your external multimedia files is 0 bytes, which is less than 10K.


http://www.websiteoptimization.com/speed/tweak/cssmenus/

http://www.websiteoptimization.com/speed/tweak/compress/

http://www.websiteoptimization.com/speed/tweak/javascript-optimization/

http://www.websiteoptimization.com/speed/tweak/graphic-optimization/>optimizing images</a> for size, combining them, and replacing graphic rollovers with CSS. You can often <a href=

Recommended 5 minute readings

“Usability 101 - Introduction to Usability” www.useit.com/alertbox/20030825.html

“Key Research Findings Related to User-Centered Design“ www.humanfactors.com/downloads/dec03.asp

“Usability evaluation versus usability testing”www.humanfactors.com/downloads/sep03.asp#kath


http://www.humanfactors.com/downloads/sep03.asp#kath

http://www.humanfactors.com/downloads/dec03.asp

http://www.useit.com/alertbox/20030825.html

student it website usability review

Documents