你需要知道的18个Web可用性原则

所属分类: 网页制作 / 应用技巧 阅读数: 1567
收藏 0 赞 0 分享

你可以有世界上最好的视觉设计能力,但如果你建立一个不允许访问者舒适地一页一页或一项一项访问的网站,那你就理解错了好的网站的核心点了。因此,在今天的文章我会将告诉你需要知道的18件可做不可做Web可用性事情

使用网格线来做网站页面结构

Do utilize a grid for your website structure

在你为一个有创意的网格页面框布局兴奋并尖叫的时候,你要保证你的整个网站的页面布局都在框子(Box)里边。网格结构能让访问者视线流固定在本页面,这是很关键的。一旦你将页面拉下来,页面也是很清晰简洁的 - 创造有趣的东西你需要放进优秀的设计放到网格里边。

不要忘记搜索表单

Do Not forget your search form

在你为一个有创意的网格页面框布局兴奋并尖叫的时候,你要保证你的整个网站的页面布局都在框子(Box)里边。网格结构能让访问者视线流固定在本页面,这是很关键的。一旦你将页面拉下来,页面也是很清晰简洁的 - 创造有趣的东西你需要放进优秀的设计放到网格里边。

让导航保持可寻性与可读性

Do make your navigation easy to find and readable

如果你正在设计一个网站,你的导航若是要引导用户从点A到点B,你会使用什么方式来做呢,你是否会利用一些比较怪异文字或者图片而不是一般传统连接(例如:一座房子标识主页,但是一个圆圈里边放一条闪电就不是什么好主意)。尽量保持导航容易阅读的,使访问者可以轻松浏览你的网站。

 

不要把联系信息链接使用“Mail to”链接

Do Not make your contact link in your navigation bar a mailto link

 

在点击一个链接之前,很多人(包括我自己在内)会在一个链接上悬停,然后看一下我们的浏览器状态栏,特别是联系信息链接,有些人认为联系信息链接直接向电子邮件地址来打开一个邮件程序是一个好主意。但我要告诉你这不是一个好UX的做法。创建一个联系信息页面,它把你的电子邮件地址,并添加一个联系表格 - 您的用户会感谢你 - 而且实际上会更经常地向您发送电子邮件。

 

尽可能使用UX的应用程序为Web测试

Do utilize UX Apps as much as possible for web tests

如果你对内容还没有把握,记录各种各样形式数据是个不错的主意。Google Analytics是一个完美的能看到你的网站访客都来自什么网页,他们在你的网站那上呆多久。你同样可以使用一个网站像Feedback Army去测试用户怎么浏览和使用你的网站。了解这些网站记录能让你尽量利用你的站点展示好的内容给有需要的人。

 

不要在网站的侧边栏上滥用小工具

Do Not flood your websites sidebar with tons of widgets

假如你正在使用一个博客,里边有1widgets,你可能会使用其中的一些widgets,但不是全部。你可以把博客想象成一间卧室,若里边有很多杂物,很乱没有条理,可能你的客人就不喜欢逗留。所以需要保持整洁,且有条理。博客访问者不(在大多数情况下)需要看到你的Google的好友,mybloglog 的好友,FriendFeed的好友和其他各种社交情况,因此这些都不用关心,重要的是你的站点的用户体验,而不是其他网站的东西。

你要确保在各种浏览器显示您的网站

Do make sure that your website displays well on various browsers

我们都知道的IE6已经举行过了葬礼,没有人抱怨,但是不要忘记,还有很多用户在IE7IE8的,OperaSafariFF等浏览器。仅仅因为你的网站有一两个亮点看起来不错,但这并不意味着访问者能容忍使用其他浏览器时展示出来的乱七八糟的界面。花一两个小时,分析代码并确保它在各种浏览器都正常显示。

 

不要幻想用户会为你表单赴汤蹈火

Do Not make your visitor jump through hoops to fill out a form

站点的联系方式表单不应该过长,注册表单也一样。把事情尽量简化。把表单简化到只剩三个问题(名字,Email,内容)很可能可以把以前丢失的用户拉回来。

