it-swarm-vi.tech

Cách tốt nhất để chọn một tập hợp con các mục trong một danh sách dài

Một trong những khách hàng của chúng tôi muốn chúng tôi xây dựng một ứng dụng web để chia sẻ thông tin về các tạp chí mà anh ấy xuất bản. Mỗi phiên bản của một tạp chí chứa một lượng quảng cáo khác nhau. Những nhà quảng cáo đến từ một nhóm các nhà quảng cáo trung tâm. Nhóm này chứa (tại thời điểm này) khoảng 150 nhà quảng cáo. Mỗi phiên bản của một tạp chí chứa một tập hợp con (khoảng 70-80) của các nhà quảng cáo này.

Khách hàng của chúng tôi muốn chúng tôi đưa ra cách để anh ấy thêm 70-80 nhà quảng cáo từ danh sách 150 này vào một ấn bản của một tạp chí. Nó cần phải nhanh nhất có thể, dễ dàng nhất có thể và trực quan nhất có thể.

Điều gì sẽ là một giải pháp lý tưởng ở đây? Tôi đã suy nghĩ về một cái gì đó trong các dòng của hình ảnh dưới đây.

  1. Danh sách các nhà quảng cáo có sẵn.
  2. Danh sách các nhà quảng cáo được chọn. Các nhà quảng cáo có một nút xóa.
  3. Hộp văn bản với tự động đề xuất cho các nhà quảng cáo trong danh sách bên trái. <Enter> xóa nhà quảng cáo khỏi danh sách bên trái và thêm nó vào danh sách bên phải. Hộp văn bản được xóa và vẫn tập trung.

Các đồng nghiệp của tôi đã đề xuất kéo và thả hoặc chỉ một danh sách với một hộp kiểm cho mỗi nhà quảng cáo, nhưng những cách tiếp cận đó buộc người dùng phải thực hiện nhiều tìm kiếm và nhấp chuột. Với cách tiếp cận của tôi, người dùng có thể tiếp tục gõ.

Bất kỳ đề nghị khác cho tình huống này?

My idea to transfer items between lists

36
Kristof Claes

Thiết kế của bạn là Kristof khá tốt rồi. Bạn đã đóng đinh những điều rất quan trọng như ngăn chặn hành động quay lại và thứ tư của con chuột và bàn phím này - điều đó sẽ phá hỏng trải nghiệm. Và tôi với bạn trong trò chơi kéo và thả - yuk!

Tôi vừa mới tinh chỉnh ý tưởng của bạn một chút:

alt text

  • Rõ ràng nhấp chuột vào các mục bên trái sẽ thêm chúng vào bên phải.
  • Bạn sẽ muốn bộ lọc văn bản là Google Style - tức là. đa từ, khớp một phần. Như trong đầu vào tìm kiếm, "rce bm" sẽ khớp với mục thứ ba được hiển thị trong sơ đồ. Điều này rất dễ thực hiện và cung cấp cho người dùng một cách mạnh mẽ, trực quan để tìm kiếm tên. Lọc tốc độ thứ hai (như bắt đầu chuỗi) sẽ chỉ khiến người dùng thất vọng và không cho họ sử dụng lại. Vì bộ lọc rất quan trọng đối với giao diện, nó hoạt động tốt hơn.
  • Một cách khác để tiết kiệm thời gian cho người dùng (như người khác đề xuất) là có một danh sách đã hoàn thành một phần ở phía "nhà quảng cáo được chọn". Nếu bạn nghĩ rằng rất có thể các nhà quảng cáo "top 10 được sử dụng nhiều nhất" sẽ đạt 70% hoặc cao hơn, thì cũng có thể bỏ chúng vào danh sách bên phải khi tải phải không? Trường hợp xấu nhất là người dùng phải xóa một hoặc hai (1 lần nhấp chuột mỗi lần) của 10 mục hàng đầu và 7 mục còn lại mà họ muốn đã lưu họ tìm kiếm chúng. Tinh chỉnh các con số trong ý tưởng này để giúp người dùng làm việc nhiều hơn.

Hãy nhớ rằng: Công việc càng nhiều bạn có thể làm cho người dùng; để giảm nhấp, tìm kiếm và tìm kiếm của họ, giao diện của bạn sẽ nhanh hơn, dễ dàng hơn và dễ sử dụng hơn.

34
cottsak

Tôi làm việc cho một công ty xuất bản tạp chí, vì vậy tôi hơi quen với tên miền của bạn.

Tôi tưởng tượng danh sách các nhà quảng cáo không thay đổi nhiều từ vấn đề này sang vấn đề khác, vì vậy tôi sẽ có các nhà quảng cáo từ vấn đề trước đó được chọn theo mặc định.

