fedora-docs / docs-fp-o

#225 Redesign Docs front page layout
Opened by harshitajain. Modified
fedora-docs/ harshitajain/docs-fp-o prod  into  master

Download 225.patch

When a user first opens the Fedora Docs website, there are a number of issues that he/she experiences that come in the way of a smooth and flawless user experience. Here is a detailed record of hitches in the Docs Front Page:-

  • The first visual of the front page is a grid of stark hued rectangular cards with white text in headings and subheadings. The similar appearance of all cards along with a lack of hierarchy in their placement, makes the website confusing to navigate.

  • The lack of an optimum classification of content on the website into suitable categories or headings and sub-headings further makes the navigation counterintuitive.

  • The three icons in the top right corner, namely, ‘Page history’, ‘Edit this page’ and ‘Report an issue’ are extremely small as compared to the rest of the elements on the page (i.e. blue cards) and thus can be missed by the eye of most users.

  • The language drop-down is counterintuitive. It is confusing for most users to figure out what the abbreviated language codes mean until they click on one of the options and try to switch languages using the same.

  • When a user lands on the website, there is no information regarding what the website is about. This lack of Introduction or About Section again breeds uncertainty regarding what to do after landing on the website.

  • The reason behind using a different shade of blue in some of the cards (bottom-most row of each section i.e. the User Documentation Section and Fedora Project and Community Section) is not apparent as the information in them is not severely different from the rest of the cards.

These are the set of improvements/solutions that can be offered to the problems mentioned above along with some additional features/functionalities to make the UX better:

  • In order to avoid the confusion caused by the similar appearance of all the cards, the front page can be made more intuitive in nature by the use of icons on the cards related to the heading. Let us say if the first category is ‘User Documentation’, a ‘documentation’ icon can be used on the card and if the second category is ‘Community’, an icon depicting the same can be used to make it easier for the user to figure out where to go next/how to proceed.

  • A proper hierarchy needs to be created with the context of information architecture to make navigation across the website easier.
    The four sections of classification could be:

    • About Fedora Project
    • User Documentation
    • Community
    • Code of Conduct

    Here is the link to information architecture classification as per my understanding of the same through documentation as well as the discussion thread:

    Figma Link of hierarchical classification of website content

  • The three icons in the top right corner, namely, ‘Page history’, ‘Edit this page’ and ‘Report an issue’ need to be made more prominent in the context of size and colour. Apart from just icons, the text also needs to be there because currently, a user can only determine the role of those buttons upon hovering over them. Even the text displayed on hover appears after delay and thus hinders a smooth user experience.

  • In the language drop-down, apart from the abbreviations, flag icons can also be used along to make the objective of that functionality simpler to understand.

  • Dark Mode functionality can be added to improve digital accessibility and to aid users with specific disabilities. Cataract sufferers, users with chronic migraines and users with low vision disorders will benefit from the dark mode functionality apart from users who generally work in low-light situations.

  • The negative space between the cards needs to be increased in order to create a more appealing visual look.

  • Brief information about each card can be displayed on hovering instead of being mentioned on the card itself. This would reduce the congestion on the front page and increase the ease of perception of information.

  • Additional UI specifications that have been included are:

    • Keeping the border radius of the search bar the same as the border radius of the cards for a more consistent design.
    • Making the colour scheme more appealing while at the same time following the Fedora Colour Palette.

  • A major change is the addition of a vertical navbar that clearly lists the hierarchy of information on the website, simplifies the classification and greatly improves the user experience because of the ease it offers.

View the prototype of redesigned Docs front page layout made on Figma

View the complete Figma file here

Gladly looking forward to feedback and suggestions.

I like the graphical design. I'm concerned that most users would take 3 clicks to get to the user docs they're looking for. Same for the teams docs. I'm not sure how to best collapse those, but three clicks is a lot.

Also, the Packaging Guidelines are not user documentation.

Your concern regarding the user taking 3 clicks to get to the User Docs and Teams Docs is extremely relevant and definitely needs an adequate amount of rethinking on my end.

However, as far as Packaging Guidelines are concerned, can we take it out of the tree and create a fifth section out of it along with the other four sections i.e. About Fedora Project, User Documentation, Community, Code of Conduct?

Similarly, how about removing the Teams subheading from the Community section and rather using Engineering Teams and Mindshare Teams as they are instead of using them as a sub-sub-heading. This would bring down the Teams Docs section to two clicks instead of three.

Representation: https://www.figma.com/file/dXU4fxY0wdhwKYJBSrVQqs/Hierarchy-Modified?node-id=0%3A1

Edited by harshitajain

However, as far as Packaging Guidelines are concerned, can we take it out of the tree and create a fifth section out of it along with the other four sections i.e. About Fedora Project, User Documentation, Community, Code of Conduct?

I don't think it needs to be a fifth section on its own. Maybe a group of policies from multiple sources could be one, although they'd also fit in About or Community.

Similarly, how about removing the Teams subheading from the Community section and rather using Engineering Teams and Mindshare Teams as they are instead of using them as a sub-sub-heading. This would bring down the Teams Docs section to two clicks instead of three.

That seems reasonable.

Since the concern is regarding 3 clicks being taken by users to get to the user docs, how about creating a hover effect on the cards.

  • Upon hovering on the card which contains the main heading (let's say User Documentation), the icons of subheadings (Variants, Quick Docs, EPEL, Older Releases etc.) appear. This would save a click and rather than clicking on User Documentation --> Variants --> F Linux 35, the user can just hover on User Documentation and click on Variants --> F Linux 35. This would bring down the number of clicks from 3 to 2.

  • Further, I've added the hover effect to the cards where there are no further sub-divisions as well. On these cards, brief one-liner information about the heading appears on hovering, which is shown in smaller font size on the blue cards on the current Docs Front Page.

View the prototype of redesigned Docs front page layout made on Figma

View the complete Figma file here

how about creating a hover effect on the cards.

How would that affect accessibility? My concern is that screen readers and other a11y tools would miss that context. But maybe they'd be able to handle it?

The point of accessibility needs a lot of consideration on my behalf. How about removing the hover effect completely away and rather using the layout as designed here?

If not, another option could be to make use of the hover effect on the Docs front page for PCs and laptops while for mobile phones and tablets where hover is not compatible, we can simply go with the earlier design (without the hover). The presence of the vertical navbar would make the navigation across the website on touch screen devices easier and would compensate for the multiple clicks being taken to navigate to a page.

However, I am not sure how reasonable the first alternative (displaying all icons on the home page instead of displaying them on hover) would look as far as the graphical design aspect is concerned.

Metadata
None
No Tags
Static archive. pagure.io was sunset in 2026; this is a read-only snapshot.
Red Hat Logo

Fedora is sponsored by Red Hat. Learn more about the relationship between Red Hat and Fedora »

© Red Hat, Inc. and others.