[其它课程]Web表单设计.ppt

* 完了！! By hx Page ? * ————点石成金的艺术 Web表单设计 Luke Wroblewski： eBay的平台团队担任首席用户界面设计师,领导新消费产品、内部工具和流程的战略设计. 发行了名为FunctioningcForm的Web体验设计在线刊物。 交互设计协会(InteractioncDesigncAssociation,IDA)董事会的创始者之一。 现在在Yahoo！担任产品理念与设计高级主管。 Q：Web表单设计为什么重要？ A：表单推动网上商业、社区和生产力蓬勃发展。如果您从事网上零售，那么目标便是卖出东西。但支付表单就“横”在产品和顾客之间。如果您要开发社交软件，那么目标便是发展社区。但表单会阻碍您和社区成员之间。如果要建立基于生产力的网站应用，表单能促成有利于内容创建和管理的关键交互。 价值3亿美金的按钮 当用户把想购买的产品放进购物车后，点击checkout按钮，登录表单出现了，而不是他们想要的确认购买按钮。这阻碍了用户购物的进程。 设计师解决的方法非常简单：他们干掉了注册按钮，取而代之的是一个继续按钮，还有一小段话“在我们网站上您可以直接购物而不需要专门建立一个帐户，点击继续去支付。如果您希望以后更方便的购物，也可以在结账时顺便创建一个帐户”。 结果：购买商品的顾客数量上升了45%。在第一个月就创造了1千5百万的额外购买额，在第一年整个网站获得了额外3亿美金的交易额。 设计模式 考虑情况 说明填写 完成路径 确保一 致沟通 尽量减 少痛苦 理解待解决问题的设计因素 设计因素指提供框架以用于 找到适当解决办法的原则和 模式 表单设计的原则 综合眼动轨迹图 目录 表单上应该出现些什么？ 怎样出现比较合理？ 动作怎样安排？ 帮助、错误、及时验证何时出现？ 这个问题一定要问吗？ 用户真正关心的是问题内容和为何要问这些问题。 例：一个冒号的放置等，用户是不会关注的。 例：一个网页莫名其妙要你填写住址，会很奇怪。而一个电子商务网站在你购买东西时不要求填写住址也很奇怪。 所以就有了问问题的四大策略 1、保留：需要的问题留下 2、删除：有些问题不必要 3、延迟：有些问题不是马上要问，一直到问题不会让人感觉多余 4、解释：有些问题用户可能不想回答，而问题却对公司很有价值 综合四大策略后，要达到用户需求和商业需求的相对平衡 作者观点：先考虑人 更平易近人？ 问题流畅吗？ 为了保证对话流畅，可以将问题分成有意义的组 内容很长，就将内容组分布到多个页面 当然在一定情况下问题是有一定顺序的，那么内容长一些可能更加流畅，让用户明白。 也可能一些调查性问题可以留在表单完成以后出现 什么时候使用对比？ 使用少的视觉对比 有助于用户保持焦点 在表单内容用于 突出某个问题 时，使用对比 怎样出现比较合理？ --标签 标签是表单的基本要素，负责提出问题，所以标签的布局很重要。 首先，标签的对齐，分为三种： 顶对齐标签：有利于减少表单填写的时间 右对齐标签：减少垂直屏幕空间 左对齐标签：有助于用户了解输入框和标签的正确联系 现在见得多的一种也有输入框内的标签，比较适用于只有一个问题或者几个输入框或者问题非常熟悉的表单 混合对齐 怎样出现比较合理？ --输入框 首先了解输入框的类型： 文本框、单选框、下拉菜单、列表框、复选框、按钮 输入框的长度：定长和适长 必填项：星号靠左、靠右。或者作不必须填写项 怎样出现比较合理？ --输入框 输入框无疑是整个表单的核心。 最终目的是简化和方便用户输入。 动作怎样安排？ 最常见的动作有提交、保存、下一步、重置、取消等。 而动作根据功能分为了主动作和次动作 例：提交、保存、下一步都是完成了表单 例：重置、取消则是与目标相悖的 过多的次动作会导致出错率上升 这时候就可以用对比色如红绿来标示 下面有一个书上的实验：评估主动作和次动作的最佳表现形式 B方案 主次同样突出 而AC方案满意度都高于B C方案 使用颜色区分 E方案 最差 帮助、错误等消息 帮助： 自动及时帮助 用户激活的及时帮助 用户激活的区域帮助:弹出新窗口 错误： 采用对比色 头部显示错误及解释 突出错误输入框 及时验证： 确认回答问题合适，建议有效回答 成功: 恭喜信息 帮助信息过多 忽略了三段指示文字 成功的注册表单 错误在哪里？ 才用双重视觉强调 原则： 错误消息不能被忽视或者置之不理 ——必须要解决 成功消息不能阻碍人们的进程 ——而是鼓励人们采取更多行动 Page ? *