CS@

From Cmsc434_s10
Jump to: navigation, search

A much needed overhaul of the cs.umd.edu website

Team members:

Joseph Isaac, Robin Brewer, David Forsythe, Patrick Dattilio

Project Proposal

Users and tasks

  • The CS website is used by undergraduate, graduate, and prospective students. Faculty, both professors and staff as well as companies looking to recruit potential employees and to offer contributions.
  • We would like to make the site much more aesthetically pleasing, including more colors and improving text readability.
  • A more intuitive navigation system is needed and can be accomplished by consolidating the links into drop down menus.
  • Include new links to the undergrad blog, Facebook group, CS wiki, forums, and even twitter.
  • Add a new and improved calender to the front page.

Existing solutions and their limitations

  • Information is distributed from the undergraduate blog, Facebook group, as well as emails. The wiki, forums and class webpages, none of which are linked from the front page. There is no centralized spot from which to reach all of these different sources, and we aim to provide one.
  • This website will be much easier to navigate after our redesign. There should be many fewer links visible, but still accessible. It will also be much easier on the eyes.

Meeting notes

  • Before choosing the cs website to overhaul, we looked at the Terp Poets website, the Go club website, as well as Facebook.
  • Photos of the whiteboard

DSC 0013.JPGDSC 0012.JPGDSC 0014.JPG

User and Task Analysis

Data Gathering Techniques

  • Direct Observation- Turn on a screen recorder, as well a webcam and microphone. We would give them a list of tasks to complete, measuring the time taken for each tasks, as well as errors.
  • Comparison to a Similar Product: We can show them other CS websites, such as Illinois, MIT, Carnegie Mellon, Stanford, Berkley, and Princeton.
  • Questionnaire
    • What interest do you have in the CS website?
    • What other CS websites have you used in the past?
    • What particular information are you looking for?
    • How often do you visit www.cs.umd.edu?
    • What sections of the site have you visited?
    • Which sections do you frequent?
    • What difficulties have you run in to navigating the website?
    • What do you think of the current layout of the website?
    • Do you think the website looks outdated and in need of a style upgrade?
    • What would you change about www.cs.umd.edu?

We sent a questionnaire to the following people:

Alex Dattilio- a 15 year old male. He is interested in majoring in Computer Science and has looked at our department as an option.

Users/Personas

  • Prospective Student
Age: 15-18
Education: Current High School Student
Job: Full Time Student
Computer Skill: Experienced
Location: Worldwide
Motivation: Seeking information about our program.
Attitude: Excited about attending College.
Usage Pattern: Infrequently

Persona: Madilynn Browne is a 16 yr old junior at Central City High School. She is researching colleges ranked in computer science to apply to next year. She has only visited the site once.

  • Current Student
Age: 17-22+
Education: Some college
Job: Full/Part Time Student
Computer Skill: Very Experienced
Location: University Of Maryland, College Park
Motivation: Information about events, classes, research opportunities.
Attitude: Busy, need information quickly.
Usage Pattern: Daily

Persona: Jack Daniels is a 19 year old Computer Science major at the University of Maryland. He frequents the site daily looking for company visits, especially those bringing free food. He is frustrated when he has to navigate through multiple pages to find his CMSC classes on the class list, which he checks multiple times a week.

  • Faculty
Age: 25+
Education: College Degree.
Job: Instructor/Professor/Administrator
Computer Skill: Varying levels of experience
Location: University Of Maryland, College Park
Motivation: Dispersing and receiving information about events, classes, research opportunities.
Attitude: Busy, need to get/give information quickly.
Usage Pattern: Daily

Persona: Tom Diddly is a Computer Science instructor at the University of Maryland. He uses the site to relay information to his students and find interesting events and stories that might increase their interest in different areas of Computer Science.

  • Staff
