写点什么

网站设计的可用性原则

  • 2014-03-12
  • 本文字数:2176 字

    阅读完需:约 7 分钟

随着互联网竞争日益激烈,同质化的网站越来越多,但只有提供了最佳用户体验的那一个才会胜出。可用性是一个设计者必须要重视的原则,来自 IBM 的工程师张群撰文从多个方面阐述了可用性原则在具体网站设计中的细节实现和具体案例,值得网站设计者借鉴。

作者首先强调了可用性设计的重要性:

相互竞争的网站通常提供相似的功能,我们经常能感受到视频网站同质化,团购网站同质化,社交网站同质化,门户网站同质化,它们之间信息内容重复、服务项目雷同,但只有提供了最佳用户体验的那一个才会胜出。在网站设计、开发及发布过程中,通常可用性专家会帮助评估网站的易用性,收集内部反馈,测试团队进行可用性测试。最为糟糕的是网站上线阶段发现界面错误,需要花高昂的代价修复网站界面错误。因此分阶段设计、及早测试、经常测试是极其有必要的。

要实现可用性原则,作者认为要分析用户的真正需求:未经解构的用户需求在某种程度上来讲是“伪需求”,不能真实体现需求,往往是表面上的需求,洞察用户表象背后的真实需求是网站设计的第一步。有经验的网站设计师往往在用户的显性需求描述基础上,探究他们的真实问题是什么,并打磨需求。

用户上网的习惯和逛超市基本类似,大量网页他们几乎不看一眼,而是扫视页面寻找感兴趣的内容。但用户愿意为高质量的内容而忍受广告和糟糕的设计。网站设计者不应对用户的耐心抱有较高的期待,多数用户都扫视页面而非阅读,靠自己的直觉摸索,如果页面没有达到用户预期,使得学习成本负荷越高、直观性越差,用户就会很轻易的离开,寻找替代的页面。

以“一致性的视觉设计”为例,作者指出,当一个网站的视觉设计整洁连贯,高度一致时,用户很容易不费脑力去理解如何使用网站,不一致的视觉设计,有可能会让人感觉到欺骗,当界面设计得过于跳跃和创新,用户可能在第一眼难以理解,不得不重新学习如何使用那些他们本已经熟悉的东西。视觉一致性可以提高产品所塑造的品牌形象,一定程度上减少用户的认知成本。

达到“一致”的界面,并非指界面元素需要“统一”,视觉上可以有很多不同的表现手段,世界上没有两个相同的鸡蛋,为了一致,网站信息架构很重要。具体体现在形状、色彩、界面质感、图标、画风、文字描述、提示信息呈现方式等,使得网站在不同的栏目下,设计一致,而不是不同的栏目下页面视觉差异大,一眼看上去,不象一个爹妈生出来的。

对于“文字对齐”问题,作者分析了两端对齐的问题:当行的原始长度差异过大时,行与行之间有明显的疏密变化。而且对英文来说,如果没有 hyphenation,往往也很难让行间长度差异适合两端对齐。

越来越多的浏览器开始实现适用于中文的两端对齐算法,在可以启用 CSS hyphenation(断字)的浏览器,我们可以考虑使用 text-align: justify; 来达到漂亮的两端对齐效果,但如何才是理想效果?需要综合考虑浏览器兼容性,良好的断字是美观文本的必要条件,但正确的断字方法是按照单词的音节将其断开,这样使得用户在阅读时候不必读到下一行才能拼出完整单词,这个问题在单行文本特别长,行间距较小的时候显得尤其重要。

作者指出,排版上一定要尽量两端对齐的原则不一定适用于现代网站,左端对齐(flush left)、右端参差(ragged right)的排版越来越常见,人们的审美观也在发生变化。如今的互联网上,左对齐也是文本的默认设定。纯英文文本行的长度错落有致,强制右侧对齐不一定是明智之选。设计师可以综合利用hyphens; ``letter-spacing, text-justify等 CSS 技巧达到美观效果。

固定元素保持惯例,作者列举了几个例子:

  • 网站标题 (header)往往会在网站左上方显示。
  • LOGO 通常可以点击,以回到首页
  • 退出登录一般会在网站右上方显示
  • 版权信息总是位于最下方 footer
  • 网站搜索框经常会出现在网站右上方或中部上方
  • 切换网站语言版本的功能经常出现在网站 header 右端并配有国旗显示更直观
  • 搜索框必需是一个框
  • 注册通常在页面的右上角

