第 2 章 表单

第 2 章 表单

图像说明文字

常见表单模式
登录表单(Sign In)、注册表单(Registration)、个性化注册表单(Registration with Personalization)、结账表单(Checkout)、计算表单(Calculator)、搜索表单(Search Form)、多步骤表单(Multi-Step)、长表单(Long Form)

多数网页应用都大量依赖表单实现数据输入和配置。尽管我们对高效的表单设计已有一些研究成果和设计策略,但网络上糟糕的表单仍然随处可见。设置在线账号、购买商品、提交申请、填写调查问卷等,简直让我们筋疲力尽。

图2-1 Windows Phone版American Airlines机票预订:差劲的表单设计

有时我们能顺利提交表单,但常常中途放弃。表单流失(指的是那些还没完成并提交表单就放弃的用户)是一个非常严重、代价高昂的问题。但与移动端相比,网页端的问题还算不上什么,因为狭小的屏幕和受限的输入方式导致糟糕的移动表单设计简直没有留存的余地。

因此,在你设计任何移动端表单之前,我强烈推荐你阅读以下资料来复习关于表单设计的基本技巧:

作为对上述资料的补充,下面这些表单设计模式将有助于你设计出让用户满意的应用。这些模式包括:

  • 登录表单
  • 注册表单
  • 个性化注册表单
  • 结账表单
  • 计算表单
  • 搜索表单
  • 多步骤表单
  • 长表单

登录表单

登录表单应该包含尽可能少的输入:用户名、密码、操作按钮、密码帮助以及注册选项。一些应用将这些输入框全部设计在同一页面上,比如Remember the Milk和Groupon。

图2-2 安卓版Remember the Milk和iOS版Groupon:最简洁的登录框

另外一些应用,比如Instagram,则首先显示登录和注册选项,然后引导用户去填写相应的表单。你应该让第一个输入框自动获得焦点,避免用户做额外的点击操作以打开键盘。

图2-3 安卓版Instagram:显示在最前面的注册和登录选项

登录表单本身应该利用一种新技术——明文显示已输入的密码,这项技术已获得了可用性测试与现场使用效果的有力支撑。比如LinkedIn的登录输入框就明文显示密码,同时也为用户提供选项来隐藏密码。开启和关闭图标是通用的,或者采用文字“隐藏/显示”(参见“注册表单”一节中关于Polar的示例)。

图2-4 安卓版LinkedIn:明文显示密码的选项

其他一些应用,比如Wunderlist和Box,将注册和登录选项放在引导页上。通过在每一页上固定显示这些选项,让新用户一旦决定使用应用就可以立刻注册,同时老用户也一样可以方便地登录。

图2-5 iOS版Wunderlist:注册和登录一直呈现在引导页上

标签页是另一种既呈现两个选项又能将导航最小化的可行模式,比如Foodspotting和SigFig的设计。

图2-6 安卓版Box让用户在对引导产生兴趣时可以轻松注册

图2-7 安卓版Foodspotting和Windows Phone版SigFig:登录和注册标签页

这些模式中的任何一种都可以加上第三方登录选项,不要与第三方注册混淆,后者我们会在注册模式中讨论。第三方登录会让用户对其他的社交媒体授权,授权成功后即可进入应用。

图2-8 安卓版Hipmunk提供了三个登录选项:创建账户、Facebook登录和谷歌登录

还有一种登录模式在金融领域十分流行。这种模式直接放弃用户名输入框,只要求输入密码。在安装应用后,用户身份就可以得到验证,只要再输入密码就可以访问敏感数据。把手机的PIN码作为密码也能实现同样的效果,这种模式可以参考Frost Bank和Personal Capital的例子。

图2-9 iOS版Personal Capital和Frost只要求输入密码或PIN即可登录

到目前为止,我们看到的绝大多数例子中,登录表单在启动应用时就会显示出来。但在很多情况下,最好让用户在使用应用时无需登录或注册。

