手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表Tag:网站设计

增强网站易用性的10个设计技巧

这是一篇来自博客园的文章,感觉里面的一些知识点不错。最后那张图是我一直想要找没有找到的。好像记得每年都会有这种用户行为征测的报告出来,但,因为不知道术语是什么,也就没有找到过。做商业网站的时候,了解这种行为非常重要,只有这样才能知道把重点放在什么位置。

原文:http://www.cnblogs.com/cocowool/archive/2009/05/01/1447466.html

作者:小狼的世界

易用性是什么?

易用性就是是你的网站对用户来说使用更简单,能够让用户在他需要的地方很快找到需要的信息。类比于Google所提倡的”让用户呆在Google的时间不短缩短“,对于网站来说,我们不是减少用户在网站的停留时间,而是缩短用户寻找关键信息和向导的时间。

很多人认为要实现网站的易用性需要耗费大量的人力、财力和物力,确实有很多的大网站他们投入了很多的钱和设备去做网站的易用性的研究和测试,但是对于我们日常的小网站来说,我们仍有方法在没有专家和专业设备的基础上改进网站的易用性。

一、包含宣传词(Tagline)。

宣传词是一个用来表明公司理念、目标或者网站愿景的地方。这一部分应该是网站最引人瞩目的部分,应该用简短的语言概括站点。统计结果表明,一个页面只有8秒钟的时间来吸引一个用户继续他的浏览,所以如果不能用醒目的焦点吸引用户,那这个页面就是失败的。

国外的站点很多使用Tagline或者醒目的Flash,国内的站点也可以 这么用,有的时候内容多的时候,还可以是Banner+焦点图,这个要区分不同的网站类型来对待。例如对于产品型的网站,完全可以只使用一个焦点图或者醒 目的有特色的Flash来吸引注意,如果是资讯类的或者专题类的页面,则可能既要有Banner,来突出这个页面的主题,也要有焦点图,来显示最近的一些 动态。这个需要在制作的过程中不断地体会积累。
大小: 29.91 K
尺寸: 500 x 204
浏览: 1641 次
点击打开新窗口浏览全图
大小: 36.74 K
尺寸: 500 x 204
浏览: 1718 次
点击打开新窗口浏览全图

大小: 342.25 K
尺寸: 500 x 172
浏览: 1838 次
点击打开新窗口浏览全图

二、提供站内搜索。

站内搜索对于用户来说也是非常重要的,特别是当站点的内容量开始逐渐增多以至于用户不能很轻易的找到他想要的东西时,用户往往会想到搜索。 你能想象到,要在博客园里通过连接一个一个查找你之前看到过的某一篇文章的痛苦吧。

搜索框的长度和位置也需要加一点注意,不能太小,位置最好放在右上区域,因为根据用户的浏览习惯呈现出”F“的趋势(F Pattern),提交按钮的文字最好能够明确的告诉用户,接下来将要发生的动作是搜索。
大小: 20.78 K
尺寸: 500 x 135
浏览: 1717 次
点击打开新窗口浏览全图

三、不能滥用图片。

 从易用性的角度来看,Less Is Always More。

四、使用站点地图。

站点地图是一项能够改进站内导航和搜索引擎优化(SEO)的特性。典型的站点地图提供了站点的结构和各个页面的导航。站点地图可以是任何形式的,可以是一个网页、一些页面的列表,只要他们是按照层级关系组织起来的就行。

最近,Google、Yahoo、MSN开始提供Sitemap Protocol的服务,同站点地图非常相近,但是数据是以XML的形式组织的。

 

五、不要破坏工作流。

工作流是指用户在网站上所进行的操作,比如填写表单、注册用户、浏览目录、档案等,要允许用户撤销操作,如果没有提供后退或者返回的选项,用户就被逼着做他们不想做的动作,或者他们会干脆关掉浏览器来图个清净。

有些站点上的操作顺序并不是那么的明显,这个时候就需要有提示来指导用户。比如Yahoo Music当第一次进入的时候,会有一个向导来指导你一步一步的熟悉页面上各个功能区。玩游戏的时候也会有游戏教学这个环节,如果网站上也提供了,会带来很好的用户体验。

还有一个误区是改变超链接的样式。传统的门户往往让超链接停留在他原始的样子,这样能够给用户明确的指示,这是一个超链接,通过点击,我可以进入一 个新的页面。当然,我并不赞成超链接的样式一定不能改变,但是如果发生了改变,我们一定需要通过图示或者文字来表明,用户可以通过点击这个链接到达另外一 个页面。

六、让网站更容易被”扫描“。

内容的可读性能够提高用户的忠诚度,让用户停留在站点上获得他们需要的内容。但是研究表明,很多用户并不是在读页面,而是在”扫描“,通过扫描标题、着重文字、强调的列表来获得信息。

Jacbo Nilsen通过视觉追踪发现用户的浏览很像一个F型,他们从左到用从上到下的”扫描“页面。

大小: 46.47 K
尺寸: 500 x 222
浏览: 1795 次
点击打开新窗口浏览全图

他的实验同时也得出了一下结论:

用户不是一个字一个字的去阅读,而是从段落、着重文字中提取信息。

 文章的前两段非常的重要,这两段必须包括这篇文章的大部分内容。

副标题和列表能够重新引起用户的注意,注意用这些元素来强调重要的内容。

从传统的纸质媒体上得来的经验也告诉我们,将内容组织成一个倒金字塔型。关键问题是,我们如何才能知道什么信息对用户来说是重要的,那些信息对用户来说又是不重要的,作者推荐了一个工具:News Values。

七、不要设计容易误导的界面元素。

千万不要设计那种看上去像是一个按钮实际上不是的内容,我们也经常被那些带下划线的文字误导,当我们点击时,发现他们根本不是链接!