Age: 18+
Education: College Degree.
Job: Administrator
Computer Skill: Moderate level of experience
Location: University Of Maryland, College Park
Motivation: Assuring that the website is presentable to all it's anticipated user groups.
Attitude: Busy, need to get information quickly, cautious.
Usage Pattern: Daily

Persona: Jabroni McFoney is a IT specialist in the CS Department. He's 21 years old and has a passion for webmastering.

Other Stakeholders

The entire CS department as well as the University depend on the recruitment abilities of the CS website.

Tasks

  • Discover more about the CS program as a possible choice for college
Goal:Find out school rankings and testimonies of current students
Preconditions: Know how to get to the CS website.
Subtasks: Click one link (at most).This should be as simple as possible. Most of this information should be directly on the front page or one link away.
  • Making Advising Appointments
Goal: Schedule time to meet with one of the department advisors.
Preconditions: A current CS student.
Subtasks:
View list of current advisors and appointment availability.
Sign up for a specific time. This time slot should no longer be available to other students.
  • Accessing Class Websites
Goal: Go to a specific class website for information such as the syllabus and homework assignments.
Preconditions: Must be enrolled in a CS class and know how to get to the class portion of the website
Subtasks:
From home page, search for class name and press enter OR Click one link to see a list of all the class pages.
  • Finding Graduation Requirements
Goal: Discover necessary acquirements in order to graduate with a CS degree.
Preconditions: Curiosity of CS degree requirements.
Subtasks:
Decide if you want to know requirements for a major or minor
Look up course descriptions and prerequisites.
  • Learning about classes offered
Goal: Find information about the classes offered by the CS department during a certain semester.
Precondition: A curiosity about CS classes.
Subtasks:
Open the list of currently available CS classes, grouped by semester.
Click on a class to load the class page (if the professor has made one), or a generic place holder with a class description.
  • Learning about CS events
Goal: Discover events taking place within the CS department
Preconditions: Know how to get to CS website.
Subtasks:
View calendar of events
Hover to find relevant information OR at most click one link to find more detailed information about the event.
  • Find contact information
Goal: Obtain an e-mail address, phone number, and/or office location of a staff/faculty member.
Preconditions: Know which faculty/staff member you intend to look for.
Subtasks:
Look for faculty/staff last name.
Look for faculty/staff first name.
Utilize contact information for that faculty/staff
  • Instructions on reserving rooms, using printers and other CS resources.
Goal: Reserve a room for a CS department related activity
Preconditions: Know the time and date of the event.
Subtasks:
Look for available rooms on the day of the event on event and reservation calender.
Reserve an open room on the day of the event.

Design Sketches

Scenarios

James is a senior in High School looking at various University websites, searching for information to help choose the best Computer Science department for him (TASK). He searches the University website (CONTEXT) and navigates to the www.cs.umd.edu website (PRECONDITION) where he clicks on the "Prospective Students" link. He is greeted by photos of undergrads in class, studying, and enjoying their time. He sees pictures which are labeled and linked to information prospective students are often interested in, like school rankings, publications, and alumnus. He clicks on Undergraduate research and likes what he sees.(SUBTASKS). He mouses over the prospective student section and clicks on the "Apply now!" link and begins the application process. He leaves the website and never bothers going back.(FREQUENCY:once)


Mike Joooones is a sophomore computer science student at the University of Maryland, taking a 3 computer science courses (LIMITED TIME). He want's to navigate between his class pages and the CS forum efficiently (TASK). He navigates to www.cs.umd.edu (PRECONDITION) and mouses over the "Current Students" menu header (SUBTASK), where he is able to then view and click the "Class Web Pages" menu entry (SUBTASK). He is then shown a page with a list of current classes, in order by number. He clicks on the page of his first class (SUBTASK), which is styled using a common style sheet that all class pages share. The page is also headed by links back to the class webpage list page, and back to www.cs.umd.edu. He then clicks the button at the top of the page which takes him back to the class webpages page, and goes onto his next class. The repeats this sever times, gathering various information from his classes (NEEDS). Once he is done looking at this class pages, he returns to www.cs.umd.edu using a link on the final class page, and mouses over the "Current Students" menu again. This time, he clicks on "Class Forums" (SUBTASK). He browses the forums and submits a question about on of this classes [the cs forum is not part of the remodel] (SUBTASKS). Once he is done, he goes off to do his homework, but will likely be back on his class webpages within a few days (FREQUENCY: semi-frequent).

