提高网站可用性的10个小技巧

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

不论是企业网站、个人博客,或者购物网站、游戏网站,我们都希望能吸引访问者并且给他们留下愉快的访问体验。

可用性是用户体验的一种度量,它可以用访问者完成网站功能的方便程度来描述——无论是通过自身知识还是通过学习新方式来完成这种功能。我认为Jakob Nielson的解释非常到位,他说:

可用性是评估网站易用程度的一种属性。同时“可用性”这个词也指在设计过程中提高易用性的方法。

在本文中我希望能够提供一个可用性清单,内容覆盖了从视觉设计,到可以用在任何项目中的简单导航提示等多个方面

 

1. 当前位置导航

要让用户在任何时候都知道自己身处哪个模块,或者在浏览那个分类。对任何网站来说,这都可以极大提升可用性。在这一点上,创建当前位置导航可以算是最有效的提升可用性方式。

当前位置导航的理想方式是在服务端创建,这样可以大量节省HTML和CSS代码。如果不方便在服务端创建导航,那么使用CSS操纵你的body元素 从而直接定义每个导航标签也是一个不错的方法。

另外,你可以方便的 使用JavaScript创建当前位置导航菜单

要注意,你的当前位置导航最好和鼠标滑过样式保持不同,这是很多网站缩不注意的。

 

提高网站可用性的10个小技巧



2. 可用的表单标签和按钮

使用HTML的label属性,可以让用户通过点击注释标签来激活表单元素,这是HTML的一个伟大的内置功能,但不幸的是,很少有用户知道这回事。

怎样让用户了解这个功能呢?你可以通过改变鼠标指针形状的方式来提醒用户,这只需要一两行代码就可以实现。

 

提高网站可用性的10个小技巧

做成这样之后,用户就很容易的知道这标签是可以点的,我经常觉得HTML标准里没有把这些可以点的元素统一设置为小手指针是非常不应该的,所以我通常我会这样统一定义:

label, button, input[type="submit"]{cursor:pointer;}

 

 

3. 将你的LOGO链接到首页

我认为logo不链接到你的网站首页是一件令人沮丧的事情,恰恰有很多网站没有这样做。用户研究表明,这样做是很有必要的,用户需要它!

如今越来越多的网站意识到,给LOGO加链接的重要性。用户已不满足于一个标记为“主页”的文字链接,用户希望点一下logo就可以回到首页。

拿Facebook为例,它为每一个导航元素增加了“ref”属性来跟踪用户点击。如下图:

 

提高网站可用性的10个小技巧

 

4. 加大链接的点击面积

大约一年前,37Signals 的 Ryan Singer 写了一篇文章来介绍它们在 Basecamp 项目中如何增大链接的可点击面积 。这又是一个提升网站可用性的小细节,它只需要你增加链接周围的 padding 值就可以有效增大点击面积。

对任何网站来说这都是一个值得尝试的方法,它可以方式用户误点或点不到链接。并且对于手机网页的设计更为重要,因为很多用户使用手指来点击触摸屏上的链接,增大面积可以帮他们更方便的浏览网页。

 

 

提高网站可用性的10个小技巧

5. 表单元素焦点显示

为处于激活状态的表单元素添加焦点显示,越来越成为UI设计的一种趋势。它让用户了解自己做了什么,在做什么。这是一种简单但有效的向用户传递有用细节信息的方式。

 

提高网站可用性的10个小技巧

 

6. 提供有用的404错误页面

让网站呈现给用户一个大大的 Apache 错误信息会让人很不爽,创建一个友好的、有用的404错误页面是一个不错的解决方法。因为对非开发者来说,“404”这些数字没有任何意义和价值,用户只希望在网站上找到自己需要的信息。

要建立一种可以帮助用户正确的找到他们需要的信息的错误提示页面,比如显示一些抱歉的同时,加上搜索框、推荐文章或首页链接等,努力把用户留在网站上,而不要把责任都推给用户输入了错误链接。

这里有一些优秀的404页面欣赏:  极富创意的404错误页面欣赏

 

提高网站可用性的10个小技巧

 

7. 创造一个舒适的文字环境

如今,网站文案撰写已成为了一个很大的话题,做网站有越来越多的细节需要考虑。

从古到今,关于网站文字内容的讨论从未间断并且其标准在一直变化。当年Steve Krug 曾主张缩减掉一半的文字内容,转而用列表的形式呈现它们。

但现在不同了,我们需要用和朋友对话的方式来撰写文案,让用户感觉到一种舒适温馨的氛围。这样用户就会少一些局促感,即使他们遇到了使用上的问题,他也会心情愉悦的在网站帮助中寻找解决的办法。

 

提高网站可用性的10个小技巧


8. 调整行距增强可读性

行距是可以从书报杂志等传统媒体直接过度到网页上的元素之一,这些内容的研究和改进已经进行了数百年,已经积累了大量优秀的经验。所以你下次设计之前,大可以先翻翻杂志找找灵感。

行距是网页设计中经常被忽视或滥用的地方,我通常从1.4倍行距出发开始设计,然后根据设计和内容进行调整。

 

 

提高网站可用性的10个小技巧

9. 使用空白来区分和归类元素

