Các Mẫu Thiết Kế Giao Diện Người Dùng (Phần 1)

Trang chủ » Thiết Kế Người Dùng » Các Mẫu Thiết Kế Giao Diện Người Dùng (Phần 1)

Có thể bạn quan tâm

  • Các mẫu thiết kế giao diện người dùng - Phần 2 để tham khảo các mẫu thiết kế liên quan đến việc điều hướng (navigation) (sắp xuất hiện)

  • Các mẫu thiết kế giao diện người dùng - Phần 3 để tham khảo các mẫu thiết kế liên quan đến việc xử lý dữ liệu (dealing with data) (sắp xuất hiện)

  • Các mẫu thiết kế giao diện người dùng - Phần 4 để tham khảo các mẫu thiết kế liên quan đến mạng xã hội (social), onboarding và khác (sắp xuất hiện)

1. Các hình thức (forms) thiết kế thường gặp
1.1. Mẫu thiết kế WYSIWYG (hay còn gọi là “What You See Is What You Get)

  • Tóm tắt tình huống: Người dùng muốn tạo nội dung để chứa các tệp tin đa phương tiện và văn bản được định dạng, nhưng lại không có kiến thức hoặc thời gian để viết HTML.

  • Ví dụ:

WYSIWYG trong giao diện của trang Admin

1.2 Mẫu thiết kế công cụ đo độ mạnh của mật khẩu (Password Strength Meter)

  • Tóm tắt tình huống: Người thiết kế muốn đảm bảo mật khẩu của người dùng đủ mạnh để ngăn chặn các cuộc tấn công độc hại.

  • Ví dụ:

Thang đo các mức độ của mật khẩu

  • Một vài ví dụ khác:

Microsoft hỗ trợ người dùng chọn mật khẩu an toàn khi đăng ký ID trực tiếp

Chỉ báo độ mạnh của mật khẩu tại lynda.com

1.3 Mẫu thiết kế các mặc định (Good Defaults)

  • Tóm tắt tình huống: Người dùng cần nhập dữ liệu vào hệ thống, trong đó có một số giá trị đầu vào có nhiều khả năng khớp với các giá trị mặc định nhất. Việc thiết kế các mặc định này thường gặp ở các trang web du lịch. Tại đây, dữ liệu như ngày tháng, loại chuyến đi và giá cá sẽ được chọn trước, gợi ý cho người dùng những gì người dùng khác thường chọn. Các giá trị mặc định được thiết lập tốt sẽ giúp người dùng dễ dàng và nhanh chóng tìm kiếm cho chuyến đi của họ.

  • Ví dụ:

Các giá trị mặc định thường gặp ở các trang web du lịch

  • Một vài ví dụ khác:

Các giá trị mặc định được đề xuất trong quá trình điền thông tin để nhận báo giá bảo hiểm tại homesite.com

Khi thực hiện các bước đăng ký tài khoản trên Yammer, người dùng sẽ tuỳ chọn họ thuộc bộ phận nào trong công ty. Tại đây, Yammer đưa ra các phỏng đoán và giới thiệu cho người dùng các giá trị mặc định được cho là phù hợp người đăng ký nhất.

1.4 Mẫu thiết kế chọn ngày/tháng/năm (Calendar Picker/ Datepicker)

  • Tóm tắt tình huống: Người dùng muốn tìm, chọn hoặc gửi thông tin về ngày/ tháng/ năm hoặc phạm vi thời gian cụ thể.

  • Ví dụ:

Bộ chọn thời gian ở everyblock.com

  • Các ví dụ khác:
Bộ chọn thời gian trên trang du lịch của Yahoo

Bộ chọn thời gian ở travelstart.co.za

1.5 Mẫu thiết kế cho định dạng dễ dàng hơn (Forgiving Format)

  • Tóm tắt tình huống: Người dùng cần nhanh chóng nhập dữ liệu vào hệ thống, và cần được diễn giải dữ liệu cần nhập vào là gì.

  • Ví dụ:

Mẫu thiết kế này giúp cho người dùng biết được mình cần nhập thông tin như thế nào
  • Một vài ví dụ khác:

Thiết kế mà American Airliness sử dụng để giúp cho việc tìm đường bay thuận tiện hơn

Khi nhập số giờ đã sử dụng trong phần theo dõi thời gian của basecamp, các trường đầu vào chấp nhận nhiều hơn một định dạng là nửa giờ - cả 2,5 và 2,30 đều được tính là hai giờ rưỡi.

