IxDC2011...
-
Upload
ixdc -
Category
Technology
-
view
659 -
download
0
Transcript of IxDC2011...
此资料仅供学习使用,版权归属原作者或公司任何人不得用于商业用途,由此引起的法律责任自负
李鹤(巴秀琳) 刘宸寰(为一) 2011. 7 淘宝技术嘉年华 iconference
从支付宝iOS客户端改版谈手机上的用户体验设计
--支付宝无线事业部UED
Alipay app for ios
11年7月11日星期一
project brief:--------------------------------------------------------------------------------------------------
在不改变功能的情况进行体验升级11年7月11日星期一
Process:---------------------------------------------------------------------------------------
对需求的解读包括对设计背景、用户的
理解。在这个阶段,我们进行了竟比、现
有问题分析、数据分析以及用户深访等,
为之后的设计展开提供依据。
设计概念阶段是在总结understand
阶段结果的基础上, 提出方案设计
的阶段。
信息架构 流程 控件 内容视觉风格调研 视觉风格定位 视觉设计
11年7月11日星期一
李鹤(巴秀琳) 刘宸寰(为一) 2011. 7 淘宝技术嘉年华 iconference
competitive comparison
11年7月11日星期一
01 competitive comparison与paypal等国内外知名支付网站的竟比分析,
交互人员注重信息架构、任务流程设计、控件设计
由于paypal不同的business model与strategy以及国外完善的信用系统, paypal在其操作流程上相比之下较为简单明了, task flow也与
alipay 手机端大相径庭。逻辑清晰简单,架构信息清晰, 相比于支付宝 ios手机客户端现有版本,是更符合 mental model的一种分类方式, 以
支付的方向划分。 且其文本更具亲和力、导向性以及高效性。
11年7月11日星期一
李鹤(巴秀琳) 刘宸寰(为一) 2011. 7 淘宝技术嘉年华 iconference
视觉风格竞比分析
11年7月11日星期一
02 视觉风格竞比分析案例:paypal
色调:界面的用色简单,整体突出品牌特征;深
色 的导航、谈蓝色为主体、橙色为点缀色。
布局:虽然布局上基本遵从了Iphone惯有的结
构形 式,但在内页我们还看到了web的影子。
控件:paypal的控件表达比较特殊 ,它突破了
iphone固有的形式。
11年7月11日星期一
02 视觉风格竞比分析案例:imoney
色调:界面的用色对比强烈,整体界面质感突出,
品牌特征明显;深色的导航、黑色的显示区域。
布局:基本遵从了Iphone惯有的结构形式,布局
保守。
控件:list形式清晰,让人一目了然,方便用户操
作。
11年7月11日星期一
02 视觉风格竞比分析案例:yahoo
色调:直白的web式色彩运用,突出了品牌,表现
出简单和安全的理念。
布局:做了简单调整,布局上还是表现出了自有
的 特色,布局和色彩都做到了和谐统一。
控件:简单干净的控件,给干练的印象。
11年7月11日星期一
02 视觉风格竞比分析案例:随手记
色调:个性鲜明的应用,整个操作过程充满了趣
味,但可用性不强。
布局:打破Iphone惯有的结构,张扬了品牌特
性。
控件:赋有新意、趣味性强,细节精细。
11年7月11日星期一
02 提取关键词distill the keywords to lead our visual design process
11年7月11日星期一
03 视觉风格定位
11年7月11日星期一
04 色彩方案 根据支付宝的品牌特性,提取的关键词制定色彩方案
11年7月11日星期一
05 icon testing( card sorting)test low-fidelity icon to distill the identified visual elements
11年7月11日星期一
06
11年7月11日星期一
李鹤(巴秀琳) 刘宸寰(为一) 2011. 7 淘宝技术嘉年华 iconference
current problems
11年7月11日星期一
01 current problems现有五个平台的手机支付宝信息架构不统一,不清晰;无品牌识别度,用户信任感略低
11年7月11日星期一
李鹤(巴秀琳) 刘宸寰(为一) 2011. 7 淘宝技术嘉年华 iconference
understand usersecondary research|primary research|card sorting
重点关注信息架构
11年7月11日星期一
01 secondary research收集现有客户反馈信息以及交易、日志等数据统计的二手资料进行分析
根据交易数据、客服数据等,提取最重
要、最常用的用户需求“淘宝购物付款,收 款,付款,彩票
以及手机充 值”。(与用户访 谈结果呼应)
用户电话回访记录: 呈现问题可分为两类,
一类涉及到风控规则以及技术型问题,无法通 过设
计解决 ,但可通过操作合理性以及提示文本进行优
化; (eg. 更改绑定手机号) 一类涉及到信息视觉化以
及操作问题,可通过优化信息架 构布局得到解决。
(eg. 话费充 值选错面额)
11年7月11日星期一
02 primary researchinterview + think aloud
11年7月11日星期一
02primary research--insights所得结果与前后用研分析结果相互confirm、印证以及呼应。
1. 初次使用者对进入应用首个页面期待:希望知道手机支付宝客户端能做什么,主要功能应用的list。同时应考虑对于初次
使用用户特殊的引导以及提示。
2. 用户登录后希望以及需要第一时间获取的信息包括:账户余额,需要处理的交易。(与之后卡片分类的信息反馈一致 )
3.最常用功能为:淘宝购物的付款,我要付款,我要收款,AA付款,彩票,手机充值。(与搜集的二手用研数据吻合)
4. 界面视觉感受,不够官方,比较山寨; icon识别性不高。(与current problem分析统一)
5. 对于无记住密码功能,用户反馈不同,有人觉得不方便,而另外一些认为是比较安全,能够接受, 提供让user自己
setting是较为合理的解决方案。
6. 帮助选项形同虚设,一方面由于现有主流手机客户端用户习惯自己探索寻求答案,且在手机上的操作学习成本较低; 另一
方面现有帮助信息同鸡肋,体验 感差,内容无实质帮助。
7. 对于安全键盘,用户没有意识到其安全性。
8. 功能上让人理解模糊, eg. 更多中手机充值,和,公共事业缴费中的缴手机费,两者概念不清晰。在改版中需整合优化, 不
单是信息架构上的调整,在文案以 及视觉引导上有所提升。
9. IA上的不合理不但使即便是资深用户也无法了解找到相应功能,而且影响了用户对相应功能点的理解。
10. 用户对支付宝手机客户端的功能需求差异性较大.
挑选最重要2-3个价值点进行深入挖掘。
11年7月11日星期一
03 card sorting--profileprofile, sort, analysis, label, verify
11年7月11日星期一
03 card sorting--sortprofile, sort, analysis, label, verify
11年7月11日星期一
03 card sorting--analysisprofile, sort, analysis, label, verify
11年7月11日星期一
03 card sorting--labelprofile, sort, analysis, label, verify
11年7月11日星期一
03 card sorting--labelprofile, sort, analysis, label, verify
11年7月11日星期一
03 card sorting--verifyprofile, sort, analysis, label, verify
11年7月11日星期一
03 card sorting--verifyprofile, sort, analysis, label, verify
11年7月11日星期一
李鹤(巴秀琳) 刘宸寰(为一) 2011. 7 淘宝技术嘉年华 iconference
concept designSLIP|go to deep|innovation for experience|details
重点关注任务流程
11年7月11日星期一
01 integrate+prioritize根据用研分析sort, label, integrate, prioritize功能模块以及页面架构
11年7月11日星期一
01 integrate+prioritize根据用研分析sort, label, integrate, prioritize功能模块以及页面架构
11年7月11日星期一
01 Evaluation rules of IA
信息架构的几个评估标准:• 产品结构清晰,没有不必要的层级 • 能快速了解产品有几个主要功能模块• 所有主要部分都能够通过首页访问 • 清晰的指示了当前的位置
11年7月11日星期一
02 go to deep--notificationanalysis the key features and weigh the cons & pros
pc会以搜索为核心,但是手机上的产品会以推送为核心。11年7月11日星期一
02 go to deep--notificationanalysis the key features and weigh the cons & pros
11年7月11日星期一
02go to deep--notification solution
多做纸上原型,提高思考力。
11年7月11日星期一
02 go to deep--shortcutanalysis each key features and weigh the cons & pros
手机设计原则:最可能快速、方便地满足用户的需要11年7月11日星期一
go to deep--shortcutanalysis each key features and weigh the cons & pros02
11年7月11日星期一
有如下几个评估标准:• � 明确产品有几个主要的任务流程 • � 每个任务流程清晰,没有太多分支 • � 任务流程符合用户操作流程 • � 用户可以取消正在执行的操作 • � 操作成功或失败都有明确的反馈 • � 在每个层级,都可以找到回到上一级的方法 • � 预防出错,如出错要帮助用户从错误中恢复过来 • � 复杂的交互是否有很好的引导和帮助
Evaluation rules of task flow
• 产品流程是否清晰要想表现层越简单,背后的逻辑层可能就越复杂。那么我们评估流程的时候,不是以背后的逻辑层复杂度来评估,而是以表现层的简洁度来评估的。比如说一个发布一篇博客的流程,总共需要几个步骤,涉及到几个层级(一级页面到二级页面到三级页
面…)。当然,不是说步骤越少、层级越浅就是好的设计。而是要简单、明确、清晰。没有不相关的干扰分支,没有经常会出现的误操作,没有提顿思考的空间,没有操作之后无反应的疑惑。
03
11年7月11日星期一
李鹤(巴秀琳) 刘宸寰(为一) 2011. 7 淘宝技术嘉年华 iconference
implementhigh-fidelity重点关注控件、内容
11年7月11日星期一
01 细节
手机特点:小屏幕。一定要处理好键盘呼起和控件的关系。11年7月11日星期一
手机特点:输入困难。
为实际的场景调不同的键盘。
01 细节
支付宝账户是邮箱或者手机号,所以应该调带@的系统键盘
能联想的应该联想,节省用户输入
11年7月11日星期一
02 ui guideline
11年7月11日星期一
02 ui guideline
11年7月11日星期一
03 the rule of text
11年7月11日星期一
Evaluation rules of control
• 控件使用是否准确手机产品涉及到很多的控件。一级标签栏、二级标签栏、列表、按钮、对话框、提示框等等,这些控件使用的是否到位,是衡量一个设计是否好坏的重要标准。比如说,这个二级标签栏,它的从属内容是否在样式上跟他有从属关系,这个细节,如果不把握好,用户很可能把这个二级标签栏看成了按钮。
有如下几个评估标准:
• � 控件使用准确性(比如是否混淆了单选框和复选框,对话框层次过多等) • � 控件的复用• � 控件的状态(比如不可点状态、可点状态、按下状态、长按状态) • � 链接色的准确使用 • � 焦点状态的准确使用
04
11年7月11日星期一
Evaluation rules of text05• 信息传达是否到位信息传达包含产品文案引导、按钮文案设计、列表文字布局、内容页排版、提醒文案设计等等。文案是否准确,是否能有效的传达意思,也是衡量交互设计的一个重要标准。文字长度限制、特殊情况处理是否考虑到位,也是衡量设计师工作的基准。而列表文字的布局、内容页的排版,则是信息布局的重中之重。
有如下几个评估标准:
• � 布局清晰 • � 文案简洁 • � 没有术语• � 合理排版(标题、作者、字号、字色,页边距的运用) • � 标签和内容的从属关系(能否看出当前标签页,和当前标签页的从属内容)
用原则检查设计,不要用原则驱动设计11年7月11日星期一
sth we leaned1、闭关的工作形式 充分沟通、大家像一个workshop一样,每个人充分发表意见、做到讨论充分,决定有理有据。每个人也从项目中专业有所提高。
2、多次评审 UED内部评审、和产品人员、技术人员的专家评审,保证产品逻辑、质量、技术可行性等。
3、快速迭代项目开始定了消费记录可视化、快捷入口等功能模块。 为了项目能够先快速迭代上线,本期砍掉了这两个功能,主要完成信息架构调整、交互细节优化、 状态栏修 改(余额、提醒)三个部分。消费记录可视化在接下来的版本中提现。
4、做取舍(衡量标准:价值)
5、细节! (减少和服务端的交互,做本地缓存,能让用户不等待的就不要让用户等待)
11年7月11日星期一
the bottleneck1. 前期做了一些现有运营、客服数据分析、用户研究,对于需求有了明确的支持。但是项目中, 对于交互细节决 策时还是缺少数据支持,对于用户交互习惯分析理据不足。
2. 用户研究是为了设计作依据,但是在用研过程中,我们发现手机客户端上线1-2年, 较短的时间内还未形成稳 定的用户群以及典型用户习惯, 中间用户与初级用户界限不明显, 资深用户量少。因此,难以定义以及建立典型 用户的Persona原型以及pro!le。
11年7月11日星期一
next step1、完善用户数据收集、分析;(用户行为路径埋点,数据收集,用户反馈,用研分析);体验的用户行为视觉化——分析,度量( 包括task的doing & undergoing)。2、建立典型用户的Persona原型以及pro!le;3、new needs带来的新应用场景分析——Scenario-Based Design;4、Simplicity,关于品质和细节, 包括信息架构、task "ow等; 5、缓存的处理;6、手机特性的应用;
11年7月11日星期一
11年7月11日星期一