10 Useful Usability Findings and Guidelines « Smashing Magazine - The Diigo Meta page

• 03 Jan 10
  

  PJ Utsi

  usability

• 29 Dec 09
  

  Zach Leatherman

  usability imported

• 21 Dec 09
  

  ocean wu

  信息架构 用户体验 界面设计

  • 可用性是一个网页设计的一个重要方面。无论你是工作在一个投资组合的网站，网上商店或Web应用程序使网页便于和您的访客使用乐趣，是关键。许多研究已经做了关于网络和接口设计的各个方面这些年来，其结果是在帮助我们改进我们的工作很有帮助。这里有 10有用的可用性和准则的调查结果 可以帮助您改善在您的网站的用户体验。

  • 研究已进行了以找出正是影响人们对网站的公信力的看法：

    • 史丹福Makovsy网站可信度研究2002年：调查什么做网站可信的今天
    • 什么原因导致Web站点可信吗？是大型的定量研究报告
    • 计算机要件诚信
  • 7 more annotations...

  • • 最近的研究证明，用户相当滚动，在某些情况下，他们愿意滚动到页面底部的舒适。许多用户都更愿意与比1分页滚动，和页面的最重要的信息，许多用户并不一定是放置倍以上“，”（这是因为现有的各种显示分辨率相当陈旧，过时术语）。因此，它是一个好主意，分为扫描，方便的分隔它们很多空白，部分布局。

      如需进一步信息，请看一看看的文章 展开的折叠 （Clicktale）， 寻呼队滚动 （威奇托大学-氓）， 爆破的褶皱神话 （框和箭头）。

    • 研究发现， 平均搜索框18字符宽。数据显示，27％的查询太长，以适应它。 扩展到27个字符框可容纳90％的查询。请记住，您可以设置宽度使用EMS，不只是像素点。一时间是宽度和一个“米”字高（使用任何一个网站的字体大小设置为）。因此，使用这种措施的规模文本输入字段宽度为27字符宽。

    • 版式研究:

      • 行高（像素）÷体复制的字体大小（像素）= 1.48
        1.5通常建议经典印刷书籍，所以我们的研究印证了这样的经验法则。很少有网站使用任何低于这一标准。而网站的数量减少到了1.48，你从这个值进一步。
      • 线路长度（像素）÷行高（像素）= 27.8
        平均线长度为538.64像素（不包括利润和填充），这是相当大的考虑，很多网站仍然在身体副本是12至13日在字体大小像素。
      • 之间的空间段（像素）÷行高（像素）= 0.754
        原来，段间距（即两者之间的一个段落的最后一行，并在第一行的空间下），很少等于领导（这将是完美的垂直节奏的主要特征）。很多时候，段落间距只有75％，领先段。原因可能是，领导通常包括由下伸了空间，而且由于大多数字符没有下伸，额外的空格线下创建。
      • 每行的字符数是55最优至75
        根据经典的印刷书籍，每行的字符之间的最佳人数是55和75，但75至85每行的字符在实践中更受欢迎。

    • 博客设计研究:

      • 布局通常有一个固定的宽度（基于像素）（92％），通常为中心（94％）。固定布局宽度不等的951和1000像素（56％）。
      • 首页显示10到20个（62％）的摘录。
      • 58一个网站的总体布局％用于显示的主要内容。

    • Web窗体设计研究:

      • 登记环节的题目是“注册”（40％），并在右上角上。
      • 注册后便形式简单的布局，以避免分散注意力的用户（61％）。
      • 在输入字段，标题是粗体（62％），田间地头，是垂直排列超过他们的水平排列（86％）。
      • 设计师往往包括一些强制性的领域和一些可选字段。
      • 电子邮件确认没有获得（82％），但密码确认（72％）。
      • “提交”按钮为左对齐（56％）或中心（26％）。

    • 组合设计研究:

      • 89％的水平布局集中，其中大部分有一个较大的水平导航菜单。
      • 47.2％的投资组合有一个客户端页面，67.2％，有一些独立的网页服务的形式。
      • 63.6％的人对每个项目的详细页，包括案例研究，鉴定，与截图，汇票和草图幻灯片。
      • 联系页面包含行车路线，电话号码，电子邮件地址，邮寄地址，电子名片和在线的形式，

    • 其他资源

      • 15宝贵的可用性你从来没有听说过PDF文件
      • 15个重要研究结果你应该知道
      • 10其他研究结果你应该知道
      • 良好的可用性介绍
      • 11惊人的发现从眼动研究
      • 25个非常有用的可用性作弊表和清单
      • 10可用性调查结果提高销售和客户忠诚度
      • Web窗体设计准则：1眼跟踪研究
• 16 Dec 09
  

  cichy
• 23 Nov 09
  

  a_janney

  10 design tips on usability

  usability design webdesign ux web

• 22 Nov 09
  

  PhilTina Brunner

  10 Useful Usability Findings and Guidelines - Smashing Magazine

  web design

• 15 Nov 09
  

  Michael Dawson

  Everyone would agree that usability is an important aspect of Web design. Whether you're working on a portfolio website, online store or Web app, making your pages...

  users study usability line

• 04 Nov 09
  

  monkey mynd

  usability webdesign ui research guidelines

• 03 Nov 09
  

  Justin Lee

  design usability ux web guideline research

• 01 Nov 09
  

  Tom Daccord

  Many studies have been done over the years on various aspects of Web and interface design, and the findings are valuable in helping us improve our work. Here are 10 useful usability findings and guidelines that may help you improve the user experience on your websites.
  

  webdesign usability

• 27 Oct 09
  

  Charlotte Hancock

  usability

• 26 Oct 09
  

  David Baker

  sept 26b

• 24 Oct 09
  

  Jens Schumacher

  usability webdesign

• 19 Oct 09
  

  onething

  usability design

• 

  Nick Ogrizovich

  usability design UDL

  • 
    
    And now the baby is looking at the content. Notice the increase in people looking at the headline and text.
  • Make the information easy to digest
• 18 Oct 09
  

  Alex Ko

  usability design webdesign ux web

• 17 Oct 09
  

  Mikko Mikkola

  usability

• 14 Oct 09
  

  Gary Giamboi

  Layout Guidelines

  Web_Design

• 13 Oct 09
  

  J L

  usability user experience upa

• 

  Courtney Bentley

  usability design webdesign

• 09 Oct 09
  

  Tomáš Horáček

  typography webdesign usability cool

• 

  susan rector

  usability user experience

• 08 Oct 09
  

  Justin Kaplan

  NewBiz

• 06 Oct 09
  

  Clint Bush

  usability resources web design favExamples

• 05 Oct 09
  

  Oeil-de-nuit -_-

  1. Form Labels Work Best Above The Field
  2. Users Focus On Faces
  3. Quality Of Design Is An Indicator Of Credibility
  4. Most Users Do Not Scroll
  5. Blue Is The Best Color For Links
  6. The Ideal Search Box Is 27-Characters Wide
  7. White Space Improves Comprehension
  8. Effective User Testing Doesn’t Have To Be Extensive
  9. Informative Product Pages Help You Stand Out
  10. Most Users Are Blind To Advertising

  web design usability

• 03 Oct 09
  

  Daniela Kamenova

  usability design webdesign ux web guideline smashing

• 

  benoit hyronde

  Design guideline usability

• 

  jrowlands

  webdesign usability

• 

  Daniel Longas

  Usabilidad

• 02 Oct 09
  

  toshiko takada
  • just that you should make the best use of that area.

  • This is most important for the home page, where most new visitors will land. So provide the core essentials there:

    
    
    
    
    1. Name of the website,
    2. Value proposition of the website (i.e. what benefit users will get from using it),
    3. Navigation for the main sections of the website that are relevant to the user.
  • 4 more annotations...
  • • People expect certain things to be the same, such as link colors, the location of the website’s logo, the behavior of tabbed navigation and so on.
    • t good use of white space between paragraphs and in the left and right margins increases comprehension by almost 20%. Readers find it easier to focus on and process generously spaced content.
    • Provide detailed information about your products, but don’t fall into the trap of bombarding users with too much text.
    • Make the page scannable by breaking up the text into smaller segments and using plenty of sub-headings. Add plenty of images for your products, and use the right language: don’t use jargon that your visitors might not understand.
• 01 Oct 09
  

  Jon Aston

  able but disconnects the labels from the fields, making it difficult to see which label applies to which field. Right-aligning does

  webdev webdesign social media strategy usability ux ui tsw101

• 

  Maggie Verster

  usability design webdesign

• 30 Sep 09
  

  secret lou

  Usability

• 

  Robt.D McKenzie

  syndicNation openIDeas iUse 200909272145

• 

  La Ligne
• 

  oskar fuenes

  articulos

• 29 Sep 09
  

  Mac McBurney

  usability web design ux

• 

  Geekgirl 397

  usability design webdesign ux web guideline smashing ui development

• 

  Jason Everett

  web webdesign

