Improving Site Design and Usability
•
1 gostou•768 visualizações
Some quick tips for making your site more readable and usable.
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (13)
Destaque
Destaque (10)
Semelhante a Improving Site Design and Usability
Semelhante a Improving Site Design and Usability (20)
Último
Último (20)
Improving Site Design and Usability
- 1. Improving Site Design and Usability Part 2 Jessica Neuman Beck couldbe studios | www.couldbestudios.com Thursday, October 21, 2010
- 2. Readability Images: Good images make people want to read your posts. Take some time to think about angles, lighting, and focal point when you're taking pictures. Text size: Tiny text is hard to read. Huge text can be annoying. Find a middle-ground. Contrast: A low-contrast site can be hard to read, especially if any of your readers have color-blindness or a limited range of vision. http://www.checkmycolours.com/ Text: Size, font, letter spacing and line spacing all play a huge role in how readable a site is. You can test out various combinations using an online tool like Type Tester. http://www.typetester.org/ Focal point/call to action: Try giving your site the ‘squint test.’ Is it your main content area? If not, you might want to re-think your layout and design. Thursday, October 21, 2010
- 3. A Note About Sidebars: Make your sidebars part of your design rather than just places to put stuff. Thursday, October 21, 2010
- 4. Usability • Simplify your navigation • Make sure your site is searchable • Tag your posts and use categories • Use pretty urls Thursday, October 21, 2010
- 5. Speed Up Your Site • Delays in serving up content, even short ones, can heavily impact your site’s click rate and number of return visitors • Use a tool like YSlow (a Firebug add-on) to find out how to optimize your site • Enable caching in WordPress by using a plugin like WP-Super Cache Thursday, October 21, 2010
- 6. Thursday, October 21, 2010
- 7. Increasing Page Views & Click-through Rate • Make sure readers can find not only the content they're looking for, but the content that is relevant to their search. • Use descriptive categories and augment them with tags • Internal linking: link keywords and phrases to articles you've published in the past. Thursday, October 21, 2010
- 8. Turn Skimmers into Readers Here’s how an average site visitor views content: 1. They scan the headlines. 2. They look at the pictures. 3. If they find the pictures interesting, they read the captions 4. Finally, if they’re still interested, they read the copy. • Use pull quotes • Include blurbs below headlines to summarize upcoming content • Use icons to give readers quick visual cues • Include lists Thursday, October 21, 2010
- 9. Eye Tracking • People’s eyes start at the top left of a page and from there go down and over in a sort of “F” pattern • The eye automatically skips large images or portions of white space Thursday, October 21, 2010
- 10. Eye tracking examples Thursday, October 21, 2010
- 11. Use plugins to: • Show popular posts, related posts, even random posts • Show more posts in any given category • Optimize site performance • Incorporate better SEO Thursday, October 21, 2010
- 12. P lugins • WP-Super Cache for caching & speed improvements http://wordpress.org/extend/plugins/wp-super-cache/ • WordPress Popular Posts http://wordpress.org/extend/plugins/wordpress-popular-posts/ • Yet Another Related Posts Plugin http://wordpress.org/extend/plugins/yet-another-related-posts-plugin/ • UpPrev for a NY Times-style “Next Post” animated button http://wordpress.org/extend/plugins/upprev-nytimes-style-next-post-jquery-animated-fly-in- button/ • Google XML Sitemaps http://wordpress.org/extend/plugins/google-sitemap-generator/ Thursday, October 21, 2010
- 13. Where to find...? • Check My Colours: http://www.checkmycolours.com/ • Type Tester: http://www.typetester.org/ • Google Webmaster Tools: Tags vs. Categories: http://www.youtube.com/ GoogleWebmasterHelp#p/a/u/0/A96yDPqa2rs • O’Reilly speed tests: http://en.oreilly.com/velocity2009/public/schedule/detail/8523 • YSlow: http://developer.yahoo.com/yslow/ • Luanne Seymor, Right On Target: Designing for Your Audience: http://www.adobe.com/ designcenter/dialogbox/targetaudience/ • EyeTools: http://eyetools.com/research_google_eyetracking_heatmap.html • Jakob Nielson’s Eye Tracking Tests: http://www.useit.com/alertbox/reading_pattern.html Thursday, October 21, 2010
- 14. Improving Site Design and Usability Part 2 Thanks, Drink.Write 2010! Jessica Neuman Beck couldbe studios | www.couldbestudios.com Thursday, October 21, 2010
Notas do Editor
- Hi, I’m Jessica Neuman Beck. I’m managing partner at couldbe studios and the co-author of the latest book on WordPress from Peachpit Press. I’m going to talk to you about improving site design and usability.
- You may be a great writer, but if your site looks awful - or even just meh - you're already turning away potential fans. Images: Good images make people want to read your posts. Take some time to think about angles, lighting, and focal point when you're taking pictures. Text size: Tiny text is hard to read. Huge text can be annoying. Find a middle-ground. Also, make sure you're using a hierarchy of headers: h1, h2, h3, to show importance. For example, your post title might be h1, while section headings like Ingredients or Methodology would be h2. Contrast: A low-contrast site can be hard to read, especially if any of your readers have color-blindness or a limited range of vision. Some color combinations are harder to read than others. Use a site like Check My Colours to see how your site holds up under various tests. http://www.checkmycolours.com/ Readability: Text size, font, letter spacing and line spacing all play a huge role in how readable a site is. You can test out various combinations using an online tool like Type Tester. http://www.typetester.org/ Focal point/call to action Your sidebars contain secondary information. They should not compete with your main content. Try giving your site the 'squint test' - squint your eyes until all you can see is shapes and note the area that stands out the most. Is it your main content area? If not, you might want to re-think your layout and design.
- Make your sidebars are part of your design rather than just places to put stuff. Every section of your site should be deliberate, so the first question to ask yourself is whether a single-column layout would serve you as well as a multi-column layout. Do you need links in the sidebar, or can you just have a row of links in your header? Is it crucial to keep your social media links right next to your blog posts, or could they go in the footer?
- Simplify your navigation: Your navigation should be as simple as possible. Link to the main sections of your site (which can be pages, categories, or a combination of both). Link to an About page and a Contact page. And then ask yourself what else is really important. Make sure your site is searchable: Include a search box in your header or your sidebar. If you don't, you may miss out on a lot of page views by people who are looking for something specific on your site. Tag your posts and use categories: Use clear, easy to understand category names and make sure you categorize each and every post. If you find yourself forgetting to add categories to your posts regularly, change the default category from 'Uncategorized' to your most frequently-used category. Use pretty urls: There's a big difference between this: www.couldbestudios.com/?p=11201 www.couldbestudios.com/blogging/wordpress-tutorial In WordPress this is really easy to change. Go to Settings > Permalinks and choose from the available options (or enter a custom structure - I like /%category%/%postname%/)
- Speed up your site: O'Reilly did a test last year in which they chose a small percentage of their users and showed them a version of their home page with various changes like server-side delays, client-side rendering delays, and added page weight on different parts of the page. Then they measured how each of those changes impacted clicks, time to click, repeat site usage and queries per visit. The results showed that less than two seconds of delay in page responsiveness resulted in more than 4% fewer clicks. That doesn't seem like a lot, but that's also not a lot of seconds. Think about the other side of that coin: how many more clicks could you get if you sped up your site by 3 seconds or 5 seconds? Try using a tool like the Firefox add-on YSlow to see how you can optimize your site for faster page loads. For a WordPress blog, you can install WP-Super Cache to improve site performance.
- YSlow gives you a series of letter grades and advice on how to optimize your site.
- Make sure readers can find not only the content they're looking for, but the content that is relevant to their search. Tagging gives you a way to add lots of keywords to a post. These can be keywords that aren't already in the post body. This can help people who are searching for one thing find a related post - for example, if you're talking about Hotel deLuxe and you tag the post "portland area hotels," that will come up in a search even if you don't mention those words in the body of the post. But should you use both tags and categories? Matt Cutts, head of Google’s Webspam team, says that an either-or approach is fine - either give your post a category or tag it, but not both. I disagree; tags can be used in conjunction with categories to make it easier for your readers to find related articles. The main thing to avoid is duplicating category names in your tags. Google and other search engines will ignore repeated keywords, so at best you're just making extra work for yourself if your tags and categories are the same. Internal linking: link keywords and phrases to articles you've published in the past. Not only does this help readers find posts that are relevant to them, but it also helps your SEO. Search engines can see how one post leads to another in your blog. I recommend against using a plugin to do this since you'll want to make sure the links are contextual and relevant to the content.
- The average site visitor skims content rather than reading it. They scan the headlines. They look at the pictures. If they find the pictures interesting, they read the captions. Finally, if they’re still interested, they read the copy. You can turn skimmers into readers by making your content as easy to consume as possible. Use pull quotes and blurbs to give at-a-glance summaries of your articles. Use icons to give quick visual cues. And include lists. Everybody loves lists.
- Eye tracking studies have shown that people’s eyes almost always start out at the top left side of a site. Make sure your content makes use of this.
- The heat map generated from eye tracking studies shows that people view content in sort of an f-shaped pattern. Note that they will skip over sections containing a large image, continuing the F pattern below.
- Plugins are a great way to add functionality and interest to your site. To increase page views on your site, make sure other posts your readers might be interested in are readily available. You can show popular posts, related posts, even random posts. Plugins can also help you optimize your site’s performance to keep people clicking, and you can use things like the All In One SEO Pack to add meta tags and keywords to your site.