How to Make Your Website Not Ugly: 10 Simple UX Tenets for Non-Designers

1. How to Make Your Website Not Ugly 10 Simple UX Tenets for Non- Designers Hilary Stohs-Krause Ten Forward Consulting in Madison, WI Twitter: @hilarysk
2. About me Former 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
3. We’ve got a lot to cover. @hilarysk
4. WORDS: make speech visible, No. 1 to 4 Breathing room, legible, scannable, simple IMAGES: use appropriately, No. 5 & 6 DESIGN: think logically, No. 7 to 10 Icons sparingly, photos and graphics integrated Patterns, progressive disclosure, consistency, functionality @hilarysk
5. @hilarysk
6. You know more than you think you do. @hilarysk
7. Why design matters Usability Credibility Interest @hilarysk
8. 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
9. No. 1 to 4
10. WORDS: make speech visual @hilarysk
11. WORDS: make speech visual 1. 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
12. @hilarysk WORDS: make speech visual 1. Let your text breathe.
13. @hilarysk WORDS: make speech visual 1. Let your text breathe.
14. 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
15. WORDS: make speech visual 2. Make your text legible. @hilarysk
16. WORDS: make speech visual 2. Make your text legible. @hilarysk
17. WORDS: make speech visual Highlight key content Subheads, with lowercase and uppercase letters Bulleted lists 3. Make your text scannable. @hilarysk
18. WORDS: make speech visual 3. Make your text scannable. @hilarysk
19. WORDS: make speech visual 3. Make your text scannable. @hilarysk
20. 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
21. WORDS: make speech visual 4. Keep the decoration to a minimum. @hilarysk
22. WORDS: make speech visual 4. Keep the decoration to a minimum. @hilarysk
23. Let’s recap. @hilarysk
24. WORDS: make speech visible Breathing room, legible, scannable, simple @hilarysk
25. No. 5 & 6
26. IMAGES: use appropriately @hilarysk
27. 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
28. IMAGES: use appropriately 5. Icons @hilarysk via https://bold.pixelapse.com/
29. IMAGES: use appropriately Banner blindness Integrate with content Be informative and/or relevant 6. Photos and graphics @hilarysk
30. IMAGES: use appropriately 6. Photos and graphics @hilarysk
31. IMAGES: use appropriately 6. Photos and graphics @hilarysk
32. Let’s recap again. @hilarysk
33. WORDS: make speech visible Breathing room, legible, scannable, simple IMAGES: use appropriately Icons sparingly, photos and graphics integrated @hilarysk
34. No. 7 to 10
35. DESIGN: think logically @hilarysk
36. 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
37. DESIGN: think logically 7. Use patterns @hilarysk
38. DESIGN: think logically 7. Use patterns @hilarysk
39. 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
40. DESIGN: think logically 8. Progressive disclosure @hilarysk
41. DESIGN: think logically 8. Progressive disclosure @hilarysk
42. DESIGN: think logically Links, buttons Alert messages Forms Tables 9. Be consistent @hilarysk
43. DESIGN: think logically 9. Be consistent @hilarysk
44. 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
45. DESIGN: think logically 10. Functionality is part of design @hilarysk Design is where science and art break even.” - Robin Mathew, design entrepreneur “
46. Final recap. @hilarysk
47. WORDS: make speech visible Breathing room, legible, scannable, simple IMAGES: use appropriately DESIGN: think logically Icons sparingly, photos and graphics integrated Patterns, progressive disclosure, consistency, functionality @hilarysk
48. Resources @hilarysk
49. Resources @hilarysk General UX Myths Nielsen Norman Group Additional What’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
50. Thanks! @hilarysk

Editor's Notes

Intro, briefly discuss background; worked as print designer at newspaper, but work primarily as developer
Follow along at http://tinyurl.com/cvcc_slides
Real website from 1996. Who thinks example of well-designed site?
Congratulations! But you might be thinking, plenty of modern sites aren’t that well-designed, either - even popular ones. Why does it matter
Usability: Design - including visual design - informs functionality. How do we know a link is a link? How do we know a button is a button? How do we know what parts of the site are most important and how to get there?

Credibility: Study from Stanford University found that, when accessing a site’s credibility, 46% of all participants cited the site’s visual design - including layout, typography, font size, and color schemes - while only 8% cared about the functionality. Obviously functionality is important, but if they never bother trying ot use it in the first place, functionality won’t get you very far.

Interest: If someone doesn’t trust your site and doesn’t find it attractive, they won’t be interested, and they won’t stay.

NOTE: Always exceptions to these suggestions. For the most part, even when backed by research, they aren’t necessarily hard-and-fast rules. Depends on site purpose, target demographics, etc. But solid general guidelines, especially for sites that don’t require groundbreaking design.
Quote from Trello founder as to why “how it works” isn’t everything.
a major 2008 eye-tracking study found visitors only read 20% of text content. However, applying results of research into how people want to read on the web can result in 124% better usability. Why build something if no one’s going to use it?
Text-box width: Greatly depends on font size and typeface; 50 to 60 characters is what people prefer, but they read fastest at 100 characters, according to various studies. Too wide, and you can’t focus; too short, and it invites the reader to skip lines.

