Downloaded 58 times
Uploaded byPhuong Hoang Vu
[UX Series] 1 - UX Introduction
The document provides an introduction to UX and UI design. It defines UI as the visual elements and interface a user sees, while UX encompasses usability, aesthetics, and the overall user experience. The author is working on a game project and learning UX/UI design. They explain that good design requires both good UI and UX, and that UX can be improved through testing and research, even with limited design skills. The basic UX design process involves research, wireframing, mockups, and interactive prototypes. The document outlines several future topics to be covered.
More Related Content
![[UX Series] 1b - 12 standard screen layouts](https://cdn.slidesharecdn.com/ss_thumbnails/enrwwps7midupojbmwj1-signature-085edba094deb1097db5eeb63e43eae4848440a0bb65a4aa426f2323e93c2199-poli-150828120514-lva1-app6891-thumbnail.jpg?width=640&height=640&fit=bounds)
![[UX Series] 2 - Clean design. Less is more](https://cdn.slidesharecdn.com/ss_thumbnails/ak7pcxfzs9q3y6ywjy24-signature-085edba094deb1097db5eeb63e43eae4848440a0bb65a4aa426f2323e93c2199-poli-150828120514-lva1-app6891-thumbnail.jpg?width=640&height=640&fit=bounds)
![[UX Series] 5 - Navigation](https://cdn.slidesharecdn.com/ss_thumbnails/navigation-150911112601-lva1-app6891-thumbnail.jpg?width=640&height=640&fit=bounds)
![[UX Series] 3 - User behavior patterns and design principles](https://cdn.slidesharecdn.com/ss_thumbnails/vmm42awvqzihoupsjjkf-signature-085edba094deb1097db5eeb63e43eae4848440a0bb65a4aa426f2323e93c2199-poli-150828120514-lva1-app6892-thumbnail.jpg?width=640&height=640&fit=bounds)
![[UX Series] 4 - Contrast in design](https://cdn.slidesharecdn.com/ss_thumbnails/contrastindesign-150911111617-lva1-app6892-thumbnail.jpg?width=640&height=640&fit=bounds)
![[UX Series] 6 - Animation principles](https://cdn.slidesharecdn.com/ss_thumbnails/uxseries6-animationprinciples-150918113253-lva1-app6891-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to [UX Series] 1 - UX Introduction
[UX Series] 1 - UX Introduction
- 1.
- 2. I’m working inMarvel: War of Heroes project
- 3. and started learningUX & UI from SQUAD project
- 4.
- 5. What is UI? Standsfor “User Interface” It’s everything you see on the screen:
- 6. What is UI? Standsfor “User Interface” It’s everything you see on the screen: Information Inputs Animations
- 8. Main buttons arestill clear if the screen is blur
- 12. What is UX? Standsfor “User Experience” Three components of UX: Usability Look Feel
- 13. What is UX? Standsfor “User Experience” Three components of UX: Usability (How to use?) Look (Color, graphic, theme...) Feel (Joy of use, Interaction, Reaction)
- 14. Good design =Good UI + Good UX
- 15. Good design =Good UI + Good UX Bad news: It’s mostly gifted
- 16. Good design =Good UI + Good UX Good news: It can be learnt
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23. Good graphic, goodUX Can you guess where the BUY button is?
- 24.
- 25. Good graphic, goodUX Can you guess where clickable areas are ?
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32. Why should wecare ? Users need tools to solve their problems If they feel good, they stay
- 33. Why should wecare ? Users need tools to solve their problems If they feel good, they stay, then pay
- 34. Why should wecare ? Users need tools to solve their problems If they feel good, they stay, then pay They don’t care about: Your superb data design Your high-end technology YOU
- 35. Why should wecare ? CS cost decreases after improving UX Revenue increases after improving UX
- 36. Why should wecare ? CS cost decreases 90% after improving UX Revenue increases 300M$ after improving UX
- 37. Basic UX designprocess 1. Research & strategy 2. Wireframe 3. Mockup 4. Prototype
- 38. Basic UX designprocess 1. Research & strategy 2. Wireframe • Basic presentation of design elements • Used for communication, documentations 3. Mockup 4. Prototype
- 39. Basic UX designprocess 1. Research & strategy 2. Wireframe 3. Mockup • Static visualization • Used for visual feeling 4. Prototype
- 40. Basic UX designprocess 1. Research & strategy 2. Wireframe 3. Mockup 4. Prototype • Add interaction • Used for user testing
- 41. What’s coming next? 1. Common design mistakes 2. Basic design principles 3. Basic emphasizing techniques 4. UI components 5. Animations in UI 6. Trends 7. Wireframe, Mockup, Prototype
- 42. What’s coming next? 1. Common design mistakes 2. Basic design principles 3. Basic emphasizing techniques 4. UI components 5. Animations in UI 6. Trends 7. Wireframe, Mockup, Prototype
- 43. What’s coming next? 1. Common design mistakes 2. Basic design principles 3. Basic emphasizing techniques 4. UI components 5. Animations in UI 6. Trends 7. Wireframe, Mockup, Prototype
- 44. What’s coming next? 1. Common design mistakes 2. Basic design principles 3. Basic emphasizing techniques 4. UI components 5. Animations in UI 6. Trends 7. Wireframe, Mockup, Prototype
- 45. What’s coming next? 1. Common design mistakes 2. Basic design principles 3. Basic emphasizing techniques 4. UI components 5. Animations in UI 6. Trends 7. Wireframe, Mockup, Prototype
- 46. What’s coming next? 1. Common design mistakes 2. Basic design principles 3. Basic emphasizing techniques 4. UI components 5. Animations in UI 6. Trends 7. Wireframe, Mockup, Prototype
- 47. What’s coming next? 1. Common design mistakes 2. Basic design principles 3. Basic emphasizing techniques 4. UI components 5. Animations in UI 6. Trends 7. Wireframe, Mockup, Prototype
- 48. What’s coming next? And a lot more: • Color theory • Typography • User persona • ...
- 49.
- 50.
- 51.
- 52.
- 53. It’s just thebegining...
Editor's Notes
- #2 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.
- #3 I’m Vu Phuong Hoang, Game Engineer. I’m working in Marvel: War of Heroes project.
- #4 I started learning UX & UI theories and techniques 5 years ago (2010), when I worked in SQUAD project. It’s fun, interesting and I learnt a lot from it. So I will share my little knowledge about UX.
- #5 UI and UX is huge topic. We can’t 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. What’s coming next after this presentation?
- #6 UI stands for User Interface. It’s 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)
- #7 Information: Character information, article... Inputs: password field, play button... Animations: showing pop-up, new incoming mail alert...
- #8 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.
- #9 The 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.
- #10 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. I’m sure that those are floating diamonds. And they are inputs, they are UI components.
- #11 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 ?
- #12 The last example about UI is BBC news homepage. It’s 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 reading
- #13 How about UX? It stands for User Experience. Three big components of UX are: Usability, Look and Feel.
- #14 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. That’s 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?
- #15 UI 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 there’re 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.
- #16 Bad news for you: If you intend to design the visual parts by yourself, reconsider it. Because it’s not for everyone, it’s mostly gifted. Not everyone can draw and have a good sense about the colors and space...
- #17 But you still can learn about the UX. That’s the good news. There’re 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!”
- #18 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! You’re doomed. Your plane hit the ground before you can find that damn button.
- #19 Another 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 can’t play a game with this design. Too many information, too messy.
- #20 Now let’s consider a product with bad graphic and good UX. Nothing new, Google. It’s 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 “I’m Feeling Lucky” does ? It’s fun! Explore it.
- #21 Wikipedia, the place we visits when we need something to look up. The data, it’s huge. You can almost find anything you want here. But looking at the screenshot, it’s boring with 3 colors: white, black and blue. But it’s 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).
- #22 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!
- #23 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 it’s not so surprise that the Apple’s homepage is considered as a site with great UI and great UX.
- #24 After blurring the screenshot, you can still see the Buy Now button, right? Because that’s the button they want you to click the most. It has different shape, color and position. Fun fact: Apple has the consistency in it’s 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.
- #25 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 doesn’t 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.
- #26 Similar tricks: blur the image, then can you guess clickable areas? Yes, they are the balloons.
- #27 Now we have another example from game industry. It’s the block buster Star Craft II from Blizzard. You don’t 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 can’t select now, but in some conditions, you can select them. Amazing.
- #28 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 ?
- #29 Using these products makes me feel so satisfied.
- #30 OK, now let’s face the truth. There’re 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 I’m tired just by seeing this.
- #31 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 ?
- #32 They drives me nuts!
- #33 You 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 should we care for real? User uses your product as a tool to solve their problems. They access music website to listen to music... They play games to having fun, to be the god in the game... So, if your product is good looking and easy to solve their problem, they will stay.
- #34 And believe me, if they stay, they will pay someday.
- #35 Then, of course they don’t give a shit about how you design the big data, which tenologies you use to build that product. They just care about what they see, how they use. And bad news, they don’t care about you, but you must care about them.
- #36 Why should we care, because big companies care, too. Amazon – a big e-commercial website can get higher revenue just by improving UX. McAfee – a famous antivirus software company can reduce the Customer Support cost just by improving UX. Can you guess how much revenue increases or CS cost decreases?
- #37 300M$ and 90%. Amazing numbers. That’s what your boss cares, right, the money ? You should show him this.
- #38 The necessary to improve UX is real. But how? It’s a long story. You have to run many sprints in your process to achieve it. A sprint to design UI and UX includes: 1 – Research about the user behaviors, then plan what need to be done. For example, you setup a counter in SHOP page to see how many users get there, how many of them buy your product. So you can determine is it necessary to improve UX for that page. Following 3 stages are complicated, and we will have a separated session discussing about those parts.
- #39 2 – Wireframe: In this stage, you use simple tools like pencil and papers to draw a draft version of the design. The image can be presented as a rectangle. That’s it. Wireframe is cheap. But you still can utilize a lot from it. You see the layout, you can imagine where data will be displayed. If it doens’t fit your needs, just draw another design. It’s quick and cheap. Wireframe is important document, which can be used later by artists for Mockup and engineers for Prototype, or it can be used to discuss among designers.
- #40 3 – Mockup. It’s based on Wireframe, and be done mostly by artist. This is what our product should look like in the end. But they are just static visualization. It’s used for visual feeling. It is the most important resource to convince stakeholders to invest on your project.
- #41 4 – Prototye. It’s based on Wireframe also. The UI components are still very simple but QAs can use this version to interact with the system. This stage is important, because almost UX issues are found here. You can not imagine how system works in every cases, unless you test it actually. Good news: 85% UX issues can be found by just 5 QAs.
- #42 That’s it! This session helps you to answer some basic questions about UX. Following sessions will help you to focus on some specific aspect of UX. The 1st one will help you to improve UX on your product immediately. I will show you some practical examples so that you can learn from them and apply to your product. They are common design mistakes. For example: If your button looks like text (without border and background), user has to click precisely to the text. But if you add border or background to your button, the click area is enlarged, user can click much easier. And the side effect is: your buttons have similar look, similar size, easier for users to remember and realize that they are buttons.
- #43 Before going further, you should know the basic elements and principles of designing. It helps you to understand deeper about UX tricks, and if you master these principles, you can invent new UX tips easily. Hick’s Law example: Putting 40 types of fruit jam vs 4 types of fruit jams in different supermaket, so client can taste them before buying. Result: User buy more in the supermarket with less samples. Why? Because less choices makes user feel easier to decide. You can apply it to UX design.
- #44 Not every elements on the screen have equal priorities. You have to emphasize important elements. How? Let’s take a look at elements of design, so you can pick the techniques you want to emphasize any elements. For example: You can make a button bigger to emphasize it, or you can put the button far away from other choice to make it look special...
- #45 How many components are there? What are the pros and cons of each component? When to align left, right, center ? For example: Radio buttons and drop-down menus are 2 components that user can use to select 1 from N choices. Radio takes a lot of spaces (and the space it needs changes as the number of choices), but every choices are visible. So when to use which? You have to understand and consider their properties to decide.
- #46 Animations are an interesting part in UI. It’s not easy to make it right. I will introduce 12 principles from Disney Animation so you can bring your animation to the new level. For example: Look at the box on the right (sorry if you can’t see the animation because it’s a GIF file). It simulates the movements of a tennis ball. When it falls down, it’s circle. But when it hits the ground, the height is smaller, the width is bigger, because it’s stretch. Without these minor adjustments, the box seems emotionless.
- #47 Your user’s behaviors are affected a lot by other products. And you know what, those products follow design trend. If your product follows the right trend, your users can feel that they are at home. It’s familiar. User will have no trouble using your product. They will stay. For example: Facebook changed it’s UI rapidly from MAC OS X style to Flat design, then it’s Material Design now. It’s trend.
- #48 In this session, I will compare those stages. What is the limit of each stages. And I will introduce some tools so you can practice right away.
- #49 Good news: Nam Vu, our artist will join to share incredibly helpful information about design aspect like: Color theory, typography... For example: Can you name some famous food websites? (Lozi, Foody, Panda – I live in Vietnam ) They all use RED as their primary colors. Why? Red color can enhance your feeling about food. Magic.
- #50 Don’t wait for me, learn UX by yourself. The 1st UX resource I can recommend is: Google Material Design. You can learn many things from this (even the basic and advanced things) and this is the hottest trend now.
- #51 Another useful site is Smashing Magazine. You can find tons of experiments and blog posts there. Their books have super high quality too.
- #52 There’re so many resources out there you can find. Beside, you should play more games, watch more movies, read more comics and find what you like/dislike about them. By this way, you can always find a way to improve UX in some ways.
- #53 You are definitely confuse. So ask me
- #54 It’s just the beginning, fun topics are coming, don’t forget to join