SlideShare ist ein Scribd-Unternehmen logo
1 von 160
Downloaden Sie, um offline zu lesen
http://www.flickr.com/photos/anotogroup/4829620481/
Designing Web and Mobile Forms
chuichui.tan@cxpartners.co.uk
@ChuiSquared (SinaWeibo,Twitter)
Chui ChuiTan 陈璀璀
Monday, 22 November 2010
http://www.flickr.com/photos/aok/2317942287/
Why forms
Forms are
everywhere for
different purposes
Monday, 22 November 2010
http://www.flickr.com/photos/mikeblogs/2849934090/
People hate filling in forms...
http://www.flickr.com/photos/evilerin/3078856253/
Monday, 22 November 2010
http://www.flickr.com/photos/evilerin/3078856253/
How users complained
about filling in forms
on Twitter
Monday, 22 November 2010
http://www.flickr.com/photos/mikeblogs/2849934090/
http://www.flickr.com/photos/evilerin/3078856253/
How users complained
about filling in forms
on Sina Weibo
Monday, 22 November 2010
http://www.flickr.com/photos/evilerin/3078856253/
It’s about the experience
http://www.flickr.com/photos/furious-angel/297586977/
It’s the experience that
counts. Not just the
speed of completion.
Monday, 22 November 2010
http://www.flickr.com/photos/evilerin/3078856253/
Being in control
http://www.flickr.com/photos/mcbeth/261263730/
Users want to feel
in control
Monday, 22 November 2010
http://www.flickr.com/photos/mikeblogs/2849934090/
http://www.flickr.com/photos/evilerin/3078856253/
Why do I need to fill in this form?
为什么我需填写这表格?
Monday, 22 November 2010
http://www.flickr.com/photos/evilerin/3078856253/
Remind them....
Remind them about the
benefits of filling in the
form
Monday, 22 November 2010
http://www.flickr.com/photos/evilerin/3078856253/
... why they are filling in this form
Monday, 22 November 2010
http://www.flickr.com/photos/evilerin/3078856253/
... how long it takes
Being up front about the
time required to
complete the form
Monday, 22 November 2010
Form layout 表格布局
Monday, 22 November 2010
Avoid multicolumn layout
especially when the flow
of your form is
particularly important.
It’s impossible to guess
which order your users
are going to go for.
Monday, 22 November 2010
Longer gaze fixation
Shorter gaze fixation
Design to look like a
single piece of
information (e.g.
sharing a single label,
putting the fields close
to each other.
Exceptional cases
where you can have >1
fields in a row, e.g.
name, dates, time.
Monday, 22 November 2010
http://www.flickr.com/photos/mikeblogs/2849934090/
http://www.flickr.com/photos/evilerin/3078856253/
Labelling 标签
Each label alignment has
pros and cons.
Monday, 22 November 2010
Left aligned
Complete the form below:
Your email address
Your password
Confirm password
First name *
Surname *
Monday, 22 November 2010
Left aligned
Complete the form below:
Your email address
Your password
Confirm password
First name *
Surname *
Good points:
✓Tidier, clear layout
✓Easy to scan (labels)
✓High readability
Weak points:
‣ Longer completion time (higher
number of eye fixations, 2 visual
directions)
‣ Doesn’t work when you have long
labels
‣ Might not work for all languages
(important if you are designing for
international websites)
1 2
3 4
5 6
7
8 9
10 11
Monday, 22 November 2010
Right aligned
Monday, 22 November 2010
Right aligned
Good points:
✓ Label widths offer more flexibility
✓ Labels are closer to the input fields
Weak points:
‣ Longer completion time (due to higher
number of eye fixations)
‣ Doesn’t work when you have long
labels
‣ Might not work for all languages
(important if you are designing for
international websites)
1 2
3 4
5 6
7 8
9 10
Monday, 22 November 2010
Top aligned
Monday, 22 November 2010
1
2
3
4
3
4
3
Top aligned
Good points:
✓ Shorter completion time (less eye
fixation, 1 visual direction)
✓ Works for long labels (useful for
forms which require localisation)
Weak points:
‣ Requires more vertical screen space
‣ Form might look longer
‣ Requires good design of labels and
input fields (distance and spaces)
Monday, 22 November 2010
Below the fields
Good points:
✓ Neat and tidy
✓ Easy to scan (labels)
Weak points:
‣ Requires good design of labels and
input fields (distance and spaces)
Monday, 22 November 2010
Inline labelling
Monday, 22 November 2010
Be wary when using inline labelling
Nice and tidy, but...
Make sure labels
always appear in all
situations when input
is not entered.
Differentiate labels
from users’ input
Monday, 22 November 2010
How to do it
Each label alignment has
pros and cons. Choose
one which suits to your
form layout, design
constraint, form
objective, etc.
Monday, 22 November 2010
Mandatory or optional
必填或选填
Monday, 22 November 2010
Asterisk *
Not all users know what
an asterisk means
Asterisk indication is
often placed at the
inappropriate place, e.g.
not following the right
flow
Monday, 22 November 2010
Asterisk *
Monday, 22 November 2010
Asterisk *
Monday, 22 November 2010
No fixation at all
Users often don’t pay
attention to the
indication.
Monday, 22 November 2010
Postcode (mandatory)
Address line 1 *
Address line 2 *
Delivery instructions
Town/city *
Post code *
Country United Kingdom
Telephone number (day)
**
Mobile number **
Click here if you can’t find your postcode or your address is outside of the UK
* required
** We required at least one telephone number
Double asterisks
Sometimes asterisks are
used not only to
indicate mandatory
fields....
Monday, 22 November 2010
Sometimes an asterisk is
used to call out a
footnote
Monday, 22 November 2010
‘Required’
the term ‘Required’ is often
used to indicate mandatory
fields -> increase visual
clutter
Monday, 22 November 2010
(Optional)
Monday, 22 November 2010
All required
When all fields are
required..
Monday, 22 November 2010
All fields are required
Monday, 22 November 2010
When all fields are required
for a long form...
Monday, 22 November 2010
Ask yourself...
“Is this piece of information so valuable that
it’s worth risking the possibility that users
might leave your site?”
Monday, 22 November 2010
Case Study: Imaginary Landscape Contact Us form
Simplified their contact form
from:
12 fields (4 required) to 4 fields
Monday, 22 November 2010
Results
Number of forms submitted
Conversion rate
140%
120%
Monday, 22 November 2010
Imaginary Landscape Case Study
Making forms more efficient
Number of fields available
NOT number of required fields
Monday, 22 November 2010
Grouping & chunking
表格分割和分组
Monday, 22 November 2010
Without grouping and
chunking
Monday, 22 November 2010
With grouping and chunking:
Break the form into
manageable chunks, putting
relevant fields together to
make it ‘feel’ shorter
Monday, 22 November 2010
Chunking Separate them with simple
horizontal lines...
Monday, 22 November 2010
Chunking
... or via shaded headings...
Monday, 22 November 2010
Chunking
... or coloured boxes
Monday, 22 November 2010
http://www.flickr.com/photos/evilerin/3078856253/
Grouping & chunking
Users don’t normally pay
attention to the headers...
Monday, 22 November 2010
Grouping & chunking
.... unless they’re shaded or
coloured.
Emphasise the headers if
you want your users to
read them
Monday, 22 November 2010
Input format 输入格式
Monday, 22 November 2010
Input Formatting
E.g. Click to find out about
the input formatting
Various ways to explain
about the input formatting
Monday, 22 November 2010
Input Formatting
E.g. Long description about
the input formatting
Monday, 22 November 2010
Input Formatting
E.g. Short description
beside the label
Monday, 22 November 2010
Input Formatting
When there is no
indication of how a
mobile phone number
should be entered,
make sure your system
can accept all kinds of
formatting
Monday, 22 November 2010
07712341234
UK phone number
07712 341234
00 44 7712 341234
(44) 7712 341234
+44 (0) 7712 341234
07712 341 234
077 1234 1234
(10) 69345464
China phone number
86 10-69345464
86-10-69345464
010-69345464
Phone numbers can be
presented in various formats
Monday, 22 November 2010
Input Formatting
Show input boxes which
match with the
acceptable format
Monday, 22 November 2010
Input Formatting
Or show an example of
the acceptable input
format
Monday, 22 November 2010
Input Formatting
Monday, 22 November 2010
Tell them in advanced (clearly) the acceptable format
电话 示例:010-12345678-0000
Provide fields following the acceptable format
Credit card number
Let the system handle all the formatting, if possible
If it looks flexible, make sure it is flexible
Use a good system validation and provide clear error
message
Best option
Monday, 22 November 2010
Ultimate rule
The system should handle the formatting
NOT the users
Monday, 22 November 2010
Tips & descriptions
备注和提示
Monday, 22 November 2010
Why (do we use tips and descriptions)
To explain why you need this
information
Transparency
encourages users to
provide their details
Monday, 22 November 2010
Why (do we use tips and descriptions)
To describe the acceptable
input format
Monday, 22 November 2010
Where (do tips and descriptions appear)
Monday, 22 November 2010
Where (do tips and descriptions appear)
Monday, 22 November 2010
Where : Proximity
Space
Inappropriate use of space
Monday, 22 November 2010
Where : Proximity
At the end
At the bottom
Inconsistent position
Monday, 22 November 2010
Where : Position
Password: *
Confirm Password: *
*Your password must be between 7 and 20 characters in length
*Your password must contain both letters and numbers
Inappropriate position
Monday, 22 November 2010
“Looks like there’s a huge chunk of writing, very messy.
I didn’t read them.”
Descriptions underneath
fields can easily clutter
the page (especially if
they are not
differentiated visually
from the labels)
Monday, 22 November 2010
What (should the descriptions show)
Password: *
Confirm Password: *
7 to 20 letters and numbers
Short, succinct,
straight to the point
Password: *
Confirm Password: *
*Your password must be between 7 and 20 characters in length
*Your password must contain both letters and numbers
Avoid long winded,
unnecessary wordings
Monday, 22 November 2010
How (descriptions are being presented)
Placed around the
labels or input fields
(most common)
Monday, 22 November 2010
Placed around the
labels or input fields
(most common)
How (descriptions are being presented)
Monday, 22 November 2010
How (descriptions are being presented)
Appear when hover over
(users could easily
miss the descriptions.
Suitable to be used
when the descriptions
are not too important
or are not for
everyone)
Monday, 22 November 2010
How (descriptions are being presented)
Real time and inline
descriptions
Monday, 22 November 2010
How (descriptions are being presented)
Another example of
real time descriptions
Monday, 22 November 2010
Consistent position
Close to relevant fields
Spaces and proximity
Where
Meaningful, useful
Short, succinct, straight to the point
What
Depending on the type of tips (e.g. importance, urgency,
who are they for)
Depending on the content (e.g. length, purpose, importance)
How
Only when it’s necessaryWhen
Be wary when using realtime description
Monday, 22 November 2010
Validations 效验
Monday, 22 November 2010
Realtime validation
Be wary when using real time
feedback:
Useful when needs to be
conveyed urgently and
requires instant attention
Monday, 22 November 2010
Realtime validationValidation upon submit
Luke’s validation test
Monday, 22 November 2010
Results:Validation upon submitVs Realtime validation
Realtime validation
Success rates
Errors made
22%
22%
Satisfaction rating 31%
Completion times 42%
Number of eye fixations 47%
Monday, 22 November 2010
Be wary when using realtime validations
+ve:
“The tick is useful. It saves the hassle of
having to recheck what I’ve put in.” -ve:
“How could they know if I enter my name
wrongly? The tick is quite distracting.”
Monday, 22 November 2010
Be wary when using realtime validations
Only when answers are not obvious/not
straightforward
When
At the end of the input fieldsWhere
Prominently (avoid fading away)How long
What Clear about what the feedback means
(e.g. correct input, correct format, availability)
(for information that needs to be conveyed urgently and requires
users’ instant attention)
Monday, 22 November 2010
Error handling
当表单出现错误,该如何处理
Monday, 22 November 2010
Where: On top of the form
Error messages often
appear on top of the
form
Monday, 22 November 2010
Where: Highlight the error
Indicate where the
errors are: highlight
the relevant fields
Monday, 22 November 2010
Where: Highlight the error
Monday, 22 November 2010
Where: Highlight and anchor to the section
If it’s a long form,
anchor to the first
field with error
Monday, 22 November 2010
Where: Close to the relevant fields
Show errors close to
the relevant fields
Monday, 22 November 2010
What: Meaningful error message
Provide meaningful
error message
Monday, 22 November 2010
What: Direct to the point
First version: too many
unnecessary wordings.
New version: straight
to the point
Monday, 22 November 2010
Meaningful error messages
Meaningful & contextual messageWhat’s wrong
Where: which field(s)
What has/hasn’t happened
How to resolve
“There was an error in our credit card processing system.
Your card has not been charged.....”
Highlight the relevant fields
“.... please try again in 5 minutes or call us at
xxxxxxxxxx.”
(with quick call to action, what’s next, what should I do
now)
Monday, 22 November 2010
Design: size, colours
设计:输入框尺寸,颜色
Monday, 22 November 2010
Colours
Be wary when using
red colour in a form
as it often used to
indicate errors
Monday, 22 November 2010
Colours
Monday, 22 November 2010
Colours
Monday, 22 November 2010
Fields size
Label Give sufficient roo m to enter and read their input
Cardholder name
Card number
Security code
Sufficient space to type and read
Use appropriate field width
(give context/hints on what input is required)
16 digits
3 digits
Monday, 22 November 2010
Size
Monday, 22 November 2010
Primary & secondary buttons
ContinueCancel
Primary buttonSecondary button
Continue< Back
Address
Town / City
County
Postcode
Optional
Continue Cancel
Address
Town / City
County
Postcode
Optional
Differentiate primary and
secondary call to actions.
The latter should be
visually less distinctive,
smaller size)
Monday, 22 November 2010
Flow 表格流程
Monday, 22 November 2010
Flow
Get the flow of the
form right in terms of
what and where each
field or description
should be placed.
Monday, 22 November 2010
House number 22
Street Queen Square
Town or City Bristol
Postcode BS1 4ND
Country UK
Western address: from
house number to
country
Monday, 22 November 2010
国家
省
市
区
街道地址
China address: from
country to house
number
Monday, 22 November 2010
What else.... 其它
Monday, 22 November 2010
What else
Avoid requiring users to reenter their details (e.g. after errors
occur)
No complex or legalistic statement
Monday, 22 November 2010
What we can learn
No tricks or confusions
Being in control
Clear and simple
Appropriate feedback
Monday, 22 November 2010
http://www.flickr.com/photos/mikeblogs/2849934090/
http://www.flickr.com/photos/bigd2112/3649132473/
Designing Mobile Forms
Monday, 22 November 2010
http://www.flickr.com/photos/ari/4727219010/
Small screen
Sun/light reflection
Multitasking
Busy & crowded
Under pressure
(time restriction)
Slow connection
Monday, 22 November 2010
Quick . Easy . Error prone .
Infallible
Monday, 22 November 2010
Mobile versionWeb version
Mobile version:
Can be a simplified version of
your Web version (without
distractions, ads,
promotions, images).
Monday, 22 November 2010
Mobile versionWeb version
Mobile version:
Can be completely different
(simpler and cleaner)
Monday, 22 November 2010
Mobile version
Mobile version:
Can be the same with slight
changes of the layout, such
as label alignment
Monday, 22 November 2010
Mobile version
Mobile version:
Can be the same with slight
changes of the layout, such
as label alignment
Monday, 22 November 2010
General guidelines for mobile forms
(apply across all operating systems and platforms)
Use iOS as examples
http://www.flickr.com/photos/27048731@N03/3506681531/
The guidelines
presented in this
workshop can be
applied across various
operating systems and
Monday, 22 November 2010
Labelling 标签
Monday, 22 November 2010
Left aligned label is not
suitable for mobile
form. When users zoom
in, they are not able to
see the entire label.
Monday, 22 November 2010
Monday, 22 November 2010
Monday, 22 November 2010
Top aligned label is more
suitable for mobile
forms.
Monday, 22 November 2010
Left- and right-aligned
labelling are also not
suitable for long labels
Monday, 22 November 2010
Simplified :: Remove
简单化 :: 删除
Monday, 22 November 2010
Remove tips & help
Simplified - by
removing tips and help
Monday, 22 November 2010
Remove tips & help
Simplified - by
removing tips and help
Monday, 22 November 2010
Remove ‘not so important’ fields
Simplified - by
removing ‘not so
important’ fields
Monday, 22 November 2010
Simplified :: Combining
简单化 :: 结合
Monday, 22 November 2010
Combine three search
features into one input field
1
2
3
Simplified - by combining
various input options into a
single input field (Note: be
wary when using this
approach. Ensure it is clear
or obvious)
Monday, 22 November 2010
Simplified :: Improvise
简单化 :: 即 更改
Monday, 22 November 2010
139 countries
Monday, 22 November 2010
Australia
Austria
Belgium
Bulgaria
Canada
Croatia
Cyprus
Czech Republic
Denmark
Dubai
Finland
France
Germany
Great Britain
Greece
Guadeloupe
Hungary
Ireland
Italy
Luxembourg
Malta
Martinique
Mexico
Morocco
Netherlands
New Zealand
Norway
Poland
Portugal
Reunion Island
Romania
Slovak Republic
South Africa
Spain
Sweden
Switzerland
Syria
Tunisia
Turkey
USA
40 countries
Make good use of the
functionalities which come
with mobile phones , such
as ‘locate’.
Monday, 22 November 2010
Multiple stages
多步骤表格
Monday, 22 November 2010
Long drop downs for
both ‘From ‘ and ‘To’
Monday, 22 November 2010
Step 1 Step 2 Step 3
Simplified - Divide into
a few little steps
Monday, 22 November 2010
Changing input elements & menu controls
更改输入方法
Monday, 22 November 2010
Enter e-ticket number or booking code
E-ticket number
or
Booking code
Use different menu
and input fields to
simplify the form
(mobile version)
Monday, 22 November 2010
Monday, 22 November 2010
Monday, 22 November 2010
Web version Web version requires
more click for date
input
Monday, 22 November 2010
Mobile version
Mobile version: Simplified from
drop down menu to calendar
input (only a single click is
required)
Monday, 22 November 2010
Mobile version
Mobile version: Simplified from
drop down menu to calendar
input (only a single click is
required)
Monday, 22 November 2010
Mobile version
Mobile version: Simplified from
drop down menu to calendar
input (only a single click is
required)
Monday, 22 November 2010
Using tabs on the
mobile version
instead of radio
buttons
Monday, 22 November 2010
151 countries
Changing from a long
drop down menu to
free text predictive
search
Monday, 22 November 2010
Using links (similar
function as tabs) on
the mobile version
instead of drop downs
Monday, 22 November 2010
Using links (similar
function as tabs) on
the mobile version
instead of drop downs
Monday, 22 November 2010
Using links (similar
function as tabs) on
the mobile version
instead of drop downs
Monday, 22 November 2010
List selection 列表选择
Monday, 22 November 2010
Predictive free input
search is useful when:
1. It has a long list
where a long drop
down might not be
appropriate
2. Users roughly know
what they are looking
for
Monday, 22 November 2010
The list shouldn’t
be too long and
users have to have
a rough idea of
what they are
looking for
Can’t find what they want
Monday, 22 November 2010
Drop downs
Monday, 22 November 2010
Drop downs: Length
Drop downs: not suitable
when it has lengthy
options
Monday, 22 November 2010
Drop downs: List order
Not suitable when:
1. It’s in a random order
2. When users are unlikely to
know what they are looking for
Monday, 22 November 2010
Drop downs: List order
Not suitable when:
1. It’s in a random order
2. When users are unlikely to
know what they are looking for
Monday, 22 November 2010
Drop downs: List order
Not suitable when:
1. It’s in a random order
2. When users are unlikely to
know what they are looking for
Monday, 22 November 2010
Drop downs: List order
Not suitable when:
1. It’s in a random order
2. When users are unlikely to
know what they are looking for
Monday, 22 November 2010
Target size & spacing
尺寸和空间/距离
Monday, 22 November 2010
Touch target :
> 9mm (34 pixels )
Exceptional case:
> 7mm (26 pixels)
Space between controls:
> 2mm (8 pixels)
Target minimum sizes:
• 7 x 7 mm with 1 mm gaps for
index finger usage
• 8 x 8 mm with 2 mm gaps for
thumb usage
• List type of components (e.g.
radio buttons): minimum 5 mm
line space
Tap targets:
44 pixels
(approx. 7mm / over 1/4 inch with
iPhone’s 163 ppi screen resolution)
Windows Phone 7
(UI Design and Interaction Guide)
Nokia
(Touch UI Guide)
Apple
(Human Interface Guidelines)
Monday, 22 November 2010
Monday, 22 November 2010
~ Dan Saffer ~
Designing Gestural Interfaces
Target size (in inches):
Target = (target size in inches) x (screen width in pixels) /
(screen width in inches)
Monday, 22 November 2010
Simple and easy to use
Minimise required input
Minimise options
Simple and usable interaction
Remove distraction and clutter
Monday, 22 November 2010
What else....
http://www.cxpartners.co.uk/thoughts/
web_forms_design_guidelines_an_eyetracking_study.htm
Monday, 22 November 2010
chuichui.tan@cxpartners.co.uk
@ChuiSquared (SinaWeibo,Twitter)
Chui Chui Tan 陈璀璀
I’m writing whitepapers for Web form design and
Mobile form design which will be available for free
download.
Follow me @ChuiSquared on Twitter or Sina Weibo
to receive alerts when they are available.
Monday, 22 November 2010

Weitere ähnliche Inhalte

Mehr von cxpartners

Chi briding the relevance gap
Chi briding the relevance gapChi briding the relevance gap
Chi briding the relevance gapcxpartners
 
Putting people at the centre of design at the samaritans
Putting people at the centre of design at the samaritansPutting people at the centre of design at the samaritans
Putting people at the centre of design at the samaritanscxpartners
 
cxpartners customer centricity
cxpartners customer centricitycxpartners customer centricity
cxpartners customer centricitycxpartners
 
Designing Without Compromise
Designing Without CompromiseDesigning Without Compromise
Designing Without Compromisecxpartners
 
Practical Steps in Determining Your Product Vision (Product Tank Bristol - Oc...
Practical Steps in Determining Your Product Vision (Product Tank Bristol - Oc...Practical Steps in Determining Your Product Vision (Product Tank Bristol - Oc...
Practical Steps in Determining Your Product Vision (Product Tank Bristol - Oc...cxpartners
 
How to do the work you want to do - AKA neglect selling skills at your peril!...
How to do the work you want to do - AKA neglect selling skills at your peril!...How to do the work you want to do - AKA neglect selling skills at your peril!...
How to do the work you want to do - AKA neglect selling skills at your peril!...cxpartners
 
Customer Driven Digital Transformation
Customer Driven Digital Transformation Customer Driven Digital Transformation
Customer Driven Digital Transformation cxpartners
 
Interaction designers vs algorithms
Interaction designers vs algorithmsInteraction designers vs algorithms
Interaction designers vs algorithmscxpartners
 
Co design (NUX4)
Co design (NUX4)Co design (NUX4)
Co design (NUX4)cxpartners
 
How to ask a question
How to ask a questionHow to ask a question
How to ask a questioncxpartners
 
Photo ux nux 061014
Photo ux nux 061014Photo ux nux 061014
Photo ux nux 061014cxpartners
 
Photo content strategy (James Chudley, cxpartners)
Photo content strategy (James Chudley, cxpartners)Photo content strategy (James Chudley, cxpartners)
Photo content strategy (James Chudley, cxpartners)cxpartners
 
Psychology and the Perfect Design by @mrjoe
Psychology and the Perfect Design by @mrjoePsychology and the Perfect Design by @mrjoe
Psychology and the Perfect Design by @mrjoecxpartners
 
How Rapid Feedback improves the design process (Luke Jones, cxpartners)
How Rapid Feedback improves the design process (Luke Jones, cxpartners)How Rapid Feedback improves the design process (Luke Jones, cxpartners)
How Rapid Feedback improves the design process (Luke Jones, cxpartners)cxpartners
 
How to build a failsafe mobile usability testing set up
How to build a failsafe mobile usability testing set upHow to build a failsafe mobile usability testing set up
How to build a failsafe mobile usability testing set upcxpartners
 
Exploring the user experience through ethnography (Anna Wilkie, cxpartners)
Exploring the user experience through ethnography (Anna Wilkie, cxpartners)Exploring the user experience through ethnography (Anna Wilkie, cxpartners)
Exploring the user experience through ethnography (Anna Wilkie, cxpartners)cxpartners
 
The perfect ux designer toolkit
The perfect ux designer toolkitThe perfect ux designer toolkit
The perfect ux designer toolkitcxpartners
 
Planning the perfect user experience
Planning the perfect user experiencePlanning the perfect user experience
Planning the perfect user experiencecxpartners
 

Mehr von cxpartners (20)

Chi briding the relevance gap
Chi briding the relevance gapChi briding the relevance gap
Chi briding the relevance gap
 
Putting people at the centre of design at the samaritans
Putting people at the centre of design at the samaritansPutting people at the centre of design at the samaritans
Putting people at the centre of design at the samaritans
 
cxpartners customer centricity
cxpartners customer centricitycxpartners customer centricity
cxpartners customer centricity
 
Designing Without Compromise
Designing Without CompromiseDesigning Without Compromise
Designing Without Compromise
 
Practical Steps in Determining Your Product Vision (Product Tank Bristol - Oc...
Practical Steps in Determining Your Product Vision (Product Tank Bristol - Oc...Practical Steps in Determining Your Product Vision (Product Tank Bristol - Oc...
Practical Steps in Determining Your Product Vision (Product Tank Bristol - Oc...
 
How to do the work you want to do - AKA neglect selling skills at your peril!...
How to do the work you want to do - AKA neglect selling skills at your peril!...How to do the work you want to do - AKA neglect selling skills at your peril!...
How to do the work you want to do - AKA neglect selling skills at your peril!...
 
Customer Driven Digital Transformation
Customer Driven Digital Transformation Customer Driven Digital Transformation
Customer Driven Digital Transformation
 
Interaction designers vs algorithms
Interaction designers vs algorithmsInteraction designers vs algorithms
Interaction designers vs algorithms
 
Co design (NUX4)
Co design (NUX4)Co design (NUX4)
Co design (NUX4)
 
How to ask a question
How to ask a questionHow to ask a question
How to ask a question
 
UX Leadership
UX LeadershipUX Leadership
UX Leadership
 
Photo ux nux 061014
Photo ux nux 061014Photo ux nux 061014
Photo ux nux 061014
 
Photo content strategy (James Chudley, cxpartners)
Photo content strategy (James Chudley, cxpartners)Photo content strategy (James Chudley, cxpartners)
Photo content strategy (James Chudley, cxpartners)
 
Psychology and the Perfect Design by @mrjoe
Psychology and the Perfect Design by @mrjoePsychology and the Perfect Design by @mrjoe
Psychology and the Perfect Design by @mrjoe
 
How Rapid Feedback improves the design process (Luke Jones, cxpartners)
How Rapid Feedback improves the design process (Luke Jones, cxpartners)How Rapid Feedback improves the design process (Luke Jones, cxpartners)
How Rapid Feedback improves the design process (Luke Jones, cxpartners)
 
How to build a failsafe mobile usability testing set up
How to build a failsafe mobile usability testing set upHow to build a failsafe mobile usability testing set up
How to build a failsafe mobile usability testing set up
 
Exploring the user experience through ethnography (Anna Wilkie, cxpartners)
Exploring the user experience through ethnography (Anna Wilkie, cxpartners)Exploring the user experience through ethnography (Anna Wilkie, cxpartners)
Exploring the user experience through ethnography (Anna Wilkie, cxpartners)
 
The perfect ux designer toolkit
The perfect ux designer toolkitThe perfect ux designer toolkit
The perfect ux designer toolkit
 
Simplicity
SimplicitySimplicity
Simplicity
 
Planning the perfect user experience
Planning the perfect user experiencePlanning the perfect user experience
Planning the perfect user experience
 

Kürzlich hochgeladen

Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 

Kürzlich hochgeladen (19)

Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 

Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop