Dev Blog 6 available here
It’s me Mus, we've all been busy on the project and for the last few weeks, I’ve had my Game Design and a loose fitting User Interface (UI)/ User Experience (UX) Hat on and worked away on UI/UX Design and the Games Tutorial, The Games Tutorial, I will post up another time.
So here we are at the moment, this is the current (UI/UX)
For the last few months while we worked on the project, we work on the UI/ Design, some visual improvements were made, but we created problems, that we could not figure how to fix them. Ultimately, we were never happy, three artists tried and never worked as it was just re-skin of the old UI.
Some early attempts we tried:
Another Attempt and they never really worked:
February 12, 4pm Greenwich Meantime, - it was UI/UX Judgment day.
I remember it well, my colleague turned around to me and yelled, shouted, no, no growled…. Tell a lie, they were frustrated about the UI not working and they were right, it has not worked no matter how many times we re-skinned it. Honestly, at that time I did not take the this info dump at 4pm, as I was exhausted and grumpy from working on a level…. Which took forever. However, I could not stop thinking about, as I knew they were right and it had to be fixed and so started to research and looked at minimal UI/UX designs in Web Design, Interface designs for tablets and smart phones, etc. One objective I had on the back of my mind, I wanted to get rid of clutter and wasted Dead Space which frustrated me and Marked three areas that bothered me.
- Dead Space One was for functions to fill up. Never filled and for the entire game.
- Dead Space Two was where the Axis tool was supposed to go.
- Awkward Dead Space Three is where the Axis tool sets.
Yes, I made a reference to Dead Space games, yes, I like the games and I spelt awkward wrong in the image, let's move on. :)
In my mind's eye, the entire UI was the Canvas, instead of the square canvas. One website really did make me go 'OOOooooh' And that it clicked with me instantly was a great work of web design, and I've added a link below.
http://www.thibaud.be/#WORKS%203D%20&%20Motion/5/
February 12, 5pm, Greenwich Mean time Post Judgment Day
An hour later, I proposed the new solution to the team and they liked it. I brushed off my Game Design Hat and bought a UI/UX Design Hat, which was two sizes too big and I need to grow into and for the next two weeks, I worked on UI/UX Design Document……. It’s one thing having an idea, it’s another when you have to document the idea.
We wanted to have the functions grouped into categories, as a wall of functions is overwhelming and daunting. A two tiered system was created with Tool Menu, and Sub Tool Menu containing the grouped functions, it's a happy medium and any more layers made it complicated.
So eventually I came up with this.... Tada! Yep, I know, it does not look exciting. Currently it's the sketching/wireframing bit, so art stuff not yet.
So the Current layout, the whole UI is the Canvas
- Bottom left is the Info Icon - A feature we would like to add in.
- Bottom left next to the Info Icon, is the Axis icon, Which is dynamic icon, as it will pivot and rotate on its axis.
- The Blue Squares on the right is the Tool Menu, where all the functions are kept.
Layering the UI,
I had to break the UI down into layer order and make sure what would be at the base and what would be at the top. A simple thing really, but again, it had to be written down, these things have to be written down... Remember, written down, with diagrams.
The Tool Menu
The tool menu is menu you can open up anywhere on the canvas and hide, I wanted to have the Tool Menu to fold out like paper and open up like a flower. However, while working on the Tool Menu, what had become apparent, was that the text on the Tool Menu was boring.
I couldn't help it, I had to do something about it, so I created the icon designs. The justification for this was to make it easier for the player and just looked dull. I had to do a little research what would the icons be, some were easy, some were challenging, for me, as when I hear Vectors, I think of illustrator and Vector, not Programming or Math related definitions, so I had to ask a fellow programming friend to try and get it right.
Once the Icons were created, I replaced the text in square boxes and it made a marked improvement.
Sub Tool Menu
Sub Tool Menu is where the categories of functions are contained and opens up over the Tool Menu....I think I said that right.
I did think about doing an icon for each of the functions, however, it occurred to me, that there are way too many functions to do, so I kept it simple and kept it the same as how they would look like on the canvas.
Folding
This part was figuring out how the Menu's would open as I have mentioned before, I wanted the Tool Menu to open up like paper folding out, or a flower opening. ....... Are you still with me? I hope you are, as sometimes I ramble on and well might lose the point.
The last couple of weeks has been tough with so much writing, creating wireframes and thinking, But I am glad we had our Judgment day (Meltdown) with the UI, as we would have never come up with this, ..... And I know that I missed something, someone is going to tell me, I know. Over the next couple of weeks the new UI/UX gets implemented and we'll have some working screen shots and gameplay videos to show..... I hope. :)
I really need to go, my team needs me.
Mus