Page MenuHomePhabricator

FunctionDefinition: update copy for input fields
Closed, ResolvedPublic

Assigned To
Authored By
JKieserman
Nov 1 2022, 12:14 PM
Referenced Files
F36076812: image.png
Jan 9 2023, 2:59 PM
F36076783: image.png
Jan 9 2023, 2:59 PM
F36076737: image.png
Jan 9 2023, 2:39 PM
F36076723: image.png
Jan 9 2023, 2:37 PM
F36076730: image.png
Jan 9 2023, 2:37 PM
F36067272: image.png
Jan 9 2023, 10:37 AM
F35998371: image.png
Jan 5 2023, 5:16 PM
F35998364: image.png
Jan 5 2023, 5:16 PM

Description

Description

Update the copy describing what each field is for while creating a ZFunction

Desired behavior/Acceptance criteria

  • the copy matches the design

Devices and Design (URLs or screenshots)

Figma file https://www.figma.com/file/mmkBqv4TKfX4WIXaHIDEtQ/T322132?node-id=17:5423&t=bmBJqoW8Hhz4LaOT-1

Desktop

image.png (1×2 px, 187 KB)

Small screens/mobile

image.png (2×750 px, 153 KB)

Copy

  • Function name
    • Label: Name (optional)
    • Helper text: Give the function a descriptive name to help others understand what this function does.
    • Text field placeholder: E.g. Convert Celsius to Fahrenheit
  • Function aliases
    • Label: Alternative names (optional)
    • Helper text: Add additional names so others can easily find this function.
    • Text field placeholder: E.g. C to F, Temperature conversion
  • Function input
    • Label: Input (optional)
    • Helper text: What kind of data does the function accept? See list of input types.
    • Text field placeholder: E.g. C to F, Temperature conversion
  • Function output

Notes

We're aware that the desktop layout is less than ideal with the helper texts, but we didn't want to increase the scope of this task. We would open a separate task if necessary.


Completion checklist

Event Timeline

Copy as per sceenshot. Ready to be implemented.

Hello hello! Before moving forward with this task, I wanted to suggest a couple of small opportunities, and hear your thoughts!

  1. Instead of 'Add a function', 'Add alternative function name(s)', 'Input label', and 'Output label' we could opt for a real-world function example to be used in the text fields placeholders. For now, I used a celsius to fahrenheit function, but we could choose something more specific to our products.
  2. We usually mark optional fields instead of mandatory fields. By default, everything that is displayed is required, while all optional things are marked as such.
  3. What if we include the 'See list of input/output types' link in the helper text?
  4. For the input an output helper texts, what if we opt for a different noun instead of input/output, maybe 'data'? It's important to use synonyms in helper texts so that it can improve the clarity of the text field labels.
  5. If we think the page is too verbose for power user, we could hide those helper texts behind a info icon on the n 1 visit.

CleanShot 2023-01-03 at 15.01.11@2x.png (1×1 px, 325 KB)

Most of these suggestions drive inspiration from the 'Create a new repository' page on GitHub, which overlaps quite well with our own proposal.

CleanShot 2023-01-03 at 15.09.46@2x.png (1×1 px, 273 KB)

{F35962273}

Looks good to me, with minor changes. Yes to all changes in copy, yes to the examples, that looks good.

re 1) Yes
re 2) Sounds good
re 3) Sounds OK. For now the link can go to Special:ListZObjectsByType/Z4
re 4) Sounds good
re 5) let's make this optional

Minor changes:
A) There is no output label, only an output type. The output does not have a label.
B) Aliases are currently not separated by commas but by pressing [RETURN]

Ddwaal removed Ddwaal as the assignee of this task.Jan 4 2023, 2:37 PM
Ddwaal subscribed.

Description updated with the recent suggestions. The task is up for grabs!

@JKieserman while I was working on T320410 I realized that now that we use an example for the text field placeholder (instead of 'input label') it might not be clear that the text filed is expecting an input label, because (no pun intended) a label is missing. What if we add a label next to the type selector, and next to the text field?

image.png (360×1 px, 50 KB)

On desktop we could opt for something like this

image.png (456×1 px, 53 KB)

Looks good! I'll include that in this patch.

@AAlhazwani-WMF would this just be on top of the first input? Or every input (in the case there are multiple)

@AAlhazwani-WMF would this just be on top of the first input? Or every input (in the case there are multiple)

only on top of the first input (:

image.png (1×2 px, 191 KB)

@JKieserman Geno told me that the only required field on the function definition page is the 'Output' type field. I'm going to update the screens and the task description accordingly.

Understood!

Also - I actually think maybe the Type and Label descriptions should be on every input? Certainly on mobile, since an input group can be collapsed, but even on desktop if there are ten inputs, scrolling all the way to the top might be a little annoying. What do you think?

For mobile yes! Since the inputs are displayed in separate sections it's necessary to repeat the input fields label.

For desktop I'm not sure. Let's try to think for scenarios: you land on a function definition page whose window width is >720px (desktop layout), with a 800px window height. In this use case you can fit ca. 6/7 input fields. My assumption is that by the time you add the 5th, 6th, or 7th input is not necessary to remind you that you need to specify an input type and an input label. What do you think?

image.png (1×2 px, 190 KB)

On scroll there's even more real estate for the input fields, here an example on a 13" screen, 1280x800px.

image.png (1×2 px, 138 KB)

Yeah okay that does seem reasonable for desktop! Thanks for confirming

DVrandecic updated the task description. (Show Details)