before & after, storyline

Before & After – Office Environment Interaction (with downloadable Storyline file)

Presentation1 I’ve been a a flurry of development due to an acquisition. I’ve had to convert a LOT of content, and sometimes when we convert, we use the opportunity to put in some improvements.

BEFORE- the original content

This is one interaction in a huge, high-visibility orientation course on workplace attitudes and behaviors (so, yes… there are many before & after items coming soon). This was initially developed by a junior developer in our group. Generally speaking, the concepts and interactions are fundamentally sound, but the graphics and flow could improve. Let’s review the original (text blurred to protect the organization’s material).

Intro Screen


No issues here. A straight up simple intro screen.



The user identifies 5 things to change in the workplace. Correct answers are highlighted green. Incorrect options are highlighted red.

The first thing I noticed is a common issue- “thinking flat”. I am not talking about flat design (which I am fond of), but the inability to think of layering content and using timing/animations to progressively display information. Many junior designers work to fit everything on screen all at once and don’t think to user layering. In this case, the choice limits the real estate for the interaction and makes the screen look busy. Another issue I wanted to address was the identity confusion of the “next” button as a submit button. The click interaction has: [list style=”arrow” color=”blue”]
  • 5 correct answers (wrong nametag, unlocked file cabinet, deadflowers, overflowing trash, and the stack of papers on the desk)
  • 3 incorrect options (2 pens on the left that select as a group, the pen on the right edge of the desk, and the man and computer that select as a group)
[/list] There is no way to click any additional areas (such as the files or papers left out in the back office or the day planner). The active areas display the select (hand) icon on hover, so it telecasts the click opportunity on these select zones. There is only one attempt at the interaction before you receive feedback: “Correct” or “Incorrect”.


The immediate feedback triggered essentially says “nice try, but there are different things that should have been selected”, and prompts the user to go to a summary slide which shows what should have been selected. Correct feedback essentially says “Nice work – you found the items” and prompts you to go to the same summary slide.   feedback1 The interaction is all or nothing, so if the user gets 4 of 5 correct, they get the same score and feedback as a user who selected only two incorrect items and submits the interaction (which will submit even if just one item is selected). I see a lot of opportunity to tighten the interaction and feedback to really help the user.

Summary Screen

Once the user clicks “Continue” from the Correct or Incorrect feedback prompt, they go to a summary screen with a hover interaction. These interactions give the users details on the 5 correct items. The first thing I noticed is that it said “Congratulations on identifying the five things…” even if the user got to the screen from the incorrect feedback prompt when they didn’t select the right things. feedback2 Despite the issues, there is truly some good raw material here. With a little tightening and polish, it can really bring out the best in the interaction.

AFTER – the revision

[button title=”click here to see this in action” type=”linkbutton” color=”blue-lite” url=”” target=”_blank” ]

Intro Screen


Different graphical treatment and added animation.


interactionrevision Where the Intro screen brought only cosmetic changes, the interaction brought significant functional changes. Every area of the screen (excepting the prompt) is clickable. Clicking an incorrect area gives incorrect feedback. Clicking one of the 5 items does three things:
  1. it checks the item and changes it to an inactive state so it can’t be selected a second time
  2. it triggers a running counter of the number of items found
  3. it prompts feedback specific to the item found

Feedback – specific to the click


Feedback provides a running count and feedback specific to item clicked.

Summary screen- removed

There is no need for a summary screen dedicated to guide users through the 5 items at the end of the interaction, because the users have received that feedback all along. So, I did something different. When the user finds 5 of 5 items, the “Continue” button changes from “close layer to return to interaction” to “close layer and move to next slide”. It is a simple state change to have the “hide layer” continue button to go to hidden state then the counter hits 5, and the “next slide” continue button to toggle from hidden state to normal. The same trick is used to provide a final message to wrap up the interaction. When you look under the hood, what appears to be complex interaction is truly just some really well played slight of hand to look much slicker than it really is (I know there are many more elegant ways to go about this with variables and/or Javascript).

This was the REJECT- so it is yours!

Yes, you read that correctly.This treatment of the content was rejected, and we went in a different direction with the revision, so the best thing to do is to share it so you can take the functional elements and make it your own. Download the .story file and have fun adapting it for your own interactions! More interactions and examples from this coming soon (just have to remove any company-specific text).