Web Usability

1
Web Usability

• Dont Make Me Think!

2
Introduction

• Not an Expert an Exposed
• You cant buy experience
• Concerns Raised in Discussions
• Usability Accessibility
• Design Layout (Navigation)
• Icons ?

3
Definition of Usability

• The effectiveness, efficiency, and satisfaction
  with which specified users achieve specified
  goals in particular environments
• (ISO Definition).

4
Five Components of Usability

• Learnability How easy is it for users to
  accomplish basic tasks the first time they
  encounter the design?
• Efficiency Once users have learned the design,
  how quickly can they perform tasks?
• Memorability When users return to the design
  after a period of not using it, how easily can
  they reestablish proficiency?
• Errors How many errors do users make, how severe
  are these errors, and how easily can they recover
  from the errors?
• Satisfaction How pleasant is it to use the
  design?

5
Usability Testing

• Test with People
• Expensive!! - 25,000
• Prototyping
• Users given exercises

6
Cheap Usability - Heuristics

• Guidelines / Best Practices from studies
• Useful to Keep In Mind when developing
• http//psychology.wichita.edu/optimalweb/print.htm

Where do users expect to find the Internal Links?
7
Implementing Usability in KNG

• Usability is a quality attribute that assesses
  how easy user interfaces are to use.
• The word "usability" also refers to methods for
  improving ease-of-use during the design process.
• Need to test Watch Users in Action
• PHP, JavaScript, CSS

8
E.g. Chat Module
CSS can be used to make the iframe appear as flat
onLoad - Place cursor in text area
9
Accessibility

• Refer to accessibility to screen readers
  visually impaired
• Easier to test. Web tools available
• http//www.wave.webaim.org
• Not only for disabled
• Everyone benefits from a well-organized website

10
Tags to be used

• ltlabel for"fname"gtFirst Namelt/labelgt
• ltinput type"text" id"fname" name"fname"gtltbrgt
• ltfieldsetgt
• ltlegendgtChoose your sexlt/legendgt
• ltinput type"radio" id"male" name"sex"
  value"Male"gt
• ltlabel for"male"gtMalelt/labelgtltbrgt
• ltinput type"radio" id"female" name"sex"
  value"Female"gt
• ltlabel for"female"gtFemalelt/labelgt
• lt/fieldsetgt

11
Implementation in KNG

• Especially in Form Elements
• Take care in the layout use of JavaScript
• onChange
• Need to Create a Class for
• Label
• Legend
• Fieldset
• Add ids to input elements
• text_name, radio_name, checkbox_name

12
Layout of Pages

• Post Login
• Context Home
• Content

