45

您知道\使用哪些技术来创建用户友好的 GUI?

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

  • 非阻塞通知(浮动对话框,如 Firefox3 或 Vista 托盘区域中的弹出消息)

  • 以MS OneNote 为例,缺少“保存”按钮。
    IM 客户端可以自动保存对话历史记录
  • 集成搜索
    不仅通过帮助文件搜索,而且使 UI 元素可搜索。
    Vista 朝着这样的 GUI 迈出了一大步。
    Scout addin Microsoft Office 是一个非常棒的主意。
  • 面向上下文的 UI(MS Office 2007 中的功能区栏)

你是否在你的软件中实现了类似列出的技术?

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

4

21 回答 21

32

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

例如:

 Would you like to save?    
     Yes        No

应该:

  Would you like to save?
    Save        Don't Save 

这里有更详细的解释

于 2008-09-04T00:18:12.593 回答
26

Check out the great book Don't make me think by Steve Krug.
It's web focused but many of the conepts can apply to anything from blenders to car dashboards.
Topics covered:

  • User patterns
  • Designing for scanning
  • Wise use of copy
  • Navigation design
  • Home page layout
  • Usability testing

He also has a blog called Advanced Common Sense

And some random UI related links:
- User Interface Design for Programmers by Joel Spolsky
- 10 Usability Nightmares You Should Be Aware Of

于 2008-09-04T03:25:15.293 回答
16

第一原则:威尔弗雷德·詹姆斯·汉森

  • 了解用户
  • 尽量减少记忆
  • 优化运营
  • 错误工程师

后续扩展:Theo Mandel 博士

将用户置于控制之中

  • 明智地使用模式(无模式)
  • 允许用户使用键盘或鼠标(灵活)
  • 允许用户改变焦点(可中断)
  • 显示描述性消息和文本(有帮助)
  • 提供即时和可逆的行动和反馈(宽恕)
  • 提供有意义的路径和出口(可导航)
  • 容纳不同技能水平的用户(可访问)
  • 使用户界面透明(促进)
  • 允许用户自定义界面(首选项)
  • 允许用户直接操作界面对象(交互式)

减少用户的内存负载

  • 缓解短期记忆(记住)
  • 依靠 Recognition,而不是 Recall (识别)
  • 提供视觉提示(通知)
  • 提供默认值、撤消和重做(宽恕)
  • 提供界面快捷方式(频率)
  • 提升对象-动作语法(直观)
  • 使用现实世界的隐喻(转移)
  • 用户渐进式披露(上下文)
  • 促进视觉清晰度(组织)

