logo标签列表

GUI设计技术以增强用户体验

user-interfaceusability
45

你知道或使用哪些技术来创建用户友好的GUI？

我可以列举以下几种我认为特别有用的技术：

  • 非阻塞通知（浮动对话框，如Firefox3中的弹出消息或在托盘区域的Vista弹出消息）
  • 没有“保存”按钮
    以MS OneNote为例。
    IM客户端可以自动保存聊天记录
  • 集成搜索
    不仅可以通过帮助文件进行搜索，还可以使UI元素可搜索。
    Vista朝着这样的GUI迈出了一大步。
    Microsoft Office中的Scout插件是一个非常好的想法。
  • 面向上下文的UI（MS Office 2007中的Ribbon工具栏）

你是否在你的软件中实现了类似于上述技术？

编辑：
正如Ryan P所提到的，创建可用的应用程序的最佳方法之一是将自己置于用户的位置。我完全同意，但我想在这个问题中看到的是具体的技术（如我上面提到的那些），而不是一般的建议。

21个回答
32
如果您要给用户提出问题，请不要让它成为一个是/否的问题。花时间制作一个新的表单，并将动词作为像Mac一样的选择项。
例如：
 Would you like to save?    
     Yes        No

应该是：

  Would you like to save?
    Save        Don't Save

这里有一个更加详细的解释，点此链接。

我认为有一个很好的库可以用，每次都创建新的表单会很糟糕。 - dr. evil
更好的是，完全避免对话框。直接保存文档而不询问。与其害怕有风险，不如留下收益。 - Bryan Oakley
1
我认为在保存的例子中是可以不用对话框的，但是使用对话框也有很好的理由。 - dr. evil
我认为对话框会打断用户的工作/注意力。对话框应该_仅_用于关键情况（如致命错误或绝对必要的信息）。而且这种情况很少发生！通常可以找到其他方法来通知用户或询问他某些事情，而不会打断他。就像这个网站有上部滚动条一样。 - Taco de Wolff
26
1
如果你在考虑可用性，那么你一定要读《不要让我思考》。+1 - Ryan Guest
16

首要原则：威尔弗雷德·詹姆斯·汉森

  • 了解用户
  • 最小化记忆负担
  • 优化操作
  • 为错误设计

后续扩展：西奥·曼德尔博士

让用户掌控

  • 审慎使用模式（非模态）
  • 允许用户使用键盘或鼠标（灵活）
  • 允许用户改变焦点（可中断）
  • 显示描述性信息和文本（有益）
  • 提供即时和可逆的操作和反馈（宽容）
  • 提供有意义的路径和出口（可导航）
  • 适应不同技能水平的用户（易接近）
  • 使用户界面透明（促进）
  • 允许用户自定义界面（偏好）
  • 允许用户直接操作界面对象（交互）

