Với tư cách là một nhà thiết kế website, bạn không chỉ thiết kế giao diện UI mà còn phải suy nghĩ đến UX – trải nghiệm người dùng trên trang web. Trong bài viết này, chúng tôi sẽ chia sẻ 5 website có thiết kế UX tốt nhất để tạo nguồn cảm hứng cho bạn.
Trước tiên, chúng ta hãy thảo luận về những điều cơ bản. Sự khác biệt giữa UX và UI là gì và bạn có thực sự cần biết cả hai với tư cách là một nhà thiết kế website không?
UX là gì?
Trải nghiệm người dùng (viết tắt: UX), là một thuật ngữ chung để mô tả trải nghiệm tổng thể mà người dùng có khi tương tác với một sản phẩm digital như website, app. Một số công việc mà nhà thiết kế UX thực hiện cho một dự án là kiểm tra người dùng (testing), phân luồng người dùng (user flow), bản đồ hành trình (journey map), tạo khung (wireframe), thiết kế giao diện người dùng (UI) và tạo các nguyên mẫu (prototypes). Về cơ bản, UX bao gồm toàn bộ quá trình end-to-end.
Wireframe là phần quan trọng của quá trình thiết kế UX, đây là cách bạn vạch ra nội dung cho các trang đích riêng lẻ cũng như cách các trang này tương tác với nhau để tạo ra hành trình người dùng. Wireframe bao gồm từ bản phác thảo bằng giấy bút đơn giản đến các mô hình thiết kế với độ chi tiết thấp và cao, mỗi loại phục vụ một mục đích trong quá trình thiết kế.
Khi bắt đầu thiết kế, bạn có thể muốn phác thảo nhanh bằng tay để có nhiều ý tưởng hơn. Sau đó, tạo các wireframe có độ chi tiết cao để chia sẻ suy nghĩ của mình và nhận phản hồi từ khách hàng hoặc để kiểm tra người dùng.
Ngoài ra, một phần của quy trình thiết kế UX là tạo mẫu (prototype), ở đây bạn sẽ làm cho wireframe của mình trở nên sống động như thể một người dùng đang thực sự tương tác với sản phẩm của bạn.
UI là gì?
UI (giao diện người dùng) liên quan việc thiết kế giao diện cho một trang web hoặc ứng dụng. Khi bạn thiết kế giao diện UI, bạn phải có kỹ năng thiết kế trực quan. Bạn sẽ làm việc với hệ thống lưới, kiểu chữ, màu sắc và bố cục để sắp xếp thông tin một cách rõ ràng và ngắn gọn phù hợp với điều hướng của người dùng; như tinh chỉnh các chi tiết và đưa ra các thiết kế kích thước nút, màu sắc và các góc bo tròn, vuông …
Bạn có thể làm việc trên wireframe nhưng phần lớn bạn sử dụng các wireframe này và tạo các mô hình UI để phát triển. Hãy xem ví dụ sau, bắt đầu với wireframe ở bên trái và thiết kế giao diện UI cuối ở bên phải. Lưu ý rằng cấu trúc vẫn giữ nguyên, sự khác biệt duy nhất là bổ sung các yếu tố màu sắc, kiểu chữ, hình minh họa và thiết kế.
5 website có thiết kế UX tốt nhất để học hỏi
Bạn đã có cơ sở để hiểu về thiết kế UX và UI, hãy cùng xem qua các website có trải nghiệm tốt nhất mà bạn có thể đã gặp khi là bạn là người dùng.
Netflix
Netflix là một ví dụ tuyệt vời về trải nghiệm UX. Từ trang web đến cách thiết kế ứng dụng cho di động và TV, tất cả các nền tảng đều mang lại một trải nghiệm liền mạch cho người dùng.
Với một sản phẩm như Netflix, bạn phải xem xét ý định của người dùng. Khi ai đó đăng nhập vào Netflix, họ đã muốn xem một nội dung nào đó ngay lập tức. Họ có thể đã biết những chương trình nào họ muốn xem nhưng nhiều khả năng họ sẽ cần phải duyệt qua một chút. Netflix đã có những thiết kế đúng đắn để giúp người dùng trong trải nghiệm hành trình này.
Trước tiên, nửa trên của màn hình tự động phát sau vài giây, điều này giúp người dùng cảm nhận về bộ phim hoặc chương trình từ đoạn trailer. Nếu ai đó quan tâm và muốn tìm hiểu, họ có thể tùy chọn nhấn phát hoặc thêm thông tin.
Khi bạn cuộn qua nhiều lựa chọn hơn về nội dung, bạn sẽ nhận được tính năng tự động phát, tương tự như khi bạn lướt qua một hình thu nhỏ trong vài giây. Mặc dù tính năng này giúp giải quyết vấn đề cho người dùng khi họ tìm thứ gì đó mà họ quan tâm, nhưng nó cũng có thể gây phiền sau một thời gian xem. Netflix đã nghĩ đến điều này và cung cấp cho người dùng tính năng tùy chọn tắt âm thanh và preview trong khi lướt website.
Chúng ta có thể học được gì từ tính năng này của Netflix?
Hãy suy nghĩ về cách bạn có thể giải quyết vấn đề của người dùng nhưng cũng xem xét các giải pháp thay thế khác trong trường hợp họ không muốn sử dụng giải pháp của bạn.
Paypal
Với một sản phẩm toàn diện như PayPay, điều quan trọng là phải thiết kế UX hiệu quả. Họ có nhiều kiểu người dùng đến trang web và ứng dụng của họ với những lý do khác nhau. Đây là ảnh chụp màn hình của trang dashboard khi bạn đăng nhập vào tài khoản của mình. Điều đầu tiên bạn thấy là số dư PayPal của bạn với tùy chọn chuyển tiền. Sau đó, theo dõi bản tóm tắt các hoạt động gần đây với các giao dịch mới nhất. Tiếp đó, hệ thống phân cấp chia thành nhiều hành động.
Tùy chọn Gửi và Yêu cầu nổi bật ở các nút tròn màu xanh dương lớn phía trên cùng bên phải. Nhỏ hơn là một số nút hướng đến người bán.
Khi bạn nhấp vào để gửi tiền, bạn sẽ gặp một trang đơn giản nhưng đầy đủ thông tin giúp bạn thực hiện các thao tác dễ dàng. Có một số tùy chọn như nhập tên, tên người dùng, email hoặc số điện thoại để xác định người bạn đang gửi. Ở phía bên phải có 6 dòng văn bản ghép với các biểu tượng để bạn hiểu cách gửi tiền trong nháy mắt.
Chúng ta có thể học được gì từ cách PayPal thiết kế UX/ UI?
Khi bạn đang thiết kế trang web cho một sản phẩm phức tạp phục vụ nhiều tệp khách hàng, hãy nghĩ về trọng tâm chính khi ai đó đăng nhập, điều gì sẽ có ý nghĩa cho tất cả những khách hàng khác nhau này khi họ xem đầu tiên?
Nhưng cũng đừng bỏ qua các lý do khác mà ai đó sử dụng sản phẩm, làm thế nào bạn có thể kết hợp hệ thống phân cấp trong các CTA (call-to-action) của mình?
Khi thiết kế cho các hành động như gửi tiền, hãy nghĩ cách bạn có thể thông báo cho người dùng về quy trình và giảm thiểu sự phân tâm từ các thiết kế.
Thiết kế UI và UX siêu đơn giản cho trang chủ Google.
Một trong những ví dụ đơn giản nhưng hiệu quả nhất về thiết kế UX là trang chủ Google. Tất cả chúng ta đều đã sử dụng vào một thời điểm nào đó và chúng ta sẽ tiếp tục quay lại vì lý do tương tự, nó giúp giải quyết vấn đề khi tìm kiếm câu trả lời trên website.
Tất cả những gì bạn cần làm là nhập câu hỏi của mình hoặc một cụm từ vào thanh tìm kiếm và bạn sẽ thấy tính năng tự động đề xuất, Google cố gắng đoán xem bạn đang tìm kiếm gì. Đây là một giải pháp lớn cho người dùng. Càng thêm nhiều từ, Google càng có nhiều khả năng đoán chính xác những gì người dùng đang tìm kiếm.
Chúng ta có thể học được gì từ thiết kế UX và UI của trang chủ Google?
Sự đơn giản chính là chìa khóa! Không phải lúc nào chúng ta cũng có thể giải quyết bằng một trang đích tối giản như Google nhưng hãy nghĩ về cách bạn đơn giản hóa các thao tác khi ai đó sử dụng trang web bạn thiết kế. Ngoài ra, hãy nghĩ về các thao tác tương tác giúp giải quyết vấn đề cho người dùng, như tính năng tự động đề xuất.
Airbnb
Hoạt động kinh doanh của Airbnb đã phát triển trong những năm qua. Bắt đầu là một trang web tìm nhà nghỉ đã phát triển thêm các trải nghiệm trực tuyến. Hãy xem trang chủ của họ thiết kế đơn giản và gọn gàng như thế nào. Ở trên cùng, bạn có thể ngay lập tức tìm kiếm nhà nghỉ bằng cách thêm vị trí, ngày nhận/ trả phòng, cũng như số lượng khách. Đây là lý do chính mà mọi người đến với Airbnb, nó đứng đầu về mức độ nổi bật nhưng không quá áp đảo.
Khi cuộn xuống, bạn có thể tìm kiếm các nhà nghỉ cho thuê ở gần đó, cho bạn thêm ý tưởng về các kỳ nghỉ gần nhà, đặc biệt là trong thời kỳ đại dịch đang diễn ra. Họ nhấn mạnh “sống ở bất cứ đâu” bằng cách hiển thị cho bạn những nơi bạn có thể chưa bao giờ nghĩ đến.
Khi bạn chuyển từ Địa điểm để ở (Places to Stay) sang Trải nghiệm trực tuyến (Online Experiences), bạn sẽ gặp thiết kế UX tương tự trên trang đích nhưng thay vào đó, bạn sẽ được khám phá các hoạt động và sở thích mới. Có các bộ lọc tuyệt vời dành cho nhóm, gia đình, động vật, nghệ thuật và viết lách, thể dục, v.v… nhanh chóng giúp bạn thu hẹp tìm kiếm để tìm thấy điều gì đó mới mẻ khi tận hưởng một mình hoặc với bạn bè.
Chúng ta có thể học được gì từ Airbnb?
Giữ cho thiết kế UX và UI của trang web được nhất quán ngay cả khi chia sẻ các khía cạnh khác nhau của doanh nghiệp. Bởi vì nhiều khả năng, bạn sẽ thiết kế một trang web cho doanh nghiệp có nhiều trọng tâm. Hãy nghĩ về những cách bạn có thể phục vụ tốt nhất cho từng bộ phận của doanh nghiệp nhưng vẫn giữ nguyên vài quy tắc thiết kế trong mọi nơi.
Duolingo
Duolingo là một ứng dụng học ngoại ngữ miễn phí, được cung cấp cả trên website và ứng dụng cho điện thoại di động. Lời tuyên bố của họ trên trang chủ khá đơn giản: “Học một ngôn ngữ miễn phí. Mãi mãi” . Ai sẽ không muốn bắt đầu?
Khi bạn nhấp vào CTA để Bắt đầu, bạn sẽ thấy được tất cả các ngôn ngữ có sẵn để học miễn phí. Từ tiếng Tây Ban Nha, tiếng Pháp, tiếng Đức, tiếng Ý, tiếng Bồ Đào Nha, tiếng Hà Lan, tiếng Nhật, v.v…, để phục vụ cho khán giả quốc tế.
Chúng ta có thể học được gì từ thiết kế UX và UI của Duolingo?
Sử dụng ngôn ngữ rõ ràng hỗ trợ mục tiêu của website, nêu chính xác những gì sản phẩm hoặc dịch vụ của bạn làm và cho phép người dùng bắt đầu ngay lập tức. Hãy suy nghĩ về cách để làm hài lòng người dùng bằng các hình ảnh minh họa vui nhộn và hòa nhập với các nền văn hóa khác nhau như khi Duolingo thử với trang đích của họ.
Nguồn:flux-academy.com