Yahoo是一个很好的正面的例子。

八、给出用户有意义的提示。

这一点大家应该都有共识了,不要将出错信息直接输出到页面上,要给出用户经过处理的、用户能够理解的信息。

九、不要过度使用Javascript。

过度的使用Javascript和Ajax技术,我们需要小心的避免出现浏览器兼容性问题,我们要很好的衡量这个代价。

十、避免验证符。

验证符的使用在必须的地方添加,如果不是那么必要,还是要符合人类懒惰的本性,去掉那些验证符吧。

 

总结:提升网站的易用性并不一定需要墨守成规,但是在没有足够的功力之前,这些规则能够为我们提供一个很好的方向指向。对于这些规则的争论也很多, 比如避免验证符的使用,在很多情况下,我们必须使用验证符来避免垃圾信息的产生,就像坐飞机时的安检,虽然是一件让人不舒服的事情,可是他有他的目的。

 网站的易用性也不是网站的全部,我们必须在易用性、页面设计、站点的可维护性和安全性之间权衡,对不同类型的项目采取不同的处理策略。

参考资料:

[1]、http://www.webdesignerdepot.com/2008/12/10-usability-tips-for-web-designers/

[2]、http://www.useit.com/

[3]、News Values。http://mtsu32.mtsu.edu:11178/171/newsvals.htm#top

Tags: 网站设计, 易用性

又见架构:小规模低性能低流量网站设计原则

来自dbanotes的文章,不多介绍了。我很多文章来自于dbanotes和sanotes网站

原文地址:http://www.dbanotes.net/arch/small_site_arch.html
原文如下:

到处都是什么大规模啊,高流量啊,高性能之类的网站架构设计,这类文章一是满足人们好奇心,但看过之后也就看过了,实际收益可能并不大;另外一个副作用是容易让人心潮澎湃,没学走先学跑,在很多条件仍不具备的情况下,过度设计、过度扩展(高德纳大爷也说过,"过早优化是万恶之源"),所以,这里反弹琵琶,讨论一下小规模低性能低流量的网站该如何搞法。

如果站点起步阶段可能就是一台机器(或是一台虚拟机,比如 JobsDigg.com ),这个时候,去关注什么数据拆分啊,负载均衡啊,都是没影子的事情。很多大站点的经验绝不能照搬,辩证的参考才是硬道理。

拥抱熟知的技术

动手构建站点的时候,不要到处去问别人该用什么,什么熟悉用什么,如果用自己不擅长的技术手段来写网站,等你写完,黄花菜可能都凉了。所以,有现成 的软件组件可用,就不要自己重新发明轮子。人家说 Python 牛,但自己只懂 PHP ,那就 PHP 好了,如果熟悉 .net ?,那也不错。用烂技术不是丢人的事情,把好技术用烂才丢人。

架构层次清晰化

起步的阶段应该清楚的确定下来架构的层次。如果都搅和在一起,业务一旦扩增开来,如果原有的一堆东西拆不开就是非常痛苦的事情。

Web Server <--> (AppServer)<-->Cache(eg. Memcached)<-->DB

层次清晰化的一个体现是(以 LAMP 架构为例):即使只有一台机器,也应该起个 Memcached 的实例,效果的确非常好--一般人儿我不告诉他...不要把什么都压到 DB 上,DB 一旦 I/O 压力走到磁盘上,问题要暴露出来是很快的。没错,DB 本身也会利用自己的 Cache,但 DB 的Cache 和 Memcached 设计出发点毕竟不一样。

数据冗余? 有必要

很多人并不是数据库设计专家,如果应用要自己设计表结构什么的,基本都是临时抱佛脚,但三个范式很多人倒是记得牢,这是大多数小型 Web 站点遇到的一个头疼事儿,一个小小的应用搞了几十个表... 忘掉范式这个玩意儿! 记住,尽可能的冗余数据,你在数据层陷入的时间越多,你在产品上投入的就会越少。用户更关心的是产品的设计。

前端优化很重要

因为流量低,访客可能也不多,这时候值得注意的是页面不要太大,多数流量低的站点吃亏就在于一个页面动辄几兆(我前两天看到一个Startup的首页有4M之大,可谓惊人),用户看个页面半分钟都打不开,你说咋发展? 先把基本的条件满足,再去研究前端优化

功能增加要谨慎

不是有个 80/20 原则么? 把最重要的精力放在最能给你带来商业价值的地方。有些花里胡哨的功能带来很大的开销,反而收效甚微。记住,小站点,最有价值的是业务模式,而不是你的技术有多牛。技术是为业务服务的,不要炫技。

有些网站不停的添加功能,恰恰是把这些新功能变成了压死自己的稻草。

从开始考虑性能

这一点是可选的,但也重要。设计应用的时候在开始就应考虑 Profile 这件事情。一套应用能否在后期进行有效优化和扩展,很大的程度限制在是否有比较合适的 Profile 机制上。需要补充的是,对性能的考虑必然要把有关的历史数据考虑进来。另请参见网站运维之道的容量规划以及其它小帖子。

好架构不是设计出来的

这是最后要补充的一点。好的架构和最初的设计有关系,但最重要的是发展中的演化:

发展-->发现问题-->反馈-->解决问题(执行力)--> 改进->进化到下一阶段--新问题出现(循环)

有些站点到了某个阶段停足不前,可能卡在执行力这个地方,来自用户的反馈意见上来了之后,没有驱动力去做改进。最后也是死猪不怕开水烫了。

这篇文章有浓重的山寨风格,所以,你不要太认真。如果在用短平快的方式构建某些山寨网站的话,可参考其中对你有益的点,不赞同的地方可以直接忽视掉,就没必要费力留言进行争论了。

--EOF--

Tags: 网站设计