Page MenuHomePhabricator

Redesign Comment Box
ClosedPublic

Authored by chad on Nov 7 2016, 5:22 PM.
Tags
None
Referenced Files
Unknown Object (File)
Mon, Sep 2, 11:23 AM
Unknown Object (File)
Sun, Sep 1, 5:00 PM
Unknown Object (File)
Sun, Sep 1, 4:00 AM
Unknown Object (File)
Sat, Aug 31, 2:51 PM
Unknown Object (File)
Fri, Aug 30, 9:02 PM
Unknown Object (File)
Fri, Aug 30, 9:01 PM
Unknown Object (File)
Fri, Aug 30, 9:01 PM
Unknown Object (File)
Fri, Aug 30, 9:01 PM
Subscribers
Tokens
"Cup of Joe" token, awarded by cspeckmim.

Details

Summary

Redesign the action comment box for better use in two column, mobile, nuance.

Test Plan

Test in mobile / desktop / tablet, adding and removing actions. Actionless comment boxes, etc.

Diff Detail

Repository
rP Phabricator
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

chad retitled this revision from to Redesign Comment Box.
chad updated this object.
chad edited the test plan for this revision. (Show Details)
chad added a reviewer: epriestley.

i think I found a way around "javascript"

nope, i'm wrong. overengineered.

i think a sadist invented JavaScript.

chad edited the test plan for this revision. (Show Details)

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.

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.)

Screen Shot 2016-11-08 at 12.09.31 PM.png (177×269 px, 9 KB)

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.

The comment area is 40% wider, and 2em shorter. I'd have to think this is more surface area for commenting.

I write a lot of paragraphs

A LOT

and lists

so many

TBQH my prose
is poetry

I write a lot of paragraphsA LOTand lists
so manyTBQH my proseis poetry

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.

yeah I'm going to flip it locally and see it the layout still works ok. I think it should.

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.

downside is apps that don't use new comment box will look pretty bad.

chad edited edge metadata.
  • flipped-ux
epriestley edited edge metadata.
  • 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...)
This revision is now accepted and ready to land.Nov 8 2016, 10:41 PM

we can go back to dashed. :D

(i still have 1-2 hours of polish here)

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/

Ah -- I'll fix that, I don't think it conflicts with this.

chad edited edge metadata.
  • final nudges
  • safari/firefox
  • final nudges
  • mobile updates
This revision was automatically updated to reflect the committed changes.