Line-height: Occasionally needs tweaking depending on font/size, but generally it holds true.

Padding: If text boxes are too close, people might blend them together, or try to read them in the wrong direction (ie: from the left column first sentence to the right column first sentence)
Example of good vs. bad (line-height, no paragraph margins, too wide) - from NYTimes with character count up to 74 per line, 540 px wide. Note use of white space
Example of good vs. bad (line-height, no paragraph margins, too wide) - from NYTimes with character count up to 74 per line, 540 px wide. Note use of white space
Contrast: nothing worse than having than text that blends into background. For accessibility purposes, also want to be careful about colors that are the same tone (ie: if you make it black and white, is it still legible?) If not, certain colors render text unreadable for those with colorblindness. WebAIM, an accessibility resource site, actually has a contrast checker to make sure color combinations are legible: http://webaim.org/resources/contrastchecker/

Size: Especially as the American population ages, important to think of text size. 16px is standard, but especially if not a text-heavy page (or even if is), consider bumping up to 18.
Not enough contrast, too small
Not enough contrast, too small
A major 2008 eye-tracking study found visitors only read 20% of text content; for the most part, people skim, they don’t read.
If you don’t give them something to guide them through the page, you stand a good chance of losing them.
The difference between lowercase and uppercase letters helps with scanning
We’ll talk more about centered text in the last section.
FreshConsulting.com
FreshConsulting.com
Too many fonts or color are distracting, and can make user think content is ads, which they subconsciously ignore.
Fancier fonts or fonts with serifs are fine for larger text, but serif text in smaller sizes is harder to read online
Study from last year of 190 icons found that for unique labels, only 34% of people correctly guessed what tapping or clicking the icon would do; up to 60% for for more general icons, which is still only about half of people. Jumps to 80% for icons with labels.
Can be good way to add visual to text or create shortcut for user’s brain
Can save space, especially for mobile. Icons like “play”, “email”, etc. fine to use because universal.
Easy to do wrong
Ask audience to think of what icon they would use for “share”
These are all icons that have been used to mean “share.” Adding hover text or key just creates extra work for user, and is likely to make them ignore icon or search through menu instead.
Banner blindness refers to people subconsciously ignoring something that appears at first glance to be an advertisment. If your image is clearly a stock photo, in a location usually reserved for adds, or seems ill-suited to the rest of the content, users often ignore it completely.
On the other hand, too many graphics or photos can be distracting; Nielsen Group found that most effective draws for users eyes are plain text, followed by faces.
Images are best used somewhat sparingly, integrated with content, and have a connection to topic (not just stock photo for the sake of having a stock photo)
Let’s see what happens when you follow zero of these rules ...
When it comes to web design, there are tried and true conventions. Use them. Especially for projects with little or no budget dedicated to visual design, just go with what works. As one designer puts it, “There are a billion sites out there to use as inspiration.”
F-shape: Connects back to idea of making text scannable in step 3; need to grab attention, because it fades quickly. But only so much attention to be grabbed, hence top to bottom hierarchy

Above the fold: 2014 study found 156% more people saw the top content area of a page compared with the bottom content area - ie: the part visible before you have to scroll.

Traditional ads: Very top middle, right sidebar
From Nielsen Norman Group - three different patterns for scanning a website, but all follow same general format
From Nielsen Norman Group - three different patterns for scanning a website, but all follow same general format
If your button has a shadow in one place, should have a shadow everywhere. If alerts are red, should be same color of red. If your site has forms, they should have consistent style.
Can’t trust users to make rational decisions - have to make as foolproof as possible. Teach them one pattern, and for the most part, they’ll follow it. So links are always green and underline, or just underlined, or just green.
Even if primarily back-end designer, structure of data models can have direct impact on user-facing implementation. Web design isn’t just fonts and layouts - it encompasses code, visuals and usability, all in one. Keep that in mind before writing any code, and you’ll save time, money and sanity.
To reiterate

How to Make Your Website Not Ugly: 10 Simple UX Tenets for Non-Designers

You are reading a preview.

Check these out next

How to Make Your Website Not Ugly: 10 Simple UX Tenets for Non-Designers

More Related Content

Similar to How to Make Your Website Not Ugly: 10 Simple UX Tenets for Non-Designers (20)

More from Hilary Stohs-Krause (16)

Recently uploaded (20)

How to Make Your Website Not Ugly: 10 Simple UX Tenets for Non-Designers

Editor's Notes

How to Make Your Website Not Ugly: 10 Simple UX Tenets for Non-Designers

You are reading a preview.

How to Make Your Website Not Ugly: 10 Simple UX Tenets for Non-Designers

Recommended

More Related Content

Similar to How to Make Your Website Not Ugly: 10 Simple UX Tenets for Non-Designers (20)

More from Hilary Stohs-Krause (16)

Recently uploaded (20)

How to Make Your Website Not Ugly: 10 Simple UX Tenets for Non-Designers

Editor's Notes