Page MenuHomePhabricator
Create Task
Maniphest T286164

Implement UI changes suggested during design review
Closed, ResolvedPublic
Actions

Description

Based on a recent feedback from WMF's design team, here are a few todos to improve the UX of Toolhub (layout, navigation & consistency):

  • Improve home page and tool card design; remove excessive white space and reduce size
    • Remove keywords
    • Make the entire card clickable
    • Remove the two big blue buttons
    • Remove the fixed height; possibly truncate the description to 3-4 lines
    • Change the word "authoritative" to "comprehensive" or "collaborative" or "community-authored"
  • Minor tweaks on tool page
    • Remove the grey background on hover in additional info table
    • External link icon on the browse button to show what it is for; and wording change "Take me to the tool page.."
  • Navigation bar improvements
    • “ToolHub” branding on the header that persists
    • perhaps de-emphasize the blue header
  • Visual design
  • Crawler history
    • When clicking on the rows that get highlighted in blue, show the urls crawled in someplace more visible

Details

SubjectRepoBranchLines +/-
toolhub: bump container to 2022-12-14-185830-productionoperations/deployment-chartsmaster+1 -1
ui(chrome): Change header color to match logo's bluewikimedia/toolhubmain+16 -4
ui(chrome): Link Toolhub wordmark to "home" view in navigation-drawerwikimedia/toolhubmain+6 -1
ui(chrome): Move Toolhub branding to v-app-barwikimedia/toolhubmain+58 -31
ui: Some changes related to color, border, shadow and spacingwikimedia/toolhubmain+129 -86
Fixes design bug on crawler history pagewikimedia/toolhubmain+17 -1
Improve home page and tool card designwikimedia/toolhubmain+71 -134
Customize query in gerrit

Related Objects

Event Timeline

srishakatux created this task.Jul 4 2021, 11:36 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 4 2021, 11:36 PM
gerritbot added a comment.Jul 5 2021, 3:31 AM

Change 703077 had a related patch set uploaded (by Srishakatux; author: srishakatux):

[wikimedia/toolhub@main] Improve home page and tool card design

https://gerrit.wikimedia.org/r/703077

gerritbot added a project: Patch-For-Review.Jul 5 2021, 3:31 AM
bd808 moved this task from Backlog to In Progress on the Toolhub board.Jul 5 2021, 8:33 PM
gerritbot added a comment.Jul 7 2021, 8:46 PM

Change 703624 had a related patch set uploaded (by Srishakatux; author: srishakatux):

[wikimedia/toolhub@main] Fixes design bug on crawler history page

https://gerrit.wikimedia.org/r/703624

gerritbot added a comment.Jul 9 2021, 8:27 PM

Change 703077 merged by jenkins-bot:

[wikimedia/toolhub@main] Improve home page and tool card design

https://gerrit.wikimedia.org/r/703077

gerritbot added a comment.Jul 9 2021, 8:45 PM

Change 703624 merged by jenkins-bot:

[wikimedia/toolhub@main] Fixes design bug on crawler history page

https://gerrit.wikimedia.org/r/703624

Maintenance_bot removed a project: Patch-For-Review.Jul 9 2021, 9:10 PM
srishakatux updated the task description. (Show Details)Jul 12 2021, 9:19 PM
srishakatux updated the task description. (Show Details)Jul 14 2021, 5:02 AM
gerritbot added a comment.Jul 20 2021, 12:48 AM

Change 705519 had a related patch set uploaded (by Srishakatux; author: srishakatux):

[wikimedia/toolhub@main] Some changes related to color, border, shadow and spacing

https://gerrit.wikimedia.org/r/705519

gerritbot added a project: Patch-For-Review.Jul 20 2021, 12:48 AM
srishakatux mentioned this in T286849: If the logo + title combined with the description is big enough it clips through the author list.Jul 20 2021, 1:05 AM
gerritbot added a comment.Aug 9 2021, 1:53 AM

Change 705519 merged by jenkins-bot:

[wikimedia/toolhub@main] ui: Some changes related to color, border, shadow and spacing

https://gerrit.wikimedia.org/r/705519

Maintenance_bot removed a project: Patch-For-Review.Aug 9 2021, 2:10 AM
bd808 updated the task description. (Show Details)Aug 13 2021, 8:24 PM
bd808 triaged this task as Medium priority.Sep 3 2021, 5:30 PM
srishakatux edited projects, added Developer-Advocacy (Oct-Dec 2021); removed Developer-Advocacy (Jul-Sep 2021).Sep 30 2021, 10:31 PM
srishakatux added a subscriber: bd808.

@bd808 Minor tweaks around adding back button, might do in the first two weeks of October. If no bandwidth, then may be could be a good first task for any new member joining the project? :)

bd808 added a comment.Dec 1 2021, 12:27 AM
  • Add a back button to go back to the home page. Revisit all other pages and add a back button where necessary.

I think this one is not going to be easy or reasonable to implement as specified. There are many different routes that could lead to viewing a toolinfo detail page and tracking that in the SPA would basically require implementing our own version of the browser's internal history stack. We could add a button that literally calls the browser's history.back() function, but we wouldn't really be able to label it with where that would end up taking the user (home page, search results page, list detail page, etc). It would also be exactly what the user can do with their browser's built-in back button.

bd808 edited projects, added Developer-Advocacy (Jan-Mar 2022); removed Developer-Advocacy (Oct-Dec 2021).Jan 13 2022, 5:45 PM
srishakatux removed srishakatux as the assignee of this task.Jan 18 2022, 9:06 PM

I'm unassigning myself from this task, as I don't plan to work on it anytime soon.

bd808 moved this task from In Progress to Backlog on the Toolhub board.Feb 7 2022, 9:26 PM

Moving back to backlog. The remaining actionable changes here should be split out into smaller tasks where they are easier to both debate the merits of and to track the implementation status of those that are not declined after discussion.

bd808 removed a project: Developer-Advocacy (Jan-Mar 2022).Feb 7 2022, 9:26 PM
bd808 mentioned this in T305455: `Back to ...` buttons should lead users back to where they came from .Apr 5 2022, 6:17 PM
bd808 renamed this task from Improve Toolhub's UX to Implement UI changes suggested during design review.Apr 25 2022, 7:54 PM
bd808 updated the task description. (Show Details)
bd808 updated the task description. (Show Details)
bd808 moved this task from Backlog to Groomed/Ready on the Toolhub board.
Slst2020 moved this task from Groomed/Ready to Review on the Toolhub board.May 4 2022, 7:56 AM
bd808 updated the task description. (Show Details)Dec 5 2022, 4:45 PM
gerritbot added a comment.Dec 5 2022, 5:08 PM

Change 864793 had a related patch set uploaded (by BryanDavis; author: Bryan Davis):

[wikimedia/toolhub@main] ui(chrome): Move Toolhub branding to v-app-bar

https://gerrit.wikimedia.org/r/864793

gerritbot added a project: Patch-For-Review.Dec 5 2022, 5:08 PM
gerritbot added a comment.Dec 6 2022, 6:30 PM

Change 865147 had a related patch set uploaded (by BryanDavis; author: Bryan Davis):

[wikimedia/toolhub@main] ui(chrome): Change header color from blue to dark grey

https://gerrit.wikimedia.org/r/865147

bd808 added a subscriber: Slst2020.Dec 12 2022, 6:17 PM
In https://gerrit.wikimedia.org/r/c/wikimedia/toolhub/+/864793/4 @Slst2020 wrote:

Nice that both the logo and the Toolhub text are clickable. In the navigation drawer, only the logo is. I don't know if we want to change that.

This seems like a reasonable change to make as part of this task.

gerritbot added a comment.Dec 12 2022, 6:24 PM

Change 864793 merged by jenkins-bot:

[wikimedia/toolhub@main] ui(chrome): Move Toolhub branding to v-app-bar

https://gerrit.wikimedia.org/r/864793

bd808 updated the task description. (Show Details)Dec 12 2022, 9:05 PM
bd808 updated the task description. (Show Details)
gerritbot added a comment.Dec 12 2022, 9:18 PM

Change 867275 had a related patch set uploaded (by BryanDavis; author: Bryan Davis):

[wikimedia/toolhub@main] ui(shrome): Link Toolhub wordmark to "home" view in navigation-drawer

https://gerrit.wikimedia.org/r/867275

gerritbot added a comment.Dec 13 2022, 9:55 PM

Change 867275 merged by jenkins-bot:

[wikimedia/toolhub@main] ui(chrome): Link Toolhub wordmark to "home" view in navigation-drawer

https://gerrit.wikimedia.org/r/867275

gerritbot added a comment.Dec 14 2022, 6:54 PM

Change 865147 merged by jenkins-bot:

[wikimedia/toolhub@main] ui(chrome): Change header color to match logo's blue

https://gerrit.wikimedia.org/r/865147

bd808 removed a project: Patch-For-Review.Dec 14 2022, 10:20 PM
bd808 updated the task description. (Show Details)
gerritbot added a comment.Dec 14 2022, 10:24 PM

Change 868183 had a related patch set uploaded (by BryanDavis; author: Bryan Davis):

[operations/deployment-charts@master] toolhub: bump container to 2022-12-14-185830-production

https://gerrit.wikimedia.org/r/868183

gerritbot added a project: Patch-For-Review.Dec 14 2022, 10:24 PM
gerritbot added a comment.Dec 14 2022, 10:58 PM

Change 868183 merged by jenkins-bot:

[operations/deployment-charts@master] toolhub: bump container to 2022-12-14-185830-production

https://gerrit.wikimedia.org/r/868183

bd808 closed this task as Resolved.Dec 15 2022, 11:28 PM
bd808 claimed this task.
Restricted Application added a project: User-bd808. · View Herald TranscriptDec 15 2022, 11:28 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits