Apple Store Checkout表单重构

栏目更新

栏目热门

当前位置：首页 > 热点资讯

Apple Store Checkout表单重构

时间：2010-07-08 03:19:26 来源：个人网站作者：Heidi

信用卡号码遵循一致的结构。美国运通卡号要么以34开始，要么以37开始。万事开头号码在51-55之间。 Visa卡以数字4开始。依此类推。这些信息可用以推断用户使用的是什么类型的信用卡——只要看看他的信用卡号码就可以了。

在重新设计的结算页面，苹果正是如此做的。当有人填写了一个信用卡号码后，对应的信用卡类型也会高亮选中了。这消除了要求用户选择信用卡类型的需要。——减少一个需要用户分析、思考和响应的问题。

关联输入（selection dependent inputs）

关联输入（selection dependent inputs）要求人们在回答了一个问题，基于答案去回答后续的问题——通常不用去另外一个网页上。新的苹果结算表单的付款版块使用了“selection dependent input”方式，在用户选择了付款方式后（Heidi注：用户先选择付款方式的标签），然后需要回答后续的问题。水平排列的付款方式tabs允许用户查看每种付款方式后关联的后续问题。

Heidi注：虽然我们将label和tab都翻译成标签，但是实际上在这篇文章里，两种方式截然不同。需要加以区分：

虽然大多数用户已经对导航上使用tabs的方式很熟悉了，但是他们填写表单的方式可能会使得这个方法不那么有效。很多用户是至上而下完成一个表单，所以可能会忽视掉水平的选项。同时，这里也缺少一个明确的声明，这些水平的tabs是否是相互排斥关系的。我需要同时提交三个tab下的信息还是仅仅提交当前的tab下的信息呢？

Heidi注：其实，这个问题确实带来了迷惑。Tab与radio button相比，tab没有明显的“选择”的意思，而更加像一个导航。在这种情况下，或许使用radio button或者drop-down menu会更加好一些。

然而，在为我的书《web form design》所做网站表单设计的水平tab方式测试中发现，参与者都没有出现任何错误。他们都能够相当快完成任务，并且对此设计提供了不错的满意度评分。看来，苹果是选择了一种最适合的界面设计。

首要操作

正如我们看到的，apple先前的结算表单设计有几个不同的形状和颜色的“召唤行动”的操作按钮。新的设计非常明显地减少了次要操作的视觉重量，将所有的焦点都放到了首要操作上：continue。

错误信息

错误提示：苹果的新的结算表单还采用了在上下文中的错误提示信息。现在，错误被显示在造成错误的输入区域旁并且提供了清晰的解决建议。

然而，将顶部的错误信息提示去除也就意味着会遭遇到一个状态：出现的错误仅仅通过一个浅黄色的背景颜色来呈现。当我修改我的信用卡信息的时候遇到了此问题。信用卡号以及安全码填错了，但是除了浅黄背景外，没有任何提示告诉我。当你考虑到苹果的浏览器（safari）和其他的浏览器，都会使用一个相似的黄色背景来提示那些帮你自动填充好的输入区域时，这个问题尤其让人烦恼。

事实上，在apple之前的结算表单设计中，一个浅黄色的背景就是表达了那些自动完成的输入区域的。而在新的结算表单里，它却用来表达一个错误。为什么apple不使用一个红色（表达错误的标准颜色）呢？哈哈，这也许是保留着为free shipping使用的！

Heidi注：其实free shipping可以用绿色的。那样红色就可以使用到错误信息上了嘛。

3/3 |‹ ‹‹ 1 2 3

来顶一下

返回首页

发表评论		查看所有条评论

用户名:		密码:
验证码:		匿名发表

推荐资讯

栏目更新

栏目热门

相关文章

当前位置：首页 > 热点资讯

Apple Store Checkout表单重构