1. Evaluation 2b Patriot Web
Jeff Offutt
SWE 632
User Interface Design and Development

2. Avoid “web-enabled” projects at all costs!!!
Summary
Student view differs from faculty view
This evaluation is based on the faculty view
Patriotweb is a “web-enabled legacy system”
We had an old system based on an ancient database
A company was hired to add a web interface
No changes to the underlying DB or software
Existing queries were used, without changing or adding
Avoid “web-enabled” projects at all costs!!!
18-Jan-19
© Offutt

3. Your #1 Criterion
1/18/2019
© Offutt

4. Overall Assessment Overall Assessment trash poor ok good smash 1 13 2 1 13 2 1
18-Jan-19
© Offutt

5. Getting There Login to www.patriotweb.gmu.edu
Lot of links – text and clickable links for login page
Redundant links and menus
Static UI
Too many options leads to an unclear mental model
Unclear navigation reduces time to learn, reduces speed of the UI, and increases rate or user errors
Search for classes involves extensive hierarchical model
Not straightforward
Menus are not descriptive enough to describe the webpage reference
Correction of errors is challenging
18-Jan-19
© Offutt

6. User Interface Login page has a lot of links
Redundant dashboard and ambiguous menu design
Time to learn is more
Functionalities are extensively hierarchical
Confusing interface and options
Violation of mental model
Links are inconsistent and uncategorized
Search is not prioritized
Sequence of navigation is lengthy and unclear
Directionless
Online help is not inconsistent
18-Jan-19
© Offutt

7. More Comments Remove inconsistent links
Cluster or categorize the links
Menus must be redesigned adhering to the mental model
Search must be redesigned
Website must be made responsive for mobiles/tablets
Vocabulary must be changed appropriately
Navigation must be improved/reorganized
Increase session interval
Decrease the hierarchical relations
Make the interface clearer and less cluttered.
18-Jan-19
© Offutt

8. Instructor’s Review Students Instructors Administrative staff
Beginners—use PW 2 or 3 times per semester
Criteria ranking: Learn, Errors, Retention, Speed, SS
Instructors
Intermittent—use PW 2 or 3 times per week
Criteria ranking: Errors, Speed, Learn, Retention, SS
Administrative staff
Experts—use PW many times per day
Criteria ranking: Speed, Errors, Learn, SS, Retention
18-Jan-19
© Offutt

9. Criteria (Instructors)
Learn
Speed
Errors
Retention SS
Priority 3 2 1 4 5
Goals
High
V. High
Low
Achieves
Moderate
Low
For me, this UI fails on 4 of 5 criteria
18-Jan-19
© Offutt

10. Splash Screen
Splash screen ( has no useful purpose
Why a commercial for IE? It works fine with Firefox
Login screen ( is simply a tiny form – on a big screen
Splash screen and login screen should be merged
An entire screen just to login slows the user down
No benefit to any other criterion
18-Jan-19
© Offutt

11. User Analysis What are common functions that faculty want?
Getting pay stubs
Assigning grades
Getting class rosters
18-Jan-19
© Offutt

12. Getting Pay Stubs Not under Financial Information
After much searching – under Employee Services
To get to pay stub :
Splash screen
Login screen
Menu screen (no title)
Choose “Employee Services”
Note the order of this menu ... most common item is pay stub
I don’t even have “time off”
Choose “Pay Information” (fifth entry)
Another 4-item menu .. not clear ...
18-Jan-19
© Offutt

13. Getting Pay Stubs (cont)
Choose “Pay Stub” (third entry!)
Choose a year from a drop-down
Should be combined with previous screen
Another menu of up to 24 items!
Choose item on top of the list
GUI Principle : Radio boxes are faster, easier to learn and less error prone, but take more space.
Always prefer radio boxes over drop-downs if space permits
18-Jan-19
© Offutt

14. Getting Pay Stubs (summary)
Total of 9 screens, 1 or 2 clicks per screen
Better design :
Merge splash and login (screens 1 & 2)
Merge menu 3 & 5, using javascript for submenu
At step 6, show current pay stub and add menus for other options
(9 steps becomes 3)
I don’t even bother looking at my pay stubs anymore …
I just look at my bank deposits
18-Jan-19
© Offutt

15. Entering Grades “Faculty & Advisor Services” Terminology :
Order of menu is wrong – this should be first
“View the Terms ...” should definitely not be first !
Terminology :
What is “CRN” ?
“Final Grades” should be “Enter Final Grades”
18-Jan-19
© Offutt

16. Entering Grades (cont)
An entire screen to “Select a Term”
Slow, imposes a short term memory burden
Note the default … changes to next term 3rd week of classes
Should default to current without making an explicit choice
Should not include choices 6 years ago … grade changes require a signed piece of paper
Only current semester is valid for entering grades …
Another screen to “Select the CRN”
“CRN” is not in users’ vocabulary, it is database-speak
Default is poorly chosen … Doctoral Dissertation Proposal
Dropdown for 4 elements should be radio box
The numbers are not in users’ vocabulary – I know “SWE 632”
18-Jan-19
© Offutt

17. Entering Grades (cont)
On the third screen: The “Final Grade Worksheet is unavailable”
An unavailable menu option is teasing
Hiding an unavailable feature behind three screens is torture
18-Jan-19
© Offutt

18. Entering Grades – UI Violations
Tell users when choices are not available immediately
The “Faculty & Advisor Services” screen should make “Final Grades” unavailable until finals week
CRN and Select Term screens set “state” in the UI
These should be set in radio buttons or click-boxes, not in a separate-screen menu
They should be on the main menu (“Faculty & Advisor Services”)
18-Jan-19
© Offutt

19. Getting a Class Roster
“Four items (“Detail Class List”, “Summary Class List”, “Detail Wait List”, “Summary Wait List”) sound a lot alike
“Detail class list” shows contact info for each student
Most of the time we want “Summary”
“Summary Class List” screen
NO USEFUL INFORMATION without scrolling - wasted space & time
Irrelevant information : ID
Reg Status
Level
Credits
Missing useful information:
Midterm
Final
Grade Detail
18-Jan-19
© Offutt

20. Getting a Class Roster (cont)
A useful functionality would be to either copy and paste or save the names into a spreadsheet
This is very inconvenient with the UI
I copied and pasted the entire page into a text editor, deleted extra information, then copied again to my spreadsheet …
Getting addresses ?
Scroll to bottom of the page
Click on “Display List”
It’s not displayed ! Is this an error?
Scroll down to the bottom - a textbox with a comma separated list of addresses!
Alternate formats would be a clickable link, a new column
Not convenient to associate names with s
Why not include as a default ?
“Return to previous” goes back to non- screen ...
“Return to previous” again goes back to screen with
18-Jan-19
© Offutt

21. Conclusions
Programmers obviously did not consider users, user needs, or usability principles
Ultimate “inside out” approach – the internals of the system existed for many years
Entering grades requires manipulating a pull-down for each student – slow and error-prone
List includes unavailable grades (Ds for graduate students)
List is ordered alphabetical (A, A+, A- …)
Sorry I can’t show right now …
The old paper system was faster, easier to learn, had fewer errors, was easier to remember semester to semester, and was much less annoying …
18-Jan-19
© Offutt