Microso' Innova-on Center @ Botswana Innova-on Hub March 24-‐26, 2014 Bihux.tumblr.com
Allison Tran designer @ Microsoft Allison.tran.90@gmail.com www.allisontran.com Additional contributor: Michelle Guarino Designer @ Microsoft
Your objectives: I want my product to be user-friendly.
I want to attract more users.
I want to positively impact my users.
My objectives: Introduce you to UX and the design process
Help you practice design methods
Give you UX tips!
YOUR KEY TAKE-AWAYS
1. Never forget about the user.
2. Empathy is the greatest tool you can leverage to build better products.
3. Move Fast and Test your Designs.
what is UX? BIH UI/UX BOOTCAMP / Microsoft Innovation Center @ Botswana Innovation Hub / bihux.tumblr.com
What is UX?
UX = User Experience
It is a skill that is both a science and an art. User Experience Design is the way we make products more effective, useable and meaningful for your users.
Consider the disposable camera:
The Packaging and Information Design What does the camera packaging try to tell the user? If we just look at the product, it tells you the brand, Kodak, shows you that it’s a camera, and tells you that it can take 27 photos.
The Product Value & Buyer’s Decision Take a look at this camera in a store setting. With so many choices, how does the user decide to choose this one camera? Is it the price? Packaging?
Physical Interaction How Is the camera used to take the photo? What does the user press to take a photo? How does the user hold the camera?
Physical Interaction How does he get the photos? How will he remove the film from the camera? How does the user know how to do that? With this camera there are instructions on the back.
User Habits How does the user feel about taking photos? What kind of photos will he or she take? What are the scenarios where someone would have a disposable camera and why?
Incidental Users The disposable camera is for everyone. But what about people outside of their expected users? Will kids be able to use it? What would their experience be?
UX = User Experience
UX is all about considering the user. How do we make technology easier for people to use and understand? How do we make the products we build meaningful for people?
UX = Creativity and Engineering
User Experience
Design Strategy: Get the User’s to Buy a Flight Easily. Make the Website as Simple as possible.
Design Research: Test the Webpage with Users to see if actual people would be able to navigate the website and know how to use it.
Visual Design: Visually the website uses hierarchy and color to make buying flights the first thing you see. They’re also advertising flights to you in a visual way that looks in place.
Usability: They made sure that you know what you can interact with and what is a button and clickable.
UX = Creativity and Engineering
The engineering aspect of User Experience is how we engineer experiences and digital products to make sense to a human being.
UX is about Human Centered Design HCI = Human Computer Interaction
Traditionally called Human Computer Interaction, HCI represents the engineering approach we take to UX . It’s rooted in understanding how people use technology and how the components of a digital design help a user accomplish a task.
HCI fundamentally asks how people converse and interact with interfaces? Interfaces must communicate and inform the user on how it can be used.
What happens when users see an interface? What is he or she thinking? Does he understand what he or she is looking at? What is the user supposed to do next?
HCI helps the User With the Task
The Interface elements are telling the user the options, which one is selected, which one should be selected, and also gives the user the option to minimize or close the dialog.
Anticipate User Error or Confusion
It anticipates what the user might do in an interface, and what errors or confusion might take place. Here, the google interface is smart in noting that you typed your search incorrectly. It suggests to you what you were actually searching for. It also points out ways you can see more options or share notes.
Give Feedback
The Interface elements are giving you feedback about whether your whether you entered something in incorrectly.
Let the User Know Where They Are in the Process
It’s telling the user where they are in the process and how many more steps they have left.
A Progress Bar
A Progress Bar