[UX Series] 1 - UX Introduction

  • View

  • Download

Embed Size (px)


[UX Series] 1 - UX Introduction by Vu Phuong Hoang

Text of [UX Series] 1 - UX Introduction


UX Introduction

Since we are focusing on improving UX, there are a lot of people out there are still wondering what the heck is that? I will tell you something cool about this great topic.1

Im working in Marvel: War of Heroes projectIm Vu Phuong Hoang, Game Engineer.Im working in Marvel: War of Heroes project. 2

and started learning UX & UI from SQUAD projectI started learning UX & UI theories and techniques 5 years ago (2010), when I worked in SQUAD project. Its fun, interesting and I learnt a lot from it. So I will share my little knowledge about UX.3

UI?UX?Why?How?Whats next?UI and UX is huge topic. We cant cover all of it in just 1 presentation. Therefore, I will help you to answer some basic questions:1. What is UI? 2. What is UX?3. Why should we care about them?4. How could we improve them?5. Whats coming next after this presentation?4What is UI?Stands for User Interface

Its everything you see on the screen:UI stands for User Interface.Its everything you see on the screen (in game industry, the core game graphic can be seen as different component, not as a part of UI)5What is UI?Stands for User Interface

Its everything you see on the screen:InformationInputsAnimationsInformation: Character information, article...Inputs: password field, play button...Animations: showing pop-up, new incoming mail alert...6

1st example about UI: Homepage of adidas.You can see some components of UI here: buttons, product images, some cool parallax effect when scrolling...The first thing you realize in this screenshot is: 2 big pictures with different color scheme covers almost the screen, then you realize that these are 2 hottest products Adidas want to introduce to visitors.7

Main buttons are still clear if the screen is blurThe design is so clear that even if you make the screenshot blur, you still can see the position of 2 Call-To-Action buttons which are light blue rectangles.8

Another example is an amazing website which is used to promotes the movie TOMORROWLAND being shown in cinemas: http://takemetotomorrowland.com/The world in this movie is different from where we are living, so the purpose of this website is introducing that world to viewers.You can drag the mouse to view the landscape around.Can you guess where are the clickable areas ? Yes, of course. Im sure that those are floating diamonds. And they are inputs, they are UI components.9

500px.com: An website for photography.The design is so clean and compact. It delivers what users need: A compact filter on the top-left corner and a grid of amazing photos.What do you want more from a photo website ?


The last example about UI is BBC news homepage. Its a famous online newspaper and they have hottest news out there. But look at the screenshot, they just show some hottest news, not all of them. You can decide quickly where to click to continue reading11What is UX?Stands for User Experience

Three components of UX:UsabilityLookFeelHow about UX? It stands for User Experience. Three big components of UX are: Usability, Look and Feel.12What is UX?Stands for User Experience

Three components of UX:Usability (How to use?)Look (Color, graphic, theme...)Feel (Joy of use, Interaction, Reaction)Usability is about how user use your product: How to use? Is it intuitive? Is it easy? How long does it take for a new user to learn about the usage ?Look is about the visual things on screen: The color, the graphics, the theme. A big, red button must have something special, when other buttons are blue and smaller. Thats what user thinks, utiliize that to make a better UX.Feel is about the experience: Is it fun? Does it interact with user? Does it have feedback or something?13Good design = Good UI + Good UXUI is about the visual part, UX is about the feeling part.A product which is good looking but very hard to use can say goodbye to user soon.Your product can be easy to use but therere other products which do the samething with some fancy effects and colorful design, why should users care about yours ?So, a good design is a design which is good at both UI and UX.It must be looking good and easy to use as well.14Good design = Good UI + Good UXBad news: Its mostly giftedBad news for you: If you intend to design the visual parts by yourself, reconsider it. Because its not for everyone, its mostly gifted. Not everyone can draw and have a good sense about the colors and space...15Good design = Good UI + Good UXGood news: It can be learntBut you still can learn about the UX. Thats the good news.Therere many people out there started learning, doing experiments with UX. Then they published their results as an article, a blog... which we can learn from. Stand in shoulders of the giant!16Good graphic, bad UX

