Progress for elderly sick people

I work on tablet app for elderly sick people, In the app we have a measurement of pulse which is scheduled and measurement has 2 phases.

Example: Next measuremnt starts at 14:00. This measurement will have maximum length of 25 minutes(It is adjusted based on results from first 5 minutes).

Therefore there are 2 phases:
1st where pulse is measured lasts 5 mintues
2nd where pulse is measured but can be between 0 and 20 minutes

What needs to be shown to user: Initial start time 14:00
Maybe maximum end time 14:25, so maybe first card could be somthing like.
First card
Next measurement
14:00-14:25

Second card
measurement
Progress indicator(with or without 2 phases indicators, time of finish)
during the initial Ui testing with users we found out that they are not able differenciate between time 14:00 and countdowns. So we removed countdowns from whole app and We would like to stick with just time

Question: Do you have any idea how to design second card in a simple way. So elderly people can understand it? Examples of some UI are very welcome.

Current App Ui. enter image description here

enter image description here

Design QA checklist

I’m coming up with a checklist for QA to check on designs after a feature has been built on a product before it can be released.

Design QA checklist

[ ] matches with design specs (colors, spacing, text styles, etc)
[ ] interactions and behaviours
[ ] edge cases
[ ] local variations (with local language, currency)

For desktop features
[ ] on smaller screens / tablet
[ ] on large screen

For mobile
[ ] on small phone
[ ] on larger phone

What do you think? am I missing out of anything that should be checked

How to tackle the Annual cycle?

We are experimenting with Annual cycle in our company for some workloads we have to repeat every week, month, year etc…

So far we have tried:

  • Teams calender

  • Microsoft Planner

  • Classic SharePoint Online Task list with Gantt (modern doesnt support Gantt)

  • Custom list in SharePoint Online (with some SPD and or Flow attached for the logic)

Anybody have any better suggestions we can try out inside the Microsoft umbrella? Only 2 stipulations

  1. It has to be OOTB functionality so no extra coding of any kind

  2. No 3rd party software

Two tabs on the same page?

enter image description here

In a page we’re designing, we have an issue of there being two tabs (closely positioned) and I wanted some suggestions for alternatives. Essentially in this page, we have a main tab that serves the function of switching between different tables. This function can’t be changed but can be displayed differently (drop down wasn’t working out). The second tab appears when the user clicks a button on the screen, and a slider opens up into half of the table. In this slider there is another set of tabs. Do you all have any suggestions as to how to maneuver this? Sorry if I’m being unclear, let me know if I can help clarify. I have attached an image for context.

Should read-only text appear as plain text or in a read-only textbox?

Should I use labels for read-only information, or should I use read-only text boxes to maintain the look of the fields?

It seems to me that if something is in a textbox it implies there is some way to edit it, whereas plain text is explicitly read-only.

Update: While my question is similar to Locking input form fields, does it make sense?, mine is different in that I’m referring to fields that are never editable by anyone. It’s not based on the user’s rights or role.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Should read-only text appear as plain text or in a read-only textbox?

Should I use labels for read-only information, or should I use read-only text boxes to maintain the look of the fields?

It seems to me that if something is in a textbox it implies there is some way to edit it, whereas plain text is explicitly read-only.

Update: While my question is similar to Locking input form fields, does it make sense?, mine is different in that I’m referring to fields that are never editable by anyone. It’s not based on the user’s rights or role.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Showing socially shared content to users who are not logged in

Almost all the content on my webapp/site is visible only after the viewer has logged in. But, when a user shares a piece of content with someone (who may or may not be a user of the app), that someone receives a link, and expects that clicking on the link will show them the content.

So I need to balance two needs – 1) the assumption (please confirm if this is valid) that directly showing content on clicking a shared link is better UX and 2) the app itself needs to be behind a login/sign-up wall.

What are some good approaches to go about this?

I should also note that for people who aren’t yet users, the signup process is extremely simple and almost the same as logging in: there are 3 fields – name, email, password, fill them up, touch the button and you are directly signed up and logged in. So no confirmation links, etc.

Showing socially shared content to users who are not logged in

Almost all the content on my webapp/site is visible only after the viewer has logged in. But, when a user shares a piece of content with someone (who may or may not be a user of the app), that someone receives a link, and expects that clicking on the link will show them the content.

So I need to balance two needs – 1) the assumption (please confirm if this is valid) that directly showing content on clicking a shared link is better UX and 2) the app itself needs to be behind a login/sign-up wall.

What are some good approaches to go about this?

I should also note that for people who aren’t yet users, the signup process is extremely simple and almost the same as logging in: there are 3 fields – name, email, password, fill them up, touch the button and you are directly signed up and logged in. So no confirmation links, etc.