My responsibilities

• Design a solution that integrates Help Center content to aid in completing tasks
• Align content to compliment a screen’s tasks and features

Constraints

• Enable Help content to be in-context available at every scroll point.
• Allow for Help content larger than what would be appropriate in a tooltip.
• Must not obscure elements on the page.
• Can be desktop-only.

Guiding Insights

Insight 1 : Help is only accessible at the top of the page. Many people will be using the site and not see a Help option when they face an issue or see unfamiliar vocabulary

Insight 2: A click on the Help button changes the current screen to the Help center with no prompts to save your work. To access Help the user must abandon the task at hand.

Insight 3: People who click Help on a particular page tend to need Help for some feature or vocabulary on that page.here… Thus, these became the principles for this feature:

• Contextual - the contents of the sidebar be dynamic and contextual, ever-relevant to assist the user in the task-at-hand.
• Sidebar - presented alongside, at every scroll point without obstructing the task at hand.

Challenge : Placement

One of the goals was to make sure our placement of the Help button that will open the sidebar doesn’t occlude elements on the page. We created a heat map of the pages in the application with their interactive elements shown in red. Compiling all the screen’s heat maps into one produces the following image which guided our placement of the button and sidebar.

Takeaway:The bottom right corner, a common placement for similar elements, was wrong for the design language of SenseAware. The best placements are indicated in the image below.

Testing

Here’s a collection of feedback we received and changes we made in response.

“ I didn’t see the Help button until I really focused on it. The white just blended in with everything else.” Response:We changed the color from white to a very noticeable shade of orange.

“ The Help button is getting in the way. Is there a way I can close it? “ We worked hard to make sure the button stayed away from primary buttons on the app’s various page layouts, but a few items of feedback supported the idea that we should allow the Help button to be removed entirely, at least for the user’s session. Response:We added a close option and we also made the button smaller in size, giving it a smaller footprint on each page.