以用户为中心的WEB设计要素及应用

用户体验设计最近比较热,从以前的轻视UI到现在不管是桌面软件还是网站都开始关注用户体验设计。“用户体验”这一术语指用户个体与产品进行交互时,用户获得的主观体验,我们经常会谈论某个网站的效果很好或某个网站的购物体验很差等,这些都是一些关于可用性的非正式讨论。当设计或评估某一交互式产品的用户体验时,我们需要以条理更加清晰的方式来了解该产品和对其进行讨论。
不同的角色对用户体验有不同的理解和看法:对于 UX 设计人员来说,成功意味着创建实用、可用和用户所需的产品。产品必须能够为用户提供价值,才可以称为“实用产品”,用开发术语来讲,就是该产品必须实现相应的功能。“可用产品”指易学易用的产品,“用户所需产品”指用户渴望获得的产品。用户对某一产品的需求程度越大,用户自愿在其上花费的时间和精力就越多。热情的用户是产品的最佳推广者。
用户体验设计究竟有哪些要素呢?Jesse James Garrett的专著《用户体验的要素》对用户体验进行了定义——用户体验是关注“产品如何与外界发生联系并发挥作用”的,也就是人们如何“接触”和“使用”产品,并由此产生的感受。这里有两点思想:一,任何产品都存在着用户体验。二、它总是体现在细微之处。
《用户体验的要素》将整个网站产品设计流程分为了战略层、范围层、结构层、框架层、表现层五个层面,而且将网页作为软件的界面和作为内容的载体两个属性区分开来,阐明其不同的关注点和产品设计过程中的处理方式。书中多处强调五个层面的相互关系——每个层面都是根据它下面的那个层面来决定的,反过来,在“较高层面”中的决定有时会促成对“较低层面”决策的一次重新评估。因此,在项目的进程中,每一个层面的工作在下一个层面可以结束之前完成,是两个层面相互促进调整的合理安排。
接下来,我会结合具体的实战实例来阐述和演示用户体验要素层面。
战略层——网站目标与用户需求
关注两个基本问题,一个从网站自身出发,一个从用户角度出发。网站目标包括商业目标和品牌知名度两方面内容。用户需求则需要做用户调研,尽可能了解用户各方面的信息:基本信息(人口统计学角度、心理学角度)、互联网熟悉程度、专业知识了解程度、社会角色等,然后根据最重要的两到三个标准细分用户群,依据用户细分结果创建人物角色。这几个虚拟人物将一直跟随设计产品的整个过程,为各种决策提供依据。
用户细分不是一蹴而就的事情,不仅需要用各种调研方法验证其正确性,还需在项目执行过程中不断修正。如同制定所有目标一样,要想提高达到目标的成功率,不仅需要将目标清晰明白地记录下来,而且需要为每个目标制定是否成功的考核标准,并尽量保证考核标准的可衡量性。
范围层——功能规格和内容需求
为了保证项目完成的时间,明确从战略层的角度看,哪些是最为关键的功能和内容,哪些是不需要建设的,避免范围蠕动,这就需要对项目涉及面做框定。
撰写功能规格有两个原则:乐观,描述系统需要做什么,防止不好的事情发生;尽可能详细地解释清楚状况。应避免主观描述,而用量化术语定义需求。由于在项目进程中功能需求不断变化,因此,需要随时保持功能规格与开发的同步更新。
内容的元素包括文本、图像、音频、视频等类型,通常是多个元素组合以满足一个需求。在描述内容需求的时候,必须关注用户真正的目的,而不是内容格式。内容需求应该提供每个特性规模的大致预估:文本的字数、图片的像素大小、下载的文件字节、类似PDF的独立内容元素,或类似音频或视频一样的特性。除了初次的内容规划外,还必须明确内容更新的负责人,更新频率(这可由希望用户多长时间来访问一次和希望用户多长时间更新一次信息来决定),并为整个系统列出内容清单。
最后需要对功能规格和内容需求确定优先级。
结构层——交互设计与信息架构
这里面需要着重理解几个专业术语:
交互设计,“为用户设计结构化体验”的方法。关注于描述“可能的用户行为”,同时定义“系统如何配合与响应”这些用户行为。
概念模型,即指用户对于“交互组件将怎样工作”的观点。系统模拟现实中的一个实物,让用户很快适应一个陌生网站。另外,也可以保持网站的整体性。
错误处理,当“用户错误”,系统要怎么反应,并且当错误第一次发生时,系统要如何防止人们继续犯错?
信息架构,通过对内容的组织管理、分类、顺序排列,来构建用户体验。我们可以使用两种方式来建立分类体系:自上而下或从下到上。这两种方式各有利弊,最好在他们之间找到平衡点。
结构方法,有常见的几种类型,层级机构(最为常见)、矩阵结构、自然结构、线性结构。
组织原则,它是我们决定哪些节点要变成一组,而哪些节点要保持独立的标准。在创建结构时,我们就要具体地识别出用户心目中至关重要的那些信息。
语言,用“控制性词典”来保持网站使用的语言的统一性。用“类词词典”提供常用的、但未纳入网站标准用语的词汇以供选择。
元数据,是“关于信息的信息”,即以一种结构化的方式来描述内容。不仅方便结构化内容,而且能精准搜索。
对于文字难以说明的问题,可以配合视觉辞典加以注释。
框架层——界面设计、导航设计和信息设计
这里的界面设计、导航设计和信息设计关系紧密,很多时候不容易分清。界面设计确定信息摆放的位置,保证能让用户一眼就看到“最重要的东西”。有很多技巧,例如:仔细考虑每个选项的默认值,选用哪种界面元素展示信息……导航设计能够提供用户在网站间跳转的方法;传达出相互之间的关系;内容与用户当前浏览页面之间的关系。几种常见的导航系统:全局导航、局部导航、辅助导航、上下文导航、友好导航、网站地图、索引表。信息设计涉及到分组或整理,需要将信息结构化。这一工作主要通过线框图来交付成果。
表现层——视觉设计
怎样通过设计,第一时间吸引用户的注意力;用对比凸显主要信息,并有效的融入整体中,保持一致性;虽然色彩是传达品牌识别的有效途径,但是配色方案需要一个更广泛的容纳性,保证在不同场合灵活运用。另外,需要风格指南作为设计决策的权威性文档,包括设计网格、配色方案、字体标准或标志应用指南、某一模块或网站功能的具体标准。
实例一:(包含战略层和表现层)
例如,游戏和办公软件的目标用户群是不完全相同的,同样的用户面对这两者的界面需求是不一样:游戏是“玩”,注重是趣味性和风格化,主要目标用户是年轻人,要让他们觉得好玩觉得酷,游戏的UI在视觉创作上发挥的空间会很大,对于设计师来说也许很多东西更可以天马行空;而办公软件则是“使用”,是一个工作的辅助工具,关注的是效率,UI的设计偏简约。
QQ的视觉定位是以青少年为主的,所以它的视觉设计才采用了比较明亮活泼的色彩。而MSN的视觉定位是办公室工作人员,所以它的视觉使用比较稳定和平静的色彩。
实例二:(结构层 表现层)
交互设计:把复杂性留给自己,把简单留给用户。
以上图例是一个搬家公司网站,用户需从长长的下拉框中选择移出城市和移入城市,搬家时间,而且要选择两次,用户体验可想而知,改成下面的样子好多了:
实例三:(框架层 表现层)
今天,电子商务网站的设计正面临一系列挑战,其中最主要的挑战是:我们尝试建立一种用户体验,它可以增加更多的网上购物用户。为了对抗网上激烈的竞争,消除网上多疑购物者的顾虑,设计人员可以采取一些措施来改善网上商城的可用性。
自1995年以来,亚马逊已经成为电子商务B2C领域公认世界领导者,它的成功并非偶然,也不仅仅是在一个正确的地方与一个正确的时间的结果。亚马逊的成功是一个强大的用户购物体验的直接结果。
当您浏览亚马逊主页(在上面的截图),突出的是什么?永远是一片凌乱的布局,为数不多的简洁区块,有独特的元素立即捕捉用户的眼睛:在导航搜索的左上角,和靠近顶端的搜索/购物车控制器 。双重目标明确:产品搜索和在线采购;用户可以快速查找和购买产品而卖方能够快速处理网上购物订单并获得利润。浏览Amazon其他页面也有一些非常好的用户体验,需要读者去细心观察和理解这些用户体验的要素在实践中的运用。
互联网上有很多专注以用户为中心而设计的交互产品,只要大家善于分析和研究,都可以从中找到这些要素在用户体验中的作用,我就不一一枚举了。总之,运用这些用户体验要素的网站不一定是成功的交互网站产品,但一个成功的交互网站产品一定是应用这些要素的综合体现,希望互联网以后有更多以用户为中心而设计的交互产品出现。

















