S03 – Progress Report – P01 – The User Interface Monster – Beginning

What is user interface? What defines interaction in a system? How do you interact with something to help you understand what you want to interact? In this progress report, the priority of this blog is to assimilate what user interface is in a more general sense and understand a perspective of what user interface is, what it does and how does it correlate to design in general. To condense my thoughts, I will cover experiences from mobile games where I am currently analyzing it’s structure and how it works.

So the general idea of what user interface is what a person does to interact with a specific system or element in the game. But break it down into 2 words and we can see them as definitions. The google definitions quotes as such, but I will only outline the definition that seemingly fits the bill for this subject in particular.

User

  1. a person who uses or operates something.
    “the user should press return and a message will be displayed”
Interface
noun
  1. 1.
    a point where two systems, subjects, organizations, etc. meet and interact.
  2. 2.
    COMPUTING
    a device or program enabling a user to communicate with a computer.
verb
  1. 1.
    interact with (another system, person, etc.).
  2. 2.
    COMPUTING
    connect with (another computer or piece of equipment) by an interface.
    User Interface is the means in which we interact with a specific system to fulfill a purpose. To interact with that element to create or change something new.

Let’s give an example. Say you need to interact with a button. For example, a start button. A start button lets you go to a menu screen or a game screen, depending on which game you play. On another hand, a list with different variables describing specific things acts similar to a chart or to-do checklist which can be filled depending on which part you placed.

Say you open excel and you have different tools you can use to interact with. How does it work simply and what sort of action you need to take in order to make what you want. That, in a way, is studying how user interface works on a more basic level. But designing a custom user interface for a variety of purposes requires you to understand the fundamentals of both its structure and its overall design in terms of aesthetics, functionality and practicality.

Specifically in games wise, especially in mobile app design, we have different basic functionality in how to interact between buttons and how they can be integrated and connected based on how you interact with different game elements.

interactive1.PNG

The example shown above is how integration between different User Interface elements mesh together to provide an interconnected system of functions that helps create the game to flow the way it does.

Interacting with elements like those above requires the understanding of many different facets of the interface you are trying to make and researching those fundamental aspects is an important tool for you to learn what makes an interaction and how do they work. Though to take a step up further, take the basics of what you know from an english class (if you have taken advanced english classes that is) where structuring media can be very important to ensure the elements of design works out to be generally visualized by the general audience.

But to see how you want to visualize something that could fit the context of what you are making, you need to learn basic fundamentals of what makes a good visual aid to interact with.

From the quotes of a Common Sense Approach to Web and Mobile Usability, which can be applicable to any media type, states that a visual hierarchy’s traits as follows:

  • The more important something is, the more prominent it is.
  • Things that are related logically are related visually.
  • Things are “nested” visually to show what’s part of what.

These hierarchy makes up a lot of important aspects of what makes something easily pleasing to the eye, what makes it “practical” within the context of the content you view or create.
So how does aesthetic design or the hierarchy apply to user interface in mobile games?

 

An approach to answer this question is to cover up some examples of different mobile games user interface (one element of it that is), go through each of them, give them my personal thoughts on what the elements of these interfaces (all of them are stage select screens in a mobile game) mean and how do they hold up. In a way, I’d be critiquing some of the elements of the stage select screen and see how it works based on visual aids alone.


Charm King has a structure which follows a path line filled with buttons which describes as which particular level to select. A level that is unlocked will be indicated differently from the other buttons (indicative of the colors and the interface working on it) Some elements (such as settings at the bottom left corner and the “currency elements” (the health and the in-game currency) of the game are located on the top left) follow a lot of games of this kind with those elements. They generally follow that structure because it is the most familiar, in a way, to how these types of games work.

Looking at the game on the right, Jelly Splash, we can see the similarities of the two, albeit it is structured differently. Spotting the differences aside, the similarities can help you to see what is the general feel of these types of games and what makes these types of games the way it is.

Carrot Fantasy has a simple aesthetic different from the previous two examples to show what the design of that level, albeit a more greybox-like version of it, and shows the status of the game (whether it is completed or not, coupled with an indicator of your actions (when you played) and the three different elements of the game’s overall actions in game. It helps to keep the interface and interaction simplistic without it overburdening the user with little issues. Though it may be a tad too simplistic for those who don’t understand the context of the game, it is structured in a way which shows what the player is in for during the stage selection scene without overloading the player with too much text. But the player may understand some of the game’s overall aspects if they continue interacting with the game.


Now, those are examples of what you see from basic interactions between user interface in a select screen. There are multi-facets of elements in different systems other than these. The title screen, the loading screen, the win and lose screens, the interactions between the in-game scenes and the elements of menus (pause screens, settings and the like) which can integrate together cohesively into something that could be described as a game.

That is what you would see when you are working with user interface, what you will learn from the different elements that makes it up. And these are barely the aesthetics that was explained, the more technical ones (marketing wise and coding wise) are not explained in full detail here. Alongside what is the importance of user interface and what can be considered its principles. But that will be covered on later parts of this guide on user interface.

References:
20 UI Design Examples From Mobile Games | Web & Graphic Design | Bashooka. (2016). Bashooka. Retrieved 17 November 2016, from http://bashooka.com/inspiration/ui-design-examples-from-mobile-games/
Games, 2. (2016). The 8-Step Guide To Interface Design for iPhone Games. Paladin Studios. Retrieved 17 November 2016, from http://www.paladinstudios.com/2012/04/23/the-8-step-guide-to-interface-design-for-iphone-games/
Jelly Splash – mobile games UI/UX design, mobile games patterns, mobile games UI inspiration. (2016). Gamesinspiration.com. Retrieved 17 November 2016, from http://gamesinspiration.com/apps/jellysplash
Krug, S., Bayle, E., Straiger, A., & Matcho, M. Don’t make me think, revisited (1st ed.).
Level Selection – mobile games UI/UX design, mobile games patterns, mobile games UI inspiration. (2016). Gamesinspiration.com. Retrieved 17 November 2016, from http://gamesinspiration.com/tags/levelselection

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s