你可以畅快地浏览Groupon和Etsy,直到想购买或是收藏一件商品时才需要登录(选择分享、添加到愿望清单、添加评论等时也可以要求用户登录)。为什么你应该让用户不登录或注册就能购物呢?Jared Spool在他的“The $300 Million Button”一文中做了解释(http://www.uie.com/articles/three_hund_million_button)。若需要进一步的说明,请参看第11章中Greg Nudelman所撰写的“番外篇”。

说明

登录不一定非得是第一步。想一想什么时候验证用户身份才是最合适的。不要在登录页上进行创新,采用标准设计会更易于用户登录。

图2-10 iOS版GroupOn:随意浏览,购买时再要求登录

图2-11 安卓版Etsy:用户“喜欢”一件商品时再要求他登录

注册表单

企业热爱客户数据,所以他们往往试图在用户注册时获取尽可能多的信息。但注册表单应该包含尽可能少的输入项。因为每增加一项输入,就会大大降低注册表单的转化率,所以用户体验顾问兼作者Chui Chui Tan建议,应该毫不留情地砍掉“没有任何重要功能的元素”。经过大量的用户测试验证,比较容易下手的是去掉不必要的确认电子邮件字段和确认密码字段,如下图的NOOK和LearnVest所示。

图2-12 安卓版NOOK和iOS版LearnVest:多余的确认电子邮件和密码的字段

图2-13 iOS版Rove和Kik:测试确认单行电子邮件和密码字段的可行性

确认电子邮件地址是必需的吗?Path的注册表单稍微长那么一点,但它却清晰地标注出了选填字段,而且用提示用户核对的办法取代了重复输入邮件地址。

图2-14 iOS版Path清楚地标注出了选填字段,并用弹框提示用户确认电子邮件地址

注册表单可能是你为你的应用设计的第一个表单,所以你应该建立一个易于阅读的标签标准。表单大师Luke Wroblewski打造的有趣的投票应用Polar就是一个优秀的例子。注意,每个表单项都有即时反馈,而且密码项有“隐藏/显示”选择,这就使得重复输入密码更加没有必要。

图2-15 iOS版Polar是表单布局和交互设计的优秀范例

水平对齐的表单标签可能不是最好的选择,因为这样可能会使标签显示不全,或者和表单输入框挤到一起。可以考虑使用垂直对齐的标签,比如Fancy和Remember The Milk。

图2-16 水平对齐的标签可能显示不全或部分重叠

图2-17 安卓版Remember The Milk和Fancy:垂直对齐的标签往往更好一些

还有一个选择是使用提示文字(即输入框中显示有浅色的默认文字,提示用户该字段的填写要求)。但这会带来一个问题,就是一旦用户开始输入字符,提示文字就会消失。如果用户不注意的话,很容易就忘了他应该在这里输入什么。悬浮标签是一种新型模式,可以部分解决水印式标签(即提示文字)存在的易用性问题。在http://mattdsmith.com/float-label-pattern/上可查看这一模式的发明者Matt Smith撰写的更多相关信息。

图2-18 采用悬浮标签模式,只要输入文字,水印标签就会“悬浮”在输入框上方

还有一种不错的做法是,在适当的时候以内联的形式给予实时反馈,比如Instagram的账号名称设计。想了解更多技巧,请参阅第8章。

图2-19 iOS版Instagram:内联形式的实时反馈

你是否会对密码的安全性有特定的要求,诸如字母的大小写等?如果有,那就一定要在用户点击“提交”或“完成”按钮之前告诉他们,不要在之后再显示错误提示信息。HelloWallet的说明有些多,Level相对而言则更简洁明了(尽管在我看来,它的总体注册体验还有改进的空间)。

图2-20 iOS版HelloWallet和Level:预先显示密码要求

一旦用户提交了注册表单,要立即给予注册反馈,参见安卓版Etsy和Pageonce应用。

图2-21 安卓版Etsy和Pageonce:表单提交后就给予用户注册反馈

在注册过程中,可以的话要让用户始终停留在应用中。如果你必须链接到一个网页表单,至少在移动浏览器中测试一下以确保它的可用性。Windows Phone版Fitbit的设计师显然没有进行这项工作。

图2-22 Windows Phone版Fitbit:令人痛苦的网页端注册体验

应该把注册当作一个流程,对用户输入的所有可能性考虑周全。再以Level为例,我已经有了一个账号,“不小心”又重新填写了注册表单。尽管在我的电子邮件地址旁边有一个对勾——这显然向我表明这个邮箱是可用的——但是我却收到了错误提示,原因是此邮箱地址已被使用。我只能点击“烦人”按钮(Bummer)关掉弹窗。

为什么不能在我填写表单字段的时候就告诉我电子邮件地址已被使用了呢?或者至少转到填好我的邮箱地址的登录界面,而不是给我一个硬生生的错误提示,且没有任何线索指明我下一步该做什么?

说明

注册表单要简短,表单长度最好在一屏之内,操作按钮要放在可视范围内。清楚地说明输入要求,可利用实时反馈加快注册过程,并让用户了解当前状况。要考虑到所有用户的使用情况。

图2-23 iOS版Level:我的电子邮件地址已经被占用,但旁边还显示了对勾

Dropbox针对同样的情况给出了漂亮的解决方案。一旦识别出我的邮箱已存在,它会推测我是想登录而不是注册。因为我很可能需要找回密码的指引,所以它会预先在找回密码的页面填好我的邮箱地址,这样我只需点击“发送”即可等待恢复账号了。

图2-24 iOS版Dropbox:重复注册情况下聪明的解决方案

个性化注册表单

这是一种相对新颖的设计模式,其目的是为用户提供更加个性化的内容(如Ness和News360),通过关联社交媒体提升用户体验(如Path和Instagram),或是获取设置所需数据(如Personal Capital)。

稍后将看到的多步骤模式为我们提供了更详细的注册流程方面的例子。

Facebook最近发布的Paper应用以其拖放选择感兴趣的主题这一UI设计,成了“不必要的复杂”类型的反模式案例(参见第11章)。Ness和News360则采用了滑动和点击的设计,这种设计更高率,而且很容易单指操作。若想进一步了解这一理念,可以参阅Luke Wroblewski的文章“Designing for Thumb Flow”(http://www.lukew.com/ff/entry.asp%3F1734%3D)。

图2-25 iOS版Ness和安卓版News360:注册流程中的偏好设置提示

图2-26 Facebook出品的iOS版Paper应用:拖放这种UI设计会耗费用户更多的精力(http://youtu.be/UpZFw2wQr58

图2-27 iOS版Path和Instagram:在注册流程中鼓励用户找到好友

图2-28 iOS版Personal Capital:电话号码和资产范围的提示,同时提供链接账号的选项

多步骤表单

在网页端,多步骤注册过程经常使用进程栏(process bar)1指示用户他们所处的位置,并提示下一步操作。但是移动设备的屏幕太小,没有足够的空间显示那么大的进程栏。你或许可以在标题栏里挤进一个,但是还有更好的方法来引导移动用户完成一系列步骤。

1processs bar译为“进程栏”,与进度条(progress bar)、进程条区别。——译者注

在iOS版PayPal的早期版本中,利益相关者坚持采用进程栏的设计。毕竟转账是一个流程。但现在的PayPal与其2010-2011版本相比,简洁度大大提高了。

图2-29 大约2010年到2011年的iOS版PayPal:转账进程栏

{%}

图2-30 2013年左右的PayPal:整体看上去清新许多,原因之一就是去掉了进程栏

如果几个步骤不得不跨屏幕显示,那么你可以不采用过于密集的进程栏,而是采用显示当前步骤是第几步的方法,比如SnipSnap(显示在标题栏中)和Priceline(显示在页脚)。

图2-31 安卓版SnipSnap和Priceline:表明当前步骤是第几步

在本书第1版中,Home Depot的结账步骤被收入反模式案例中。它的进程栏上挤满了超小的文字,且结账体验冗长乏味。但现在这个应用的设计经过了大幅改进,结账页面改成了单一页面。

图2-32 2011年的iOS版Home Depot:过度拥挤的进程栏

安全结账过程的第一步是获取收货地址。当点击“下一步”时,你需要选择送货时间。虽然这时仍然显示收货地址,但处于只读模式,地址旁边放有“编辑”按钮。

选定送货时间后,点击“下一步”显示付款方式表单。完成付款方式表单后,你可以查看总数并核对此前输入的所有信息——但不要离开此页面——然后进入下一步。

{%}

图2-33 2013年的iOS版Home Depot:大幅改进的结账流程

TurboTax SnapTax采用了类似的设计。但是每一步的详情收起,可点击向下展开,而不是全部显示在同一页上。这个单页设计提供了有价值的导航信息(整个过程有三步,其中有两步还没有完成),同时也使高层级的摘要内容成倍增加。

图2-34 Intuit公司的安卓版和iOS版TurboTax SnapTax:向下展开显示详情

产品配置是一种特殊的多步骤表单,它不只是典型的线性流程,而是需要实现返回-前进的导航。星巴克为了在它的Drink Builder工具中实现这一效果,只使用了“下一步”和“返回”风格的按钮。2

2最新版本的美国区星巴克应用已经去掉了Drink Builder功能。此前用户通过应用定制的咖啡可以截屏保存成图片,并在购买时出示。(译者注)

这个表单用起来还不错,但是如果不打开每一个选项并滚动整个列表,就很难看出定制页上已经设置过的内容有哪些。

一个简单的修正办法是,在底端的“成分”(Nutrition)标签和“信息”(Info)图标附近固定放置一个“概要”(Summary)或“详情”(Details)按钮。Audi Configurator就完完全全是这样设计的,点击“详情”按钮打开显示目前选择的全部参数。

说明

向用户显示他们当前所处的位置和下一步,但不要使用拥挤的进程栏。去掉不必要的输入字段,最小化页面的数量和步骤数量。

图2-35 星巴克的iOS版Drink Builder:“下一步”和“返回”风格的按钮(http://www.youtube.com/watch?v=Bvke0dXD2SM

{%}

图2-36 iOS版Audi Configurator:点击固定的“详情”(Details)按钮显示选定的选项

结账表单

截止到2013年1月,有大约15%的电子商务是在移动设备上进行的,几年内这一数字有望超过25%。然而,即便是从手机端开始的购物体验,大多数人也会选择在桌面端、平板或是零售商那里完成交易或结账。

在许多案例中,这种情况的出现多半要归咎于极为糟糕的结账体验,这在众多商家的原生应用中屡见不鲜。换言之,这是因为许多商家都只让用户在其应用中购物,而要跳转至优化后的移动网站进行结账。

图2-37 iOS版The North Face:每当我要结账时都显示连接超时!呃!为什么要出现连接超时呢?

让你的用户在兴致最高的时候就能购买。不要让差劲的用户体验阻碍你的客户在手机上结账,最好让他们就在购物的应用里结账。下面是一些高转化率的支付流程的设计技巧。

技巧1:同时提供登录、注册和客人用户选项

允许客户在账号信息中保存其个人资料,以便将来快速结账,还应提供客人用户结账的选项。你完全可以在用户完成支付后提示他们去创建账号,这样给人的体验会更舒服。

图2-38 iOS版Expedia:登录之后填写旅客结账表单与付款细节

图2-39 iOS版Target和Walmart:既提供了登录/注册选项,也提供了客人用户结账的选项

技巧2:简化流程

弃用进程栏,把分屏步骤融合进一个结账页(参见“多步骤表单”一节中关于Home Depot这一优秀例子的讨论)。Haute和苹果公司等零售商设计了包含多个区块的单一结账页表单,方便用户逐级深入地点击,直到完成支付。

图2-40 iOS版Haute:单一结账页上有额外的页面,用于添加详细信息

技巧3:提供省时的快捷方式

提供“导入通讯录地址”选项,以便用户能够快速填写收货地址和账单地址。还可以考虑采用“扫描卡片”的功能,为用户省去输入全部信用卡信息的麻烦。

图2-41 iOS版Gilt和RuLaLa:输入地址时可选导入/自动填充

图2-42 iOS版Gilt:由card.io公司提供支持的“扫描卡片”选项

图2-43 iOS版Gilt和安卓版Newegg:其他可选的付款方式,通过PayPal和Google Wallet付款

{%}

图2-44 iOS版Uber集成了Google Wallet,简化了订车流程

技巧4:提供快速结账方式

考虑为注册用户提供一种极度快捷的结账流程。苹果商店提供了一个快速结账(Express Checkout)的选项,让用户可以自行设置。亚马逊则在产品详情页上放置了一键结账按钮。在下面的截图中,有两个移动端的一键结账按钮,都使用了色彩鲜艳的、行为召唤的橙色和形象的一键点击图标。

图2-45 iOS版Uber也提供信用卡扫描功能和使用PayPal付款的选项

图2-46 iOS版苹果商店和亚马逊:快速结账选项

技巧5:忘掉网页端

我们已经能自如地在网页端购物,购物车的隐喻和多步骤支付流程对我们来说已经相当熟悉了,但移动零售还有很大的创新空间。苹果、沃尔玛、Target以及其他零售商都着眼于更多的移动端销售转化,不断地在店内店外尝试新的结账体验。

比如,沃尔玛的Scan & Go功能让店内消费者可以通过扫描商品的方式来将其加入购物车,这避免了在店内排队结账。据沃尔玛称,超过一半的新用户最终都会再次使用该功能。

说明

通过简化支付流程、去除不必要的步骤并提供快捷方式,完成移动端转化设计。观察过去的网页端购物流程,同时充分利用原生移动设备技术。

图2-47 iOS版沃尔玛:Scan & Go功能让你可以扫描选购的商品,省去排队结账的麻烦

图2-48 苹果商店拥有EasyPay自助结账功能

图2-49 沃尔玛加拿大联合美泰(Mattel)设立的虚拟玩具店(http://www.newswire.ca/en/story/1253739/mattel-and-walmart-canada-offer-holiday-shoppers-toys-on-the-go):扫描二维码购买商品

图2-50 Target和CBS Outdoors合作(http://www.cbsoutdoor.com/creative/coolcampaigns/target-holiday-gift-finder.aspx):公交车站成为“数字假日体验”

图2-51 ShopKick用来找优惠的ShopBeacon(http://techcrunch.com/2013/11/20/shopkick-rolls-out-ibeacon-enabled-shopping-alerts-with-shopbeacon-with-macys-as-its-first-trialist/)和用来接收付款的PayPal Beacon(https://www.paypal.com/webapps/mpp/beacon),都使用了基于附近位置的蓝牙技术,个性化并简化了移动购物

计算表单

计算器风格的应用,比如体重跟踪器、税款估算器以及贷款计算器,都需要用户输入。虽然这些表单可以采用自定义控件和布局,但是遵循基本的设计规范以保证表单的易读性依然十分重要。

对齐方式、标签、字体、按钮位置、对比及颜色,这些全部都是影响移动表单易用性的因素。比如,比较一下输入字段和标签设计极为优雅的Valspar Paint Calculator和Behr Paint Calculator两者的易读性。

图2-52 Valspar Paint Calculator的输入字段整齐优雅,比Behr Paint Calculator更易于阅读

最好的计算器应用应该将输入结果用视觉效果呈现出来。TaxCaster使用了测量仪风格的图表,将应缴税款和应退税款可视化。测量仪在数据输入后即时更新。

图2-53 安卓版TaxCaster:输入变化时测量仪随之更新

Zillow和Trulia Real Estate Calculators也提供了输入数据的实时可视化。

说明

计算器表单布局应该使用标准化表单设计。在符合应用使用场景的情况下,增加交互可视化。

图2-54 iOS版Trulia Real Estate Calculators:实时反馈

图2-55 iOS版Zillow Mortgage Calculator:输入数据时显示变化

搜索表单

有些搜索功能需要输入多种条件以生成搜索结果。和其他表单模式一样,搜索表单应该只有最核心的、不可或缺的输入字段,并提供合理的默认值。你完全可以在搜索结果页提供筛选功能,让用户对结果列表进行细化。在这里我只讨论表单本身,关于搜索、排序和筛选模式的更多内容,可参阅第4章。

比较看看American Airlines搜索表单的混乱布局与Kayak的清爽设计。

{%}

图2-56 2013年Windows Phone版American Airlines和Kayak:凌乱与整洁

Zillow在表单页上可直接预览搜索结果的数目,这个设计不错。如果你注册了Zillow账号,可以保存这项搜索,为将来的搜索节省时间和精力。

Hipmunk的搜索表单同样简洁,而且还增加了一个票价提醒功能。票价提醒和保存搜索功能相似,都是通过保存搜索条件进一步提高移动用户的效率;与简单地保存搜索不同的是,当票价变化时,票价提醒功能可实现应用内通知。这是Hipmunk获得成功的关键因素之一,因为这个提醒使用户一次又一次重新打开应用。

图2-57 iOS版Zillow可以在输入表单时实时显示搜索结果的数目

图2-58 iOS版Hipmunk:票价提醒功能为保存搜索功能添加了省钱利器

让我们看看OpenTable 2011年的搜索表单,再对比一下它为iOS 7新设计的表单。早期的设计版本是一个完整的搜索表单,有4到5栏输入字段,还有一个醒目的红色行为召唤按钮。

图2-59 2011年OpenTable的iOS版和安卓版:用户必须输入全部搜索条件

在iOS 7版的设计中,首页是附近的餐厅列表和当天可能订到座位的时间。这是一个隐式搜索(Implicit Search)的例子,我们会在第4章中讨论。现在的搜索表单上只有三个输入字段,其中餐厅名称一项还可开启自动建议功能。

图2-60 iOS 7版OpenTable:隐式搜索自动建议附近可选的餐厅

长表单

一些表单不能只放进一屏之内。在这种情况下,长的滚动页比把表格切分成多页要好得多。设计长表单最棘手的部分在于,应在何处放置执行和退出按钮。

在大多数iOS应用中,表单在模态环境下显示。iOS 7设计指南(https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/Modal.html#//apple_ref/doc/uid/TP40006556-CH64-SW1)中建议,命令按钮放在右上角,退出键(一般叫作返回或取消)放在左上角。

{%}

图2-61 iOS版HauteLook、Square和Lemon Wallet:命令按钮放在右上角

Windows Phone 8设计指南(http://msdn.microsoft.com/library/windows/apps/ff431806(v=vs.105).aspx)中建议,命令按钮应该放置于应用栏(固定显示在页面底端)上。

图2-62 Windows Phone版OLX和Innerfence:命令按钮放在应用栏上

然而,安卓指南的建议(http://developer.android.com/design/patterns/actionbar.html)则完全不同。自从Jelly Bean(安卓4)发布以来,安卓的设计指南就建议,命令按钮应该放在操作栏(固定在屏幕顶端)上。

说明

搜索表单要短而简单,搜索条件尽量控制在一页内或更少。提供合理的默认值和保存搜索的选项,以便将来使用。

遗憾的是,我在2013年年末撰写本书的时候,这条安卓设计指南在测试中表现不佳。在我们对众多客户做的用户测试中,大部分用户找不到或者根本没看见操作栏上的按钮。随着越来越多的用户升级他们的设备和操作系统并对新的导航规则越来越熟悉,这一可用性问题可能会逐渐减少。与此同时,一些安卓应用还是会在底端位置固定显示命令按钮。

说明

不要特意把表单分割成多页步骤,单页滚屏更可取。要果断放弃任何没有必要的输入字段。按钮位置的设定要遵守操作系统规范。

图2-63 安卓版DigiCal和Vine:模态表单和简洁的分享表单示例,它们分别将命令按钮放在了操作栏上

图2-64 安卓版Ancestry和Notif:命令按钮固定在底端

目录