Khi tạo một trang web, ứng dụng hoặc bất kỳ sản phẩm kỹ thuật số nào; bạn muốn nó sử dụng dễ dàng và hiệu quả nhất có thể. Điều đó có thể có nghĩa là làm cho nút đăng nhập hiển thị trên trang chủ của trang web thành viên. Hoặc thêm biểu tượng giỏ hàng ở vị trí rõ ràng trên trang web thương mại điện tử để khách truy cập có thể truy cập trang thanh toán ngay lập tức. 

Những quyết định này là một phần của thiết kế giao diện người dùng (UI). Trong bài đăng này sẽ trình bày mọi thứ bạn cần biết về chủ đề này, bao gồm:

Thiết kế giao diện người dùng là gì 

Thiết kế giao diện người dùng là quá trình tạo ra giao diện của giao diện người dùng của ứng dụng. Giao diện người dùng (UI) bao gồm cả giao diện và tính tương tác của một ứng dụng. Màu sắc mà người dùng nhìn thấy, văn bản họ đọc, các nút họ nhấp vào và hoạt ảnh mà họ tương tác đều là một phần của giao diện người dùng của ứng dụng và do đó trách nhiệm của một nhà thiết kế giao diện người dùng.

Giao diện người dùng đóng một vai trò thiết yếu trong trải nghiệm người dùng. Sẽ không có trải nghiệm tốt nếu thiết kế của ứng dụng không trực quan hoặc không gắn kết – nhưng UI không giống với UX. Khi so sánh UX và UI , bạn sẽ thấy UX là một thuật ngữ bao trùm hơn. Đây là quá trình nghiên cứu, phát triển, thử nghiệm và tinh chỉnh tất cả các khía cạnh của sản phẩm để đảm bảo đáp ứng nhu cầu và mong đợi của người dùng. Mặt khác, UI mang tính thẩm mỹ cao hơn, chỉ tập trung vào phần trình bày của sản phẩm.

Tuy nhiên, điều đó không có nghĩa là công việc của nhà thiết kế giao diện người dùng là dễ dàng. Họ phải quyết định xem sẽ đặt gì trên trang và ở đâu. Lưu ý đến thứ bậc và tính tương tác của các yếu tố, nhà thiết kế giao diện người dùng phải đảm bảo rằng mọi yếu tố hình ảnh đều hấp dẫn, lôi cuốn và phù hợp với các yếu tố khác trên trang cũng như toàn bộ thương hiệu.

Nguyên tắc thiết kế giao diện người dùng

Mặc dù mọi ứng dụng sẽ yêu cầu một giao diện duy nhất, nhưng có một số nguyên tắc cơ bản cần hướng dẫn cho bất kỳ dự án nào. Bạn sẽ tìm thấy hàng tá sách trực tuyến và trong sách giáo khoa, nhưng có một số ít được biết đến và coi trọng nhất. Chúng bao gồm 10 phương pháp hữu ích cho thiết kế giao diện người dùng  của Jakob Nielsen, Tám quy tắc vàng về thiết kế giao diện  của Ben Shneiderman và Nguyên tắc thiết kế tương tác  của Bruce Tognazzini. Hầu hết các nguyên tắc này đều trùng lặp, vì vậy chúng tôi sẽ cô đọng và tóm tắt chúng dưới đây.

1. Hãy nhất quán.

Sự nhất quán về màu sắc bạn làm nổi bật, kiểu chữ bạn chọn, hoạt ảnh bạn tạo – ngay cả trong từ ngữ bạn sử dụng – sẽ dẫn đến sự gắn kết tổng thể trong giao diện của bạn, điều quan trọng đối với trải nghiệm người dùng và đặc trưng thương hiệu của bạn.

Ví dụ: Trên một biểu mẫu, nội dung nút là “Submit” và trên một biểu mẫu khác là “Send”. Người dùng của bạn không cần phải tự hỏi liệu những từ khác nhau này có nghĩa giống nhau hay không. Tạo bản sao tất cả các nút cho biểu mẫu “Submit” hoặc “Send” sẽ duy trì tính nhất quán nội bộ, đây là một nửa của nguyên tắc này.

Cái khác là tính nhất quán bên ngoài. Điều đó có nghĩa là bạn muốn tuân theo các quy ước của các sản phẩm khác để tránh ép buộc người dùng của bạn phải học điều gì đó mới.

