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

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.

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

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.