Showing posts with label Inqlude website. Show all posts
Showing posts with label Inqlude website. Show all posts

Analysing Inqlude Website


Today, I carried an analysis of the current Inqlude website. Then I came up with a set of suggestions to improve functionalities of the website. I was basically focusing on rendering a better user experience.

Here are the problems and suggestions that I noted.

1. Add a filter box such that when we type a letter or a piece of text, libraries starting with that piece of text are filtered. I came up with this suggestion as a solution to minimize scrolling. I believe that users including myself prefer minimal scroll. This would come in handy when we use this website with mobile devices. 

2. Add a small drop down pointer at the end of that filter box to search libraries by different options such as version, platform, licence etc. The user can tick the desired option and select the corresponding libraries. Otherwise, it would also be better to keep separate drop down boxes to different options like platform and licence so that we can provide user the facility to select(tick) a platform or a licence or both if required and then select that relevant platform or licence. This is the intended task given in the GSoC idea description. 

3. Add responsive layout. The current website is lack of a good responsiveness when it comes to small scale devices such as mobiles. In order to make responsive layouts, I thought of using media queries.

4. On the development versions page, the summaries of the libraries are only vertically aligned within each section, but not across sections. This should be fixed to make the page look more balanced. This is issue #19 which I found from the inqlude github issues list. I would like to resolve this issue during my project.

5. I feel that it is sometimes difficult to identify the particular summary description for the library although they are horizontally aligned in the table. I would like to propose two colors ( one row in white back ground / next row background in little darker than pure white) for adjacent rows. This will make the user easy to go through different rows. 

6. Remove the close button near search button on top of the website or else add some functionality to it. I realized that it does nothing currently.

7. Show latest releases on web page. It would be nice to have a section with latest releases on the web page, so user know which libraries have been recently updated. This is issue #22 which I found from the inqlude github issues list. I would like to resolve this issue during my project. I thought of adding latest releases as a separate page similar to 'stable releases'.

8. Apply justify alignments for the content in pages 'How to contribute' and 'About'.

9. Add a search box so that when user add some key words from summary of each library in manifest file, the search results will show the relevant libraries along with their summary text. I wanted to suggest this as there is no option in the current site to find libraries if the user does not know the name of the library exactly.
eg: User wants to find a a library that provides integration of QML and KDE Frameworks. So user can type 'QML' in the search box and search results will display the library name 'kdeclarative' and summary if needed. 

I am not sure if the search box at the top of the web site is designed with this intention. Currently, this search box does a google search. 

10. Search button near the google search box does not match with the existing web layout. Its color, size and orientation should be modified.

11. Look and feel of the website is okay. It would be nice if we can use a different color for the top ribbon of the website (not a completely different color, but not pure white). This is because that I felt difficult in distinguishing the title of the website with its content. 

12. Lack of consistency thorough the site. When we move to sections : 'development versions', 'unreleased', 'commercial' and 'all', the description text of the website that appear with 'Stable libraries' section disappears. I feel it as a bad UI design. It is good to keep that description in all those aforementioned pages.

13. At the top ribbon of the website, the links to 'About', 'How to contribute', 'How to find libraries' seem unnoticed and rarely being used by the users. We need to make those tags/links look more attractive and noticeable.

14. Add some title to the table of libraries. For eg: Library name and description. This is because that I myself felt difficult to understand what these two columns are about.

15. Add some small description of the library to appear on hover over the library name. This is because that most modern websites(eg: facebook) follow less navigation across pages which many users prefer.

16. This is an additional suggestion. Why don't we add the link to mailing list in the page of the library?

17. Add some quality indication. This is issue #17 in Inqlude github issues list. It would be nice to have some indication on the web site, which shows this quality depending on certain criteria.

18. Integration tests for web site. To make sure that the web site doesn't break, we should have integration tests which check that the generates pages for the web site meet the required expectations. More details are included in issue#28. Integration tests should cover generation of proper HTML, checking for navigations, checking for display of library details, checking that data consumed by programs is correct, such as the JSON for all libraries, checking that the search is generated correctly and works and checking that the comments are generated correctly and work.

I believe that aforementioned problems and solutions would be very useful during the implementation of this project. 



Getting Started !

Every challenging task raises the question "How to start?". So happened with me. I thought of various ways to get started.

  • As an initial step, I started peeping into the code base of Inqlude. Since I have an understanding of what inqlude does by now, I started finding inqlude git repository. Yet I found the following two repositories.
