Bởi Patryk Adaś
Kể từ đầu những năm 2000, phép ẩn dụ về duyệt web theo thẻ trên máy tính để bàn đã thống trị cách chúng ta điều hướng web. Với Browser.html, một dự án của Mozilla Research nhằm xây dựng giao diện người dùng trình duyệt được xây dựng bằng HTML cho các bản dựng servo hàng đêm, chúng tôi đang thử nghiệm phát triển trình duyệt theo thẻ tiêu chuẩn theo hướng mô hình dựa trên các đường dẫn .
Mục tiêu của đường dẫn là xây dựng không chỉ một cửa sổ vào nội dung web mà còn là bản tường thuật về hoạt động của người dùng. Chúng tôi hy vọng rằng công việc của mình có thể giúp nâng cao trạng thái duyệt web gần hơn với lý tưởng về một công cụ nâng cao quá trình nhận thức của chúng ta, thay vì tăng tải nhận thức của chúng ta.
Để minh họa cho loại kịch bản mà chúng tôi đang nghĩ tới, chúng tôi sẽ giới thiệu cho bạn người bạn Nala của chúng tôi.
Việc tìm kiếm chiếc bánh pizza hoàn hảo
Nala đang tìm kiếm các cửa hàng bán pizza. Trong trình duyệt theo thẻ truyền thống của mình, cô bắt đầu tìm kiếm (1) đưa cô ấy đến một trang kết quả tìm kiếm (2) .
Cô ấy nhấp vào liên kết đến danh sách các nhà hàng trên Yelp (3) , và kiểm tra một cửa hàng pizza đầy hứa hẹn (4) .
Các liên kết bên ngoài trên Yelp mở trong các tab riêng biệt, vì vậy khi Nala nhấp vào liên kết đến trang web của nhà hàng, nó sẽ bắt đầu một tab mới (5) .
Tab mới không có bất kỳ lịch sử nào hoặc bất kỳ kết nối nào với tab đầu tiên. Tất cả lịch sử về cách Nala truy cập trang web của nhà hàng đều bị mất!
Chứng quên của trình duyệt càng tăng lên khi cô xem xét nhiều lựa chọn hơn:quay lại tab đầu tiên (6) và điều hướng quay lại kết quả Yelp (7) , cô ấy đang tìm một nhà hàng khác.
Bây giờ khi cô ấy chọn một nhà hàng mới (8) , một phần lịch sử điều hướng của tab hiện tại cũng bị mất:
Nhấp vào liên kết bên ngoài tới trang web của nhà hàng tiếp theo sẽ mở ra một tab mới (9) , và lại cắt đứt kết nối khỏi lịch sử trước đó.
Để xem lại kết quả tìm kiếm ban đầu của mình, Nala quay lại vài bước trong lịch sử của tab đầu tiên và mở một địa điểm bán pizza khác ngay từ đó (10) .
Trong ví dụ về tình huống tìm kiếm thông thường này, hơn một phần ba lịch sử bị mất!
Tất nhiên, các trình duyệt thường cung cấp các công cụ như chế độ xem lịch sử và menu "tab gần đây", nhưng không có công cụ nào trong số này trình bày câu chuyện phù hợp với khóa học thực tế mà Nala đã theo dõi.
Từ tab đến đường dẫn
Với Browser.html, chúng tôi đang tạo mẫu một giao diện người dùng không chỉ cho biết các phần lịch sử của Nala mà trình duyệt theo thẻ lưu giữ (Phiên bản 1) , nhưng tất cả đều (Phiên bản 2) :
Nhưng những cây này có thể dễ dàng trở nên phức tạp. Điều chúng tôi nghĩ quan trọng nhất không phải là mỗi cuộc khám phá sẽ phân kỳ ở đâu mà là con đường hoàn chỉnh dẫn đến kết quả. Vì vậy, đó là những gì chúng tôi hiển thị cho người dùng (Phiên bản 3) :
Mỗi hàng đại diện cho một đường dẫn từ gốc của cây điều hướng đến kết quả. Lợi ích là đường nhỏ kể một câu chuyện khép kín từ trái sang phải. Mặt khác, sự trùng lặp dẫn đến nhiều tiếng ồn thị giác gây mất tập trung. May mắn thay, điều đó có thể được loại bỏ bằng cách tập trung vào một đường duy nhất trong khi gấp các đường khác.
Đây là những gì Nala thực sự đã thấy:
Tab và đường dẫn:giống nhau nhưng khác nhau.
Nếu bỏ qua các đường dẫn dẫn đến từng chủ đề được khám phá, các đường dẫn sẽ không khác gì các tab thông thường. Điều này là có chủ ý:mục tiêu của chúng tôi là nâng cao trải nghiệm người dùng hiện tại chứ không phải thay thế chúng. Người dùng có thể tiếp tục sử dụng các trình duyệt như họ vẫn thường làm. Chưa hết mỗi đường dẫn điều hướng là một tab kể một câu chuyện hoàn chỉnh từ đầu đến cuối. Điều này mang lại cho chúng tôi cơ hội khám phá những cải tiến hơn nữa đối với trải nghiệm người dùng. Dưới đây là một số điều chúng tôi đang xem xét:
- Chia sẻ không chỉ URL mà còn toàn bộ đường dẫn.
- Các vệt mờ dần khi chúng trở nên không liên quan và cuối cùng chuyển chúng ra khỏi lưới.
- Duy trì các đường dẫn ở dạng giống như trong chuyến thăm để có thể xem lại (ngoại tuyến).
- Cho phép chú thích các đường đi để người dùng có thể ghi lại suy nghĩ của mình khi nghiên cứu một chủ đề.
- Nghiên cứu chủ đề hợp tác.
- Tùy chọn mở các trang theo một đường dẫn mới.
Con đường dẫn đến những con đường mòn
Ý tưởng hình dung hành trình của người dùng trên web như một dấu vết không hề mới. Thậm chí bảy mươi năm trước, trong bài tiểu luận mang tính bước ngoặt As We May Think phổ biến ý tưởng về dữ liệu siêu liên kết, Vannevar Bush đã mô tả một “máy memex”. Anh ấy hình dung chiếc máy này sẽ giúp chúng tôi thu thập và chia sẻ dữ liệu thông qua thư viện cá nhân, giúp chúng tôi để lại dấu vết trong quá trình nghiên cứu của mình.
Kể từ đó, đã có nhiều nỗ lực nhằm tạo ra một công cụ như vậy, bắt đầu với Trailmeme của Xerox Trails. Khái niệm này được tiếp tục bởi Trailblazer bởi MacWarriors vào năm 2004, hiện đang được tiếp nối bởi Trailblazer.io. Chúng tôi hy vọng rằng bằng cách kết nối các ý tưởng về đường dẫn với các thành ngữ theo thẻ quen thuộc, chúng tôi sẽ xây dựng dựa trên quy trình công việc hiện có và làm cho ý tưởng này trở nên hấp dẫn rộng rãi. Và Browser.html đóng vai trò là nơi thử nghiệm tuyệt vời cho những ý tưởng này.
Mô hình không gian
Tôi đang làm việc trên một mô hình không gian thông qua nhiều tương tác và hoạt ảnh khác nhau của người dùng. Điều này sẽ giúp người dùng hiểu rõ hơn những gì đang diễn ra và cách điều hướng trang web hiệu quả nhất.
Bạn có thể đọc thêm về điều này tại đây.
Hãy tham gia cùng chúng tôi!
Chúng tôi hiện đang nỗ lực xây dựng nguyên mẫu hoạt động đầu tiên của mình. Nếu điều này nghe có vẻ thú vị với bạn, vui lòng đến xem dự án Browser.html! Bạn có thể tìm thấy danh sách các vấn đề còn tồn tại của chúng tôi trên GitHub hoặc trò chuyện với chúng tôi trên Slack.
Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu