Question

我需要制作一个用于对班级学生进行排名的表格 - 即最佳学生排名为1，次佳排名为2，最差学生排名为N（其中N =班级学生人数，这种情况一般不到10）。这样做的最好（最容易使用，最易访问）的界面是什么，即使Javascript不可用，它需要工作的警告？

我正在考虑使用单选按钮，例如：

Student   Rank 1    Rank 2    Rank 3
Joe        ()1       ()2       ()3
Julie      ()1       ()2       ()3
John       ()1       ()2       ()3

问题当然是单选按钮只能属于一个组：每行是一个组，或者每列是一个组，但不是两个。所以不管怎样，我都要做验证服务器端，以确保每个等级只使用一次（如果我按行分组）或者每个学生只分配一个等级（如果我按列分组）。

我的问题是，普通用户更容易理解？按行分组，以便每个学生只能有一个排名，但很难判断排名是否已被使用？或者按列分组，这样每个等级只能分配一次，但是很难判断一个特定的学生是否已被排名两次或根本没有？

或者，不同的界面会更好吗？可能排名的下拉列表？文本框？我还没想到别的什么？

Answer 1

我会按排名使用下拉列表。然后很容易看出谁已经被选中，并且直观地看到当前的排名。你可以使用javascript来确保没有重复的选择，并在javascript不可用时在服务器端进行验证。

Rank 1       [Joe]

Rank 2       [Julie]

Rank 3       [John]

或者更好的是，当javascript不可用时，使用jQueryUI Sortable下拉回退。

Answer 2

这是一个用户界面问题。最好的方法是使用真实的和未指导的测试科目来测试不同的替代方案。请参阅Jacob Nelson的网络文章。（SP）。

请记住，即使您没有javascript，也可以使用服务器计算机。所以我会做简单的下拉菜单，让服务器端验证答案在逻辑上是否一致。

此外，您可以并且应该检测js是否可用，如果可用，那么您可以获得更顺畅的客户端体验

补充：还有关于运行低成本UI测试的好书。你不需要一百万美元的实验室。例如，不要让我思考！作者Steve Krug

确定UI答案的唯一真正方法是尝试使用测试科目。

Answer 3

在我看来，最直观的界面就是简单的列表，其中包含可以向上或向下移动每个学生的链接。

  Rank 1  ^ Joe   v
  Rank 2  ^ Julie v
  Rank 3  ^ John  v

等等。这对于服务器端或通过javascript来说都不会太难，它可以保证没有两个用户以非常透明的方式错误地处于同一级别。

作为页面的创建者，您的工作稍微多一点，但对您的用户来说是一个很大的优势。

Answer 4

如果您使用排他性排名（即，只能有一个＃1，一个＃2等），我建议用户理解的最直观方式是拖放。每行包含一个单选按钮组，只要行数会令人困惑，您仍然需要代码来维护每个等级的唯一性。