将内容元素归类组合是显示内容的一种方式。你可以使用图片、边框或者仅仅是使用空白来归类区分。使用空白归类内容元素可以创造自然和谐的用户体验,即使是匆匆的一瞥,内容也会一目了然。

用户一眼扫过网页(比如阅读TOP10列表时),首先会注意标题。我们首先希望的是,我们的网站内容很有趣,能吸引用户进一步阅读。但是对用户进行正确的引导,会对内容的展示起到促进和相得益彰的作用。

 

提高网站可用性的10个小技巧

10. 无障碍浏览

这里并不是指“508法案” ( 即section 508,美国法律,大体上描述为:某些特殊用户群体,如残疾人,浏览某网站时,如果无法正常获得所期望的信息,那可以依据相关法规,对该网站依法起诉。 )  这里所说的“无障碍”,指的是为你的用户考虑到方方面面,让他们轻松的找到需要的东西。

如果说保证浏览无障碍可以让你的用户不会发怒,不会甩袖子走人,那么“快速响应”则是你留住用户的最后一道防线。

如果有决心的话,你可以做所有你能想到的测试,然后多方参考用户的试用意见。目的就是最大限度的留住用户,因为用户个体的意识和习惯之间存在差异,很难找到让所有用户满意的方式。

谈到“无障碍浏览”和“快速响应”,你可能会首先想到视觉障碍人士,但其含义远远超过这些。例如,你必须让你的网站适应用户的带宽限制(拨号上网,手机上网,网速慢等)和旧版本的浏览器(一些公司不会让员工升级浏览器) 。

如果我们尽最大努力的消除网站使用的障碍,并且快速的相应网站的问题,我们就能建立一个完善的用户体验,给用户留下良好的印象并且还会再次回来。

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

更受欢迎 更具创造性的深底色网页设计实例

最新的调查表示,47%的受访者首选浅底色的设计, 主要原因是基于可读性。大多数人不喜欢阅读深色背景上的亮色文字,那样眼睛容易疲劳从而导致不适的阅读体验。
收藏 0 赞 0 分享

有创意的关于我们网页页面设计

本文收集了一些“关于我们”网页页面,60个漂亮的有效果的对用户非常友好的关于我们页面的设计实例。希望你能从中获得设计灵感。
收藏 0 赞 0 分享

整洁漂亮的网页设计的4项原则

我最喜欢的设计书籍之一就是《Robin Williams Design Workshop》.它深入实际的设计理论,并且包含许多极棒的设计实例。其中一个值得关注的地方就是4项主要的设计原则,它们已经在设计中为我所用。这4项原则就是:反差, 重复, 排列, 和分类。
收藏 0 赞 0 分享

设计参考 WordPress建站成功案例

最近国外有个牛人收集了 16 个专门收集 wordpress 精彩建站案例的网站,对于每一个 wordpress 迷来说,这都是一份大礼。
收藏 0 赞 0 分享

新闻风格网站设计实例25个

杂志和新闻风格设计越来越流行了。像Wordpress之类的内容管理系统对此类网站有比较多的模板选择,可以让普通的站长或博主轻松实现一个很像新闻网站的网站。在本文中,我们将推荐25个可以为你提供灵感的杂志风格网站设计。
收藏 0 赞 0 分享

网页文字设计应该像聪明女孩穿衣服

  这世上“没有丑女人,只有懒女人”这是女人美丽圣经里的最精彩的一句话了,一个女人只要舍得花时间琢磨怎么保养,怎么打扮,总能够找到方法展现自己美丽的一面的。界面设计何尝不是如此?那就让我们来看看聪明女人的穿衣之道里有没有什么做设计可以借鉴的地方
收藏 0 赞 0 分享

怎样设计网页?怎样制作网页?

  在网页设计的认识上,许多人似乎仍停留在网页制作的高度上。认为只要用好了网页制作软件,就能搞好网页设计了。   其实网页设计是一个感性思考与理性分析相结合的复杂的过程,它的方向取决于设计的任务,它的实现依赖于网页的制作。正所谓“功夫在诗外”
收藏 0 赞 0 分享

网页可读性提高的几个方法

1. 使用对比色 (Use contrasting colours). 这里说的对比是文字的颜色和背景色的对比。这样用户可以比较容易的看清文字,减少阅读疲劳。有视力障碍的人可能看不清楚低对比度的文字。可以去Vischeck这个网站可以看看你的网站在色弱(或色盲)用户眼中的样子。
收藏 0 赞 0 分享

网页设计心得:页面布局的简单规则

·重复:在整个站点中重复实现某些页面设计风格。   重复的成分可能是某种字体、标题logo、导航菜单、页面的空白边设置、贯穿页面的特定厚度的线条等。   颜色作为重复成分也很有用:为所有标题设置某种颜色,或者在标题背后使用精细的背景。 &middo
收藏 0 赞 0 分享

网页设计人员应该注意的43个Web设计错误

这是一篇关于网站易用性的文章,作者以亲身体会讲述了43条网站设计中常犯的错误,而无疑这些错误会大大影响网站的可用性。如今网站易用性已成为一种趋势,但纵观国内的各大网站,似乎易用性并未成为设计者们广泛理解的概念, 因此希望这篇文章对大家能有作用。 1. 用户必须
收藏 0 赞 0 分享
查看更多