Omar Goodbar is a Senior, Computer Science student at the University of Maryland taking 15 credits with 12 of them being computer science courses(HIGHLY MOTIVATED and AMBITIOUS). Omar is applying for grad school (INFREQUENT), but one his applications require 3 letters of recommendations for CS professors and advisors (NEED). Omar remembers his top 3 favorite professor and advisors from his undergraduate experience, so he wants to use them as recommenders (PRECONDITION). So, he decides to look for contact information to help satisfy this requirement (TASK). He uses the CS Department website at UMD (CONTEXT) to find a link to a faculty and staff directory (SUBTASK). On the website, he finds a drop down menu for People and clicks Faculty/Staff Phone book (SUBTASK). The faculty and staff are all listed in alphabetically order, so he finds the contact information he needs and writes them down (SUBTASK).

Story Boards

Conceptual

UI

Paper Prototype

Risk assessment

The layout of our menus is the main risk for our project. Our scenarios will test each drop down menu, and see where users intuitively think certain sections should go.

Prototype photos

Briefing

"We are redesigning and updating the University of Maryland Computer Science website, providing a complete overhaul of the navigation system.

Scenario Tasks

A prospective student is looking for more information about the CS department. Find more information relevant to prospective students. Apply to the school.

As a current student, you need to find your class webpage for last semester.

As a faculty member, find the contact information for one of your colleagues.

Observations

User 1: Finding information prospective: quickly found the about menu and the prospective student page. Found the apply button with no troubles. As a current student he navigated the academic menu and found the class listing pretty well. He looked conus confused ed when the listing wasn't apparent, he had to click on the drop down. we may want to have the current semester already loaded. Looking for faculty information, he instinctively clicked the menu link like we anticipated. He found the faculty listing page and found the professor.

User 2: Looked at the undergrad program instead of the prospective students. Once he checked the other menu he was fine. Found the class page link under the academics menu, and made it to the page. Also was confused about the drop down button. He felt the ABOUT menu was a bit generic as a title, maybe prospective students would be better under academics.

User 3: This user also had problems choosing the correct menu. He also looked under academics. He got stuck on the drop down. Clear problem here. "wouldn't go automatically to about for general information. Could be appropriate but not his first guess." Consider making "Prospective Students" menu with a link for more information and a link to apply.

User 4: Another failure for the "About Menu" 75% of the people got it wrong, we need to change up the menu. Found the class page quickly, hung up on the drop down as well. 100% of our users were hung up here. He corroborated the idea that he wouldn't intuitively look under menu, likes the idea of a prospective student menu.

User 5: Also missed the Prospective student page. 80% failure rate. He was hung up when the class page loaded, looking like he was waiting for something to happen. We definitely need to load the current semester's classes. He clicked research for finding people, instead of the "People" menu.

Project Iteration

Our second iteration of our prototype move 'Prospective Students' into its own menu on the top bar, and then moved the apply button into that menu. This also means we removed the apply button from our the top bar.

Observation from the real users

User 1: (Prospective Student) Didn't seem to have any issues with the prototype even though they had never seen it.

User 2: (Current Undergrad) Didn't realize that the loaded drop down was the complete classes page. Though we can't be 100% sure if this is because of the look of our paper prototype or simply bad design. It will make more sense when we test with a computer prototype.

User 3: (Graduate Student) Easily found the faculty information they were searching for without being prompted to press specific buttons.

Risk Resolution

We've noticed that nested drop down menus can cause a problem. Our design solution for this is to add visual cues that tell the user how to interact with the page. For instance, our drop down menus will have arrows pointing down, and above the top bar there will be a temporary message prompting users to look for further information.

Computer Prototype

CS@ Prototype

System requirements

The base requirement for out application is Adobe Flash. The current implementation of the the application can be run as a standalone Flash application, but it is preferable to run it in a web browser to simulate real world use. A minimum resolution of 800x600 is ideal.

Start up instructions

To start up the application, the user can click CS@ Prototype. To use the application, you must first think like a prospective high school student and look for general information. You want to look up information about the computer science guidelines regarding AP exams and possibly want to schedule a visit. If you like what you see, you may apply.

Fidelity

The only pages implemented in our computer prototype at this time are the home page and the prospective students page. From the prospective students page, the user can reach the application page. There are currently no error message implemented, which would likely be stemming from server errors rather than GUI errors anyway.

Comparison

On the left are pictures of our paper prototype. On the right are shots of our computer prototype.

Experimental Design

Robin Brewer

Part 1: Design

  1. State a lucid and testable hypothesis
    • It is faster for a prospective student to locate information about AP exam scores.
  2. Identify independent and dependent variables
    • Independent:
      • UI of current CS website vs. our version of the CS website
    • Dependent:
      • User reaction time
    • Controls:
      1. Familiarity with old CS website
      2. Familiarity of computers.
  3. Design the experimental protocol
    • Task:
      • Select 'AP Information'
    • How?
      • Within subject.
  4. Choose the user population
    • Who?
      • High school students who haven't been to the UMD CS webpage before
    • How to sample?
      • Recruit high school students at local high schools involved in engineering or computer science afterschool activities.

Part 2: Run Experiments

  1. Apply for human subjects protocol review (IRB)
  2. Run some pilot participants
  3. Modify and finalize the experimental protocol
  4. Run the experiment

Part 3: Analyze Results

  1. Perform statistical analysis
    • Null Hypothesis:
      • It is not faster as a new user to find information about AP exam scores on our CS website than the old computer science website.
    • Alternative Hypothesis:
      • It is faster as a new user to find information about AP exam scores on our CS website than the old computer science website.
  2. Draw conclusion
  3. Communicate results

Patrick Dattilio

Part 1: Design

  1. State a lucid and testable hypothesis
    • Our new website's navigation is faster to use than the current version.
  2. Identify independent and dependent variables
    • Independent:
      • Which version of the website is being used.
    • Dependent:
      • Time spent using the navigation interface.
    • Controls:
      1. The computer being used.
      2. The internet browser.
      3. The internet connection.
  3. Design the experimental protocol
    • Task:
      • Navigate to the class list for fall 2006.
    • How?
      • Given the same computer, browser, and internet connection, have the user (starting from the main page) find their way to the class list for the specified semester.
  4. Choose the user population
    • Who?
      • Current CS students
    • How to sample?
      • Request students to complete the experiment following the required course evaluation.

Part 2: Run Experiments

  1. Apply for human subjects protocol review (IRB)
  2. Ask department/professors to allow us to recruit in class.
  3. Using one computer/browser/internet connection have each student navigate both websites.
  4. Time the students, and ask for feedback.

Part 3: Analyze Results

  1. Perform statistical analysis
    • Null Hypothesis:
      • The redesigned website is equally as quick to navigate or slower than the current website.
    • Alternative Hypothesis:
      • The redesigned website is not as well liked as the original.
  2. Draw conclusion
  3. Communicate results

Joseph Isaac

Part 1: Design

  1. State a lucid and testable hypothesis
    • Users access contact information they need faster.
  2. Identify independent and dependent variables
    • Independent:
      • Current CS website vs. CS@ Website
    • Dependent:
      • Users ability to navigate to information
    • Controls:
      1. User experience with the website
      2. User knowledge of the spelling of contact information
      3. Age
  3. Design the experimental protocol
    • Task:
      • Find a faculty member's contact information
    • How?
      • Within the subject
  4. Choose the user population
    • Who?
      • College students
    • How to sample?
      • Gather random students around campus