Ví dụ: trong menu điều hướng của hầu như bất kỳ trang web nào, bạn sẽ tìm thấy một tùy chọn có nhãn “Home”. Điều này đề cập đến trang chủ của nó. Bạn có một tùy chọn điều hướng “House”. Hầu hết người dùng sẽ hiểu điều đó có nghĩa là homepage, nhưng không phải là không dành thêm một hoặc hai giây để tìm hiểu nó. Bạn có thể tránh tăng tải nhận thức của người dùng theo cách này bằng cách tuân theo các quy ước do các trang web và ứng dụng khác đặt ra.  

2. Làm cho người dùng cảm thấy kiểm soát.

Bạn muốn làm cho người dùng cảm thấy như họ đang kiểm soát giao diện họ sẽ dành nhiều thời gian hơn khám phá và tìm hiểu ứng dụng. Điều đó tạo điều kiện cho họ phạm sai lầm hoặc đảo ngược hành động của họ. Vì vậy, cửa sổ bật lên phải có các nút đóng rõ ràng, trang thanh toán phải có cách dễ dàng, rõ ràng để quay lại hoặc chỉnh sửa thông tin giỏ hàng, trình chỉnh sửa phải có các tùy chọn hoàn tác và làm lại, v.v.

Một ví dụ về hộp đèn bật lên trên LoveOhLou, cung cấp cho người dùng các tùy chọn để nhập địa chỉ email của họ hoặc nhấp vào nút đóng.

3. Cung cấp thông tin phản hồi.

Một cách khác bạn có thể tạo niềm tin cho người dùng là cung cấp cho họ phản hồi khi họ điều hướng và tương tác với giao diện. Điểm phản hồi đầu tiên có thể là hoạt ảnh đang tải cho người dùng biết rằng yêu cầu truy cập trang của họ đã thành công và nội dung đang được truy xuất. Có rất nhiều cách khác mà bạn có thể thông báo cho người dùng.

Ví dụ: lấy một thông báo xác nhận đơn đặt hàng trên một trang web thương mại điện tử. Thông báo cho người dùng rằng đơn đặt hàng của họ đã được xác nhận có thể mang lại cảm giác nhẹ nhõm hoặc thành tựu. Nếu không, người dùng có thể không rõ liệu đơn đặt hàng của họ có thành công hay không và thử lại và sao chép đơn đặt hàng hoặc thoát ra trước khi đặt.

Một ví dụ khác là cho người dùng biết họ còn bao xa để được giao hàng miễn phí trước khi thanh toán. Wrap Life cung cấp thông tin quan trọng này để đặt kỳ vọng của người dùng về chi phí cuối cùng của họ và khuyến khích người dùng chi tiêu nhiều hơn.

4. Cho phép người dùng giải quyết lỗi.

Giao diện người dùng không thể chỉ cho phép người dùng mắc lỗi và dừng lại ở đó. Nó cũng phải cho phép họ khắc phục những sai lầm đó. Đó là nơi xuất hiện các thông báo lỗi. Một thông báo lỗi sử dụng ngôn ngữ đơn giản và hình ảnh rõ ràng để chỉ ra sự cố. Đề xuất giải pháp sẽ cho phép người dùng hiểu, khắc phục và tránh được lỗi tương tự trong tương lai.

Một ví dụ phổ biến về thông báo lỗi là thông báo “mật khẩu không chính xác” mà bạn sẽ nhận được trên trang đăng nhập. Thông báo này thường sẽ đề xuất hai cách để giải quyết vấn đề: một, bạn có thể thử nhập lại mật khẩu của mình hoặc hai là bạn có thể đặt lại mật khẩu của mình.

Trên Package Free Shop, nó sẽ chỉ cung cấp thông báo lỗi rằng địa chỉ email hoặc mật khẩu đã nhập không chính xác. Người dùng có thể tiếp tục cố gắng đoán kết hợp hoặc nhấp vào Quên mật khẩu để đặt lại.

5. Ngăn ngừa sai sót.

Bạn muốn cung cấp cho người dùng quyền tự chủ, nhưng đảm bảo họ vẫn có thể điều hướng giao diện và hoàn thành các hành động thành công. Đó là lý do tại sao bạn không chỉ nên có các cơ chế để phản ứng với các lỗi mà còn để ngăn chặn chúng. Bạn có thể ngăn lỗi bằng cách cung cấp cho người dùng các tùy chọn hoàn tác, các bước bắt buộc để xác nhận thông tin cá nhân hoặc thông tin thanh toán của họ, thông báo cảnh báo hoặc các ràng buộc ngăn người dùng hoàn thành hành động.

Cân nhắc những hạn chế thông thường mà bạn phải đối mặt khi thiết lập mật khẩu. Thông thường, mật khẩu phải đáp ứng một yêu cầu về độ dài nhất định, có sự kết hợp giữa các chữ cái và số, chứa ít nhất một ký tự đặc biệt và là duy nhất. Bạn không thể tạo mật khẩu cho đến khi bạn đáp ứng các yêu cầu này. Điều này giúp ngăn người dùng tạo mật khẩu mà người dùng khác đã chọn hoặc ứng dụng của bạn không thể chấp nhận hoặc xử lý chính xác. Nó cũng là một biện pháp an ninh.

Bạn sẽ thấy một ví dụ phổ biến khác về ngăn ngừa lỗi nếu điền không chính xác vào biểu mẫu. Ví dụ: nếu bạn để trống trường bắt buộc, bạn sẽ không thể gửi biểu mẫu. Thay vào đó, bạn sẽ nhận được thông báo lỗi yêu cầu bạn xem lại biểu mẫu và sửa lỗi. Đây là một ví dụ dưới đây.

6.  Đừng dựa vào người dùng để ghi nhớ thông tin.

Bất kể người dùng đang ở đâu trên giao diện, cho dù họ đã cuộn xuống cuối trang chủ hoặc nhấp vào để sẵn sàng thanh toán, họ sẽ có tất cả thông tin cần thiết để thực hiện bước tiếp theo. Họ không cần phải nhớ lại thông tin từ một phần khác của trang web của bạn hoặc tìm thấy thông tin đó bằng cách cuộn trang lên hoặc nhấn nút quay lại.

Ví dụ, giả sử bạn đang giảm giá. Mã được liệt kê trong một biểu ngữ bắt mắt trên trang chủ của bạn – nhưng không ở đâu khác trên trang web của bạn. Điều đó có nghĩa là khi người dùng ở trên một trang sản phẩm, họ có thể tự hỏi rằng mức giảm giá đó lần nữa là bao nhiêu. Hoặc nếu họ đang ở trang thanh toán, họ có thể phải quay lại trang chủ để sao chép mã. Trong quá trình tìm kiếm, họ có thể quyết định từ bỏ hoàn toàn giỏ hàng hoặc trang web của bạn.

Bạn có thể tránh tình trạng này bằng cách đảm bảo rằng thông tin dễ nhìn thấy hoặc dễ truy xuất trên toàn bộ giao diện người dùng. Đối với ví dụ trên, bạn có thể đặt một biểu ngữ có mã giảm giá trên mỗi trang trên trang web của mình để dễ dàng tìm thấy bất kể người dùng ở đâu.

Khi cung cấp chiết khấu, cửa hàng giày dép dựa trên UX COIX có hình ảnh anh hùng trên trang chủ cũng như các biểu tượng hiển thị số tiền giảm giá trên trang lưu trữ sản phẩm. Nó cũng hiển thị giá đã giảm trên từng trang sản phẩm riêng lẻ để người dùng không phải nhớ lại số tiền giảm giá hoặc thực hiện bất kỳ phép toán nào để tìm ra giá mới.

7. Giữ cho nó đơn giản.

Giữ cho giao diện người dùng đơn giản không có nghĩa là làm cho nó phẳng và tránh đổ bóng, hiệu ứng hoặc các yếu tố trang trí khác. Nó chỉ có nghĩa là sử dụng một cách tiếp cận tối giản khi thiết kế giao diện. Hãy suy nghĩ: tôi phải bao gồm những yếu tố nào để người dùng có thể hoàn thành mục tiêu của họ. Bất kỳ thứ gì khác sẽ cạnh tranh để giành được sự chú ý của người dùng và có khả năng tốt hơn là nên bỏ qua.

8. Thiết kế cho các loại người dùng khác nhau.

Giả sử bạn đang thiết kế giao diện cho hệ thống quản lý nội dung . Một số người dùng có thể có nhiều kinh nghiệm với các nền tảng CMS khác, trong khi những người khác có thể chưa từng sử dụng nền tảng này trước đây. Đó là lý do tại sao điều quan trọng là phải thiết kế với cả chuyên gia và người mới bắt đầu.

Bạn có thể làm điều này bằng cách cung cấp các bản trình diễn hoặc gợi ý chú giải công cụ cho người mới bắt đầu, các phím tắt và các trình tăng tốc khác cho các chuyên gia. Tất cả các tính năng này nên có các tùy chọn để bỏ qua hoặc thoát ra bất kỳ lúc nào. Bằng cách đó, những người dùng cần hướng dẫn có thể sử dụng bản trình diễn và đề xuất, trong khi những người dùng nâng cao hơn có thể bắt đầu sử dụng nền tảng và các phím tắt của nó.

Bảng điều khiển quản trị WordPress cung cấp một ví dụ tuyệt vời. Người mới bắt đầu có thể nhấp vào tab Trợ giúp để tìm thông tin về điều hướng, bố cục và nội dung của trang tổng quan cũng như các liên kết để hỗ trợ các chủ đề hoặc tài liệu. Người dùng cao cấp hơn có thể chỉ cần thu nhỏ tab này.  

Cách thiết kế giao diện người dùng cho trang web

1. Hiểu điểm khó của người dùng.

Hiểu điểm khó của người dùng là bước đầu tiên cần thiết trong quy trình thiết kế giao diện người dùng (và quy trình thiết kế UX). Nó không chỉ là về nhân khẩu học. Họ bao nhiêu tuổi, họ sống ở đâu – đây không phải là những câu hỏi quan trọng nhất. Bạn phải hiểu những gì người dùng của bạn cần (bao gồm cả những gì họ không biết là họ cần), những kỳ vọng họ có và những thách thức họ phải đối mặt trong việc hoàn thành nhiệm vụ của mình. Chỉ khi đó, bạn mới có thể tạo giao diện người dùng đơn giản và hiệu quả để sử dụng nhất có thể.

Hơn cả dữ liệu và phân tích, điều này sẽ cần sự đồng cảm. Phỏng vấn, khảo sát trực tuyến và các phiên kiểm tra người dùng chỉ là một vài cách bạn có thể có được thông tin chi tiết về những người sẽ sử dụng trang web của bạn. Những thông tin chi tiết này sẽ cung cấp thông tin cho mọi giai đoạn của quá trình thiết kế giao diện người dùng.

2. Viết câu chuyện của người dùng.

Sau khi thực hiện các cuộc phỏng vấn, khảo sát và kiểm tra người dùng, bạn sẽ có nhiều thông tin phong phú về người dùng của mình. Một cách để sử dụng và sắp xếp thông tin này là tạo câu chuyện của người dùng. Theo kiến ​​trúc sư UI / UX Tom Brinton trong một bài báo trên UXBooth , câu chuyện của người dùng mô tả một mục tiêu cơ bản mà người dùng muốn đạt được khi sử dụng ứng dụng. Chúng thường chỉ có một câu và tuân theo định dạng sau: “Với tư cách là người dùng, tôi muốn… [một số mục tiêu].”

Hãy nghĩ về một số mục tiêu mà người dùng trên bộ dịch vụ giao bữa ăn có thể muốn đạt được. Dưới đây là một số ví dụ sử dụng định dạng câu chuyện người dùng:

• “Với tư cách là người dùng, tôi muốn tạo một tài khoản mới.”
• “Với tư cách là người dùng, tôi muốn đăng nhập.”
• “Với tư cách là người dùng, tôi muốn thêm thông tin thanh toán của mình.”
• “Với tư cách là người dùng, tôi muốn thay đổi địa chỉ của mình.”
• “Với tư cách là người dùng, tôi muốn thay đổi tần suất nhận hàng của mình”.
• “Là một người dùng, tôi muốn thay đổi ngày tôi nhận được hàng của mình”.

Bạn cần phải phân tích thêm rất nhiều câu chuyện của người dùng để xác định tất cả các mục tiêu của người dùng đối với bộ dịch vụ giao bữa ăn. Mặc dù bước này có thể mất một khoảng thời gian đáng kể, nhưng nó sẽ đáng để bạn nỗ lực. Việc xác định câu chuyện của người dùng trước tiên sẽ đảm bảo rằng nhu cầu và hành vi của người dùng quyết định thiết kế và chức năng của ứng dụng – chứ không phải ngược lại.

3. Kiểm kê giao diện.

