提升网站能用性的10个小窍门

2021-01-20 22:22 jianzhan

无论是公司网站、本人blog,或买东西网站、手机游戏网站,大家都期待能吸引住浏览者而且给她们留下愉快的浏览体验。

能用性是客户体验的1种衡量,它能够用浏览者进行网站作用的便捷水平来叙述——不管是根据本身专业知识還是根据学习培训新方法来进行这类作用。我觉得Jakob Nielson的解释十分到位,他说:

能用性是评定网站易用水平的1种特性。另外“能用性”这个词也指在设计方案全过程中提升易用性的方式。

在本文中我期待可以出示1个能用性清单,內容遮盖了从视觉效果设计方案,到能够用在任何新项目中的简易导航栏提醒等好几个层面

 

1. 当今部位导航栏

要让客户在任什么时候候都了解自身身处哪一个控制模块,或在访问那个归类。对任何网站来讲,这都可以以巨大提高能用性。在这1点上,建立当今部位导航栏能够算是最合理的提高能用性方法。

当今部位导航栏的理想化方法是在服务端建立,这样能够很多节约HTML和CSS编码。假如不便捷在服务端建立导航栏,那末应用CSS控制你的body元素 从而立即界定每一个导航栏标识也是1个非常好的方式。

此外,你能够便捷的 应用JavaScript建立当今部位导航栏菜单

要留意,你确当前部位导航栏最好是和电脑鼠标滑过款式维持不一样,这是许多网站缩不留意的。

 



2. 能用的表单标识和按钮

应用HTML的label特性,可让客户根据点一下注解标识来激活表模块素,这是HTML的1个杰出的内嵌作用,但悲剧的是,非常少有效户了解这回事。

如何让客户掌握这个作用呢?你能够根据更改电脑鼠标指针样子的方法来提示客户,这只必须1两行编码便可以完成。

 

做成这样以后,客户就很非常容易的了解这标识是能够点的,我常常感觉HTML规范里沒有把这些能够点的元素统1设定为小手指针是是非非常不可该的,因此我一般我会这样统1界定:

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

 

 

3. 将你的LOGO连接到主页

我觉得logo不连接到你的网站主页是1件让人消沉的事儿,刚好有许多网站沒有这样做。客户科学研究说明,这样做是很必须的,客户必须它!

现如今愈来愈多的网站观念到,给LOGO加连接的关键性。客户已不考虑于1个标识为“首页”的文本连接,客户期待点1下logo便可以返回主页。

拿Facebook为例,它为每个导航栏元素提升了“ref”特性来追踪客户点一下。以下图:

 

 

4. 加大连接的点一下面积

大概1年前,37Signals 的 Ryan Singer 写了1篇文章内容来详细介绍它们在 Basecamp 新项目中怎样增大连接的可点一下面积 。这又是1个提高网站能用性的小细节,它只必须你提升连接周边的 padding 值便可以合理增大点一下面积。

对任何网站来讲这全是1个值得尝试的方式,它能够方法客户误点或点不到连接。而且针对手机上网页页面的设计方案更加关键,由于许多客户应用手指来点一下触碰屏上的连接,增大面积能够帮她们更便捷的访问网页页面。

 

 

5. 表模块素聚焦点显示信息

为处在激活情况的表模块素加上聚焦点显示信息,愈来愈变成UI设计方案的1种发展趋势。它让客户掌握自身做了甚么,在做甚么。这是1种简易但合理的向客户传送有效细节信息内容的方法。

 

 

6. 出示有效的404不正确网页页面

让网站展现给客户1个大大的 Apache 不正确信息内容会令人很不爽,建立1个友善的、有效的404不正确网页页面是1个非常好的处理方式。由于对非开发设计者来讲,“404”这些数据沒有任何实际意义和使用价值,客户只期待在网站上寻找自身必须的信息内容。

要创建1种能够协助客户正确的寻找她们必须的信息内容的不正确提醒网页页面,例如显示信息1些很抱歉的另外,再加检索框、强烈推荐文章内容或主页连接等,勤奋把客户留在网站上,而不必把义务都推给客户键入了不正确连接。

这里有1些出色的404网页页面赏析:  极富艺术创意的404不正确网页页面赏析

 

 

7. 造就1个舒服的文本自然环境

现如今,网站创意文案编写已变成了1个很大的话题,做网站有愈来愈多的细节必须考虑到。

从古至今,有关网站文本內容的探讨从未中断而且其规范在1直转变。当年Steve Krug 曾认为缩减掉1半的文本內容,转而用目录的方式展现它们。

但如今不一样了,大家必须用和盆友会话的方法来编写创意文案,让客户觉得到1种舒服温暖的氛围。这样客户就会少1些紧凑感,即便她们遇到了应用上的难题,他也命中情愉悦的在网站协助中找寻处理的方法。

 


8. 调剂行距提高可读性

行距是能够从书报杂志等传统式新闻媒体立即过多到网页页面上的元素之1,这些內容的科学研究和改善早已开展了数百年,早已累积了很多出色的工作经验。因此你下一次设计方案以前,大能够先翻翻杂志找找设计灵感。

行距是网页页面设计方案中常常被忽略或乱用的地区,我一般从1.4倍行距考虑刚开始设计方案,随后依据设计方案和內容开展调剂。

 

 

9. 应用空白来区别和分类元素

将內容元素分类组成是显示信息內容的1种方法。你可使用照片、边框或仅仅是应用空白来分类区别。应用空白分类內容元素能够造就当然和睦的客户体验,即便是匆匆的1瞥,內容也会1目了然。

客户1眼扫过网页页面(例如阅读文章TOP10目录时),最先会留意题目。大家最先期待的是,大家的网站內容很趣味,能吸引住客户进1步阅读文章。可是对客户开展正确的正确引导,会对內容的展现起到推动和相辅相成的功效。

 

10. 无阻碍访问

这里其实不是指“508法令” ( 即section 508,美国法律法规,大致上叙述为:一些独特客户人群,如残疾人,访问某网站时,假如没法一切正常得到所期待的信息内容,那能够根据有关政策法规,对该网站依规提起诉讼。 )  这里所说的“无阻碍”,指的是为你的客户考虑到到各个方面,让她们轻轻松松的寻找必须的物品。

假如说确保访问无阻碍可让你的客户不容易发火,不容易甩袖子走人,那末“迅速回应”则是你留住客户的最终1道防御。

假如有信心的话,你能够做全部你能想起的检测,随后多方参照客户的试作用见。目地便是最大程度的留住客户,由于客户个人的观念和习惯性之间存在差别,很难寻找让全部客户令人满意的方法。

谈到“无阻碍访问”和“迅速回应”,你将会会最先想起视觉效果阻碍人员,但其含意远远超出这些。比如,你务必让你的网站融入客户的带宽限定(拨号上网,手机上上网,网速慢等)和旧版本号的访问器(1些企业不容易让职工升級访问器) 。

假如大家尽最大勤奋的清除网站应用的阻碍,而且迅速的相应网站的难题,大家就可以创建1个健全的客户体验,给客户留下优良的印象而且还会再度回家。