Thiết kế UI / UX

Linh Nguyen Thanh
Eway Engineering
Published in
11 min readMay 29, 2020

1. Ảnh hưởng UI/UX tới kinh doanh?

  • Tăng doanh thu
  • Giảm chi phí hoạt động
  • Mở rộng mô hình kinh doanh
  • Phát triển kinh doanh hiện có
  • Tăng giá trị cổ đông doanh nghiệp

Ví dụ:

  • Tỷ lệ thoát của Time .com giảm 15% khi họ chấp nhận cuộn liên tục ( poynter.org )
  • Evernote tăng tỷ lệ giữ chân người dùng tăng 15% sau khi tung ra tính năng hữu ích , trực quan ( usertesting.com )
  • Công ty phần mềm bảo mật McAfee đã cắt giảm 90% cuộc gọi hỗ trợ do thiết kế lại giao diện người dùng ( pragmaticinstitute.com )

2. Những câu hỏi bạn cần trả lời trước khi thiết kế?

Trước khi bạn thực hiện bất kỳ công việc nghiên cứu nào, hãy làm rõ những gì bạn muốn thoát khỏi nó:

  • Khách hàng mới có thể hiểu và tìm ra cách sử dụng sản phẩm hay không?
  • Khách hàng là gì trong quy trình làm việc và đâu là điểm mấu chốt?
  • Ưu / nhược điểm cạnh tranh của sản phẩm là gì?
  • Thái độ khách hàng là gì ?
  • Làm thế nào để hài lòng với sản phẩm hiện tại?
  • Làm thế nào để người dùng mới tăng theo thời gian?
  • Thiết kế nào thực hiện tốt hơn?

3. Quy trình thiết kế UX

3.1 DISCOVER

Xác định được nhu cầu người dùng để thiết kế sản phẩm phù hợp.

  • Nghiên cứu và suy ngẫm.
  • Phân tích dữ liệu đã nghiên cứu được và lên khung các vấn đề chính.
  • Có được cái nhìn tổng hợp và nhìn nhận ra cơ hội của mình.
  • Yêu cầu kỹ thuật UX.

3.2 DESIGN

Tạo ra những trải nghiệm đáp ứng cả nhu cầu của người dùng và như cầu kinh doanh.

  • Đưa ra các khái niệm và có đánh độ ưu tiên.
  • Dựng khung và tạo bản mẫu độ chi tiết thấp.
  • Thiết kế hình ảnh .
  • Xác thực lại nhu cầu người dùng.
  • Xác thực lại mô hình kinh doanh.

3.3 PRODUCE

Phối hợp cho ra được UX tốt nhất trên cả mục tiêu được giao.

  • Chỉ rõ ra các đặc điểm cần thiết kế.
  • Kiểm tra người dùng lặp đi lặp lại.
  • Tầm nhìn sở hữu và hợp tác.
  • Phát hành phiên bản thử nghiện version 0 và kiểm thử chất lượng.

3.4 EVALUATE

Phản hồi của người dùng cuối, tác động và các giá trị đang diễn ra

  • Phản hồi của người dùng cuối và sự hợp tác.
  • Tạo thẻ điểm chuẩn và chấm điểm liên tục.

4. Nguyên tắc thiết kế UX

4.1 Đáp ứng như cầu người dùng

Tất cả các nguyên tắc thiết kế UX đầu tiên là tập trung vào người dùng trong suốt quá trình thiết kế.
Vì vậy, bạn cần nghiên cứu người dùng đang tìm kiếm gì trong một thiết kế ( thông qua thử trải nghiệm người dùng và các phương pháp khác ). Một thiết kế có thể là xuất sắc với bạn, nhưng hãy nhớ rằng khi bạn thiết kế thì bạn đã không là người dùng.

4.2 Biết mình đang ở đâu trong quá trình thiết kế

