网站设计的​对话框设计指南。

网站设计对话框可用性广泛的指南

相反，你可能阅读，peppering与漂亮的按钮形式，颜色和字体和大量的jQuery插件不会使其可用。事实上，这样做，你会被处理（在非结构化的方式）什么构成形式的可用性三分之一。

在这篇文章中，我们将提供实用的指引，您可以轻松地遵循。这些准则已制作的可用性测试，现场测试，网站跟踪，眼动追踪，网站分析和用户的不满，客户支持人员的实际投诉。

[ 编者按：必须有专业的网页设计师和开发人员：印刷粉碎书籍捆绑，是您日常工作 的实际洞察力获取包马上！

网站设计表单的可用性是很重要的为什么

ISO 9241标准定义为“效益，效率和满意度与指定用户在特定环境中实现特定的目标。”使用网站时，用户有一个特定的目标网站的可用性。如果设计得好，该网站将满足这一目标组织的网站背后的目标对齐。站在用户的目标和组织的目标之间是经常的表单，因为，尽管在人机互动，形式的进步保持互动的主要形式为用户在网络上。事实上，形式往往被认为是完成目标的征途上的最后也是最重要的阶段。

让我们的最后一点澄清讨论的三种形式主要用途 。作为卢克Wroblewski一书中指出Web窗体设计：填补空白，每一个形式存在，主要有三个原因之一：商业，社区或生产力。下表转换成每个用户和业务目标，即在于他们身后的这些原因 ：

使用的形式，卢克Wroblewski基于 Web窗体设计：填补空白。

因此，形式和可用性之间的关系有两个方面：

1. 形式可以使一个网站可用或不可用，因为他们站在用户实现他们的目标的方式;
2. 形式需要使用，以帮助用户实现这一目标。

这个职位将集中在第二点，因为可用的形式，自然会有助于网站的整体可用性，因此第一个方面。

网站设计表单的六个组成部分

网站设计对话框是一个设计师和用户的必要性和的往往是一个痛点。随着时间的推移，用户已经形成了如何形成的外观和行为的期望。他们通常期望网络形式有以下六个部分组成：

1. 这些标签告诉用户相应的输入字段意味着什么。
2. 输入字段输入域让用户提供反馈。他们包括文本字段，密码字段，复选框，单选按钮，滑块和更多。
3. 操作这些链接或按钮，用户按下时，执行动作，如提交表单。
4. 帮助这提供了有关如何填写表格的援助 。
5. 讯息讯息给基于其输入的用户反馈。他们可以是积极的（如指示的形式提交成功）或负（“您所选择的用户名已被使用”）。
6. 验证这些措施，确保由用户提交的数据符合可接受的参数 。

Skype的登记表格包含了所有六个组成部分。

通过三个方面的形式解决可用性

尽管在布局，功能和用途的不同，所有的形式主要有三个方面，加Jarrett和格里加夫尼指出，在他们的著作形式，工作：Web窗体设计可用性：

1. 关系的形式建立的用户和组织之间的关系 。
2. 会话建立的用户和组织之间的对话 。
3. 外观的方式看，他们建立的关系和对话。

对于形式是可用的，所有三个方面需要解决的。让我们看看在各个方面的依次找出如何使一个窗体真正实用的指引，您可以轻松使用 ，。

看点1：关系

“没有人是一座孤岛，”17世纪的英国诗人，讽刺作家，律师和牧师约翰多恩曾说。事实上，人类的关系蓬勃发展，他们风情，友好，专业或业务。一个形式，是指建立或加强的用户和组织之间的关系 。做得不好时，它可以预先防范或终止这种关系。

考虑到这一点，一些原则：

• 关系是在信任基础上的，所以在表单中建立信任是至关重要的 。这是可以通过的标志，图像，颜色，排版和文字。用户会感到放心知道，真诚组织形式。
• 每个关系有一个目标，它的爱情和幸福在一个浪漫的关系或业务关系的金融增益 。问问自己，您的表单的目标是什么 ？
• 相应的其目的形式的名称。该名称将告知用户什么形式，他们为什么要填写它 。
• 就像在一个关系，知道其他人是必不可少的。知道您的用户和总是考虑是否你 问的问题是适当的，如果是这样，无论他们是及时的。这将灌输到窗体的自然流动 。
• 了解你的用户也将帮助您选择适当的语言，并删除多余的文字 。它将帮助你的工艺平衡您的需求和用户的接口。
• 不要问形式的范围之外的问题。在关系中，你会成为不信任的人问问题的地方。同样的事情发生了在线。咨询与利益相关者看到什么样的信息真的是需要。
• 在行为或外观的突然变化将使用户心急火燎 。同样，也不要引进之间的形式或在形式的步骤之间的突然变化。

了解你的用户 。很容易让注册用户登录新用户注册。Debenhams的，使得这种区别勉强明显 。

另一方面，亚马逊，简化注册和新客户的过程 。

看点2：谈话

一个形式进行了交谈。像交谈，它代表了双方之间的双向沟通，在这种情况下，用户和组织。事实上，用户填写的表格，以发起与组织的沟通。

例如，社交网络，用户将填写一份登记表格，告知他们想加入该组织。（不论是自动或手动），邀请他们的请求，该组织将询问用户一些问题，如他们的名字（在标签的形式），姓氏，电子邮件地址等等。接受（或拒绝）后，该公司将结果告知用户，从而完成通信过程。

从这个角度看观看形式产生一些有用的指引：

• 如前所述，一个形式的谈话，而不是审讯。将让用户感到心急火燎，（如果他们不离开），他们将最有可能给你你想听到的答案，而不是真理，在标签中的积极措辞。
• 为逻辑上的标签，反映的自然流动的谈话。例如，不会怪异，问别人他们的名字后，才问了其他一些问题 ？更复杂的问题，应该对的形式结束 。
• 集团的相关信息，如个人的详细信息。从一个问题的流动到下一个会更好类似的谈话 。

   

  雅虎的登记表有效的相关内容通过紫色的标题和细纹的群体。

   

  

  虽然经常接触组相关的内容，它分离的群体太多，这可能会混淆用户。

• 作为一个真正的交谈中，每个标签应在一段时间解决的一个话题，帮助用户在相应的输入字段回应。
• 自然暂停 在一次谈话，表明引进空白，如何组标签和是否打破多个页面的形式 。
• 在任何谈话中，人们得到分神的背景噪音 。因此，消除杂乱，如横幅和不必要的导航，可能会分散用户填写表格 。

   

  Dropbox的提供了一个很好的例子，一份登记表应该是什么样子。空格是有效的，整洁的页面。

看点三：外观

网站设计的外观或用户界面（UI）是一个Web表单的可用性，并有这几个准则。为了简化成六个组成部分的讨论，让我们的小组，他们前面介绍的。

1。标签

• 个别单词与句子，如果一个标签的目的是简单易懂，如要求的名称或电话号码，然后一两句话应该足够了。但是，一个短语或句子可能是必要的，以消除歧义。

  

  亚马逊的登记表格包含完整的句子，而个别的词就足够了。

• 句子的情况下-标题的情况下应该是“名称和 S urname“或”名称和 s urname“？句子的情况是稍微容易一些- ，从而更快-比标题大小写遵循语法 。有一件事是肯定的：从来不使用全部大写，或其他形式会显得不专业，难以进行扫描。

  

  快速扫描Barnes＆Noble的登记表中的标签是多么困难？

• 冒号结束标签的一些桌面应用程序，如Windows操作系统的用户界面的指引建议在形式的标签结束冒号。一些在线表格设计者坚持这一点，主要是因为旧的屏幕阅读器主要依靠结肠符号来表示一个标签 。现代的屏幕阅读器依赖于标记（具体而言，标签标签） 。否则，冒号是一个优先的问题，既不增强也不削弱形式的易用性，只要是一贯的风格 。
• 标签对齐：顶部与左与右共同的意见相反，上面的输入域，并不总是最有用的标签位置。它的理想，如果你希望用户尽可能快地填写表格 。但有时，当你要故意慢下来，让他们通知，聚精会神地阅读的标签 。此外，单个列保持一个长期的形式，使用户向下滚动页面是比它在试图把一切都分解成列的每个对齐方式都有其优点和缺点“倍以上 。“

  

  *时报“取自“窗体中放置标签“利玛窦Penzo 。

  

  形式不应该包含多个列。请注意，是多么容易忽略这里列化妆野人（更不用提有关“必填项”在底部的注意）。

2。输入字段

• 输入字段的类型提供适当的输入字段类型的基础上被要求的是什么。每个输入字段的类型，有其自身的特点，用户习惯于。例如，使用单选按钮如果只有几个选项是允许的，并检查盒，如果允许多种选择。
• 自定义输入字段不发明新类型的输入字段。Flash网站的初期，这是共同的，它似乎卷土重来，我看到了一些奇怪的输入与jQuery实施领域。简单的往往是最有用的。输入字段接近他们改变尽可能的HTML渲染 。

  

  改变接口输入字段会混淆用户。

• 限制输入字段的格式，如果您需要限制用户输入的数据格式，那么至少这样做的方式，不会刺激用户。例如，显示MM / DD / YYYY的一个日期的文本字段旁边，而不是考虑使用下拉领域，或者更好的是，一个日历控件 。
• 明确区分强制性与可选字段不能由用户输入字段留空。该公约是使用一个星号（*）。任何符号都会做，只要一个传说是可见的，以表明这是什么意思（即使它是一个星号） 。

3。动作

• 小学与中学的行动主要操作链接和按钮，在表单中进行必要的“最后”的功能，如“保存”和“提交”。辅助的动作，如“后退”和“取消”，使用户能够收回数据， 他们进入。如果点击错误，二次行动，通常有不良的后果，所以使用的主要行动，只有在可能的情况下 。如果你必须包括二次行动，让他们少的视觉重量比的主要行动。

  

  没有明确小学和中学的行动之间的区别，很容易导致失败。上述动作按钮被发现在一个漫长的形式结束在招生圣 圣路易斯社区学院。试想一下，意外按下“重置表单”按钮。

• 命名约定避免通用词，如“提交”的行动，因为他们给人的印象，是通用的形式本身 。说明性字词和短语，如“加入LinkedIn，”是首选。

  

  虽然可口可乐正确的主要操作按钮提供了更多的重视，它解决通用词“提交”注册与我们“本来更有帮助。

4。帮助

• 陪文本形式你应该从来没有向用户解释如何填写表格。如果它不看起来像一个形式或它太复杂填写，然后重新设计它是你唯一的选择。附带的文字应当使用只在需要的地方，如解释为什么信用卡数据被请求或出生日期将如何使用或链接到“条款和条件。”这样的文本往往被忽略，所以它简洁易于阅读。作为一个经验法则，不超过100字的解释（合并）。
• 用户触发的动态帮助，而不是包括帮助文本旁边的每个输入字段，只在有需要时。你可以显示一个输入字段，用户可以按一下当他们需要帮助该领域的时，旁边的图标。更妙的是，动态显示帮助当用户点击进入一个输入字段输入数据。这种实施工作正变得越来越普遍，是比较容易实现，如jQuery JavaScript库 。

  

  Skype的注册表单包含两个用户触发的帮助（蓝色框是通过点击问号触发）和动态帮助（建议的用户名 ）。

5。消息

• 错误消息，通知用户发生了一个错误，它通常可以防止他们进一步出发的形式 。强调通过颜色（通常是红色），熟悉的意象（如警告标志），突出（通常在窗体的顶部或旁边发生错误的位置），大字体，或结合这些错误消息 。
• 成功的消息通知用户，他们已经达到了一个有意义的形式里程碑 。如果形式是漫长的，一个成功的消息鼓励用户继续填写。这样的错误消息，成功消息应突出。但他们不应该继续阻碍用户。

6。验证

• 只有在需要的地方过多的验证是完全没有坏，因为它会妨碍用户。限制验证，以确认关键点（如用户名），确保逼真的答案（如不允许超过130岁），并暗示可能的数据范围是有限的，但太长的反应 ，包括在一个下拉菜单（如国家代码前缀）。
• 智能默认使用智能默认使用户的形式完成的更快，更准确 。例如，预先选择用户的国家，根据其IP地址 。但谨慎使用，因为用户往往离开，因为它们是预先选定的领域。

  

  Twitter的登记表格，同时使用动态验证的姓名，电子邮件地址，密码和用户名和智能默认（“记住我的登录” ）。

结论 开端

“结论”这个词是不是就在这里。这是你的出发点，采取我写的，它应用到你自己的形式。好消息是，有更说这一切，在这里作出的每一个点上你可以找到丰富的资源。对于初学者来说，下面列出了三本书，启发了我写这篇文章时。正如我刚才在开始时，只调整快捷方式的用户界面不会让你的形式更实用。我还有什么可说呢？现在你的理论。转到你的手脏。

    免费网络营销顾问：我们为您提供免费的网络营销顾问服务，您需要了解关于如何开展网络营销，电子商务，网站设计等的事宜，欢迎随时联系我们。

    seo友好的网站管理系统：除了优质的网站空间，网站管理系统，和网站设计外，我们的网站管理系统更是seo友好的，包括：自定义栏目名，Google Sitemap自动生成，静态页面生成等等，让您的网站。