The Art of User Experience and Interface

The Art of User Experience and Interface

Disclaimer:

Most of the projects that I will be doing are for a game that I am developing on my own code named Project Ninjio. In short, the game is a story action driven role playing game (common referred to as an action RPG). It features 2 uniquely styled areas, one in which the cities are built to flow along with nature, and the other where the cites are hyper futuristic. The game is set in a futuristic China, where after a large war, the country is split into the two settings described above. The game is built in the Unity 3D game engine.

The Mac operating system's desktop, a good example of excellent simplistic
UI and UX design

Introduction

User experience, often referred to as UX, and user interface, shortened to UI most of the time, both share a pivotal role in the design of not only video games, but software as a whole. Imagine for a second that the Windows operating system did not have a toolbar at the bottom of your screen where you can "dock" your favorite applications and programs. Imagine a second that Windows didn't have a desktop or easy to use file folder that made finding programs and files much easier, rather using a command line system like some of the earlier operating systems used before Apple and Microsoft popularized the idea of a much simpler user experience.

In short, user experience is exactly how it sounds,  the ease and simplicity of doing tasks within a program. Ideally you want the user experience to be as simple to use and as functional for anyone who doesn't want to spend hours typing in lines of dialog into a black screen. The concept of dragging and dropping files on a desktop was something that was not done before Steve Jobs pushed for it within the Apple Lisa computer, better known as the first Mac computer.

User interface, once again, pretty self explanatory. User interface is what you see right now on your computer, it is the images, text, and layout of the information that the computer needs to display to you, the user. Ideally, a good UI would display all of the information that is need for the application along with having a good layout and positioning for those information sets. Because of this, UX and UI go hand in hand because you ideally want your UI to display things in a manner that makes the user experience to be as good as possible.

UI/UX in video games

An example of poor UI and UX design, can you guess the game?

In video games, there usually is a lot of information that the player needs to know practically at all times. There are things that almost all games have to display, like health and experience points, and there are things that are specific to the game or to the genre, like the player's location in an open world game. Because of all of this information, some games have very messy UI that, although providing plenty of information for the player, have a terrible user experience. Another aspect of UI design that most games have to balance is how to not only layout the information, but how to theme the UI to the game itself

UI/UX in Ninjio

Ninjio's UI with a 1920 x 1080 display, the gray represents the player's vision beyond the UI

I have some interesting plans for Ninjio's user interface that would not only fit Ninjio's futuristic setting, but also suite Ninjio's information display needs. Instead of putting the health information towards the edges of the screen, I would like to try to fit all of the vital information that the player needs throughout the game including the player's health, targeting reticle, and a few other key items. Since Ninijo's setting is futuristic in every sense of the word, I have planned for the UI to fit in the center of the screen with blue highlights and transparent parts.

This week's work log:

Monday January 22nd: Viewed some peer end of marking period presentations

Tuesday January 23rd: Viewed some more peer end of marking period presentations

Wednesday January 24rd: Individually reviewed one peer’s progress over the marking period

Thursday January 25th: Finished the new targeting reticle and implemented it into the game

Friday January 26th: Modeled a new Humanity Helper pedestal and started work on the drone

End of Marking Period 2 Peer Blog Posts Review

End of Marking Period 2 Peer Blog Posts Review

After seeing a few of my classmate's end of marking period blog posts, there are a few that really stood out to me as being both interesting and have also shown great progress on their projects. To start out, my good friend Michael has been working on his animation, one that has been stuck in his head ever since I've known him. As stated in my previous peer review, this idea is something that he has had my option on numerous times and I feel personally attached to the project in a sense.

The new animation style (in short, having comic book style panels for each major camera angle with action going on between them) , one of which I have not seen before in a 3D animation that he has come up with is something that I feel will better suite both the animation and the comic book-esk style of fight that Michael is going for.

Another person who I am impressed by their work and how far they have progressed is Areil with her digitally created oil paintings. The ones that she worked on over the course of the 2nd marking period are ones that I would personally hang on my walls... if I have space for them.

Another person who I believe made some excellent progress is Liam with his steampunk fantasy world for his animation. Over the marking period, he finished his landscape for the animation and also started to model one of the towns as well, both of which had a great amount of details and the town itself had some awesome looking houses in them.

End of Marking Period 2 Blog Post

End of Marking Period 2 Blog Post

So, yet another marking period has come and gone by in a flash. In that time, I have made considerable progress on Ninjio. In that time, I have been able to sketch, model, texture, and rig 7 different characters for Ninjio. At the start of the marking period, a character would take over 4 weeks to be completed, however by the end of this marking period, I was able to go from concept (not including a sketch) to completion (fully textured and rigged model) in under a week.

