Upload
paul-boag
View
436
Download
0
Embed Size (px)
Citation preview
A non-designers guide to user interface design
I need your help!— If I speak too fast, tell me.
— If you don’t understand, ask.
— I need your questions.
boagworld.com or @boagworld
Who are you?
Website annoyances
Poor performance
Form validation
Mobile inaccessible
Password requirements
Not always your fault
Designers are not details people
Designers sometimes…— Only show a single state of a page.
— Use Lorem Ipsum instead of real content.
— Work with static canvas sizes.
— Forget to address different page variations.
Should work side by side
You should champion UX too!
Agenda— Creating user centric forms.
— Handling errors.
— Considering copy.
— Dealing with edge cases.
— Improving the perception of speed.
— Using animation.
— Closing comments.
Creating user centric formsSign up
FIRST NAME
LAST NAME
EMAIL ADDRESS
COUNTRY
PASSWORD
CONFIRM PASSWORD
I have read and agree to the Terms of use.
I’d like to receive your newsletter.
Sign Up
( )Phone number:
Don’t split fields
Dt117ujPostcode: Invalid postcode
Intelligent validation
Only necessary fields
Realistic minimal options
AntarcticaCountry:
Remembering data
Your session has expired. Please start again.
Simple Passwords
Password:
Your password is too weak
****************
Switching between devices
Descriptive buttons
YES NO
Minimise required fields
_Address line 3: *
Logical tab orderSign up
FIRST NAME
LAST NAME
EMAIL ADDRESS
COUNTRY
PASSWORD
CONFIRM PASSWORD
I have read and agree to the Terms of use.
I’d like to receive your newsletter.
Sign Up
Positive feedback
BoagworldUsername:
Hide logic fields
How did you hear about us?:
Google Social media Other site Other
_
If other, please tell us where:
CAPTCHA!
Yeah but, in the real world…You
Handling errors
Avoid jargon
Say sorry
Don’t try and be funny
Be concise
Give some next actions
Make sure errors are visible
Password:
Your password is too weak
****************
Don’t blame the user
Never ever mention Star Wars
Let’s review a 404 page
Considering copy
Copy is a part of the interface
Don’t use Lorem Ipsum
Be conciseThe following questionnaire is designed to provide us with information that will help us improve the site and make it more relevant to your needs. Please select your answers from the drop-down menus and radio buttons below. The questionnaire should only take 2 to 3 minutes to complete.
At the bottom of this form you can choose to leave your name, address, and telephone number. If you leave your name and number, you may be contacted in the future to participate in a survey to help improve this site.
If you have comments or concerns that require a response please contact customer services.
Be concise Please help us improve the site by answering these questions. It should only take you to to 3 minutes to complete this survey.
Note: if you have comments or concerns that require a response don't use this form. Instead, please contact customer services.
Front loadGet to the point! Don’t bury the lead.
Make is scannable
Avoid Jargon
Keep it readable
Focus on your microcopy
What are your challenges around copy?
Dealing with edge cases
Edge case 1: People
Edge case 2: Scenarios
I need to be able to do this very specific thing that
nobody else will ever need.
Edge cases frustrate the majority
Long country lists
AntarcticaCountry:
Third lines in addresses
_Address line 3:
Obscure content
Advanced features
Feature tutorials
Remove, shrink, hide
Tailor to the users stateBeginner, intermediate and advanced
Progressive disclosure
Progressive reduction
Yeah but, what about…You
The perception of speed
44%
1 second for users not to start noticing. 10 seconds absolute limit.
Always load visible content first
Provide feedback
Slow down to speed up
Load thumbnail first
Load an image of a video
Load an image of a video
1020p0:12 / 12:22
0:12
NextRepeat
Big Q Studio
How Germs Travel on Planes And How We Can Stop Them
Follow
by Big Q Studio
Don’t wait for web fonts
Any questions or comments?
Using animation
Progress
Rollover states
Transitions
Action feedback
Infographics
Product demos
Form validation
To reveal content
Revealing content
Any good examples of animation?
Conclusions
Recognise the value of your role in UX
Development, governance, resourcing, project management, marketing,
customer services, strategy.
Work on your relationships
Sit with designers and copywriters
Work with designers in the browser
Get involved early
Invite yourself to usability testing
Get a designer to check your work
Educate through discussionIf we change this slightly
we can make less calls to the server and speed up
performance.Sure that should be okay
Leave time in your estimates
Success is going from failure to failure with no loss of enthusiasm.
Winston Churchill
boagworld.com or @boagworld