A few UI nits (OD-8)
Robin Shen opened 6 years ago

I like the broad strokes of the UI, but noticed a few small things I thought were worth drawing attention to. I've used fairly narrow screen widths mainly for screenshot size, and used a rule to separate distinict thoughts.


Screen Shot 2020-01-18 at 9 02 48 AM I see 2 things here:
  • The spacing, alignment, and color of the "queries" button and the search box could better communicate their logical relationship.
  • The visual harmony can be improved a little by placing the search box and project table on the same vertical line.

Here's an example of what I mean:

Screen Shot 2020-01-18 at 9 12 24 AM
Screen Shot 2020-01-18 at 9 13 09 AM

I took this screenshot right before the breakpoint that hides the "Last Update" column just to point out how much space is still left. I think the column is useful, so it may be worth preserving at smaller widths. To that end, I see a few optimizations that might help carve out space for it at smaller widths:

  • Hide the owner avatar
  • Use "Updated" instead of "Last Update"
  • Drop the "ago"
  • Use a terse time format that abbreviates days/weeks/months/years, like <1d, 5d, 6m, etc.

The "Last Update" column items might be easier to achieve by just generating and hiding a duplicate version of the column and switching between them at narrow widths.


Screen Shot 2020-01-18 at 9 46 25 AM

I see two things here:

  1. The highlight when we hover over a commit row has an uncomfortably tight right/left margin.

  2. The buttons on each commit row can turn into a mess with longer commit messages. Some things that may help:

    • Collapse the commit-ref copy button into the commit button (tap/click the commit button to see a pop-up choice between copy and visit?)
    • Collapsing the buttons into one menu
    • Collapse tags into a pop-up menu that lists all tags when clicked/touched
    • Truncate commit titles (perhaps at 50 characters, as a kind nudge to users?)

Finally, the only thing I went looking for that I found confusing was something like the github "releases" page for a project. It may be that you intend builds or tags to do that duty (and that may be more obvious with more releases in the system?), but I think it provides a useful signal about a project.

  • Robin Shen commented 6 years ago

    Thanks for the insight. The table showing project list has a small margin as I reserve it to show the new event indicator (the blue edge as shown here: https://github.com/theonedev/onedev#painless-pull-request-review).

    As to spacing and color of query button and search box, do you have any suggestions? I am an engineering guy without too many UX senses. Will definitely need help in this area.

    For the commits part, that is definitely needed to be improved.

    For the releases page, it is only a customizable query, the query is named "Releases". One can select to use any other desired name appropriate.

  • Robin Shen batch edited 6 years ago
    Name Previous Value Current Value
    State
    Open
    Committed
  • Robin Shen batch edited 6 years ago
    Name Previous Value Current Value
    State
    Committed
    Closed
    Resolution
    empty
    Fixed
  • hichemmejri referenced from other issue 9 months ago
issue 1/1
Type
Improvement
Priority
Normal
Assignee
Issue Votes (0)
Watchers (1)
Reference
OD-8
Please wait...
Connection lost or session expired, reload to recover
Page is in error, reload to recover