Final onboarding/getting started

[dawachan]

The need to address this was highlighted in Nick @ eLife's recent user study:

"All of our study participants after signing in were unsure what they should do next. We suggested a small visual cue to get started."

[dawachan]

What we currently have:

[dawachan]

Proposals for revised Getting Started:

• Proposal A
  

• Proposal B
  

• Proposal C
  

[dawachan]

As mentioned in our review meeting we need to define the rules around the display of the 'Getting Started' box. Proposal: It displays onLaunch of the sidebar for the first time and persists until a user makes their first annotation and then goes away. Users can also close it before they make their first annotation by manually clicking the 'x'. note: this doesn't affect the 'There are no annotations at this time' messaging - redesigning this isn't part of this phase of work.

[dawachan]

Based on review with Nick and iteration here's what I'm proposing to replace the current 'Getting Started' box. e-Life button and annotate icon would be blue accent colour, default for Hypothesis client would be grey.

Configurable options:

• + Add note button colour
• Annotate icon colour

[robertknight]

@dawariley - Where is the "New note" button referenced in the onboarding card?

[dawachan]

It's not currently but we are adding a New note button to the client universally.

[dawachan]

eLife will only have the 'New note' button, H client will have the existing bucket bar button plus the additional 'New note' button. It was Dan's request to have them both present. We might also want to add the additional steps of Reply, Share and Groups (#4,5,6) to the 'Getting Started' box. eLife seem to want just the 3 steps, so it might be that the steps end up needing to configurable or at least show/hide steps depending on implementation of our client. I can create another mockup with #4,5,6. I was trying to make 'one size fits all' so I can pitch eLife on the 6 steps, although text for step 6 might need to be configurable as it will depend on the particular group implementation.

@robertknight can you confirm that the eLife groups implementation allows users to create private groups? I'm assuming yes since they use the H namespace.

[robertknight]

@robertknight can you confirm that the eLife groups implementation allows users to create private groups? I'm assuming yes since they use the H namespace.

When the client is using a third party account, the functionality to create private groups is disabled.

eLife users do not use the H namespace. They use accounts created by eLife under an eLife namespace.

When the client is using a third party account, the user cannot currently use their normal H account (if they have one) on the same page. The plan is that will change in future, at which point users will be able to do everything they can normally do with H accounts.

[dawachan]

thanks

[dawachan]

Proposed design for 'Getting Started' H with additional Reply, Share, Groups onboarding info.

[dwhly]

I'd like to request an "Ok, got it" (or something) button at the bottom of the card in our typical style. Even if there's fancy logic to not show this card again the next time, people want a way to get the instructions out of their face in the current moment. The X at upper right is something that many people simply don't see or understand as a close function. Can't tell you how many times we've seen screen shots of people using H who have never closed the get started card.

[dwhly]

Also, would be great to see how this would be styled on the current H sidebar, separate from eLife, if it's something that will completely replace our current get started card.

[dawachan]

sure, i'll mock something up! thanks for the feedback @dwhly

[dawachan]

Here are the 2 variations for eLife and Hypothesis. The difference between the 2 versions is eLife have requested to hide the 'Reply/Share' and 'Groups' blocks.

Updated as per feedback @dwhly, (although I felt that the 'Ok, got it' button looked better centre aligned in this context, since it isn't a traditional login/dialog box and there is only one primary action to take, I feel the design looked more balanced with centered alignment of this button, imho -
although I understand the wish to standardize alignment.

Made the section headers sentence case to match what we currently have now in prod.

I've added the 'Ok, got it' button to both versions, but it's possible that since the # steps is smaller for eLife, they would prefer to hide this - I'll double check with them.

Below, the 'Ok, got it' button is shown center aligned.

Display Rules:

The 'Getting Started' box persists on a page until these conditions are met:

• A user manually dismisses it by clicking/tapping the 'x' or 'Ok, got it' which results in the 'Getting Started' box hidden globally.

• Once the user makes an annotation on a given page, the box is automatically hidden within the page scope. If annotations exist that are made by others, the box persists globally regardless of whether annotations made by others exist until the user manually dismisses it.

[dawachan]

@robertknight has reviewed and provide feedback re: grammar - have taken on board in final version and will send to eLife now for final sign-off. Rob also confirmed that all configurations proposed + logic around display rules are doable.

[dawachan]

Based on confirmation from Giuliano received today the final rules for the Getting Started panel should be implemented as follows:

1. Display Rules:

The 'Getting Started' box persists on a page until these conditions are met:

A user manually dismisses it by clicking/tapping the 'x' or 'Ok, got it' which results in the 'Getting Started' box hidden globally.

Once the user makes an annotation on any page/article, the box is automatically hidden globally.

(We should determine whether this means globally within a domain and/or cross domain)

Proposal 1:

If a user signs up for eLife, begins annotating and then creates/logs into an H account for the first time, the 'Getting Started' panel won't display as the user has already added an annotation to the client, and since they have already 'got started' we don't need to display the box.

Proposal 2:

The instructions and features we are exposing for Hypothesis are slightly different for eLife - we display additional items e.g Share/Reply and Group blocks so we should display the 'Getting Started' screen again if it is unique to a particular domain.

I think it is a balance between keeping the user informed and annoying them by showing the information too many times. I think for now I'm leaning towards Proposal 2, but it's certainly something we could user test. As long as it goes away once the user makes their first annotation within a given domain.

2. Blocks to show/hide:

For e-Life, only the 'Start Annotating' block will display, the other 2 blocks: Reply/Share, Groups and the 'Ok got it' button are to be hidden.

3. Alignment of 'Ok, got it' button:

There were 2 different proposals for aligning the 'Ok, got it' button outlined earlier (one centered, one right aligned). Let's right align this for now.

[ajpeddakotla]

So @sheetaluk 2 changes that need to be made (to summarize this card):

1. The universal change to the getting started card
2. The eLife specific changes to new getting started card

• blue buttons instead of gray
• remove share and groups text

[dawachan]

I'd like to add that there is a current H version of 'Getting Started' where we talk about accessing the profile (as it is represented currently) and the creating a private group, and there is a future H version which will need to be rolled out when we push the new groups work out and revise the login control. Please find attached below:

eLife is the same:

I feel it's important to mention the various permutations and that they might change over time or on a per publisher basis, because it affects how configurable of a template vs hard coded we make this component. The accent colours for the annotation icon and the + note button etc will need to match the accent colour of the publisher brand.

I can do a detailed font/design spec if needed, but at a high level:

• Section titles/headers: 16
• Body copy: 14
• Ok, got it copy: 15
• add note button copy: 14

I owe you the cursor used in the annotation mockup, and annotate icon @sheetaluk cheers.

[ajpeddakotla]

@dawariley @sheetaluk @robertknight given the time crunch we are under, we will not be making these changes to Hypothesis. We will only be implementing these changes for eLife. We can revisit these changes for Hypothesis when we have more space on the roadmap.