The main aim is to perform customer research on the website using graduate students with several Human Computer Interaction methods(HCI) to generate results and provide necessary design recommendations to the website.
3 Data Collection and Analysis
5 Design Recommendations
The NCSU CSC website is operated by the department of Computer Science of the North Carolina State University. The website provides information about academics, research areas, faculty, and general contact information. The home page of the website provides information about all the Computer Science related news and events. There are links which direct to admission applications, corporate relations, donations and also information required for the current and future students.
The Computer Science website is evaluated using a combination of the HCI methods involving customer research and feedback from the graduate students. Using the methods of heuristic evaluations, Competitive Analysis, Contextual Design and Survey the data is collected and analyzed. Based on the results, a prototype of the design is suggested. Each of the applied methods is discussed as follows.
2.1 Heuristic Evaluation
Heuristic Evaluations is one of the methods to evaluate the user experience of the website. This method allows us to consider different use cases and personas to evaluate different aspects of the websites to give the point view of the users in different scenarios.
2.2 Competitive Analysis
Competitive analysis is a way of comparing the given website with other websites of similar kind to understand the gaps and opportunities and find features worth emulating. The NCSU CSC website is compared with the CSC websites of other universities such as University of Southern California (https://www.cs.usc.edu/), University of Maryland Baltimore county (https://www.csee.umbc.edu/), Massachusetts Institute of Technology(https://www.eecs.mit.edu/), Carnegie Mellon University (https://www.csd.cs.cmu.edu/),The Ohio State University (https://cse.osu.edu/),The Rutgers School of Arts and Sciences(https://www.cs.rutgers.edu/) and The University of Massachusetts ,Amherst(https://www.cics.umass.edu/) on various factors such as Aesthetic Appeal, Navigation within the Website, Time Taken in Information Retrieval, Website Structure and Layout, Availability of Information.
2.3 Contextual Design
The contextual design method involves the process of questioning, interpretation followed by the affinity diagramming. The responses from students are collected and interpreted to generate an affinity diagram having specific design issues.
Surveys are a good way to know the opinion (likes and dislikes) of the people on large scale. I conducted a survey using google forms to better understand the customer (students) preferences. The survey included questions about basic demographic features, purpose of using the CSC website, the liked features, the problems faced while using the website, satisfaction levels on various aspects such as navigation, aesthetics and the website layout to understand the general activity on the website and the common problems faced.
Prototyping is used to provide the design recommendations of the website by analyzing all the problems from different methods of evaluations. Balsamiq is used to generate a low fidelity wireframe model. I preferred wireframes to paper prototypes as Low fidelity wireframes are easy and quick to create and adjust with each design iteration making them efficient and low cost.
3 Data Collection and Generation
For each of HCI methods mentioned above (Heuristic Evaluation, Competitive Analysis, Contextual design and Survey) the data is collected and used in different ways.
3.1 Heuristic Evaluation
In this method the NCSU CSC website is analyzed with different personas. Some of the personas used were
- Prospective student looking out for information about the courses
- Current student looking out for more information about the graduate program
- Prospective students searching for general information within the website
For each persona case I considered some scenarios such as trying to find professor details, research topics etc. and generated the Usability aspect reports . The below table represents a part of the UAR form, it consists of problem with the website, the heuristic being violated and the intensity of the problem.
3.2 Competitive Analysis
The Competitive Analysis method helped to understand different features (both good and bad) of the Computer Science websites of different universities.
Table 2: Competitive Analysis table comparing various features of the Universities
3.3 Contextual Design and Affinity Diagramming
In the Contextual design part, some of the graduate students were questioned about the website and based on their inputs I prepared the affinity diagram. The two major groups in the diagram are the design issues and the information requirements which are given as follows
Fig 1: Affinity Diagram for Design issues
Fig 2: Affinity diagram for information requirements
3.4 Survey Analysis
The responses from the survey are analyzed using google forms .The survey incorporated both qualitative(textual Description questions) and quantitative questions(ratings).
4 Results of the Data Analysis
I observed the following results by analyzing the data collected from the survey
The distribution of role of the students and the activity (number of times the CSC website was used) are as follows
1) Role - Around 69.7% of the participants who took the survey were the current students followed by prospective students(around 14.3% ) and the rest were alumni and other students.
2) Activity – Most of the participants (75%) visited the website around 1-10 times over the last month ,17.9% people visited around 11-30 times .The percent of people who visited the website more than 30 times is very less (less than 10%).
Fig 3: Pie chart showing distribution of role
Fig 4 : Pie chart showing the distribution number of times the website was used in the last month
On observing the satisfaction levels I found that most of the students were satisfied with the aesthetic appeal, website structure and layout, information and its retrieval however many were not satisfied with the navigation which indicates the clear problem within the website.
Fig 5: Bar graph comparing the satisfaction levels of various aspects of the website
On observing the results
The good aspects of the website are
- Color scheme
- General Aesthetics
- Information and Organization within the website.
The problems with the website are
- Navigation within the website
- Search bar and home button glitches
- Unable to access the course catalog and find the course information,
- Faculty information was not proper organized
- Research areas are not clear
The average rating of the website was 6.67 with 32.1 % of the students rating the website 7 and around 25 % of the people rating the website 6 which indicates that people are not greatly satisfied with the website and changes are necessary.
Fig 6: Bar graph showing the distribution of Overall rating of the website
5 Design Recommendations
After applying the HCI methods, collecting the data and analyzing the results for each method I identified a set of common problems discussed below
- Absence of Direct links: The CSC home page does not provide direct links to the courses and to get to it we need to follow a series of links Academics àGraduate Program àTrack àCourses
- Absence of Home button: The home page of the website does not have a home button, but the functionality of redirection is provided to the Computer Science tab at the top which is hard to recognize at first.
- No selected page indication: The CSC website does not highlight the chosen page in the Navigation bar
- No filtering in people’s page : In the people page the professor’s information is listed in a random order and only search by the name is possible which makes it difficult for people who want to search by course or research topic.
- Search Bar glitch: The search bar in the NCSU CSC website is actually a part of the NCSU main website so as we use the search bar we come out of the CSC site and there is no redirection into the CSC site
- Lack of Proper Organization within the research page :The research page has multiple links by professors and by area however no proper grouping is done to give an overview
For each of the above discussed problems a design modification is proposed with a low fidelity wireframe model.
This design address three of the problems-Absence of home button No selected page indication and Absence of direct links. The home button is added to the navigation bar along with the tabs such as about ,academics etc so that the user can come back to home page from any page which is better than the redirection link camouflaged in the Computer Science keyword Also the current page (homepage ) is highlighted. The academics tab has a course catalog which will directly get to course page.
Fig 7: Wireframe for design 1
This design addresses the search problem and provides an improved solution where now the search is added within the CSC website instead of the NCSU website so that after the search is done using the home button we can get back to the CSC page.
Fig 8: Wireframe for Design 2
This design provides filtering options on the people’s page .Here I have provided filtering based on the name and on the keyword (which can be a research area).After entering the search data ,on clicking the “Find Faculty” button it displays a list of all the faculty corresponding to the search value. Similarly, by selecting a combination of or either of “By Affiliation” and “By Course” and clicking the “Find faculty“ it will provide the list of faculty having the given values.
Fig 9 : Wireframe for Design 3
This proposes a better visual display of the research areas of the faculty in the form a grid with all the faculty along the rows and all the research divisions along the columns and highlighting the common blocks. This display is quite easy to understand at the first look itself. Clicking on any faculty takes to their page with all their research work ,Clicking the Research area give all the faculty who are working in that field and selecting the “black blocks” will take to the particular research done by a particular faculty.
Fig 10 : Wireframe for Design 4
These are the design recommendations improves usability and provides better user experience.