减轻用户的记忆负担

  • 缓解短期记忆负担（记住）
  • 依靠识别而不是回忆（识别）
  • 提供视觉提示（通知）
  • 提供默认值、撤销和重做（宽容）
  • 提供接口快捷方式（频率）
  • 推广对象-操作语法（直观）
  • 使用现实世界的隐喻（转移）
  • 使用渐进式披露（上下文）
  • 提升视觉清晰度 (组织)

    • 使界面一致

    • 保持用户任务的上下文一致性 (连续性)
    • 在产品内外保持一致性 (体验)
    • 保持交互结果的一致性 (期望)
    • 提供美学吸引力和完整性 (态度)
    • 鼓励探索 (可预测)
    11
    为了补充你的列表，我会把可探索性放在我的最高优先级之一。基本上，我希望用户尝试功能时感到安全。他们不应该因为担心自己的操作可能是不可逆转的而退缩使用某些功能。通常情况下，这是通过撤销/重做命令来实现的，但其他选项无疑也可用，例如自动备份。
    此外，对于更加过程化（而不是数据输入）的应用程序，我会考虑实现一个界面，更好地引导用户。微软的归纳用户界面指南可以在这里提供帮助，尽管你需要非常小心，以免过度，因为你可能会让用户变得太慢。
    最后，与包含文本的任何内容一样，使用户界面尽可能易于扫描。例如，如果你有标题，在其中出现命令/选项，请考虑将动作词放在开头，而不是问句。Maudite所说的点也是可扫描性的一个很好的例子，因为“不保存”按钮文本不依赖于前面段落的上下文。
    +1 可探索的用户界面是非常难创建的，但对最终用户来说非常好。 - aku
    AKA UI设计原则之容忍性。 - Vlad Gudim
    6
    一个很有用的技巧，我从来没有看到任何人使用它，就是为禁用的UI控件添加工具提示，解释为什么该控件被禁用。因此，如果有一个列表框被禁用了，而且不清楚为什么被禁用，我想悬停在上面并告诉我为什么它被禁用。我希望看到类似于“它被禁用是因为屏幕上有两个文本框为空，或者因为我在某个字段中没有输入足够的字符，或者因为我没有执行某个操作。”的内容。
    我遇到过很多这样的情况，非常令人沮丧。有时候我最终会在软件的论坛上发布问题，询问为什么控件变灰了，而工具提示可以在一秒钟内帮助我！大多数这些软件都有无用的帮助文件，对于这些情况没有帮助。
    尝试假装您对软件一无所知，并尝试使用它。然而，这并不实际，因为您已经对应用程序有一定的心态。因此，请观察其他开发人员或朋友使用该应用程序，并注意痛点并寻求反馈。
    你真的从未见过吗？我曾经在桌面应用程序中经常这样做。特别是“保存”按钮，如果处于无效状态，则会被禁用，并且工具提示将告诉您为什么它被禁用。 - Stephen P
    4
    一本帮助您思考设计的经典书籍是唐纳德·诺曼的《日常物品的设计》。他给了很多优秀的实例。例如，如果您设计一扇门得当，就不需要添加“推”和“拉”的标签。如果您想让他们拉，就要加一个把手；如果您想让他们推，就要放一个平板。没有错误的方法，他们甚至不必思考。
    这是一个好目标：使事物显而易见。如此明显，以至于用户从未想到做错事情。如果灶台上有四个旋钮，每个旋钮旁边都有一个眼睛，那么很显然每个旋钮都控制旁边的眼睛。如果旋钮在一条直线上，全部在左侧，你必须给它们贴标签，用户必须停下来思考。糟糕的设计。 不要让他们思考。 另一个原则：如果用户犯了错误，应该非常容易撤销。谷歌的图像软件Picasa是一个很好的例子。您可以随意裁剪、重新调色和修饰照片，如果您改变主意——即使是一个月后——您也可以撤销更改。即使您明确地保存了更改，Picasa也会备份。这让用户可以自由玩耍和探索，因为您不会伤害任何东西。
    3
    我发现UI Patterns对于这种事情是一个有用的参考。它的排列方式很像经典的GoF设计模式书籍，每个模式描述都包含：
    • 模式解决的问题
    • 模式在实际应用中的示例
    • 模式的使用案例示例
    • 实现模式的解决方案
    • 解决方案的原理
    2
    如果您要实现搜索功能，请将其制作为类似于Locate32和Google Suggest现在所做的实时搜索。现在我已经习惯了在搜索框中不按“Enter”键。
    2

    有一件显而易见的事情：如果按钮、菜单、链接等在不同的屏幕上执行相同类型的操作，请不要改变它们的位置、颜色、字体大小等任何细节。

    2

    良好的反馈非常重要。即使是简单的事情，如明确指出可点击和不可点击的内容，有时也会被忽视或太过微妙。在后台可能发生某些事情时提供反馈是很好的。在Gmail中，出现在顶部的状态栏让您知道是否正在发送或加载，这非常好，但更好的是它让您知道已成功发送或仍在加载。

    "黄色渐变"技术是RoR群体中另一种流行的技术，可以实现类似的效果。您永远不希望用户问出以下问题：“刚刚发生了什么？”或“我做这个会发生什么？”。

    最近越来越流行的另一个技巧是即时编辑。与其使用单独的“编辑”屏幕（或跳过查看并仅使用编辑屏幕）来查看某些数据，通常更加用户友好的方法是拥有一个精美布局的数据视图，并单击以编辑其中的部分。当阅读数据比编辑数据更频繁时，这种技术确实只适用于特定情况，并且不适用于严格的数据输入。

    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文，
    原文链接