I am Abiha Fatima, a junior year undergraduate student majoring in Computer Engineering from AMU, India. I've been fascinated by programming since I was 16. I have sound knowledge on various web technologies and also have a little exposure to competitive coding. I am an open-source enthusiast and I truly believe in the capability it holds to inﬂuence and create tools for the upliftment of mankind. My experience with open source has been a steep learning curve for me. When I'm not in front of a computer screen, I'm probably reading a book or exploring music.
Affiliation: Aligarh Muslim University
Location: Aligarh, India
Time zone: Indian Standard Time (UTC + 05:30)
LinkedIn: Abiha Fatima
Infragram.org is a web-based tool for analyzing plant health with near-infrared imagery. It aims to democratize and improve reporting about environmental impacts, so that people can better understand the health of the plants around them. This project aims to redesign the existing user interface of the Infragram, to make it more user friendly along with improving the user experience. This can be done by adding new features like a quick guide on first use, cross-browser drag and drop and revamping the UI for better usability.
Abstract/summary (<20 words):
Design a new full-screen user interface for Infragram.org, thus making it user friendly along with improving the user experience.
- Improper paddings and spacing can be spotted on the toolbar and it is not mobile responsive.
2. The header and footer are not very organized and old fashioned. The footer lacks proper spacing and padding.
3. There is no guide to tell users how to use the application. Moreover, the presets are not very descriptive and thus can be overwhelming for first time users.
To test accessibility of the application, I used the WAVE tool to check its correspondence with W3C's Web Content Accessibility Guidelines, and found out there are many areas of the project that can be improved.
Here's the detailed report: https://wave.webaim.org/report#/https://infragram.org/sandbox/
Here are few problems that are related to accessibility of the application:
1. Elements must have sufficient color contrast against the background.
The contrast of the highlighted areas is critically low as 1.65:1. The expected contrast ratio should be higher than 4.5:1.
Some people with low vision experience low contrast, meaning that there aren't very many bright or dark areas. Everything tends to appear about the same brightness, which makes it hard to distinguish outlines, borders, edges, and details. Text that is too close in luminance (brightness) to the background can be hard to read.
A fix to this problem will be that all elements must have sufficient contrast between text in the foreground and background colors behind it in accordance with WCAG 2 AA contrast ratio thresholds. I have proposed a better color contrast below.
2. Form control does not have a corresponding label.
Effective form labels are required to make forms accessible. The purpose of form elements such as radio buttons, input fields, etcetera, is often apparent to sighted users. Screen readers require useful form labels to identify form fields. Adding a label to all form elements eliminates ambiguity and contributes to a more accessible product. Form labels also provide visible descriptions and larger clickable targets for form controls.
A fix to this would be using the element to associate it with its respective form control. If there is no visible label, either provide an associated label, add a descriptive title attribute to the form control, or reference the label(s) using aria-labelledby.
3. Device dependent event handler is present.
A fix to this would be using a device independent event handler (which responds to both keyboard and mouse) or by using both a mouse dependent and a keyboard dependent event handler.
This will make the application accessible to people with motor impairments, or dexterity impairments, this group ranges all the way from those who would prefer not to use a mouse, because perhaps they find it painful, or to someone who may be physically paralyzed and have limited range of motion for certain parts of their body. Motor impaired users may use a keyboard, switch device etc. to interact with their computer.
I wish to redesign the existing user interface of the Infragram, to make it more user friendly along with improving the user experience. I'll be improving the existing features and adding new features in different phases.
Phase - (I): Revamping the Infragram tool
At the moment, the Infragram UI/UX is clustered and not very intuitive. I wish to propose following changes:
1. A well organized layout for this tool with consistent header and footer throughout.
2. Implementing a side toolbar for full screen interface which will boost the user accessibility.
3. Adding an improved design for Presets:
4. Adding a quick tour guide on first use to give some insight to users about the different components and their roles.
- We can implement it either by using Intro.js or bootstrap tour, both are easy to implement.
- Intro.js is open source and is widely used due to its user-friendly solutions.
Some important features of Intro.js are:
- No dependencies: It does not require any other dependencies
- Small and fast: The library's smaller size makes the guiding process smooth and intuitive.
- User-Friendly: Navigation is user-friendly and provides various themes that can be selected as per our preference.
- Browser Compatibility: Works on all major browsers like Google Chrome, Mozilla Firefox, Opera, Safari, and Internet Explorer.
- Documentation: The documentation is excellent with samples and examples of each element to be introduced.
5. Implement Cross browser drag and drop:
- HTML drag-and-drop API allows us to introduce drag and drop features in web browsers.
- In all, there are eight events the browser fires related to drag and drop, we will use only four that will be fired when an object falls into a drop zone: dragenter, dragleave, dragover and drop .
- By defining the attributes for the ondragover and ondrop event handler, we can transform any HTML element into a valid drop target.
The mobile view of the above interface would look like:
6. Adding Fullscreen option:
- To open an element in fullscreen, we use the element.requestFullscreen() method to parent element to make it as full screen. This method makes an asynchronous request to make the element be displayed in full-screen mode.
- To exit fullscreen we can use document.exitFullscreen() .
All the components of this interface will be made edge to edge using Bootstrap 4.The Bootstrap Grid System will be used for this, specifically Responsive Layouts. It will be made up of groupings of Rows & Columns inside Containers.
Phase - (II): Implement a new interface for Infragram
The information in the current website is scattered. There is a need to reorganize everything and add more information.
New front page of Infragram will consist of:
- A consistent Navbar with fullscreen option
- Infragram logo on browser's tab bar
- About us section
- FAQ section
- Images by recent Contributors similar to one on Infragram's page
- Redesigned footer
Here's what it will look like:
This design would have a better user interface and an improved user experience. The web application will be made accessible to everyone regardless of their capabilities or what hardware and software they use.
The above proposed design is proposed keeping all the challenges in mind, it is made to welcome as many users as possible by ensuring:
- The application is keyboard-friendly by adding device independent handler wherever possible.
- The content on the site is easily accessible by adding ARIA landmarks.
- Alt text will be added to all images.
- All the forms will be correctly labelled.
- Right color contrast will be chosen.
The color contrast that I wish to propose passes all the below tests (tested using WAVE tool).
| Week-1 (May 30 - June 5)
| Week-2 (June 6 - June 12)
| Week-3 (June 13 - June 19)
| Week-4 (June 20 - June 26)
| Week-5 (June 27 - July 3)
| Week-6 (July 4 - July 10)
| Week-7 (July 11 - July 17)
| Week-8 (July 18 - July 24)
| Week-9 (July 25 - July 31)
| Week-10 (Aug 1 - Aug 7)
| Week-11 (Aug 8 - Aug 14)
| Week-12 (Aug 15 - Aug 21)
| Week-13 (Aug 22 - Aug 26)
I would like to get constant feedback from my mentors on my work on PRs and guidance if stuck on any issue.
My first contribution to public lab: https://github.com/publiclab/infragram/pull/195
I recently got introduced to the world of open source through Hacktoberfest last year and I haven't looked back since. I absolutely love the idea of open source software and am thoroughly enjoying it. I am trying to contribute as I learn.
I had developed an e-commerce application using MERN stack. I've learnt a lot about component-level-design, routing, payment gateway API's and authentication. Apart from that I learnt the importance of well documented and easy to understand code.
All my projects can be found here: https://github.com/AbihaFatima
I am comfortable using Linux and Windows, version control using git, and Visual Studio Code (for every other language) as my default editor due to the large repository of extensions they feature.
I have actively participated in group projects and hackathons in teams. I enjoy working with people and learning from them. While I have been actively on Github since around last year, I was way too hesitant to even strike up a conversation and now thanks to Public Lab, I can actively participate in discussions. I have learnt a lot about teamwork in these months. I would love to keep contributing to Public Lab and its other open source projects and learn as I grow.
I've always been very interested in Open source software development. I love how it's goal-oriented and how vital Public Lab is to people around the world, and this means that the work I do is going to be used by people all over the world. This community is extremely helpful - any query's resolution is just a message away. I just love how appreciated everyone is in this community. I have also had an incredible opportunity to learn a lot from different contributors. I definitely feel I am a part of this community and I am thankful to it. In future, I would definitely love to remain and be part of Public Lab.
This project is aimed to redesign Infragram.org at Public Lab, which will impact a range of different groups to meet the diverse needs of gardeners, farmers, environmental activists, researchers, conservationists, and more.
I'll be mostly working full-time on the code on weekdays (Monday to Friday) and will easily be able to work 40+ hours a week. My awake hours would usually be between 10 AM IST (4:30 AM UTC) to 2 AM IST the next day (8:30 PM UTC) and I'm comfortable working anytime during this period. Except for a few days of traveling during mid of August (which I'll be informing in advance to my mentors), I'll be having no other absences.
My university starts around in the second week of August, after which I will be attending university for 2 to 3 hours. I won't be having any examinations during that month. Also, I've added less tasks in the last weeks in the Timeline/Milestones to wrap up everything on time. So I shall be able to dedicate enough time to the project.