Name change needed for: Service initiation pattern (SIP)

[cfarquharson]

Since we are revisiting the look of the SIP by having it be the 2xH1 + circle design, I would like to take this opportunity to rename the SIP pattern. Since many, if not most, of the pages using the pattern are not 'services', they are just content pages that are sewn together. Additionally, I'm not sure why 'initiation' is in the name of the pattern, since I'm not sure what 'initiation' even means in the context of the pages using the SIP. Gov.uk calls their 2xH1 patterns "guide" (in the metadata, example: https://www.gov.uk/income-tax/how-you-pay-income-tax ). I would like to suggest something like "Guided experience pattern", with works whether the circles are steps

or just bullets
. I think this is more intuitive that "Service initiation pattern". FYI, I'm not loyal to "Guided experience", so if you have a better name, we can certainly explore that too.

[Borges-Porteous]

@lisafast @delisma @quidampepin @patlaj @LanaStewa @pcwsmith

[jkshapiro]

we are revisiting the look of the SIP by having it be the 2xH1 + circle design

This is interesting. Is there a preview available?

[Borges-Porteous]

CRA is currently running a beta trial for Canada Child Benefit:

• Canada Child Benefit

[cfarquharson]

@jkshapiro Note: the CCB mainpage Miguel mentioned above, doesn't use the 2xH1 design...the 2xH1 design is on all the child pages of CCB, like this page: Who can apply

[jkshapiro]

Thank you both

[quidampepin]

Just to clarify: it's not named "Service initiation pattern" anywhere. :-)
There are 2 things:

1. The "ordered multi-page navigation" pattern (the "pills"): https://design.canada.ca/common-design-patterns/ordered-multipage.html. This doesn't have to be used solely in service initiation situations.

2. The service initiation page template: https://design.canada.ca/recommended-templates/service-initiation-pages.html. Currently, this suggests to use the "ordered multi-page navigation" pattern.

The next step is to create a new "navigation" pattern based on the "subway" pattern. I was going for "Step-by-step" pattern, but open to discussions. Once that exists, we'll revisit the "Service initiation page" template to suggest to use the new step-by-step navigation pattern instead.

Now, about the name of the template... The point was to have a template specific to services - knowing that you can use the step-by-step or the ordered multi page patterns in any situations, not just for services.

I'd be open to change the name of the template to include something about "tasks". Task completion page?

[delisma]

I don’t really like the name “step-by-step”, since related pages with an unordered list could be using this pattern too. Unless I’m mistaking.

[jkshapiro]

I like "guided experience". Or "wizard".

[nschonni]

Government Wizard

[quidampepin]

@jkshapiro To me, a "guided experience" or a "government wizard" implies a series of interactive questions to guide you through the process. In this case, we're only talking about a way to to connect related pages in a sequence, through a right-hand menu that persists in mobile at the top of the page. Guided experience and wizards would be a bit pompous for what it is, IMO.

@delisma for the moment, as far as I know, we only tested successfully the "subway" pattern in "step-by-step" situations, where there is a clear sequence of actions (i.e. you need to know "Who can apply" before applying. We don't know yet if that subway pattern works that well for pages that are related, but are not in a logical (temporal) sequence. To me, the subway pattern implies some form of a sequence, but if it works for non-sequential tasks, that's fine with me. We just don't know if it does work for that.

So, the situation we still have the same situation:

1. we have a new pattern to name - the subway pattern - that we know for now works for "step-by-step" situations, but that may eventually work for non-sequential related pages. This is NOT the same thing as the service initiation template. Open to suggestions for names!

2. we have the existing service initiation pate template, which we will modify to suggest using the new "subway" pattern once it's documented. We coud revisit the name, but I don't think we need to. This would be a specific implementation of the subway pattern, where the guidance would recommend a specific way to use it.

Am I making sense?

[quidampepin]

We're thinking of "Task group navigation" for the pattern itself. Thoughts?

[cfarquharson]

Since UX testing with TBS showed that having the numbers inside the circles was a bit of a problem, as users would instinctively always choose the #1 menu item, even though the task was a different menu item, yet when having hallow circles, it worked great, I'm now proposing the design be "persistent navigation' or 'continuous navigation". I want to stay away from the word 'wizard' as these are static pages and a wizard is far more interactive. The design really is just tying a suite a pages together. I think it's best to call it what it is (i.e. persistent/continuous navigation)

[jkshapiro]

I think this is a nice multi-use pattern that can apply both to static content and to interactive multi-page forms. We used a variant of it in one of our mockups (see, e.g. https://ised-design-coe.github.io/030%20What%20does%20your%20corporation%20do.html) and usability testing has been positive. But I take the point about avoiding the word "wizard" for static content.

What about "linear navigation", "sequential navigation", or "step navigation"?

[cfarquharson]

@jkshapiro I'm good with 'linear navigation' but would want to stay away from 'linear' or 'step' wording, as the pattern is often not a 'step' model. For example, on this page: https://www.canada.ca/en/revenue-agency/services/benefits/emergency-student-benefit/cesb-how-apply.html the final step is not to call CRA's, it just an option if the previous menu items don't cover off what's needed. That said, I'm not sure that the link you provided is exactly inline with how we envisioned the menu being used. By putting everything in expand/hide, and then visually putting the sub-items at the same level as the main items, it creates a visual experience that is not matching the mental model of nesting. Additionally, in the case where there is only one sub-menu item (like your first item), you end up repeating the link text twice as both an expand/hide label, and and sub-menu link label, which can have both UX and accessibility concerns. Instead of using expand/hide, we are working with the IA principle of "Progressive disclosure" and so only after the user clicks to the parent page, are the child items revealed (if there are child pages to reveal). So it would be a list inside a list.

For example, the second level IA would only appear once a user has selected a first-level menu item. In the below case, the sub-menu would only appear after the user picks the 3rd section/step (and in this case they are on the second sub-step)

[jkshapiro]

Yes the point about duplicating the single link is well taken.

The existing navigation, which this is meant to replace, does use the same model as you describe: substeps are only displayed once the user enters the main step. However, this didn't test well. Our users felt that they were being deceived, and that they had no way of knowing how many steps the process really was.

[Christopher-O]

@jkshapiro I could see that when item 3 in your example has 12 sub-steps...that would be very overwhelming to a user. But if you were to disclose all your steps and substeps...that menu would probably look extremely daunting/stressful to tackle. I would think a proper amount of IA/UX and structure of the content could strategize and minimize issues like that.

[quidampepin]

@cfarquharson IMO, the CESB page you linked is still a "sequential" example (even if Contact is is not a "step", there is a certain sequential logic to it). We tried using it as well for a situation that is not sequential at all (proto: http://test.canada.ca/covid-19-guidance/proto/indigenous/cvd-communities/cases.html). In these "non-sequential" situations, not having the line between the circles may help (Miguel told me you already have CSS for that).

To summarize:

• it looks like this pattern could be used for different things, sequenced or not, service or not, etc.. The documented pattern would have these customization options. For now, we're calling it "Task group navigation" pattern, to avoid restricting it to steps or sequences.

• the "service initiation page" template will be a specific use of this pattern, intended for services - most likely sequential, with headings such as "Who can apply", "How much you can get", etc. Not all possible customizations would be suggested in that template. It's a specific implementation of the pattern, for a specific use (namely: launch a service).

[cfarquharson]

@quidampepin I agree, the bulk of CESB, is sequential, but it's not fully sequential, whilch is why I what to avoid naming it in a way. Additionally, the way you have used it in the link cited and noted above, is definitely not sequential info, so I guess that doubles back to my more recent suggestion of "persistent navigation' or 'continuous navigation", as that is what the menu is. Sometimes it's for steps, sometimes is no a semi-sequence, and sometimes it's for non-sequence, but what it always is, is it's persistent/continuous.

[quidampepin]

@cfarquharson we're pretty much on the same page, except for the name. The main menu is also a persistent menu. TBH, I don't think the name will have a great impact - everybody will call it the "subway pattern", I'm afraid. :-) I think good guidance on which navigation to use will be the key (we had drafted this for "discovery" navigation, for example: file:///Users/admin/Documents/GitHub/design-system/design-patterns/discovery-navigation.html)