Bây giờ bạn đã có một ý tưởng rõ ràng về những gì người dùng muốn và cần, bạn có thể tạo một kho các yếu tố và tính năng giao diện người dùng cần thiết để người dùng hoàn thành mục tiêu của họ. Nhà thiết kế web Brad Frost gọi đây là “ kho giao diện ”. Bạn sẽ cần kiểu chữ, hình ảnh, phương tiện, bảng, biểu mẫu, nút, hệ thống điều hướng và bất kỳ tỷ lệ cược và kết thúc nào khác tạo nên một giao diện.

Nếu bạn và nhóm của bạn đã thiết kế một số thành phần này hoặc sử dụng chúng trong các tài liệu tiếp thị khác, thì Frost khuyên bạn nên chụp ảnh màn hình của chúng và biên dịch và phân loại chúng trong PowerPoint. Bạn sẽ có thể xác định bất kỳ sự mâu thuẫn nào ở giai đoạn này – có thể bạn đã thiết kế một nút với các cạnh tròn và một thành viên khác trong nhóm thiết kế nó với các cạnh hình vuông – và bắt đầu xác định các mẫu. Điều này sẽ rất tốt cho việc hợp lý hóa quy trình thiết kế giao diện người dùng.

4. Xác định các mẫu thiết kế.

Khi hoàn thành khoảng không quảng cáo giao diện của mình, bạn có thể xác định các mẫu thiết kế phổ biến. Mẫu thiết kế  là giải pháp chung cho các vấn đề lặp lại trong thiết kế phần mềm. Chúng không phải là mã, mà là một mẫu hoặc mô tả để giải quyết một vấn đề có thể áp dụng cho các tình huống khác nhau. Ví dụ, giả sử vấn đề là một trang web có nhiều phần, nhưng không gian hạn chế cho menu điều hướng. Trong trường hợp đó, menu thả xuống theo chiều dọc  có thể là một giải pháp. Việc xác định các mẫu này sẽ giúp duy trì tính nhất quán và hiệu quả trong quá trình thiết kế giao diện người dùng.

5. Tạo một mẫu thử nghiệm.

Nguyên mẫu là một bố cục bán chức năng cung cấp bản xem trước có độ trung thực cao về giao diện của ứng dụng thực tế sẽ trông như thế nào. Hầu hết các nguyên mẫu sẽ không có đầy đủ chức năng của ứng dụng, nhưng nó sẽ mô phỏng cách ứng dụng sẽ hoạt động và cho phép khách hàng và các bên liên quan khác nhấp vào xung quanh giao diện. Với nguyên mẫu, các nhà thiết kế giao diện người dùng và các bên liên quan khác có thể chứng minh và thảo luận về cách các phần tử sẽ hoạt động, kiểm tra ý tưởng của họ và thực hiện các thay đổi. Ở giai đoạn này, các nhà thiết kế giao diện người dùng thường giao các thiết kế của họ cho một nhà phát triển để bắt đầu triển khai.

Bây giờ chúng ta đã hiểu các bước của quy trình thiết kế giao diện người dùng và việc tạo mẫu quan trọng như thế nào, hãy cùng xem xét một số công cụ có thể giúp bạn tạo các nguyên mẫu tương tác và đáp ứng.

Công cụ thiết kế giao diện người dùng

1. Justinmind

Justinmind là một công cụ miễn phí để thiết kế các nguyên mẫu đáp ứng và tương tác đầy đủ. Bạn có thể thiết kế kiểu, kích thước và bố cục của các phần tử giao diện người dùng để phù hợp với giao diện của các màn hình khác nhau và sử dụng đầy đủ các tương tác, hoạt ảnh và chuyển tiếp để thiết kế tính tương tác cho giao diện của bạn.

2. Phác thảo

Được sử dụng bởi hơn một triệu người, Sketch là một nền tảng thiết kế cho phép người dùng tạo nguyên mẫu trong khi cộng tác với một nhóm để biến ý tưởng của họ thành hiện thực. Là một công cụ dựa trên vectơ, Sketch cho phép bạn dễ dàng thay đổi kích thước bản vẽ, nguyên mẫu hoặc khung dây mà không làm giảm chất lượng. Để sử dụng Sketch, bạn có thể thanh toán một lần hoặc trả tiền thuê bao hàng tháng .

3. Marvel

