Application Sign In/Out Link

[patheard]

My group is trying to come up with a standard placement for application Sign In and Sign Out links. Design convention is the top right of the screen so we've come up with the following two possibilities:

Top Blue Bar
Mockup v1a

This is our preference because:

1. It groups the Sign In/Out actions with the application's top level navigation.
2. The link could use the existing .mb-menu markup and be easily converted into a dropdown if required (this would allow for a user settings menu similar to Gmail's approach).
3. Link is available on one column pages.

Breadcrumb
Mockup v1b

A secondary choice for us would be to the right of the breadcrumbs. This would fulfill the design convention and make the Sign In/Out link available on one column pages.

Let me know what you think. I'd be happy to code either of the above if they meet your design requirements.

[LaurentGoderre]

The Ux Working Group is working on this as well

@laurawesley what's the status on this?

[pjackson28]

@MBlondin is the lead on it. He can probably provide an update.

[MBlondin]

@patheard Like the mockup's. Let me discuss with UX WG about them and I'll get back to you.

[laurawesley]

@patheard Good stuff - definitely agree that the convention is top right.

I prefer the second option since many people are struggling to fit all their menu items into the navigation bar. However, this may also be true for the breadcrumbs - sometimes they get quite long. What will happen in that case?

Also, the navigation bar is reserved for navigation items so the first option is not compliant to the Standard on Web Usability.

You may also want to consider including an option for users to change their preference (if applicable). You could do something like "Welcome back So Andso" whereby clicking on the users name allows them to change their settings and preferences.

I also agree with standardizing (to the extent possible) 'sign in' rather than 'log in'.

[patheard]

For long breadcrumbs, I was thinking that the breadcrumbs could wrap once they reached a boundary close to the link, as in this mockup.

I'm definitely on board for an account preferences link or dropdown menu. My hesitation with "Welcome back So Andso" is the variable length of the user's name - I can picture cases where a huge chunk of the breadcrumb space would be eaten up by the name.

What would you think of something generic like "Your account"? The sign out link could then be included in the dropdown.

[MBlondin]

@patheard I agree with you on that for the BC to wrap. As for the Welcome Back I and @laurawesley talked about it a while back and thought it was a good idea. I had some thought about it and looking at Google, Facebook and other they use the user's name so we would see as example: Mathieu Blondin | Sign out

[patheard]

I could get behind having the user's name without the "Welcome back" text. It should grab the user's attention and as you said, falls in line with what Google, Facebook and others are doing.

Here's a quick mockup I put together.

[laurawesley]

@patheard Looks great! Either one will probably work. I would like to do some simple tests with users to make sure they notice it and know that their preferences are hiding under there.

Can you put up a mock-up of a whole page for each mock up (your account / user's name) and I will do some testing?

[pjackson28]

@patheard The Login in link shouldn't be in the breadcrumb area as that area doesn't exist in the mobile view (breadcrumb itself is integrated into the Menu dialog). If you want this link immediately visible in mobile view then it should be in the content area.

[patheard]

@pjackson28 Good catch on the mobile view - what would you think of this solution for mobile?

My intent for the full screen design was that the sign in/out links shared the same horizontal context as the breadcrumbs, but weren't actually part of div#gcwu-bc.

The 2 main goals I'm trying to hit with sign in/out are:

1. As close to top right of the screen as possible (design convention).
2. Outside of the page's text content. Sign in/out and user preferences are global actions within an app and I don't want to confuse the user by making it appear that they're related to the page's content.

[MBlondin]

@patheard I like that. I just did the version with User Name | Sign Out under the H1 (https://dl.dropbox.com/u/43687567/SignOut.jpg)

[pjackson28]

@patheard A possible issue with having it before the h1 is that it may not be discoverable by screen reader users. The only way they will find it by reading past the breadcrumb (where most will probably jump to a section of the page with a heading such as the h1 in the content area).

Probably the safest approach is to make it into a section with an h2 to make it easy to skip to and past that area.

[StephenOTT]

Have a lot of interest in this work as Ottawa.ca has a application/account functionality that will coming online in the near future

[patheard]

@pjackson28 You're right - the "Skip to main content" link is pretty tempting to a user. What would you think of using source ordering and CSS as a compromise? Sign out could follow the <h1> in the markup and then be absolutely positioned as in the v2 mockup.

@MBlondin I'm still reluctant to move those links visually below the <h1> - I view them as app level rather than content level. What do other people think? If I had my way, I'd stick them up in the top black bar, but I figured that was pushing it :)

@laurawesley No problem for the full screen mockups - as soon as we've got the design hashed out I'll fire them your way.

[MBlondin]

@patheard Don't get me wrong, I agree with you in having it at equal level to the breadcrumb.

@pjackson28 If we look at the AWG Survey summary provided by Mr. Ed Carey from Canada Heritage:

"In summary sign-in/log-in should be a link, be named consistently (not really sure which one is preferred), and above the H1. Having only the sign-in/log-in link when you are not signed-in/logged-in and the sign-out/log-out link when you are simplifies things and reminds you if you are in or out. Location may be more important for screen magnification users than for screen reader users. Note, that for keyboard users that would also be true and in this case the number of keystrokes to get there is important. You always need to get in, and you should exit properly. "

Then I tend to agree and vote that we proceed in testing @patheard's full page desing.

@patheard In your full page design, I would replace the Stay Connected footer header to Sign Out.

[pjackson28]

@MBlondin We won't really know until AWG tests the solution whether or not before h1 works for them. If it does then great.

@patheard Putting the link in the content area and using CSS to position elsewhere would be a reasonable compromise. Can try before the h1 and see how AWG reacts.

[patheard]

@laurawesley @MBlondin Here are the full screen mockups for user testing. Let me know if you need anything else from me.

@pjackson28 Sounds good - once I hear back about the testing I can code that up.

[MBlondin]

@pjackson28,@laurawesley Any word form AWG testing on @patheard screen mockups?

[pjackson28]

@MBlondin @patheard @laurawesley Did any of you send it to testing already? If not I can do it. An easy way to ask for a one off test in the future (versus formal testing) is ping the working group co-chair or the group itself.

[patheard]

I haven't sent it - good to know about the one off test requests.

[laurawesley]

@patheard @MBlondin @pjackson28 - Sorry, I totally dropped the ball on this. The good news is - I met with some folks today who I think can help with usability testing on the suggested approach(es). They have a need for this approach and they already have testing planned. Let me follow-up tomorrow and get back to you shortly.

@PCH-EdC I don't think AWG can test screen mock-ups, can they?

[PCH-EdC]

The only screen mockups that I have seen are basically just graphical, and
thus not accessible for screen reader users. Thus the members of the AWG
that rely on screen readers would not be able to test them. A sub-set of
the AWG membership might be able to test.

[patheard]

@laurawesley @PCH-EdC If you'd like, I've got a first version of the Sign In/Out code I could put up in a branch for AWG to test.

[PCH-EdC]

Hello!

I think it would be worth it, to test the first version. This way you can
get feedback right away.

Take Care!

Ed

[patheard]

@PCH-EdC I've just pushed a signout branch to my fork of wet-boew. You can download it here. It has new demos added in the /demos/signout folder - let me know if you need more for accessibility testing.

For French labels (based on #600) I went with Ouvrir une session and Fermer la session.

Code wise, I'd like to improve on the following if it's OK'd by AWG:

1. Config option to pass the breadcrumb container ID (currently only works for gcwu fegc and intranet themes).
2. Performance (flickers if the breadcrumbs need to resize)

[laurawesley]

@patheard - Wonderful!!! Thanks for the code. Let me talk to @thomasgohard on Monday and see what we can do for testing right away. There are a number of departments working on the same ideas. A meeting may be required to bring folks in who are not yet active on GitHub.

/cc @PCH-EdC

[gobyrne]

@patheard Thanks, it looks quite elegant.

[gobyrne]

I've got my session management system working nicely with these links. Is there any chance this will make it in to an upcoming WET build?

[nschonni]

I like 3b, but icons might help. ex: gear for settings like on mobile?

[patheard]

@nschonni I thought about it but was worried it would be out of place since there aren't many icons used in the desktop view. What does everyone else think?

[mackeym]

@patheard I like the look of those, would they still have a place on the home/landing page though? From what I've seen the landing page often has a different setup without the H1 tag.

[patheard]

@mackeym thanks and yes, I was picturing the same spot for the those links on the home page.

Based on my understanding of the TBS standard on usability, I don't believe the landing (or splash) page should have anything but language links on it.

[mackeym]

@patheard Yes the splash page definitely shouldn't have a login link, I'm just too used to clients calling the home page the "landing" page :)

For the home page, I was thinking of how many of the home pages get really customized like the tc.gc.ca site. I can't see many home pages actually sticking to the H1 at the top as they'll throw their branding/pictures/etc up there. The H1 is kind of repetitive on those pages because the title of the site is usually the same thing for a home page.

Would we still be fine to use just a little login "box" somewhere on the home page if we couldn't put it under the H1?

[patheard]

@mackeym that's a good point about the <h1> getting removed on home pages.

Ideally the sign in links will be in a standard spot for all home pages. Personally I would put the links as close as possible to the top right corner of the page's content area (matches the established design convention).

The catch is that the above isn't ideal if your home page's entire purpose is to get people to sign in. In this case, it would make sense to dedicate a large, prominent content block to a sign in call to action or sign in form.

What do you think @laurawesley / @thomasgohard?

[nschonni]

The catch is that the above isn't ideal if your home page's entire purpose is to get people to sign in. In this case, it would make sense to dedicate a large, prominent content block to a sign in call to action or sign in form.

The wouldn't it just be the actual sign in page which wouldn't have the links on it?

[patheard]

This is true - it would end up duplicating the sign in form on two pages, but the trade-off would be one less click and page load for the user to get into the site (reduced barrier to access):

home page -> signed in

Instead of:

home page -> sign in page -> signed in

In the end, it depends on use case. You need to decide just how important it is for your users to get into the site.

[nschonni]

In the case were the home page must be signed in to use, the application would most likely be redirecting the user automatically to sign in page. The only unauthenticated page would be the splash.

[thomasgohard]

The one case I can think of where you could have a sign-in/sign-out link displayed on a home page would be if it was a site-wide sign-in.

Also, home pages should still have an H1; it's just hidden. So the sign-in/sign-out link can still be placed below the H1. It would just appear at the absolute top of the content area:

[laurawesley]

Great work @thomasgohard @MBlondin @patheard

Re: @pjackson28 's comment:
@patheard Even if they tested equivalently I stiil don't see sufficient justification for the breadcrumb approach considering the significant drawbacks. The usability testing is just one factor in determining what is the best approach. Also important to keep in mind that the usability testing took just a small sample of users with limited diversity in needs. Even if it tested better for the limited user sample, the known issues seem to effectively negate it as an option.

@thomasgohard was recommending to go with under the H1 since it tested equivalently...not the reverse. In any case, our next round of testing will include users who use assistive technology. We are really looking forward to working with @PCH-EdC on it. We'll also be looking at French labels and the approach for changing user settings.

@nschonni @patheard I'm not in favour of adding an icon. I like your mock-ups (my personal faves are v3a & v3c). We could use any of those to test with or maybe we could use @MBlondin 's site - is it available to everyone? Can you give us the link?

Thanks everyone!

[pjackson28]

We'll still need to build integration into mobile view but that should be pretty quick once the markup is locked down. Do we have an estimate of when the pull request is happening?

@thomasgohard In mobile view, does the Sign in/sign out go above or below the Languages menu item?

[thomasgohard]

@pjackson28 The order of the items in the settings menu is: Sign-in/sign-out, Language, other settings, About.

[patheard]

@laurawesley I'm liking v3c as well.

@pjackson28 once I know which version people want to go with, it'll only take about an hour to put together the PR.

[nschonni]

I like the background because I feel like it delineates the links (or the button is fine too) from the rest of the side content. Not sure what would make sense in terms of colours if the two ideas were mixed.

[MBlondin]

In my view i don't think a bg is needed . I also feel that the font size should be a tad smaller to differ from content. A button with an lock icon would be nice but if simply a link i suggest no bg.

On 2013-03-20, at 17:16, "Nick Schonning" <notifications@github.commailto:notifications@github.com> wrote:

I like the background because I feel like it delineates the links (or the button is fine too) from the rest of the side content. Not sure what would make sense in terms of colours if the two ideas were mixed.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/338#issuecomment-15204078.

[pjackson28]

v3.1 release is really close (possibly a week away) so please lock down the solution and produce the HTML. The support will also need to be added to mobile view to incorporate it into the settings menu.

[thomasgohard]

I think v3b and v3c are the best options. But v3c feels distracting. I'm not sure if it's because of the colours.

@patheard Can you mockup v3b using the colours from v3c (blue background and white text)?

[patheard]

@thomasgohard but of course - here are some v4 mockups for you to look at:

• content-signin_v4.png
• content-signout_v4.png

[thomasgohard]

@patheard I like. The colour definitely attracts attention, but, maybe because it doesn't look like a button, it feels less distracting. This is totally subjective though.

Lets implement v4 for WET v3.1, with the understanding that we will do further usability testing and may adjust the visual presentation. I'll have to think of a way to test whether the sign-in/sign-out distracts the user when it isn't part of their task.

Can you do the coding and submit the pull request?

Great work!

[patheard]

@thomasgohard thanks - I just submitted #1685 to add the CSS/HTML for the v4 mockup. Next step is to add these links to the mobile settings menu.

[pjackson28]

Looks good. Added the mobile view support. Also added Spanish examples and extended to the GCWU Intranet, WET and Base themes.

@LaurentGoderre I added the i18n strings. They are under %tmpl-signin, %tmpl-signout and %tmpl-youraccount.

[patheard]

Thanks to everyone for their help on this issue - I'm closing it since the code has been added to 3.1.