1. Inqlude, the Qt library archive at https://github.com/cornelius/inqlude. Inqlude is a tool to handle Qt based libraries. It provides developers an easy way to find, install, and use libraries, in particular third party libraries. A public version of the library runs at http://inqlude.org.[1]
2. Inqlude data repository at https://github.com/cornelius/inqlude-data. This is the repository for library meta data of Qt based libraries for Include, the independent Qt library archive.[2]

  • I determined to maintain a 'to do' list in which I will be adding all tasks, references, tutorials, videos and other resources that I need to look into. I will also be adding there what things I need to do next, so that I can complete them one by one or simultaneously. I hope that this would help me not miss anything by any case. On the other hand, this would definitely increase productivity and I would be able to measure my own progress too.
  • Meanwhile, I thought of creating my draft proposal without hurrying to do it at the last minute. So I started creating it and I managed to jot down different things in point form whenever I find something which is worthwhile to include in it. 

  • I looked into the inqlude repository[1] which is the actual work space for my project. I found that most of the work that I need to implement is within the 'view' section. The views are written in HAML. Each page has an associated html.haml file. I went through the code and tried to understand what languages and templates used in it. I went through the issues list, where I found several issues with regard to the website. I thought of including them in my project proposal to clear them during my project period. Some of the issues were directly related to my project task, so I communicated in those threads as well.

  • Also, I thought of doing an analysis of the Inqlude current website so that I can understand its shortcomings related to search and categorization. I came up with a set of problems, weak points and shortcomings in terms of providing a better user experience. Then I listed them and came up with solutions on my own. I thought of getting other's feedback to justify my solutions and even to come up with better suggestions.  

  • Then I started learning Ruby. As the mentor advised, I started following some online resources to get myself familiarized with Ruby. Currently, I am following these materials.
1. Ruby with some online video tutorials by Jake Day Williams.
2. Ruby with tutorialspoint.
3. Mentor recommended me to follow http://exercism.io/ which helps learning Ruby along with exercises.
4. Haml with http://designshack.net/articles/html/save-loads-of-time-by-writing-your-html-with-haml/

  • Meanwhile, I thought of learning Human Computer Interaction principles via some online material. I hope that this knowledge would be useful to improve my design thinking. I also found some presentation slides on HCI module from my seniors which I will be doing in my next semester. Those slides are based on the book 'Human Computer Interaction' - 3rd edition by Alan Dix - Janet Finlay - Gregory Abowd - Russell Beale. I thought of going through them so that it would be useful for this project.


  • Then I started learning about designing responsive websites. I came up with several suggestions for implementing responsive layouts for the current website. They are as follows.
1. Use frameworks like W3.CSS which is free to use and no license necessary.
2. Set a meta view port tag, create a flexible layout / fluid grid, use media queries in CSS file.
3. Create responsive websites with Django. 

After having these approaches discussed with the mentor, he suggested me to use media queries to design responsive layouts as this is a simple website, so using different frameworks would make it complex. I also think that it is better to use simple approaches for accomplishing targets without making things complex.

In order to learn the usage of media queries with CSS, I referred following materials which explain things very clearly.
1. https://www.youtube.com/watch?v=aPtA4nYkvDw where I studied about creating three style sheets with css configurations for small, medium and large screen sizes separately.
2. http://www.youtube.com/watch?v=ZKy0kIZB9y4 where I studied about screen size responsive dynamic style layouts. There I learnt to program real time CSS layout changes relative to the screen size of the user device or browser window as they re-size it.

I learnt following concepts too.
1. The Viewport
2. Viewport Units
3. Media Queries
4. Navigation
5. The Foundation 5 Grid

  • The mentor asked me to take time and prepare a plan on my project so that I would be able to come up with very good designs for the website. He pointed out me a a good document that explains the process of coming up with a good design. You can find  that document on product design sprint here. 

He also supplied me a document on how he has applied that method to a project he did for his HCI class. You can find it here. 

He proposed me that using a similar approach for the design of the Inqlude web site will give good results. In fact, that was an awesome document, where he has recorded details on how he has come up with UI designs for "I will travel" website. I was amazed by his approach taken towards need finding, prototyping, building prototypes, user testing and finalizing prototypes. I felt very interested with this approach and I understood that success of the project lies mainly on developing good designs which I would be able to derive using this approach.

  • I developed some storyboards and prototypes as well. I sketched several storyboards on paper. Then I came up with several prototypes as well. For that I used two mock up tools called moqups and balsamiq. They were very useful tools to create nice prototypes. 
  • Then I tried to visualize this site locally in my machine. With guidance from the mentor, I was able to view it using 'inqlude view' command. I used different inqlude commands to try out different actions. Then I edited the code to view changes accordingly. 

  • I used inqlude command line tool to see how it works. For that I followed instructions at How to get libraries page in inqlude website. So I  cloned the inqlude-client github code, installed inqlude using gems and installed libraries. 

  • I went through the structure of the manifest files, inqlude-data repo and those respective files. Inqlude manifest format is described in following doc. 
https://github.com/cornelius/inqlude/blob/master/manifest-format.md

  • You can find all data in one JSON file available at http://inqlude.org/inqlude-all.json, which contains the data for the latest version of all libraries. This is the most convenient way, if you just want to have the current data. Yet this was very helpful for me to understand the process.
In these ways, I tried to get some understanding about all components such as Inqlude command line tool, manifest format and website. 

  • While going through all these approaches, I thought of documenting and recording my work somewhere which I always used to do when doing various project tasks. So I maintain this blog expecting that this would not only be useful for me, but for whole open source community who are interested in contributing to "Inqlude".

I hope that this blog post would be very helpful for any one who wish to start contributing to Inqlude. Please add your comments if you have better approaches of getting started with contributing to Inqlude.