Page MenuHomePhabricator

Improve Toolhub's navigation UX
Open, Needs TriagePublic

Description

During a recent team meeting, we (aka @bd808, @Raymond_Ndibe and myself) discussed T305455: `Back to ...` buttons should lead users back to where they came from , and reached the conclusion that Toolhub may have more profound navigation issues than what can be solved by sprinkling "Back to" buttons across the deeper pages in the site hierarchy.

Some of the existing back buttons are confusing because Toolhub is "polyhierarchical", i.e, in some cases, a page has more than one parent. If the user comes to a page from one of the page's parents, but is taken to a different parent when clicking the back button, they may end up confused and annoyed.

Event Timeline

A possible solution could be using "breadcrumb navigation", a type of secondary navigation scheme that shows the user where they currently are in the site hierarchy.

Breadcrumbs are a list of links representing the current page and its “ancestors” (parent page, grandparent page, and so on), typically going all the way back to the site homepage.

https://www.nngroup.com/articles/breadcrumbs/

This may be a bit of overkill because most of Toolhub has a rather flat hierarchy, but maybe some kind of variation could be devised?

A possible solution could be using "breadcrumb navigation", a type of secondary navigation scheme that shows the user where they currently are in the site hierarchy.

This may be a bit of overkill because most of Toolhub has a rather flat hierarchy, but maybe some kind of variation could be devised?

For a page like https://toolhub.wikimedia.org/tools/xtools-ec/history/revision/17323 I could certainly see a breadcrumb like tools / xtools-ec / history / #17323 offering some utility. The tools root could point to our search view with the others being hopefully fairly self-obvious.

A similar but slightly different idea I have had specifically for the tool and list detail views and their related sub views is a consistent navigation header of [{tool,list}][edit][history] links that would show on the detail, edit, history, revision, and diff screens. This is basically what most MediaWiki skins do for navigation related to a particular article, it's talk page, it's edit view, it's history, it's historic revisions, and it's historic diffs. These could be styled as links, tabs, buttons, etc as fitting for the rest of the design. One advantage this might have over breadcrumbs is offering single click navigation to edit and history from all of these related views compared to the breadcrumb's utility of only moving to more general pages.

An older task that is also related to navigation and back buttons: T280090: Add a "Back to Home Page" on tool info pages. I see you already discussed breadcrumb navigation there, @bd808.

Some related UI improvements that would help with navigation:

  • Put a giant button for "Add a tool" on the home/landing page, and also on the page that you see when you get no search results
  • Offer an option to view search results as a list instead of as a grid. The grid is hard to skim and you could view more records on a single page if they were smaller and wider and stacked vertically.