Trong câu hỏi meta này về trang web StackExchange UI sẽ như thế nào , tôi đang làm việc (đọc: loay hoay với) một thiết kế cho trang web. Tôi đang sử dụng một công cụ dựa trên web để chỉnh sửa CSS của trang, điều này mang lại cho tôi rất nhiều sự tự do để thay đổi mọi thứ trong khi giới hạn tôi với HTML có sẵn do máy chủ kết xuất.
Trong khi thay đổi và sắp xếp lại mọi thứ (chủ yếu là các yếu tố như kiểu chữ và trọng lượng hình ảnh) tôi nhận ra rằng cột bên tay phải như được hiển thị trên gần như mọi trang web StackExchange khá kém hiệu quả. Đây là giao diện của trang meta:
Thẻ (và bên dưới, huy hiệu) là các đối tượng nhỏ có chiều dài lớn hơn chiều ngang so với chiều dọc. Mỗi cái có một vài thuộc tính:
Cách mọi thứ được tổ chức bây giờ cảm thấy rất không hiệu quả:
Trong thiết kế lại của tôi Tôi đã quan tâm đến việc giảm độ mạnh của các thẻ (chưa xử lý huy hiệu) để giảm nhiễu hình ảnh đó, nhưng tôi chưa nghĩ ra cách nào tốt để thể hiện các thẻ kết hợp với số lần áp dụng chưa. Tôi đã có một số ý tưởng, nhưng không ai trong số họ cảm thấy đúng:
Thời gian câu hỏi: Điều gì sẽ là cách hiệu quả để thiết kế lại cách hiển thị thẻ và huy hiệu trong cột bên tay phải, với điều kiện là tôi chỉ có thể sửa đổi CSS và không thể giả mạo HTML?
Kudos cho những nỗ lực - rất tốt đẹp!
Tôi có một vài bình luận về danh sách ở cuối:
Có thể sử dụng cách tiếp cận phông chữ có trọng số hoặc màu phông chữ?
(nguồn: ljplus.r )
Tôi nghĩ rằng danh sách các thẻ khó khăn trên trang web này khiến tôi tránh được vì trong tiềm thức, nó làm tôi sợ vì quá dài. Tôi nghĩ rằng việc giới hạn nó vào top ten với một tùy chọn để xem tất cả chúng sẽ khiến người dùng quét nó nhanh chóng và xem những gì nó đang diễn ra trong vài giây.
Ngoài ra, tôi không bao giờ có thể hiểu làm thế nào các thẻ được sắp xếp. Dường như với tôi rằng chúng được sắp xếp theo các con số bên phải chứ không phải là lần truy cập gần đây. Do đó, tôi nghĩ việc di chuyển các số sang trái và sắp xếp chúng (các số) sang phải sẽ tạo ra sự chắc chắn rằng chúng được sắp xếp theo nó. Xóa dấu "x" lặp đi lặp lại và hình ảnh xung quanh mỗi thẻ sẽ làm lộn xộn danh sách và cải thiện khả năng quét được.
Hơn nữa, làm cho các thẻ trông giống như các liên kết sẽ biểu thị rằng nó có thể nhấp và nó sẽ đưa bạn đến một trang khác.
Một vài ý tưởng, nhiều hơn spark những ý tưởng vượt trội khác hơn bất kỳ ý tưởng nào khác: