Education for Global Peace Website Prototype & Testkobsa/courses/INF231/15F/Group3... ·...
Transcript of Education for Global Peace Website Prototype & Testkobsa/courses/INF231/15F/Group3... ·...
Education for Global Peace Website Prototype & Test
Team 3
Daniel Lowell Gardner, Farshad Momtaz, Oliver Haimson,Harsh Bahua, Krish Rajesh Furia, Max Wei, Neeraj Kumar,
LouAnne Boyd, Ronit Kadam, Van Erick Custodio
Vision
Paula Garb Gal Kleinman
Our Story
• Designing a new website prototype for EGP platform (Education for Global Peace website)
• Testing the website prototype for usability: can users easily access the information they want and navigate across the three environments?
Presentation Outline
- Imagining the Users- Designing from the Data- Heuristic Evaluation- User Study- Quantifying the User Experience- Analysis (Results & Competitive)- Next Steps
Principles Anti Principles
• Peace Can Be Learned
• Inclusive
• Embrace Change
• Collaboration
• “For profit”
• Exclusive
• Indoctrinate
Scenarios
1. Student wants to learn about peace outside of class.
2. Student seeks opportunities to volunteer.
3. Teacher wants to share her knowledge for promoting peace.
4. Teacher is looking for training in peace.
5. Non-profit wants to promote a project of theirs
6. Teacher is looking for others to collaborate with to promote peace.
7. Researchers & Teachers looking for best practices research and curricula.
Personas
Teacher
Student
NGO Admin
Researcher
Architecture
Glo
bal P
eace
Edu
catio
n R
esea
rch
Cen
ter
EG
P M
ovem
ent
Sea
rch
Users
News Feed
Private Message
Peace Movement Website
Peace Gateway
Classes
Projects
Forums
Detailed Architecture
Website Flow Diagram
Backend Database Structure
Heuristic Evaluations: MethodsHeuristic Owner Score (Name) Evaluator Score (Name Notes:
Visibility of system status 0-10 0-10
Match between system and the real world 0-10 0-10
User control and freedom 0-10 0-10
Consistency and standards 0-10 0-10
Error prevention 0-10 0-10
Recognition rather than recall 0-10 0-10
Flexibility and efficiency of use 0-10 0-10
Aesthetic and minimalist design 0-10 0-10
Help users recognize, diagnose, and recover from errors
0-10 0-10
Help and documentation 0-10 0-10
Heuristic Evaluations10 heuristics that products should adhere to for a good user experience (Nielsen, 1994)
1. Visibility of system status: Keep the user
informed about the status of your system and give
them feedback in a reasonable time.
2. Match between system and the real world: Use
terminology and concepts the user is familiar with
and avoid technical jargon. Present information in a
logical order and follow real-world conventions.
3. User control and freedom: Allow users to control
what happens in the system and be able to return
to previous states (e.g., undo, redo).
Heuristic Evaluations4. Consistency and standards: Be consistent
throughout your product (e.g., terminology, layout, actions). Follow known standards and conventions
5. Error prevention: To the greatest extent possible, help users avoid making errors, make it easy for users to see when an error has been made (i.e., error checking), and give users a chance to fix them before committing to an action (e.g., confirmation dialog).
6. Recognition rather than recall: Do not force users to rely on their memory to use your system. Make options or information (e.g., instructions) visible or easily accessible across your product when needed.
Heuristic Evaluations7. Flexibility and efficiency of use: Make accelerators
available for expert users but hidden for novice ones. Allow users to customize the system based on their frequent actions.
8. Aesthetic and minimalist design: Avoid irrelevant information, and hide infrequently needed information. Keep the design to a minimum to avoid overloading the user’s attention.
9. Help users recognize, diagnose, and recover from errors: Although your system should prevent errors in the first place, when they do happen, provide error messages in clear terms (no error codes) that indicate the problem and how to recover from it.
10. Help and documentation: Ideally, your system should be used without documentation; however, that is not always realistic. When help or documentation is needed, make it brief, easy to find, focused on the task at hand, and clear.
User Study - (Ronit)
Cafe study Procedures:
Advertised and offered incentive
5-10 minute test of 16 tasks
Asked open-ended questions
13 participants (college students)
Quantifying the User Experience
User Study - 1: Results at a Glance
User Study - 2: Results at a Glance
Comparative Analysis
Implication 1: Submit Button!
Registration Form filled, where to ?
Implication 2: Standardize few icons One student commented that these icons looks similar which makes it difficult to identify its purpose.
- Use standard image for showing new message instead of green icon:
- Insert Pop-over on each icons:
Implication 3: Consistency through out website Use same terminology everywhere:
On Gateway Page: On Project Page:
On Research Page:
Implication 4: Make them scan, not read!On the Classroom overview page:
1. Have tabs for “My Instructor Classes” and “My Student Classes” instead of having a dropdown in addition to branding on the top left.
2. Have icons for simple actions like “Add” and “Edit”
Interview...Comments…- Too much content, Amazing UI, Replace Movement with something meaningful, Menu Titles should be changed, Important features should be clearer
Difference from similar tools ?- Ability to contact Professors, Authors, Students !
User Study with Admin Procedures3 members of board explored the wireframes
Global Online interviews for 45-75 mins
“Think aloud” which consisted of:
-Unique Administrator tasks
-Open ended questions and comments
Quick screen capture of interaction in Admin pages
Results of Admin User TasksTASK 17: Add a new grant to the grant management
TASK 18:
Add a Forum to the system
TASK 19:
Find Statistic information about the classes
TASK 20:
Approve the KLM project
TASK 21:
Sign out of the admin account
TASK 22:
Sort the grants by the grants awarded last week
TASK 23:
Find out total number of classes
User Study with Admin Positive Results
Praise“Nothing too painful, only been lots of clicking to look for something, but I realized I feel my way around enough, I wouldn’t feel uncomfortable, it was pretty user friendly for me.”--Admin P
“Everything seems to have a goal, there are various ways of participating, looks exciting, I can see how a student can hop on, a researcher can hop on, it’s very dynamic, it’s something that can be used globally.” -Admin P
What worked well: Use of and Placement of familiar object
Expected Placement:
sign out
Familiar interactions:
buttons and checkboxes
Findings of Admin study
Check all links work (i.e. forum links not working)
Carefully consider:
-familiarity with objects
-placement of objects,
-multiple ways to access info,
-language used to describe tasks
-missing interactions
Implication #1: Be careful with specific language
Implication #2: clarify images from and icons/buttonsone admin clicked wireframe object that represents a logo, thinking it was icon for mail
One did not realize that email and the
SNS icons were serving the same
function. “either/or” function.
Implication #3: Add missing interactions“Where is the submit button”-P2“Where is the save button”-Admin P
“Where is forum?”-Admin P, M-Added a forum management panel
Lessons Learned from User testing StudiesBig project is a lot to take in for a walk-up users
15 tasks for cafe study is too many
Links not working
Public setting vs lab/office
Complicated tasks
Low fidelity (consider testing higher fidelity mockups with full interactivity)
Evaluating ChamiloChamilo is an LMS (Learning Management System) which can be used for the Classroom component for Peace Ed Gateway.
The task:
● What? - Evaluate Camillo for appropriateness● Why? - Specific requirement by our client ● How? -
○ Create our own concept of Classroom and what are the client’s requirements for this○ Install Chamilo and use it as multiple personas○ Group features/requirements by a common theme○ Create a rubric for these features and give a boolean score
Evaluating Chamilo: Nonfunctional Goals
Peace Ed Gateway Chamilo
Free
Non-profit
Evaluating Chamilo: General Features Peace Ed Gateway Chamilo
Discussion/Forum integration
Setting Learning Goals
Class Template creation
Toolbox
In-built Email/Messaging
Notifications
Multi-role support
Evaluating Chamilo: Classroom Content Peace Ed Gateway Chamilo
Weekly schedule
Division by Section
Various Test Types
Auto-scoring
Video Upload
Audio Upload
Frames
Rich Text
Media Files (PDF, HTML, Flash)
Evaluating Chamilo: Instructor Specific Peace Ed Gateway Chamilo
Reporting/Graphs
Announcements
Issue completion certificates
Attendance
Export and Backup
Evaluating Chamilo: SummaryRecommendation: Can be used initially, but eventually PeaceEd should build its own Classroom system because Chamilo does not have:
a. Branded look and feelb. Multi-role usersc. Organized class/training schedulesd. Setting learning goalse. Template creation and sharing
Next Steps● Implement The feedback
from user testing● Implement features from
Chamilo● Interview/ Survey more
participants with implemented improvements
Fellowship OpportunityContact Paula
Thank you!
- Met with client, design information architecture- Division into subgroups- Overview of information architecture and iteration with client
- Rough wireframes of major components- Fleshing out global Search functionalities- Functionality/Integration of message board- Understand control-flow between pages of various components- Understand common functionalities/screens for different components
- Cognitive walkthroughs of each component- Iterative wireframing- Heuristic evaluation- Design of user/cafe study
- Low fidelity prototype ready (DB integration in place)
- Pilot study with a few members outside the group- Incorporate feedback in final user study- Full fledged cafe/user study- Incorporate feedback in wireframes/prototype
______________________________________________________________- Investigate Chamilo and discuss if it matches our requirements for ‘toolbox’- Final presentation in class
- Integrate findings, wireframes and feedback into a final report