要确保各个页面在结构一致

Do ensure your various pages are consistent in structure

除非你是一个博客,你的结构是为很多人设计,支持多用户的,要不你就得要记住,访问者希望看到熟悉一致的结构。如果他们觉得自己不同的地方时,它们加载了新的一页了,他们就会很快速的点击后退按钮。

 

不要忘了打印内容用的样式表

Do Not forget a print stylesheet for those who want to print your content

 

这一点是针对博客/内容等网站而言的。如果你的访问者要打印内容(相信我,许多人仍然这样做,尤其是年龄较大的旅客),你不应该要求他们打印整个页面,上边包含了评论和所有广告。这是很乱的,没必要。如果看了《better blogging equals better business for freelancers》这篇文章,你会知道打印出来的文正,很干净,很清晰,没有黑色和白色,没有图像,没有评论,没有工具栏。内容是印刷的问题,所以确保它突出。

 

 

要保证你的内容布局适合扫描并符合视角路线

Do make sure your content is easy to scan and follow along with

一般来说,人的注意力维持不久。因此,利用章节标题(h2H3的或H4的标记)分隔你的文章,让访问者快速扫描的文章,找到他所关心的内容。当你写你的内容,你也应该注意,用户可能看到20+行的一个段落后,视力可能就疲劳了,一般5-10行比较合适。

 

 

不要把东西塞得满满的Do Not cram more into a space than what can fit comfortably

 

简化。拥挤的一个小空间,并不能让用户眼睛集中于重要的东西反而适得其反。是的,你有大量的信息,但并不是说要把这些信息对折?尽量让你的设计和内容能保持呼吸。你的用户会感谢你的。

 

一定要使用面包屑导航Do make sure to include breadcrumbs in your design

面包屑是对于用户来说,能告诉他们在哪,下一步可以去哪。如果他们访问的是网站子页,你的面包屑导航可能如此(首页>子页面标题>)。这告诉用户他们正是页面上,以及如何各级回去,如果他们想。

 

 

不要忘了利用颜色对比度,转移焦点

Do Not forget to utilize color and contrast to shift focus

 

