wiki:Final UI design

Final UI Design

General UI

For the final version of our user interface, our group wanted to reflect the suggestions and lessons learned from our user tests. We kept the same fundamental layout from our previous versions, however we updated the content greatly.


The board is the user's primary focus as he or she places various organisms and devolops their ecosystem. Lovingly referred to as "Ecoville", the board allows the user to quickly see what he or she has already done in a given level.

The board will display all of the organisms that the user has already placed, thus giving them a clear picture of their progress. As the board becomes more full, the user will be able to see their progress. Additionally they will be able to see the diversity of organisms that they have places.

One of the principle lessons from our user tests with respect to the board was the simple fact that initially, the user had difficulty distinguishing one cell from the next. This was due to our small cell size and large organism size. This was easy to change and we simply made a larger board. In our prototype, this feature was already present, however we had not reflected it in our UI design. Other than this, our board did not present any trouble to the user and we did not need to change it throughout our process. The users greatly enjoyed the art that we had and they thought it refelcted the overall spirit of the game.

Moving forward we hope to add different terrain to the map including but not limited to water, mountains, and rocks. Also, if we have time, the ability to zoom in on a specific region of cells would be a good feature to implement.

Top Panel

This is a central component to our game and one that user will be accessing frequently. They user must select their organism from this panel as well as find information about each organism.

Main Panel

Herbivore Panel

Our first iteration did not clearly communicate to the user how to access more information about a given plant or animal. In our final version, we have improved this by changing the layout of our "more information" button. After testing this with the middle school students, we found that they quickly understood how to access the organism's information. Additionally, we will look to include a direct navigation to the "more info" section when incorrectly placing an organism. This is due to a slight disconnect between seeing that a given animal needs more food and the user not looking up how much food it needs. As we look into creating more intuitive designs, we will most likely change the botton layout, however after the success of this prototype, no major changes should occur.

Message Board

The key method for the game to communate with the user, the message board displays messages during gameplay as well as during the initial tutorial.

The message board will also have the responsibility of displaying the initial tutorial to the user. It will ingtroduce the user to the game and then walk them through the process of placing organisms. To a sample of our tutorial please access Tutorial.

When the user is trying to place oraginsms on the board we use the four messages below to either let them know it was a success or that they incorrectly placed an organism. This will be running in tandem with the game logic. When we used these for our user tests, the middle school students were very receptive and were quickly able to realize what they had done wrong. In the future, we will look to link directly to the more info section from here.

More Info Box

As the primary interface between the user and our information database, this component of the game must suplement the massage board and allow the user to access more details about a given organism

The above images allow the user to not only learn about each animal, but also to see what the requirements are placing a given animal. After each set of testing we revised the information and look to continue to do so. When the middle schoolers tested them, the studeents were able to gather the necessary knowledge and did not have problems understanding the concepts. Additionally, they were able to find the requirement for placing organisms. Thus, our information boxes were very successful. We will be adding the specific knowledge that the students are required to learn as we further develop our learning goals.

Overall navigation

The overall naviagtion of the game is intuitive and straightforward after playing through the initial tutorial. After our first revisions of the message board and UI, the testers were able to quickly learn and understand the short term goals of placing organisms. Similarly, they could understand the mid-level goals of placing different types of organisms. This was not the case after the first round of testing and we expanded our tutorial to cover this aspect. Along this same vein, one option we had was to make the tutorial longer and more in depth. However, after seeing how the user responed to a long stream of clicking "next" we reduced the length of the tutorial to a just a few slides.

It took the users some time to learn the larger goals of the game. However, after we updated the tutorial, they quickly saw that they must add a human to win. This led us to talk about making the tutorial manditory, however we decided that user might be returning to the game and already know how to play. Therefore, we decided to keep the tutorial optional.

As we look to expand the game, we might include some of the suggestions to expand this goal to include multiple humans or different types of endings. Also, to reduce some of the confusion when placing organisms we will look into giving the user a preview of which spots are availible to place a given organism. For instance if they were to select the cow, then all cells that contain legal moves will light up green and the rest will be grayed out. Additionally, we discussed graying out the organism types that could not legally be placed. In other words, if no plants had been placed, the herbivores, carnivores, and omnivores would be grayed out.

Last modified 3 years ago Last modified on 02/28/2012 01:09:43 AM

Attachments (16)

Download all attachments as: .zip