Upload
jacques-woodcock
View
129
Download
6
Tags:
Embed Size (px)
DESCRIPTION
What do UX specialist and PHP developers have in common? Probably more than you are aware. I will be doing a session covering what UX is, how it's different than UI and how UX is a close cousin to development with plenty of "how to get started" info. So come join us this Oct for a light philosophical discussion on disciplines and how to get start doing UX in your programming life.
Citation preview
Introduction to UX for DevelopersJacques Woodcock
@kitportal@jacques_thekit
A little about me...
- Degree in Design
I started by getting my degree in design...
- Degree in Design
- Multimedia Designer
...then started doing multimedia design...
- Degree in Design
- Multimedia Designer
- Multimedia Programmer
...then multimedia programming...
- Degree in Design
- Multimedia Designer
- Multimedia Programmer
- Coldfusion, Javascript, PHP
...then started learning most web technologies....
- Degree in Design
- Multimedia Designer
- Multimedia Programmer
- Coldfusion, Javascript, PHP
- Project Managment
...then on to project management...
- Degree in Design
- Multimedia Designer
- Multimedia Programmer
- Coldfusion, Javascript, PHP
- Business Dev, Ops Managment
- Project Managment
...business development and operations management...
- Degree in Design
- Multimedia Designer
- Multimedia Programmer
- Coldfusion, Javascript, PHP
- Business Dev, Ops Managment
- Project Managment
- Strategy
... and am now focusing on strategy.
Let’s get started
What is UX?
1st
View
It is NOT the View
View = UI
(UI = User Interface)
UX is
Model View Controller+ + + So Much More
“UX is the technical study of how users interact with your product.”
If I were to order web disciplines into a diagram, it might look like this...
Business Strategy
UX
Technical Scope
User Interface
Business Strategy is your base then you build on that with your UX which defines your Technical Scope and is presented with your User Interface.
Business Strategy
UX
Technical Scope
User Interface
UX is crucial to defining your technical scope and thus your project.
A Quick History
Human interaction with technical systems started being studied post WWII
They found that even operators who’s live depended on using a technical system, still ran into human limitations.
The 80’s & 90’s
When the computer started dominating the workplace, user-centered design took on a bigger importance.
Today
Today, as the discipline has evolved, we look more at the psychological aspects of human interaction as opposed to just the usability of an interface.
5 Principles of UXWhitney Hess
1. Understand the problem
Whitney Hess
1. Understand the problem
2. Don't hurt anyone
Whitney Hess
1. Understand the problem
2. Don't hurt anyone
3. Make things simple and intuitive
Whitney Hess
1. Understand the problem
2. Don't hurt anyone
3. Make things simple and intuitive
4. Acknowledge the user is not like you.
Whitney Hess
1. Understand the problem
2. Don't hurt anyone
3. Make things simple and intuitive
4. Acknowledge the user is not like you
5. Have empathy
Whitney Hess
Sound Familiar?
1. Understand the problem
2. Don't hurt anyone
3. Make things simple and intuitive
4. Acknowledge the user is not like you
5. Have empathy
Whitney Hess
1, 3, 5... these are similar to principles of development.
Expanded to 20Whitney Hess
My Favorites?
Here are some of my favorites.
Present few choicesMy Favorite Principles
We all know Apple is the king of fewer choices, yet they have the best user experience on the market.
Present few choicesMy Favorite Principles
The more choices a person is presented with, the harder it is for them to choose. This is what Barry Schwartz calls The Paradox of Choice. Remove the "nice to haves" and focus instead of the necessary alternatives a person needs to make in order to greatly impact the outcome.
Create a visual hierarchy that matches the user's needs
My Favorite Principles
"Visual hierarchy" is a combination of several dimensions to aid in the processing of information, such as color, size, position, contrast, shape, proximity to like items, etc.
Provide contextMy Favorite Principles
If what users find when they get to your site/product isn't close to what they predicted, chances are they're going to give up and go elsewhere
Use appropriate defaultsMy Favorite Principles
Providing preselected or predetermined options is one of the ways to minimize decisions and increase efficiency. But choose wisely: if you assign the defaults to the wrong options (meaning that the majority of people are forced to change the selection), you'll end up creating more stress and processing time.
Make actions reversibleMy Favorite Principles
There is no such thing as a perfect design. No one and nothing can prevent all errors, so you're going to need a contingency plan.
Provide feedbackMy Favorite Principles
tell them why they're waiting. Tell them that you're working. Tell them you heard them and offer the next step along their path. Design is not a monologue, it's a conversation.
Be consistentMy Favorite Principles
When things don't match up between multiple areas, the experience can feel disjointed, confusing and uncomfortable. People will start to question whether they're misunderstanding the intended meaning or if they missed a key cue.
If I were to add 1...
Don’t be lazyMy Favorite Principles
In the battle to “just get it launched” you need to place followthrough at the top of the list. These might be your principles, but that don’t mean squat if you don’t apply them.
Why is UX not UI?
UX defines your features, user flow and product personality.
UX: - checking in- sending messages
- tweeting, liking, +1ing- the process to do these tasks
UI defines the screen style and layout of those features.
UI: - button styles- colors- content size
UI == Aesthetic Design
UX == Features and interacting with those features.
UX will define what the UI must create through wireframes.
ATTENDEE NAME: EVENT: National Conference
Project: The Kit CMSDeliverable: Wireframes | Managers | Event Manager | Manage Attendee Records | View AttendeesBig Heart Design | August 24, 2008
The Kit Logo LOGOUT | MY ACCOUNT | CONTACT US | HELPWELCOME MARTHA TAYLOR!
QUICK PAGE EDIT
PAGE ORDER
SITE FILES
HOME PAGES RELATIONSHIPS MANAGERS
LOGOUT | MY ACCOUNT | CONTACT US | HELP WELCOME MARTHA TAYLOR!The Kit Logo
NEW PAGE
MANAGE ATTENDEE RECORDS KIT NEWS
News headlines #1News headlines #2News headlines #3News headlines #4News headlines #5
Attendee Status Actions
Matt Carlisle
Jacques Woodcock
Paid
Unpaid
View | Mark as Unpaid | Delete
View | Mark as Paid | Delete
GO
<< Back | National Conference Attendee Report
PRINT ATTENDEE RECORD
UX will direct with a wireframe. Here is an example of a wireframe for a user interface.
UI will convert the wireframe into an interface.
UI specialist will be a member on a UX team.
UX & Developers are cousins
Both try to solve a problem.
Both break a system down to basic tasks.
Both describes how a function interfaces with the overall system.
Both plan for input and output.
Shared Goals; Different Focus
Developers think of what's best for the system
UX thinks of what's best for the user
Developer: “Is the process an efficient use of resources?”UX: “Is the process efficient for the user?”
Example
Let’s look at the focus of those questions in an example.
Example: Remote
Let’s look at the remote.
Devs:
Want to make sure all functionality is assessable to the user, typically in one menu.
Devs:
Which leaves you with this.
UX:
UX designers understand the principles of user interaction.
UX:
UX will deliver a product like this.
Not the same level of functionality,but a mountain of difference in usability.
Disciplines can be broken down to 3 areas.
1Guiding principles
1Guiding principles 2 Processes
3 Tools1Guiding principles 2 Processes
1Guiding principlesUX
Dev
UX and Dev share similar principles, as we discussed.
UX
Dev2 Processes
- Listen- Ask questions- Define a goal- Define milestones
They even start with a similar process.
1Guiding principles 2 Processes
UX Processes
Dev Processes
It’s halfway through the process that they split.
1Guiding principles 2 Processes
UX Processes >
Dev Processes > Technical Scope
User Flow
UX starts to focus on the user flow while devs start to focus on the technical scope.
UX: User Flow
Dev: Technical Scope
Project
Good projects have both
UX: User Flow
Dev: Technical Scope
Project
, and they communicate.
UX: User Flow
Dev: Technical Scope
Project
User flow should define the technical scope.
UX: User Flow
Dev: Technical Scope
Project
Technical scope should not influence the user flow...
UX: User Flow
Dev: Technical Scope
Project
...beyond technical limitations.
Why?
We build for users.
Average users will trade functionality for usability.
You have to know your users.
Great UX specialist understand development.
Efficient UX specialist have coding knowledge.
UX specialist prototype.
UX specialist prototype. Papered process flows
Some present papered process flows.
UX specialist prototype.
AJAX/JQuery
Some prototype in AJAX/JQuery
UX specialist prototype.
AJAX/JQuery
HTML/CSS
HTML/CSS
UX specialist prototype.
AJAX/JQuery
HTML/CSS
PHP
and even PHP
Great UX specialist write prototypes that can be pushed to developers for final production.
Use prototypes to streamline development.
AJAX/JQuery
HTML/CSS
PHP
Development Environment
You can even use these prototypes to streamline the development process.
How do I get started?
1st
Change Mindset
How can I organize these features to create an efficient system?
From
How can I organize these features for an efficient user experience?
To
2nd
Interact with REAL users
Take them out for coffee, lunch, or just chat on the phone.
KNOW YOUR USERS!
3rd
PrototypeSketch, build, test, adjust, repeat
Sketch
Build
Test
Adjust
PrototypeSketch - Paper
Here is a user flow I did for a process for users to take content from the system, get a short url and pass it to the social sphere. Bottom right is a rough UI and the bottom left is a rough data scheme.
PrototypeSketch - Paper
Here is an interface sketch, the first is the overall interface, the top right is the interface when interaction is initiated and the last is the new user interface that gets shown.
PrototypeSketch - Wireframe
Next you wireframe. Here is the social process’s interface.
PrototypeBuild
Here is the user sketch built out. The top is the default state, the next is the interface after the new function has been initiated.
PrototypeBuild
Here is the new screen they are presented with to complete their process.
PrototypeTesting
- Focus Groups- Screen Capturing- Eye Tracking- Heat Mapping- Analytics
Testing can be done with any of the above.
PrototypeTesting: Focus Groups
A focus group involves encouraging an invited group of participants to share their thoughts, feelings, attitudes and ideas on a certain subject, feature or user flow.
PrototypeTesting: Focus Groups
- Prepare agenda
Start by preparing an agenda.
PrototypeTesting: Focus Groups
- Prepare agenda- Invite 1 to 6 target users
Next invite 1 to 6 target users, depending on the agenda. 1 works better for them interacting with website and 6 is best for a Q&A.
PrototypeTesting: Focus Groups
- Prepare agenda- Invite 1 to 6 target users- Meet in quiet room
You want to be able to hear each other.
PrototypeTesting: Focus Groups
- Prepare agenda- Invite 1 to 6 target users- Meet in quiet room- Record session
You must record, either video or audio, video if they are interacting. This allows you to reference back and justifies any changes in strategy.
PrototypeTesting: Focus Groups
- Prepare agenda- Invite 1 to 6 target users- Meet in quiet room- Record session- Ask them to walk through, or walk them through tasks
PrototypeTesting: Focus Groups
- Prepare agenda- Invite 1 to 6 target users- Meet in quiet room- Record session- Ask them to walk through, or walk them through tasks- Document feedback
Documenting feedback should be highlights as you have a recording to reference back to for details.
PrototypeTesting: Eye Tracking
“Eye tracking is the process of measuring either the point of gaze ("where we are looking") or the motion of an eye relative to the head.”
PrototypeTesting: Eye Tracking
This works by placing a camera on top of the user’s computer.
PrototypeTesting: Eye Tracking
It then beam infrared light out that is in turn reflected back by the human eye.
PrototypeTesting: Eye Tracking
In the end, you can pinpoint where the user’s eyes move to.
PrototypeTesting: Screen Capturing
Screen capturing allows you to see exactly what your users are doing on your site, down to all sporadic mouse movements, by recording their complete session.
PrototypeTesting: Screen Capturing
I love this tool.
PrototypeTesting: Screen Capturing
Demo
Can’t embed demo. Sorry.
PrototypeTesting: Screen Capturing
Some providers:User Flyhttp://userfly.com
ExactoStatshttp://exactostats.com/
ClickTalehttp://www.clicktale.com/
Some providers of Screen Capturing.
PrototypeTesting: Heat Mapping
“A heat map is an easy way to understand what users do on your site. It’s a visual representation showing you where people click and what users do.”
PrototypeTesting: Heat Mapping
Many software solutions for making heat maps.
PrototypeTesting: Heat Mapping
Most are based off of user click patterns.
PrototypeTesting: Heat Mapping
Notice the colors
PrototypeTesting: Heat Mapping
Cool colors are few clicks
PrototypeTesting: Heat Mapping
Warm colors are most clicked
here you will see most people use this page to login.
PrototypeTesting: Heat Mapping
Some providers:Crazy Egghttp://www.crazyegg.com/
Omniturehttp://www.omniture.com/en/
Clickdestinyhttp://www.clickdensity.com/
Google Analyticshttps://www.google.com/analytics/
And many others
Google actually only gives you the percentage of clicks per link, but that’s still useful.
PrototypeTesting: Analytics
We all know what analytics are, but do we understand how they help usability?
PrototypeTesting: Analytics
First, they clarify what works in your UI.
PrototypeTesting: Analytics
Next, they justify your content, or justify removing some of your content.
PrototypeTesting: Analytics
Lastly, they can tell you if your user flow is working.
PrototypeTesting: Analytics
There are many names for this, funnels, goals, paths. I like conversion as it implies your user flow is taking a user from the start to your desired destination.
PrototypeTesting: Analytics
This works by tracking how your user comes in, where they go and where they end up.
It’s easy when you have a finite task, such as share a photo. You can tell how your conversion is doing by how many photos are being shared. Still, it’s good to know how your users come in and then find the share function.
PrototypeTesting: Analytics
So you have your site.
Home
About Login Sign Up Support
Team Share
Service
Blog
Post 1
Post 2
PrototypeTesting: Analytics
You define a successful conversion follows this path.
Home
About Login Sign Up Support
Team Share
Service
Blog
Post 1
Post 2
PrototypeTesting: Analytics
With analytics, you find that users follow this path.
Home
About Login Sign Up Support
Team Share
Service
Blog
Post 1
Post 2
PrototypeTesting: Analytics
There’s something wrong with your user experience.
So you...
Sketch
Build
Test
Adjust
PrototypeAdjusting
Adjust
Repeat
To Sum Up
UX != UI
UX
UI
UX owns UI
UX like Development
UX like DevelopmentShared goals, different focus
UX == Development
In the case of prototyping.
Get Started
Get StartedChange Mindset
Get StartedChange Mindset
Interact with REAL users
Know your users!!!
Get StartedChange Mindset
Interact with REAL users
Sketch, build, test, adjust, repeat
One last thing
Pay attention to design.
Okay, I know a lot of developers are going to scrum by this word, but trust me, it’s okay. We’re not going to talk color palates, nor shading.
Pay attention to design.
You may not be a designer, but you have opinions on design, and that’s okay. So quickly...
Design
Design covers a wide variety of definitions and skills. It can be one of the most misleading disciplines out there.
Design == Creativity
Most people think design equals creativity.
Design == Creativity
They are wrong. I know so many people who are good with UX design that have no ability to “design.”
Design is simply the structuring of elements into a pleasing, or usable, product for the target audience to consume.
Design is simply the structuring of elements into a pleasing, or usable, product for a target audience to consume.
Design is simply the structuring of elements into a pleasing, or usable, product for the target audience to consume.
Don’t get me wrong. Art is something totally different than design. There’s emotion, thought, pain, love and so much more that goes into art.
Design
But we are talking design.
UX Design
And more specially UX design.
Sketch
Build
Test
Adjust∞
You piece together a user experience from what’s proven to work for the user by getting to know the user, testing your product, adjusting your offering and repeating. ∞
Pek Pongpaethttp://uxmag.com/design/user-experience-for-developers
Whitney Hesshttp://www.uxmag.com/design/guiding-principles-for-ux-designers
Justin Davishttp://www.maderalabs.com/blog/five-things-every-developer-should-understand-about-ux/
#more-1051
Everett McKay http://www.uxdesignedge.com/2010/03/getting-started-in-interaction-design/
David Leggetthttp://www.uxbooth.com/blog/top-29-free-ux-tools-and-extensions/
Focus Groupshttp://www.webcredible.co.uk/user-friendly-resources/web-usability/focus-groups.shtml
29 Free Toolshttp://www.uxbooth.com/blog/top-29-free-ux-tools-and-extensions/
Dr. Tobias Komischke http://blogs.infragistics.com/pixel8/media/p/95683.aspx
References
@kitportal@jacques_thekit
Introduction to UX for Developers Jacques Woodcock