• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Clinical Encounters

  • Home
  • About
  • Blog
  • Contact
Home › Development › User Tutorial Design

User Tutorial Design

Aug 10, 2018 | Cassidy Tebeau

First Time Experience

When you open software or join a site for the first time, you are greeted with some form of a tutorial or first-time startup to introduce you to the features or guide navigation. Even if the program is visually-intuitive or is entirely based on widespread navigational and interactable systems, the system still has a first-time walk-through to make sure a user doesn’t feel lost, or worse, abandoned. For Clinical Encounters, we got to the point where we needed to create a kind of tutorial or “quick start” guide for both the Reader and the Writer so we could explain our program to new users and funnel them directly into the creating or reading sides of our product without getting caught up in the Main Menu.

What Drives The Design

Example of the “interactable” blue color on a button from the tutorial

The first step to designing a tutorial or quick-start for users is determining how it will affect the overall experience. We didn’t want to make the tutorial too long and lose the interest of the user before they even had a chance to try out the product. We also didn’t want to overload the users with too much information at one time and risk them getting overwhelmed, leaving them with a feeling that the program is more complicated than it actually is. We had to get the perfect middle ground for getting the user enough information to start in only a few pages.

We were able to make the Clinical Encounters tutorial short and not overwhelming by just focusing on giving the user enough information to get into the program and start using it. Once they are in the program, we can start to teach them more in-depth ways to use the program without the use of a tutorial overlay, via conventions and consistency.

Conventions are important to those who are familiar with computers and other software. Throughout the tutorial and Clinical Encounters, in general, we made sure to utilize familiar phrasing and icons so we would not have to take the time to explain every single thing. For example, we added a question mark to the upper right-hand corner that when clicked will open up the help overlay. Having a question mark lead to a help menu is a well-known and widely used convention.

The blue on dialogue choices

Consistency helps carry on learned behaviors and doesn’t require a user to relearn similar behaviors. Within Clinical Encounters, we use the same blue color to indicate that something is interactable. We show this off at first by having the majority of the buttons a user interacts with being that blue color right at the start. Later in the program, when the user sees that blue color their mind has already made the connection that blue means “interact”, and so even if the item is a drag and drop panel or a dialogue choice the user will know to interact with it without us having to prompt them too much.

User Testing

Interactable Highlight

It is important to remember to test tutorials or run designs by other people while creating them. Though this seems like an obvious step, especially when creating a tutorial system, it can sometimes be overlooked. As we were setting up the tutorial, we added yellow highlight boxes around areas of the screen that I was referring to in the tutorial text to draw the user’s eye. The first overlay of the tutorial was about navigation so users would need to click in the area to navigate to the proper page and get the next tutorial overlay. When we showed the tutorial to our teammate, he pointed out that because the first time he saw the yellow highlight box it was intractable, he tried to click on them whenever they appeared, even if the tutorial text gave no instructions to interact. After pointing that out, we changed all of the non-interactable highlight boxes to white, and the problem completely disappeared. Sometimes all your design needs is a slight change to make it work.

You can read more about the Clinical Encounters platform at its website.

Category: Development Tagged: dev-blog game-based learning

Health Impact Studio logo

About Health Impact Studio

We are a dedicated team of developers and researchers with the mission to improve the health of individuals through novel technology including games, virtual reality, and role-playing simulations. We welcome input from the full range of stakeholders to create a customer experience with the broadest applicability to improving health outcomes.

Clinical Tools – Spring 2021 Digital Health Awards® Winner

Jun 8, 2021

Clinical Tools Wins $200K SBIR Award to Decrease Vaping Behavior in Adolescents and Young Adults

Sep 30, 2019

Mindfulness and Patient Communication

Nov 19, 2018

Previous Post: « Catering To New Users (Without Ignoring Old Ones)
Next Post: Mock-Ups In Unity (Part 1) »

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Cassidy Tebeau

Cassidy is a UI/UX Designer who graduated from the College of Charleston with a Bachelors in Anthropology and a minor in Computational Thinking. In her free time Cassidy enjoys playing and designing video games or taking her dog for long walks.

More Posts

Primary Sidebar

Keep Reading

  • Clinical Tools – Spring 2021 Digital Hea…
    Jun 8, 2021
  • Clinical Tools Wins $200K SBIR Award to …
    Sep 30, 2019
  • Mindfulness and Patient Communication
    Nov 19, 2018
  • Contact Us
  • Copyright & Reproduction Guidelines
  • Privacy Policy
  • Terms of Service
  • Technology Requirements
  • 508 Compliance

Footer

developed & maintained by
ClinicalTools

The Clinical Encounters Training Group: SBIRT Training | BupPractice | PainTx Challenge | CE:Vaping | CE:Alcohol | CE:Obesity | Lift

Clinical Encounters | Reader

Clinical Encounters | Platform

Group Training

  • Facebook
  • LinkedIn
  • Twitter
ceplatform@healthimpact.studio

101 A Market St Chapel Hill, NC 27516
919-960-8118

Contact Us

© 2023 · Clinical Tools, Inc · Log In

Walkthrough of a Clinical Encounters | Decisions Interactive Patient Case

Sign up for our Newsletter!

Want to keep up to date on HealthImpact.Studio developments? Enter your information below and we’ll let you know when we have new products or open research studies, and what we’re working on for the future.

  • Hidden
Log In

Forgot Password?
Register New Account
Don’t have an account?
Register now!
Register
  • Hidden
  • By registering, you agree to the Terms of Service and Privacy Policy. If you are a part of a group, you understand your participation information can be provided to the group organizer.
  • This field is for validation purposes and should be left unchanged.

Welcome!

If you have an account, please log in! Or create an account now!

Create an Account!