以MS OneNote为例。
IM客户端可以自动保存对话"/>

关于可用性:GUI设计技术可增强用户体验

关于可用性:GUI设计技术可增强用户体验

GUI design techniques to enhance user experience

您知道/使用什么技术来创建用户友好的GUI?

我可以列举一些我认为特别有用的技术:

  • 非阻塞通知(浮动对话框,如Firefox3或任务栏区域中的Vista弹出消息)
  • 缺少"保存"按钮
    以MS OneNote为例。
    IM客户端可以自动保存对话历史记录
  • 综合搜索
    不仅搜索帮助文件,而且使UI元素可搜索。
    Vista朝着这种GUI迈出了很好的一步。
    Scout插件Microsoft Office是一个非常不错的主意。
  • 面向上下文的UI(MS Office 2007中的色带栏)

您是否在软件中实现了所列技术?

编辑:
正如Ryan P提到的那样,创建可用应用程序的最佳方法之一就是将自己放在用户的位置。我完全同意,但是我希望在本主题中看到的是特定技术(如我上面提到的那些技术),而不是一般性建议。


如果确实向用户提出了一个问题,请不要将其设为是/否。花一些时间制作新的形式,并将动词作为选择,就像在mac中一样。

例如:

1
2
 Would you like to save?    
     Yes        No

应该:

1
2
  Would you like to save?
    Save        Don't Save

这里有更详细的解释。


看看史蒂夫·克鲁格(Steve Krug)的精彩著作《别让我思考》。
它是基于Web的,但是许多概念都可以应用于从搅拌器到汽车仪表盘的所有内容。
涵盖的主题:

  • 用户模式
  • 扫描设计
  • 明智地使用副本
  • 导航设计
  • 主页布局
  • 可用性测试

他还拥有一个名为"高级常识"的博客

以及一些与UI相关的随机链接:
-程序员的用户界面设计,作者:Joel Spolsky
-您应该意识到的10个可用性噩梦


First Principles: Wilfred James Hansen

  • Know the User
  • Minimize Memorization
  • Optimize Operations
  • Engineer for Errors

Subsequent Expansions: Dr. Theo Mandel

Place Users in Control

  • Use Modes Judiciously (modeless)
  • Allow Users to use either the Keyboard or Mouse (flexible)
  • Allow Users to Change Focus (interruptible)
  • Display Descriptive Messages and Text (helpful)
  • Provide Immediate and Reversible Actions, and Feedback (forgiving)
  • Provide meaningful Paths and Exits (navigable)
  • Accommodate Users with Different Skill Levels (accessible)
  • Make the User Interface Transparent (facilitative)
  • Allow Users to Customize the Interface (preferences)
  • Allow Users to Directly Manipulate Interface Objects (interactive)

Reduce Users' Memory Load

  • Relieve Short-term Memory (remember)
  • Rely on Recognition, not Recall (recognition)
  • Provide Visual Cues (inform)
  • Provide Defaults, Undo, and Redo (forgiving)
  • Provide Interface Shortcuts (frequency)
  • Promote an Object-action Syntax (intuitive)
  • Use Real-world Metaphors (transfer)
  • User Progressive Disclosure (context)
  • Promote Visual Clarity (organize)

Make the Interface Consistent

  • Sustain the Context of Users’ Tasks (continuity)
  • Maintain Consistency within and across Products (experience)
  • Keep Interaction Results the Same (expectations)
  • Provide Aesthetic Appeal and Integrity (attitude)
  • Encourage Exploration (predictable)

为了添加到您的列表中,aku,我将可探索性作为我的最高优先事项之一。基本上,我希望用户可以放心试用这些功能。他们绝不应该因为害怕自己的行为不可逆转而放弃使用某种东西。最常见的是,这是使用撤消/重做命令实现的,但是其他选项无疑是可用的,例如自动备份。

另外,对于面向过程的应用程序(而不是数据输入应用程序),我会考虑实现一个界面,以更多地指导用户。 Microsoft的归纳用户界面指南可以在此提供帮助,尽管您需要非常小心不要过度使用它,因为您很容易使用户的速度降低太多。

最后,与任何包含文本的内容一样,使用户界面尽可能可扫描。例如,如果您有显示命令/选项的标题,请考虑将操作词放在开头,而不是问题词。 Maudite提出的观点也是可扫描性的一个很好的例子,因为"不保存"按钮的文本不依赖于上一段的上下文。


