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

Clinical Encounters

  • Home
  • About
  • Blog
  • Contact
Home › Development › Mock-Ups In Unity (Part 2)

Mock-Ups In Unity (Part 2)

Aug 24, 2018 | Cassidy Tebeau

For Clinical Encounters, we had created the Case Writer and needed to develop a Case Reader to display and navigate through the information input into the Writer. To begin this process, we started to make different mock-ups of the Case Reader, basing the design on the Writer, so the team could begin to narrow down on how we wanted the Reader to look and feel when users navigated through it.

Reader Mock-Ups: Round 1

For the first round of mock-ups we created three different versions of the Reader. Our main concern was to figure out an intuitive navigational system that also looked good. We showed these three versions to the team and gathered their feedback and thoughts. We built all three versions on top of some of the structure we had created for the Writer, which saved some time that was then spent on hard coding the buttons to work so we could get a feel for how the navigation would be.

Version 1

This was almost a straight replica of the Writer in terms of the navigational system. The sections were listed across the top bar and the tabs were listed across the bottom bar of the top area. This was the easiest mock-up to create because we could just build it over a copy of the Writer scene we had already created. However, the section icons across the top could be easily missed and therefore didn’t lead to a good navigational system.

Clinical Encounters Writer Clinical Encounters Reader – Version 1

Version 2

We made two different left-side navigational systems on the same basic set up. For both the tabs, associated with a specific section would not appear until that section had been selected by the user. Our hope was that this would make navigation easy and having the sections listed from top to bottom would indicate an ordered way to go through the case. We hooked the navigational system up with a hard-coded button and toggle system so we could simulate how the navigation would feel for the user. The Unity Canvas button and toggle elements are very usable and adaptable without having to add in extra code.

Hiding Sections Collapsible Tabs

Version 3

In the last version for this round, we had the sections listed down the left side like Version 2, but the tabs would populate across the top bar like Version 1. We felt that this would be a nice balance of the two different navigational systems, though we were worried that having navigation both on the left side and across the top could confuse or lose the users. Once we finished these different versions of the Reader, we presented them to the team to get feedback and ideas for new or different iterations.

Version 3

Reader Mock-Ups: Round 2

After the first round of feedback, Version 2 was scrapped. Out of all of the versions we made in the first round, we had spent the most time on Version 2. It is good to remember that even when an idea or layout seems good and intuitive to you, that does not mean it will be viewed the same by others. For the second round of mock-ups, we focused on cleaning up, editing, and adding to Version 1 and 3. We still weren’t committed to one navigational system over the other and we were trying to figure out the best way to utilize the left-hand side bar. An advantage to making mock-ups in Unity is that after the initial framework is in the Unity Canvas, it is easy to move things around and make changes. After the changes, it was back to the team for more feedback and suggestions!

Version 1 – Cleaned Up Version 3 – Cleaned Up

Reader Mock-Ups: Final Versions

After four rounds of mock-ups, different designs, and lots of edits, the team finally decided on using the final version of Version 3 for the Reader. Sometimes all it takes to get won over by a design is just some sizing and color changes. After that was decided, it was just about changing the tabs from having input fields to displaying text. Comparing the version we are using to the way it originally looked shows just how much things need to be changed and edited before they are ready. Even after we started using this version, we made minor tweaks and changes. From Original to Final, the most obvious changes are the sizing and colors. A navigational change that is not obvious when looking at screenshots, but has become important is at the end of each tab there is a button so the user can move to the next tab. On the last tab of a section, there is another button which will allow the user to move to the next section. This navigational aid helps users stay on track and follow the flow of the case in the way the author intended. While developing, you end up staring at the same scenes for a long time and notice that things would look better or more visually-pleasing if there was one or two small tweaks. While the design we picked stayed the same after we started making the Reader functional and dynamic, a few small visual changes took place and has improved the overall design along the way.

Version 3 – Original Version 3 – Final Current Version

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: « Mock-Ups In Unity (Part 1)
Next Post: Creating Different Tiers of Interactive Experience from the Same Content »

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!