re:Invent全球大会引领风向重塑未来 了解详情
写点什么

网站设计的可用性原则

  • 2014 年 3 月 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 年 3 月 12 日 04:251537
用户头像

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

关注

评论

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

4.1 Go语言从入门到精通:函数

xcbeyond

函数 Go 语言 5月日更

Github标星过万!能让面试官满意的Java面试笔记到底有多强?

Java 程序员 架构 面试

这可能是史上最易懂的计算机网络科普文

追谏

面试 大前端 网络协议 科普 TCP/IP

别再纠结“性能优化方案有哪些”了

追谏

面试 大前端

大米“绑上”区块链,江苏为农产品上“身份证”

CECBC

休息一下

IT蜗壳-Tango

5月日更

第八大洲环游记(二):中东云计算,异口同韵

脑极体

Tomcat 中是怎么处理文件上传的?

AI乔治

Java tomcat 架构 HTTP

数字经济如何推动制造业高质量发展

CECBC

新人小白福利!五一假期怒肝一天整理Java类,不简单不全你打我

牛哄哄的java大师

Java

渣本双非进大厂,3轮技术面+1轮HR面,拿下字节45k*18薪offer

Crud的程序员

Java 编程 程序员 架构

架构师实战营 模块三总结

代廉洁

架构实战营

【Vue3】起步

德育处主任

JavaScript Vue 大前端 Web Vue 3

GreenPlum数据库介绍

数据社

5月日更

一张漫画解读:程序员为什么会跑路?

Java架构师迁哥

你开25k?我给30k!能让面试官满意的Java面试笔记到底有多强?

Java 程序员 架构 面试

牛客网亲测有效!牛客下载量近百万的Java程序员复盘秘籍真滴强

Java架构之路

Java 程序员 架构 面试 编程语言

微信朋友圈的高性能复杂度

王华

架构实战营

从理论走向实践,金五银六Java线程池指南已上线,一次性教给你!

飞飞JAva

Java 线程池

网络攻防学习笔记 Day4

穿过生命散发芬芳

5月日更 网络攻防

架构师实战营 模块三作业(基于自研集群 + MySQL存储的消息队列系统架构设计文档)

代廉洁

架构实战营

不爱跳槽的程序员集中在8-17k,揭晓中国开发者的真实现状

Java架构师迁哥

上线仅仅三小时,豆瓣评分均9.0的“四本程序员必刷书籍”火了

Java架构之路

Java 程序员 架构 面试 编程语言

CPU战争40年,终于把Intel打趴下了

Java架构师迁哥

Boss直聘超90W次转发的Java面试题库!已超神

Java架构师迁哥

【LeetCode】搜索二维矩阵Java题解

HQ数字卡

算法 LeetCode 5月日更

卸载 Navicat!事实已证明,正版客户端,它更牛逼

比伯

Java 编程 架构 互联网 计算机

差点跳起来了!阿里首推22w字Java面试复盘宝典成功助我入职美团

Java架构之路

Java 程序员 架构 面试 编程语言

马特机器人系统开发具体详情丨马特现成源码开发

系统开发咨询1357O98O718

EOKEX交易所系统开发方案丨EOKEX交易所源码平台

系统开发咨询1357O98O718

☕JVM技术之旅-带你认识GC回收的原理

浩宇天尚

Java JVM GC GC Root 5月日更

百亿小文件多盘缓存的设计与实现

百亿小文件多盘缓存的设计与实现

网站设计的可用性原则-InfoQ