Vì bạn chỉ có 150 nhà quảng cáo và khoảng một nửa trong số họ sẽ được chọn, tôi sẽ không bận tâm với tìm kiếm. Tôi sẽ bắt đầu với một danh sách hộp kiểm đơn giản và xem nó hoạt động tốt như thế nào. Đảm bảo các mục được chọn là khác biệt trực quan (ví dụ: làm cho chúng đậm) để dễ quét.

7
Patrick McElhaney

Bài đăng đầu tiên của tôi, vì vậy hãy nhẹ nhàng và tôi cũng sẽ làm như vậy :-)

Mặc dù có một số ý tưởng hay ở đây, tôi không nghĩ bất kỳ ý tưởng nào trong số chúng đáp ứng được các yêu cầu của poster gốc:

"Khách hàng của chúng tôi muốn chúng tôi đưa ra cách để anh ấy thêm 70-80 nhà quảng cáo từ danh sách 150 này" - Kristof Claes .

Tôi chắc chắn đồng ý với nhiều ý tưởng tiện lợi trong đó người dùng có thể lọc kết quả và thêm chúng vào danh sách Nhà quảng cáo được chọn , chúng tôi vẫn cần một cách đến thêm số lượng lớn khoảng 70 nhà quảng cáo vào lựa chọn. Mặc dù các ý tưởng lọc khá tốt, nhưng nó sẽ chỉ dẫn đến một ứng dụng giống như bất kỳ ứng dụng email nào mà người dùng chỉ định người nhận trong trường "đến". Hãy tưởng tượng phải thêm 70 người nhận bằng tay!

Lý tưởng nhất, chúng tôi sẽ không muốn quy trình làm việc sau đây:

  1. Loại cụm từ để tìm kiếm trên
  2. (Kết quả xuất hiện)
  3. Sử dụng một trong hai lần nhấn enter cho mục hoàn thành tự động hoặc chọn một hoặc nhiều mục từ danh sách xuất hiện
  4. Lặp lại các bước từ 1 đến 3 cho đến khi khoảng 70 nhà quảng cáo đã được thêm

Tôi thấy một số bài viết hay ở đây từ nhiều người thực sự biết công cụ của họ, nhưng tôi nghĩ một số có lẽ đã lạc đề và hơi tập trung vào các công nghệ triển khai hơn là tâm lý của "thiết kế giao diện người dùng" tốt.

Suy nghĩ cuối cùng của tôi đối với chủ đề này là - có lẽ một số loại cơ chế để thêm "nhóm" vào lựa chọn vì điều này chắc chắn sẽ làm giảm việc lặp lại quy trình công việc tương tự 70 lần. Một số phần mềm mà tôi đã thấy sẽ chọn các nhà quảng cáo theo cách tiếp cận "vòng tròn". Chắc chắn điều này có thể giúp cho một số lựa chọn; Ngoài ra, bạn có thể có các nhóm được xác định trước mà bạn có thể luôn muốn thêm, có thể là danh sách các nhà quảng cáo hoặc quảng cáo trả tiền hàng đầu của bạn cho các sản phẩm "mới".

Và bây giờ cho một cái gì đó hơi lạc đề ...

Matty, tôi thấy bạn đã đề cập Apple và đặc biệt là iPhone -

... chúng ta có thể học từ iPhone ... chìa khóa là về việc đưa ra các giả định hợp lý, đưa ra quyết định cho người dùng ...

Không hoàn toàn chắc chắn ý của bạn là gì sau khi chúng tôi nói chuyện vào ngày khác. Không chỉ là thiết bị cảm ứng, có lẽ ít sử dụng hơn, mà Apple thường có lịch sử sản xuất phần mềm khiến bạn tự hỏi họ thực sự nghĩ gì về cơ sở người dùng của họ. Một ví dụ điển hình - nếu bạn muốn đổi tên Thiết bị iPad của bạn, trước tiên bạn sẽ cần kết nối nó với máy tính có thêm phần mềm iTunes . Tại sao trên trái đất tôi không thể đơn giản đi vào Cài đặt chung của iPad là dự đoán của bất kỳ ai.

Các giao diện người dùng tốt nhất có kiểu dáng - "thiết kế giao diện người dùng quy nạp", trái ngược với - "thiết kế giao diện người dùng suy diễn" hay nói cách khác - "dùng thử và lỗi". Thiết bị cảm ứng rơi vào loại sau. Hãy để tôi giải thích:

Nếu mọi thiết bị cảm ứng được phổ biến bởi Apple như trong iTouch, iPhone , và bây giờ là iPad nếu có bất cứ thứ gì ném phần mềm có thể sử dụng trở lại thời kỳ đồ đá của "giao diện người dùng suy diễn". Giống như một glyph được thiết kế rất tệ trên một nút, khiến người dùng phải suy nghĩ - " trời ơi nghĩa là gì? ", nhìn chằm chằm vào màn hình của thiết bị cảm ứng, không rõ ràng rằng việc sử dụng hai ngón tay cho phép người dùng phóng to hoặc thu nhỏ; hoặc sở thích của tôi - đó là giữ ngón tay của bạn xuống và một biểu tượng cho hai vài giây hoặc lâu hơn sẽ đặt thiết bị vào "chế độ xóa".

Theo cùng một cách mà một biểu tượng được thiết kế tồi rơi vào danh mục - " Tôi không biết điều đó có nghĩa là gì, nhưng sau khi tôi sử dụng nó lần đầu tiên, tôi thường sẽ nhớ nó làm gì ", nhiều thiết bị cảm ứng thuộc danh mục giao diện người dùng suy diễn vì người dùng phải suy luận những gì chương trình thực sự có thể làm bằng cách" chơi với nó "do đó làm giảm khả năng sử dụng ngay lập tức.

Duy trì việc làm tốt!

Suy nghĩ ngẫu nhiên của MickyD

6
MickyD

Toàn bộ danh sách các nhà quảng cáo nên có bộ lọc trên đầu trang ( về cơ bản đặt "3" của bạn lên trên "1" và có hiệu lực động "3" của nội dung "1" ):

  • Tìm kiếm (khi đang thu hẹp danh sách)
  • Nhóm ("Được sử dụng lần cuối", "Thời trang", "Điện tử", v.v.)

Lưu ý - nếu tìm kiếm của bạn đủ mạnh, bạn có thể sử dụng chỉ một điều khiển do đó tìm kiếm "thời trang" sẽ trả về tất cả các nhà quảng cáo có "thời trang" trong tên của họ hoặc đã được gắn thẻ thuộc danh mục "thời trang".
[.__.] "Sử dụng lần cuối" có thể là một hộp kiểm.

Lợi ích chính :
[.___.] Thu hẹp danh sách khi đang bay cho phép bạn chọn tất cả các mục có liên quan với nhau và di chuyển chúng.

Ví dụ: Bạn nhập "thiết bị điện tử", nhận danh sách tất cả các nhà quảng cáo liên quan đến thiết bị điện tử, bạn chọn tất cả (bằng chuột, ctrl + A hoặc bất kỳ phương pháp nào khác) và ngay lập tức di chuyển chúng sang danh sách bên phải.

4
Dan Barak

Tôi có giao diện người dùng này có thể có liên quan.
[.__.] https://dl.dropbox.com/u/2965258/foodSelector/foodHVELy.html
[.___.] Có thể sử dụng được nếu nhà quảng cáo được sắp xếp theo cách nào đó trong danh mục và người dùng biết danh mục nào là mỗi loại.
[.__.] Đó là giao diện người dùng chỉ sử dụng chuột, yêu cầu một lần nhấp cho mỗi nhà quảng cáo.
[.__.] Nó có thể được vận hành bằng bàn phím, nhưng menu sẽ đóng lại và phải được mở rộng lại cho mỗi lựa chọn. Điều này có thể được khắc phục bằng cách không đóng menu khi nhập.

3
Juan Lanus

Tôi phải đồng ý với Micky Duncan : Tôi nghĩ việc tìm kiếm/nhóm/lọc hoàn toàn không phù hợp với nhiệm vụ này.

Bạn không muốn tìm kiếm và chọn một vài mục từ danh sách lớn. Bạn muốn chọn khoảng một nửa của tất cả các mục trong danh sách. Nếu người dùng phải chọn một nửa số mặt hàng, người dùng sẽ muốn đảm bảo rằng anh ta đã chọn tất cả các ứng cử viên và không bỏ sót bất kỳ ai. Vì vậy, quy trình công việc gần giống như sau:

Hãy tưởng tượng bạn có Danh sách 150 nhà quảng cáo trên giấy. Bạn sẽ đi qua danh sách từ trên xuống dưới và quyết định cho từng người "tôi có muốn nhà quảng cáo này không?" và sau đó đánh dấu hoặc đình công -Tiếp tục và cuối cùng, bạn chắc chắn rằng bạn đã đánh giá tất cả chúng.

Vì vậy, Thiết kế nên như thế này:

Selector mockup

Trọng tâm nằm ở mục trên cùng trong danh sách giữa và người dùng có thể sử dụng các phím mũi tên trái và phải để loại bỏ mục đó hoặc đưa nó vào danh sách đã chọn. Vì vậy, anh ta có thể nhanh chóng làm việc trong toàn bộ danh sách bằng cách nhấn trái hoặc phải tùy thuộc vào nhà quảng cáo và chắc chắn rằng anh ta đã cho mỗi người một số suy nghĩ và không bỏ lỡ bất kỳ.

2
Falco