13
(No Transcript)
14
(No Transcript)
15
POST Login Screen
Home gt Welcome Derek Keats
Derek Keats
Your Calendar
News
Photo
--------------------------------------------------
--------------------------------------------------
--------------------------------------------
--------------------------------------------------
--------------------------------------------------
--------------------------------------------
--------------------------------------------------
--------------------------------------------------
--------------------------------------------
--------------------------------------------------
--------------------------------------------------
--------------------------------------------
Email (2 Unread)
Personal Space
Buddies Online
Due Dates / Events
28/9 Report Due 8/10 - Presentation
Join Context
Currently in Lobby
Whats New
Select a Course
V
ScrollingNews
Enter Course
Syndicate RSS Feed
Currently logged in as Derek Keats (Log Out)
16
POST Login Screen (2) - Blog
Home gt Welcome Derek Keats
Derek Keats
Latest Blogs
News
Photo
Project ManagementBy M. Benn (25/8) Lessons
from Scorm By W. Nitsckie (24/8)
--------------------------------------------------
--------------------------------------------------
--------------------------------------------
--------------------------------------------------
--------------------------------------------------
--------------------------------------------
--------------------------------------------------
--------------------------------------------------
--------------------------------------------
--------------------------------------------------
--------------------------------------------------
--------------------------------------------
This can be blogs the user subscribes to!!
Email (2 Unread)
Personal Space
Buddies Online
Join Context
Currently in Lobby
Whats New
Select a Course
V
ScrollingNews
Enter Course
Syndicate RSS Feed
Currently logged in as Derek Keats (Log Out)
17
(No Transcript)
18
Entering a Context
Home gt Making Kewl Courses
Making Kewl Courses
Events Calendar
Welcome to Making Kewl Courses
Course Photo
About this Course --------------------------------
--------------------------------------------------
--------------------------------------------------
------------ -------------------------------------
-----------
Content
Discussion Forum
Chatroom
Due Dates / Events
Real Time Comm.
28/9 Report Due 8/10 Presentation 16/10
Workshop 8/11 Presentation
Worksheets
Discussion Forum
Whos Online
Wesley Nitsckie ( )
5 Latest Posts - -
Tohir ( )
Derek ( )
Currently logged in as Derek Keats (Log Out)
19
(No Transcript)
20
(No Transcript)
21
(No Transcript)
22
(No Transcript)
23
Entering a Context
Home gt Making Kewl Courses
Making Kewl Courses
Events Calendar
Welcome to Making Kewl Courses
Course Photo
About this Course --------------------------------
--------------------------------------------------
--------------------------------------------------
------------ -------------------------------------
-----------
Content
Discussion Forum
Chatroom
Due Dates / Events
Real Time Comm.
28/9 Report Due 8/10 Presentation 16/10
Workshop 8/11 Presentation
Worksheets
Discussion Forum
Whos Online
Wesley Nitsckie ( )
5 Latest Posts - -
Tohir ( )
Derek ( )
Currently logged in as Derek Keats (Log Out)
24
(No Transcript)
25
(No Transcript)
26
Content Page for the Context
Home gt Making Kewl Courses gt Content
Making Kewl Course
Welcome to the Knowledge Environment for Web -
based Learning! Welcome to the course for
courseware development in UWC's KEWL project.
KEWL stands for Knowledge Environment for Web -
based Learning. This software is homegrown at
UWC, and developed by IOI Online Services as a
product of four years of research into online
educational practice by Prof Derek Keats and a
team of staff and students. This introductory
course will introduce you to some principles of
online learning, and teach you the basics of
developing and running an online course using the
features of KEWL. Here the focus is mainly on our
own built-in courseware creation tools. We hope
that you enjoy it and find it useful. Please feel
free to send us your comments, suggestions,
complaints, whatever.
Course Photo
Bookmark this Page
Currently logged in as Derek Keats (Log Out)
27
Content Page for the Context (2)
Home gt Making Kewl Courses gt Content gt User Notes
Making Kewl Course
Your Notes for this page
Welcome to the Knowledge Environment for Web -
based Learning! Welcome to the course for
courseware development in UWC's KEWL project.
KEWL stands for Knowledge Environment for Web -
based Learning. This software is homegrown at
UWC, and developed by IOI Online Services as a
product of four years of research into online
educational practice by Prof Derek Keats and a
team of staff and students. This introductory
course will introduce you to some principles of
online learning, and teach you the basics of
developing and running an online course using the
features of KEWL. Here the focus is mainly on our
own built-in courseware creation tools. We hope
that you enjoy it and find it useful. Please feel
free to send us your comments, suggestions,
complaints, whatever.
Course Photo
--------------------------------------------------
--------------------------------------------------
--------------------------------------------------
------------------
Currently logged in as Derek Keats (Log Out)
28
Icons Toolbar
29
Icons on the Tool Bar

• Icons on the Tool Bar Needed, but which ones.
• Not recommended to have each everyone. Space!
• Which are the essential ones?
• How do we link to those that arent context
  specific, e.g. Blog.

30
Drop Down Menu

• Drop Down Menus are an accessibility nightmare.
  http//www.useit.com/alertbox/20001112.html
• An accessible menu has been achieved by
  www.udm4.com (but isnt open source / public
  domain http//www.udm4.com/licensing/terms/noncom
  mercial/)
• Also see http//www.alistapart.com/d/horizdropdow
  ns/horizontal.htm(Uses CSS - claim to be
  accessible)

31
Sun Microsystems Icons Test
32
Final Set of Icons
33
Suggestion for ICONs

• Icons Test Identify what the Icon means
• Icon Intuitiveness
• Metaphoric rather than Anthropomorphic
• Text beneath Icon Source Files
• Roll Overs
• Dynamic e.g. New Mail