用于分类项目的最优雅的用户界面? [英] Most elegant UI for categorizing items?

问题描述

我有一个用户需要以多种方式分组/分类的项目集合.举个例子，假设它是一个汽车的集合，用户希望通过以下方式对它们进行分类:

I have a collection of items that the user needs to group/categorize in several ways. For the sake of an example, let's say it's a collection of cars and the user wants to categorize them in the following ways:

• 颜色(红色、银色、蓝色、黑色等)
• 车身形状(舱门、轿车、轿跑车、旅行车等)
• 座位(2、4、5、6 等)
• 等

您有没有遇到过一种特别优雅的方式来让用户完全自由地定义他们自己的类别和值?

Have you ever come across a particularly elegant way of doing this that allows the user full freedom to define their own categories and values?

显然，在任何设计中都需要权衡取舍.例如，可学习的设计可能效率不高，反之亦然.或者某些设计可能比其他设计对房地产的要求更高.并且有些会比其他的需要更长的时间来开发.

Obviously, there will many be trade-offs to make in any design. For example, a learnable design might not be efficient, and vice versa. Or some designs may be more demanding of real estate than others. And some will take significantly longer to develop than others.

无论如何，如果您已经看到——或设计了——一个很好的模式，我很想听听它.如果有截图就更好了.

Regardless, if you've seen -- or designed -- a good pattern for this, I'd be interested to hear about it. If you have screenshots, all the better.

尝试澄清:标签确实是一种很好的分类方式，但在我见过的所有实现中，只有一个级别的标签.用户通常无法定义类别/属性以及该类别中项的值.要使用上面的示例和 StackOverflow 的标记，您需要将汽车标记为蓝色"、轿车"、4"等.StackOverflow 不知道一个项目不能同时被标记为轿车"和轿跑车".

Attempt at clarification: tags are indeed a great way of categorizing things, but in all implmentations I've seen, there's only ever one level of tagging. The user doesn't generally get to define a category/property and the item's value in that category. To use the example above and StackOverflow's tagging, you'd tag a car as "blue", "sedan", "4", and so on. StackOverflow would have no inherent knowledge that an item couldn't be tagged as both "sedan" and "coupe".

我想的界面需要知道那种东西，所以用户定义的属性建议更符合我的想法.我只是想找到一个具体的例子来说明如何优雅地实现这种系统(在桌面应用程序中，如果这有所作为).

The interface I'm thinking of would need to know that kind of thing, so the user-defined attributes suggestion is more along the lines of what I'm thinking. I'm just keen to find a concrete example of how that kind of system could be elegantly implemented (in a desktop app, if that makes a difference).

这样更清楚吗?如果没有，请发表评论，我会再次尝试澄清.:)

Is that any clearer? If not, leave a comment and I'll try to clarify again. :)

推荐答案

听起来您有两个任务: 任务 1 分类对象，对于一系列对象，用户为多个对象中的每一个分配一个类别(值)维度(属性).任务 2:创建和修改维度和类别.

It sounds like you have two tasks: Task 1 Categorize Objects, where for a series of objects, the user assigns each a category (value) on each of multiple dimensions (attributes). Task 2: Create and Modify Dimension and Categories.

在数据建模人员、面向对象的程序员和数据库设计人员之外，维度和类别的概念是一个很难掌握的概念.您应该为不了解类别和维度之间区别的用户做好准备.然而，用户通常会理解表格，其中每一列是一个维度(包括几个类别)，每一行是一个对象.尽可能多地使用表格.

Outside of data modelers, object-oriented programmers, and database designers, the idea of dimensions and categories is a very hard concept to grasp. You should be prepared for users not understanding the difference between categories and dimensions. However, users generally will understand tables, where each column is a dimension (that comprises several categories) and each row is an object. As much as possible, work with tables.

第一个关键问题是通过用户研究弄清楚任务 1 和任务 2 集成或分离的程度.

