从用户角度进行产品设计

② 注意事项
导航条设计时需要注意
a) b) c) d)
网站的每一页(表单可能例外)都需要导航 次级导航都应该有返回首页的链接 页面名称应该醒目(自我解释) 要提供简洁，没有无关选项的搜索框
优秀的导航条示例:Amazon,Builder.com.cn
Amazon. COM导航条
Builder.com.cn导航条
– – – – 核心能力和速度 交互体贴细致，视觉简洁清爽 要了解人，从而了解用户，更要习惯站在用 户的角度看问题。他们要“随时随地变成用 高端用户的关注 户” 如何在良好口碑下持续增加功能
产品规划的流程定义
产品规划流程对市场走势及客户需求进行分析，创建 合理的市场细分规则，对要投资和取得领先地位的细 分市场进行选择和优先级排序，从而制定可执行的业 务计划，并驱动新产品包的开发。
产品阶段
新产品上线
首要目标
吸引新用户、快速 占领目标市场
留住用户、稳定收 入 保留旧产品精髓， 加入新的创意元素
功能侧重点
$APPEALS
“好用、方便、便宜”（注 $价格、E易用、A 意，“便宜”实际上是运营 可获得性 的范畴）
内容翻新、满足细分用户群 P包装、A安全/质量、 的需求（例子：高露洁牙膏、P性能 飘柔洗发水） “时尚、创新、新新人类的 S社会接受、L生命 需求”（例子：Swatch） 周期成本
平台期
产品更新换 代
市 场 分 析
用 户 分 析
需 求 分 析
小案例：用户需求优先级排序
QQ发布第一个版本时，有以下用户需求：
卡通头像 QQ表情 聊天记录管理器 很小的.exe文件 视频 聊天室
看谁在线上
安全性 传文件
语音
反应速度快
请从中选出最重要的三项，发布QQ1.0。
？
别让我思考(Don’t Make Me Think)
不同的需求 不同的设计
不同的设计 不同的效果
心理 模型
表现 模型 实现 模型
记忆负担，体验较差
容易使用，体验良好
最好的技术是消失在生活当中的技术
why
what
how
8
以用户为中心的Web设计 的流程和用户体验的要素
“AJAX乊父”的Jesse James Garrett在2000年提出
wk.baidu.com
产品设计
• •
•
维持统一
• •
视觉设计—重点突出
• •
•
每个页面（板块）只有一块视觉重点。幵且，突出重点，丌让用户去找。 原来的设计排版丌对，有一横条的压着的情况黄色块就丌能加框，视觉会很繁杂 看着丌舒服，句号也是多余的 原来方案 目前方案·
Pony：在设置了独立密码的情况下, 当登陆到需要 输入独立密码时, 总是先出来输入框, 此时已可输入, 我经常是立刻输入, 但打了几个字母后上面, 才瞬间 出现上面的黄色提醒"请输入独立保护密码", 而会导 致输入框位置立刻下压, 比较影响输入. 最好能改一 改html里的结构, 能够快速让人立刻输入(越快越好) 的基础上,其他显示的可以慢些load到但不应影响其 他部件的改变.
交互设计—Don't make me think
• • • “迒回”的位置和做法很重要：这是整个QQMail的交互的“枢纽”，如同围棋中 的“玉柱”，也定义了邮箱的交互风格。 帮用户自劢选中：在输入独立密码或加密folder输入密码时错诨后，应该把输入 框内的内容select上，这样就可以直接打入而丌用清除了 光标定位：乊前的点"回复"时光标focus到正文的问题改好了,但却没有注意到点" 转发"时光标,反而应是在"收件人"处而丌是正文处, 因为一般总要填写转发人, 而回 复(包括回复全部)则是直接输入内容.
3. 去掉每个页面上一半的文字，然后把剩下 的文字再去掉一半。 a) 有力的文字都是简洁的。 b) 必须消灭欢迎词，必须消灭指示性文字。
可用性实践中需要注意的问题
1. 导航条(页头，页尾，页内) 2. 主页 3. 团队中可用性的讨论
可用性实践中需要注意的问题
1. 导航条 ① 作用
a) 帮助找到想要的，告诉我们如何使用网站 b) 给人固定的感觉 c) 告诉我们身在何处
过程
市场分析 制定规划 撰写策划
交付件
市场评估报告 产品路标规划书 产品需求规格说明书
对应产品阶段
用户需求分析和PK阶段
用户需求收集 产品候选概念
制定综合Feature List和规划PPT 例 产品需求说明书 例 开发阶段？
制定业务计划 产品业务计划书
用户需求分析法（例：QQ秀）
要素
$价格
细分项目
• 市场调研 • 需求分析 • 详细设计
建房子
土木工程师
装修设计师 建筑设计师
研发发产品（软件、网站）
程序设计
ＵＩ设计 交互设计
——《软件设计的艺术》Terry Winograd (2004年度的ACM人机交互院士)
名称解释
• UI（user interface designer）:用户界面设计人员 • UE（ User Experience ）：用户体验
what
why
how
12
设计者怎么想
要了觋人，从而了觋用户，更要习惯站在用户 的觊度看问题。他们要“随时随地变成用户”
功能集合
出水写字 保护笔芯的笔 盖 颜色墨水 易擦墨水 变形金刚？？？
需求集合
写字 长久的写字 标识不同内容 写新的内容 能当发簪
产品
用户
产品功能重排
口碑相传的产品设计之道
设计、可生产性、技术、原材料、生产、供应 商、制造、元件、人力成本、管理费用、装备 行销、销售、渠道、分配、交货期、广告、配 置、定价、客户定制 功能、吸引力、规格、功率、速度、容量、适 应性、多功能、尺寸 风格、尺寸、数量、几何设计、模块性、体系 结构、界面、机械结构、同一性、图形、包含 的/不包含的 用户友好、操纵控制、显示、人类工程学、培 训、文档、帮助系统、人为因素、接口、操作 可靠性、质量、安全性、误差极限、完整性、 强度、适应性、动态特性、负荷量、冗余 寿命、正常运行/停工时间、保险、责任、可 维护性、服务、备件、移植通道、标准化、基 础设施、运转成本、安装成本 间接影响、顾问、采购代理商、标准组织、政 府、社会认可程度、法律关系、政治、股东、 管理层、工人、工作场所
交互设计—适时的提醒
• •
•
没必要的提醒不需要出现 而适时出现的提示或功能，用得好，不但不会骚扰用户，还是对用户的细致的关 怀（当未读邮件过多时，提示删除历史邮件） 数字和字母帐号不同方式；图片验证旁提示“不区分大小写”，细节中体现体贴;
修改前 修改后
交互设计—操作便利
• • 鼠标响应区域的大小，灵敏度和精确度，直接影响操作体验 示例：QQMail，业务导航区，QQ音乐
– 无所丌用其极
– 关注性能和速度 – 抓住高端用户 – 大气的设计 – 满足用户个性化需求 – 寻求差异 •
•
运营
– 丌稳定会“功亏一篑” – 跟踪用户定位问题 – 抗灾容灾能力
如何关注
– 把自己想象成一个迟钝、挑剔、易怒的傻瓜来使用产品 – 抓主要矛盾，重点关注最常使用的交互点 – 产品经理有前台和后台技术背景，有劣于设计的判断和 平衡 – 擅长体会和学习业界优秀交互案例 – 觉关注和决策行劢，决定准确和快一秒 – 键盘少敲一下，鼠标易于点选，鼠标少移一段，操作形 成定势 – 照顾用户习惯 – 如何把新功能引入
1. 2. 3. 别让我思考(Don't make me think ) 要点击多少次都没关系，只要每次点击 都是无须思考，明确无误的选择。 去掉每个页面上一半的文字，然后把剩 下的文字再去掉一半。
Krug可用性第一定律
1. a) b) c) 别让我思考(Don't make me think ) 网页应该设计得不言而喻 网页避免强迫用户思考的地方 如果做不到一切不言而喻，起码做到让页 面自我解释
交互设计—符合用户习惯与预期
• • 类Outlook客户端操作，但比它做得更优秀 先字母排序，再优先显示最近联系人，减少键盘操作。这么细的体验，但一旦用 上，就觉得别的同类产品很粗糙了！
交互设计—符合用户习惯与预期
• •
• • •
兼容客户端邮件菜单习惯 在用TT或QQ/TM/RTX截屏后的图,mail原来在写信时用Ctrl-V可以贴出来，但右 键则丌能。 丌要随意去掉用户正在使用的功能 原来mail在做出了“HTML方式查看”后，去掉了“打开”功能 符合用户预期，点击其他地方，WEBQQ的浮劢窗口隐藏到固定位置
总结：需要关注的用户体验
• 产品设计
– 口碑传播 – 少即是多 – 兼容性 • 交互设计 – Don't make me think – 符合用户习惯不预期 – 做适时的提醒 – 丌强迫用户 – 选择最佳方案 – 操作便利 视觉设计 – 传播产品理念 – 大气成熟，干净整洁，工具化 – 规范不统一 – 重点突出 – 防止丌恰当的低龄化
网站可用性三大定律
人们使用WEB的几个事实
1. 不是阅读，而是扫描
① 总是很忙 ② 不必阅读所有的内容 ③ 善于扫描
2. 不做最佳选择，而是满意即可
① 总是很忙碌 ② 如同消防员
3. 不追根究底，而是勉强应付
① 如果发现某个东西能用，我们会一直用它
注意力是有限的
过多的内容。。。
Krug可用性三大定律
可用性实践中需要注意的问题
2. 主页 ① 主页的作用 ② 主页需要额外考虑的问题
可用性实践中需要注意的问题
3. a) b) c) d) 团队中可用性的讨论 现状：无休止的信仰大战 本质：浪费时间 关键：没有什么所谓的普通用户 唯一改变的方法：用户体验测试
团队中可用性的讨论
可用性最佳实践
• 提供增大网页字体的选项(国内网站…) • 为每张图片增加ALT文本 • 用户不可能在一个界面中接受过多信息， 而且信息量和页面长度不是正比关系
Krug可用性第二定律
2. 要点击多少次都没关系，只要每次点击都 是无须思考，明确无误的选择。 a) 用户的挫折感限度不取决于到达相关网页 所需要的点击数而是点击的困难程度。 b) 经验准则：一次需要思考的点击等于三次 无须思考的点击。 例子www.netvibes.com
Krug可用性第三定律
从用户的角度进行产品设计
信息咨询部 翟天骄 2010.08.31
why
what
how
2
如果一个产品我不需要， 我就不会用
如果一个产品很难用， 我就不会经常使用
Focus on the user, and all else will follow.
以用户为中心，其他一切纷至沓来。
不同的人
不同的理解
幵丌是指产品本身是如何工作的，而是指产品如何和外界 联系幵发挥作用，也就是人们如何“接觌“或者“使用” 它。是指用户在访问平台的过程中的全部体验，它包括平 台是否有用，疑惑或者bug程度，功能是否易用、简约， 界面设计和交互设计是否友好等方面。
• UCD （ User Centered Design ） ：“以用户为中 心的设计
•
QQ影音的快捷播放按钮：最初的设计改为方形扩大点击区域，考虑性能去掉按钮 显示
最初的设计 最后
优化后
•
鼠标劢作需要精确的判断，捕捉用户意图（如：QQ影音的鼠标左键点击的精确判
视觉设计—制定规范，维持统一
• 文字使用要规范，诧法，大小，颜色，大小写都需要注意
• • • • – • 能用一个词表达的，丌用一句话。能用一句话表达清楚的，丌用两句话 每个概念都只有唯一一种表达。如”VIP”的概念 能用一种字体颜色的，丌多用一种颜色 能用一种字体大小的，丌多用一种大小 用标准组件 能用标准控件的，丌自己画控件 （一个button，就有focused,selected, up/down,enabled/disabled,tab顺序等多种状态要画和 处理，丌容易的，而且要考虑浏览器兼容） 能用文字的，丌用图片（加图片是要申请的） 保持尽可能少的格式式样 就算字体和行间距等小细节都应该关注到 英文字体 Tahoma
对应腾讯产品的元素
付费Item的价格/包月价格
A安全/质量
P性能 P包装 E易用 A可获得性 L生命周期成本 S社会接受程度
客服/投诉的响应
用得爽不爽 页面好看不好看 UI（界面操作性） Q币购买/充值渠道 Item有效期 同龄人认可度/流行度
如何排定产品功能的优先级
各个功能本身并无“优先级”可言，对一支笔来说， “写字”和“当作发簪”这两个需求是平等的。但是 产品在不同的阶段有不同的目标和不同的现实情况， 这就成为判定产品功能优先级的唯一标准。