写点什么

网站设计的可用性原则

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

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

关注

评论

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

优化数据处理效率,解读 EasyMR 大数据组件升级

袋鼠云数栈

大数据组件 大数据计算引擎 大数据引擎 数据组件 组件升级

利用人工智能ChatGPT自动生成基于PO的数据驱动测试框架

测试人

软件测试

穿越流程管理的丛林!Prothentic学院「流程管理培训」第1期圆满落幕

望繁信科技

业务流程管理 望繁信科技 流程管理培训 陈果George Prothentic学院

闲鱼开发者必读:如何利用闲鱼商品列表数据接口进行数据分析

tbapi

闲鱼API 闲鱼商品列表接口 闲鱼商品列表数据接口 闲鱼商品列表数据采集

生成式 AI 时代的数据库:Databend 与大模型的融合探索

Databend

利用人工智能ChatGPT自动生成基于PO的数据驱动测试框架

霍格沃兹测试开发学社

【YashanDB知识库】ycm托管数据库时,数据库非OM安装无法托管

YashanDB

yashandb 崖山数据库 崖山DB

7thonline第七在线出席中服协时尚科技峰会 探讨AI商品管理落地

第七在线

数据安全风险怎么理解?包括哪些方面?

行云管家

数字化 数据安全 企业数据

【YashanDB知识库】ycm纳管主机安装YCM-AGENT时报错“任务提交失败,无法连接主机”

YashanDB

yashandb 崖山数据库 崖山DB

硅纪元视角 | 6秒生成4张图,Getty Images和英伟达联合推出文生图AI模型

硅纪元

【Hbase】运维问题汇总

扬_帆_起_航

济宁有正规等保测评机构吗?大神求告知!

行云管家

等保 等级保护 济宁

测试环境领域到测试环境产品

阿里技术

阿里巴巴 测试 淘宝 测试环境

淘宝API接口测试中的安全性保障

Noah

什么是云原生?

源字节1号

开源

新版HAP应用市场即将推出,诚邀意向开发者提前入驻,抢占先机

明道云

利用人工智能ChatGPT自动生成基于PO的数据驱动测试框架

测吧(北京)科技有限公司

测试

全渠道AI数字化商品管理 零售品牌增长“超级引擎”

第七在线

百度智能云 ABC Stack 获可信云技术最佳实践,共建一云多算生态

Baidu AICLOUD

Go 并发编程原语及并发设计模式

baiyutang

Go 编程 云原生 并发’

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