The first key question is to figure out through user research is the degree Task 1 and 2 are integrated or separate.

如果任务是集成的，用户经常不假思索地从一个任务流畅地切换到另一个任务，那么一种 UI 设计是有一个按维度排列的对象表，但提供一个空白列(或插入"按钮) 以允许用户添加维度.列标题具有用户可以编辑的维度名称.标题下方是一个空间，列出了该维度的类别.每个类别名称都是可编辑的，并且有一个空行(或插入"按钮)用于添加新类别.下面是要分类的对象，每个对象在维度的每一列中都有一个下拉列表.

If the tasks are integrated, with users often switching fluidly from one to the other without much thought, then one UI design is to have a objects-by-dimension table, but provide a blank column (or an "Insert" button) to allow the user to add a dimension. The column header has the dimension name, which the user can edit. Under the header is a space listing the categories of that dimension. Each category name is editable and there is a blank line (or the Insert button) to add a new category. Below that are the objects to categorize, each with a dropdown list in each column for dimension.

在可用性测试中，注意用户试图通过单击类别列表中的类别而不是从下拉列表中选择来设置对象的类别.使类别列表在视觉上分开显示以防止出现这种情况.

In usability testing, watch out for users trying to set an object’s category by clicking on a category in the category list, rather than selecting from the dropdown list. Make the category list appear visually separate to prevent this.

您可能需要一个按钮来隐藏/显示类别列表，因为这会占用大量空间(即使使用滚动条时也是如此).即使任务 1 和任务 2 紧密集成，我认为您会发现用户有时可能希望将类别列表排除在外.

You may want a button to hide/show the category lists, as this can take a lot of space (even when using scrollbars). Even if Task 1 and 2 are tightly integrated, I think you’ll find users may want to get the category lists out of the way sometimes.

如果您发现任务 1 和 2 是分开的，很少一起完成(例如，用户通常设置他们的维度然后对一堆对象进行分类)，那么您最好使用单独的窗口(或页面)来每个任务，尽管在它们之间来回导航应该很容易.例如，虽然用户通常可能事先设置他们的维度然后很少修改它们，但有时用户会意识到在对一个不寻常的对象进行分类时需要一个新的维度类别，因此您提供了一个添加类别"菜单项到管理类别"窗口，为当前维度插入一个新类别，等待用户提供名称.

If you find that Task 1 and 2 are separate, rarely being done together (e.g., users typically set up their dimensions then categorize a bunch of objects), then you’re better off with a separate window (or page) for each task, although it should be easy to navigate back and forth between them. For example, while users may typically set up their dimensions beforehand then rarely modify them, sometimes a user will realized one needs a new category for a dimension while categorizing an unusual object, so you provide a "Add category" menu item that takes the user to the Manage Categories window, with a new category inserted for the current dimension awaiting the user to provide a name.

任务 1 的窗口与之前相同:对象表，每个维度有一列下拉列表，但不包括类别列表、维度名称的编辑以及添加新维度的能力.如果用户需要扫描需要分类或重新分类的对象，或者如果用户通常需要将一个对象与其他对象进行比较(例如，决定如何对对象进行分类)，则这是最有效的.但是，如果用户的任务确实仅限于根据外部信息一次分类一个对象(例如，从纸上转录信息)，那么请考虑使用表格而不是表格，显示一个数组列表框，每个属性一个.只需单击每个列表框即可设置每个类别，这比使用下拉列表更快.

The window for Task 1 is the same as before: table of objects with a column of dropdown lists for each dimension, but exclude the category lists, the editing of the dimension names, and the capacity to add a new dimension. This is most efficient if the user needs to scan for objects needing categorizing or re-categorizing, or if typically the user needs to compare one object against some others (e.g., to decide how to categorize the object). However, if the user’s task is truly limited to just categorizing an object one at a time based on outside information (e.g., transcribing information from paper), then consider a form rather than a table, showing an array of list boxes, one for each attribute. With a single click of each list box to set each category, this is faster than using dropdown lists.

