百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

5个你不应该犯的可用性错误

zhezhongyun 2025-05-22 14:52 10 浏览

5个你不应该犯的可用性错误

5 Usability Mistakes You Shouldn’t Make

没有想打造糟糕用户体验的网页设计师。

糟糕的用户体验通常并不只有一个——大量微小的体验问题在整个用户界面中重复出现,最终汇聚成一种巨大的、让人讨厌的体验。

让我们学习一下那些会让你的用户讨厌的可用性错误。

1.忽视“空数据”时的页面设计(Neglecting the Design of Blank Slates

空白页(blank slate)是当用户没有添加任何数据,或者删除所有页面相关数据时他看到的页面。

让我们看看空白页的例子——FreshBook的项目估算(item estimates)界面:

FreshBooks的空白页面例子

我们可以看到他们是如何在空白页面放置一些简单的元素来大大加强了页面的可用性的。即:

  • 着重描述(Prominent description):在页面的顶端,有一个对该页面功能的明显描述。

  • 可交互组件(Actionable components):为用户提供三条途径进行交互操作,并能立即开始。

  • 空白页面指示(Blank slate indicator):为了不让人疑惑,页面提供了状态描述,告诉用户现在页面上没有数据。

让我们把这些空页面设计元素拿开,然后看看他们在可用性方面有多重要。

想象一下你自己是个初次访问上面这个页面的用户。你被卡住了,不知道在这个页面做什么,并且没有地方告诉你这个页面是干什么的(除非你要创建一个新项目,但你不确定你会创建出什么,并且创建结果是什么样)。

你在空白页面应该展示什么?

在最低限度上,你应该有一个空白页面指示(文字)。“没发现发票”,“还没有职位计划”,“没有要显示的图片”等等。

但是对于我来说,按最低限度提供空白页面指示说明还不够好。

如果你想告诉新用户在各种可能的情况下怎么使用你的软件,利用这些空白页面会是教导他们的绝佳机会。

2不清晰的按钮文案(Unclear Button Labels

当你在一款网页应用上填写完“创建一个账户”的表单后,结尾处的按钮应该显示什么(文案)?

它应该直观地显示“创建账户”。

像网页按钮这样的可交互界面元素的文案,应该总是和它将为用户做的事相呼应。这些界面元素不应该模糊、有疑问、引起歧义。它们应该足够明显。

让我告诉你这个想法是多么微妙。

看看下面这张图,它存在一个不清晰的按钮文案。

你可能会说:“这怎么不清晰了?很明显它说明了按钮的意图:联系我们。”

我说它不清晰是因为点击按钮后的结果并不明显:

  • 它会带我去一个新的网页么?例如:联系我们页?

  • 它会打开一个包含表单的模态网页窗口么?在表单里我可以输入信息。

  • 它会打开一个实时聊天插件让我能和一个真人聊天么?

事实上,以上情况都不是。

它会把你的默认邮件客户端打开:

为什么会这样?这里有一些可用性和用户体验问题:

  • 这么说会让人迷惑,我没想到我的邮件客户端会打开。

  • 如果我还没设置我使用的默认邮件客户端会怎么样?它就会打开操作系统默认的邮件客户端(就像微软的Outlook)?那只是在浪费我的时间

  • 如果我正在用别人的电脑,或者我正用我公司的电脑工作并且它没设置我的偏好,将会怎么样?

  • 如果我不知道网站会打开我的邮件客户端会怎么样?点击按钮后,如果邮件客户端刚打开,会弹出告警。这会吓我一跳

这个按钮的后续行为并不清晰。如果按钮上的文案是“给我发邮件”,然后打开我的邮件客户端,才会给人带来惊喜。

作为一个用户,我不应该花时间去观察网页内容,并以此来猜测按下按钮会发生什么事。为什么不干脆给我写出来?如果一个按钮上写着“保存”,我会强迫自己检查一下页面的其他部分,了解一下哪些内容会被保存下来。但如果写着“保存邮件”,那什么都清楚了。

当撰写按钮文案时,只要问一下这个问题就能帮你想出好的文案:“按下按钮之后会发生什么?”

这里有一些清晰文案的例子:

MailChimp注册表单

Ballpark上“创建一个新计时器 ”

GoGardless注册表单

想一个好的按钮文案是个简单快速的事儿,但有些人往往忽视这件事。

拥有清晰的按钮文案能极大强加(网站的)可用性。

3在没有给予任何反馈的情况下让用户等待

我讨厌等待。尤其是等待一段不明不白的时间。

如果我们一起开车在路上走——然后,你这个司机——把车开到路边,并且默默地坐了1分钟,也不告诉我为什么,我会对你很生气的。

但是,如果你说:“嘿,我需要在路边停一会儿,因为我困了,我需要休息一会儿。”那样我就会完全明白并耐心地等待。

在我们的网站和网页应用中 ,总会存在让用户等待的情况。

每当我们不定期升级网站内容、打开带有高分辨率图片的模态窗口,或者当我们的网站服务器突然性能下降时,我们都会让用户等待。

让用户等待有时是不可避免的。

但让用户等待——却并不告诉他为什么——并不是不可避免的。

不论是读取数据、更新内容,或者其他可能让用户等待的情况,都要告诉他们。

展示一个带有文字的进度条或者旋转动画,告诉用户正在发生什么。

Camera Plus上传进度条

Airbnb正在加载新内容

如果你的网站正在进行更新,告诉你的用户发生了什么:

苹果的公告页面

如果你让人们知道发生了什么,他们会对你的网站更有耐心的。

4在网页表单中丢失用户输入的数据

有一次,我在一个网站上注册。登录后,这个网站让我做的第一件事是填写我的个人信息。那没什么。

然后我选择了一张照片,填写一个或两个其他的输入框,并点击按钮提交我的信息。

当我回到同样的那个页面时我很吃惊,它告诉我需要填写更多的表单项。

但实际上我之前选择的照片消失了——我需要再一次选择照片并上传它。

这件事带给我的是网页表单验证的基本规则:不论你做什么,不要在验证我的输入信息后把它弄丢。

想象一下,如果你让用户花了很长时间填写表单,仅仅是因为她忘了填写一个输入框,她却不得不重新开始,这会让她多么泄气!

5可点击区域比它们显示出来的面积要小

确保外观上可点击的元素应该就是可点击的,这点很重要。

看看下面这张图就知道我想说什么了:

一个理性的用户会认为整个Tab页签都是可点击的,但在上面的例子却不是这样的。仅仅文字区域可点击,而不是整个页签。是的,我知道那很杯具。更糟糕的是,那是我所看过的普遍问题。

为什么会发生这种事?那是因为大部分网页设计师是用无序列表(<ul>)创建Tab导航菜单。那样的代码看起来是这样的:

<ul>

<li><a href=”">Link 1</a></li>

<li><a href=”">Link 2</a></li>

<li><a href=”">Link 3</a></li>

</ul>

这么写没啥问题。

而当设计师填写所有的样式属性(尤其是padding属性)到<li>上而不是<a>上(这才是样式应该起作用的地方)时,问题来了。

因为只有<a>元素可点击,我们想要它尽可能多地占用空间。

这意味着对于这种导航样式,几乎所有CSS都应该嵌入到<a>元素里面。

同样,当对链接赋予样式(不包括backgrounds或者borders)时,使用padding而不是margin。在Web元素中间时,Padding会实现和margin相同的空白效果,但会保持可点击区域的空间又大又舒服。

快速解决问题的办法(Quick Fixes

这里讲的大部分问题实际上都是很简单就能解决,所以如果你正在犯这些错误,现在就去解决它们。

如果你没有犯本篇文章中的错误,恭喜你!那你只需要保持用一双严格的眼睛观察你的用户界面,来抓住任何其他的可用性问题。

你的用户会感谢你的。

相关推荐

Renaming column names in Pandas

技术背景在数据处理过程中,经常需要对数据框(DataFrame)的列名进行重命名,以满足数据分析、可视化或其他处理的需求。Pandas是Python中用于数据处理和分析的强大库,提供了多种重命名...

JSA宏教程WPS表格常用内置对象——应用程序(Application)对象

一、关于应用程序Application对象Application对象就是一个运行着的WPS表格(即ET)应用程序,它是整个应用程序根对象,在它之上没有其他程序对象了。ET在WPS的文件夹中的图标如下:...

Pandas通过columns属性访问、修改和删除列

在pandas中,DataFrame的列可以使用columns属性进行访问、修改或删除。以下是使用columns属性访问DataFrame列的示例代码:importpandasa...

excel的高级用法——宏,原来如此实用

使用excel时,直接手动计算或者输入公式,你会感到很苦恼或者操作很繁琐,如果使用vba直接输出结果,虽然效率很高,但是不够直观。excel宏最方便的用法是作为公式里的函数使用,打开宏编辑器,编写一个...

CSS grid-template-columns属性探讨|给你代码

CSSgrid布局CSSgrid布局是一种很强大的布局,兼容性如上表所示,表现在控制台里,你可以清楚看到他的内部每一个块都由一个虚线方块组成。他的每行每列都会生产一个单元格,而划分他们之间的线称为网...

7K star!Text2SQL还不够?试试RAG2SQL的开源工具

查询数据库离不开SQL,那如何快速构建符合自己期望的SQL呢?AI发展带来了Text2SQL的能力,众多产品纷纷提供了很好的支持。今天我们分享一个开源项目,它在Text2SQL的基础上还要继续提高,通...

用Python把表格做成web可视化图表

Python中有一个streamlit库,Streamlit的美妙之处在于您可以直接在Python中创建Web应用程序,而无需了解HTML、CSS或JavaScrip,今天我们就用st...

鸿蒙开发:使用Circle绘制圆形(鸿蒙圆角)

前言本文基于Api13上篇文章,我们使用Rect组件实现了矩形效果,本篇文章,我们继续探究几何图形的中圆形,实现矩形有多种形式,同样,圆形,也是有多种形式,在上篇的文章中也简单的做了几个案例,比如,我...

pandas读取Excel数据(.xlsx和.xls)

Python,速成心法敲代码,查资料,问Ai练习,探索,总结,优化★★★★★★★★★★Python教程:PyCharm安装过程中遇到的中英...

WPF - 4.布局(wpf 表单布局)

摘要WPF布局原则一个窗口中只能包含一个元素屏幕适应程序,不要显示设置的元素(控件)的尺寸,可以设置最小或者最大尺寸不应使用坐标设置元素的位置可以嵌套布局容器正文Grid面板通过Grid.RowDef...

前端开发避坑指南:每天都能用的 CSS3/Less/Sass 实战技巧

在前端开发这条路上,CSS3、Less和Sass就像三个形影不离的好兄弟。它们既能帮你打造出惊艳的页面效果,也会偶尔给你“挖坑”。今天就分享几个我在项目里摸爬滚打总结出的实战技巧,全是干货,拿...

WPF 实现描点导航(wps描点作图)

WPF实现描点导航控件名:NavScrollPanel作者:WPFDevelopersOrg-驚鏵原文链接[1]:https://github.com/WPFDevelopersOrg/WPF...

WPS表格自动绘制像素风格营销宣传海报文档

先看效果原图WPS表格(类Excel)效果,这不是贴图哦操作流程分解图片为BGR数值的二维数组化的CSV将二维数组的CSV导入数据,数据-导入-选择数据源-分隔符号-逗号-完成插入脚本,开发工具-WP...

Python读写docx文件(python读文档)

Python读写docx文件Python读写word文档有现成的库可以处理pipinstallpython-docx安装一下。https://python-docx.readthedocs.io/...

UWP开发入门(十七)--判断设备类型及响应VirtualKey

蜀黍我做的工作跟IM软件有关,UWP同时会跑在电脑和手机上。电脑和手机的使用习惯不尽一致,通常我倾向于根据窗口尺寸来进行布局的变化,但是特定的操作习惯是依赖于设备类型,而不是屏幕尺寸的,比如聊天窗口的...