网站设计解构:有效的交互设计框架和模式
2023-09-23 22:42:54 0 举报
AI智能生成
《网站设计解构:有效的交互设计框架和模式》目的是解决Web项目中反复出现的三类问题:如何将高层面的程序目标转化为低层面的设计细节,如何创新,以及如何用低成本换来高回报。书中案例形象生动,语言诙谐幽默,是Web交互设计师必备的完整指南。
作者其他创作
大纲/内容
第十章 改善我们的未来
如何劝说你所在的公司(或组织)的投资者们相信,开发框架和框架资源库的确物有所值
衡量挫折成本
挫折成本
不良的设计会产生摩擦,而摩擦可能会体现在各个方面
当产生摩擦时,挫折感便随之出现
形式
开支的增加
收入的减少
生产力的降低
无谓的开发时间
如果因为某个设计问题,用户不得不拨打免费客服热线,那么必然会迫使公司雇佣更多的客服人员
估算出与它相关的客服电话热线,然后乘以“平均单次电话成本”,得出这个问题所导致的开支
第九章 使用框架体系
设计是一种从无到有、不可或缺的思维过程,而不是把想法先倒出来,然后逐个核对、筛选的结果
组织计划
搭建框架
在上下文中考虑上下文
页面的三个基本元素
用户
如果用一个用户代替另一个用户,会得到不同的结果
界面
如果用一个界面代替另一个界面,也会得到不同的结果
上下文
这一特性不受特定用户或工具影响
如果设计中出现可用性问题,通常是因为团队成员没有掌握用户可能的上下文情境
上下文元素
目标
流程
输入和输出
经验
限制因素
物流环境
使用工具
联系
通过观察你的潜在用户如何在自己的环境中进行互动,你会发现那些最常见的上下文元素,以及对设计可用性影响最大的上下文元素
设计就发生在用户、界面和使用的上下文情境这三者的交集处
选用模式
应用设计标准
让框架切实可行
资源库
模板
第八章 搭建框架体系工具
不断用新的目光审视交互元素,这点非常重要
通过为框架体系备案能够把上述问题重新带回眼前,且通过留意这些系统背后的逻辑依据能够有所启迪,对现有的解决方案进行重新审视和改进,同时尝试创造出更为新颖的方法解决已存在的问题
打造你的框架
标识出问题
需要找到一个在当前项目和其他项目中可能都需要解决的问题
品鉴资源
要想验证你的框架,最好是研究那些先行者的作品
仔细研究细节,不管是每一个部件的微妙之处,还是整个应用的总体流程。目的不再是网站的内容,而是聚焦于它的表现和操作方式
发现影响点
Google有一条被称为“20%自由时间”的政策
设计师可以自由支配20%的工作时间,做自己认为更重要的事情,而不是那些指派的项目,从而鼓励创新
竞争对手、做不好就生存不下去、专门在网上经营(Netflix、eBay、亚马逊、戴尔等)、以前从未听说过(金融、交友、大学、书店、在线工具等)
了解设计师如何调整基础架构以适应网站的特殊需求,同时也能够捕捉适应于我们所从事领域的创新思维
我们在找什么
品鉴时尝试标识我们所谓的问题/解决方案,把某个已经完成的设计看作一位设计师解决某个问题的尝试
品鉴目的在于收集各种可能的解决方案,以应对尚待解决的问题
了解其他人针对同一个问题不同的解决方案,有助于提高对网站的领悟力和洞察力
留意你自身的领域
把它写下来
建立文档
文档中容易丢失的细节
不同设计元素的优先级
微妙的交互
缜密的设计逻辑
为了传达设计中更为复杂的交互,可以考虑与书面描述一同递交交互原型
降低开发成本
成本低、实现快的原型设计工具协助降低成本
不需要多么别致花哨、只要能快速传达设计意图即可
精确的使用案例更好
仔细研究过用户角色和使用场景的团队很容易创建使用案例,从而有助于验证原型是否有效
明确错误的出现条件
考虑备用的任务流程,需要清晰地传达出可能出现的分支流程,以及错误的出现条件
出错条件难以形象化,这使得他们容易被遗漏
与支持中心建立稳固沟通,把支持专员们经常处理的问题全部收集起来
鼓励有功于此的成员、“出错检测”竞赛
提升创造力
在框架文档中最需要创新思维的是设计标准部分,需要逆向思考标准解决方案背后的动机,才能归纳设计标准,鼓励创新
为什么要用这种方法
是谁开始这件事的?为什么要开始这件事?
他们考虑了什么备选方案?在新想法之前的想法是什么?
有关如何做这件事,我(或我的朋友)最大的抱怨是什么?怎样改变才能让它更好?
在其他城市、国家、文化或者时代中,会怎样做这件事?
他们是否有什么不同的假设?是否有什么约束?
怎样才能将上述问题的答案应用到我要做的事情上?
分配工作量
第七章 电影网站
描述
设计成类似广告宣传册般的站点,目的是劝说和吸引观众前来观影
本质上是一个精心制作的广告
独立式站点
完全独立的电影网站
集团式站点
位于某个更大的电影集团网络内部,呈现出的品质和该网络中每一个网站都不相上下。同质化的用户体验,缺少独立的主题和上下文情境
上下文情境
一个人听说某部影片,希望深入了解,于是前该电影网站阅读影片摘要,观看预告片,查明影星,甚至还会再购买一两件相关的工艺品
构成元素
不只需要提供既充满说服力又引人入胜的内容,还需要把这些内容用多媒体的形式展现出来
借助多媒体的精彩效果推销产品
初始页
不仅是为了劝说用户深入了解——运用少量心理学技巧也能做到这点,还要唤起访问者足够的情感,使他们对影片产生反应,从而做出决定
带有链接的电影海报,吸引人们更深入地了解,需要包含电影海报上所能找到的一切广告元素,同时还要支持交互
预告片、评论摘引、粉丝站点申请、最近影院、放映时间、论坛链接、社交选项
真正强大之处是在视觉设计上,通过所营造的氛围打动访问者
引子/预告片
最为重要的元素
预告片的步调、节奏、结构和强度都会极大地影响潜在观众对影片的印象
预告片的展现形式也会影响预告片的表现力,把预告片置身于强烈的视觉环境下是一种非同寻常的行为
演职员名单
电影网站的“关于我们”
由于相关人士可能是极大的卖点,因此它绝不是次要信息
StarTrekMovie.com的About部分带领用户前往星舰的控制中心
故事梗概
一部影片的电梯陈述(在好莱坞也被称为logline)决定了该片能否找到投资人
它和预告片一起揭示了影片的主要情节,并且劝说人们深入了解
设计标准
建立良好的声誉
引用评论家和媒体的正面评论
利用社会心理学的“权威”原则
剪辑良好的预告片
把预告片放在精心设计的页面离,奠定正确的情感基调,确立在整个网站设计中所表现的主题,并且运用他们良好的判断力来选择合适的音乐、视觉效果和背景
强调惹人注目的演职员名单
朋友的推荐
实现口口相传的营销
口口相传是最强大的营销形式
利用社会心理学的“相似”原则
创建使这些信息口口相传的途径
除了链接到twitter之外,还可以为用户提供一个预先写好的信息,他们只需一次点击就能发表
提供便利让拥有博客或MySpace主页的用户在博客文章中嵌入电影预告片并分享
让他们感兴趣
引起人们的兴趣,并保持住
融入他们的生活
帮助影迷把电影融入自己的生活
回报
对于电影人来说,他们得到的是忠诚
有助于观众从他们自己热爱的事物中获得认同感,有助于他们显得与众不同
形式
提供桌面壁纸
销售T恤和海报
定制明信片并邮寄
手机铃声下载
第六章 关于我们
描述
建立起访问者对网站的信任,不过建立信任并不是靠它来实现——留给网站的其他部分来实现
有助于建立有关网站效能和可靠性的第一感觉,让用户了解到网站背后有一个真实的公司或个体
为不人性化的网站加入了人性化的成分
上下文情境
用户往往在他们希望深入了解网站时会查看“关于我们”,这通常发生在前几次访问中
任务流程
“关于我们”通常都位于网站结构的顶级营销部分,以便用户在初次访问时即可快速得到相关信息
构成元素
公司背景
有助于形成用户对个人或组织的感受或看法
提供公司概述或网站所有者的个人资料,这部分内容用词友好,便于媒体摘选,同时又涵盖全面、简单明了,以便赢得注意
公司的经营信条、商业目标、发展历史等多方面内容
财务状况
通常只有上市公司才有,面向那些与公司财务稳定性和未来收益有厉害关系的人。有些积极寻求资金的网站上也会有这一内容
有助于打消人们的顾虑,使大家相信它在财政上的可行性,以及足够完成项目的生存能力
客户名录
完全就是为了建立信任,要让潜在客户相信你能够(而且已经)为那些信誉良好的公司提供过很好的服务
展现公司价值,打动投资者
包含能证明工作结果的链接,指向公司相关项目的专题文章
团队介绍
时事与新闻
时事能让网站的受众及时获知公司的重要事件、管理层变动以及其他通告,而新闻让公司能够骄傲地宣传媒体对自身的报道
那些于己不利的报道,除了完全忽略之外还有其他的应对方法,例如通过社交网站或其他论坛,针对这些不利报道与客户进行开放式讨论
工作机会
吸引求职者寻求工作机会的同时,突出企业文化方面的亮点可谓好处多多
Adobe用一个丰富多彩、华丽动人的子网站来展现自己的企业文化,提供在Adobe工作生活的视频短片、列举在公司工作的十大理由、企业的社区参与、员工活动、环保措施和核心价值等
联系方式
最后一环,也是最重要的一部分
提供电话号码、办公地点、寻求技术支持的途径、费用支持以及销售信息,用户甚至能直接提交反馈建议
店址查询,适用于有实体店铺的零售网站
联系表单
设计标准
真正目的为提升用户对公司(或组织)的信任和有助于信息传达
建立品牌信誉度
“关于我们”不管它多么有说服力,终归是这个公司自己提供的内容,因此会无可避免地带有片面性
建立信任最好的方法是提供优秀的产品(或服务),从而树立良好的口碑
把精力放在为客户创造更多谈论产品的途径上
打开沟通的渠道
通过社交网络
配备专人对它们的twitter进行更新
在Get Satisfaction上创建一个专属页面,以便客户能集中发布各种问题或评论。一般都是其他读者对此做出回应,公司本身也可做出回应
指派专人在网上留意有关公司的博客文章、论坛中的问题以及更大社交网络的更新,并做出回应
近距离了解客户想要和喜欢的东西,同时还有机会解决负面新闻和抱怨
第一章 框架体系呼之欲出
引言
可用性专家Rolf Molich进行的CUE(Comparative Usability Evaluations,相对可用性测试)系列实验,通过聘请了 60 多个专业可用性团队为同一个应用程序进行测试或评估
尽管可用性专家们在检测界面问题时宣称使用的方法非常科学,但是可用性评估本身却“并不十分科学”
可用性测试
可用性测试也许并不比一位专家或者一位评估人员执行的启发式评估来得更为准确或可靠,但可用性测试可以而且确实已经为我们理解人们的网络交互行为提供了巨大的帮助,它仍然应当被视为一种必不可少的工具
任何评估或观测的方法都应当被放在上下文情境中分析
可用性评估无法告诉设计师怎样才能做出好的设计,它只能帮助我们发现已有设计中存在的问题
“我希望有一天我们能拥有庞大的资源库,里面存放着经过现实用户的周详测试而且证明可用的通用界面模块(building block)。我还希望我们能向大家展示,由可用性专家把这些模块组装成完全成熟的网站,从而高效地生产出大量具有极高可用性的网站。”
庞大的资源库
周详测试
界面模块
希望本书能够解决在每个 Web 项目中都反复出现的三种问题
对一个应用程序目标的理解是高层面的,而要想把它转化为低层面的设计细节,这个过程可能会非常艰难
标准与创新问题
即使是最具创新精神的项目,能称得上“前所未见”的地方可能也只占整个项目的 20%,其余都是基于标准的支撑功能
我们往往不太重视它们,结果却可能给用户带来难以使用的挫折体验,甚至造成公司在收入上的损失
创新也可能会产生问题,可用性和创新常常会互斥
当我们打破陈规时,实际上是在冒险,因为很可能用户根本无法理解我们设计出的界面
“低成本、高回报”问题
为了降低重复开发、创造方面耗费的精力(并且给刺激、有趣的创新部分留下更充裕的时间),开发团队需要可重复利用的设计
可重用策略
Web 开发团队需要日积月累、稳步实施可重用策略
可重用策略分为三种资源库:模式、组件,以及交互设计的框架体系
优势
完成整个设计的时间似乎也更短,而且可以周全地涵盖一切有利于提升用户体验的细节和精妙之处
尽管他们在无趣的支撑功能上并未花费太多时间,其设计成果却似乎具备更高的可用性,而且在所有功能中的表现都始终如一
团队进行迭代设计更为快捷,这让他们有机会在设计尚具可塑性的时候对它进行精细的调整
模式:预期行为的锦囊
针对同一种行为,不同的选择体现出了不同的设计。当开发团队指定一种最适合他们(及其用户)的设计时,就能将其定义为一个模式
日后,当团队需要响应类似的行为时,就能以相似的方式进行响应,利用之前的工作成果来满足用户已经确立的需求
组件:高效利用可重用的代码
组件会从像素级别来详细指定设计响应
通常以代码的形式来体现,因此组件实际上也体现了具体的交互行为。它们是具备了诸如字体、颜色和布局等样式元素的功能性设计方案
组件就是将设计模式进行完整代码化、模块化后得到的可执行版本
框架体系:最后的拼图定乾坤
框架体系是一系列设计模式再加上其他元素和信息,用以指导完整的系统或站点上下文的设计
它从产品的整体背景出发,为设计确定指导方针
框架体系是一种高度的抽象。它不涉及具体的品牌化或视觉设计需求
超越常规
框架体系还能帮助我们更深刻地理解现有标准背后的逻辑依据
通过这种“解剖镜”,设计师可以反向追溯影响当今各种设计决定的最初逻辑原理,然后将自己的理解转化为准则,应用到更加新颖的设计上
分解工作量
组件更接近于最后的实现工作,通常让开发人员管理这个库
交互式设计框架体系则重点关注用户体验,因此更适合让设计人员来负责
模式库则介于设计和开发两者之间
古老问题有新解
交互设计的框架体系可以(而且应该)进行调整,赋予独特的风格,也能被定制
它们就是一个易用设计的构成模块。而更好的是,它们可以告诉我们如何演变和进化
问题,答案与灵感
1、近距离地观察各种模式、组件和框架体系,了解它们如何相互协作以形成一个完整的可重用策略
2、我们将察看若干重要的框架体系,揭示它们的历史和效能,讲解如何使用这种崭新的方式来剖析网页,并且深入理解这些框架能够成为标准的原因,以及从中学到的知识和经验
3、我们将察看若干重要的框架体系,揭示它们的历史和效能,讲解如何使用这种崭新的方式来剖析网页,并且深入理解这些框架能够成为标准的原因,以及从中学到的知识和经验
4、我们会说明在你自己的公司或组织中,应当如何标识并开始使用框架体系
第二章 可重用铁三角
在实际工作中,我们应该首先考虑框架体系,模式其次,最后是组件
这也是它们在网页设计过程中最为有效的使用和思考顺序
设计模式
设计模式其实是一种针对某个常见问题的常用解决方案
比如,分页模式就为我们呈现了一种标准的交互接口
设计模式六要素
模式名称
其目的就是为了促进清晰的交流和沟通,这样在会议、设计文档或者其他地方我们就能明确地称呼某个具体元素
描述
由于一图胜千言,界面截图也非常有价值
上下文情境
强调了每一种模式所使用的模式库中的上下文情境。在构思新设计的时候,设计师们可以利用上下文描述来确定该模式是否运用得当
曾于何处使用
模式每一次将其转化为生产系统时,都应当对此项进行更新。开发团队成员可以查看已经实现出来的成品,了解某个模式的运转情况
工作方式
开发团队在这里将描述该元素技术层面的内容
与该元素产生交互的其他模式也会提及,此举能帮助设计师更为全面地考虑问题,便于在最后对设计进行整合
其他必备模式
很少有能完全独立存在的模式。一个模式的出现,通常都意味着设计师还需要考虑其他模式来支持它
模式资源库
公用模式资源库
倾向于提供通用的模式,而不会针对某个具体的应用,为那些公认的标准 Web 交互提供了低级别的基础性建议
而企业往往会根据自己的应用或网站对这些模式进行“定制”,把过于通用的公用模式转化为真正适用于专属设计团队的模式
内部模式资源库
具有更强的针对性,只对应企业内部的网站,是设计团队手中威力强大的工具
组件
定义
组件由通用的最基层元素(例如文本、链接、按钮、复选框和图片)相组合而成,它们是在页面的界面设计中可以(或重复)使用的有意义的组成单元。其他描述这种页面内集合的常用术语包括模块、元件、控件,甚至是分子
鉴于我们通常都以一个完整页面或页面状态为单位来观察,同时把页面上无法继续划分的部件(例如一个 logo、页首图片或者按钮)称为“元素”——我们可以说,组件是由元素相互组合而成的具有明确目的、可重用的独立结构。标签式导航条、搜索结果、文章内容都是组件
与模式的关系
模式一般都能在各网站间通用,而组件通常只对应特定的某一个网站,非常具体
模式适合于交互设计师和其他运用草图、线框图或其他基础手段进行构思的人,而组件则专用于那些负责构建这些设计的人
一个模式可以派生出多个组件
组件六要素
组件名称
组件版本号
版本号可以翔实地记载从一个版本到下一个版本中发生的变化
定义
会描述组件的目的和用途
使用方法
描述了组件应于何处使用,并包含相关信息
示例
通过实际的示例,团队内部的所有人都能直观地了解该组件的工作方式(它还能协助质保小组审核已实现版本的正确性)、外观,以及要实现它应使用何种代码
代码
该组件的已实现版本(包括使用不同编程语言的版本)
交互设计框架体系
设计模式能够解决那些范围较小的具体问题(这也正是我们期待的结果),但是我们无法从中得知这些问题之间是否有联系、是否会顾此失彼
设计模式缺乏足够的上下文信息,既没有提到该模式会如何影响整个应用程序,也没有提到它和系统其余部分的联系。而在必备条件项中,也只是列出了与该模式密切相关的其他模式,并没有揭示其表面下的深层原因
交互设计框架体系包含的元素
把框架体系视为设计模式在逻辑上的进化结果,它是我们构建一系列成熟解决方案的下一个必经步骤
描述
项不仅描述了框架本身(这是其首要目的),同时也描述了框架应满足的需求
上下文情境
描述了在使用给定框架时用户可能遇到的问题,或者他们希望满足的需求,和框架在网站信息架构中所处的位置
任务流程
许多框架通常都由一系列按顺序排列的交互构成
用户必须遵守特定的任务流程
其他必备框架
与当前描述的框架配合使用时不可或缺的其他框架
相关框架
些与当前描述的框架有着相似的目的或者支持相似的用户或业务目标的框架
构成元素
列出了所有从属于该框架的设计模式
设计标准
指的是设计背后的促发因素——是有关设计如何帮助用户完成任务的规则
列出了框架中一系列设计的导向性方针
框架体系能让我们逆向设计人类的行为,而这种理解正好能通过种种设计标准表达出来
框架体系的设计标准能告诉你需要实现哪些目标,至于实现的方式则完全可以自由选择
框架体系能将人类行为映射成一系列具体的目标,其中的每一个目标都有可能激发我们的灵感,创造出新颖的解决方案以达到同样的效果
设计制订标准的过程中,唯一的窍门就是自问这个框架能为你或者网站的其他用户带来什么
特质
存在
它们存在,而且可以标识,但是它们的表现却绝不是一成不变的
可累加
设计师能以它们为基础,针对具体的解决方案以有效的方式对设计的规模进行缩放,同时将一系列框架串联起来,构成整个网站
增强表现力
框架是表现力的推动者,使设计师能够为作品赋予自己的风格。自定义设计,表演
框架不会把用户限制在那些生搬硬套的规则中,它们允许即兴发挥
鼓励创新
第三章 目录框架
描述
当我们在目录中进行挑选时通常会遵循的三个步骤
筛选出所有的顶级选择
挑选其中之一
查看该目标以验证它就是我们想要的
既然在选择目标的过程中,最自然的人类行为就是遵循上述三个步骤,那么最符合逻辑的方式就是运用一种“支撑式”的设计来满足每一步需求
目录框架中所有元素的作用都是支持选择的过程
上下文情境
目录框架通常不会被嵌套进更大的上下文情境中去,目录本身通常就是一个完整的情境
我们也可以把目录当作某个大网站中的一小块,甚至把它放在一个附属的位置
任务流程
用户从一个高级的分类页面移动到某个分类的下的内容陈列区,然后直接选择某个希望查看的目标,从而抵达内容页面
其他必备框架
很多用户极度依赖于搜索功能,因为可以快速在目录中定位目标,因此搜索框架也是必备部分
相关框架
许多电子商务网站的目录都允许并鼓励用户创建个人账户,以便他们能够更好地管理自己选择的商品和订单等,同时还鼓励用户对网站做出更多承诺,投入更多精力
构成元素
分类页/部门页
页面按照用户的理解,把网站内极为丰富的内容分割为粗略的组,将相互关联的内容划分到一起
陈列页
陈列页要想行之有效,就必须能回答用户脑海中与选择有关的任何问题
快速查看
条目标识符
条目图片
简短的条目描述
弹簧高跷:用户在网站各层级之间跳来跳去,希望最终能遇见想要的内容
UIE可用性测试指出,弹簧高跷很少能帮助用户找到目标内容。在对电子商务网站的研究中,66%的购买行为都发生在完全没有弹簧高跷的情况下,一旦用户踏上弹簧高跷,跳的次数越多购买的几率越小
在陈列页中包含有利于用户做决定的尽可能多的信息是相当重要的
条目的排列顺序也很相关,用户通常都认为最重要的条目应该最先列出来
内容页/详细资料页
内容页在整个搜寻行动的尾声为我们提供了奖励
详细的条目描述
图片库/查看大图
实现细节
可获得性
物品单
配置器及配置选项
社交影响模式
评论、评分、推荐、转介等功能
引导链接
UIE的一项研究:如何让用户发现第一次访问的网站时还不知道的有价值的内容
研究显示,如果用户使用首页中的分类链接,找到新增内容的可能性要比直接在网站中搜索高出两倍
绝大多数访问者访问网站都有明确的目的,用户到达目标内容的途径将会影响他们是否继续浏览
当用户接触到分类时,他们会不知不觉地认识到网站中还有其他有价值的内容
许多用户告诉研究员,在定位目标内容时,他们在心理上会认为应该“回去再看看”那些其他的内容
而搜索的针对性太强了
它们引导用户找到其他的内容
更多的点击、更多的条目被浏览,为用户带来更多的价值、更多的商业目标
设计标准
真正降低用户购买欲望的,并不是大量的点击,而是大量不正确的点击
创新之路似乎在于让目标选择的过程更为精确
观察在当前标准中的人类行为,再推理出新的设计标准,从而产生新颖、改良后的设计
支持用户探索
人们使用搜索功能并不意味着他们依赖于网站本身的搜索,更多会依靠外部引擎,如谷歌
目录本身需要适应网络的浏览方式,在整个过程中涉及的页面也必须维持独立的URL,以及合适的页面标题和内容(SEO优化)
搜索引擎才能索引到正确的内容,这些页面才能出现在搜索结果里面,从而增加网站访问量
我们必须支持用户对整个目录的搜索需求,而且无需他们搜索那些已知的条目或分类
用户应该能按照自己的思维来找到想要的内容
公布分类方法
分众分类法(Folksonomy)
由人群(Folks )和分类法Taxonomy组成,现已是信息架构学中的一个重要组成部分。指用户给自发性以任意关键词(标签)为内容进行分类的一种公开共享的平面型非层级结构分类法
第四章 搜索框架
对于搜索来说,真正的挑战在于理解人们为什么搜索,以及他们会怎样使用这些结果,同时要了解应该要显示何种类型的结果、其中又应该包含哪些具体信息
还得应对各种可能的搜索结果
描述
通过固定的任务流程,搜索框架让用户能够定位具体内容,而不必按图索骥地在网站各层级间来回穿梭
上下文情境
Jakob Nielsen在Designing Web Usability中提出,人们在首次访问某个网站并寻找内容时,有一半以上的用户都会直接前往搜索引擎,以此证明“搜索优先”趋势
UIE针对电子商务进行研究验证“搜索优先”理论
尽管用户经常表示更偏好搜索,但研究中没有一位用户是真正的搜索优先者
导致用户选择搜索引擎或链接的真正原因其实存在于网站设计中,与每个用户的自身偏好无关
网站内容自身的性质也决定搜索优先还是链接优先
依靠搜索来寻找某本书或某张CD,找服装产品时则倾向于通过链接
页面中链接某些方面无法令人满意,用户通常也会转向搜索引擎
用户把搜素引擎视作嗅味失败时的后备计划
任务流程
在输入栏中键入一个关键词,点击旁边按钮(搜索),在结果页中查看他所要寻找的内容,点击查看该条目的内容页
研究表明,42%的用户都在第一时间点击排名最高的搜索结果,不管它是不是最佳选择
如果不是,用户会修改他的搜索词,然后开始新一轮搜索,而不是在十几页结果中来回查找(甚至很难超过一页)
构成元素
快速搜索
一个简单的输入栏和及相邻的按钮
同时满足以下条件时就能放心地依赖网站内的搜索系统
你的内容是唯一标识的
你的用户很熟悉那些标识符
你的用户希望利用那些标识符作为定位内容的方法
搜索结果
任何一次搜索都可能会产生2种类型的搜索结果页和4种结果
搜索陈列页
搜索部门页
也会列出一系列结果,不过更类似于目录框架里的分类页,鼓励用户进一步缩小选择范围
如果搜索结果涉及的分类过多就会采用,以便更好地组织搜索结果
搜索产出
不论结果页面的类型如何,一次搜索会有4种可能的产出结果
准确适配或非常相关
最理想的情况
相关条目
有关但不是非常相关
不相关结果
没有结果
事实证明,用户不会为搜索付出很多努力
用户搜索的次数越多,就越难找到想要的内容
最能激励用户修改条件、继续搜索的是当他们看到“没有结果”的时候,不过大部分人看到这个页面就放弃了
高级搜索
传统形式的高级搜索并不像我们想象的那样被广泛地使用
图书管理员,以及相同类型的人
高级搜索麻烦之处在于,用户并不一定认为他们有任何高级的问题,而只是有一些简单的问题不知如何解决
第二种类型的高级搜索,快速搜索的一种形式,称之为“受限快速搜索”
形式
通过附加标准(关键字以外的限定词)从而让搜索更高效
在快速搜索栏旁边加一个下拉菜单,以此要求用户为搜索词添加具体的界定标准
有了这种专门的搜索功能,他们就能从中学习,并在日后运用这些知识
过滤器
另一种形式的高级搜索,区别之处在于过滤器通常出现在最初的搜索执行之后,帮助用户缩减选择数量、增加结果的准确度
用户改变过滤条件时搜索结果列表会自动更新,用户几乎能立即看到改变后的结果,无需等待整个页面重新加载
确保过滤器能够显而易见
形式
关键字链接
滑动条
复选框
单选按钮
分页
根据非正式的观察,用户普遍期待在结果页的底部看到分页界面,
无限滚动打破用户的预期,而且会造成不少的困惑
设计标准
搜索框架的设计标准与目录框架背道而驰,因为搜索是在分类导航不起作用时为用户提供的一种后备选择
提供多条通向内容的途径
改善搜索的方法之一就是不要过于关注搜索,而是想办法改善网站的导航,只有当网站导航出问题时人们才会搜索
从实践的角度来看,那些当初迫使用户搜索的地方,正是你的网站可供改进之处
通过观察用户在网站上的搜索习惯,就能发现调整导航或信息架构的方法,从而帮助用户不通过搜索就能找到内容
不要因为那些只搜索过几次的词汇就随便改变网站的导航,只有名列前茅的搜索词才值得被调整,永远不要因为少数人而牺牲大多数人的易用性
使内容与用户的用词相关联
把网站的内容与尽可能多的不同词汇相关联(关键字、标签等等)
这个元数据(有关信息的信息,描述数据的数据)非常重要,它能创建第一次就生效的搜索系统,且日后每一次都生效
亚马逊鼓励用户把产品与他们自己的关键字进行关联
让内容便于识别
当内容以简单词汇命名时,就更容易记住,更容易搜索,也更容易向他人介绍
可能没办法控制产品怎样命名,却可以影响网站里其他内容的命名习惯
缩短文章、页面标题
如果是在内容中间或搜索结果页面,最好使用较长的链接标签,便于用户确定下一个页面是否会包含他想要的内容
第五章 注册框架
描述
目的是劝说访问者进行注册并成为固定、活跃的一份子、乐于付钱的消费者
不仅是为了消除用户在注册前可能产生的异议,还要吸引他们(也许这一点更为重要)
作用是用户在扫视屏幕时回答他们脑海中产生的问题
在潜意识中呼吁用户做出决定,引发足够强烈的感官刺激,让他们对未知的事物产生渴望。给予他们足够的信息,使得他们想要了解更多。吸引他们足够多的注意力,劝说其采取行动
上下文情境
适用于那些需要用户注册的应用程序,以便他们掌控或管理自己创建的内容,如保存、发布、存储等
任务流程
访问首页/了解更多/功能页
查看相关(且简短)的描述,或许就会开始注册流程
填写注册表单,被却认为新成员,开始使用该应用
构成元素
价值声明
在用户猜测网站提供的功能及其意义的那一刻,价值声明能为他们解答疑惑
简短、易记和引人注目的文本
出现在用户都能看到的明显位置
投入成本明细
在用户注册时,事先一定要清楚地传达出他们需要了解什么、做什么,这样用户才能估计出成功注册需要多少投入
不只是列出用户需要投入的明细,提供了另一种途径来表现应用程序的用途,让访问者对其产生更深入的了解
推荐语
社会心理学中的“权威”和“相似”原则描述了人类的一种自然天性,即倾向于相信受尊敬的权威人士以及与自己相似的人
表现出产品积极一面的一小段引用语可以极为有效地说服浏览者们成为注册用户
行动号召
利用迅速的行动号召告诉他们下一步应该怎么做,其实只是一个短句,措辞如同命令一样,迫使用户采取行动
现在就注册!
另一种更有效的方式是暂时不要注册,而让访问者直接深入。这样能让他们对应用程序感兴趣,从而不断地积累“动能”
鼓励他们对产品本身做一些事情,让他们不断深入,只在必要时要求他们注册,即“懒惰式注册”
现在就创建你的第一笔结算单/现在就动笔写你的第一篇文章等
白板/即时参与
要想劝说用户注册,最有说服力的莫过于一次良好的用户体验,因此一定要确保用户的第一步就正确无误
许多应用程序都有称为“白板”的东西,一开始空空如也,让用户摸不着头脑,不知道下一步做什么
避免让白板变白,促使用户继续深入,因此要填入有用的信息和切入口——有助于他们能够即时参与的东西
如Photoshop Express的Test Drive按钮,Basecamp的教学视频
注册表单
注册时用户会犯一箩筐的错,因此注册必须是无痛的
去除注册表单中所有非必要的东西
如果需要用户在应用中提供更多的个人资料,尽量推迟这一步。先让他们注册,之后再要求细节
在表单中包含实时验证功能,并提供明确的错误信息,从而告诉用户怎样做才是对的
设计标准
传达明确的价值声明
价值声明采用何种传达形式并不重要,重要的是传达本身
建立起用户的预期
要想让用户相信执行某些操作后的回报的确物有所值,建立正确的预期非常重要
证明应用程序运行良好
推荐语
试用功能
鼓励操作并确保取得进展
行动号召通常是个按钮,至少被安置在按钮旁边
除了按钮上的文字标签之外,让这一解决方案更富魅力的还有界面隐喻(affordance,或称功能可见性,是一种能够暗示对象应如何使用的设计特性):通过模拟3D的外观、投影和渐变,使它看上去可以触摸和点击
让用户和他们的操作相联系
如果可以在用户使用程序的过程中逐步向他们索要资料信息,而不是硬塞给他们一个单独的,与程序并无关联的流程(如注册表单),我们就能减少用户的初期投入
如果能够这样,用户就不再需要决定是否注册,——当他们在网站上执行操作时,实际上就已经“注册”了
0 条评论
下一页