Khi bắt tay vào thiết kế rất nhiều công việc, vì vậy biết vị trí của bạn đang ở đâu trong quy trình giúp bạn có thể lựa chọn công cụ cho từng giai đoạn, giúp bạn đặt ra câu hỏi đúng với nghiên cứu người dùng.

4.3 Có thứ bậc rõ ràng

Việc kết hợp quy trình phân cấp rõ ràng trực quan vào quy trình của thiết kế sẽ mang lại trải nghiệm tốt hơn cho người dùng. Nó thực hiện bằng cách cung cấp cho nhà thiết kế một phương tiện gán thức hạn cho các nội dung khác nhau, dẫn đến giao diện người dùng không chỉ cấm thấy có trật tự và trực quan mà còn cho phép các mục tiêu cốt lỗi của thương hiệu được đáp ứng.

Hệ thống phân cấp rõ ràng trực quan không chỉ giúp tăng UX của bạn mà còn đặt ra một quy trình làm việc bền vững, giúp cho quá trình thiết kế trở thành trọng tâm chiến lược cần thiết trong môi trường thiết kế các sản phẩm hiện đại.

4.4 Giữ cho nó nhất quán

Người dùng mong đợi các sản phẩm sẽ chia sẻ một số điểm tương đồng với các sản phẩm khác mà người dùng hay sử dụng. Điều này giúp người dùng dễ tiếp cận với sản phẩm mà không mất thời gian để tìm hiểu cách sử dụng

Thiết kế càng quen thuộc người dùng càng nhanh có thể sử dụng, do đó nâng cao được trải nghiệm người dùng.

Tính nhất quán giúp người thiết kế dễ dàng hơn trong việc xác định các vị trí chức năng.

4.5 Hiểu khả năng tiếp cận

Sản phẩm thiết kế ra có thể sử dụng cho càng nhiều người càng tốt. Điều đó có nghĩa là thiết kế cũng cần tiếp cận gần nhất với người khuyết tật.

Để điều hướng hiệu quả nên loại bỏ các trở ngại từ bố trí thiết kế.

VD: Slack sử dụng màu tương phản cho nền căn bản. Điều đó giúp cho người khiếm thị ( cũng như người cài đặt màn hình ánh sáng yếu) có thể đọc nội dung một cách dễ dàng.

4.6 Bối cảnh là chìa khóa

Khi thiết kế cần phải tính đến bối cảnh của người dùng. Ví trí là một yếu tố theo ngữ cảnh được hiểu là bạn đang thiết kế cho ai, người đó di chuyển, hay ngồi làm việc văn phòng?

Có những thứ khác có thể xem xét bao gồm thời gian sử dụng của người dùng, cảm xúc của người dùng, thiết bị người dùng đang sử dụng, những ảnh hưởng đến người sử dụng của ban...

Tất cả những yếu tố giúp cho bạn hiểu hành vi người dùng. Khi nhận thức được điều đó bạn có thể chuẩn bị được thiết kế tối ưu hóa trải nghiệm người dùng.

Cảm xúc người dùng cũng sẽ tác động tới mức độ kiên nhẫn và thiếu kiên nhẫn của người dùng khi tương tác với giao diện của sản phẩm của bạn.

4.7 Khả năng sử dụng đầu tiên

Thiết kế UX là tập trung vào giải quyết vấn đề của người dùng, tính khả dụng trong thiết kế là một trong những nguyên tắc thiết kế trải người người dùng quan trọng. Sản phẩm của bạn có đẹp đến mức nào đi nữa thì nó sẽ không phù hợp với người dùng trừ khi nó đơn giản và dễ sử dụng.

Với những thiết kế web bất kỳ một trang web nào có thiết kế lộn xộn đều bị mất đi lượt truy cập của người dùng.

Đảm bảo rằng mỗi nút và mỗi thông tin có trong thiết kế đều có mục đích chứ không đơn thuần chỉ là đẹp. Chỉ mang đến sự hữu ích cho người dùng.

Kiểm tra khả năng sử dụng của người dùng khi tương tác với thiết kế. Phân tích người dùng đang gặp vấn đề gì không?

Nếu như nhiều người dùng cùng gặp các vấn đề tương tự nhau thì phải xem xét lại và thay đổi thiết kế. Để sắp xếp các vấn đề về khả năng sử dụng.

Kiểm tra khả năng sử dụng của người dùng được lặp đi lặp lại, đòi hỏi có sự cải tiến trong từng giai đoạn.

Nên có sự kiểm tra khả năng sử dụng trong suốt quá trình thiết kế UX, bao gồm trước khi thiết kế, trong giai đoạn tạo các bản mẫu, khi kết thúc quá trình thiết kế
Các công cụ kiểm tra khả năng sử dụng người dùng:

  • Trước khi thiết kế: https://docs.google.com/forms/u/0/.
  • Khi tạo bản mẫu cho dùng thử: hotjar, mouseflow, fullstory . Giúp đo đếm người dùng tương tác trên thiết kế, thói quen người dùng, khó khăn gặp phải trong quá trình tương tác với thiết kế

4.8 Ít hơn là nhiều hơn

Nguyên tắc này được đề xuất bời kiến trúc sư Ludwig Mies van der Rohe

Với mục đích giảm chi phí hoạt động và nhận thức của người dùng. Khi đã làm tốt nguyên tắc này thì nguyên tắc tính khả dụng và nhất quán được cải thiện

Các tiếp cận ít hơn nhấn mạnh sự đơn giản, nó trái ngược với sự lộn xộn và trang trí quá mức trong thiết kế khiến người dùng bị rối. Không biết cần tập trung và cái gì trên thiết kế.

4.9 Sử dụng ngôn ngữ đơn giản

Người dùng của bạn bận rộn, đang di chuyển, đang đa tác vụ vì vậy hãy sử dụng từ ngữ trong thiết kế gần nhất với suy nghĩ của người dùng. Tránh tình trạng người dùng phải suy đoán khi sử dụng.

VD: Bên trên là một thông báo mơ hồ gây khó chịu cho người dùng, khiến người dùng không biết phải làm gì tiếp theo. “OK” không phải câu trả lời cho Are you sure?

Cần chú ý 5 điểm trong lựa chọn từ ngữ đơn giản trong thiết kế của bạn:

  • Đối tượng và mục đích của thiết kế: đối tượng là ai, họ đã có thông tin gì, họ cần gì và học muốn đạt được gì khi giao tiếp với bạn.
  • Cấu trúc: cấu trúc câu phổ biến trong giao tiếp, cấu trúc câu mà người sử dụng quen thuộc và trình tự nào thì dễ đọc hơn.
  • Thiế kế bố trí: tập trung và kiểu chữ, bố cục và đồ họa thông tin.
  • Biểu hiện: xem xét ngữ âm, động từ, độ dài câu, biệt ngữ và lự chọn từ ngữ mà giao tiếp sẽ áp dụng.
  • Đánh giá: xem lại văn bản đã hoàn thiện và tiến hành kiểm tra khả năng sử dụng.

4.10 Kiểu chữ mạnh mẽ

Kiểu chữ tác động đến cách người dùng diễn giải ngôn ngữ sử dụng nó giúp nâng cao hoặc triệt tiêu đi thông điệp mà bạn đang muốn đề cập.

VD: Những đoạn cần có sự nhấn mạnh để kiểu chữ đậm, kích thước lớn hơn hoặc có mầu sắc nổi hẳn so với xung quanh.

4.11 Vấn đề phản hồi

Thiết kế nên được tương tác nhiều, khi người dùng click vào thứ gì đóng, đường dẫn người dùng cần có sự phản hồi để hiểu rằng hành động đó được nhận. Nó kích thích người dùng giao tiếp với sản phẩm nhiều hơn.