任务 2 的窗口可能类似于任务 1 的标题部分.它与用于任务 1 的表格一致，并允许用户一次查看多个维度的类别，帮助他们找出最佳分类方案(例如，帮助他们找到本质上相同的类别出现在两个不同维度的位置).然而，如果空间是一个问题，那么考虑一个维度列表，每个维度显示一个主从关系中的类别列表.

The window for Task 2 could be like the header portion for task one. It is consistent with the table used for Task 1 and allows users to see categories for multiple dimensions at once, helping them figure out the best categorization scheme (e.g., help them find where essentially the same category appears in two different dimensions). If space is a problem, however, then consider a list of dimensions each showing a list of categories in a master-detail relation.

任务 2 的终极用户能力和灵活性是树状控件.树的根级别包括维度，层次结构中的下一步包括每个维度内的类别.主要优点是它支持维度依赖于类别.例如，一个 Vehicle Type 维度可能包含 Car、Boat、Plane 等类别.对于 Car 类别，则可能有一个 Body Type 维度，其中包含仅适用于该类别的类别(Coupe、Hatchback 等).).从属维度在树中由类别的分支表示.结果是树在维度和类别之间交替，每个级别都在.

The ultimate in user power and flexibility for Task 2 is a tree-like control. The root level of the tree comprises dimensions and the next step in the hierarchy comprises the categories within each dimension. The main advantage is that it supports dimensions being dependent on categories. For example, one may have a Vehicle Type dimension that includes categories like Car, Boat, Plane, etc. For the Car category, one may then have a Body Type dimension with categories that only apply to that category (Coupe, Hatchback, etc.). Dependent dimensions are represented in the tree by branches off a category. The result is the tree alternates between dimensions and categories with each level in.

从视觉上区分类别和维度很重要，可能通过不同的图标，也可能通过不同的字体——告诉用户层次结构中的交替步骤在性质上是不同的(例如，如果你创建了一个维度，那么你应至少创建两个类别).即便如此，如果用户将维度与类别混淆(例如，允许他们将一堆维度"移动到另一个维度下，将前者转换为类别)，请提供一种轻松恢复的方法.

It’s important to visually distinguish the categories from the dimensions, perhaps by different icons, and maybe different font as well –something to tell users that alternating steps in the hierarchy are qualitatively different (e.g., if you create a Dimension, then you should create at least two categories). Even then, provide a means of easy recovery if users confuse dimensions with categories (e.g., allow them to move a bunch of "dimensions" to under another dimension, converting the former into categories).

我想再次强调人们对维度和类别等抽象概念的困难.即使他们确实理解它，人们通常也很难自己创建合适的维度和类别.有可能导致您需要仔细考虑的复杂交互(例如，当类别移动到新维度时，对象分类会发生什么?).如果您希望每个用户真正创建自己的新颖维度，那么您可能需要认真重新考虑您的整个方法.这是一项固有的复杂任务.

I want to emphasize again the difficulty people have with abstractions like dimensions and categories. Even when they do understand it, people generally have great difficulty creating decent dimensions and categories on their own. There are complicated interactions that can result that you need to think through (e.g., what happens to object categorization when a category is moved to a new dimension?). If you are expecting each user to truly create their own novel dimensions, then you may want to seriously re-think your whole approach. It is an inherently complicated task.

如果在文化、组织或领域中已经有相关的多维方案(例如我们有汽车)，用户会做得更好.当然，如果已经有方案，那么您可以研究它并将其作为默认尺寸集安装在您的产品中.任务 2 只需要支持，允许专家用户对其进行微调.

User do much better if there’s already a relevant multi-dimensional scheme in the culture, organization, or domain (such as we have for cars). Of course, if there already is a scheme, then you can research it and install it as a default set of dimensions in your product. Task 2 only needs to be supported to allow expert users to fine-tune it.

这篇关于用于分类项目的最优雅的用户界面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！