TASK: Help Centre navigation update (2 tasks)

[oksks]

What needs to be done?
Help Centre's current navigation is confusing and lacks a way for the user to have an overview of their path to a certain article, and a way to understand how to get back to a category or items.

• TASK 1 - We'd like the Help Centre to have a breadcrumbs-style navigation solution.

Example:

• TASK 2 - When this is implemented, please remove the "Back" text with the arrow icon, as they will become obsolete.

Location
https://citizenos.com/help/

Deadline
A week from today - June 1.

[argoroots]

Done

[oksks]

Thank you @argoroots! Looks great.
@ilmartyrk, could you please kindly remove the back arrow on the app's version of Help Center as well :) Then I'll close this ticket.

[oksks]

@argoroots, @ilmartyrk had noticed that breadcrumbs only appear when user arrives at the 3rd level - the article itself, not the category. But they should be visible on the 2nd level (category) as well - for example, on this page https://citizenos.com/help/login.

Could you please make sure that second level, category, also has this kind of navigation? Thank you!

[argoroots]

@oksks, done.

[BeccaMelhuish]

Hi @oksks @argoroots @kevincrepin @ilmartyrk

Just caught up with this issue sorry - I wasn't getting notifications on this one. (Please do tag me in anything HC related now that I am project managing it :))

So I've had a look now, and there are still some issues to be solved, I'm afraid!

I saw Oks request to remove the back button on the app hasn't been done, but actually personally I think it's correct that it should stay there. As it's more intuitive to just click back to go to the previous level that to stop and think about which level in the breadcrumbs you want to go back to. And this is the UX flow that @kevincrepin and us tested in the Help Centre UX tests, and it worked beautifully. But @kevincrepin what are your thoughts - do you agree that is best to keep the back arrow still, now that we have the breadcrumbs? An alternative would be to change the back button to a "Home" icon.

However, the big issue is that the original problem that we were trying to solve here still isn't sorted unfortunately, as when you click the back arrow on the platform, it still goes back to Home and not to the previous level.

As per the original Help Centre thread (citizenos/citizenos-fe#815) apparently the issue with the back button not working was as follows, from Liina: "The back button goes to home because Argo did not develop level 1 and level 2 separately. They are all one level. If this is very important, then he has to rename the relevant documents in code. Not that big of a job, but something to do. URL translations maybe affected as well."

So I had understood that the breadcumbs solution would fix this problem, as the levels would be labelled correctly in the code. But as above, it's currently still going to home.

@ilmartyrk or @argoroots, any thoughts on this? Can the back button now be made to go back to the previous level and not to home, if @kevincrepin agrees that we should indeed keep it as part of the UX?

[oksks]

@BeccaMelhuish - my request (task 2) to remove the back arrow from the website actually was resolved by Argo, as requested.
Back button in the app is likely @ilmartyrk 's development (I think?), and was done independently of website development.
@ilmartyrk - pls let me know if there's anything required of me to make it work as per @BeccaMelhuish 's request? We also discussed it here.

[ilmartyrk]

@BeccaMelhuish @oksks is correct, the arrow is on our app side. To solve the back arrow thing I can propose 3 solutions

1. We replace it with home icon so users can understand that it will return to the starting page of help-center
2. We setup postMessage system so that I can send command from APP to website inside iframe to go to previous page. This will also need @argoroots input, https://html.spec.whatwg.org/multipage/web-messaging.html#security-postmsg
3. Just remove the icon

[oksks]

I vote for #1!
Seems to solve all problems with almost no effort and imho is just fine UX-wise, too.

[BeccaMelhuish]

How much time/effort would #2 take @ilmartyrk?

If time/effort isn't an issue then I'd vote for #2 and also making the "Help Centre" heading at the top a link to Home, for the smoothest UX in my opinion :)

(I remember from the UX tests people browsing the topics so seamlessly and speedily using the back button to go back and forth through different possible options to land on the one that's relevant to them. And when people are looking for Help they're already frustrated, it should be nice and smooth.)

[ilmartyrk]

1)@oksks I need to get icon from Kevin and replace the current one
2) @BeccaMelhuish it basically means that @argoroots should add a few lines of code to web page:

window.addEventListener('message', function (e){
	if (/citizenos\.com(:[0-9]{2,4})?$/.test(e.origin) && e.data === 'back') {
      window.history.back();
    }
}, false);

[kevincrepin]

My thoughts on the breadcrumbs / back topic and some other comments thrown in for good measure:

1. For me the breadcrumbs in the app help centre are not adding much value, but are adding noise. We have only 2 levels after the start page and we get into this situation that the title of the topic gets repeated in the breadcrumb. Not to mention the breadcrumb pushes the title of the topic down. So generally...not a fan and not 100% convinced it's necessary. If we do want to keep it, maybe let's make the type size a bit smaller: 0.8rem instead of 1rem?

2. If we can get the back arrow to work then that also has my vote. Again, we only have a couple levels. A home icon there would save us one click which is a bit negligible in this context.

3. The current live version has some margin issues. In some cases too much in others too little, couple examples:

• The margins all around the content feels a bit too tight, like it's all crammed into this small space.
• start page after the first paragraph there's a big margin until the search and then another big margin until the topics. In design this is not so big.
• The related or quick links need a bit more margin between the list items + the text should act like in a list, so if a wide sentence falls on a second line, it should be aligned with the first word of the sentence, behind the arrow.

4. In the bottom I have a white box blocking the content, looks a bit weird :) No idea why.

5. The idea was that the top title/label would change according to the second (not third) level. This would also reduce the need for the breadcrumbs.

6. Minor: The top title/label should have a bit extended letter spacing, like in design. It looks better :)

[BeccaMelhuish]

Super, thank you @kevincrepin, all sounds sensible! And we've spent so much time on the HC so far, would be great to make sure it looks great/works smoothly too :)

So @oksks and @ilmartyrk based on this, shall we do the following, and if so who will do so? (And do we need to create separate issues for some of these things, or they are OK all together in this one?)

(1) Remove the breadcrumbs from the platform, so it's only on the website. Though @ilmartyrk I remember previously you said this was a technical issue, and that if we have it on the website we have to have it on the platform too for some reason? So if this is the case, and it's not possible to get around that, then let's make it smaller as per Kevin's suggestion above?

(2) Make the back button work as it should. (@oksks do you liaise with Argo about this, re the code Ilmar posted above?)

(3) Resolve the margins issues. (Who would need to do this, is it @ilmartyrk or Argo?)

(4) Get rid of the white box. (Again is this @ilmartyrk or Argo?)

(5) & (6) Make the top title/label state the name of the topic section (i.e. Topics, General, etc.) and with more letter spacing, in both cases as per the original design. (Again is this @ilmartyrk or Argo?)

And one additional one from me:
(7) I noticed there are also some margin issues on the website, as Level 1 is aligned, but Level 2 indented. It looks quite odd when jumping back and forth between them, and isn't how it was in Kevin's original design. (Again something for @oksks to liaise with Argo about I believe?)

[oksks]

Thanks @BeccaMelhuish!
@ilmartyrk I'll leave you to decide on issue #1, and will move the rest of # to a new ticket for Argo to address.