Marvel là một công cụ linh hoạt để tạo wireframe, mockup và nguyên mẫu cho bất kỳ thiết bị nào. Bạn có thể tạo mô hình trong công cụ, tải lên hình ảnh của mình hoặc đồng bộ hóa thiết kế từ Sketch. Với Marvel, bạn sẽ nhận được hàng triệu nội dung, kho ảnh và biểu tượng để thêm vào thiết kế của mình. Tại bất kỳ thời điểm nào, bạn có thể cung cấp cho nhóm của mình hoặc các bên liên quan khác khả năng hiển thị về dự án của bạn và để lại nhận xét hoặc chú thích về thiết kế của người khác. Có một gói miễn phí cũng như hai gói cao cấp và một gói doanh nghiệp .

4. Wondershare Mockitt

Wondershare Mockitt Design là một công cụ tạo mẫu nhanh với thư viện các mẫu và nội dung giao diện người dùng được tích hợp sẵn. Bạn có thể kéo và thả các thành phần giao diện người dùng vào trang, tạo và sử dụng lại thư viện của riêng mình và làm việc trên cùng một trang với các thành viên trong nhóm để cộng tác trong thời gian thực. Có một phiên bản miễn phí ngoài hai gói đăng ký cao cấp .

5. Invision Studio

Invision Studio là một trong những công cụ tạo mẫu miễn phí phổ biến nhất trong giới thiết kế giao diện người dùng. Giống như Sketch, Invision Studio là một công cụ dựa trên vector. Điều đó có nghĩa là bạn có thể nhanh chóng và dễ dàng thiết kế, điều chỉnh và chia tỷ lệ các nguyên mẫu tương tác, có độ trung thực cao để phù hợp với bất kỳ màn hình nào một cách tự động. Bạn có thể chia sẻ thiết kế của mình bằng cách sử dụng các tính năng Boards của Invision Studio, đồng thời khách hàng và đồng đội có thể nhận xét trực tiếp về thiết kế của bạn.

6. Figma

Figma cung cấp các tính năng thiết kế mạnh mẽ cho các nhà thiết kế giao diện người dùng. Bạn có thể tạo nguyên mẫu hoạt hình trong thời gian ngắn hơn, điều chỉnh chúng với các kích thước màn hình khác nhau bằng cách sử dụng tính năng ràng buộc và sử dụng lại các phần tử trong các dự án của mình bằng tính năng thành phần. Bạn cũng có thể đồng chỉnh sửa cùng một dự án để đảm bảo bạn có thể đưa ra và phản hồi phản hồi khi thiết kế.

7. Adobe XD

Adobe XD là một công cụ tất cả trong một được các nhà thiết kế UI và UX sử dụng. Bạn có thể wireframe, tạo hoạt ảnh, tạo mẫu, cộng tác và hơn thế nữa. Vì nó dựa trên vector giống như Sketch và Invision Studio, Adobe XD cho phép bạn tạo các thiết kế có độ trung thực cao cho bất kỳ màn hình nào. Có gói miễn phí cũng như gói trả phí dành cho cá nhân và doanh nghiệp .

Ví dụ về thiết kế giao diện người dùng tốt nhất

Bạn biết quy trình và công cụ bạn cần để thiết kế giao diện người dùng. Bây giờ, hãy xem một số ví dụ từ các trang web và ứng dụng thực tế có thể truyền cảm hứng cho bạn để tạo dự án tiếp theo của mình.

1. Rượu + Hòa bình

Wine + Peace là một công ty sản xuất rượu sáng tạo luôn cố gắng kết nối người tiêu dùng với những nhà sản xuất và rượu vang thú vị nhất ở Mỹ. Trong khi nó vận chuyển rượu vang từ khắp nơi trên đất nước, Wine + Peace bị giới hạn bởi luật vận chuyển rượu trực tiếp ở một số tiểu bang. Thay vì dựa vào người tiêu dùng để điều hướng đến trang Câu hỏi thường gặp, Wine + Peace có biểu ngữ trên mỗi trang nơi người dùng có thể nhập mã zip của họ để kiểm tra xem công ty có thể giao hàng đến các khu vực của họ hay không.

Đây là một cách tuyệt vời để làm cho người dùng cảm thấy được kiểm soát, cung cấp cho họ thông tin quan trọng và ngăn họ đặt hàng mà họ không thể thực hiện, mà không dựa vào họ để nhớ lại hoặc tự tìm kiếm thông tin.

2. Naba Zabih