使接口一致

  • 维持用户任务的上下文(连续性)
  • 保持产品内部和产品之间的一致性(经验)
  • 保持交互结果相同(期望)
  • 提供审美吸引力和正直(态度)
  • 鼓励探索(可预测
于 2008-10-08T18:01:58.703 回答
11

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

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

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

于 2008-09-16T17:12:08.340 回答
6

我从未见过有人使用的一种有用技术是为禁用的 UI 控件添加一个工具提示,解释为什么禁用该控件。因此,如果有一个列表框被禁用并且不清楚为什么它被禁用,我想将鼠标悬停在它上面,它会告诉我为什么它被禁用。我想看到类似“它被禁用,因为屏幕上的两个文本框是空白的,或者因为我没有在某些字段中输入足够的字符,或者因为我没有进行某个操作。”。

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

试着假装你对你的软件一无所知并尝试使用它。然而,这是不切实际的,因为您已经对应用程序有一定的想法。因此,请观看其他开发人员或朋友使用该应用程序并注意痛点并寻求反馈。

于 2009-03-11T19:49:52.253 回答
4

帮助您思考设计的经典书籍之一是唐纳德·诺曼(Donald Norman)的“日常事物的设计”。他给出了很好的现实世界的例子。例如,如果您将门设计得很好,则永远不必添加“推”和“拉”的标签。如果你想让它们拉动,就放一个把手;如果你想让他们推,放一个平板。没有办法做错,他们甚至不必考虑。

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

另一个原则:如果用户确实犯了错误,应该很容易撤消。Google 的图像软件 Picasa 就是一个很好的例子。您可以随心所欲地裁剪、重新着色和修饰照片,如果您改变主意 - 即使是一个月后 - 您也可以撤消所做的更改。即使您明确保存更改,Picasa 也会进行备份。这让用户可以自由地玩耍和探索,因为你不会伤害任何东西。

于 2008-09-04T00:59:20.323 回答
3

I've found UI Patterns to be a useful reference for this sort of thing. It's arranged much like the classic GoF Design Patterns book, with each pattern description containing:

  • The problem the pattern solves
  • An example of the pattern in action
  • Sample use cases for the pattern
  • The solution to implement the pattern
  • Rationale for the solution
于 2008-09-04T17:41:17.717 回答
2

如果您实施搜索,请将其设为实时搜索,就像现在Locate32和 Google Suggest 所做的那样。我现在已经习惯了不在搜索框中按“Enter”。

于 2008-09-04T00:43:14.637 回答
2

真正好的反馈非常重要。即使是简单的事情,比如明确什么可以点击和不能点击,也可能被忽视或过于微妙。当后台可能发生某些事情时的反馈很棒。在 gmail 中,顶部出现一个状态功能区非常好,可以让您知道是否正在发送或加载某些内容,但更好的是它可以让您知道某些内容已成功发送或仍在加载中。

“黄色渐变”技术是在完成类似事情的 RoR 人群中流行的另一种技术。你永远不希望用户问这样的问题,“刚刚发生了什么?” 或“当我这样做时会发生什么?”。

另一个最近变得更流行并且我经常使用的技巧是就地编辑。与使用单独的“编辑”屏幕(或跳过视图而具有编辑屏幕)查看某些数据不同,通常对某些数据进行布局良好的视图并单击以进行编辑通常会更加用户友好它的一部分。这种技术实际上只适用于读取数据比编辑更频繁的情况,并且不适用于严重的数据输入。

于 2008-09-04T18:00:05.067 回答
2

好吧,有一点可能很明显:如果屏幕之间的按钮、菜单、链接等执行相同类型的操作,请不要更改(即使是轻微的)位置、颜色、字体大小等。

于 2008-09-04T08:34:29.327 回答
1

If you are doing enterprise software, a lot of users will have small monitors at low resolution. Or if they are old they will have it at a low res so they can see giant buttons ( I have seen an 800x600 on a 24"ish monitor). I have an old 15" monitor at a low resolution (800 x 600) so i can see what the program will look likes in less than idle conditions every now and then. I know that enterprise users pretty much have to accept what they are given but if you design a winform that doesn't fit into an 800x600 screen, it's not helping anyone.

于 2008-09-04T17:30:04.063 回答
1

是一个很棒的 DotNetRocks 播客集,其中 Mark Miller 谈论如何创建好的 UI;尽管节目标题是 .NET Rocks,但这一集讨论了有关如何创建 UI 以提高程序用户生产力的一般经验法则。

这是一个片段摘录

良好的用户界面设计可以通过坚持一些好的规则和避免常见的错误来完成。你不需要成为一个拿铁咖啡纹身的设计师,也可以在 Macbook 上设计出有效的用户界面。

于 2009-03-11T19:54:44.097 回答
1

尝试先考虑用户的最终目标,然后再决定他们在使用您的软件时将执行哪些单独的任务。About Face这本书对这类事情进行了很好的讨论,虽然很长,但非常有趣和有见地。有趣的是,他们有多少关于改进软件设计的建议似乎在谷歌文档中使用......

另一件事是,让您的用户界面尽可能简单和干净。

于 2009-03-11T20:03:14.950 回答
1

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

  1. 标准 - 遵循已知标准/模式,重用您尊重的所有产品的想法
  2. 简单 - 让您的解决方案保持简单且易于更改(如果需要)
  3. 优雅——用更少的东西完成更多的事情
于 2010-05-04T17:18:42.057 回答
0

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

为此,我尝试找到“有用的层”并从层中添加/减去,直到看起来干净为止。基本上为了找到层,我列出了 GUI 需要具有的所有功能、它应该具有的所有功能以及它应该具有的所有功能。然后我将它们分组,以便每件事都有逻辑顺序,并且分组成为“层”。然后,我从这些层中添加最重要的功能(或将用于日常操作的功能),这将成为最突出的部分,然后我将围绕这些项目的功能进行处理。

最困难的事情之一是导航,因为你有很多东西可以使用,你如何使它有用,这就是图层真正有用的地方。它使您可以轻松查看如何布局菜单、其他部分如何交互、可以隐藏哪些部分等。

我发现最简单的方法是首先查看您的用户在日常工作中的功能和方式,这将使他们更容易穿上鞋子(更好的是几天完成他们的工作) . 然后做一些演示,把它们放在用户面前,即使他们是纸质原型(卡罗琳·斯奈德(Carolyn Snyder)有一本关于这个过程的书叫做纸质原型)。然后开始构建它,并将它放在用户面前,因为它是经常构建的。

我还会推荐 O'Reilly 出版的 Jenifer Tidwell 的 Designing Interfaces 一书

于 2008-09-03T23:35:36.797 回答
0

您提供的列表中的项目确实取决于情况 - 它们会因应用程序而异。有些应用程序需要保存按钮,有些则不需要。有些条件需要一个模态对话框,有些则不需要。

我设计可用界面的首要规则:遵循现有的 UI 约定。没有什么比一个不像他们曾经使用过的任何东西那样工作的 UI 更让用户感到困惑的了。Lotus Notes 拥有有史以来最糟糕的用户界面之一,这几乎完全是因为他们所做的几乎所有事情都违反了常见的 UI 约定。

如果您质疑应该如何设计 UI 的某个部分,请考虑一些提供类似功能的标准/知名应用程序,看看它们是如何做到的。

于 2008-09-04T00:01:24.083 回答
0

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

于 2008-09-04T00:05:17.413 回答
0

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

您还可以在 dnrTV:出色用户体验的科学:part1part2上找到他。

这是Jen Fitzpatrick关于用户体验的 google techtalks 。

干杯

于 2009-03-13T13:35:42.840 回答
0

Coding Horror 博客经常提供很棒的想法。只是一些例子:

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

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

于 2009-05-09T21:32:06.417 回答
0

使用下拉菜单时,默认的下拉菜单高度通常太低(例如,winforms 默认为 8 项)。

如果项目数量较少,增加它可以为用户节省点击次数,或者如果项目很多,则可以更轻松地搜索下拉菜单。

事实上,我认为不使用所有可用空间没什么意义!

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

于 2009-04-07T17:23:46.400 回答
0

我将给出我个人的最爱之一:不惜一切代价避免使用对话框。一个真正好的用户界面应该几乎不需要弹出一个对话框。仅将它们添加到您的程序中,作为真正的最后手段。

有关更多信息,您可能需要查看面向开发人员的易于理解的 ui 提示

于 2009-04-07T17:30:22.497 回答