Part 2: Run Experiments

  1. Apply for human subjects protocol review (IRB)
  2. Run some pilot participants
  3. Modify and finalize the experimental protocol
  4. Run the experiment

Part 3: Analyze Results

  1. Perform statistical analysis
    • Null Hypothesis:
      • It is not faster to access needed information on our CS website compared to the current CS website.
    • Alternative Hypothesis:
      • It is faster to access needed information on our CS website compared to the current CS website.
  2. Draw conclusion
  3. Communicate results

David Forsythe

Competing System

We will compare our design and implementation of the Computer Science Department homepage with the current implementation of the page.

Hypothesis: A single implementation of the Computer Science Department homepage will be perceived as most usable and aesthetically pleasing by the testing users.

Independent: The website implementation used.

Dependent: Usability and design rating.

Controls:

  • Computer used: the same computer would be used for each experiment
  • Familiarity with the current CS homepage: users should not have drastically different levels of experience with the current Computer Science homepage, if any at all.
  • User goals: Each user should be given the same goal.

Task: Find course requirement information about the undergraduate CS program at UMD.

Between Subject: If both sites use similar menu labels, after testing one site, a user may be able to quickly navigate through another (or conversely, could get lost on another) which would skew results.

User population:

Who: Prospective Computer Science Students

How: Get students in high school or early undergraduate years who are considering Computer Science as a major or minor.

Finding prospective students might be difficult because high schoolers might not know what they want to study, and if they have decided on something to study, chances are they have already visited some sort of informational page.

Null Hypothesis: Both sites will be rated the same in terms of usability and design.

Alternative Hypothesis: A single implementation will have a high usability and design score than the other.

Implementation

Plan

UI: Must have

  1. Update the menu bar so that the correct links are shown when you hover over each item. [Patrick]
  2. Update the links in the menu bar to link to the actual HTML pages. [Patrick]
  3. Make it so that when you click on the main banner (the one all the way at the top) that it takes you to the home page [Joey]
  4. Get the links to work on the connect part of the home page [Robin]
  5. Get links to work on the prospective students page [Joey]
  6. Make the picture banner wider to expand the width of the menu bar [Robin]

UI: Nice to have

  1. Links in Faculty listing: e-mail, website
  2. Get page to expand with the width of the current screen

Server: Must have

  1. Get pictures showing [Robin]
  2. Get the picture banner to change every few seconds on the home page
  3. Add more faculty, maybe 1 listing for about 5 letters?

Server: Nice to have

  1. Brief data descriptions for each major class on Class pages
  2. Have the faculty member listing and class page listing copy data from current CS website

Execution of the Plan

UI: Must have

  1. Update the menu bar so that the correct links are shown when you hover over each item. [Patrick]
  2. Update the links in the menu bar to link to the actual HTML pages. [Patrick]
  3. Make it so that when you click on the main banner (the one all the way at the top) that it takes you to the home page [Joey]
  4. Get the links to work on the connect part of the home page [Robin] [Robin]
  5. Get links to work on the prospective students page [Joey]
  6. Make the picture banner wider to expand the width of the menu bar [Robin] [Robin]

UI: Nice to have

  1. Links in Faculty listing: e-mail, website
  2. Get page to expand with the width of the current screen

Server: Must have

  1. Get pictures showing [Robin] [Robin]
  2. Get the picture banner to change every few seconds on the home page[David]
  3. Add more faculty, maybe 1 listing for about 5 letters?[David]

Server: Nice to have

  1. Brief data descriptions for each major class on Class pages
  2. Have the faculty member listing and class page listing copy data from current CS website

User Testing and Analysis

Final Implementation

Media:csat.swf