设计网站非常重要的当然是达成网站目的,而易用性好坏也大大影响网站目的的达成率!透过「设计高易用性网站的8个实用小窍门(上)」介绍网站建设的前6个易用性小窍门,下篇将介绍写作网页文案及视觉动线的规划,帮助读者理解高易用性网站的最基本原则。
吸引人的第一视觉区,留住用户
「接近律」与「封闭律」让用户迅速理解页面元素
行动按键上的用字遣词大大影响页面转换率
可以点的东西就要「看着可以点」
要紧资讯主动展开在页面上,不要随易用页签隐藏内容
页面底部与Footer比你想像的要紧
网页文案如此写,交流更容易
怎么样掌控用户在网站上的视线
第一视觉区是进入网站后的第一印象,很多网站的跳离率过高,与第一视觉区的设计有非常大的关系!设计第一视觉区的基本需要就是「吸引用户留在网站,继续浏览」,其中四个重点为设计易用性网站的实用方法推荐Amazon网站)
(1)接近律(proximity)简单的说就是运用人类视觉会将邻近的东西分成同一组的特质,所以在网站上假如想要将一群元素让用户视为同一群体,可以增加和其他元素之间的空间,并将同元素之间的距离拉近。
(2)封闭律(closure)简单的说就是运用线、图或标题分割地区,让看的人更能理解地区间的差别。
下图二是beBit网站中的客户与成就页面。左方的网站图片与右方的效果与说明放置地方接近,两个案例间用灰色的线区隔,更明显的做出案例间的区隔。
【图二】beBit网站区隔元素的设计
(图片来源设计易用性网站的实用方法推荐beBit
前面大家提到了,要让用户点击内容本身就是一件困难的事情,假如用户在网页上没办法辨认出连结的话,即便筹备了吸引人的内容也徒劳无功。虽然扁平化的设计伴随iOS7推出引起风潮,但从达成「让用户点下去」的目的来看,能点的东西「看着可以点」更要紧!
(1)蓝色或有底线的文字在蓝色文字下方加上底线是沿用至今的基本手法。因为近年看重文字的易读性及整体设计,不用蓝色底线的网页也在增加,但从beBit到今天察看到的用法者行为,「蓝色」或「底线」还是让用户辨认出连结的要紧原因,因此请尽可能保留其中元素之一。另外,在并不是连结的文字用「蓝字」或「底线」的话,会叫人误觉得可以点击,要尽可能防止。
(2)行动按键要有按压感关于行动按键的装饰,具备「可以按下」的感觉十分要紧。一般在前端加入符号,赋予按钮网页连结感(一般为箭头或三角形),或在按键旁加入层次或阴影,或用带有圆角的矩形,便可以为按键加上按压感。【图四】具备「按压感」的行动按键
很多网站喜欢用页签(Tab)的方法设计,但页签的致命处在用户没强烈动机探寻资讯时,比较容易忽视页签以致没看到藏在页签中的要紧内容。设计网站时要考虑用户上网的心理,有的网站偏向功能型网站(如设计易用性网站的实用方法推荐网上购物平台)。用户造访功能型网站时,探寻资讯的动机强烈,即使大家只放一个关键词,用户也有意愿找到那个关键词并点击;但娱乐型网站不同,一般网上购物平台的首页浏览情境都是打发时间,若用页签等隐藏资讯的设计,这类被隐藏起来的内容大概就直接被忽视了!网页设计人员在考虑页面内容应该怎么样配置时,必须要一并考虑用户造访网站的积极性,才不会误将要紧内容的揭秘度优惠扣。
重点6、页面底部与Footer远比你想像的要紧当用户的页面拉到底下时,代表他已经看完一项内容,此时是他们心有余力看其他内容的机会。为了延续浏览行为,页面的底部是个可以借助的要紧地区。因此,推荐产品或关联性产品应该要放的地方是页面底部而非顶部。另外,mega footer的运用也是延续浏览情境的好工具,蛮合适运用在网上购物平台这种浏览页数越高越好的网站。很多网站美工花了不少心思设计了每页的内容,但却忽视了在页面底部打造与其他页面的连结,致使用户看完一页内容后就打住,这真的非常可惜!将来在设计你的网站时,也不要随便忽略页尾的地区!
推荐题目设计易用性网站的实用方法推荐