QCon北京「鸿蒙专场」火热来袭!即刻报名,与创新同行~ 了解详情
写点什么

网站设计的可用性原则

  • 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:252082
用户头像

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

关注

评论

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

架构师的十八般武艺:后记

agnostic

架构师

致MonoCats社群的一封信:邀请您与我们在以太坊开启新篇章

股市老人

【愚公系列】2022年10月 Go教学课程 030-结构体继承

愚公搬代码

10月月更

八大排序 (上)

lovevivi

c 数据结构 10月月更

打造安全的Open RAN

俞凡

架构 安全 OpenRAN

新书上市|豆瓣8.6,首部全面披露中国游戏发展史的奇书!

图灵社区

训练实战营模块二

Geek_408c99

Kafka监控与指标之UnderReplicatedPartitions

石臻臻的杂货铺

Kafk 10月月更

Go RPC入门指南:RPC的使用边界在哪里?如何实现跨语言调用?

王中阳Go

php Go RPC RPC框架 10月月更

微信朋友圈高性能复杂度分析

兜里贼缺钱

Vue整合HighCharts和ECharts实现数据可视化

闫同学

Vue 前端 10月月更

大数据ELK(二十七):数据可视化(Visualize)

Lansonli

10月月更 Visualize

元宇宙早已注定毁灭?《雪崩》中预言的末日病毒

脑极体

雪崩

Kafka消费客户端协调器讲解(GroupCoordinator)

石臻臻的杂货铺

kafka 10月月更

「趣学前端」开耍CSS的3D转换,不会玩滑板但能画滑板

叶一一

CSS 前端 10月月更

Java基础(七)| 类、对象、封装和构造详解

timerring

Java 对象 封装 构造 10月月更

新书上市|豆瓣8.6,首部全面披露中国游戏发展史的奇书!

图灵教育

游戏

Smart Finance:熊市下,GameFi P2E热潮仍能得到延续

股市老人

【算法】剑指offer-调整数组顺序&&数组出现超过一半的数字

芒果酱

c++ 算法 10月月更

架构师的十八般武艺:架构治理

agnostic

架构治理

如何使用 CSS 提高页面性能?

CoderBin

CSS 面试 前端 优化 10月月更

【Go实现】实践GoF的23种设计模式:代理模式

元闰子

Go 设计模式 代理模式

架构实战训练营模块2-朋友圈复杂度分析

阿姆斯壮

#架构实战营 架构实战训练营9期

【从0到1学算法】6.Select Sort算法

Geek_65222d

10月月更

架构实战营 - 模块二作业

Geek_92ba6f

架构设计 微信朋友圈

一文搞懂CAN FD总线协议帧格式

不脱发的程序猿

汽车电子 CAN FD 一文搞懂CAN FD总线

面试突击90:过滤器和拦截器有什么区别?

王磊

什么时候用Goroutine?什么时候用Channel?

王中阳Go

Go 并发 channel goroutine 10月月更

Spring Boot「07」Loading initial data 02

Samson

Java spring Spring Boot 学习笔记 10月月更

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