随着互联网竞争日益激烈,同质化的网站越来越多,但只有提供了最佳用户体验的那一个才会胜出。可用性是一个设计者必须要重视的原则,来自IBM的工程师张群撰文从多个方面阐述了可用性原则在具体网站设计中的细节实现和具体案例,值得网站设计者借鉴。
作者首先强调了可用性设计的重要性:
相互竞争的网站通常提供相似的功能,我们经常能感受到视频网站同质化,团购网站同质化,社交网站同质化,门户网站同质化,它们之间信息内容重复、服务项目雷同,但只有提供了最佳用户体验的那一个才会胜出。在网站设计、开发及发布过程中,通常可用性专家会帮助评估网站的易用性,收集内部反馈,测试团队进行可用性测试。最为糟糕的是网站上线阶段发现界面错误,需要花高昂的代价修复网站界面错误。因此分阶段设计、及早测试、经常测试是极其有必要的。
要实现可用性原则,作者认为要分析用户的真正需求:未经解构的用户需求在某种程度上来讲是“伪需求”,不能真实体现需求,往往是表面上的需求,洞察用户表象背后的真实需求是网站设计的第一步。有经验的网站设计师往往在用户的显性需求描述基础上,探究他们的真实问题是什么,并打磨需求。
用户上网的习惯和逛超市基本类似,大量网页他们几乎不看一眼,而是扫视页面寻找感兴趣的内容。但用户愿意为高质量的内容而忍受广告和糟糕的设计。网站设计者不应对用户的耐心抱有较高的期待,多数用户都扫视页面而非阅读,靠自己的直觉摸索,如果页面没有达到用户预期,使得学习成本负荷越高、直观性越差,用户就会很轻易的离开,寻找替代的页面。
以“一致性的视觉设计”为例,作者指出,当一个网站的视觉设计整洁连贯,高度一致时,用户很容易不费脑力去理解如何使用网站,不一致的视觉设计,有可能会让人感觉到欺骗,当界面设计得过于跳跃和创新,用户可能在第一眼难以理解,不得不重新学习如何使用那些他们本已经熟悉的东西。视觉一致性可以提高产品所塑造的品牌形象,一定程度上减少用户的认知成本。
达到“一致”的界面,并非指界面元素需要“统一”,视觉上可以有很多不同的表现手段,世界上没有两个相同的鸡蛋,为了一致,网站信息架构很重要。具体体现在形状、色彩、界面质感、图标、画风、文字描述、提示信息呈现方式等,使得网站在不同的栏目下,设计一致,而不是不同的栏目下页面视觉差异大,一眼看上去,不象一个爹妈生出来的。
对于“文字对齐”问题,作者分析了两端对齐的问题:当行的原始长度差异过大时,行与行之间有明显的疏密变化。而且对英文来说,如果没有 hyphenation,往往也很难让行间长度差异适合两端对齐。
越来越多的浏览器开始实现适用于中文的两端对齐算法,在可以启用 CSS hyphenation(断字)的浏览器,我们可以考虑使用 text-align: justify; 来达到漂亮的两端对齐效果,但如何才是理想效果?需要综合考虑浏览器兼容性,良好的断字是美观文本的必要条件,但正确的断字方法是按照单词的音节将其断开,这样使得用户在阅读时候不必读到下一行才能拼出完整单词,这个问题在单行文本特别长,行间距较小的时候显得尤其重要。
作者指出,排版上一定要尽量两端对齐的原则不一定适用于现代网站,左端对齐(flush left)、右端参差(ragged right)的排版越来越常见,人们的审美观也在发生变化。如今的互联网上,左对齐也是文本的默认设定。纯英文文本行的长度错落有致,强制右侧对齐不一定是明智之选。设计师可以综合利用hyphens; letter-spacing, text-justify等 CSS 技巧达到美观效果。