- 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 efļ¬cient, 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 efļ¬cientāor just plain happierāby
contact with the product, then the
designer has succeeded.ā
A brief history of UX
16. ļ¬rst GUI
ļ¬rst mouse
ļ¬rst computer-generated bitmap graphics
> inspired Apple Macintosh
Xerox PARC
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 ļ¬xed anchor points to guide
them through the content
Donāt make users think
45.
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 ļ¬nd 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 aļ¬evering
- Uur aļ¬evering
- Datum vertrek
- Type transport
- Naam Chauļ¬eur
- Contactgegevens chauļ¬eur
- Opmerking transport
54. But ļ¬rst, 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 ļ¬rst 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 ļ¬rst 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
80. 360Ā° user experience.
Forms
- Show whatās
mandatory / optional
- Use āOptionalā as
label only when there
are many mandatory
ļ¬elds
Input ļ¬elds
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 ļ¬lling in input ļ¬eld
- 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
Deļ¬ne
Requirement
Analysis
Speciļ¬cation
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 & Deļ¬ne
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
- Deļ¬ne the deadlines
- Create high level estimation
Deļ¬ne 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 ļ¬ow 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 ļ¬nds 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 deļ¬ning 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
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 diļ¬erent 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
ļ¬aticons.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