Mock-Ups In Unity (Part 2)

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.