[UX] Register view enhancement | Round 1

[f-odhiambo]

Describe the enhancement

| | |

Implementation

• [ ] Fix the tasks buttons display. Right now the tasks buttons are cut off in both registers.
  • [ ] Update the UI to show the correct character count for the buttons that show tasks.
  • [x] Update the UI to show the correct button size for the task buttons.
  • [x] Update all the button properties to match the designs
• [x] Update the UI to show the correct character count for the labels.
• [ ] Update the UI to show the correct character count for the names.

@HenryRae and @ellykits to lead the review of designs and character counts on the three elements.

[mberg]

We also really need to figure out a strategy to improving the usability of the tasks. Right now you can't read what they say. We probably need to allow them to be a bit wider. We may want to consider dropping the + and shortening the descriptions to reduce the length of the task labels.

[dubdabasoduba]

After this round of updates then we can move to https://github.com/opensrp/fhircore/issues/2040

[HenryRae]

On the family profile: (360px screen width)

1. Patients with long names should allow the text box to move to 2 lines max. The text/copy can be truncated with ellipses in case it's more than the available text length.
2. Long task names should be truncated too in case they can't fit the available text box width. However, task names used should be as short as possible and clear i.e use concise and precise keywords for call-to-action text or buttons. The idea is to keep it short but meaningful. cc: @AnnieMungai @f-odhiambo

For larger screens 400px width:

1. the patient names container can be fixed, and
2. the task button container set to fill the available space
3. and the label fits the available space with 8px padding left and right

Task buttons guide: Button guides and rules:

1. To ensure task buttons remain functional, we recommend the button label to be limited to approximately 12 - 16 characters. If the required label exceeds 12 or 16 characters, it may still be used(but will be truncated), but it may be worth evaluating the copy.
2. Use concise and precise keywords for call-to-action text or buttons. The idea is to keep it short but meaningful

Link to page with the specs

[HenryRae]

Patient and task name guide: The screenshot shows 1 option with long patient name, and the other with both patient and task name long.

1. Long patient names should be truncated, but both the patient name and the task button should be responsive depending on the screen size.
2. Long task names will be truncated, task names should be as short as possible. max width of task button in other registers should be 130px for 360px width screen, thus task names that can't fit should be truncated.

[HenryRae]

Most button names(99%) should be able to fit if the proposed properties in design are implemented.

Other design properties

Button guides and rules:

1. To ensure task buttons remain functional, we recommend the button label to be limited to approximately 9 - 16 characters. If the required label exceeds 9 or 16 characters, it may still be used(but will be truncated), but it may be worth evaluating the copy.
2. Use concise and precise keywords for call-to-action text or buttons. The idea is to keep it short but meaning full
3. The button width should be responsive to the button label width. Although the button will have a max width of 130px for labels that push the button width to go beyond 130px thus label will be truncated to fit within the 130px button width. For shorter labels, the button length will be responsive

Link to the design specs

[rowo]

@dubdabasoduba @AnnieMungai related to the above comments from Henry, here is a spreadsheet with potential button/task label names (column E, highlighted means it is long): https://docs.google.com/spreadsheets/d/1lT2M9I55RtTdxsp9iBDSHbcmsKZJRj2L3Zcj8WP-4jY/edit#gid=0. We can work together to finalize. The two items I'm not sure about are: (1) if it's possible to modify labels, and (2) what is the final list of tasks we have? Is the spreadsheet complete or maybe it needs to be updated because of how we're handling immunizations now.