站内公告:
联系我们CONTACT
2022-02-10 点击量:
日常生活中,当有人向你问路时,最好的办法就是给他们指出方向和路线。在web和app界面设计中也一样,设计师可以利用各种指示性设计元素引导用户,帮助用户找到自己想要的内容或完成某项必要的操作。
本文就UI界面中常见的指示性设计元素做了一些整理,希望可以帮助到各位设计师。
众所周知,道路上的指示标志是用来指示车辆和行人该如何通行。同理,在UI界面中,指示性设计元素就是用来告知、引导、指示用户的设计元素,因此,只要是在视觉上可以提示特定的交互或内容,从而让用户更快、更轻松地注意到,比如CTA按钮,文本提示等,都属于指示性设计元素。
指示性设计元素是如何影响用户体验的?大多数情况下,往往只需要几秒钟时间,用户就已经决定了要不要使用你的产品。因此,页面的逻辑是否清晰,结构是否明确,重点是否突出,指示性元素的引导是否合理就显得非常重要。
指示性设计元素是我们今天讨论的重点,它对用户体验的影响是多方面的,使用正确的指示性设计元素可以:
方便用户快速浏览页面
加强页面视觉层次感
提供更便利的导航
提高页面转化率
关于指示性元素和用户体验之间的问题,CXL Lnsitute曾经做过一个很有名的实验。这个研究小组做了很多个不同版本的落地页面来进行测试,嘉瑞广告,根据用户行为收集了大量的用户交互数据,并进行了准确分析,发现不同的设计对用户行为、用户在页面的停留时间以及页面转化率都大有影响。
CXL Lnsitute用于测试的落地页面如下:
1)界面中人物视线偏移表单:
2)界面中人物视线聚焦在表单:
3)界面中有箭头指向表单:
4)界面中没有任何指示性设计元素:
5)界面中通过深色背景突出表单:
6)界面中有一个三角指向表单:
测试结果显示,落地页的热点图差距非常巨大。
首先,带有手绘箭头的页面热点图如下:
该页面用户的停留时间最长,并且表单的点击次数最多。
其次,人物视线偏离表单的页面热点图如下:
该页面,用户的注意力也完全脱离了表单。
可见,指示性设计元素对用户行为和页面的转化率有着非常重大的影响。
常见的指示性设计元素 一、箭头(Arrows)箭头是最受欢迎的指示设计元素之一,它通用、明显、易懂。不同年龄、不同文化、不同教育程度以及不同技术涵养的人都可以理解。前面提到的CXL Lnsitute的测试也验证了这一点。
家居装饰电子商务网站
使用箭头作为交互元素的视觉提示:
外卖网站
左右各有一个箭头,提示用户可以选择更多:
Dance Academy着陆页
使用箭头提示用户页面在水平方向上存在交互:
Tubik Studio团队设计的网站
底部箭头提示用户可以滚动鼠标浏览页面: