月度归档:2014年02月

移动产品设计之降低输入成本

受限于屏幕尺寸,嘈杂的环境以及自身的状态,移动端输入成本很高,错误的概率也很高,那么我们如何降低输入成本呢?

一、提高输入效率
1、保证输入框的宽度和高度,准确明了的提示文字,调用合适的键盘(iOS键盘类型),限制输入字符的类型和长度,自动插入空格,提供清空按钮,准确及时的反馈等,比如支付宝中的添加银行卡。
2、内置第三方输入法或增加自定义按键,比如Weico内置百度、搜狗输入法,Chrome输入网址时增加了“.”、“/”、“.com ”,随享增加了“#”、“@”、“☺”。
3、提供输入建议和历史,比如微博登录时输入邮箱名自动补全后缀,百度地图输入搜索词后即时显示可能的搜索地点。

二、换用其他交互方式,减少输入
1、选择,比如天猫、支付宝手机充值的选择充值金额,充值号码调用通讯录。
2、单击,比如天猫对商品购买数量的输入处理。
3、滑动,QQ音乐的定时关闭,就是滑动选择长短时间。
4、语音输入,比如百度音乐的语音搜歌。
5、摄像头读取,比如有道词典的摄像头查词,支付宝的扫描输入银行卡号,微信的个人/群二维码(前段在Instagram上关注了近100个用户,累得我想死!)
6、摇一摇,有次微信加好友就是用的摇一摇,懒得问帐号输帐号。
7、长按,比如微信的“一起按,加朋友”,支付宝的“一起AA”(原理)。
8、声音交互,比如Chirp的鸟鸣传输文件(原理),支付宝的当面付,虽然官方表示声波代表的不是支付宝账号,背后是一串交易号,但客观上确实减少了支付宝账号的输入。

三、优化产品流程,不用输入
1、输入一次后,记住内容/用户名等,比如iPhone的信息会保留上次未发送的内容,微信退出登录后会默认显示上次登录的用户,支付宝手机充值中默认填着该账户绑定的手机号。
2、以其他信息形式代替文字,比如微信中的聊天表情,赞,语音,视频,以前我们跟朋友短信(SMS)拜年,后来我们微信语音拜年,过段我们将视频拜年。
3、本身已满足用户需求,比如微博的复制微博功能,大众点评的“最近浏览”和商户收藏功能。

前面讲的都是文本的输入,但输入仅限于文本吗?

地理坐标:聚会,堵车,想告诉朋友自己现在的位置,早前我们一般是告诉他们自己周边某个标志性建筑的名称,但现在我们可以直接微信自己的位置。再比如初到厦门,刚出车站,想上厕所,之前要自己去找,现在我们可以直接打开地图App搜索肯德基,然后地图App根据上送的经纬度返回周边的肯德基店。经纬度获取的基础是手机里的GPS模块以及Wi-Fi、基站等定位技术。(这里表扬一下腾讯地图,搜索“厕所”,结果中有肯德基/麦当劳店)

音频:逛商场突然听到某首歌,旋律很好听,想知道歌名,最早我们可能问店员或同行的人,或者听出歌词然后百度,但现在可以用QQ音乐、百度音乐的“听歌识曲”或微信的“摇一摇搜歌”来识别歌曲。可以这样的基础是麦克风(声波传感器)以及加速度传感器(摇一摇用到)。

图形图像:本来图形图像的需求场景不是那么明显,可是Line首创将ID转为二维码(实际是QR码),然后摄像头(影像传感器)扫描直接识别添加,很好地解决了原来加好友需要输入ID搜索,再添加,并且碰到长且不规律的ID比较麻烦的问题。后来,微信也跟进了,并对二维码在国内的普及功不可没,现在视频网站每个视频下面都有个类似“用手机看”的功能,就是把网址转成了二维码。

文本信息只是输入的一部分,还有很多其他类型的信息,原本这些我们需要先翻译成文字,然后告诉计算机,但随着技术的发展,我们可以直接捕捉,捕捉的基础是各种硬件传感器。如果我们能深入理解用户需求,同时善加利用各种基于传感器的技术,就能很好地降低用户输入成本。

