Understand - Inspiration



I looked around and found some interesting sites which are related in some way to the topic of finding libraries or applications to get some inspiration from their designs. They could be taken into account when coming up with a good set of designs for Inqlude. Following are some interesting features I examined.

Qt-Apps.org : Community portal for Qt applications software

  • Provides an easy and interesting way to find Qt applications
  • Comprises two types of categorization of the available Qt applications; one based on ‘Latest’, ‘Alphabetical’, ‘Highest rated’,‘Most downloaded’ and another based on the type of application
  • List of applications along with a screenshot, name, type, version, number of comments, number of fans and a score representing the rating
  • The details page includes important information like summary, description, version, changelog, license, download links for different platforms, screenshots, score and minimum required Qt version

The Ruby Toolbox : A comprehensive catalog of Ruby and Rails plugins, gems and projects

  • This is a website that contains most of the features that we have been looking into, in fact it provides lots of inspiration
  • The website is very clean and has a very organized layout, utilize very few colors (basically white, gray and black) and nice formatting
  • The titles of the main pages and the search box at the top ribbon of the website are well noticeable
  • Home page contains separate sections for announcements, recent comments, latest resources, most popular projects, recently added projects and recently added categories. All projects and resources listed under these separate sections are linked to their details pages.
  • Mouse hover on a project name creates a popup box providing a brief description of the project
  • Categories by group: provides a very broad classification with main categories branched into lots of subcategories
  • Highlighting a row of the list on mouse hover makes it easier to find relevant information
  • Categories by name: a separate page to display all the categories and subcategories grouped according to the different letters of the alphabet taken in alphabetical order
  • Projects by name: a separate page to display the list of projects grouped according to the different letters of the alphabet taken in alphabetical order, selecting a letter filters the projects starting with that letter
  • The entire website utilizes a consistent set of formatting (styles and graphics) which does not distract the user
  • The details page of an item provides a brief summary and links to website, reference doc, wiki, source code, bug tracker and mailing list. Mouse hover on a particular link pops up the address of the link
  • The details page also contains some other important information like number of releases, current version and date of the current release, date of the first release etc.
  • Few small icons on top of the details page; icon of a heart provides an option to like that particular item and an icon of a comment displays the number of comments for that item.

Libraries.io : The open source discovery service

  • Monitors open source libraries across different package managers
  • A very big search box placed at the top of the website. The inner text of the search box explains user about what that really intends to do
  • Short and sweet description of the website. More details provided via ‘What is Libraries.io?’ link
  • List of applications along with name, logo and the number of projects that it has been used with
  • Categorization of the available libraries using languages, licenses and keywords

cdnjs : Host all the popular libraries - JavaScript, CSS, SWF, images

  • Has separate pages for About, Browse libraries, Support us, Source, Git stats, Network, Chat and Request a library linked from the home page
  • A large search box with an inner text of 'Search from 2195 libraries...' is placed at the center of the home page
  • Browse libraries page contains a table of libraries with two columns for library name and link. Every two consecutive rows has two different colors (white and gray) to display the details of each single row clearly
  • The details page of a library contains important information like summary, version, links to the source code and tutorials and related tags

Qtsoftware : Web shop will ease your ordering of Qt software

  • Provides an easy and interesting way to find Qt software, but more specifically designed for ordering purposes
  • Implements a product search where user can either type the name, keyword or narrow down the product search by filtering using the product category and manufacturer
  • Consists of categories and subcategories of Qt software
  • Has an option to sort the list of software using title and price

manjaro.org : Latest news about package updates

  • Consists of a nice categorization, all categories are listed in a drop down menu
  • Elements under each category can be filtered under 'Latest' and 'Top' subcategories
  • List of the search results are shown in a table with columns for specific attributes
  • Search results are shown along with their tags
  • A color scheme has been utilized for different categories

CPAN : Comprehensive Perl archive network

  • Has separate pages for Home, Authors, Recent, News, Mirrors, FAQ and Feedback linked from the top ribbon of the home page
  • Logo of the website and a search box placed at the center of the home page
  • Search by 'Modules', 'Distributions', 'Authors', 'All'

Webstatsdomain : Analyzes data about domains and keywords

  • Search by key phrases
  • Search by ticking multiple options as required and narrowing down the list of search results
  • Categorization as ‘All’, ‘Social’, ‘Search’ and ‘Advertisement’
  • List of the filtered results are shown along with the domain, title, country, rank etc. 

Understand - Need finding via Observations


Watching how people do things is a great way to learn their goals, values and preferences and come up with a design insight. This is known as need finding. I chose ‘glance’ as my design brief. 

Audience