Có thể đáp ứng vấn đề phản hồi này bằng nhiều cách khác nhau, biểu tượng được nhấp có thể thay đổi hình dạng, màu sắc, màu nền, rung…

4.12 Xác nhận lại người dùng trước khi cam kết

Để tránh tình trạng người dùng nhấn nhầm và dẫn đến những tác động không mong muốn . Thì trước khi thực hiện cam kết như mua sản phẩm, xóa một thứ gì đó cần xác nhận lại một lần nữa.

Những thiết kế sẽ khác phục cho bạn điều đấy, vì bạn không muốn cung cấp cho người dùng trải nghiệm tồi tệ với sản phẩm của mình. Điều này làm xác nhận một trong những nguyên tắc thiết kế UX thiết yếu.

VD: Apple xác nhận lại người dùng trước khi dọn dẹp thùng rác trên hệ điều hành của họ.

4.13 Người dùng kiểu soát được thiết kế

Tập trung vào tính linh hoạt hơn của việc sử dụng và kiểm soát tốt hơn nơi người dùng tương tác trong thiết kế của bạn.

Nâng cao trải nghiệm người dùng hơn nữa, cho phép người dùng quay lại cái trước đó, phục hồi từ các lỗi của người dùng.

Thiết kế có nút Undo giúp người dùng khắc phục được hành động ngoài ý muốn.

Thiết kế nút cho phép người dùng lên đầu trang làm người dùng lên đầu trang dễ dàng hơn khi đang ở cuối trang.

4.14 Thiết kế với nhân vật

Lấy nhân vật làm cảm hứng thiết kế giúp thu hút người dùng hơn nếu đúng được nhân vật mà người dùng đang quan tập.

Người dùng sẽ rất khó kết nối với sản phẩm vô hồn, không mang lại được cảm giác hứng thú cho họ.

Thêm các nhân vật vào thiết kế mang lại cho người dùng cảm giác hấp dẫn hơn và có thể sử dụng hơn.

4.15 Ngữ pháp trực quan

Làm giao tiếp người dùng và sản phẩm trở lên trực quan bằng hình ảnh. Bao gồm tất cả mọi thứ tạo nên yếu tố trực quan của thiết kế: biểu tượng, hình minh họa, hoa văn…

Vì dữ liệu trực quan bằng hình ảnh sẽ được não sử lý nhanh hơn 60.000 lần so với dữ liệu bằng văn bản thuần túy.

4.16 Thiết kế tường thuật

Tường thuật hoặc kể 1 câu chuyện với thiết kế của bạn. Hai yếu tố quan trọng khi bạn thiết kế tường thuật là thời gian và nhịp điệu:

  • Thời gian là nhịp độ thiết kế được thông qua. VD: cách kể nhanh hoặc là châm.
  • Nhịp điệu là mô hình mở ra tường thuật của bạn VD: mô hình của loạt màn hình mà quá đó câu chuyện được mở ra.
  • Nếu tốc độ chậm có thể làm người dùng chán vì không cung cấp đủ thông tin cho người dùng để giữ người dùng ở lại trang. Mặt khác tốc độ nhanh quá khiến cho người dùng ngập tràn thông tin làm cho người dùng bối rối không kịp tiếp thu hết thông tin. Do đó phải cân bằng được nhịp độ và nhịp điệu.
http://www.bigapplehotdogs.com/

Tóm lược

Thiết kế UX là kết quả của sự hiểu biết khách hàng của mình, nắm bắt cơ hội công nghệ, theo đuổi sự đơn giản.

Mang lại cho người dùng:

  • Cảm thấy có ý nghĩa với bản thân họ.
  • Cảm thấy sướng khi trải nghiệm.
  • Sự tiện lợi dễ sử dụng, làm việc như người dùng nghĩ.
  • Có thể sử dụng được mà không gặp khó khăn nào.

--

--