我从未见过任何人使用的有用技术是为禁用的UI控件添加工具提示,以解释为什么禁用该控件。因此,如果有一个被禁用的列表框,但不清楚为什么被禁用,我想将鼠标悬停在它上面,并告诉我为什么将其禁用。我想看到类似"由于屏幕上的两个文本框为空白,或者因为我在某些字段中输入的字符不足或未执行特定操作而被禁用的信息"。

我陷入很多这样的情况,这令人沮丧。有时,我最终在软件论坛上发帖,询问为什么工具提示可以在一秒钟内对我有所帮助时,控件为灰色?这些软件大多数都具有帮助文件,这些文件在这种情况下是无用的。

尝试假装对软件一无所知,然后尝试使用它。但是,这不切实际,因为您已经对应用程序有了一定的想法。因此,请观察开发人员或朋友使用该应用程序,并找出痛点并寻求反馈。


唐纳德·诺曼(Donald Norman)撰写的《日常事物的设计》是帮助您思考设计的经典书籍之一。他列举了许多真实的例子。例如,如果您将门设计得井井有条,则永远不必添加标有"推"和"拉"的标签。如果要拉动它们,请握住手柄。如果要它们推动,请放一块平板。没有办法做错事,他们甚至不必考虑。

这是一个好目标:让事情变得显而易见。显而易见,用户永远不会做错事。如果炉子上有四个旋钮,每个旋钮都靠近一只眼睛,那么很明显,每个旋钮都控制着旁边的一只眼睛。如果旋钮在一条直线上(全部在左侧),则必须贴上标签,而用户必须停下来思考。设计不良。不要让他们思考。

另一个原则:如果用户确实犯了一个错误,撤消应该非常容易。谷歌的图像软件Picasa是一个很好的例子。您可以随意裁剪,重新着色并修饰照片,如果您改变主意-即使一个月后-您都可以撤消更改。即使您明确保存更改,Picasa也会进行备份。这将释放用户的玩耍和探索空间,因为您不会受到任何伤害。


我发现UI模式是此类事情的有用参考。它的排列方式非常类似于经典的GoF设计模式书,每个模式说明都包含:

  • 模式解决的问题
  • 实际模式的一个例子
  • 模式的样本用例
  • 实现模式的解决方案
  • 解决方案的原理

好吧,一件显而易见的事情是:如果屏幕,按钮,菜单,链接等在进行相同类型的操作,则不要改变它们的位置,颜色,字体大小等(即使略有改变)。


如果您执行搜索,请像Locate32和Google建议现在一样进行实时搜索。我很习惯现在不按搜索框上的" Enter"。


真正好的反馈非常重要。即使是简单的事情(例如使其变得显而易见),也可以忽略或过于微妙。当后台可能发生某些事情时,反馈是很棒的。在gmail中,最好在顶部显示一个状态功能区,让您知道某件商品正在发送或正在加载,但最好还是让您知道某件商品已成功发送或仍在加载。

"黄色淡入淡出"技术是在RoR人群中流行的另一种实现类似功能的技术。您永远不希望用户问"刚刚发生了什么?"这个问题。或"当我这样做时会发生什么?"。

我最近经常使用的另一个技巧变得很流行,那就是就地编辑。与其使用单独的"编辑"屏幕来查看某些数据(或者跳过该视图而仅具有编辑屏幕),通常是更加用户友好的是,您可以很好地布局一些数据的视图,然后单击以进行编辑部分。实际上,该技术仅适用于读取数据比编辑频繁发生的情况,不适用于严重的数据输入。


这是一个很棒的DotNetRocks播客集,Mark Miller讨论了如何创建良好的UI。即使该节目的标题是.NET摇滚,本集也讨论了有关如何创建UI以提高程序用户的生产力的一般经验法则。

这是一集摘录

Good user interface design can be done by sticking to some good rules and avoiding common mistakes. You don't need to be a latte-sippin tattoo-wearin macbook-carrying designer to create user interfaces that work.


在决定用户使用软件时将执行哪些单独的任务之前,请先考虑用户的最终目标。关于脸书在这类事情上进行了精彩的讨论,尽管很长很有趣而且很有见地。有趣的是,他们有多少有关改善软件设计的建议似乎在Google文档中使用了...

另一方面,请保持用户界面尽可能简单和整洁。


