Cht-core: Page Title vs. Back Title

[diannakane]

Currently, the app shows the title of the page in the salmon bar, making it appear to be related to the "back" button next to it rather than the present page.

Suggestion to resolve that to using the salmon bar to state the page that will be reverted to by clicking the back button and creating space for the title of the page just below.

Alternate suggestion that the "<" should really be "x" because you are opening page upon page. Would this be the same as the HBB, since it will take users to the page they last were? Does the "<" offer something of unique value by taking you to the parent page, which may not be how you arrived at the person's profile?

[abbyad]

This was discussed in https://github.com/medic/medic-webapp/issues/1513 and https://github.com/medic/medic-webapp/issues/1564. We had discussed several options and the decision was:

We should use the chevron for navigating back, and the close button when exiting a form

based on:

X is destructive, and at any point during form entry
< is for non destructive app hierarchy navigation

That said, I am glad that we are revisiting this now that we have more users looking at and understanding the app.

As a side note, we are using the top bar as a title bar in some places (eg new form) so we just need to make sure to be consistent across the app with any changes that we make.

[diannakane]

Happy to hear that re: the chevron vs. x. I thought you were advocating for it to be the other way which is why I added it as an alternative, but I am happy wth it the way that it is.

The open question then is what should go in the top salmon-colored bar -- the title of the present page or the name of the parent page that the chevron takes you back to. I'm in favor of the latter, as indicated in the second mockup.

[garethbowen]

I prefer the salmon bar to have the title of the current page. The text in the salmon bar jumps out and looks like the most important title on the page and to me it's more important to know where you are than where you've been. In the second mockup it looks like "Mary Jones Family" is a subheading.

However, it also looks a bit strange to have the name of the current page beside the chevron as in the first mockup as it looks like you're going back to "Busia CHP Area 1" which is wrong.

Can we remove the back button altogether and have mobile users rely on the phone's back button? Have we seen which actual user's prefer to use? Personally I find the phone's back button easier to press as it's closer to my thumb, and it's harder to miss.

If not, can we give more of a visible separation between the back button and the title so it's obvious they are different elements? For example, we could style the back button like an actual button so it looks clickable.

As an aside, I did a mockup a while back which also had the title in the salmon bar in desktop mode, and the filters small and left aligned so they were above the list on the LHS. I liked that it was clear that the filters operated on the LHS list, and the title related to the RHS content.

[SCdF]

It might be useful to generate the mockups with the same resolution as the tecno phones. I bring it up because I'd be worried that the current mockup would be too cramped on that resolution? Would be interesting to see anyway

[estellecomment]

About removing the chevron : while we've seen the HBB being used most, I wouldn't remove the chevron back button without more data about its usage. I've seen very few users, and they knew each other and were trained together, so would likely be sharing navigation strategies.
A screen with no visible way of navigating is harder to use IMO. We should plan for beginner phone users.

Dianna probably saw more users at work on the app though.

[sglangevin]

This has been resolved by people tab updates.