Before & After – Judgment Call Interaction (with Story file)
BEFORE- the original contentThis is one interaction from a huge, high-visibility orientation course on workplace attitudes and behaviors initially developed by a junior developer in our group. The concepts are fundamentally sound, but the graphics and flow had opportunity for improvement during our conversion. Let’s review the original (text blurred to protect the organization’s material).
Intro Screen (not shown)Standard scenario intro setup using an Articulate character: “Meet <name>. He just overheard a conversation between his manager and a home office employee.”
InteractionThe interaction concept is simple. The main character overhears a conversation where his manager and a home office employee are planning to do something legal, but not consistent with the values of the organization. He has several courses of action he could pursue, but really needs to distinguish between good and bad ideas he is considering. The original designer put in an animation. The left half of the screen renders to introduce the scenario and show the conversation. Then, the right half displays the main character and the interaction. Despite the use of animation, the design falls into the common trap of “flat design thinking” I mentioned in my previous before and after post. The end result is too much on the screen at once. Only half of the real estate is dedicated to the interaction, which is the purpose for this screen. The design of the “idea boxes” was not immediately intuitive to a some users and the boxes sizing did not distinguish them as clear drop targets for the interaction. “Tonight, the role of the submit button will be played by the next button”… On virtually every screen of the course, the right pointing arrow is for navigating to the next slide. One some interactions, the next button suffers this identity crisis. There were a other opportunities to improve the interaction. These are easier to see in the following screenshot: [list style=”arrow” color=”blue”]
- The size of the thought bubbles overflow the drop targets as well as the stage area.
- Thought bubbles do not need to be dropped on any valid drop target to submit the interaction (for example, you can just drag it over the main character as shown).
- Once the first item is dropped on a drop target, you can no longer read the name (as shown, you can no longer determine which box was for a good ideas, which one was for bad ideas).