5个你不应该犯的可用性错误
zhezhongyun 2025-05-22 14:52 13 浏览
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)
这里讲的大部分问题实际上都是很简单就能解决,所以如果你正在犯这些错误,现在就去解决它们。
如果你没有犯本篇文章中的错误,恭喜你!那你只需要保持用一双严格的眼睛观察你的用户界面,来抓住任何其他的可用性问题。
你的用户会感谢你的。
相关推荐
- DevExpress使用教程:GridView经验小结
-
下面是笔者自己总结的使用DevExpressGridview的一些经验小结,分享给大家:1、去除GridView头上的"Dragacolumnheaderheretogroup...
- ComponentOne 新版本发布,新增 .NET 6 和 Blazor 平台控件支持
-
ComponentOneEnterprise是葡萄城推出的一款内置300多种开发控件的.NET控件集,可满足WinForm、WPF、Blazor、ASP.NETMVC等平台下的系统开发...
- Wijmo5 Flexgrid基础教程:数据绑定
-
WijmoEnterprise下载>FlexGrid在JavaScript程序中启动添加Wijmo引用;添加wijmo控件的扩展;在JavaScript中初始化wijmo控件;(可选)添加cs...
- Wijmo5 Flexgrid基础教程:InlineEdit
-
WijmoEnterprise下载>对于flexgrid,可以直接在单元格内进行编辑。但另外还有一种编辑方式,即在一行添加按钮,统一的编辑和提交数据。本文主要介绍给flexgrid添加编辑按钮...
- WinForms Data Grid控件升级(winform devexpress控件)
-
告诉大家一个好消息:慧都将于近期隆重推出“DevExpress14.2新版发布会”。心动不如行动,赶快报名吧!我们期待与您相约DevExpress14.2新版发布会。>>新增Wind...
- XAML控件宽度为另一控件的一半、静态属性绑定
-
控件上当某些数据需要根据其他数据的变化而变化很多时候,想让某个控件的宽度或者高度是另一个已有控件的一半,一开始打算使用ObjectDataProvider来实现,因为在控件上当某些数据需要根据其他数据...
- 用 CSS Grid 布局制作一个响应式柱状图
-
最新一段时间比较喜欢玩弄图表,出于好奇,我想找出比较好的用CSS制作图表的方案。开始学习网上开源图表库,它对我学习新的和不熟悉的前端技术很有帮助,比如这个:CSSGrid。今天和大家分享我学到的...
- Grid 移动端双列瀑布流(移动端瀑布流布局)
-
预览图:原理合理使用Grid的属性:display:设置为grid指明当前容器为Grid布局grid-template-columns:定义每一列的列宽(百分比或绝对单位)grid-templa...
- DevExpress导出GridControl控件数据
-
前言:使用C#做桌面应用时,我们会常常使用Winform作为我们的开发界面,但是windows自带的控件由于长时间不更新,已经不能够满足当前开发需要所以使用DevExpress控件作为Winform...
- css grid 布局的那些事儿(css grid布局和flex布局)
-
CSSGrid是一种为Web开发创建网站布局的方式。它已经存在了很多年,随着更多浏览器的支持,它终于变得越来越流行。接下来我们将了解下CSSGrid及其工作原理。了解下它如何使用。CSS...
- Grid.js - 跨框架的前端表格插件(前端table框架)
-
只想简简单单画个表格,但React,Vue,Angular,…,这么多前端框架,各自都有不同的表格渲染库。就没有表格库能“一次画表,到处运行”吗?来看看Grid.js这个跨框架的前端表格插件吧!...
- WPF开发教程01-布局控件(wpf tablecontrol控件)
-
布局控件是用于进行控件布局的容器类控件,其内部控件按照一定规律自动排列,且在父控件改变大小时,会自动适应。常用布局控件如下:1.一维布局控件(StackPanel)其内部控件按照某个维度自动排列,排...
- wxPython - 高级控件之表格Grid(wxpython grid刷新数据)
-
实战wxPython系列-043wx.grid.Grid及其相关类用于显示和编辑表格数据。它们提供了一组丰富的功能,用于显示、编辑和与各种数据源交互。wx.grid.Grid是一个功能强大的但是又稍微...
- 前端 BFC、IFC、GFC 和 FFC,这些你都知道吗?
-
如果觉得我的文章不错,可以关注我,想要看其他的进阶知识可以查看我发布过的文章!编辑搜图请点击输入图片描述BFC(Blockformattingcontexts):块级格式上下文页面上的一个隔离的...
- 20多个好用的 Vue 组件库,请查收
-
在本文中,我们将探讨一些最常见的vuejs组件。你可以收藏一波。VueTables-2地址:https://github.com/matfish2/vue-tables-2VueTables2...
- 一周热门
- 最近发表
-
- DevExpress使用教程:GridView经验小结
- ComponentOne 新版本发布,新增 .NET 6 和 Blazor 平台控件支持
- Wijmo5 Flexgrid基础教程:数据绑定
- Wijmo5 Flexgrid基础教程:InlineEdit
- WinForms Data Grid控件升级(winform devexpress控件)
- XAML控件宽度为另一控件的一半、静态属性绑定
- 用 CSS Grid 布局制作一个响应式柱状图
- Grid 移动端双列瀑布流(移动端瀑布流布局)
- DevExpress导出GridControl控件数据
- css grid 布局的那些事儿(css grid布局和flex布局)
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML常用标签 (29)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法:GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)
- CSS 水平对齐 (Horizontal Align) (30)