- what is UX?
- why is it important?
- a brief history and future of UX
- general ux principles
- enterprise ux
- ux project approach
- ui design principles
- ux tools
6. improve customer satisfaction and loyalty through the
utility, ease of use, and pleasure provided in the interaction
with a product.”
The goal of UX
9. What we’ll cover
A brief history and future of UX
What is UX and why is it important?
UX Principles:
- General interface principles
- Enterprise UX
UX Project approach
UI Principles
12. A brief history of UX
Since the beginning of the Machine Age
Henry Ford pioneered ways to make
human labor more efficient, productive
and routinized
13. 1940: ergonomics & human factors
Focus on design of things to best
align with human capabilities
A brief history of UX
14. 1950: cognitive science
& augmented reality
potential of computers to serve as a
tool to augment human mental
capacities
A brief history of UX
15. 1955: ‘Designing for People’
by Henry Dreyfuss
“When the point of contact between the
product and the people becomes a point of
friction, then the [designer] has failed. On
the other hand, if people are made safer,
more comfortable, more eager to purchase,
more efficient—or just plain happier—by
contact with the product, then the
designer has succeeded.”
A brief history of UX
16. first GUI
first mouse
first computer-generated bitmap graphics
> inspired Apple Macintosh
Xerox PARC
A brief history of UX
17. 1970’s: Rise of Human Computer
Interaction
A brief history of UX
38. What is UX?
“Experience design is the design of anything, independent of
medium or across media, with human experience as an
explicit outcome and human engagement as an explicit goal.”
Jesse James Garrett
“UX is the tangible design of a strategy
that brings us to a solution”
Erik Flowers
44. Users don’t read, they scan.
they search fixed anchor points to guide
them through the content
Don’t make users think
46. Don’t make users think
my application is obvious and self-explanatory!
avoid user’s question marks
47. Keep it as simple as
possible
- My users need an answer quick
- Keep it to the minimum
- Hide lesser features
48. Keep it as simple as
possible
If a task gets too big, break it up
49. - my users want control.
- they like consistent data
- presentation throughout the site
Keep it consistent
50. Use conventions
& patterns
- Conventions reduce the
learning curve
- users follow their intuition
if we find something that
works, we stick to it
- Innovate only when you think
you have a better idea (Steve
Krug)
52. 360° user experience.
- Determine the problem that needs to be solved
- Explore competition: how did they solve it?
- Recreate it for your problem
- Go out and learn about the patterns
How do i use the right pattern?
53. 360° user experience.
Package Delivery Application
- Naam Leverancier
- Naam Ontvanger
- Contactgegevens Leverancier
- Contactgegevens Ontvanger
- Type product
- Grootte product
- Naam Product
- Opmerking product
- Datum aflevering
- Uur aflevering
- Datum vertrek
- Type transport
- Naam Chauffeur
- Contactgegevens chauffeur
- Opmerking transport
54. But first, a word on sketching
To sketch you only need 3 shapes
57. Use effective copy
- Talk business
- my users appreciate quality
and credibility
- content is more important than
design that supports it
58. Don’t waste users’ patience
- Require little effort from my user
- Let users play around with an application
before asking them for sensitive data
- if a user doesn’t really need something,
don’t bother the user asking
- Use good defaults when using forms
- Predict what the user will do first and
make that task easy!
59. Focus users’ attention
- Give users need a sense of orientation
& direction
- Give users easy labels, call to action
63. Steal from the best
There were smartphones before
iPhone but Apple was the first one to
create a good UX
64. Test early, test often!
- TETO principle
- 1-10-100 rule
- iterative process
- developers are unsuited to test their own code,
- so are designers unsuited to test their own design
1 10 100
66. Good UX principles
- Don’t make users think
- Keep it as simple as possible
- Keep it consistent
- Use conventions & patterns
- Give users control
- Use effective copy
- Don’t waste users’ patience
- Focus users’ attention
- Use whitespace
- Design for edge cases
- Create for playfulness
- Steal from the best
- Test early, test often
69. Problem
- Context of use is different. (Business, not pleasure.)
- Enterprise applications aren’t “sexy.”
- Stakeholder vision doesn’t always align with user needs.
- Enterprise applications are complex, task-based systems
- Personas often include Super Users and Casual Users
- Mobile isn’t always a given
- Companies adopt a “just get it done” attitude
71. Solution?
- Give those tools the same attention you give consumer-facing products.
- Test with your end users (they are in your company)
- Design for simplicity
Good design enables enterprises to do the work they were founded to do.
Reward
73. How do we achieve simplicity with all the security and technical concerns,
business processes, and compromises across business units to consider?
Design for simplicity?
- use a subtle background
- use white
- use a nice type
- use nice colors with hues
- round corners
- design skins and themes
and let users customize
the application
83. 360° user experience.
Forms
- Topaligned results in quickest
completion time
- Best for multi language support
- Require most space
Label location
84. 360° user experience.
- Right aligned is easier to scan than
left aligned
- poor multi language support
- Left = harder to concentrate
Forms
Label location
85. 360° user experience.
- Inline labels require no space
- User has no clue on label when
he is filling in input field
- More for mobile applications
Forms
Label location
92. 360° user experience.
- Make distinction between ‘primary’
and ‘secondary’ actions
- Direct people to successful
outcomes
Action buttons
Primary vs Secondary
93. 360° user experience.
- Place secondary buttons ‘out of
sight’
- Buttons are best placed under a
form
- Depends on pattern
Action buttons
Button location
94. 360° user experience.
- Name buttons as close to context as
possible, not vaguely
Action buttons
Naming Conventions
96. 360° user experience.
How about dashboards?
- How am I doing? What’s going on?
- What’s my recent activity?
- What are the problems I need to
know about?
- What’s my to do?
- What are the trends in my business?
97. 360° user experience.
How about dashboards?
- Dashboards should be highly visual
- Who is the user?
- What are they responsible for?
- What is the most important for
them to know?
- What do they need to take action
on?
- What will cause a problem for them
if it does not go well?
101. What makes Enterprise UX work?
- Build the right internal team
- Foster Collaboration (the executive team, your organization’s existing teams, and
your users.
103. The lifecycle of a project
Discover
Technology
Strategy
Formulation
Define
Requirement
Analysis
Specification
Design
Architecture
Design
Documentation
Develop
Standards
Best Practices
Driven SDLC
Deploy
Production
Operations
Support
104. UX Flow
- Capturing the project ecosystem
Get to know the business &
Business Requirements
> Project objectives
- Plan the project
Project Approach: Methodology
- Discover & Define
Task Models & User Journeys
Sketching
- Design & Build
Wireframing & Prototyping
Usability Testing
- Visual Design
106. Kickoff meeting
WHAT SHOULD THE APPLICATION DO?
Project objectives
help you:
- ask the right questions
- plan research with users
- details the ideas from
stakeholders
- create effective interaction
designs
- manage request for changes
- understand the company culture
- what project will i be working on?
- why is the project important to the company?
- what are the project objectives?
Write down in one sentence
108. - Specify the must-haves and nice to haves within budget
- Create a product backlog with user stories
- Create sprints
- Define the deadlines
- Create high level estimation
Define the scope
114. User Journeys
- Set the context: Where is the user? What is
around him?
- Progression: how does each step enable him to
get to the next?
- Device: what device is he using? Is he/she a
novice, expert
- Functionality: what type of functionality does
he/she expect? is it achievable?
- Emotion: what is their emotional state in each
step? is he/she engaged, bored, annoyed
116. Experience map
- understand the product/service interactions from a users’
point of view
- pinpoint gaps in the overall customer experience which
makes it easier to identify areas for product innovation
117. Task Models
- Description of activities a user needs to
perform in order to reach their goal
- Helps you understand how your users
interact with information provided by the
product
- Can help you choose features for a widget
(eg comparison table, sharing widget,…)
- Can help you decide: eg is the widget handy
here in the task flow or elsewhere?
- Helps you understand how users think
about the task at hand
118. - IA should solve information overload
- IA is commercially important
> how well a user finds the product or
service
- Makes SEO easier
- Will result in site map or navigation
Information Architecture
119. - Must meet your user group
- Information based on research
- Can never replace real user testing
Personas
121. Start defining your experience
Prioritise and visualize through:
- customer journey
- task model or task analysis
- experience map
- information architecture
BUILD THE ARCHITECTURE
124. Good UX principles Prioritise pages
- specify templates
- order them in rank of
prioritisation
- Don’t make users think
- Keep it as simple as possible
- Keep it consistent
- Use conventions & patterns
- Give users control
- Use effective copy
- Don’t waste users’ patience
- Focus users’ attention
- Use whitespace
- Design for edge cases
- Create for playfulness
- Steal from the best
- Test early, test often
SKETCH THE SCREENS
133. Different forms of user testing:
- Guerrilla testing
- Stakeholder interview
- Contextual research
- Call center listening, email reading,…
- customer surveys
- …
User Testing
134. Usability Testing
- Let users perform tasks on an existing website
- Write down quotes or remarks from users on sticky notes
- Develop a test plan
- Choose participants
- Analyze data
remote tools:
usertesting.com
139. 360° user experience.
UX
is about
analysing requirements, functionality
and usability
UI
is about visualising the process
in a user-friendly and attractive manner
140. 360° user experience.
patterns & best practices
+ visual language
+ consistency
= good usability
The equation of good UX
144. - Keep it lightweight, no overkill with
content
- Should convey easily what we do or offer
- What is the key task?
- should inspire
- should show that it’s regularly updated
(eg new products, dates, facebook likes)
Homepage
162. 360° user experience.
- Balance between creativity and consistency
- “Creativity involves breaking out of established patterns in
order to look at things in a different way.”
Consistency & Creativity
163. 360° user experience.
Going against proven UI patterns is possible
if you know what you’re doing
but will mostly damage your design
166. 360° user experience.
user expectations aren’t only preferences
they’re more than that,
they are habits
167. 360° user experience.
Internal Consistency
all outgoing links
are in blue
all other links are
underlined on
hover
MINIMAL
EXPLANATION
TO USER !
168. 360° user experience.
- keep colors consistent
- keep same typography rules
- keep terminology the same
- keep icons consistent
- consistent layout across pages
- keep interactions and animations the same
- keep consistent with other internal products
General rules for consistency
173. 360° user experience.
UX
is about
analysing requirements, functionality
and usability
UI
is about visualising the process
in a user-friendly and attractive manner
181. 360° user experience.
The Noun Project
Kuler
Paletton
Coolors
Skala Preview or Adobe Preview CC
Invision
Flinto
flaticons.com
great link to see all tools:
http://market.designmodo.com/tools/
Tools for the UI Designer
182. 360° user experience.
Good reads
Designing Interfaces,
O’Reilly
Don’t Make Me Think
Steve Krug
A project guide to UX design
Russ Under
Consistency in UI Design
UXPin (Free Ebook)
183. 360° user experience.
Good reads
About Face
Alan Cooper
Prioritizing Web Usability
Jakob Nielsen
Designing The Obvious
Robert Hoekman
The Design of Everyday Things
Donald Norman
184. 360° user experience.
Continuous
a future where all things merge into one seamless
experience, consistent, complementary and continuous.
@Continuous_UX