• 

  Adam Bohannon

  usability webdesign design web

• 

  Henriette Palner Stick

  usability design webdesign ux research

• 

  Melanie St.James

  usability design webdesign ux

• 

  Kevin Champion

  webdesign usability

• 28 Sep 09
  

  Maguar Guar

  usability design webdesign ux web

• 

  mailforlen yahoo
• 

  Jeremy Hageman

  usability design tips

• 

  Carrie Ashendel

  Useful summary of a few basic usability findings with links to more.

  ux webdesign

• 

  Raquel Bambirra

  usability design webdesign ux web

• 

  robert bale

  usability design webdesign ux web

  • But our attraction to people’s faces and eyes is only the beginning; it turns out we actually glance in the direction the person in the image is looking in.
• 

  Teresa Carr

  usability design webdesign web guideline ux

• 

  Jendrik Illner
• 

  Susan Nugent

  from Smashing Magazine

  usability design webdesign ux web

• 

  Benny Torres
• 

  Jungmi Park

  usability design webdesign ux web guideline

• 

  Jair Batista

  design usability

• 27 Sep 09
  

  Adrian Bengtson

  Everyone would agree that usability is an important aspect of Web design. Whether you’re working on a portfolio website, online store or Web app, making your pages easy and enjoyable for your visitors to use is key. Many studies have been done over the years on various aspects of Web and interface design, and the findings are valuable in helping us improve our work. Here are 10 useful usability findings and guidelines that may help you improve the user experience on your websites.

• 

  Tomas Mrkvicka

  design usability

• 26 Sep 09
  

  Seçkin Anıl Ünlü

  usability web design guidelines tips webdev

  • Here are 10 useful usability findings and guidelines that may help you improve the user experience on your websites.
  • Form Labels Work Best Above The Field
  • 45 more annotations...
  • • On many forms, labels are put to the left of the fields, creating a two-column layout; while this looks good, it’s not the easiest layout to use. Why is that? Because forms are generally vertically oriented
    • Users Focus On Faces
    • On Web pages, we tend to focus on people’s faces and eyes, which gives marketers a good technique for attracting attention. But our attraction to people’s faces and eyes is only the beginning; it turns out we actually glance in the direction the person in the image is looking in.
    • Quality Of Design Is An Indicator Of Credibility
    • One interesting finding of these studies is that users really do judge a book by its cover… or rather, a website by its design. Elements such as layout, consistency, typography, color and style all affect how users perceive your website and what kind of image you project.
    • Most Users Do Not Scroll
    • Jakob Nielsen’s study on how much users scroll (in Prioritizing Web Usability) revealed that only 23% of visitors scroll on their first visit to a website. This means that 77% of visitors won’t scroll; they’ll just view the content above the fold
    • This data highlights just how important it is to place your key content on a prominent position, especially on landing pages.
    • This doesn’t mean you should cram everything in the upper area of the page, just that you should make the best use of that area.

    • So provide the core essentials there:

      
      
      
      
      1. Name of the website,
      2. Value proposition of the website (i.e. what benefit users will get from using it),
      3. Navigation for the main sections of the website that are relevant to the user.
    • So it is a good idea to divide your layout into sections for easy scanning, separating them with a lot of white space.
    • Blue Is The Best Color For Links
    • Follow conventions, because when people visit a new website, the first place they look for things are in the places where they found them on most other websites; they tap into their experience to make sense of this new content. This is known as usage patterns. People expect certain things to be the same, such as link colors, the location of the website’s logo, the behavior of tabbed navigation and so on.
    • What color should your links be? The first consideration is contrast: links have to be dark (or light) enough to contrast with the background color. Secondly, they should stand out from the color of the rest of the text; so, no black links with black text. And finally, research shows (Van Schaik and Ling) that if usability if your priority, sticking to blue for links is best.
    • The Ideal Search Box Is 27-Characters Wide
    • It turns out that most of today’s search boxes are too short. The problem with short boxes is that even though you can type out a long query, only a portion of the text will be visible at a time, making it difficult to review or edit what you’ve typed.
    • The study found that the average search box is 18-characters wide. The data showed that 27% of queries were too long to fit into it. Extending the box to 27 characters would accommodate 90% of queries.
    • White Space Improves Comprehension
    • White space de-clutters a page by giving items room to breathe. We can also group items together by decreasing the space between them and increasing the space between them and other items on the page. This is important for showing relationships between items (e.g. showing that this button applies to this set of items) and building a hierarchy of elements on the page.
    • White space also makes content more readable. A study (Lin, 2004) found that good use of white space between paragraphs and in the left and right margins increases comprehension by almost 20%. Readers find it easier to focus on and process generously spaced content.
    • Effective User Testing Doesn’t Have To Be Extensive
    • Jakob Nielsen’s study on the ideal number of test subjects in usability tests found that tests with just five users would reveal about 85% of all problems with your website, whereas 15 users would find pretty much all problems.
    • The biggest gains are achieved when going from 0 test users to 1, so don’t be afraid of doing too little: any testing is better than none.
    • Informative Product Pages Help You Stand Out
    • But many product pages lack sufficient information, even for visitors doing a quick scan. This is a serious problem, because product information helps people make purchasing decision. Research shows that poor product information accounts for around 8% of usability problems and even 10% of user failure (i.e. the user gives up and leaves the website) (Prioritizing Web Usability).
    • Provide detailed information about your products, but don’t fall into the trap of bombarding users with too much text. Make the information easy to digest.
    • Most Users Are Blind To Advertising
    • Jakob Nielsen reports in his AlertBox entry that most users are essentially blind to ad banners. If they’re looking for a snippet of information on a page or are engrossed in content, they won’t be distracted by the ads on the side.
    • The implication of this is not only that users will avoid ads but that they’ll avoid anything that looks like an ad, even if it’s not an ad. Some heavily styled navigation items may look like banners, so be careful with these elements.
    • That said, ads that look like content will get people looking and clicking. This may generate more ad revenue but comes at the cost of your users’ trust, as they click on things they thought were genuine content.
    • Bonus: Findings From Our Case-Studies
    • Here, we’ll review some of the practices and design patterns that we discovered in our case studies in this brief, compact overview, for your convenience.

    • According to our typography study:

      
      
      • Line height (in pixels) ÷ body copy font size (in pixels) = 1.48
    • Line length (pixels) ÷ line height (pixels) = 27.8
    • Space between paragraphs (pixels) ÷ line height (pixels) = 0.754
    • Optimal number of characters per line is 55 to 75
    • Layouts usually have a fixed width (pixel-based) (92%) and are usually centered (94%).
    • The home page shows excerpts of 10 to 20 posts (62%).
    • The registration link is titled “sign up” (40%) and is placed in the upper-right corner.
    • Titles of input fields are bolded (62%), and fields are vertically arranged more than they are horizontally arranged (86%).
    • The “Submit” button is either left-aligned (56%) or centered (26%)
    • 89% of layouts are horizontally centered, and most of them have a large horizontal navigation menu.
    • 47.2% of portfolios have a client page, and 67.2% have some form of standalone services page.
    • 63.6% have a detailed page for every project, including case studies, testimonials, slideshows with screenshots, drafts and sketches.
    • Contact pages contain driving directions, phone number, email address, postal address, vCard and online form,
• 

  shigae pouyen

  smashing magazine usability ergonomie

• 

  shakingtree

  usability webdesign tips research smashingmagazine 2009

• 

  sophia moser

  usability

• 

  xingkui wang

  usability

• 

  stacy miller
• 25 Sep 09
  

  Jamie Martin
• 

  Alexander Phoenix

  reference research tips design usability webdesign

• 

  Rohan Jayasekera

  usability

• 

  Howard Rheingold

  Various studies have been conducted to find out just what influences people’s perception of a website’s credibility:
  
  * Stanford-Makovsy Web Credibility Study 2002: Investigating What Makes Web Sites Credible Today
  * What Makes A Web Site Credible? A Report on a Large Quantitative Study
  * The Elements of Computer Credibility
  * Elements that Affect Web Credibility: Early Results from a Self-Report Study (Proceedings of ACM CHI 2000 Conference on Human Factors in Computing Systems, v.2, New York: ACM Press)

  credibility

• 

  Sven Schoof
• 

  Owen Winkler

  design usability ux

• 

  Vahur Puik

  tuto web usability disain

• 

  Sandra Andres

  usability webdesign ux guideline

• 

  Nathan Gasser

  usability ux design

• 

  Joost Moerenburg

  ux

• 

  pork san

  画像一枚で利用者の視線がこうも違うとは

  webdesign

• 

  sanbor

  y blind to ad banner

  design layout reference fonts

• 

  David Harper

  bt usability design webdesign

• 24 Sep 09
  

  Maureen Frei

  webdesign usability design accessibility

• 

  nana isnawan

  desain

• 

  David Scrimshaw

  Tools blogging todo design

• 

  Travis Chillemi

  usability webdesign

