Page MenuHomePhabricator

Edit card v1.0 design tweaks
Closed, ResolvedPublic

Description

Task overview

This task involves the design improvements we are committed to including in the release of v1.0 of the Edit Cards. T221309 tracks the development of v1.0.

"Done"

  • It is clear how to edit an existing link's label
  • It is clear how to edit an existing link's target
  • It is clear how to remove an existing link
  • It is clear how to close/dismiss the edit card
  • It is clear how to close/dismiss the edit card while preserving the changes you just made

Design: @iamjessklein
Engineer: @Esanders
PM: @ppelberg

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 12 2019, 1:55 PM
iamjessklein updated the task description. (Show Details)
iamjessklein added a subscriber: Esanders.

Hi @iamjessklein. Can you please associate at least one active project with this task (via the Add Action...Change Project Tags dropdown). This will allow others to get notified and see this task when looking at the corresponding project workboard. Thanks!

Any translation needs should be documented over in T225568
cc/ @matmarex @ppelberg

iamjessklein updated the task description. (Show Details)Jun 12 2019, 6:26 PM

Here is the proposed fix for this iteration.
I'm working with @Volker_E to ensure that it conforms to OOUI

This would entail implementing the following fixes (however - I'm not ready for implementing yet):

  • add a title bar with the link icon, the word link" and a close icon
  • add edit buttons for label and link actions
  • add the Wikipedia mini logo next to wiki-link
  • move the label-edit (text) above the link-edit (link target)
  • remove the thumbnails next to links
  • remove the current icons associated with the label and link

After talking with @Volker_E he suggested a few tweaks which I have here.

  • change placement of "remove link"
  • change color of "remove link" and icon
  • change color of "label" and "link" text to Base30/#72777d

thoughts/feedback are welcome either here or drawn on the freehand

ppelberg renamed this task from Edit card layout tweaks to Edit card v1.0 design tweaks .Jun 13 2019, 2:01 AM
ppelberg updated the task description. (Show Details)

thoughts/feedback are welcome either here or drawn on the freehand

This is looking good, @iamjessklein.

2 questions:

  1. "X" in the title bar: In instances when a contributor lands back on the card after having made a change, do you think the "x" will lead people to hesitate, concerned that tapping "x" will cancel the change(s) they've just made? If so, would an icon that seems less "destructive" resolve this?
  2. Title bar text: Is there a reason we're opting for "Edit" vs "Edit link" in the title bar as we'd proposed previously here? A potential reason that came to mind (thinking aloud): maybe "Edit link" would require additional translations?
ppelberg updated the task description. (Show Details)Jun 13 2019, 2:21 AM
Esanders added a comment.EditedJun 13 2019, 9:25 AM

Title bar text: Is there a reason we're opting for "Edit" vs "Edit link" in the title bar as we'd proposed previously here? A potential reason that came to mind (thinking aloud): maybe "Edit link" would require additional translations?

We have added "edit link" inside the inspector once you actually start editing the link, but at this point you haven't started editing yet.

im thinking about:

"X" in the title bar: In instances when a contributor lands back on the card after having made a change, do you think the "x" will lead people to hesitate, concerned that tapping "x" will cancel the change(s) they've just made? If so, would an icon that seems less "destructive" resolve this?

I see your point @ppelberg but i also think it's important to have an obvious way out (exiting a process was one of the complaints that came out when I did initial interviews). I will to try to replicate the flow that you are describing to see what it feels like.

re:

Title bar text: Is there a reason we're opting for "Edit" vs "Edit link" in the title bar as we'd proposed previously here? A potential reason that came to mind (thinking aloud): maybe "Edit link" would require additional translations?

Link is definitely appropriate here because of how we are using the card as an initial state before making edits.

Thank you for explaining @Esanders + @iamjessklein ...all that you described in T225629#5256058 and T225629#5256664 sounds good to me.

I think what we have below is great for our v1.0, save for two copy changes to the editable fields:

  • Change "Label" to "Display text"
  • Change "Link" to "Link target"

ppelberg added a comment.EditedJun 13 2019, 6:55 PM

For v1.0 we will be shipping the version that is currently deployed to the prototype server (pictured below). We will revisit the changes discussed in this ticket as part of the changes we plan to make in v2.0: T225725

matmarex moved this task from To Triage to Triaged on the VisualEditor board.Feb 12 2020, 5:23 PM
ppelberg closed this task as Resolved.Feb 15 2020, 2:07 AM
Restricted Application added a project: User-Ryasmeen. · View Herald TranscriptFeb 15 2020, 2:07 AM