UI Redesign (Usability Research and Development) | Google Summer of Code 2013 Proposal

Short description: The aim of this project is to change the user interface of ATutor, making it more user friendly in the process. This would be done in two phases- AJAXification of many features, and then making a new design for ATutor, keeping in mind the accessibility of the project at every point. At the end, ATutor would be a better application to use.

Project Description:

ATutor has a very structured code. There are a lot of functions that prepare the data like- sanitizing user input, or displaying large amounts of data from the database. However, it uses constant post back based web pages for doing all tasks. That puts an extra burden on the server as well as makes the process slower for the user. Today, major browsers support AJAX and, most users expect this from a good web application on account of it’s usability and the speed enhancement it provides on slow connections.

During this project, for adding AJAX functionality to the user interface, the behaviour of the various PHP functions which perform the actions of adding, modifying or displaying data will be modified. Thus, they will present only the necessary output during an AJAX request, but will still present the complete output when a normal page request is made.  jQuery scripts will be created for the different pages which will attach actions to different events and DOM elements, confirm some of the actions from the user, perform the AJAX requests, and replace the data being displayed on the page when output is provided by the web server.

AJAX can be used in many places in ATutor. I have mentioned two scenarios here:

• Replying in Forums and auto update of the feed.
• Comment addition and deletion in file uploads.

The current design of ATutor needs to be tweaked using the latest technologies, since it is not up to the mark as compared to most modern websites. However, the timeline of GSoC would not be enough to change the face of ATutor altogether. Hence, I would concentrate on making a few aspects better. I have listed two such areas below:

• The main navigation tabs
• The system preferences

Thirdly, I plan to improve the accessibility of ATutor. Here are a few things I have decided to go through with:

• Add keyboard shortcuts
• Use proper Tab Indexes.
• Provide Alt text for images.

Project Plan:

As mentioned above, I have decided to complete the project in three phases.

AJAXify the Interface: Even though ATutor’s code is very structured, there are situations when performing an action by transferring to a new page could be avoided. This phase makes parts of ATutor use AJAX to perform certain functions, which makes the interface smoother, and puts less pressure on the server. I have mentioned on how I plan to do it in the ‘Deliverables’ section below. Note that this closely resembles the AJAXification of PhpMyAdmin due to my relations to that project during their AJAXificaion.