我喜欢遵循以下3条准则:

  • 标准-遵循已知的标准/模式,重复使用您所尊重的所有产品的想法
  • 简单-使您的解决方案简单易更改(如果需要)
  • 优雅-少用功多

  • 如果您正在使用企业软件,则许多用户将使用低分辨率的小型显示器。或者,如果它们很旧,它们将具有较低的分辨率,因此它们可以看到巨大的按钮(我在24英寸的显示器上看到了800x600)。我有一个较旧的15英寸的显示器(分辨率为800 x 600),因此我可以不时地在不到空闲状态下看到程序的外观。我知道企业用户几乎必须接受他们所提供的内容,但是如果您设计的winform不适合800x600屏幕,那么它就无济于事。


    Sung Meister提到了Mark Miller。您可以在Developer Express博客上找到有关出色UI的他的博客文章。这是他出色的UI演示科学的截屏视频:第1部分和第2部分。 (都需要Veoh播放器)。

    您还可以在dnrTV上找到他:出色的用户体验科学:第1部分和第2部分。

    这是Google关于Jen Fitzpatrick的用户体验的技术讲座。

    干杯


    我发现的最佳技术是将自己放在用户的鞋子上。您希望从GUI中看到什么并将其放在最前面。这也使您能够确定优先级,因为首先应该完成这些事情,然后再从那里开始工作。

    为此,我尝试找到"有用的层",并从层中增加/减少,直到看起来干净为止。基本上,要找到这些层,我会列出GUI需要具备的所有功能,其应具有的所有功能以及要具有的所有功能。然后,我将它们分组,以便每件事物都具有逻辑顺序,并且分组成为"层"。然后,从各层中添加最重要的功能(或用于日常操作的功能),这将成为最突出的部分,然后将这些功能纳入这些功能中。

    最困难的事情之一是导航,因为您有足够的空间来使用它,如何使它变得有用,而这正是图层真正起作用的地方。它使您很容易看到如何布局菜单,其他部分如何交互,可以隐藏哪些部分等。

    我发现执行此操作的最简单方法是,首先查看用户的日常状况和工作方式,这将使他们穿上鞋子更加容易(甚至更好地是几天工作) 。然后进行一些演示,即使它们是Paper Prototypes,也要放在用户面前(Carolyn Snyder写了一本关于此过程的书叫做Paper Prototyping)。然后开始构建它,并将其在经常构建时展示在用户面前。

    我还将推荐由O'Reilly出版的Jenifer Tidwell撰写的《 Designing Interfaces》一书。


    使用下拉菜单时,默认下拉菜单高度通常过低(例如,对于Winforms,默认值为8个项目)。

    如果项数少,增加该值将为用户节省点击次数;如果项数很多,增加该值将使用户更容易搜索下拉列表。

    实际上,我不使用所有可用空间的意义不大!

    现在对我来说这是如此明显,但是例如,似乎VisualStudio设计人员都还没有弄清楚(顺便说一句,如果您手动增加Intellisense的高度,它将保持这种状态,但这是题外话:)


    我将提供我个人的最爱之一:不惜一切代价避免使用对话框。一个真正好的用户,我几乎永远不需要弹出一个对话框。仅将它们添加到您的程序中,这是真正的不得已的选择。

    有关更多信息,您可能想要查看针对开发人员的易于消化的ui技巧。


    编码恐怖博客定期提供出色的想法。只是一些例子:

    • 探索性和增量学习
    • 自我记录的用户界面
    • 增量搜索功能/智能键盘访问
    • 面向任务的设计(功能区代替菜单和工具栏)
    • 提供撤消而不是持续确认

    另一个方面:使用可缩放图标来解决多个用户屏幕分辨率的问题,而无需维护不同的分辨率位图。


    如果您的UI涉及数据输入或操作(通常是业务应用程序),那么我建议您为用户提供尽可能多地对数据项集进行操作的能力。还应尝试设计一种方式,使有经验的用户可以以非常随机的方式与UI交互,而不是顺序方式(加速键,超链接等)。


    您呈现的列表中的项目实际上取决于情况-它们因应用程序而异。有些应用程序需要一个保存按钮,而有些则不需要。有些情况下将需要一个模式对话框,有些则不会。

    设计可用界面的首要原则是:遵循现有的UI约定。没有比使用过的用户界面更混乱的用户了。 Lotus Notes具有创建过的最糟糕的用户界面之一,这几乎完全是因为它们违反了通用的UI约定,并且几乎违反了它们所做的所有事情。

    如果您在质疑如何设计用户界面的某个部分,请考虑一些提供类似功能的标准/知名应用程序,并查看它们是如何实现的。


    圆角!

    (是的在脸颊上的舌头)


    推荐阅读