Tuesday, April 17, 2012

The Evolution of a User Interface

I never quite realized how much thought went into the programs we use every day until I joined this project. Most things in a program or game seem reflexive, normal even when you use them. Things such as tabs in a web browser to the X button for closing a window have all been carefully crafted over time by people trying to figure out how they themselves would do something. Even outside of a computer, think about the buttons you select on appliances, in your car, and basically everything. It's all about usability and how people interact with things.

Our game initially began with a simple concept: taking pictures in a museum. To represent that, we needed a way to have a camera, a way to show pictures taken, museum rooms to go in, navigation from room to room, and a way to play photos in challenges . Sounds easy enough doesn't it?

The Camera

Probably the only thing that survived through all iterations of this game is the camera itself. This game mechanic was inspired by a game called Pokemon Snap. We needed to represent the camera in a digital space in a way that would be familiar to children. Cell phone or Smartphone cameras became the inspiration because they already did what we needed them to do. When entering a room the players mouse turns into the reticle on screen for them to take pictures. For taking a picture, the reticle is white but changes to a green while playing a camera click noise. The color change and camera click were necessary because they provide feedback to the player that they are actually doing something. It's the most obvious example of feedback but people truly need positive feedback to keep going. Think about how much fun Portal would have been without your portal gun making noise when you fired it or if Mario didn't have all those little flashes to indicate if you were getting hurt. There are so many little things in games that let you know if you are doing something right or wrong that are very important to the overall experience.

The Pictures

Next question, the player has taken a picture now so where does that go? On a camera you can just select the menu button to browse your photos. Our pictures are different however because they have special characteristics that a player needs to be able to see at all times. That immediately removed the idea of a separate window to view the photos. At first, the photos were always on display at the bottom of the screen in the Collection Widget area. That way the player would always be able to see the information on the photo for when they would come across a challenge in the museum. Recently we reworked the whole game to the point where we had more information we needed to show on the photos than in the original. The extra information led to a collapsible photo area at the bottom of the screen. The photos and the name of the artifact in the photo are always visible but if a player needs to see the photos information, they can click any card at the bottom to toggle up full view cards. Along with being able to see the whole photo with information, players can click a small X in the right corner to delete a picture from their collection.



The Museum

Originally the game was designed to have 12 exhibit rooms that would be randomly assigned from a pool of 20 exhibit rooms. This was inspired by a board game called Betrayal at House on the Hill. Betrayal uses a modular game board mechanic in which there is a stack of room tiles that each player uncovers as they explore an old mansion. This allows the players to build a different game board every time they play and drives exploration. We tried to replicate that idea in our game by having a map of the museum that starts you off in one room with unknown grayed out rooms around it. The player can click on any room around it to go to that room and have the exhibit name revealed. This was also going to play into the Challenges by not knowing when one would show up on the map. We had used a small lock icon to represent rooms with Challenges. However all that did was make play testers think they could not click the locked room, thus preventing themselves from attempting challenges. Through visiting with the Indianapolis Children's Museum we realized that we needed to scale down the game. We were trying to put too many rooms in the game and too much on the map that were confusing play testers rather than keeping them engaged. Changing the scale of the game by shrinking the map down to 6 rooms that do not change was the first step. Instead of being exhibits, now the game actually takes place in the collections or storage area of a museum. That still gives the exploratory feeling we wanted while letting the player go behind the scenes and look at things not currently on display. Rooms the player can currently visit are highlighted and rooms further than that still use the lock icon. To represent challenges an exclamation mark icon is used and the map now has a key on it to remind players what the icons mean. The one thing from this that lasted what the use of a star icon to mark your current location on the map.




At first I'm sure we all had grandiose ides of making an elaborate 3D game in which we could physically move through spaces. The time we actually had to do this plus one person who could draw everything made us quickly realize it was not something we could really pull off. This is why the use of a map came in. It was the simplest way we could represent a space in 2D. The use of a map however presented a dilemma on how the player would actually enter a room from the map. The first way we tried out was to take the player into a room the instant they clicked on where they wanted to go. Then we had to think about how they would get back to the map from the room. Solution: a map toggle button in the room. Previously when we had a crazy huge map we also had multiple challenges in the museum along with a final challenge that involved luring a mummy back to the Egypt exhibit. The map toggle would have worked for the first few challenges but would not have worked for the final challenge because you had to be able to see the mummy move on the map along with playing photos to feed him. Changing how the map button would toggle on and off for the final challenge alone would have been a bad idea because it would have been different from what the player had learned to do in the game already. We never got to the point where we implemented the mummy challenge because of feedback from the Children's Museum again. We told them about that challenge but also mentioned a Curator challenge from which the player would have to present a good collection of photos to a Curator at the end for approval. From that alone the game became what it is now and we were able to keep the map toggle button for use in a room only.


The purpose of taking photos in the museum was that they had certain characteristics that could be played against Challenges that popped up. The Challenge UI needed to have a place for these photos to go along with a way for them to be played from the Collection Widget Area. Originally photos were always visible and to play a photo you would click the photo for it to slide up a few pixels, similar to the digital version of Hearts. That allowed us room for Challenge text on screen and some fun artwork to go along with it. When we had to somewhat overhaul the game, this completely changed. The way I previously mentioned photos being handled and displayed was purposefully created for how the new Challenges work. There is now an on screen dock area for which clicked photos are animated into when they are played. Along with that we have given the players a clear button in case they want to play a different photo in the challenge than the ones they've already played. There was also still room in this version for each Challenge to have artwork of a Curator displayed on each side.



Honestly all of this really only begins to scratch the surface of what we have done to get to where we are now. There are so many tiny details and things people do that you don't realize until you watch them interact with what you have created. No matter what you do when designing things for people, many more questions and issues will come up along the way. That's why accepting that it won't be perfect the first time is key to this whole process.

No comments:

Post a Comment