• 

  Otavio Silva

  usability design webdesign ux

• 

  Nirav ;)

  usability

• 

  Joshua Kahn

  usability design webdesign

• 

  Mark Blair

  Everyone would agree that usability is an important aspect of Web design. Whether you’re working on a portfolio website, online store or Web app, making your pages easy and enjoyable for your visitors to use is key. Many studies have been done over the years on various aspects of Web and interface design, and the findings are valuable in helping us improve our work. Here are 10 useful usability findings and guidelines that may help you improve the user experience on your websites.

  usability webdesign

• 

  Alex G

  design usability webdesign

• 

  Tien Nguyen

  usability design webdesign cool interestinglink toread

• 

  Chris Long

  design webdesign usability

• 

  susan van Gelder

  usability design webdesign

• 

  Jeff Downing

  usability design webdesign

• 

  ava tarantella

  usability webDesign webDevelopment

• 

  Thomas Buyle

  usability design webdesign

• 

  Ricardo Moreno

  usability

• 

  Fabio Salzano

  usability bestpractices tips

• 

  Joel Liu

  usability

  • A study by UX Matters found that the ideal position for labels in forms is above the fields. On many forms, labels are put to the left of the fields, creating a two-column layout; while this looks good, it’s not the easiest layout to use. Why is that? Because forms are generally vertically oriented; i.e. users fill the form from top to bottom. Users scan the form downwards as they go along. And following the label to the field below is easier than finding the field to the right of the label.
  • 
  • 10 more annotations...
  • • 

    • One interesting finding of these studies is that users really do judge a book by its cover… or rather, a website by its design. Elements such as layout, consistency, typography, color and style all affect how users perceive your website and what kind of image you project. Your website should project not only a good image but also the right one for your audience.

      
      

      Other factors that influence credibility are: the quality of the website’s content, amount of errors, rate of updates, ease of use and trustworthiness of authors.

    • 
      Basecamp makes great use of space. Above the fold (768 pixels high), it shows a large screenshot, tagline, value proposition, call to action, client list, videos and short feature list with images.
    • However, users’ habits have significantly changed since then. Recent studies prove that users are quite comfortable with scrolling and in some situations they are willing to scroll to the bottom of the page. Many users are more comfortable with scrolling than with a pagination, and for many users the most important information of the page isn’t necessarily placed “above the fold” (which is because of the variety of available display resolutions a quite outdated, deprecated term). So it is a good idea to divide your layout into sections for easy scanning, separating them with a lot of white space.
    • This is known as usage patterns. People expect certain things to be the same, such as link colors, the location of the website’s logo, the behavior of tabbed navigation and so on.
    • The study found that the average search box is 18-characters wide. The data showed that 27% of queries were too long to fit into it. Extending the box to 27 characters would accommodate 90% of queries. Remember, you can set widths using ems, not just pixels and points. One em is the width and height of one “m” character (using whatever font size a website is set to). So, use this measure to scale the width of the text input field to 27-characters wide.
    • White space also makes content more readable. A study (Lin, 2004) found that good use of white space between paragraphs and in the left and right margins increases comprehension by almost 20%. Readers find it easier to focus on and process generously spaced content.
    • Jakob Nielsen’s study on the ideal number of test subjects in usability tests found that tests with just five users would reveal about 85% of all problems with your website, whereas 15 users would find pretty much all problems.
    • This means that testing doesn’t have to be extensive or expensive to yield good results. The biggest gains are achieved when going from 0 test users to 1, so don’t be afraid of doing too little: any testing is better than none.

    • Jakob Nielsen reports in his AlertBox entry that most users are essentially blind to ad banners. If they’re looking for a snippet of information on a page or are engrossed in content, they won’t be distracted by the ads on the side.

      
      

      The implication of this is not only that users will avoid ads but that they’ll avoid anything that looks like an ad, even if it’s not an ad. Some heavily styled navigation items may look like banners, so be careful with these elements.

• 

  swilliams

  usability design

• 

  Cristian Cabezas
• 

  Ted Goas

  usability design

• 

  jandamartin

  pouzitelnost usability design webdesign ui

• 

  Anurag Chakradhar

  usability design tips

• 

  Joanna Beltowska

  usability design

Page Comments

• 
  Charmaine SK on 2009-09-26
  Now, It makes me feel like an expert in web design, thanks for sharing.
• 
  Teresa Carr on 2009-09-28
  This is a good resource for web design.

Would you like to comment?

Join Diigo for a free account, or sign in if you are already a member.