Page MenuHomePhabricator

Touch up Pholio
ClosedPublic

Authored by chad on Jun 14 2014, 9:40 PM.
Tags
None
Referenced Files
Unknown Object (File)
Thu, Aug 29, 8:30 AM
Unknown Object (File)
Tue, Aug 27, 6:57 AM
Unknown Object (File)
Mon, Aug 26, 10:05 PM
Unknown Object (File)
Sun, Aug 25, 6:38 AM
Unknown Object (File)
Thu, Aug 22, 9:32 PM
Unknown Object (File)
Wed, Aug 21, 6:33 PM
Unknown Object (File)
Wed, Aug 21, 3:40 PM
Unknown Object (File)
Thu, Aug 15, 4:44 AM
Subscribers

Details

Reviewers
epriestley
Commits
Restricted Diffusion Commit
rP45b827c66e8a: Touch up Pholio
Summary

Uses common CSS spacing, tweaks some colors, increases viewport size to very limits.

Test Plan

Test large and small images, various breakpoints. Able to more easily review mocks.

Screen_Shot_2014-06-14_at_2.18.02_PM.png (1×2 px, 925 KB)

Screen_Shot_2014-06-14_at_2.18.40_PM.png (1×2 px, 802 KB)

Diff Detail

Repository
rP Phabricator
Lint
Lint Skipped
Unit
Tests Skipped

Event Timeline

chad retitled this revision from to Touch up Pholio.
chad updated this object.
chad edited the test plan for this revision. (Show Details)
chad added a reviewer: epriestley.
webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
171–174

This seems premature -- it means the thumbs and stage will never fit in the same viewport, and you will always have to scroll to access the thumbs, right?

I don't find the thumbs useful, I can just push left or right on the keyboard and cycle through them. I'd rather have the space to properly review the pixels. I think in the unbeta mocks, the thumbs are hidden by default (available on click).

How do you imagine the stage scaling? That mock seems like it makes the "not enough pixels of mock" problem much worse, by requiring far more space at the bottom. If the mock was rotated 90 degrees, it would need to be scaled way way down to fit.

One thing I don't like about the current approach, that mock, and this (earlier?) one:

pholio_unbeta-V1.png (1×1 px, 342 KB)

...is that we're basically letting you browse a 2D array of images (left/right = different thumbs, up/down = history) but not giving you any kind of visual/spatial element to help figure out what's going on or what the 2D landscape look slike. In the thumbs-are-vertical mock, it seems especially confusing (left/right move you up/down, and up/down move you on an invisible history dimension?).

What if we separated out the thumbs completely into a spatial element, sort of a visual representation of the Differential history table:

Screen_Shot_2014-06-14_at_3.16.36_PM.png (409×1 px, 579 KB)

(With numbers for inline comments.) ...and made that a totally separate element, under the theory that most browsing will just use the keyboard and jumping to a specific image is basically a separate operation. So we don't even try to fit it on screen, but put it below, give it plenty of space, and throw away the thumbs action.

I think we can throw away the arrow buttons too, or replace them with a very tiny pixel art version of the map which shows where you are relative to everything else.

Then maybe we scale the stage dynamically and accept that the description will sometimes not be visible? That is, if the mock is about the same aspect ratio as the browser window, it will just take up all of the pixels.

Basically, I think ~all the feedback on Pholio has been "the mock should have more pixels", so let's just try an approach where it has the most possible pixels and see what the next round of feedback is?

epriestley edited edge metadata.

I think the next iteration of this removes, reduces, or separates the thumbs, so this is fine, it's just weird for the stage to explicitly scale to a size to put the thumbs just out of reach.

This revision is now accepted and ready to land.Jun 14 2014, 10:31 PM

There may be no value in the thumbs. One thing Dribbble does is just a next and previous thumb, we could fit that in the right sidebar easily, and not even have it if it's only one image

Here's a rough cut of the grid:

Screen_Shot_2014-06-14_at_4.10.27_PM.png (1×1 px, 132 KB)

Dribbble also has a maximum image size of like 400x300 though, right? I think they're solving a very different problem.

Your approach seems reasonable in that it at least provides additional information / context for the image above (history). I would maybe always have the most recent on the top and cap the height of the entire area so it maybe only shows 1.5 or 2.5 rows and a scrollable height?

It may also be worth ditching all the black UI for the grey-checker instead.

chad edited edge metadata.
  • I don't know whats in this update
chad updated this revision to Diff 22857.

Closed by commit rP45b827c66e8a (authored by @chad).