2009-04-07 31 views
12

Chúng tôi đang thiết kế một trang web và đã chạy vào một số thách thức giao diện người dùng sẽ được giải quyết gọn gàng với giao diện tab. Người dùng sẽ tương tác với các yếu tố khác nhau của trang web (có một số chức năng xem/chỉnh sửa/sao chép/dán cơ bản) và chỉ có một đối tượng trong một tab hiển thị tại một thời điểm đơn giản hóa mọi thứ một chút.Giao diện tab có gây nhầm lẫn không?

Chúng tôi, tất nhiên, hoàn toàn thoải mái với giao diện tab nhưng còn người dùng mới làm quen thì sao? Tôi đã tìm kiếm trên web để được hướng dẫn và tôi không tìm thấy bất kỳ điều gì dứt khoát. Bạn có kinh nghiệm trình bày một giao diện tab cho người dùng mới làm quen và họ có gặp rắc rối với nó? Hoặc, chúng tôi đã đạt đến điểm mà mọi người đều cảm thấy thoải mái với các tab và chúng tôi có thể sử dụng chúng mà không cần đặt trước không?

Tính khả dụng là quan trọng-- nhiều hơn cho dự án này nhiều nhất. Nếu người dùng ngây thơ bị nhầm lẫn bởi một giao diện tab nó sẽ không hoạt động và chúng tôi sẽ phải tìm một cách khác.

+0

"chỉ có một đối tượng trong một tab có thể nhìn thấy tại một đơn giản hoá thời gian mọi thứ khá một chút. " ... điều này có đơn giản hóa mọi thứ cho người dùng hay nhà phát triển không? – nailitdown

+0

Khi nó quay ra, cả hai. Chỉ với một đối tượng có thể nhìn thấy, không có sự mơ hồ nào đối với đối tượng nào là mục tiêu của các lựa chọn menu. Tuy nhiên, việc kéo và thả giữa các đối tượng khó khăn hơn một chút, nhưng có vẻ như chúng ta có thể thực hiện điều này bằng cách kéo từ đối tượng hiển thị đến tab của đối tượng đích. –

Trả lời

5

Tab đang trở thành địa điểm phổ biến đủ để tôi không lo lắng về việc sử dụng chúng, miễn là bạn triển khai đúng cách. Đảm bảo rằng bạn làm cho tab hoạt động trực quan khác biệt với các tab khác.

Ngoài ra, hãy thử tạo các tab bằng cách sử dụng cải tiến nâng cao để nội dung vẫn còn đó với JavaScript bị vô hiệu hóa. Có hai cách chính để thực hiện việc này:

  1. Nạp mọi tab nhưng tab đầu tiên sử dụng
    AJAX. Các tab phải là các liên kết đến nội dung mà AJAX
    tìm nạp.
  2. Giữ tất cả thông tin của bạn trên trang nhưng ẩn nó bằng JavaScript. Khi bạn duyệt qua các tab, chúng được điền từ các phần ẩn của trang.

Tài nguyên thiết kế bạn có thể thấy hữu ích là YUI Design Pattern Library và phần của chúng trên tabs.

3

Tôi nghĩ rằng miễn là các tab hiển thị như vậy thì người dùng có thể hiểu được. Tôi đã thấy các trang web nơi họ trình bày một thanh dọc với các liên kết hoạt động như các tab nhưng không hiển thị ngay với người dùng và thấy rằng rất khó hiểu.

0

Tôi nghĩ mọi người được sử dụng để ẩn dụ (từ chất kết dính, hoặc chỉ mục thẻ và vv) của các tab. Đặc biệt là những người sử dụng web cho bất kỳ khoảng thời gian nào. Tôi nghĩ rằng, nếu IE chấp nhận một phép ẩn dụ, nó ngụ ý một sự quen thuộc chung với ẩn dụ đó.

Vì vậy, không, tôi khuyên bạn không nên bối rối và đề nghị bạn nên thực hiện nó. Chỉ, có thể, đăng giới thiệu chào mừng/lần đầu tiên (hoặc liên kết 'trợ giúp' nổi bật đến phần giới thiệu đó) với việc sử dụng các tab.

