DesignAday

The Top Reporter

There were three project teams by the end of the semester, each working on its own game. I was purely coincidence, but I was pleased that they three games are completely different. The Top Reporter is a party game in the vein of Cranium and Pictionary.

Make sure your teeth are whitened, and your hair is brushed because the National News Network Association (The NNNA) has opened up a primetime spot on National television for one lucky news crew to do an hour-long report of their choosing. You will be put through the toughest challenges a reporter can face to prove your worth to the NNNA.

You will be tested on Weather, Breaking News, Sports, and plenty more. There is one thing your crew has to understand: news happens at anytime and it can be about anything. So, ready your team to out-broadcast your opponents, and try not to lose focus.

There are four challenge categories, each represented by its own deck of cards. Live in 5 requires players to report on random topics for certain periods of time, sometimes stipulating that it be done without laughing, or requiring them to incorporate specific words.

Learn the Lingo tests players’ knowledge of journalism vocabulary, or may ask them to write news story titles within specified parameters. Co-Anchor presents news-related trivia or pits teams against each other in an attempt to pass off the story, “Back to you!”, and not be caught reporting when the timer runs out. Where’s the Weather? finds players standing in front of a US map, trying to remember in which state Tuscaloosa resides.

The team did a good job theming the game, providing props, like a microphone, that helped players get into character. There were still plenty of issues to be worked out with the challenges, and it could probably be shortened significantly, but the game provided a fair amount of variety in the challenges and loads of laughter. It went over well with the mostly college student playtesters.

In the Details: Make up your rewind

I’ll occasionally use the frame animation palette in Photoshop to create an animated GIFF, but most of the time I use it to save different states of a screen mockup in one file. Adobe is blatantly inconsistent with the iconography used for the controls in the palette.

There are four arrows controlling playback. The single, right-pointing arrow starts playing the animation. This is appropriate, as a right-pointing arrow has long been a standard icon for “play”. The single, left-pointing arrow moves back one frame. This is acceptable, as one would not expect to be able to play the animation backwards, though I would have preferred a symbol that didn’t so closely resemble the play icon. The double, left-pointing arrow displays the first frame of the animation. Double-arrows are long-time standards for “rewind” and “fast forward”, so this too makes sense. One might expect, then, that the double, right-pointing arrow would display the last frame in the sequence. However, this is not the case. That button merely moves forward a single frame, much like the single, left-pointing arrow.

A better use of standard iconography would have been something like this:

Lazy Genericism

Bootstrap is a beautiful piece of work, no doubt. It makes flexible and responsive grid-based layout a piece of cake. It provides transitions and dynamic behaviors without a sweat. It even provides clean, contemporary aesthetics in pre-made components. Add Glyphicons or Font Awesome and you have a web app that will satisfy the CEO built in no time flat.

Of course, you used an accordion panel instead of coming up with something better, because it was easy to do. And the select widgets aren’t exactly what you had in mind, but they were there. Add you used a non-descript document icon for “Add Properties” because there wasn’t a better icon in the set. Oh, and it looks like every other site built with Bootstrap because you started with one of their templates, and you just didn’t take the time to do much customization.

Yes, Bootstrap and its cousins are wonderful things. We should take advantage of them. But please, I beg you, don’t fall into the trap of quick and easy. Don’t forget that your user interface is your brand. Excellence will not be found in lazy genericism.

Race Conditioning

My Nissan Cube has a peculiarity that has conditioned me to behave in a certain way. When I have passengers in the car and we reach our destination, as soon as I have put on the brake to stop the car in my parking space, I go into race mode. I try to put the car in park, set the parking break, turn off the ignition, and remove the key from the steering column before anyone attempts to open their door.

The doors unlock when the key leaves the ignition. Until then, if you pull on the door handle, the door will not open. There are manual buttons to unlock the doors, but they are built into the handles in a way that they are not obvious.

Before I was conditioned to race, my friends would try to get out of the car and have a moment of confusion as to first, why their door wouldn’t open, and second, how to unlock it. Being sensitive to the experiences people have around me, I subconsciously began trying to get the doors unlocked before they tried to open them. I now do this habitually.

Carnival Murder Mystery

My Game Design class wrapped up last Tuesday. I’m declaring it a success. I’m very pleased with the work that was done, and my students claim to see a lot of value in what they learned this semester. On top of that, it was an awful lot of fun to teach.

One of the three teams was working on Carnival Murder Mystery: a board game for 2–4 players.

Step right up to the Carnival Murder Mystery! Be cautious and alert as you and your fellow detectives investigate the grounds of this frightening carnival. A body has been discovered and it is up to you to uncover this horrible mystery. Use the clues you find along the way to eliminate the alleged suspects. Be the first detective to solve this chilling mystery. Enjoy your ride!

Inspired by the game Clue, Carnival Murder Mystery has players figure out who the murderer is, the weapon they used, and the location in which the murder took place. The students attempted to take the gameplay to a new level, however, with a more complicated logic puzzle. Players must move around the board, visiting locations to claim clues, some of which will be kept private. There are also cards that allow players to sneak a peek at one of their opponent’s clues.

The spaces with magnifying glasses are the ones that contain clues. After landing on such a space, the player draws a clue card and marks off the space with a whiteboard marker, indicating that the clue has already been confiscated.

The game includes investigator cards that players can use to keep track of the clues they have uncovered.

It was a real struggle for the team to move the game away from being a Clue clone, and it could still be improved. Their clues were relatively simplistic, and they could easily develop a more engaging narrative with them. But, the game is quite playable, and they received a lot of positive feedback during their playtests. The board creates a bit of a race dynamic to get the clues, which Clue doesn’t have, and there are many more variables to track. The team did an outstanding job developing a dark, creepy aesthetic for their carnival, and I’m satisfied with the results.

Microinteractions

Dan Saffer’s new book, Microinteractions, is now available. I received mine from Amazon on Friday. This is not a book review, though I’ll likely write one later. Between Mother’s Day activities and getting my grades submitted, I haven’t had time to read the book. I just wanted to take the opportunity to give the book what little publicity DesignAday can offer. If you enjoy my In the Details posts, you should like Dan’s book as well. This is taken from the acknowledgements:

Jack Moffett, writer of the “Design A Day” blog, should also get a nod of appreciation. Not only did I draw many examples from his “In the Details” section, but how he dissected those details has long been inspirational to me and led indirectly to this book.

I want to thank Dan for that. I get a great sense of satisfaction knowing that my writing here is respected by, and occasionally inspirational to, the very designers that have inspired me.

One recommendation: get an electronic version of the book, if you can. The pictures, of which there are many, are printed in a rather poor quality grayscale in the paperback.

In the Details: Tabs

I’m still acclimating to Adobe’s CS6. I think I like Photoshop’s new, dark gray color scheme, but there are some quirks that have been tripping me up. For one, I keep clicking on the wrong document tab. Realizing that I was doing this repeatedly, I analyzed the UI to figure out why.

In this screenshot, I have two documents open. One tab represents the document with focus. The other tab is the one I want to click on to switch focus to the other document. Adobe’s designers decided to make the current tab brighter. The background is a lighter gray than that of the other tabs and the text on it is a light enough gray to appear white. It’s a relatively high contrast. The deselected tab, on the other hand, has a very dark gray background, and the text is a dark enough gray to recede. This works okay when there are more than two tabs, as it is easy to tell which tab is different. It stands out from the others.

As you can see, though, I have only two tabs. I’ve been clicking on the already selected tab more often than not. I think I know why, and the reason, interestingly enough, is skeuomorphic in nature. If you think of a tabbed manilla folder, or the tabbed dividers in a library’s card catalog (remember those?), you’ll realize that traditionally, tabs were part of a larger whole and shared the same color. Tabs within a UI work best when they share a background color with the area that they represent.

Adobe made the background of the deselected tab match the background color of the area below it—the very area that the tabs represent. The text in that tab even matches the color of the text in the ruler. The background of the selected tab matches the bar above it, and the text in that tab matches the text on the bar. Color, brightness, and contrast associations all point to the darker tab being connected to the currently viewed document.

My mind subconsciously makes these connections, and I go for the tab that my brain has decided is disconnected from the current document.

The Power of 10

2003 saw the humble beginnings of what would eventually become the Interaction Design Association (IxDA) in a Yahoo! mailing list. I don’t remember for certain how I first learned of it, but IxDA.org has me pegged as a member since January 4, 2005, but I’m sure I was already participating in discussions in 2004. I was several years out of grad school and hungry for interaction with other professionals in my field. I craved intellectual discussion, and that’s where I found it. It was in December of 2005 that I co-founded IxDA Pittsburgh, one of a handful of the earliest local groups to form. Since then, I’ve attended every Interaction conference, and I consider myself fortunate to have made the acquaintance of a lot of very smart, extremely talented people. The organization has been an enormous benefit to me, and through me, to my company and my students. For all of that, I probably would not have joined had it required a membership fee.

IxDA has been, until last year, a completely volunteer-run organization. All it takes to become a member is to say, “I’m a member of IxDA!” Today, the organization began a 10th anniversary pledge drive.

Since 2003, IxDA member support has been at the core of our exponential growth and development as a global organization. From the very first email discussion list to formalizing the organization’s mission, operations, and governance, to local groups around the world, to programs and platforms where our community can meet and share ideas to advance the discipline of interaction design…YOU are the members who come together as a vibrant community in support of our goals.

As we celebrate our 10th anniversary, we can look back proudly on the ambitious goals we have accomplished. Looking forward, we are actively planning for sustainability as well as continued growth. Help us seed an even stronger foundation for the next 10 years of IxDA!

If you are a member of IxDA, I encourage you to show your support. If you are any type of UX/design professional and are not a member, you should check out what IxDA has to offer and get involved!