Naba Zabih là một nhiếp ảnh gia đám cưới và bỏ trốn, người đã đi khắp Hoa Kỳ và thế giới để chụp các đám cưới. Với phương châm “Tôi tin vào phép thuật”, Zabih đã thiết kế trang web của mình trông thật lãng mạn và thơ mộng với cách phối màu đất và kiểu chữ script được sử dụng nhất quán trên trang.

Khi cô ấy làm với ảnh của mình, cô ấy muốn kể một câu chuyện bằng trang web của mình, sử dụng nhiều hình ảnh, hiệu ứng chuyển tiếp, hoạt ảnh và không gian trắng để trải nghiệm cuộn qua trang web giống như lướt qua một album ảnh. Trang danh mục đầu tư này cung cấp một ví dụ tuyệt vời về thiết kế giao diện người dùng với tính nhất quán và đơn giản.

3. Tập đoàn Delassus

Delassus Group là một người Ma-rốc trồng cà chua, cam quýt, nho, bơ và hoa. Khi bạn lần đầu tiên truy cập trang web, có một video dài 60 giây giải thích thời điểm thành lập Tập đoàn Delassus lần đầu tiên, những gì nó sản xuất và sứ mệnh trách nhiệm xã hội của nó.

Người dùng không quen thuộc với công ty hoặc truy cập trang web lần đầu tiên có thể xem toàn bộ video có hoặc không có âm thanh. Những người quen thuộc hoặc khách truy cập thường xuyên của trang web có thể bỏ qua video và được chuyển hướng đến trang chủ. Giao diện người dùng này không chỉ cung cấp cho người dùng quyền kiểm soát trải nghiệm của họ – nó còn được thiết kế cho các loại người dùng khác nhau.

4. Chào bạn da

Xin chào, skin là một dịch vụ chăm sóc da cung cấp các bài tập chăm sóc da mặt và khuôn mặt có thể tùy chỉnh và cá nhân hóa cho từng làn da riêng biệt. Để thể hiện cam kết của mình đối với hạnh phúc và sức khỏe làn da của khách hàng, trang web của Hi, skin có các hình ảnh và video về một nhóm người mẫu đa dạng đang chăm sóc da, mỉm cười và cười.

Nó cũng cung cấp một số đường dẫn rõ ràng để người dùng tìm hiểu thêm về đội ngũ chuyên gia thẩm mỹ, dịch vụ và địa điểm của công ty để người dùng có thể khám phá trang web tùy ý. Tạo sự cân bằng giữa phương tiện, nhiều khoảng trắng và ít văn bản, bạn sẽ nhận thấy các mảng màu thu hút sự chú ý của người dùng vào các yếu tố khác nhau. Ví dụ: nút màu cam ở góc trên cùng bên phải của video trên, khuyến khích người dùng đặt lịch hẹn.

5. HalloBasis

HalloBasis là trang web của cặp thiết kế Felix Vorbeck và Johannes Winkler. Chuyên về giao tiếp bằng hình ảnh, toàn bộ trang web là minh chứng cho kỹ năng xây dựng thương hiệu, thiết kế đồ họa và thiết kế web của họ.

Thông điệp “Chấp nhận Cookie” của nó đáng được đề cập đặc biệt. Nó chỉ cung cấp cho người dùng thông tin cần thiết nhất về chính sách cookie của họ và sau đó cung cấp cho họ các tùy chọn để chấp nhận chúng ngay lập tức hoặc để tìm hiểu thêm.

Mặc dù thiết kế của cửa sổ bật lên rất đơn giản, nhưng vị trí của nó ở đầu trang – nơi vẫn giữ nguyên khi người dùng cuộn – nhấn mạnh tầm quan trọng của việc người dùng chấp nhận cookie mà không làm gián đoạn hoàn toàn trải nghiệm của họ. 

6. Tây Ban Nha Bộ sưu tập

Bộ sưu tập Tây Ban Nha là một trang web du lịch cung cấp những trải nghiệm du lịch sang trọng ở Tây Ban Nha và Bồ Đào Nha. Phương châm của nó là: “Sống cuộc phiêu lưu độc đáo của riêng bạn!” Vì vậy, nó có ý nghĩa tại sao trang web cung cấp cho người dùng rất nhiều quyền tự chủ.

Trên trang chủ, họ có thể nhấp vào một loạt video về công ty, Giám đốc điều hành và người sáng lập cũng như các thành viên khác trong nhóm để phát chúng hoặc cuộn qua chúng. Họ có thể nhấp vào các bộ sưu tập khác nhau được giới thiệu trong một thanh trượt về phía cuối trang hoặc họ có thể nhấp vào các bộ sưu tập từ tiêu đề điều hướng.