1

Tôi có xu hướng đồng ý với lothar và ricebowl - những người có vẻ khá quen thuộc với nó những ngày này. Điều quan trọng nhất với bất kỳ phần tử GUI nào là rõ ràng - người dùng phải biết rõ điều gì sẽ xảy ra khi họ nhấn một cái gì đó (họ biết rằng nhấp vào một tab không hoạt động sẽ làm cho nó hoạt động); và trong điều hướng - phải rõ ràng chính xác tab nào họ hiện đang sử dụng. Như lothar đã nói, nếu nó không hiển thị ngay lập tức với người dùng, nó rất khó hiểu. Nếu bạn giải quyết những vấn đề đó, thì nó sẽ ổn thôi.

0

Tôi đã là nhà phát triển cho một ứng dụng mạng nội bộ sử dụng giao diện tab, được tạo bằng HTML và được kiểm soát bởi JavaScript. Đây là cách trước khi IE7 và Firefox. Trong thực tế, nó là một chút mới lạ trên các trang web nói chung, quá.May mắn thay, một nhà phát triển trước đó đã phát hiện ra rằng nếu bạn làm cho nó trông giống như một hộp thoại - ngay cả khi sử dụng một nền màu xám, thì mọi người thường hiểu được ẩn dụ đó. Chúng tôi cũng đã tải tất cả nội dung cho tất cả các tab trong trang tải ban đầu và có các nút Lưu/Hủy bên ngoài cấu trúc theo thẻ. Bởi vì điều này, hầu hết mọi người ngay lập tức hiểu rằng họ có thể di chuyển giữa các tab (chúng tôi sử dụng JavaScript để ẩn và hiển thị các DIV) và Lưu sẽ lưu thay đổi cho tất cả trong số đó.

Nếu bạn muốn đi chệch khỏi một ẩn dụ rõ ràng như vậy, thì bạn cần thực hiện một số nghiên cứu khả năng sử dụng.

0

Giao diện Tab được triển khai tốt không nên gây nhầm lẫn cho người dùng.

Phù hợp với những gì người khác đã nói một trong những điều ipmortant nhất để xem xét với Tabs, hoặc bất kỳ giao diện điều hướng khác là cho nó được rõ ràng, nơi họ đang có trong chương trình điều hướng.

Một điểm quan trọng khác không phải là phá vỡ trình duyệt! Nhiều thao tác AJAX hoặc javascript phá vỡ nút quay lại. Đây là một ít phiền toái cho một số và một bất tiện lớn cho người khác. Hãy chắc chắn để xem xét đối tượng mục tiêu của bạn ở đây.

Cá nhân tôi thích phương pháp oldschool không tải trước tất cả các tab nhưng có mỗi tab làm trang riêng và sử dụng phương pháp khuôn mẫu để quản lý giao diện điều hướng, có thể là tabbled hay cách khác. Điều này duy trì lịch sử trình duyệt và hoạt động tốt có hoặc không có javascipt.

2

Tôi sẽ phải không đồng ý với những người có lợi cho các tab. Trong một thử nghiệm thiết kế, chúng tôi đã làm cho một trang web có lưu lượng truy cập khá cao (hơn 1 triệu đơn vị vào thời điểm đó), chúng tôi thấy rằng các tab chưa được sử dụng. Các tab được đánh dấu rõ ràng, nằm ở bên phải của khu vực nội dung chính. Dựa trên kinh nghiệm đó, tôi sẽ đề xuất hoặc tìm kiếm một giải pháp thay thế hoặc, như staticscan đề xuất chạy thử nghiệm khả năng sử dụng để tìm ra cái nào hoạt động.

+1

+1: đối với ý kiến ​​được hỗ trợ bởi dữ liệu thế giới thực – nailitdown

+0

Cách đây bao lâu? Tôi nhận thấy rằng cả Twitter và Facebook đều sử dụng các tab ngày hôm nay. Twitter có các tab dọc và Facebook có chúng trong hồ sơ như một hộp thoại theo thẻ. Twitter có thể là vấn đề (những người sớm chấp nhận không phải là người mới) nhưng Facebook lại nhạy cảm với công nghệ phobe, người dùng người lớn. –

+0

David: khoảng 2 tháng trước. Tôi đồng ý rằng Facebook rất nhạy cảm. Nhưng tôi cũng đặt cược họ đã thực hiện thử nghiệm rộng rãi để tìm ra giải pháp tối ưu. Nếu bạn có thể làm một cái gì đó tương tự, nhưng tất cả các phương tiện đi cho nó. Nhưng nếu điều đó là không thể vào lúc này, tôi sẽ đề nghị chơi nó an toàn. –

2

Đừng nghĩ rằng bạn có thể quyết định ưu tiên những gì có thể sử dụng được và những gì không. Do khả năng sử dụng thử nghiệm

"Nó chỉ mất năm người sử dụng để phát hiện ra 80 phần trăm của các vấn đề khả năng sử dụng cao cấp" Jakob Nielsen

thử nghiệm của Google khả năng sử dụng và bắt đầu học. Nó không khó.

+0

+1: nếu bạn không chắc chắn, hãy thử nghiệm. – nailitdown

+0

Chúng tôi đang thử nghiệm khả năng sử dụng ngay bây giờ và biết rằng quá khó để sử dụng trong thiết kế hiện tại của nó. Giao diện tab có khả năng đơn giản hóa nó (miễn là giao diện theo thẻ không gây nhầm lẫn cho người dùng mới làm quen). –

11

Trong cuốn sách tuyệt vời của mình "Đừng khiến tôi nghĩ" (Sensible.com), Steve Krug thảo luận về những lợi ích của việc sử dụng một giao diện tab:

  • Họ tự hiển nhiên
  • Họ khó có thể bỏ lỡ
  • Họ đang trơn
  • Họ đề nghị một không gian vật lý

Ông tiếp tục để mô tả các phím để su tab ccessful như chứng minh bởi Amazon.com:

  • Họ đã rút ra một cách chính xác
  • Họ màu mã
  • Có một tab chọn khi bạn nhập trang web.

Rõ ràng, anh ấy cung cấp chi tiết cho từng mục trong số các mục dấu đầu dòng trong sách (Tôi sẽ không khuyến khích anh ấy ở đây). Cuốn sách chắc chắn đáng xem nếu bạn muốn hướng dẫn tạo trang web cho người mới và chuyên gia.

+0

+1 để giới thiệu "Đừng làm cho tôi nghĩ" –

+0

+1 Ngay sau khi tôi đọc câu hỏi này, tôi sẽ để viết lên điều gì đó về Don't Make Me Think –

0

Tab, v.v. chỉ là công cụ. Làm thế nào chúng tôi quyết định đặt chúng ra và sử dụng chúng là những gì xác định hiệu quả của chúng.

Những gì tôi cố gắng ghi nhớ là:

1) Giữ nó gần gũi. Những thứ chúng tôi sử dụng nhiều nhất nên ở phía trước hoặc lên gần đầu càng nhiều càng tốt và chôn phần còn lại dựa trên tần suất chúng được sử dụng/điều chỉnh.

2) Đủ để mẹ sử dụng. Tất cả các giao diện đều gây nhầm lẫn nếu chúng không được trình bày một cách rõ ràng và hợp lý.

3) Sắp xếp cách sử dụng, không phải cách bạn nghĩ. * Tôi thường sử dụng các tab để chia nhỏ các bước trong quy trình hoặc chia nhỏ các khu vực như tùy chọn cơ bản/nâng cao. Tôi nhóm chúng dựa trên sự giống nhau hoặc cách sử dụng tùy thuộc vào những gì hoạt động tốt hơn

4) Giữ chúng ít Dù bằng cách nào tôi cố gắng ở dưới phạm vi từ 7 đến 10 vì bộ não con người khó vượt quá 7-10 chữ số, vì vậy tôi giả định tương tự cho các mẩu thông tin. Dọc theo Accordians có thể là một cái gì đó bạn muốn xem xét là tốt.

Tôi cũng đã nhúng các tab trong các tab trước đây. Hoạt động tốt nhưng chỉ có một lớp sâu phần lớn thời gian.