S03 – Progress Report – P02 – The User Interface Monster – Principles and Technicalities

The previous blog covers the basic definitions and how does user interface mesh together in an aesthetic sense. This part of the blog will cover the principles of what makes a user interface, some aspects of how user interface can be integrated into different types of systems and medias and tips and tricks on making your own user interfaces.

User Interface has general principles of what makes a user interface functionable. Based on Joshua Porter’s Principles of User Interface Design, there are several principles that makes a good user interface. The most important ones being that Clarity takes a higher priority. Making sure that you understand the basics of what you are interacting with, what can it be recognized to the people who interacted with the systems you worked on and ensure that the key element of user interface, interaction, is a part of the component that allows them to pay attention and interact with it without referring to an extra guide with a simple directory that doesn’t require much thought process into making the interaction work.

A quote mentioned by Paul Rand, an art director and graphics designer, mentioned the following:

“To design is much more than simply to assemble, to order, or even to edit; it is to add value and meaning, to illuminate, to simplify, to clarify, to modify, to dignify, to dramatize, to persuade, and perhaps even to amuse.” – Paul Rand

This can be applicable to any form of design, and in this case, the fact that user interface design, can help you to interact with what you are trying to interact and allow yourself to direct yourself to your desired choice of design.

Looking at what would we consider an interactive design, we need to ask ourselves the following:

  • Does it do the things we want them to?
  • Does it serve its purpose on what it interacts with when we do?
  • Why does the function/variable work the way it did and what does it redirect to?
  • Critically, can you say that the interaction between the different systems be more simplified to make sure it is accessible and easier for the player?

These are some questions I personally considered when trying to design something that helps with the user interface. Though there are many other element things to consider, this I consider is a good start in figuring out the kinks behind user interfacing.


When it comes to the technical aspects behind User Interface, there are some considerations to make in regards to the different aspects of how one interacts with the different elements of the design. For instance, clarity in showing the user what you want to show without it being too complex or too over-the-top is essential into showing what makes easier interaction between different scenarios. SImplicity in direction is also an important component. After all, simple and easy to navigate is much easier than multiple stuff that makes you shake your head in confusion everytime you read the different menu screens mentioning specifically every single detail without it being too necessary.

For instance:

Returning to the Menu Screen is redundant comparative to Return to Menu. Where the latter is simpler and has enough clarity to have the user understand that the button returns to menu. Take it a step further and condense it to either Menu or to Menu if you think that compressing the words would fit specific context (like when you need a small button). You can even indicate them using images.


The image above is a draft representation of a simple interaction between buttons. Depending on the context, the button can be used as a directory between different scenes.


Wrapping up this part of this research material are some of the technicalities of user interfaces and to give you a general idea as to what makes up user interface and what constitutes a good one. These follow quite similar to semiotics based principles. So if you want to learn more on the technical aspects in what constitutes a good design in general, you might want to look up semiotics and how they work. They generally give out similar albeit with slight changes to the principle of things.

User Interface Technicalities


  • Placement: The location of a button and or a certain system is important. Where you think it is aligned and how it was structured can be different depending on the situation of which particular user interface.
  • Sizing: Depending on certain situations, scaling in between size is important to determine what makes it more important.
  • Hierarchy: The order of things between specific elements can help you to determine what’s more important in the priority of things. Though depending on different types of media, this can vary in terms of how important one can work out the order of things. Menu can be first and often times, it can be last. You most likely need to research this by looking at different elements yourself to see what you think fits best.


  • Color: What makes something stand out and what is important is color. They symbolize specific elements if looked at the right context. Depending on the situation, you can make quit’s color red or it could mean a no. Though that all depends. If you’re using it in a more colorful media for the purpose of making things more “aesthetically” variative, then that would be the best option to use. Otherwise, for more office-like purposes. The colors should match down the context of the situation. Like use more grey and/or pale blue for certain situations. This all comes down to context though.
  • Detail: What makes a good interaction between certain things is that one thing can do specific actions or an action that would fit the context of the situation. Details and information can help with clarifying what makes that interface the way it is so that they would know more about the situation. Think of it as a help or guide on specific aspects that aren’t very clear.

The next part will cover the marketing aspects, and how does that integrate with the overall system of what User Interface can be used for on a commercial sense. As well as what User Interface does as a ground building tool for multiple sources of media.


Ghazarian, Armen. “The Player Experience: How To Design For Mobile Games – Designmodo”. Designmodo. N.p., 2016. Web. 28 Nov. 2016.

Porter, Joshua. “Principles Of User Interface Design”. Bokardo.com. N.p., 2016. Web. 28 Nov. 2016.

Quintans, Desi. “Game UI By Example: A Crash Course In The Good And The Bad”. Game Development Envato Tuts+. N.p., 2016. Web. 28 Nov. 2016.



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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s