(Note: The areas in pink represent where a facial feature will be, they do not show up in the 3D viewer that I chose. Also, on Wen Nan and Yuan Shi, there eyes are where the textures seem to be messed up... can't fix it in the editor sadly)

Bao Lei (堡垒) 

Character Information

Bao Lei is Winding River's first and only robot that was hand built by Ji Xie, the tinkerer and gadget guy of Gold Water, to help in the fight to unify the country. Originally programmed to help aid with peace talks between Winding River and Jade Gate, Bao Lei has since been reprogrammed to help the resistance in their efforts to stop Huai Ren. Bao Lei is a lovable, floating robot that the whole team at Gold Water enjoys spending time with.

The sketch for Bao Lei

Design Iterations and Inspirations

The original design write-up called for Bao Lei to be a much more rustier and "thrown together" sort of robot, with the mentioning of cables and wires coming out of the body. In addition, the original write-up called for Bao Lei to be a humanoid character, however that was dropped due to the fact that I did not want to design another human-esk character.

The current design for Bao Lei comes from a sketch that I did for a summer camp at Carneige Mellon university based around game design. I would love to show the original sketch, but I am unable to find it. The orginal design also had wheels instead of floating, but I chose for Bao Lei to float as it would reinforce the futuristic setting that the game is set in.

Bing Nu (冰女)

Character Information

Her parents part of the former Swift Water division of Gold Water, Bing Nu knew for sure that when she grew up, she would join Gold Water in some fashion. This plan, however was accelerated soon after her parent's gruesome death that Huai Ren orchestrated. She now seeks a deep and ice cold revenge against Huai Ren no matter what she needs to do.

The sketch for Bing Nu

Design Iterations

A quick fact before heading into the iterations that Bing Nu had... Bing Nu was the first character that I did the full design process for (sketch, model, texture etc). As such, she took much longer than the rest of the cast as I was trying to design the process that I took for each character after her. As such, one of my old blog posts titled The Art of Bing Nu gave everyone an early look at the model for Bing Nu, however the design for her has been altered a little bit.

The original sketch for Bing Nu called for her armor accents to be ice blue, however I felt that the colors needed to be a bit more darker to resemble her want and desire for revenge. The result of this thought was changing her blue accent color to a more darker, red infused, purple.

Huai Ren (坏人)

Character Information

Huai Ren, Jade Gate's charismatic leader, makes for an interesting opposition for the members of Gold Water. Huai Ren keeps a tight over the happenings of Jade Gate but still manages to keep the creativity and innovation within Jade Gate to high levels. Although the grip of Huai Ren over the entire city seems like something that people would not like in a leader, he is almost unanimously loved by his citizens.

The sketch for Huai Ren

The original sketch for Huai Ren

Design Iteration and Inspiration

Huai Ren is one of the characters where I did a sketch around when the game was first being conceived and then realized that I absolutely hated the design. In this case, my hatred resulted from the overly broad shoulders and odd stance that I had sketched. 

The color scheme started out as the traditional "evil person" color scheme of red and black. This was changed in the 3D model because I feel that Huai Ren thinks that what he is doing throughout the game is truly good, therefore I changed the all black look to a more white out color scheme.

Ji Xie (机械)

Character Information

Ji Xie is Gold Water's tinkerer and gadget man. He creates things for the whole team to use in their fight against Huai Ren. Ji Xie is not great at combat, however he can analyze situation and look for ways the defeat the enemy that no one else in Gold Water can envision except him. He may look short, but he swears that it is due to the fact that the suit he made, unlike the rest of the team's suits that he made, shrunk on him.

The sketch for Ji Xie

Design Inspiration

Ji Xie started life as a dwarf-like character on the original write-up. However I soon realized that a pure dwarf character in an anime setting would be hard to achieve properly, so I then took the short nature that most dwarfs in pop culture have used that as the basis for Ji Xie's sketch. 

Kuai Long (快龙)

Character Information

Beside being the only character that players can play as, Kuai Long has quite possibly one of more interesting backgrounds of all the characters in the game. Kuai Long was the heir to the throne in Winding River. He never really enjoyed the pressure from his dad to become king. However shortly after one of Huai Ren's plans goes horrendously right, he flees Winding River for the Jade Gate. There, he joins Gold Water in their plans to take down Huai Ren and restore whatever they can of Winding River.

The sketch for Kuai Long

Design Iterations

I was originally going to make Kuai Long where a crown or something of that sort to symbolize royalty, however I decided against having that due to how Kuai Long dislikes that idea of being heir to the throne. 

Sadly I  was unable to make the blue accents that I have in the sketch work well in the model. 

Wen Nan (温南)

Character Information

Wen Nan, an unknown entity within the world of espionage yet a master at code breaking. A villain or a good guy. A man without a master. A mercenary without pay. A smooth criminal without need for disguise. 

The sketch of Wen Nan

Design Inspriation

The main design inspiration for Wen Nan is one from one of my favorite technology presenters Steve Jobs. The top shirt of Wen Nan is supposed to be a classic turtleneck that Steve Jobs wore at some presentations. The twist with Wen Nan's shirt is that it is grey instead of black.

Yuan Shi (远视)

Character Information

Yuan Shi, the passionate and proud leader of Gold Water. Yuan Shi is Gold Water's main strategic planner. Yuan Shi excels at close quarters fighting thanks to his two trusty swords that he primarily uses.

Design Inspirations

The accent color of Yuan Shi is purple, this color was supposed to represent his love and passion for the Gold Water organization.

The Gallery

Whats next

With the characters now made, I now have the equally as monumental task of putting together the rest of the assets for the Ninjio's first public demo. In order to achieve this in time for it's intended release date, see my blog post titled The Release Schedule of Ninjio for more, I need to get one of the first boss fights with Huai Ren, Kuai Long, Yuan Shi, and Bao Lei up and running. In order to do that, I need to create art assets for the stage on which the fight takes place on and get the boss fight itself programmed. So for the next marking period, I will be focused on primarily on designing the level on which the boss fight takes place on.

This week's work log:

Monday January 1st: Happy New Years!

Tuesday January 2nd: Sketched Nan

Wednesday January 3rd: Modeled Nan

Thursday January 4th: Worked on structuring the folders once again

Friday January 5th: Finalized some more mouths