Sep 28, 2013

Wrapping up the summer's work | Google Summer of Code 2013

Labels: ,
Although it has been quite some time since I last blogged on my work on the GSoC (blame the exams and then the last minute work I had to do), it has just been confirmed that I have passed my final evaluations for the same. I would use this blog post as an overview of the work that I have completed in the summer.

1. Changing the ATutor search
Libraries Used- jQuery, jQuery UI
Current search in ATutor involves a search link at the top right of the page. The main purpose of the work provided in the branch is to add an easily accessible and easily to spot control on page which allows to create an instantaneous ajax search request. The Advanced link allows to input more data for a more concise search by reusing an existing ATutor search functionality.
Previously, a user would have to click the Search link on the top to get to the search page, where he would search and the results would be shown. Now, a user needs to enter the search term directly on the search bar at the top and, for any advanced searches, (s)he can click the advanced link next to the search bar. Thus, user can spawn a new search with lesser interactions as well as familiar with search through various online resources and web sites.
This layout has been inspired from a number of websites on the internet which use a similar idea of providing a search bar and a separate advanced search page. Some examples include but not limited to:
Possible improvements:
Since, there was no button next to the search bar indicating the user to press Enter to search, a tooltip was added which the screen reader reads out properly. This is a quick solution to to provide a support for AT. A designer’s insight into this feature would help in making it more intuitive.
2. Changing the Help page
Libraries Added- New versions of jQuery and jQuery UI.
The look of the help page was changed, bringing in all parts (help, external help, accessibility and contact) into the same page and providing anchors at the top to the different parts and links of back to the top for all the parts. Bringing different parts into the same help page reduces the total amount of user interactions in order to access the various help features. New UI is also simplistic and reflects an overall existing ATutor structure.
The basic design of this page was inspired by:
3. Restructuring Browse Courses Page
Branch- ui_browsecourses (https://github.com/sdaityari/ATutor/pull/4)
Libraries Used- jQuery, a11yAccordeon (https://github.com/anvk/a11yAccordeon/)
To avoid clutter in Browse Course PAge page, the decision was made to use an accessible accordion control using an open source version supported by Alexey and me. A similar control could be found in AContent browse course page. By using this widget, we help users to focus on a single course at a time rather than the detailed cluster of information about all available courses presented on a page. The a11yAccordeon was built with accessibility in mind as a product and inspiration for ATutor and AContent projects.
Using a11yAccordeon makes the website more familiar to users who have worked in AContent as there is a similar feature for displaying courses.
As for the search feature in the browse courses, it utilizes jQuery in order to start search by hiding and showing rows in the widget. This functionality remains the same as it was initially created in the original Browse Course page. The search is accessible by using a jQuery tooltip which is read by AT depending on the search.
Possible improvements:
  • The a11yAccordeon lacks a pagination feature
  • A custom created theme for a11yAccordeon which reflects the overall ATutor theme would be a nice touch.
4. AJAXification
Libraries Used- jQuery
AJAX is a modern way for providing fluid and seamless user interactions on a website. AJAX also improves accessibility since users don’t have a trouble of seeking for the previous focus place on the page after they performed and action and page has refreshed. This process helps to preserve a state of the page’s data and inputs as well.
This branch which is a part of this project could be the beginning for an overall future ATutor AJAXifying. The task of AJAXifying the whole interface of ATutor is a very complex and hence, too time consuming for the given GSoC time period. Therefore, only a part of this work was accomplished to serve as an example for future work on how to add AJAX to the ATutor UI.
ATutor previously redirected to new pages for simple tasks like deleting comments. One of the main tasks for this branch was to add AJAX behaviour to into some of the frequently used pages. The plan was to modify existing pages and use the same logic for doing these small tasks, but to send responses through AJAX to php pages and perform ajax ui changes in the page for the user.
All the ajax js files are present in jscripts/ajax. All PHP files which handle AJAX requests are under the ajax directory of their corresponding modules (like mods/_standard/file_storage/ajax).
A separate function, check_ajax_request, was created in include/lib/vital_funcs.inc.php to check the presence of an AJAX request by accessing the $_SERVER variable. This function returns true when the request was made through an AJAX function (xmlhttp request) and false for all other cases. This function is used in the PHP files where the AJAX requests are sent and helps avoid users open such urls in the browser directly.
Tasks completed under AJAXification:
  • Add, Edit and Delete comments in File Storage
  • Delete Reply or Thread in Forums
  • Add, Edit or Delete terms in Glossary
Possible improvements:
  • Almost the whole ATutor project does not support AJAX but could be possibly converted into more responsive ajax based UI
5. Changing the Instructor’s Manage Page
Libraries Used- jQuery, Masonry (http://masonry.desandro.com/)
The basic idea is to make boxes stacked against each other which would contain the main module at the top and the sub links one below the other (inspired by pinterest.com). The change focussed on making different sections of the manage page modular and isolated from each other, which helps the user find the necessary links together.
Also, it is generally seen that users have less trouble understanding and reading data which is sorted in columns rather than rows. Those areas also make the logic split for the links on the manage page clearer by splitting them into separate sections.
We used JavaScript library Masonry in order to get closer to the styling similar and seen in pages like Pinterest. Custom CSS was added to flavor the page with a more suitable color scheme. This redesign is responsive and changes with different screen sizes.
Possible improvements:
  • A designer’s insight into this would help in making the page look better.
6. Changing the System Preferences Page (Experimental)
Libraries Used- jQuery, jQuery UI, a11yAccordeon (https://github.com/anvk/a11yAccordeon/)
The first task in this regard was to group a big set of options into four groups: Website, Course, Instructor and Miscellaneous Settings. Grouping was accomplished with a familiar control - a11yAccordeon mentioned in the browse courses page.
Secondly, the enable-disable radio buttons were converted to on/off flip switches. An attempty to use the ones on Proto (http://proto.io/freebies/onoff/) or the slide buttons in the Google Melange site, but none of them turned to be AT friendly. Finally, the desired control was found in a basic CSS from Ghinda.net (http://ghinda.net/css-toggle-switch/) with an addition of custom Javascript in order to make controls more keyboard accesible.
The left and right arrow keys was chosen as control interactions since they feel more natural for such sliders. The sliders occupy less space than radio buttons and allow users to read and comprehend quickly which options are ON and which are OFF, without spending time by reading radio button labels. Furthermore, flips witches are widely used online, on smartphones and tablets. This fact makes them easy to understand and would bring ATutor one step closer to a better look on mobile devices.
Possible improvements:
  • A designer’s insight into look and feel of the flip switches.
7. Adding SASS to ATutor
Libraries Used- SASS (sass-lang.com/)
Modern technology demands modularity not only from the functionality of webpages, but from the styling files as well. With dynamic CSS styles, styling features could be configured in one style sheet and then reused in others. This can potentially help developers and designers to reduce style repetition and duplication significantly. As the result it could simplify new theme creation and CSS maintenance of the project. This change could help designers reconfigure style sheets through changing just few variables instead of various places with static hardcoded values in various themes. The latter is an inefficient way and is prone to errors.
The main aim of this branch is to convert two existing ATutor themes to use SASS and create a common file for both of them (_base.scss), which would contain all the common styling rules (functions, modules, styling variables) between the themes.
Possible improvements:
  • Just like the AJAXification, it is not possible to convert the whole existing CSS in ATutor to a dynamic CSS (SASS) for GSoC time period. This branch should serve as an example of how other styles are going to be converted.
  • This branch was created the last so it might not be fully implemented and might need more optimizations within.
8. Changing the basic navigation (experimental)
Libraries Used- None
This task can be divided into two parts- adding dropdown menus, removing the sub navigation tabs and changing the breadcrumb structure.
Following the high accessibility standards of ATutor, a CSS only dropdown implementation was selected (based on http://staff.washington.edu/tft/tests/menus/dropperdown/index.html). This menu uses CSS floats and margins to get the dropdown effect. Since it uses proper markup, it is fully keyboard accessible and read out clearly by screen readers. Since it added the sub navigation items in the dropdown menu, the sub navigation system was removed.
The main aim in this branch was to remove extra layers of tabs and perfectly conceal them in the drop down navigation menus. Doing this would not only comply with modern web styles, but also remove extra controls from the page and reduce information clutter. Users would have to do less interactions in order to get the desired data, making the process faster too.
The current breadcrumb system in ATutor shows the current page and its parents. The work done in this branch modifies the breadcrumbs by showing the siblings of the current page, in addition to the parents. This system of adding siblings of the current page to the breadcrumbs was inspired by the following sites:
Possible Improvements:
  • This branch requires is some intervention from a designer’s perspective

Liked this post? Have any suggestions? Just let me know. Feel free to comment below!

0 responses:

Post a Comment