如果您使用的大标题,和一个栏目标题,可以尝试各种颜色的深浅,让访问者知道第一重要的东西(即:为标题和副标题为#c1c1c1464646)。这些变化的颜色和对比度将决定你的用户知道下一步去哪。

 

 

确保站点没有无效链接和图像

Do check for broken links and images

在你的旧文章图片检查无效的链接和图片是一件很重要的事情,因为可能有访问者从搜索引擎来到你的网站,如果有断开的链接,他们将要承担一两件事情:1,你是一个老网站,再不会被更新;2,你没有尽力去保障你的网站内容价值,所以他们将去其他地方。如果你是一个WordPress的用户,有一个插件:Broken Link Checker。您还可以到iwebtool and use their free broken link checker使用其免费损坏的链接检查器(每小时最多5个请求)。

 

 

不要忽视你的页脚和作用

Do Not neglect your footer and the power it has

 

所当用户拉动滚动跳到页面底部,看到的是一个平淡,单行文本的网站版权说明是一件很无聊的事情。为什么不点缀一下你的页脚,把它添加一些额外的内容,如受欢迎的文章,一个搜索框,电子邮件订阅,等。如果您想了解如何设计一个网站杀手页脚一些想法,你应该看看Footer Fetish,不要与其他的混为一谈。

 

 

设计过程中尽量使用线框图

Do use wireframing in your design process

 

在纸上使用线框图能让你可视化的看出最重要的内容,并怎么将他们展示出来。通过这样做,你也可以随意的试验各种布局,而不必担心破坏设计。对于线框灵感,我看了《I love Wireframes - 线框图是很惊人的。

 

 

为你的读者写内容而不是搜索引擎

Do Not write for search engines - write for your readers

你应该为你的读者用户而写,而不是搜索引擎。关键字可能在过去(而且可能还是今天)有用,但如果一个真实访问者访问了你的一面,发现3个段落就有100次“设计师”的时候,你觉得他们的点击后退按钮,还是继续看?无疑,点击后退的可能性非常高。

你可以在写内容的时候前大声读,如果你觉得不够自然流畅,那就推倒重写,直到流畅为止。当人们会阅读你的内容,是期望它像一个真的人在和他们交谈,所以确保确实如此。

更多精彩内容其他人还在看

32个典型的以分栏/网格为基础的网站

如果你正在寻找网页分栏设计的灵感,这里收集了32个典型的以分栏/网格为基础的网站。它们显示了在网页设计中分栏/网格的重要性,无论对于信息量巨大的站点还是个人博客。 1.The New York Times 2.National Post 3.Guardian 4.Times
收藏 0 赞 0 分享

理论普及——用户体验

一、概念分析1:UE用户体验 英文叫做user experience,缩写为UE, 或者UX。 当指电子商务网站的时候也被称作顾客体验(CUSTOMER EXPERIENCE). 它是指用户访问一个网站或者使用一个产品时的全部体验。他们的印象和感觉,是否成功,是否享
收藏 0 赞 0 分享

分页案例和好的实践

结构和层次降低了复杂性并提高了可读性。你的文章或站点组织的越深入,用户就越容易理解你观点和得到你想传达的信息。在网页上,这点被通过多个方式做到。 在正文头条和列举被用做逻辑上独立的数据块来呈现信息。另一种解决方法是一种叫分页的机制,它在给定文章的单一部
收藏 0 赞 0 分享

建立用户体验

也许你刚刚来到一家公司,他们希望进行一些“可用性”工作。你可能是一名UI设计师,业务分析师,或前端开发人员,一名产品经理,或者负责用户体验部门的经理或副总。你知道,如果更好地了解使用产品/软件/网站的人,就可能开发出更好的产品/软件/网站。不管怎么样
收藏 0 赞 0 分享

网页图片快速显示的方法和技巧

1. Use .gifs rather than .jpgs. GIFs are smaller in size when compared to JPGs. 1.用.gifs格式保存图片,最好不要用.jpgs格式。因为前者的尺寸比后者小。 2.Use 'Height
收藏 0 赞 0 分享

推荐60种分页案例和好的实践

结构和层次降低了复杂性并提高了可读性。你的文章或站点组织的越深入,用户就越容易理解你观点和得到你想传达的信息。在网页上,这点被通过多个方式做到。 在正文头条和列举被用做逻辑上独立的数据块来呈现信息。另一种解决方法是一种叫分页的机制,它在给定文章的单一部
收藏 0 赞 0 分享

全面的网站评估方案

有时会被问到“看看XXX网站如何?”之类的问题。 谈到评估,通常都是指产品级的网站,如果模式很新,了解需要花一定时间。于是,很多人又问“那么你仅从UI/UE的角度看看呢?”首先我们得达成共识,一切花里胡哨都在为功能服务,如果功
收藏 0 赞 0 分享

网页的栅格设计思考

原文地址:http://andymao.com/andy/post/82.html 网页设计中的脏、乱、差,是我们在设计过程中常会遇到的问题。通常"脏"是由对色彩使用不当所产生的,而色彩使用不当产生的不好效果也分为:"花、灰",花哨、
收藏 0 赞 0 分享

设计理论设计中的层次感

原文:http://andymao.com/andy/post/80.html 这段时间我一直在说设计需要有层次感,这种层次感可能有很多类型,比如色彩的层次感,或是元素的层次感。当一个设计缺乏层次感的时候页面所表现出来的无非是两种可能,一种是单调,一种是花哨。在设计中我们常
收藏 0 赞 0 分享

网页心得:网页色彩的搭配

网页的色彩是树立网站形象的关键之一,色彩搭配却是网友们感到头疼的问题。网页的背景,文字,图标,边框,超链接...,应该采用什么样的色彩,应该搭配什么色彩才能最好的表达出预想的内涵呢?这里谈一些心得,希望对你有所启发。 首先我们先来了解一些色彩的基本知识:
收藏 0 赞 0 分享
查看更多