Evaluation 2b Patriot Web Jeff Offutt http://www.cs.gmu.edu/~offutt/ SWE 632 User Interface Design and Development

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

Your #1 Criterion 1/18/2019 © Offutt

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

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

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

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

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

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

Splash Screen Splash screen (https://patriotweb.gmu.edu/) has no useful purpose Why a commercial for IE? It works fine with Firefox Login screen (https://patriotweb.gmu.edu/pls/prod/twbkwbis.P_WWWLogin) 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

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

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

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

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

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

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

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

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

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: Email Midterm Final Grade Detail 18-Jan-19 © Offutt

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 email addresses ? Scroll to bottom of the page Click on “Display Email List” It’s not displayed ! Is this an error? Scroll down to the bottom - a textbox with a comma separated list of email addresses! Alternate formats would be a clickable email link, a new column Not convenient to associate names with emails Why not include email as a default ? “Return to previous” goes back to non-email screen ... “Return to previous” again goes back to screen with email 18-Jan-19 © Offutt

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