Đánh giá chức năng thiết kế màn hình nhập liệu
|
Tóm tắt tình huống: Người dùng muốn thực hiện các tác vụ lặp đi lặp lại nhanh hơn.
Thông tin về các phím tắt khả dụng cho giao diện web trực tuyến Dropbox.com được hiển thị bằng cách nhấn "?"
Các phím tắt khả dụng trên Google Docs Phím tắt bàn phím trên Facebook 1.11 Mẫu thiết kế lưu trữ thông tin tự động (Autosave)
Người dùng Drive không cần lo lắng về việc mất dữ liệu đột ngột hay quên lưu dữ liệu 1.12 Mẫu thiết kế trình xây dựng các quy tắc
Mỗi quy tắc được đặt tiêu chí phù hợp cho từng quy tắc
Ràng buộc quy tắc với hành động hoặc hiệu ứng, liên kết nút xóa quy tắc với từng quy tắc và cung cấp đầu vào để đặt tiêu chí phù hợp cho các quy tắc Liên kết nút loại bỏ quy tắc với mỗi quy tắc và cung cấp đầu vào để đặt tiêu chí phù hợp cho các quy tắc 1.13 Mẫu thiết kế trình chỉnh sửa tại chỗ (Inplace Editor)
Trình chỉnh sửa tiêu đề trang
Trạng thái của bạn được cập nhật và chỉnh sửa thông qua trình chỉnh sửa tại chỗ tại facebook.com 1.14 Mẫu thiết kế kéo và thả (drag and drop)
Trình kéo và thả tại Stamps and Sons 1.15 Mẫu thiết kế dữ liệu đầu vào có thể mở rộng (expandable input)
Twitter.com đã tạo một trường nhập dữ liệu ở đầu trang để thu hút sự chú ý của người dùng, cùng với gợi ý nhập thông tin. Khi người dùng nhấp vào trường nhập liệu này, trường sẽ mở rộng cho người dùng nhập thông tin, nhằm tiết kiệm không gian màn hình trong màn hình nội dung đầu tiên. 1.16 Mẫu thiết kế chế độ xem trước (preview/ live preview)
Khi bạn nhập tên kho lưu trữ (repository name), trường bên dưới với địa chỉ bạn đã chọn sẽ hiển thị cho bạn xem trước URL Khi bạn thêm nhận xét vào một bài báo tại www.interaction-design.org, bạn có thể xem bản xem trước trực tiếp của nhận xét cuối cùng đang hiển thị trước mắt bạn 1.17 Mẫu thiết kế hoàn tác (undo)
Sau khi biết sở thích của người dùng, một trang chủ mới được xây dựng riêng cho họ tại Pinterest. Nếu không thích kết quả, người dùng có thể hoàn tác hành động. 1.18 Mẫu thiết kế cài đặt (settings)
Pinterest đã nhóm các cài đặt thành các phần có thể quản lý, cho phép người dùng tùy chỉnh trải nghiệm theo thông số kỹ thuật Pinterest cho phép người dùng chỉnh sửa cài đặt của họ 1.19 Mẫu thiết kế lời nhắc nhập dữ liệu đầu vào (Input Prompt)
Sử dụng kết hợp với chú thích để giải thích thêm về loại đầu vào cần thiết
Màn hình tại last.fm sử dụng mẫu lời nhắc đầu vào để hướng dẫn bạn điền thông tin về loại nhạc bạn thích. Biểu mẫu tìm kiếm tại everyblock.com sử dụng biểu mẫu nhắc đầu vào 2. Các mẫu thiết kế để giải thích quy trình cụ thể (explaining the process)2.1 Mẫu thiết kế “thuật sĩ” (Wizard/ Setup Wizard)
Trình "thuật sĩ" được sử dụng để nhận báo giá bảo hiểm tại homesite.com, sử dụng tab được đánh dấu trong menu để truyền đạt mục đích của từng bước, sử dụng mẫu thiết kế mặc định để chọn các tùy chọn, thông báo rõ ràng về độ dài của trình hướng dẫn "thuật sĩ", cũng như khoảng cách người dùng đã sử dụng các nút điều hướng lớn, có tất cả nội dung trong màn hình đầu tiên và cung cấp một giải pháp thay thế tuyệt vời cho trình hướng dẫn bằng cách cho phép người dùng nói chuyện với một người ngoài đời thực để được hỗ trợ.
Khi đăng ký một tài khoản Facebook mới, trình Wizard sẽ hướng dẫn bạn các thủ tục đăng ký Trình "thuật sĩ" tại Yammer 2.2 Mẫu thiết kế các bước/ quy trình còn lại, thể hiện luồng quy trình nhập liệu (Steps Left/ Workflow)
Facebook sử dụng mẫu các bước còn lại để cho người dùng thấy thời gian chờ khi xem xét một chiến dịch quảng cáo mà họ đã gửi.
Thanh tiến trình rất rõ ràng và đơn giản được sử dụng tại furiousaries.com Thanh tiến trình tại Diagnosite 2.3 Mẫu thiết kế thước đo độ hoàn thiện (Completeness meter/ Progress Bar/ Percentage Done Meter/ Progress Indicator)
Thước đo mức độ hoàn thiện tại udemy.com cho thấy sự tiến bộ của học viên trong quá trình tham gia một khóa học trực tuyến
Thước đo độ hoàn thiện được MapMyRun.com sử dụng để đánh giá mức độ đạt được các mục tiêu về thể chất mà người dùng đã đặt ra Thước đo độ hoàn thiện tại Gmail cho người dùng hình dung được tiến độ hoàn thiện thiếp lặp tài khoản của người dùng 2.4 Mẫu thiết kế hộp trợ giúp nội tuyến (Inline Help Box)
Hộp trợ giúp nội tuyến tại scapblog.com giúp bạn bắt đầu sử dụng ứng dụng web
Người dùng Twitter sự dụng hộp trợ giúp nội tuyến để thông báo các thay đổi đối với dịch vụ, mẹo sử dụng twitter,.... Các hộp bao gồm nút để đóng và ẩn, nút để thực hiện hành động được mô tả,... Twitter.com cũng sử dụng thiết kế này để giới thiệu tính năng mới cho người dùng 3. Các mẫu thiết kế hướng về cộng đồng (community driven)3.1 Mẫu thiết kế tính năng bình chọn (vote to promote)
Tại stackoverflow.com, bạn có thể đặt các câu hỏi kỹ thuật và nhận được câu trả lời từ mọi người. Các câu trả lời được đưa ra sau đó sẽ được bình chọn, từ đó chọn ra câu trả lời hữu ích nhất sẽ đứng đầu (gần nhất với câu hỏi)
Sách Tóm lược Công dân (Citizens Briefing Book) tại change.gov cho phép tất cả người dùng đề xuất ý tưởng để chính quyền Obama-Biden theo đuổi. Mỗi ý tưởng có thể được bình chọn (lên hoặc xuống) và bình luận nội dung. Mẫu thiết kế tính năng bình chọn được sử dụng tại dotnetkicks.com. Có thể thấy cách trang web đã cố tạo ra nguyên tắc bình chọn của riêng họ - thay vì like/ vote up thì sẽ là để "kick", càng nhiều "kick" là càng được ủng hộ 3.2 Mẫu thiết kế gắn cờ và báo cáo (flagging & reporting)
Nội dung báo cáo, gắn cờ do người dùng tạo, từ đó quản trị viên sẽ xem lại và xét duyệt nội dung 3.3 Mẫu thiết kế thanh toán để thúc đẩy (Pay To Promote)
Trang web hẹn hò OKCupid sẽ tăng số lượng người xem hồ sơ của người dùng có trả phí
Nếu bạn sở hữu một trang Facebook, bạn có thể thúc đẩy các bài đăng của mình được hiển thị cho nhóm khách hàng the cài đặt của bạn, không nhất thiết là những người đã theo dõi trang của bạn 3.4 Mẫu thiết kế xếp hạng nội dung (rate content)
Tại kelkoo, cả sản phẩm và người bán đều được xem xét. Xếp hạng của người bán được hiển thị bên cạnh giá của họ cho một sản phẩm nhất định và mô tả bằng văn bản về từng ưu đãi cho từng người bán
Tại Netflix, một thuật toán đề xuất các bộ phim có thể cho xem dựa trên mức độ phù hợp của xếp hạng mà bạn đã đánh giá và những sản phẩm bạn đã xem trước đó Tại eBay, người bán sản phẩm sẽ được xếp hạng sau khi mỗi giao dịch kết thúc. Số lượng đánh giá tích cực giúp người mua quyết định có tin tưởng người bán hay không. 3.5 Mẫu thiết kế trang wiki (wiki)
Wiki giúp các tài liệu luôn được cập nhật theo thời gian.
Trang wiki tại wikipedia.org Basecamp theo dõi các phiên bản khác nhau của tài liệu trên trang wiki và thời điểm thực hiện một thay đổi nhất định, mức độ thay đổi,... Trên là bài tổng hợp phần 1 các mẫu thiết kế giao diện người dùng do BAC tham khảo và tổng hợp. Hy vọng chuỗi bài viết (04 phần) sẽ hữu ích cho công việc và quá trình học tập của các bạn. Có đóng góp, bổ sung thêm cho BAC, bạn vui lòng liên hệ với BAC tại đây. Ngoài ra, BAC mời bạn tham khảo thêm các khoá học bổ ích thường xuyên được tổ chức tại BAC: |
