UI/UX : a beginner’s guide

This post is the first one that I wanted to be on this website, even before the launch, but lack of time and inspiration had postponed it here.

Advantage, I’ve taken plenty of time on the content and a step back to see this in a clearer way, let’s go !

This is surely words that you have read numerous times, but maybe never searched for. I don’t give wikipedia explanation (no interest here) but more what I understand by using this terms on website, app or even video game.

UI : User Interface. All elements of a website or app with whom you can interact : buttons, pictures, drop-down list, etc. For me UI are shapes, colors, movements.

Straight example of UI : buttons “validate” and “cancel” present on a page of purchase. Validation button is in green and cancel button is in red; Invert those 2 colors, it’s changing the “codes” and disorientate the users.

UX : User eXperience. Behind the stage are hidden all the behaviors and placings of your UI elements. On internet, user is as ease to validate by clicking only one time on a button, but this is not the case on his OS to launch his favorite game, ans this is only an example.

Let’s get back at buttons cancel / validate, the “codes” made the “cancel” button often placed at the bottom left and the “validate” one at the right.

But what are the “codes” ? Are they obvious to understand ? Can they evolve ? Are they the same for everyone ?

I cannot pretend to answer all of this, I think there not only one truth while talking about UI/UX and things evolved constantly. I will take different cases from (my) everyday life to give you a sample of those “codes” that we used, everywhere and from a long time ago.

Cultural difference: a story of cross and circle

Most players have already encountered that : who on Playstation did not confuse validate from cancel or the invert ? The Playstation pad is composed with 4 buttons: cross, circle, square, triangle, each one having is own signification.

In a game you can validate/cancel and action by pressing one of this button, in Europe (occident) the most used case is :
Cross: to validate, just imagine checking something for example
Circle : to cancel, form of 0 (zero), so nothing

Playstation Joypad
Playstation Joypad

But with imported games (like from Japan), this is the opposite, simply due to a cultural difference:
Cross: to cancel, think of someone crossing his arms in front of him, this is a negative sign in Japan : “Dame” or “Nai” the negation
Circle : to validate, pronounced “Maru“, this is visual too: someone who form a circle with his thumb and index, like the O from “OK!”

So we can see with UI/UX, there is not a good/bad behavior, but adaptation to make, depending on who you aim your content.

 

The bad ergonomic choice…or not

We stay with the video games with two other cases that surprised me while playing on my 3DS: pokemon shuffle and bravely default.

Pokemon Shuffle

Quick explanation on this game: it’s a puzzle game in the Pokemon universe.

During session on this kind of game (free to play) you generally play your free games and then pass to something else. For this I’m less attentive than other games. When you defeat a Pokemon, you have the choice to catch him, if you fail, and you have enough money, the game will propose you to buy a “Super Ball“, gaining chance to catch him. The screen choice is below

Pokemon Shuffle 3DS screenshot
Pokemon Shuffle 3DS screenshot

See how the buttons are placed : buying “Super Ball” is on the left, and the “cancel” button is on the right. The first time, I get tricked ! And I was angry : wanted to buy it, but in a rush I fell on the bottom right corner (remember: the “codes“) and so cancelled the catch.

While seeing that remembered me of a post I read from Hteumeuleu on Mario Kart, proof of a bad design.

After some time I see now another possibility to this weird placement : maybe the designer wanted to focus on the no-buy (consequent) rather than the catch, in this case, it’s maybe not a so bad placement…right? 😉

Bravely Default

For this other example, I think I will put shame on me, but hey, here we go!

Bravely Default is a Japanese RPG developed by Silicon Studio. This is a standard behavior in this kind of game to be able to manage savings: create, modify, move or delete.

I always wanted to edit or move my games, but I have absolutely no clue on how to do it! Here is a copy of the screen.

Home screen and the hidden arrow
Home screen and the “hidden” arrow

Maybe you have seen it right away, but for me it was not obvious until I clicked randomly: there is in fact in the bottom right zone an arrow allowing you to have access to another menu. For me it was just a decorative element: the arrow is too much stylized and there is no animation letting you imagine there is a possible action there.

Once clicked
Once clicked

In my opinion this is a faulty design. I would have added a small animation on this arrow in a goal to warn people you can do something with it.

One last word

UI/UX must not be left to the sole “designer” but a subject to be embrace and understood by everyone in a team. This field must be subject to testing and alimented by user feedback. For a game, a website or an app, never forget: what it’s important (for UI/UX) is not what you want to do, but how your users will use it and appropriate it.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.