Nếu họ làm vậy, họ sẽ được đưa đến một trang khuyến khích họ chọn trải nghiệm hoặc điểm đến, với nhiều tùy chọn cho mỗi loại.

7. Ứng dụng Tasty Burger

Trên đây không phải là ứng dụng bạn sẽ tải xuống từ cửa hàng ứng dụng mà là một thiết kế giao diện người dùng do nhóm Tubik tạo ra. Giao diện người dùng này được thiết kế với hai người dùng: người dùng muốn duyệt và người dùng biết chính xác những gì họ muốn đặt hàng.

Đối với những người dùng muốn duyệt, có các tùy chọn bộ lọc và ảnh cũng như thông tin chính, bao gồm cả giá cả, của từng mục menu. Sau khi nhấp vào một sản phẩm cụ thể, họ có thể nhấp vào tab có nhãn thành phần để xem những gì có trong sản phẩm và tùy chỉnh nó. Đối với những người dùng biết chính xác họ muốn gì, các điểm nhấn màu sắc làm nổi bật giá và lời kêu gọi hành động như “Thêm vào giỏ hàng” để quét và thanh toán nhanh chóng.

8. Rê bóng

Dribbble là một trang web được tạo ra để các chuyên gia thiết kế tìm kiếm và giới thiệu tác phẩm sáng tạo của họ. Nó nhằm mục đích làm điều đó trên mọi trang của trang web của nó, bao gồm cả trang lỗi 404 của nó.

Thay vì thấy mình đi vào ngõ cụt, những người truy cập bị lạc được chuyển hướng đến một trang có các thiết kế phổ biến với một màu cụ thể. Nếu họ không quan tâm, họ có thể sử dụng thanh trượt để duyệt qua các thiết kế với các màu khác nhau hoặc họ có thể sử dụng thanh tìm kiếm để tìm một thiết kế hoặc nhà thiết kế cụ thể.

Họ cũng có thể nhấp vào biểu trưng ở trên cùng bên trái để quay lại trang chủ hoặc nhấp vào “Liên hệ với chúng tôi” ở trên cùng bên phải để được đưa đến trung tâm trợ giúp. Điều này làm cho người dùng cảm thấy kiểm soát giao diện, ngay cả khi họ mắc lỗi hoặc nhấp vào một liên kết bị hỏng.

9. Ứng dụng Linkedin

Ứng dụng LinkedIn có giao diện người dùng đơn giản phù hợp với thương hiệu của nó: bạn sẽ nhận ra kiểu chữ, bảng màu xanh lam và xám và các biểu tượng được sử dụng trên trang web của nó.

Ứng dụng đặc biệt vượt trội trong quy trình giới thiệu người dùng. Khi người dùng bắt đầu tạo tài khoản của mình, họ sẽ được hướng dẫn qua các giai đoạn khác nhau của quy trình. Nhiều màn hình khác nhau sẽ mời người dùng điền đầy đủ thông tin cá nhân, xác nhận email, theo dõi các nhóm LinkedIn. Đồng thời chấp nhận các đề xuất để thêm nhiều người hơn vào mạng lưới chuyên nghiệp của họ. Mặc dù mỗi màn hình sẽ đưa ra lời giải thích ngắn gọn về những gì họ được yêu cầu làm. Nhưng người dùng có thể chọn bỏ qua một số bước này và hoàn thành chúng sau.

Tầm quan trọng của thiết kế giao diện người dùng

Hàng ngày, chúng tôi tương tác với giao diện người dùng  – cho dù đó là sử dụng lò vi sóng, đăng nhập vào ứng dụng hay mua hàng trên trang web thương mại điện tử. Thiết kế giao diện người dùng thành công có thể tạo ra sự khác biệt giữa trải nghiệm người dùng tuyệt vời và trải nghiệm kém. Hiểu và áp dụng các nguyên tắc thiết kế giao diện người dùng cũng như các nguyên tắc thiết kế trang web  – tính đơn giản, khả năng điều hướng, tính nhất quán và lấy người dùng làm trung tâm, trong số những nguyên tắc khác – và sử dụng các công cụ phù hợp có thể giúp bạn tạo giao diện tốt nhất cho sản phẩm của mình.

Nguồn Hubspot và được biện soạn lại bởi GGroup Carrer.