Change design elements of ATutor: This would include major changes in the CSS to incorporate the changes I have already mentioned, with the use of SASS in the process (http://sass-lang.com/). The reasons why I choose SASS over LESS inculde(details here- http://css-tricks.com/sass-vs-less/):

• In the use of numbers and arithmetic, SASS is more flexible.
• SASS has better extensions. I could use Compass (http://compass-style.org/) in particular.
• Better logical and looping operations in SASS
• In case of extending classes, LESS copies the properties, whereas SASS rewrites selectors. Hence, SASS is more efficient. 

Here are the three important parts in which I am planning to introduce changes: Color Scheme and Elements and Structure.

• Color scheme: I felt personally that ATutor’s color scheme needs to be changed, keeping in mind the accessibility of the visually challenged. However, I would be able to do that only after the approval of the whole ATutor community. A list of colour schemes can be shortlisted from Kuler (https://kuler.adobe.com/).
• Changing specific pages/elements: Changing position of elements to make the interface more user friendly, which in turn would improve the usability of the application. For instance, the student tools page, which has too many options, needs to be categorized properly.
• Changing structure of pages: There are certain pages which have too much information for the user’s capabilities (like the admin home). There is a need to restructure those pages to show only those parts to the user which are absolutely necessary and, move the other functions elsewhere. Widgets like Accordion (http://jqueryui.com/accordion/) or Tabs(http://jqueryui.com/tabs/) would be used for grouping them.

Improve Accessibility:

The very idea of accessibility is to give users of all abilities and disabilities equal access to information and functionality. Since ATutor has a very large user base and it has always given accessibility a high priority, improving the same would be of great help. I have listed what I plan to do in the next section.

Deliverables:

A. AJAXification:

1. PHP functions that check for the presence of an AJAX request and accordingly, set some variables in the execution environment of the current script(using $_SERVER['HTTP_X_REQUESTED_WITH']).
2. Functions that will wrap the output in a JSON format, so that jQuery can correctly parse the response and insert the right content at the right location in the page(using json_encode).
3. jQuery helper functions/plugins to manipulate major divisions on a page, as well as some properties like page title or content.
4. Prepare sample PHP and jQuery code using the code developed till now, which can be used to modify an existing action from it’s current form to that necessary for an AJAX request. It could be used as a model to modify other pages/actions by community members.
5. Actual conversion of some pages/actions to AJAX, some of which are listed below.

• Replying in Forums and auto update of the feed.
• Comment addition and deletion in file uploads.
• Enrolling in courses. The user can enroll in multiple courses right from his homepage.

       

B. Design changes:

1. Change the basic color scheme of ATutor to something agreed upon by the ATutor developers community beforehand.
2. Modifying elements of a page by proper positioning of elements, to improve usability. Some of the changes that I plan to do are as follows:

• The main navigation tabs need to be repositioned.
• The system preferences screen needs to be split.
• The design doesn’t look good on a netbook with a width of 1024 pixels(for example, in the course home page or the student tools page, the widgets appear one below the other).
• Integrate the search page into other pages(with a drop down option for advanced search).

C. Improve Accessibility:

1. Add keyboard shortcuts at places like, the exam (using arrows keys for navigation through questions). Using Access Keys wherever relevant (although it is already present in most pages, if not all).
2. Use proper Tab Indexes.
3. Provide Alt text for images.
4. Add a skip navigation to the header.

Timeline & Deliverables:

Till 27th May: Use SASS to get comfortable with it before development begins. 
28th May to 16th June(Community Bonding Period): Use this time to get to know the developers in the ATutor community by actively participating in the irc. 

17th June to 23rd June: Write functions mentioned in deliverables A1 and A2. Start discussions on creating a list of tasks for deliverable A3. 
24th June to 7th July(2 weeks): Write deliverable A3. This part would require some time, as it involves modification of major parts of a page and, also what is visible to the user. 
8th July to 14th July: Write deliverable A4. Convert the forums page to perform actions through AJAX. Start sharing probable design structures for student tools, admin page and inbox for approval.
15th July to 21th July: Auto update of page on clicking a refresh button: This could be done on a course home page, or maybe the forums page/comments page.
22nd July to 28th July: Enrollment of courses to be made easier- by adding AJAX functionality. Add AJAX functionality to inbox. Mail previews could be shown in the same page.

---MID TERM EVALUATION---

29th July to 11th August(2 weeks): Finish deliverable B1. This would include the use of SASS. 
12th August to 18th August: Remove the search page, and integrate it from within other pages. Include advanced search as an option. 
19th August to 25th August: Change the Student Tools page. This would include removing elements which are empty, and adding AJAX for preview on click/hover. 
26th August to 1st September: Change admin page, which contains too much information at the same place. Put page elements in a way which is accessible to the user (design to be approved by community). 
2nd September to 8th September: Complete deliverables C1-C4.
9th September to 16th September: Final documentation. Buffer time for any unexpected delays. Check the entire code for errors, comments and improvements before pens down.

----- FINAL EVALUATION -----

Project Outcome:

The outcome of the project is simple- ATutor will become more user friendly. The basic target of the project would be to make the user more comfortable with the interface. The AJAXificaiton would make things faster for the user, as well as put less pressure on the server. It would benefit both the user as well as the server.

The design changes would make ATutor look better and, less cluttered in the areas which have already been mentioned above. The changes in the restructuring of certain pages/modules would also help ATutor look better. The user would be able to access important parts of ATutor at a faster rate.

The accessibility part of the project would be completed keeping in mind that all users get equal functionality with their minimum effort, and are able to use ATutor smoothly.

Questions:

1.     How will you document your weekly progress on your project?

Apart from informing my mentors, I would maintain a blog to document my progress in the project. I have a blog already which I regularly update (http://shaumikthinks.blogspot.in/), but I would maintain a new blog.

2.     After GSoC, describe what you will do to ensure your project code continues to be maintained?

As I am quite attached to the code that I write, I would continue with its development, even after the project is complete, and at the same time, encourage others to use the product, and contribute wherever they can.

3.     Where can we find your GitHub site? Create an account if you do not already have one.

My github account can be found here (https://github.com/sdaityari/). As of now, I have solved one bug in ATutor (https://github.com/atutor/ATutor/pull/65), which is yet to be merged. My end semester exams will go on till 7th May. I would submit more bugs after that.

4.     Will you be working on your own, or will you have partners?

No, I would be working alone.

Introduction
My name is Shaumik Daityari and I am currently pursuing my Integrated M.Tech. in Geological Technology at Indian Institute of Technology Roorkee. I am a part of Information Management Group(IMG), a student body which manages all the internet and intranet activities of IIT Roorkee. Apart from my regular work and projects at IMG, I have been actively taking programming courses in Coursera and, participating in various programming contests online.

Being a part of IMG, I have the experience of handling large projects. Recently, I was a part of the core team that developed the Placement Portal of my college(intranet only). I was also involved in the design integration of Think Tank, the official forum of IIT Roorkee (http://people.iitr.ernet.in/thinktank/).

Education & Experience:

Integrated M.Tech. (Geological Technology):
Indian Institute of Technology Roorkee
Currently pursuing my integrated masters degree. I would graduate in 2015. 

Online Exam Portal(January 2011 - July 2011):
Information Management Group, IIT Roorkee
Developed a platform for the students of IIT Roorkee to help students preparing for GRE/CAT/GMAT. It offers the option of appearing for mock tests before taking these exams.. The application was in core PHP and was integrated with the intranet portal.

Student Management Software (May 2011 - June 2011):
ImpaCt Education Centre, Guwahati
Developed a software in PHP for ImpaCt Education Centre to manage the students, which was previously done manually. It involves generation of batches, iCards, reports and analysis of performance in tests.

Kinematic analysis of viscous flows in narrow confined zones (May 2012 - July 2012):
Jadavpur University, Kolkata:Worked under Dr Nibir Mandal to develop tools in MATLAB to analyse the channel flow of crustal matter in shear zones, particularly the Himalayas.

Placement and Internship Portal(January 2012 - present):
Information Management Group, IIT Roorkee
Developed the new placement portal of the institute in Python/Django. Students can apply to companies, get results and prepare for test. The admin part is managed by the ‘Training and Placement Office’, IIT Roorkee.

Open Source Experience: I am relatively new to open source but, I am actively involved in e-cidadania (http://ecidadania.net/en/), which is a platform for e-democracy developed in django. I have also submitted a patch to ATutor, which is yet to be merged (https://github.com/atutor/ATutor/pull/65).