Website usability: Studentlink Jessica Winblad Ravi Singh Ricky Sood Jendy Dennis Sahba Javedani.
-
Upload
maria-miller -
Category
Documents
-
view
220 -
download
4
Transcript of Website usability: Studentlink Jessica Winblad Ravi Singh Ricky Sood Jendy Dennis Sahba Javedani.
Website usability: Studentlink
Jessica Winblad
Ravi Singh
Ricky Sood
Jendy Dennis
Sahba Javedani
Introduction
Our focus: the usability of the studentlink website from an undergraduate perspective
Where Does This Link Go?Most people make mistakes when visual cues do not correspond to the everyday design norms and conventions.
Email Button
What does this button do?
WebMail?
Site Navigation
• Overall: Generally Good• Strong Points:
+ consistent navigation aids
+ avoids confusing navigation methods (eg. frames)
• Weaker Points:– No Site Map
– No Search Feature
Physical Layout & Appearance
• Use of– color– images
• Accessibility
• Overall, this is well done on Studentlink.
Site Colors & Background• Rule of Webdesign: Avoid loud backgrounds with
large variances in luminosity and color. Make the text contrast the background
• Why studentlink’s design is good: “A solid background is always a good choice for your web pages. It provides an easy reading surface for your reader and it doesn't distract the user from the main focus of your page: Your text!” –jeffglover.com
versus
Color & Background Continued
• This is hard to read
• eg:
• Compilers is # # # #
Color & Background Continued
• This is also relatively hard to read
Color & Background Continued
• These colors are much easier on the eyes
• Thus is good design
Additionally• The background image is designed not to
repeat like this:
This was a real webpage featured on webpagesthatsuck.com
Navigation Buttons (from upper right corner of window)
More On Color:things in red
• red consistently used to highlight things that are important – warnings
• not overused though– overuse would lead to decreased sensitivity to
this stimulus
Examples
Academic history page:
Financial aid page:
examples
holds: (flashing)
all pages that require logging on:
Blue
• occasionally student link deviates from conventions on color– example from academic history page:
• what is blue normally used for on webpages?• how this could be fixed...
Quick Quiz
• how are the items on the button bar on the left part of the window ordered?
Answer:
• Alphabetical• Is this logical?
– alphabetical keyboards vs. QWERTY & DVORAK layouts
• Alternatives– frequency of use– grouped by how you use them
Alphabetical Vs. Logical
Pictorial Navigation BarNow With Pictorial Cues
Goal Oriented Tasks
• Overview: Studentlink is designed with a very pertinent and important task in mind.
• Signing up for classes
• Managing your schedule
• Paying fees and managing accounts
• Changing personal data.
Usability in Printing
•Example using academic history page
Remove button bar on
printer friendly view
Make title of what you are
looking at more
noticeable
Decrease use of color (color does not print well on many printers)
White text prints in light grey, not black
Before
Use dashes in student number
Feedback of whatYou are viewing
Use font weight/Styles to make Things easier to Distinguish ratherThan color for printing
Using borders will make sections easier to distinguish than using backgrounds which do not usually print
After
Before & After
Default View Before Scrolling
After Scrolling
8th week winter quarter usage:
this entire quarter (winter) since the first of jan.
usage statistics we obtained from studentlink’s website
What Was Our Point?
• People look at next quarter’s schedule of classes more than this quarter on studentlink
• studentlink’s statistics prove it
• the next quarter should be the default– it’s not even an *option* till the middle of the
quarter anyway
Even though studentlink is not poorly designed, there is still much room for improvement.
Conclusion