Page MenuHomePhabricator

Icons look bad in HistoryTableView
Closed, ResolvedPublic

Assigned To
Authored By
chad
May 31 2017, 12:57 AM
Tags
None
Referenced Files
F4986472: image.png
Jun 1 2017, 7:43 PM
F4984265: e94eo.gif
May 31 2017, 2:47 AM
F4984219: Screen Shot 2017-05-30 at 6.46.22 PM.png
May 31 2017, 1:55 AM
F4984217: Screen Shot 2017-05-30 at 6.46.02 PM.png
May 31 2017, 1:55 AM
F4984202: find_the_build_failure.png
May 31 2017, 1:11 AM
F4984169: image.png
May 31 2017, 12:57 AM
Subscribers

Description

image.png (858×720 px, 129 KB)

Event Timeline

Also: one of these commits has an important build failure, can you find it in less than 15 minutes as a user with poor color vision?

find_the_build_failure.png (1×1 px, 231 KB)

Yeah, I think it's really hard to layer the icons and get top notch design.

We could maybe flip them. IDK...

Without changing the design much:

  • Revisions get a checkmark but there's no other possible state for them. Remove checkmark?
  • "No Audits" gets an icon but that's sort of not useful? Remove icon entirely? Remove checkmark?
  • Maybe "recycle icon with inlaid checkmark" for "successful build", perhaps with the object type icon much less saturated relative to the background, and swap the whole thing for a giant red X for abnormal status?

But the shape/silhouette of all these icons is basically the same so it's really hard for me to pick out the important ones in the sea of similar-colored, similar-shaped, similarly-saturated low-signal icons.

The problem is "gear" doesn't say "revisions" to me, without the check it's just a menu looking thing.

I plan to fix table and tweak the design of list more, I just needed to see it with some real data.

But yeah, all our most important icons are terrible. I'm a bad designer.

I don't think any icon is ever really going to say "Revision", "Audit", "Lint", "Build", "Task", "Commit", etc., no matter how many fancy illustrators we hire.

Here's the much-larger, high-resolution, full-color icon I click to browse the web:

Screen Shot 2017-05-30 at 6.46.02 PM.png (79×85 px, 11 KB)

The one I click to edit source code:

Screen Shot 2017-05-30 at 6.46.22 PM.png (88×98 px, 13 KB)

I don't think it's a problem that icons don't accurately represent the underlying objects.

If anything, it would probably be worse if they did, since reasonable representations of many objects would probably look very similar and not have distinctive silhouettes / be learnable / distinct.

I'm just going to steal them.

Honestly, half assed thought is currently:

Use "phabricator" icon or "eye" for Differential.
Modify "commit" icon for Audit (half eye, half commit)
Use "issue" type icon for Maniphest.
Use some sort of "bot" icon for builds.
"Commit" icon is already pretty standard, I have one built locally for PhontAwesome.
Lint.... search icon with 1's and 0's

What if we just removed the icons completely?

We could probably remove the author names (we have icons) and dates (the table headers show the dates already) too. That would get us pretty close to GitHub's UI.

we have icons

Er, profile pictures, rather.

And Phabricator has small pools of users (just your coworkers, not internet randos) and we have unique avatars now so author name is probably rarely of much importance.

The "Browse" buttons also don't actually do anything right now, but probably don't need an icon.

Maybe just a single status icon, that's a pass/fail, that's a menu with links to Tasks, Diffs, Builds?

The "Browse" buttons also don't actually do anything right now, but probably don't need an icon.

derpdog

Imma get kids to be, then some diffs 4 u

You can just click the commit title to get to builds/diffs/etc. GitHub has no direct link to builds/tasks/issues; GitLab has a direct link to builds only.

I use all this stuff personally, but I'm not sure anyone else does and everyone I've seen feedback from likes GitHub's UI better than Diffusion's UI, so I don't think we need to feel tied to the "epriestley power user" UI since it's largely a product of me adding stuff that's useful for me for the way Phabricator works and the way I develop software.

I think most projects don't even care about individual commit build status -- just branch build status.

I think we do need audit status on the Audit view, at least, but that could be removed on history views to keep things cleaner like GitHub.

And, like, the graph view thing is useful for this project, for a very narrow range of activities, but it's likely useless in 95% of projects and to 95% of users.

I think the link to the revision is probably the most generally useful piece of information, but we could replace this:

[ abcdef01234 ] * epriestley on THE SAME DATE IN THE HEADER

...with this:

[ abcdef01234 ] [ D1234 ]

...to retain it without all the icon stuff. But I think even that isn't terribly important.

(I've got some kind of family thing going on myself so I may not be around too much longer tonight.)

So punt to improving commit pages?

Yeah, I think we get even more design leeway here if we do T9713 and the actual commit page becomes less of "big blog of poorly aligned text" and more "list of revisions, tasks, diffs, builds" + "option to view raw".

family thing? Wouldn't you rather write a clipboard js implementation like https://github.com/zenorocha/clipboard.js

I super hate that feature but it looks like it's literally three lines of JS. How does that repository have 18K stars? This is like left-pad v2.

Sorry I guess it is 5 lines:

var text = JX.$N('textarea', {value: 'quack'});
document.body.appendChild(text);
text.focus();
document.execCommand('copy');
JX.DOM.remove(text);

Maybe like 10 lines with capability testing.

Basically no one who uses fancy modern JS frameworks actually knows how to write software I think? The library isn't hundreds of lines of clever polyfills and workarounds for obscure IE bugs, it's just tons and tons of boilerplate around 5 lines of code.

Yeah I'm surprised this seems to have reasonable adoption now.

But most of all, it shouldn't depend on ... any bloated framework. That's why clipboard.js exists.

THIS IS IRONIC, RIGHT?

I think all the bad bad stuff is resolved and I'll have more design tweaks outside of this.