拓展阅读:
1、好的体验从降低输入成本开始
2、惊艳呈现-百度搜索手机客户端
3、简化输入 — 让网页表单更亲切
4、一个文本框搞定信用卡相关信息的输入
5、HTML中怎样触发不同类型的键盘

移动产品设计之加速

我们有时觉得某个App快,某个App运行起来则很慢,这个过程分解开来就是:某个App执行某项任务,在某种网络环境下,被用户感觉到速度快或慢。三个关键词:任务,网络环境,用户感知。

任务:
1、提高任务执行速度
优化App代码质量,这个技术上的思路比较常见。

2、后台处理任务
最近使用新浪微博Windows Phone客户端时感受强烈,每次发出微博后可以继续刷微博,过段状态栏会显示发送成功或失败的提示。处理任务的时间并没有变化,使用体验却顺畅许多。

3、提前执行任务
Instagram在你拍完照片填写照片说明、分享信息等时就开始上传了,等你点击“完成”时,照片可能都已经上传好了。仅仅照片说明、分享信息等的上传,时间相对短很多。用户的感觉就是Instagram比别的App快,分享照片很简单!
微信查看他人朋友圈的照片,某张照片加载完成后,会自动加载该照片的前一张和后两张,这是对用户行为的预测。

4、提前显示任务结果
发iMessage时,点击“发送”后,输入的内容就会移入对话列表中,此时导航栏上还在显示着发送进度。一段时间后,如果发送失败,所发送消息右侧会显示红色的叹号,点击可再发送一次。
Instagram中点“赞”时,“赞”按钮会立即变为“赞了”,而实际此时赞的请求正在进行。
微信更极端,没有网络时朋友圈发的照片也会进入内容列表中,但实际是没有发出去的,短时间内微信会在有网络时自动上传,长时间的话,微信会提示“照片发送失败”,可轻触以再次发送。

5、细化为多个任务
大多数App采取的分页加载数据就是一个例子,像新浪微博“首页”每次加载50条微博,“消息”中每次加载20条消息。

6、降低任务难度
随享中查看微博图片,先显示质量稍低的图片,点击“原图”才会加载原始图片。

网络环境:
1、不同网络环境不同处理
新浪微博根据网络,在Wi-Fi下大图模式,在3G/2G网络下小图模式。

2、避免陷入3G/2G网络环境
视频、音乐类App的离线功能,豌豆荚的追剧功能。

3、与运营商合作推出类定向流量包
搜狐视频的联通15元每月6G流量包,豆瓣FM的联通免流量包月服务,微信和广东联通推出“微信沃卡”等。

用户感知:
1、及时反馈
用户不了解情况,就会更加着急。

2、分步加载
网易新闻查看新闻详情时,先加载文章标题和内容,再加载配图。

3、先显示部分元素
已有布局,打开iPhone备忘录,先显示导航栏和列表分割线
已知内容,新浪微博从列表进入某条微博正文,先显示列表页已知的头像、昵称、时间、微博内容等。

4、利用缓存
让人感觉快,新浪微博每次进入,“首页”都显示上次刷新时的微博。
实际确实更快,微信在没网的时候也可以访问之前已经访问过的页面。

5、页面转场、动画效果
页面转场、动画转场效果是消耗时间的,这个时间会被用来处理任务。

6、减少系统默认loading动画的使用
看着就烦,现在携程、美团等App都已经自定义了。

7、有趣、酷的元素
转移用户注意力,四次元加载图片时的loading动画有点像Pac-Man,iOS 7 下载App从在桌面上显示到安装完成的一系列动画就很酷。

8、视错觉
打开Gmail时的蓝色进度条,理论上会让我们感觉读取速度快了11%
以上只是细节的归纳,宏观地看,优化流程,缩减层级,减少输入等也会让用户感觉快,因为用户使用App是为了解决一个问题,所以让App加速是一件系统的事情。

拓展阅读:
1、Instagram 速度快的秘密何在?
2、让等待更加美好
3、通过设计让APP变快的6个方法
4、移动应用“快”体验设计方法