1.6 Mẫu thiết kế cho định dạng có cấu trúc (StructuredFormat)

  • Tóm tắt tình huống: Người dùng cần nhanh chóng nhập dữ liệu vào hệ thống nhưng định dạng của dữ liệu phải tuân theo cấu trúc được xác định trước.

  • Ví dụ:

Định dạng ngày tháng đây hiện đang là DD/MM/YY. Chúng ta còn có các kiểu định dạng khác như MM/DD/YYYY,... nên người dùng cầu lưu ý cấu trúc đã được xác định trước để tránh nhầm lẫn
  • Các ví dụ khác:

Trình duyệt homesite.com được thiết kế với hai loại mục nhập định dạng có cấu trúc được sử dụng. Trường đầu tiên là dành cho số an sinh xã hội, trong đó số được chia thành ba phần được phân tách bằng dấu gạch ngang. Trường còn lại dành cho trường ngày sinh, là trường đầu vào thông thường được chuyển đổi tiêu điểm bằng javascript thành ba phần riêng biệt: tháng, ngày và năm.

1.7 Mẫu thiết kế phản hồi cho dữ liệu đầu vào (Input Feedback)

  • Tóm tắt tình huống: Người dùng đã nhập dữ liệu vào hệ thống và mong nhận được phản hồi về kết quả của những lần thao tác đó.

  • Ví dụ:

Khi đăng ký tài khoản tại Twitter, ngay thời điểm người dùng nhập xong thông tin, họ sẽ nhận được phản hồi cho những gì đã nhập

  • Một vài ví dụ khác:

Tại LinkedIn, phản hồi được đưa ra cả ở từng trường cụ thể, cũng như ở đầu trang

Khi phạm lỗi trong quá trình đăng ký tài khoản tại beantalkapp.com, bạn sẽ được thông báo và phản hồi tại từng trường lỗi, cũng như hộp thông báo ở đầu trang.

1.8 Mẫu thiết kế cho điền vào chỗ trống (Fill in the Blanks)

  • Tóm tắt tình huống: Người dùng cần nhập dữ liệu vào hệ thống bằng cách điền vào các chỗ trống trên màn hình.

  • Ví dụ:

Một trong những thiết kế hỗ trợ việc nhập dữ liệu bằng hình thức điền vào chỗ trống

  • Ví dụ khác:

Các trường điền vào chỗ trống trong iTunes của Apple

Moof.com coi trọng việc điền vào mô hình khoảng trống, cung cấp một bản biểu mẫu đăng nhập và đăng nhập hoàn toàn theo mô hình này

1.9 Mẫu thiết kế công nghệ kiểm soát Morphing (Morphing Controls)

  • Tóm tắt tình huống: Người dùng chỉ muốn được hiển thị các chế độ/ điều khiển phù hợp với hiện tại.

  • Ví dụ:

Khi bạn chọn nhấp vào nút "Theo dõi" màu sáng trên hồ sơ Twitter, nút này sẽ chuyển thành chữ "Đang theo dõi" và bây giờ có xanh đậm so với văn bản màu trắng.

1.10 Mẫu thiết kế phím tắt bàn phím (Keyboard Shortcuts)

  • 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.

  • Ví dụ:

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 ví dụ khác:

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)

  • Tóm tắt tình huống: Người dùng muốn giữ cho dữ liệu của họ an toàn và được lưu tự động trong khi họ đang tập trung vào làm việc mà không cần phải nhớ và liên tục thao tác lưu bằng tay.

  • Ví dụ:

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

  • Tóm tắt tình huống: Người dùng (thường xuyên) cần thực hiện một truy vấn tìm kiếm dựa trên một bộ quy tắc tùy chỉnh.

  • Ví dụ:

Mỗi quy tắc được đặt tiêu chí phù hợp cho từng quy tắc

  • Các ví dụ khá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)

  • Tóm tắt tình huống: Người dùng cần nhanh chóng và dễ dàng chỉnh sửa giá trị trên một trang.

  • Ví dụ:

Trình chỉnh sửa tiêu đề trang

  • Một ví dụ khác:

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)

  • Tóm tắt tình huống: Người dùng cần thực hiện các thao tác trên một hoặc nhiều đối tượng bằng cách di chuyển chúng từ nơi này sang nơi khác.

  • Ví dụ:

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)

  • Tóm tắt tình huống: Người dùng muốn trải nghiệm giao diện chính nhiều hơn.

  • Ví dụ:

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)

  • Tóm tắt tình huống: Người dùng muốn kiểm tra xem các thay đổi ảnh hưởng như thế nào đến kết quả cuối cùng càng nhanh càng tốt.

  • Ví dụ:

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)

  • Tóm tắt tình huống: Người dùng muốn hoàn nguyên dữ liệu vừa nhập vì nhiều lí do, chủ yếu là do nhầm lẫn.

  • Ví dụ:

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)

  • Tóm tắt tình huống: Người dùng cần một vị trí trung tâm để chỉ ra các tùy chọn về cách ứng dụng sẽ hoạt động.

  • Ví dụ:

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)

  • Tóm tắt tình huống: Người thiết kế thúc đẩy (giúp đỡ) người dùng nhập dữ liệu vào hệ thống.

  • Ví dụ:

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

  • Các ví dụ khác:
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)

  • Tóm tắt tình huống: Người dùng muốn đạt được một mục tiêu duy nhất và các tác vụ có thể được chia thành các phần nhỏ.

  • Ví dụ:

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ợ.

  • Các ví dụ khác:

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)

  • Tóm tắt tình huống: Người dùng sắp trải qua quá trình hoàn dữ liệu qua nhiều bước và cần được hướng dẫn và biết được mình đã hoàn thiện quá trình được bao nhiêu phần trăm/ bước.

  • Ví dụ:

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.

  • Tham khảo thêm các ví dụ:

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)

  • Tóm tắt tình huống: Người dùng muốn hoàn thành mục tiêu nhưng cần được hướng dẫn về thời điểm đạt được và cách đạt được mục tiêu.

  • Ví dụ:

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

  • Một vài ví dụ khác:

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)

  • Tóm tắt tình huống: Người dùng cần hỗ trợ ở các tương tác mà họ sắp thực hiện.

  • Ví dụ:

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

  • Tham khảo thêm các ví dụ bên dưới:

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óm tắt tình huống: Người dùng muốn quảng cáo một phần nội dung cụ thể để mọi người sẽ bình chọn nội dung nào phổ biến/ bổ ích hơn.

  • Ví dụ:

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)

  • Một vài ví dụ khác:

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)

  • Tóm tắt tình huống: Người dùng muốn báo cáo, đánh dấu nội dung không phù hợp để kiểm duyệt

  • Ví dụ:

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)

  • Tóm tắt tình huống: Người dùng có nhu cầu thanh toán và sử dụng dịch vụ với các mục đích như ưu tiên nội dung quảng cáo của họ,... để tăng phạm vi tiếp cận và thu hút khách hàng.

  • Ví dụ:

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í

  • Hoặc một ví dụ khác như:

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óm tắt tình huống: Người dùng muốn quảng cáo một phần nội dung để giúp khách hàng quyết định liệu nội dung đó có phù hợp/ xứng đáng hay không?

  • Ví dụ:

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

  • Bạn có thể tham khảo thêm các thiết kế khác như:
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)

  • Tóm tắt tình huống: Bạn muốn tạo một kho lưu trữ cho trang web hoặc ứng dụng của mình, nơi người dùng có thể cùng đóng góp và quản lý thông tin (cộng tác viên) nội dung công khai trên web.

  • Ví dụ:

Wiki giúp các tài liệu luôn được cập nhật theo thời gian.

  • Tham khảo thêm các trang Wiki khác:

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:

  • Product Design
  • Nguyên lý cơ bản trong UI/UX

Nguồn tham khảo:

http://ui-patterns.com/patterns

Nhu cầu đào tạo doanh nghiệp

BAC là đơn vị đào tạo BA đầu tiên tại Việt Nam. Đối tác chính thức của IIBA quốc tế. Ngoài các khóa học public, BAC còn có các khóa học in house dành riêng cho từng doanh nghiệp. Chương trình được thiết kế riêng theo yêu cầu của doanh nghiệp, giúp doanh nghiệp giải quyết những khó khăn và tư vấn phát triển.

CÁC KHOÁ HỌC BUSINESS ANALYST BACs.VN DÀNH CHO BẠN

Khoá học Online:

  • Chìa khoá thành công dành cho Business Analyst

  • Công cụ & Kỹ năng dành cho Business Analyst

Khoá học Offline:

Tại Tp.HCM:

  • Phân tích nghiệp vụ cơ bản 3.0

  • Phân tích nghiệp vụ nâng cao 3.0

  • Luyện thi chứng chỉ IIBA 3.0

Tại Hà Nội:

  • Hà Nội - Phân tích nghiệp vụ 3.0

  • Hà Nội - Phân tích nghiệp vụ nâng cao 3.0

Tham khảo lịch khai giảng TẤT CẢ các khóa học mới nhất

Ban biên tập nội dung - BAC

Từ khóa » Thiết Kế Người Dùng