Redesign the action comment box for better use in two column, mobile, nuance.
Details
Details
- Reviewers
epriestley - Commits
- rPd78802f3ab65: Redesign Comment Box
Test in mobile / desktop / tablet, adding and removing actions. Actionless comment boxes, etc.
Diff Detail
Diff Detail
- Repository
- rP Phabricator
- Branch
- remarkup-box (branched from master)
- Lint
Lint Passed - Unit
Test Failures - Build Status
Buildable 14376 Build 18719: Run Core Tests Build 18718: arc lint + arc unit
| Time | Test | |
|---|---|---|
| 428 ms | PhabricatorCelerityTestCase::Unknown Unit Message (" ") Assertion failed, expected 'true' (at PhabricatorCelerityTestCase.php:32): When this test fails, it means the Celerity resource map is out of date. Run `bin/celerity map` to rebuild it.
ACTUAL VALUE
| |
| 277 ms | PhabricatorCelerityTestCase::Unknown Unit Message (" ") Assertion failed, expected 'true' (at PhabricatorCelerityTestCase.php:32): When this test fails, it means the Celerity resource map is out of date. Run `bin/celerity map` to rebuild it.
ACTUAL VALUE
| |
| 1 ms | AlmanacNamesTestCase::Unknown Unit Message (" ") 30 assertions passed. | |
| 0 ms | AlmanacServiceTypeTestCase::Unknown Unit Message (" ") 1 assertion passed. | |
| 0 ms | AphrontHTTPSinkTestCase::Unknown Unit Message (" ") 1 assertion passed. | |
| View Full Test Results (2 Failed · 331 Passed) |
Event Timeline
Comment Actions
I still need spend some time on the alignment of some items, like actions, hover states on remarkup bar, but I think the UX is ready to play with on desktop / mobile. Or any other weird bugs you may find.
Comment Actions
The "+" next to "Add Action" looks like a button, but isn't clickable.
Placeholder text doesn't seem helpful/useful to me? The flavor text just feels kind of confusing/weird to put whacky quips front-and-center. Maybe remove, or use serious text if we think users can't figure out that it's a comment box?
After learning that "+" is not a clickable action, the similar looking, lighter-grey "X" definitely isn't a clickable action either. But it is! Gotcha!
Dashed border feels weird to me. I think The only other place we use that is drag-and-drop targets. Not obvious what it means or why it's there, since it isn't grouping anything. It's also just barely visible on my screen which makes it look like a weird hipster form texture or something instead of a part of the UI.
Comment box got real short? It's already often too short for me but feels really cramped now.
The actions in the lower left feel awkward to me. My workflow is currently very top-to-bottom: add actions, write a comment, preview, submit. But now I have to scroll past the form, deal with actions, scroll back up to the comment box, write my comment, scroll back down past the actions to preview, and finally find submit somewhere not close to where my focus is. It's not clear to me what problem this is solving, except "the comment box is too big/ugly". As a frequent user, I'd rather have these controls laid out in flow order than in the sleekest possible design. The new thing definitely looks sleeker, but for me it's at the expense of logical/workflow layout order.
Adding multiple actions makes the action selector jump away from my cursor! ARGGH! Right now, I can add several actions and the "Add Action..." stays in the same place while I do, then I can adjust them and write comments. With the new UI, the control jumps away every time I select something!
The timeline order of "actions, comment" and the form order of "comments, actions" also seems weird/confusing to me. And then the preview is back to "actions, comments". It's just not clear to me as a user or from a product perspective why only this element is flipping the order.
Weird icon spacing in fullscreen mode in Safari? (Maybe pre-existing.)
Action label alignment on mobile is a bit weird but it sounds like you're aware of that.
Dropping all icons except "Upload" on mobile seems a little odd, but I'm generally onboard with that. Retaining "Preview" might be nice, though, since there's no mobile preview otherwise? Also not sure if this is new, I think we used to have a few of them stick around?
On mobile, "Add Action" is about 0.1 widths of my thumb away from "Set Sail for Adventure" and there's no confirm dialog if you click the big blue button instead of the big grey button. I anticipate pressing the wrong button around 235% of the time.
Comment Actions
The comment area is 40% wider, and 2em shorter. I'd have to think this is more surface area for commenting.
Comment Actions
Actions-on-the-bottom, especially with the jump-away-from-your-cursor dropdown, is the only thing that I really have a meaningful concern about. The other stuff is pretty minor and I can live with it or get used to it. I think I type a lot more text than the average user, and the smaller box may well be a better fit overall.
Comment Actions
yeah I'm going to flip it locally and see it the layout still works ok. I think it should.
Comment Actions
It does look a lot nicer and more-designed overall (maybe except for the dashed borders -- what was the other designey thing from a couple years ago? Diagonal pinstripes on everything or something? I don't even remember), and the attention to the mobile version makes it quite a lot nicer.
Comment Actions
- This needs a map rebuild for me locally?
- Blue background on actions still feels a little weird, but maybe just my wacky nonsense monitor calibration.
- Vertical alignment on <select /> boxes looks a touch funky in Safari (box slightly higher than label?)
- Otherwise: logical smooth sailing.
- (Maybe we should make the whole preview like 80% opacity so it's more obviously a preview, since it looks very similar to the comment box now? Not sure...)
- OR LIKE A COOL WAVY EFFECT
- OMG LOOK: http://tympanus.net/Tutorials/HeatDistortionEffect/
Comment Actions
Question from the outside - should the icon/link to remarkup continue using soccer ball instead of necronomicon? The last changelog indicated some change in that regard for the top bar, https://secure.phabricator.com/w/changelog/2016.45/