代码之家  ›  专栏  ›  技术社区  ›  Aillyn

UX:减少杂乱和视觉过载

  •  1
  • Aillyn  · 技术社区  · 15 年前

    Task     |    Assigned to      |   Due Date    |  etc .... |   Actions
    Do this  |    Jane Doe         |   Tomorrow    |  ....     |   Complete
    Do that  |    John Smith       |   Aug 26th    |  ....     |   Review
    

    • 添加折叠列的功能。这将需要更多的工作,我想不出用直观的方式显示折叠或隐藏的列的方法。目标受众需要一些非常直观的东西。

    • 使用鼠标悬停时显示的工具提示。这种方法的明显缺点是你不能一目了然地看到这些信息。

    有人对此有想法吗?

    5 回复  |  直到 15 年前
        1
  •  2
  •   Michael Zuschlag    15 年前

    要真正一目了然地看到所有内容,而不是滚动、单击或悬停,您需要使信息尽可能紧凑和整洁:

    • 把页面模板精简到最低限度。水平空间是最宝贵的一个表,所以没有侧边栏菜单或导航控件。把商标和菜单放在顶部的一个单条上,最好不要超过50像素高。如有必要,使用下拉菜单,至少用于保存不常用的命令。

    • Coded, Compacted, Contrasting Controls

    • 降低图形设计的色调,减少或消除颜色、三维外观、纹理以及深色标题或文本上的任何浅色变化。在必要的时候,使用足够的图形来对信息进行可视化分组。别担心看起来无聊。用户将研究的是信息,而不是平面设计。

    • 使用桌面风格的对象选择动作模型,用户首先选择要执行的任务项,然后从菜单中选择要执行的动作。这样就不需要为表中的每个项重复每个命令控件,从而使表只显示数据。

    • zebra striping 因为这有助于眼睛在紧靠在一起时跟随行)。每个项目只有一行还可以更容易地扫描、排序和比较项目;我假设您有一个表的原因是允许用户对任务项目进行优先级排序。

    • 压缩字段和列本身,使用更紧凑的格式、聚合、缩写、代码(例如,阴影/颜色)或图标来指示值或列标题。这可能需要对用户进行培训,但您也可以使用鼠标悬停来提供有关代码/图标/缩写含义的工具提示。缩写可能更容易识别、学习和记忆,但图形代码和图标更容易扫描,有助于一目了然的评估。编码建议 Putting the G into GUI

    • 允许列标题是多行的,这样就不会强制列宽度超过字段本身的要求(例如,对于Y | N字段)。如有必要,将列标题倾斜放置。它不需要比垂直标题更多的空间,但更容易阅读。

    完成以上所有操作后,您已经尽了最大努力使所有内容都一目了然。如果所有的数据仍然不适合,那么一些较低优先级的信息必须需要交互才能查看。您可以选择:

    • 一个主-细节划分,在表下面有一个类似于低优先级溢出字段窗格的窗体。它们显示表中当前选定项的值。将这个溢出窗格设为选项卡,您可以保存大量字段(但不是一眼就能看到)。将溢出窗格放在扩展器中,这样当用户关闭扩展器时,表将扩展到整个窗口高度,允许不需要查看低优先级字段的用户查看更多表项。溢出窗格中的字段无法在多个项目之间轻松进行比较,因此当您可以将字段划分为用于确定任务优先级的字段(它们在表中)和用于决定如何完成任务的字段(它们在溢出窗格中)时,此解决方案效果最佳。

    • 用于低优先级字段的单独页面或窗口,用户可从表中向下钻取这些字段。一般来说,只有当您需要为这些字段创建一个页面时(例如,直接导航到),或者填充一堆您的客户坚持需要的非常低优先级的字段时,这才是好的。

    这些选项的详细信息和图示 Taking Panes .

    用鼠标悬停显示信息应仅用于简短的补充信息。否则,它往往会妨碍,可能有可访问性问题,用户无法复制或查看它时,还操纵其他东西。

        2
  •  0
  •   sarnold    15 年前

    您可以按截止日期或分配给将单个表拆分为多个表。使用多个表,所有的任务都可以分配给一个人,或者所有的任务都可以在明天(或者“下周某个时候”等)到期。我不知道这对你想要完成的事情是否还有意义。

        3
  •  0
  •   Shlomo    15 年前

    我遇到过这样的问题:通常情况下,解决方案是以下几种方法的结合:

    1) 组合列。显而易见的例子是,如果你有像名字,姓氏,组合成名字这样的列。

    2) 对行进行分组以使列过时。比如:

    Assigned to Jane Smith: (collapse/expand UI widget could go here)
    Task     |       new           |   Due Date    |  etc .... |   Actions
    Do this  |       free          |   Tomorrow    |  ....     |   Complete
    Do that  |       space         |   Aug 26th    |  ....     |   Review
    Assigned to John Doe:
    Task     |       new           |   Due Date    |  etc .... |   Actions
    Do this  |       free          |   Tomorrow    |  ....     |   Complete
    Do that  |       space         |   Aug 26th    |  ....     |   Review
    

    4) 向后推。:) 最简单的方法是向他们展示他们要求的UI,然后是您建议的UI,并同意向另一个最终用户展示它,看看他们更喜欢哪一个。。。

        4
  •  0
  •   Tom    15 年前

    如果您认为这些更改会对用户体验产生负面影响,那么为什么不开发一对带有所建议的添加项的原型并将它们放入用户测试中呢。

    如果用户发现用所有额外的工具很难完成相同的任务,那么你就有理由不做这些更改。

        5
  •  0
  •   PATRY Guillaume    15 年前

    +-+------+--------+--------------+   
    |+| Date | Source | Event        |   
    +-+------+--------+--------------+   
    | | User       : xxxxxxxxx       |   
    | | Stacktrace :                 |   
    | |    jhig kg kg kj jkg jk g    |   
    +-+------+--------+--------------+   
    |-| Date | Source | Event        |   
    +-+------+--------+--------------+   
    |-| Date | Source | Event        |   
    +-+------+--------+--------------+   
    

    另一种可能是将另一个区域放在表下,并显示该区域中所选行的附加信息(即常规/特定区域)。

    这些解决方案的缺点之一是,在这两种情况下,附加数据都不能用作其他列(例如,“sort by”不适用于这些数据)。

    当做
    纪尧姆

    推荐文章