Devlog 3
Made by: Stefan Vandenboorn
What is the problem I want to solve?
How do I create a UI design that is appealing to the target audience without using making things too complicated to understand? Should I only use images to indicate what each option implies or do I have to add text to it as well to make the user understand it better? Should I keep things as tight as possible or make it more cartoony looking?
How will/did I solve this:
(Library and Stepping stones)
First, I've used the CMD methods website to find a good practice to start off with. The option I found out I should start off with was creating a mood board. With a mood board I can create a 'mood' or 'feeling' in which direction I want to go with the design and have a solid foundation to fall back on in case I need to look back at my inspirations.
By making use of the mood board method of CMD I came up with the following result:
I've been looking online for images that are being used for Android games. Since the game we are going to build is going to run on Android and has touch functionality, the design should be appealing enough to the user. They should be triggered into pressing on the UI element that is being displayed in front of them at that moment.
(Workshop)
Since the design must be easy and quick to understand I started creating paper prototype designs on how I want the main UI overlay to look like when you open the game. I went over some design iterations and these are the once I came up with:
My original thought of UI to use was going for either option 7 or 8, with the prefer for option 8. I've discussed this with my team and they told me that Android has a native lay-out and to adjust this you have to reprogram this in Java. So it was basically impossible to use either of those two design options, but option 3 is being used on Android and have been making test UI elements in that setup. So with that new information I went on creating the other UI designs with that in mind. The next one I've created was the hamburger menu.
To keep things simple I tried to keep things on or two presses away for the user so they don't have to keep searching for a specific option they want to use, for example choosing an animal. I had to keep in mind that mainly children will be playing this game and making the menu too complex with a lot of inner-menus would be a bad practice because the child could quickly get lost and confused when using it.
Children also have the option in our game to create their own animal. So I've also created a design lay-out that is easy to use for children of our target group.
The circle represents the different color/pattern type options the children can choose to color their animal with. In the bottom right corner they can see with what color/pattern they are currently painting the animal and on the bottom left the option to save their animal design. The reason why it's all at the bottom is because children around that age are not very tall and can barely even reach the center of the board. This way it is easier for them to control what color/pattern they want and being able to save their progress.
Now that I've finished the design of the hamburger menu the only thing left to do was the options menu.
This option menu will mainly be used by the teacher and shouldn't also take long to understand where all the different options are. We decided that the option menu should mainly control the volume and in what language should be displayed in. With that in mind I've created a design that matches those credentials.
I've decided to create one design first and discuss this with my teammates before implementing it through the entire project. That way if things are not designed the way everyone likes I don't have to change it everywhere again, but instead only have to do it once. This is the first design choice, I've come up with.
The feedback I got was that it looked too much like a jungle and should be more tuned down. So I've made a new design based on this feedback.
I've showed my redesigned UI to my teammates and they were quite happy with the result. We've all agreed to keep continuing this design choice through the entire project for the UI.
What is the result?
What is the quality of the result?
I've showed my end result to my teammates and they were quite happy with the result. I've explained to them how I've setup the UI and that there are some features to be fix from what I've discovered while working on it.
What is the next step?
Continue working on the project while also looking for things that can be improved, not only in the UI but also help other teammates with problems they are stuck on with their work.
Last updated