IxDC2011...

此资料仅供学习使用，版权归属原作者或公司任何人不得用于商业用途，由此引起的法律责任自负

李鹤（巴秀琳）刘宸寰（为一） 2011. 7 淘宝技术嘉年华 iconference

从支付宝iOS客户端改版谈手机上的用户体验设计

-－支付宝无线事业部UED

Alipay app for ios

11年7月11日星期一

project brief:－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

在不改变功能的情况进行体验升级11年7月11日星期一

Process:－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

对需求的解读包括对设计背景、用户的

理解。在这个阶段,我们进行了竟比、现

有问题分析、数据分析以及用户深访等,

为之后的设计展开提供依据。

设计概念阶段是在总结understand

阶段结果的基础上, 提出方案设计

的阶段。

信息架构流程控件内容视觉风格调研视觉风格定位视觉设计



competitive comparison


01 competitive comparison与paypal等国内外知名支付网站的竟比分析,

交互人员注重信息架构、任务流程设计、控件设计

由于paypal不同的business model与strategy以及国外完善的信用系统, paypal在其操作流程上相比之下较为简单明了, task flow也与

alipay 手机端大相径庭。逻辑清晰简单,架构信息清晰，相比于支付宝 ios手机客户端现有版本,是更符合 mental model的一种分类方式, 以

支付的方向划分。且其文本更具亲和力、导向性以及高效性。



视觉风格竞比分析


02 视觉风格竞比分析案例:paypal

色调:界面的用色简单,整体突出品牌特征;深

色的导航、谈蓝色为主体、橙色为点缀色。

布局:虽然布局上基本遵从了Iphone惯有的结

构形式,但在内页我们还看到了web的影子。

控件:paypal的控件表达比较特殊 ,它突破了

iphone固有的形式。


02 视觉风格竞比分析案例:imoney

色调:界面的用色对比强烈,整体界面质感突出,

品牌特征明显;深色的导航、黑色的显示区域。

布局:基本遵从了Iphone惯有的结构形式,布局

保守。

控件:list形式清晰,让人一目了然,方便用户操

作。


02 视觉风格竞比分析案例:yahoo

色调:直白的web式色彩运用,突出了品牌,表现

出简单和安全的理念。

布局:做了简单调整,布局上还是表现出了自有

的特色,布局和色彩都做到了和谐统一。

控件:简单干净的控件,给干练的印象。


02 视觉风格竞比分析案例:随手记

色调:个性鲜明的应用,整个操作过程充满了趣

味,但可用性不强。

布局:打破Iphone惯有的结构,张扬了品牌特

性。

控件:赋有新意、趣味性强,细节精细。


02 提取关键词distill the keywords to lead our visual design process


03 视觉风格定位


04 色彩方案根据支付宝的品牌特性,提取的关键词制定色彩方案


05 icon testing（ card sorting）test low-fidelity icon to distill the identified visual elements


06



current problems


01 current problems现有五个平台的手机支付宝信息架构不统一,不清晰；无品牌识别度,用户信任感略低



understand usersecondary research|primary research|card sorting

重点关注信息架构


01 secondary research收集现有客户反馈信息以及交易、日志等数据统计的二手资料进行分析

根据交易数据、客服数据等,提取最重

要、最常用的用户需求“淘宝购物付款,收款,付款,彩票

以及手机充值”。(与用户访谈结果呼应)

用户电话回访记录: 呈现问题可分为两类,

一类涉及到风控规则以及技术型问题,无法通过设

计解决 ,但可通过操作合理性以及提示文本进行优

化; (eg. 更改绑定手机号) 一类涉及到信息视觉化以

及操作问题,可通过优化信息架构布局得到解决。

(eg. 话费充值选错面额)


02 primary researchinterview + think aloud


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个价值点进行深入挖掘。


03 card sorting--profileprofile, sort, analysis, label, verify


03 card sorting--sortprofile, sort, analysis, label, verify


03 card sorting--analysisprofile, sort, analysis, label, verify


03 card sorting--labelprofile, sort, analysis, label, verify


03 card sorting--verifyprofile, sort, analysis, label, verify



concept designSLIP|go to deep|innovation for experience|details

重点关注任务流程


01 integrate+prioritize根据用研分析sort, label, integrate, prioritize功能模块以及页面架构


01 Evaluation rules of IA

信息架构的几个评估标准：• 产品结构清晰，没有不必要的层级 • 能快速了解产品有几个主要功能模块• 所有主要部分都能够通过首页访问 • 清晰的指示了当前的位置


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


02go to deep--notification solution

多做纸上原型，提高思考力。


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