This is a spaceship simulator game with great graphics, every parts are drawn carefully.But the UX, it sucks.You can hardly find the information you want in a second.Imagine you are the pilot and your plane crashes, now you are wondering: Where is the exit button (with parachute of course)? Ooops! Youre doomed. Your plane hit the ground before you can find that damn button.17

Good graphic, bad UXAnother example about good graphic but bad UX.Every icons are drawn creafully with glossy effect, outline and glowing effect with some flying particles. Cool!But in general, you cant play a game with this design. Too many information, too messy.18Bad graphic, good UX

Now lets consider a product with bad graphic and good UX.Nothing new, Google.Its the symbol for the simplicity, the minimalism design.Google offers what user needs most when visiting this site: a text field to fill in the keyword and a button to search. Simple, elegant, perfect!User can even start typing without clicking the textfield.Beside, Google adds fun factor into this site by a lot of Easter Eggs.And how many of you out there knows what the button Im Feeling Lucky does ? Its fun! Explore it.19Bad graphic, good UX

Wikipedia, the place we visits when we need something to look up. The data, its huge. You can almost find anything you want here. But looking at the screenshot, its boring with 3 colors: white, black and blue.But its simple and easy for newbie to realize: White background, black for normal texts, blue for links.The layout is also helpful: a sidebard on the left to navigate, main content in the center and illustrations on the right side.You want to see the information you want? Wikipedia has it.You want to see more about related things? Wikipedia has it, and you know where to find these links. LEFT (and bottom).20Bad graphic, good UX

Flappy Bird, a phenomenon.

The gameplay is addictive. But I only care about the UX. Very simple: 3 big buttons with similar shapes: Rounded rectangle with black border and white background (the buttons are divided in half with darker in the bottom to make it looks like a real button)The colors indicate the traffic lights:GREEN -> go and continue playing.RED -> stop and see what you got.YELLOW -> pause to rate and return to play more.Awesome!21Good graphic, good UX

Designing a product with good UI and UX is tough. Not so many products achieved that perfection. The person who invented the term UX is a designer from Apple. So its not so surprise that the Apples homepage is considered as a site with great UI and great UX.22Good graphic, good UX

Can you guess where the BUY button is?After blurring the screenshot, you can still see the Buy Now button, right?Because thats the button they want you to click the most. It has different shape, color and position.Fun fact: Apple has the consistency in its design. This button also appears in App Store on MAC, iOS and website. So if you are using Apple products, maybe you are familiar with this button already. Whenever you see that button, you know that how it works, what it delivers.23Good graphic, good UX

Alexart a truly amazing website from Russian designer Alexey Abramov (http://alexarts.ru/en/)

This is his portfolio. His work is amazing, you should see some designs. But he doesnt throw them to the homepage so that visitor can enjoy the view, enjoy the design and decide where to go later by big balloon buttons. Elegance.24Good graphic, good UX

Can you guess where clickable areas are ?Similar tricks: blur the image, then can you guess clickable areas? Yes, they are the balloons.25Good graphic, good UX

Now we have another example from game industry. Its the block buster Star Craft II from Blizzard.You dont have to play this game to realize that how the MODES and RACES radio buttons work.2 green buttons are selected choices.Light blue buttons are choices you can select.Dark blue buttons are choices you cant select now, but in some conditions, you can select them.Amazing.26Good graphic, good UX

This is the screen where players select the playing mode. No doubt, you know that you have to click 1 among 6 big pictures in the center of the screen, right ?27Good graphic, good UX

Using these products makes me feel so satisfied.28

Bad graphic, bad UXOK, now lets face the truth. Therere a lot of products out there have bad UI and UX also. Look at the screenshot, how many button styles you can count ? Are you confident that you click to the button you want easily ? Can you read the information ?The button is not so ugly but Im tired just by seeing this.29Bad graphic, bad UX

1 more example. OMG! What the heck is this? You have to be trained 1 day to use this software. Too many choices! Too messy! Where to click ?30Bad graphic, bad UX

They drives me nuts!31Why should we care ?Users need tools to solve their problemsIf they feel good, they stayYou know UI, UX is now. You have seen some examples about them too.

I think you can sense the necessary to improve UX now.But why