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

Editor's Notes

• #2: Intro, briefly discuss background; worked as print designer at newspaper, but work primarily as developer
• #4: Follow along at http://tinyurl.com/cvcc_slides
• #6: Real website from 1996. Who thinks example of well-designed site?
• #7: Congratulations! But you might be thinking, plenty of modern sites aren’t that well-designed, either - even popular ones. Why does it matter
• #8: 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.
• #9: Quote from Trello founder as to why “how it works” isn’t everything.
• #11: 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?
• #12: 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)
• #13: 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
• #14: 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
• #15: 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.
• #16: Not enough contrast, too small
• #17: Not enough contrast, too small
• #18: 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.
• #19: FreshConsulting.com
• #20: FreshConsulting.com
• #21: 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
• #24: Congratulations! But you might be thinking, plenty of modern sites aren’t that well-designed, either - even popular ones. Why does it matter
• #28: 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”
• #29: 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.
• #30: 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 ...
• #33: Congratulations! But you might be thinking, plenty of modern sites aren’t that well-designed, either - even popular ones. Why does it matter
• #37: 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.”
• #40: 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
• #41: From Nielsen Norman Group - three different patterns for scanning a website, but all follow same general format
• #42: From Nielsen Norman Group - three different patterns for scanning a website, but all follow same general format
• #43: 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.
• #44: 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.
• #45: 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.
• #47: Congratulations! But you might be thinking, plenty of modern sites aren’t that well-designed, either - even popular ones. Why does it matter
• #48: To reiterate
• #51: Congratulations! But you might be thinking, plenty of modern sites aren’t that well-designed, either - even popular ones. Why does it matter