An Introduction to User Experience Design By Elena Donets
An introduction to user experience design
Jan 28, 2015
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
An Introduction to User Experience Design
By Elena Donets
A user interface, also called a "UI" or simply an "interface," is the means in which a person controls a software application or hardware device.
User experience (UX) involves a person's behaviors, attitudes, and emotions about using a particular product, system or service.
GUI – Graphic User Interface
UI or UX? Definition
User Interface design is the part of the product that faces the user when he looks at the site, and the User Experience is how they feel when they look at the site.
The Difference UI or UX?
The History UI / UX Design
1900s
Taylorism, Machine Age
1940s
Toyota Production System
1980s
Personal Computing
1990s
The Web
2000s
Mobile and Tablet
The First Web Page (WWW) in 1992 Case Studies
Yahoo! in 1996 Case Studies
New York Times in 1996 Case Studies
MSN in 2000
Yahoo! in 2002
BBC in 2008
What Problem do we have today?
The Present - 2013
RWD allows users to better read and experience the web from their laptop or desktop, as well as, tablet and cell phone.
Responsive web templates are designed to look great on a variety of different screen sizes, so anyone can view your site in a crisp and clear manner where ever they go.
Responsive Web Design (RWD) The Present - 2013
A website with flat design lacks gradients, but incorporates solid colors, white space, and crisp typography.
Flat Design The Present - 2013
The Parallax web design trend has grown in popularity because it creates an illusion of depth (or a faux-3D effect) as you scroll through the webpage. Various images on the site will move at different speeds or change in size or at dimension to the site.
Parallax The Present - 2013
If you want to convey a powerful message on your site, utilize a full-screen photo launch page. Your viewers will be immediately transported into another world of your creation.
Full-Screen Photo Launch Pages The Present - 2013
The navigation panels we have seen on certain apps are now being integrated into websites, because of their interactive nature. More and more websites are offering these enhanced scrolling and navigation panels to help users navigate websites in a fun and effective way.
Advanced Page Scrolling and Navigation
The Present - 2013
THE UX DESIGN PROCESS
“Design and marketing aren’t just as important as engineering: they are way more important.”
Dave McClure
Founder of 500 Startups
UX is the air successful startups breathe...
As a UX designer you’re not only interested in a usable door handle. You want to create something that will encourage people to open doors and will provide a unique experience. (Marcin Treder, UX Design for Startups)
Step 1 : Define your users
Step 2 : Define your product
In the age of user experience design your startup needs to focus on users’ problems rather than on technology
only.
Step 3 : Research
Don’t daydream, don’t say “my mom wouldn’t get it”, or “well I would use it!” - reach out to your customers and ask them what their thoughts are. (Marcin Treder, UX Design for Startups)
Step 4 : User Testing
THE UX DESIGN TOOLS
A prototype is a middle-to-high fidelity
representation of the final product, which simulates user interface interaction.
The UX Design Tools Prototype
• Axure http://axure.com • FluidUI http://fluidui.com • Hotgloo http://hotgloo.com • iRise http://irise.com • Just In Mind http://justinmind.com • Pidoco http://pidoco.com
The term ‘mockup’ was used for years in regard to high fidelity, static, design representation. It’s a kind of draft (or even a final version!) of visual design used to get a buy-in from stakeholders.
The UX Design Tools Mockup
10 Completely Free Wireframe and Mockup Applications
The UX Design Tools Economic and behavioral
metrics
The UX Design Tools A/B testing
• Adobe Test and Target http://www.adobe.com/products/testandtarget.html
• Artisan http://useartisan.com • GlobalMaxer http://www.globalmaxer.com • Optimizely http://optimizely.com • Visual Website Optimiser http://visualwebsiteoptimizer.com
“A design isn’t finished until somebody is using it”
Related Documents
