How to Make Your Website Not Ugly: 10 Simple UX Tenets for Non-Designers
•Download as PPTX, PDF•
3 likes•1,437 views
To craft well-designed websites, you have to know 50 names for “blue” and the difference between a font and a typeface. You probably have a degree in illustration or graphic design, or maybe you attended some hip code school in Oakland and call yourself a User Experience Architect. Right? Nope! In fact, there are numerous small, simple and practical ways to vastly improve the look and usability of a website, no matter how creative you are(n’t). In this talk, we’ll explore ten of them together, and see how the impact as a whole for both clients and users is greater than the sum of its parts. Make your websites more attractive, easier to use and better designed without feeling like you’re wasting your time or effort.
More Related Content
Similar to How to Make Your Website Not Ugly: 10 Simple UX Tenets for Non-Designers
Similar to How to Make Your Website Not Ugly: 10 Simple UX Tenets for Non-Designers (20)
More from Hilary Stohs-Krause
More from Hilary Stohs-Krause (16)
Recently uploaded
Recently uploaded (20)
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
- 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
- 24. WORDS: make speech visible Breathing room, legible, scannable, simple @hilarysk
- 25. No. 5 & 6
- 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
- 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
- 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 “
- 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
- 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
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
- Congratulations! But you might be thinking, plenty of modern sites aren’t that well-designed, either - even popular ones. Why does it matter
- 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 ...
- Congratulations! But you might be thinking, plenty of modern sites aren’t that well-designed, either - even popular ones. Why does it matter
- 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.
- Congratulations! But you might be thinking, plenty of modern sites aren’t that well-designed, either - even popular ones. Why does it matter
- To reiterate
- Congratulations! But you might be thinking, plenty of modern sites aren’t that well-designed, either - even popular ones. Why does it matter