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