有如下几个评估标准：• � 明确产品有几个主要的任务流程 • � 每个任务流程清晰，没有太多分支 • � 任务流程符合用户操作流程 • � 用户可以取消正在执行的操作 • � 操作成功或失败都有明确的反馈 • � 在每个层级，都可以找到回到上一级的方法 • � 预防出错，如出错要帮助用户从错误中恢复过来 • � 复杂的交互是否有很好的引导和帮助

Evaluation rules of task flow

• 产品流程是否清晰要想表现层越简单，背后的逻辑层可能就越复杂。那么我们评估流程的时候，不是以背后的逻辑层复杂度来评估，而是以表现层的简洁度来评估的。比如说一个发布一篇博客的流程，总共需要几个步骤，涉及到几个层级（一级页面到二级页面到三级页

面…）。当然，不是说步骤越少、层级越浅就是好的设计。而是要简单、明确、清晰。没有不相关的干扰分支，没有经常会出现的误操作，没有提顿思考的空间，没有操作之后无反应的疑惑。

03



implementhigh-fidelity重点关注控件、内容


01 细节

手机特点：小屏幕。一定要处理好键盘呼起和控件的关系。11年7月11日星期一

手机特点：输入困难。

为实际的场景调不同的键盘。

01 细节

支付宝账户是邮箱或者手机号，所以应该调带@的系统键盘

能联想的应该联想，节省用户输入


02 ui guideline


03 the rule of text


Evaluation rules of control

• 控件使用是否准确手机产品涉及到很多的控件。一级标签栏、二级标签栏、列表、按钮、对话框、提示框等等，这些控件使用的是否到位，是衡量一个设计是否好坏的重要标准。比如说，这个二级标签栏，它的从属内容是否在样式上跟他有从属关系，这个细节，如果不把握好，用户很可能把这个二级标签栏看成了按钮。

有如下几个评估标准：

• � 控件使用准确性（比如是否混淆了单选框和复选框，对话框层次过多等） • � 控件的复用• � 控件的状态（比如不可点状态、可点状态、按下状态、长按状态） • � 链接色的准确使用 • � 焦点状态的准确使用

04


Evaluation rules of text05• 信息传达是否到位信息传达包含产品文案引导、按钮文案设计、列表文字布局、内容页排版、提醒文案设计等等。文案是否准确，是否能有效的传达意思，也是衡量交互设计的一个重要标准。文字长度限制、特殊情况处理是否考虑到位，也是衡量设计师工作的基准。而列表文字的布局、内容页的排版，则是信息布局的重中之重。

有如下几个评估标准：

• � 布局清晰 • � 文案简洁 • � 没有术语• � 合理排版（标题、作者、字号、字色，页边距的运用） • � 标签和内容的从属关系（能否看出当前标签页，和当前标签页的从属内容）

用原则检查设计，不要用原则驱动设计11年7月11日星期一

sth we leaned1、闭关的工作形式充分沟通、大家像一个workshop一样,每个人充分发表意见、做到讨论充分,决定有理有据。每个人也从项目中专业有所提高。

2、多次评审 UED内部评审、和产品人员、技术人员的专家评审,保证产品逻辑、质量、技术可行性等。

3、快速迭代项目开始定了消费记录可视化、快捷入口等功能模块。为了项目能够先快速迭代上线,本期砍掉了这两个功能,主要完成信息架构调整、交互细节优化、状态栏修改(余额、提醒)三个部分。消费记录可视化在接下来的版本中提现。

4、做取舍（衡量标准：价值）

5、细节！（减少和服务端的交互，做本地缓存，能让用户不等待的就不要让用户等待）


the bottleneck1. 前期做了一些现有运营、客服数据分析、用户研究,对于需求有了明确的支持。但是项目中, 对于交互细节决策时还是缺少数据支持,对于用户交互习惯分析理据不足。

2. 用户研究是为了设计作依据,但是在用研过程中,我们发现手机客户端上线1-2年, 较短的时间内还未形成稳定的用户群以及典型用户习惯, 中间用户与初级用户界限不明显, 资深用户量少。因此,难以定义以及建立典型用户的Persona原型以及pro!le。


next step1、完善用户数据收集、分析;(用户行为路径埋点,数据收集,用户反馈,用研分析)；体验的用户行为视觉化——分析,度量( 包括task的doing & undergoing)。2、建立典型用户的Persona原型以及pro!le;3、new needs带来的新应用场景分析——Scenario-Based Design;4、Simplicity,关于品质和细节, 包括信息架构、task "ow等; 5、缓存的处理；6、手机特性的应用；


欢迎有理想、优秀的你加入支付宝无线Ued！[email protected]（北京）[email protected] (杭州)

新浪微博 @李鹤


mailto:[email protected]




IxDC2011...

Technology

Transcript of IxDC2011...