To start with, I had to define the audience of the Inqlude website.

  • Primary target audience of the Inqlude web site is Qt application developers, who are using or are looking into using 3rd party Qt libraries in their applications. Inqlude helps Qt application developers to find Qt libraries that match their requirements.
  • A secondary target is Qt library developers who want to publish their libraries. Inqlude can also be considered as a central place for them and the web site should provide an entry point for library developers which helps them to publish their libraries.


Need finding

This is about discovering what people need by observing them performing some kind of an activity with Inqlude. We have observed how people try out Inqlude to get their work done. 

Observations

We observed few people trying out the current Inqlude website, noted down the breakdowns and interesting moments to identify the user needs properly.

User 1

I observed User 1, trying out Inqlude for the first time.

As soon as she navigated into the website, she started reading the description of the main page. She highlighted few phrases of the main description.

Then she navigated to the details page of 'attica' Qt library and went through its different attributes, basically the library description. She looked into the comments section and then tried out the 'Read more' links. She spent few seconds going through the tutorial link. She had a quick look through the source code repository too.

Then she returned back to the home page and scrolled down through the list of libraries. She stopped at several libraries to read their summaries.

In the meantime, she referred the page on 'How to get libraries' as well. She clicked on ‘How to contribute’ link, but she did not show any interest to go through that entire page.

User 2

Then I observed User 2, finding a plotting library through Inqlude to visualize some graphs and charts.

Similar to User 1, he also started reading the main description of the home page first.

Then he scrolled down through the list of libraries under ‘Stable’ category. He had a quick look across different lists under different categories.

While going through the list, he found a library called ‘qwtplot3d’. He opened its details page in a new tab. Then he opened its home page and spent few minutes going through the content of the home page, basically the features of this library. He also referred the API documentation link, but was not very happy with that.

So he typed the phrase ‘plot graph’ in search box and then found the link to details page of ‘qcustomplot’. He read the content of that page curiously. Link for the source code repository popped up a 404 error message. But the home page of the library was a very attractive and clean website. He could easily find all details about that library there. He had quick view through different pages of this website and started trying out some screenshots in the Introduction page as well. He looked into their respective codes, tutorials and found very happy with it.

Mini Usability Test

We have also carried out a Mini Usability Test to collect more observations from several Qt users. Results are at Mini Usability Test Results.

Interviews

Furthermore, we expanded the process of need finding by contacting and interviewing few Qt interest users at interest@qt-project.org. Listed below are some of their general comments.

User 1





  • Has a good categorization, good to add some subcategories
  • Already possesses a nice formatting of the website
  • Some sort of filtering on type could be nice (data handling, image processing, 3rd party connectors, etc...)
  • Found some interesting libraries, but as the list gets bigger, it will be harder, especially having to search through all of them every so often
  • A timeline of added libraries would be useful
  • Screenshot of any library that adds UI components would be nice
  • A rating system could be nice to have a little confidence that the library is useful
  • Love the idea of this website, hope it becomes a central place to find libraries, as it can be very hard to find otherwise

    • User 2

    • Very nice and simple layout
    • Good readability of the text
    • The categorization should be more plastic, like to see a tag system
    • Good to have a categorization by C++ only/QML Only/ C++&QML and a breakdown by category (Network, Reports, etc.)
    • Could add some missing information (Qt versions compatible with the library, explicit set of platforms on which the library is supposed to work, meta-packages groups, dependencies etc.)




    Project Work Flow

    Project Resources

    1. GitHub repository of command line client for independent Qt library archive http://inqlude.org/
    2. GitHub repository of library meta data for independent Qt library archive
    3. Inqlude project on KDE's Phabricator
    4. Workboard

    Resources for design work flow

    1. https://robots.thoughtbot.com/the-product-design-sprint
    2. http://cornelius.github.io/iwilltravel/

    Product Design Sprint


    A Product Design Sprint is a technique to quickly design, prototype, and test the viability of an idea, product, or feature. We are applying that knid of design thinking inspired approach to the design and implementation of the new navigation structure of Inqlude. It consists of six phases: Understand, Diverge, Converge, Prototype, Test, Implement.

    1. Understand

    The first phase frames the project. It's about understanding who and what needs should be addressed and what is the context. It's about empathy with the user.

    2. Diverge

    The second phase is about creating ideas how to address the needs of the users. It's about quantity, about thinking broad and wide, about generating a lot of input in a short time.

    3. Converge

    The third phase is about consolidating ideas and distilling realistic solutions. This includes taking deciding about solutions.

    4. Prototype

    The fourth phase is about creating something which can be tested.

    5. Test

    The fifth phase is about testing and learning.

    6. Implement

    The sixth phase is about deciding on the final solution and implementing it.