HarmonyOS开发者限时福利来啦!最高10w+现金激励等你拿~ 了解详情
写点什么

网站设计的可用性原则

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

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

关注

评论

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

重新认识生命世界,也重新认识我们自己

图灵教育

科普

mysql进阶(九)多表查询

No Silver Bullet

MySQL 多表查询 7月月更

【LeetCode】 数组嵌套Java题解

Albert

LeetCode 7月月更

如何判断透明LED显示屏质量优劣

Dylan

LED显示屏 led显示屏厂家

采用Dubbo?还是Spring Cloud?

博文视点Broadview

异想天开 | 假如用中文写代码,是一种什么体验?

雨果

程序员 开发者

Qt | Qt Creator功能

YOLO.

qt 7月月更

静态成员函数访问非静态数据成员【C++】

攻城狮杰森

c++ 7月月更

CRMEB 多商户这些功能,你都用过吗?

CRMEB

面试突击66:请求转发和请求重定向有什么区别?

王磊

Java面试题

ID生成器

ES_her0

7月月更

零信任架构的实施规划——针对联邦系统管理员的规划指南

权说安全

ABAP-OOALV实现

桥下本有油菜花

SAP abap

直播系统源码——短视频直播系统源码

开源直播系统源码

软件开发 直播系统 开源源码 短视频直播源码

去哪儿旅行海量指标数据采集与存储

Qunar技术沙龙

EMQ宣布赞助Erlang生态系统基金会(EEF),加速推动Erlang技术在全球的蓬勃发展

EMQ映云科技

erlang 物联网 IoT emqx 7月月更

中原银行代码智能重构实践

中原银行

生产力 插件 代码重构 中原银行 智能重构

GPS原始坐标转百度地图坐标(纯C代码)

DS小龙哥

7月月更

C# 使用ListView控件实现文件查看大图标小图标,详细信息效果。

IC00

C# 7月月更

NFT市场格局仍未变化,Okaleido能否掀起新一轮波澜?

西柚子

Kubernetes资源编排系列之二: Helm篇

阿里云大数据AI技术

运维

ppdai站点登录参数加密解析,最短的文章,最棒的案例 com

梦想橡皮擦

Python 爬虫 7月月更

CSS重复线性渐变之画格子

南城FE

CSS 前端 7月月更

即刻报名|前沿技术探索:如何让 Spark 更强劲、更灵活

Kyligence

spark 开源

3大类15小类前端代码规范,让团队代码统一规范起来!

南极一块修炼千年的大冰块

7月月更

语音质量监控

Damon

7月月更

Qt|使用Http通讯下载文件

中国好公民st

HTTP qt 7月月更

java零基础入门-File类(概念篇)

喵手

Java 7月月更

LeetCode-104. 二叉树的最大深度(java)

bug菌

Leet Code 7月月更

OpenHarmony littlefs文件系统存储结构与IO性能优化分析

OpenHarmony开发者

OpenHarmony

工作流引擎在vivo营销自动化中的应用实践 | 引擎篇03

vivo互联网技术

工作流引擎 workflow Activiti 流程引擎

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