How to Make Your Website Not Ugly

10 Simple UX Tenets for Non-Designers

Hilary Stohs-KrauseTen Forward Consulting in Madison, WI

Twitter: @hilarysk

About meFormer journalist (including

newspaper designer)

Full-stack developer in Madison at Ten Forward Consulting, Inc.

Primarily work with startups, often not a big budget for design

@hilarysk

We’ve got a lot to cover.

@hilarysk

WORDS: make speech visible, No. 1 to 4Breathing room, legible, scannable, simple

IMAGES: use appropriately, No. 5 & 6DESIGN: think logically, No. 7 to 10

Icons sparingly, photos and graphics integrated

Patterns, progressive disclosure, consistency, functionality

@hilarysk

@hilarysk

You know more than you think you do.

@hilarysk

Why design matters

Usability

Credibility

Interest

@hilarysk

If usability engineers designed a nightclub, it would be clean, quiet, brightly lit, with lots of places to sit down, plenty of bartenders, menus written in 18-point sans-serif, and easy-to-find bathrooms. But nobody would be there. They would all be down the street at Coyote Ugly pouring beer on each other.”

- Joel Spolsky, founder of Trello

“

@hilarysk

No. 1 to 4

WORDS: make speech visual

@hilarysk

WORDS: make speech visual1.Let your text breathe.

Text-box width: 400 to 800 pixels, or 60 to 100 characters per line

Line-height: At Ten Forward Consulting, our standard is 1.4.

Padding between text-boxes: At least 15px in any direction.

@hilarysk

@hilarysk

WORDS: make speech visual1.Let your text breathe.

@hilarysk

WORDS: make speech visual1.Let your text breathe.

WORDS: make speech visual

Contrast: Don’t put yellow text on a white background

Size: Minimum 16px (depending on font)

2. Make your text legible.

@hilarysk

WORDS: make speech visual2. Make your text legible.

@hilarysk

WORDS: make speech visual2. Make your text legible.

@hilarysk

WORDS: make speech visual

Highlight key content

Subheads, with lowercase and uppercase letters

Bulleted lists

3. Make your text scannable.

@hilarysk

WORDS: make speech visual3. Make your text scannable.

@hilarysk

WORDS: make speech visual3. Make your text scannable.

@hilarysk

WORDS: make speech visual

Limit number of typefaces/fonts (2 or 3)

Limit colors (3 to 5, including grays)

Use more complex fonts for headers, more basic sans-serif for text

4. Keep the decoration to a minimum.

@hilarysk

WORDS: make speech visual4. Keep the decoration to a minimum.

@hilarysk

WORDS: make speech visual4. Keep the decoration to a minimum.

@hilarysk

Let’s recap.

@hilarysk

WORDS: make speech visibleBreathing room, legible, scannable, simple

@hilarysk

No. 5 & 6

IMAGES: use appropriately

@hilarysk

IMAGES: use appropriately

99% of the time, should be accompanied by a label

Work best in navigation or menu (like a list of characteristics)

Avoid icons with conflicting meanings

5. Icons

@hilarysk

IMAGES: use appropriately5. Icons

@hilaryskvia https://bold.pixelapse.com/

IMAGES: use appropriately

Banner blindness

Integrate with content

Be informative and/or relevant

6. Photos and graphics

@hilarysk

IMAGES: use appropriately6. Photos and graphics

@hilarysk

IMAGES: use appropriately6. Photos and graphics

@hilarysk

Let’s recap again.

@hilarysk

WORDS: make speech visibleBreathing room, legible, scannable, simple

IMAGES: use appropriatelyIcons sparingly, photos and graphics integrated

@hilarysk

No. 7 to 10

DESIGN: think logically

@hilarysk

DESIGN: think logically

Alternate between small, medium and wide

Quality trumps originality (in most cases)

Find something that works, and use it as a model

7. Use patterns

@hilarysk

DESIGN: think logically7. Use patterns

@hilarysk

DESIGN: think logically7. Use patterns

@hilarysk

DESIGN: think logically

F-shape reading pattern

Top to bottom = important to less important

Above the fold

Avoid putting key content in traditional ad areas

8. Progressive disclosure

@hilarysk

DESIGN: think logically8. Progressive disclosure

@hilarysk

DESIGN: think logically8. Progressive disclosure

@hilarysk

DESIGN: think logically

Links, buttons

Alert messages

Forms

Tables

Header fonts/sizes

9. Be consistent

@hilarysk

DESIGN: think logically9. Be consistent

@hilarysk

DESIGN: think logically

It doesn’t matter if it looks good and is easy to use if it doesn’t work.

Back-end impacts front-end

10. Functionality is part of design

@hilarysk

DESIGN: think logically10. Functionality is part of design

@hilarysk

Design is where science and art break even.”

- Robin Mathew, design entrepreneur“

Final recap.

@hilarysk

WORDS: make speech visibleBreathing room, legible, scannable, simple

IMAGES: use appropriately

DESIGN: think logically

Icons sparingly, photos and graphics integrated

Patterns, progressive disclosure, consistency, functionality

@hilarysk

Resources

@hilarysk

Resources

@hilarysk

GeneralUX Myths

Nielsen Norman Group

AdditionalWhat’s the perfect width for your online content?

How do people evaluate a website’s credibility?

Readability: the Optimal Line Length

Making Your Icons User-Friendly: A Guide to Usability in UI Design

Share: The Icon No One Agrees On

8 Guidelines For Better Readability On The Web

Color Contrast Checker

Thanks!

@hilarysk