#finalui

This was my first attempt at making the IOS icon for the app, I thought it looked a little too plain and didn’t reflect the sort of style our game goes for clearly enough

This is the final design for the drag and drop food web minigame. We needed something to test the user’s engagement with the game so we thought having something where the user can create their own food web would be a good way to test them. It’s one of the main aims of a lesson teaching food chains and ecosystems, for the student to be able to make their own food web. I used the same icons for this as the ones using the population and created some new ones for the bear, beaver and the coyote. The circles hinting where things go have the key words I’ve talked about before, those key words are used in the info box in the main screen, if the user reads the different info box text then it should be easy for them to know where to place everything. I decided to label the animals because the user could get confused between the coyotes and wolves because they look very similar.

This is the How to play screen, I thought to make it more clear for the user I’d include a diagram showing what everything on the main screen is so it says that the play button advances the screen a year, the buttons next to it add corresponding variables to the scene, the info box describes what’s happening on the screen, the spiders web button above it brings you to the screen that lets the user create a food web based on what the info box teaches the user and the icons on the top show the population of each variable. The text next to it is a simple synopsis of Biostasis which was written by Cameron.

This is what the final main screen looks like. On the bottom left I have put all the buttons that add the corresponding variables then added the info box and food web button on the right hand side. The shape and shading of the food web button takes very strong inspiration from the Metro UI framework especially with the shaping of the info box. I originally wanted the buttons to be in the middle but that made it difficult to place the info box, it either made the layout of the UI asymmetrical which would be a sign of bad layout design because it didn’t stick to the rule of thirds or the Fibonacci sequence either. I chose to put the population counters at the top because they’re clear and out of the way of where the main activity happens on the screen, it also helped balance out the bottom heaviness of the other assets all being at the bottom of the screen. I did try and see what the counters looked like going down the left side but because the area for activity to happen is reduced greatly because of the info box and buttons (this isn’t a design floor because they need to be this size to be readable on an ipad screen). The population icons are more clear when they’re up at the top as well because of the lighter toned colours of the background in contrast to the icons.