Có vẻ như giải pháp của bạn là một giải pháp khá tốt. Tôi sẽ xóa danh sách bên trái vì nó không thực sự thêm bất kỳ thông tin nào (nó chỉ là một danh sách dài và thật khó để nói rằng một cái gì đó vừa bốc hơi khỏi nó sau khi nhấn Enter) và chỉ cung cấp trường tìm kiếm với tự động hoàn thành ( mặc dù cần có một danh sách thả xuống từ trường đó để người dùng vẫn có thể thấy những tùy chọn nào khả dụng) và thêm nút "Thêm nhà quảng cáo vào danh sách" lớn trong trường hợp người dùng của bạn không biết nhấn Enter.

Đưa phần này vào giai đoạn nguyên mẫu ASAP (sử dụng dữ liệu giả) và sau đó giới thiệu nó với khách hàng của bạn và để họ chạy qua nó. Nhận phản hồi của họ càng sớm càng tốt là rất quan trọng vì họ sẽ là người sử dụng nó thường xuyên và do đó họ cần cảm thấy thoải mái với nó.

1
Rahul

Tôi đồng ý với các điểm được nêu ra bởi MickyDPatrick . Tất cả phụ thuộc vào cách lựa chọn các nhà quảng cáo được thực hiện. Khách hàng sẽ sử dụng Giao diện người dùng để chọn nhà quảng cáo có vấn đề cụ thể hay khách hàng đã có danh sách với nhà quảng cáo trong vấn đề cụ thể chưa. Tôi không nghĩ rằng lọc là giải pháp tốt nhất trong cả hai trường hợp.

Nếu khách hàng sử dụng UI để chọn nhà quảng cáo, nó sẽ hoạt động tốt hơn nhiều khi chỉ hiển thị một danh sách với trạng thái được chọn/không được kiểm tra. Như Patrick đã viết, đó là ý tưởng tốt để làm cho trạng thái được chọn nổi bật. Cũng có thể làm cho trạng thái không được chọn xuất hiện nhẹ hơn thay vì chỉ làm mờ trạng thái đã chọn. Máy khách di chuyển trong danh sách bằng cách sử dụng phím lên/xuống và kiểm tra/bỏ chọn bằng cách sử dụng khoảng trắng (hoặc một phím tương tự).

Nếu khách hàng có một danh sách với các nhà quảng cáo xuất hiện trong vấn đề cụ thể, cách tiếp cận đầu tiên sẽ là kiểm tra xem danh sách đó có thể được nhận ở dạng kỹ thuật số và được nhập tự động hay không. Nếu điều đó là không thể, có lẽ danh sách được sắp xếp theo một cách nào đó và sau đó UI sẽ sắp xếp các nhà quảng cáo theo cùng một cách.

Tùy chọn thứ ba là khách hàng xem xét vấn đề tìm kiếm nhà quảng cáo hoặc anh ta có một danh sách chưa được sắp xếp. Trong trường hợp này, nó có ý nghĩa để có một chức năng lọc.

Vấn đề là nếu không biết mục tiêu và hoàn cảnh xung quanh nhiệm vụ thì có thể rất khó để đưa ra một giải pháp tốt.

0
Robert Höglund

Tôi sẽ sử dụng hai danh sách và hai nút. Người dùng có thể đánh dấu các yếu tố duy nhất trong danh sách bên trái bằng một cú nhấp chuột, nhấp đúp sẽ di chuyển phần tử sang danh sách bên phải.

Anh ta có thể thay đổi nhấp chuột, nhấp vào đánh dấu một phạm vi và bằng nút [>] chuyển tất cả các yếu tố được đánh dấu sang phải. Với Ctrl, một yếu tố duy nhất có thể được chuyển từ trạng thái được đánh dấu sang trạng thái không được đánh dấu và quay lại.

Ctrl-a sẽ đánh dấu tất cả các yếu tố. Tất cả được biết đến từ các giao diện chương trình khác.

Các yếu tố được sắp xếp theo thứ tự chữ cái sẽ giúp bạn dễ dàng tìm thấy một mục, ký tự đầu tiên có thể được sử dụng làm phím nóng để điều hướng đến mục đó, nếu việc cuộn là không cần thiết.

> afoo                    ifoo
bfoo                      jfoo
cfoo                      kfoo
> dfoo                    lfoo
> efoo                    mfoo
> ffoo                    
gfoo
hfoo
          [ < ]    [ > ]  

{a, d, e, f} foo hiện được đánh dấu bên trái. Với [>] người dùng di chuyển chúng sang phải.

Các giao diện như vậy là khá nhanh, dễ sử dụng và dễ hiểu. Có lẽ bạn có thể thêm tooltiptext hoặc đặt tên cho các nút 'di chuyển đến Danh sách các mục đã chọn' và 'xóa khỏi Danh sách các mục đã chọn.'.

Sau khi chuyển sang Danh sách khác, danh sách này phải được sử dụng.

0
user unknown