作者提倡仅在必要时使用下拉菜单,虽然下拉菜单占较少的屏幕空间,但其缺点也是明显的,例如选项可见性较低,下拉菜单所包含的内容项太多时将造成困扰。然而根据 Jacob Nielsen 对下拉菜单的研究,他认为下拉菜单并不一定要很小,“巨型”导航下拉菜单效果也不错。近年来,mega menu 成为在网页设计中成为一种趋势,尤其是在电子商务网站,如果运用得当,它确实能有效帮助到用户快速获取信息,大的二维下拉面板可以对导航选项进行清晰,组织良好的导航分组,将用户从不得不进行的滚动中解脱出来。运用是否得当成了设计的关键。

巨型菜单的优势:

  • 所有选项一目了然
  • 可通过分隔线、富文本、图标、图片修饰等视觉上手段更加清晰地组织菜单结构

巨型菜单的劣势:

  • 未展开前的 mega menu 不易被用户发觉
  • 大量的菜单选项占据了屏幕空间,遮住了一部分内容
  • 缩小浏览器尺寸或在小屏幕手持设备上不易看到全部菜单内容
  • Load 巨型菜单速度有影响
  • Accessibility 方面,fly-out 菜单很容易导致可访问性问题,代码书写需要更小心谨慎

除此之外,作者还强调不要忘记保护性设计:

我们应该总是设想,用户不按常理出牌,不会按您的预期使用您的网站,或是误用。所以我们一定要有保护性设计,比如,删除一个文档如果没有确认提示,又没有提供恢复功能,这将给用户造成难以接受的后果;再如,如果用户在输入注册信息时关闭浏览器,在没有询问之前不要抛弃他们的数据;或是,当用户请求的一个页面不存在时,需提供一个有用的 404 页面。

2014-03-12 04:252323
用户头像

发布了 501 篇内容, 共 276.6 次阅读, 收获喜欢 63 次。

关注

评论

发布
暂无评论
发现更多内容

硬核图解红黑树并手写实现

Silently9527

Java 数据结构与算法 红黑色

封装一个jQuery的$方法

空城机

JavaScript jquery 大前端 4月日更

区块链农产品质量安全溯源平台--全流程上链

13530558032

架构实战营模块1作业

季节风myy

第 0 期架构训练营模块 1 作业

架构实战营

千万不要轻易尝试“熊猫烧香”,这不,我后悔了!

冰河

互联网 网络安全 信息安全 渗透 蠕虫

Python基础之:Python中的内部对象

程序那些事

Python Python3 程序那些事

联邦查询引擎Presto源码编译与调试

小舰

源码剖析 presto 4月日更

区块链医药溯源解决方案--助力药品溯源

13530558032

通俗易懂数仓建模—Inmon范式建模与Kimball维度建模

五分钟学大数据

数据仓库 维度建模 4月日更 范式建模

Rust从0到1-所有权-切片类型

rust slices 切片

智慧政务,区块链电子证照平台的解决方案

13828808769

#区块链#

《基于实践,设计一个百万级别的高可用&高可靠的IM消息系统》

后台技术汇

后端 消息系统 签约计划 引航计划 内容合集

如何帮助一个新人快速融入团队

码猿外

团队协作 敏捷精益

让大家喘口气休息一下吧,工作中事情众多烦心时,让我们与工作独处一会儿。

叶小鍵

Python OpenCV 美女换装,图像处理取经之旅第 19 天

梦想橡皮擦

Python OpenCV 4月日更

零基础学Tableau系列 | 05—(进阶)数据集合并、符号地图、智能显示、插入自定义形状、仪表板

不温卜火

数据可视化 数据清洗 4月日更

MongoDB的几个常见问题

程序员架构进阶

mongodb 集群 28天写作 4月日更 实战问题

#架构训练营作业一

吴猛

架构训练

return

极速精简 Go 版 Logstash

万俊峰Kevin

Logstash go-zero Go 语言

区块链药品防伪溯源平台搭建,区块链防伪溯源的解决方案

13828808769

#区块链#

每日总结-2021-04-05

cyningchen

架构实战营 模块一 为何架构设计能力难以提升

9527

图尔兹与达梦数据库达成全面战略合作,共筑国产数据库新生态

BinTools图尔兹

数据库 数据安全 操作数据库

“学生管理系统”毕设架构设计

Vincent

架构实战营

文字变图片——GitHub 热点速览 v.21.14

HelloGitHub

GitHub 开源

Kubernetes中的CI/CD

倪朋飞

Kubernetes DevOps CI/CD

Git 技巧11条,离大神又进了一步,嘿嘿

Java小咖秀

git 程序员 开发工具

LiteOS内核源码分析:任务LOS_Schedule

华为云开发者联盟

操作系统 函数 LiteOS 调度 LOS_Schedule

Ansible 教程

码语者

DevOps ansible

网站设计的可用性原则_语言 & 开发_崔康_InfoQ精选文章