a non-designers guide to user interface design

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