Instructor s Dashboard of Peer Reviewing System. INF231: User Interface Design and Evaluation Discussion Group 3

Transcription

1 Instructor s Dashboard of Peer Reviewing System INF231: User Interface Design and Evaluation Discussion Group 3

2 People Clients Team Members Charu Chaudhari Dahlia Hegab Mira Kim Pavan Kadandale Yuwei Liang Lecturer, School of Biological Sciences, UCI Irena Yuxiao Mao Kartik Saxena Anirudh Sethi Bixia Si Ruoyun Xu Brian Sato Lecturer, School of Biological Sciences, UCI Akrapon Alex Yuktanon

3 Project Overview Purpose: Mock-up a system for peer reviewing Design a dashboard for a peer reviewing systems that allows instructors to assign submitted homework to peer graders, and to receive various types of information and statistics on the assessments that these peer reviewers deliver. Steps: User Study Low-fidelity Mockups Usability tests & Evaluation High-fidelity Mockups Iteration Prototype

4 Methods to solve HCI problems

5 Methods to solve HCI problems Interviews/Surveys For deeper inquiry, we hope to interview more students and instructors to address their respective usability problems using the peer review system and iterate future UX designs. We may also interview/survey a broader range of users. Prototyping According to the ideas we gathered from the previous steps, we use mybalsamiq to build mockups with the features which meet the requirements. Usability testing

6 Usability problems Current Peer Review System Each student can look over 2-3 other lab reports but it doesn t include grading (only section for making comments) Current system doesn t indicate quality of each reviewer s comments Instructor still has to grade hundreds of students reports

7 Usability problems New System (Instructor Side): Accessibility Issues: - Background and Text Contrast - Different colors for different deadlines - Icons easily understood - Font size/spacing easy to read *based on metrics from Jacob Nielsen s Homepage Usability and feedback from Prof. Pavan s Wants & Needs Analysis session on 10/22/14

8 Usability problems New System (Instructor Side): Navigation Issues: - Navigation is easily understandable - Homepage/Submission page is digestible in 5-10 seconds - Buttons/Links are consistent and easy to identify - Help/Site Search is accessible - *Scalability* *based on metrics from Jacob Nielsen s Homepage Usability and feedback from Prof. Pavan s Wants & Needs Analysis session on 10/22/14

9 Usability problems New System (Instructor Side): Content Issues: - Emphasize the highest priority tasks so users have a clear starting point on the homepage (most recent exam first, expanded) - make sure exam description information complete accurate and in text box (not a link) *based on metrics from Jacob Nielsen s Homepage Usability and feedback from Prof. Pavan s Wants & Needs Analysis session on 10/22/14

10 Usability feedback/problems New System (Instructor Side): Design Considerations: - - including text boxes for 3 specific date/times: - exams releases - submissions (i.e. upload by) - peer review grade received by calendar is pull down with times & dates self assessment box included *based on metrics from Jacob Nielsen s Homepage Usability and feedback from Prof. Pavan s Wants & Needs Analysis session on 10/22/14

11 Usability Feedback/Problems New System (Instructor Side): Design Considerations (continued): - - deadline cutoff (grayed out option) for assignment submissions/grading submissions and number of reviewers predictive dates based on previous calendar selection CSV export in proper formatting reset button for each exam parameter *based on metrics from Jacob Nielsen s Homepage Usability and feedback from Prof. Pavan s Wants & Needs Analysis session on 10/22/14

12 Next Steps for Usability Feedback/Problems New System (Student Side): obtain set of student users to give feedback on mockups obtain set of student users to conduct usability testing after initial designs

13 User Action Flowchart Flow chart based on client s wants and needs Instructor Side

14 User Action Flowchart Flow chart based on client s wants and needs Student Side

15 Low Fidelity Mockup Brainstorming based on the User Action Flowchart Wireframing on the whiteboard Each member designed their own low fidelity mockup using Balsamiq

16 Low Fidelity Mockup

17 Low Fidelity Mockup

18 High Fidelity Prototype Discussed and voted on good features of low fidelity mockups Designed a web-based prototype with some functionality Using Jetstrap (Demo) Drag & drop web UI builder

19 Updated Gantt

20 Upcoming Tasks

21 Instructor s Dashboard of Peer Reviewing System