Trong ngành kỹ thuật số, các thuật ngữ UI và UX đang dần trở nên phổ biến hơn bao giờ hết, nhưng đôi lúc kể cả những người có kinh nghiệm hoặc người mới đều đang hiểu sai về khái niệm này.
Để tóm tắt đơn giản nhất trước khi đi vào chi tiết:
- Giao diện người dùng là giao diện của một trang web hoặc ứng dụng.
- Trải nghiệm người dùng là cách chúng hoạt động.
Tất nhiên, cả hai được liên kết mật thiết với nhau, đó là lý do tại sao chúng thường được đặt cùng nhau “Thiết kế UX / UI”. Tuy nhiên, các ngành hoặc đội ngũ phát triển đằng sau nó không nhất thiết phải hoạt động cùng một lúc, mà là song song với nhau.
Tìm hiểu thêm về UX và kiến trúc của ứng dụng web hoặc di động
Trước hết, bạn nên biết rằng thuật ngữ UX được đặt ra bởi một nhà khoa học chuyên về nhận thức, Tiến sĩ Donald Norman. Do đó, với UX, các chức năng về suy luận và tư duy sẽ được đặt làm trọng tâm.
UX hơi giống như “bản thiết kế” của ngôi nhà kỹ thuật số mà bạn sẽ xây dựng.
Và việc di chuyển xung quanh một ngôi nhà phải thật dễ dàng: các phòng và các yếu tố tạo nên nó phải được đơn giản hóa nhất có thể, bằng cách nghiên cứu các quy tắc chung và hành vi của con người.
Ví dụ, trong một ngôi nhà, chúng ta muốn có tay nắm cửa một cánh cửa cao ngang tầm tay. Trong một ứng dụng, nhà thiết kế UX sẽ đặt hành động chính (ví dụ: nút xác thực) trong tầm với của ngón tay cái của người dùng hoặc dấu thập đóng ở trên cùng bên phải của cửa sổ (hoặc đôi khi ở bên trái).
Do đó, các nhà thiết kế UX đều thiên về Trực quan, Công thái học và Logic.
Một số nguyên tắc hoặc nhiệm vụ thuộc về nhà thiết kế UX, thường theo thứ tự sau:
1. Nghiên cứu hành vi và quan điểm của người dùng
Đây gần như chính là “Tiếp thị” hay là “Tiếp thị thần kinh học”.
Để thiết kế một ứng dụng di động hoặc ứng dụng khác, trước tiên bạn phải xác định mục tiêu mà bạn sẽ thiết kế. Bởi vì thực sự, theo độ tuổi, danh mục, quốc gia, nền văn hóa, cách sử dụng có thể khác nhau. Do đó, vấn đề đặt ra là phải hiểu đặc điểm người dùng nhắm đến để thích ứng tốt nhất với thiết kế.
Bước này không bắt buộc, nhưng mang lại rất nhiều sự chính xác cho ứng dụng và do đó dẫn đến thành công của nó hay không. Do đó, các dự án nhỏ sẽ cố gắng tránh bước này, bởi vì nó huy động nhiều nhân lực và thời gian, do đó dẫn đến các chi phí không đáng.
Trong trường hợp không có nghiên cứu thực địa, chúng ta có thể kêu gọi những người dùng giả định, được gọi là “User Persona”. Đây là những cấu hình điển hình mà cơ bản sẽ “thích” sử dụng ứng dụng.
Nếu bạn thực sự có thể sử dụng User Persona làm cơ sở, thì tốt hơn hết là bạn nên xác nhận trực giác của mình bằng cách tạo một bảng thử nghiệm thực hoặc sao lưu nó với dữ liệu.
Để làm điều này, một cuộc lấy mẫu sẽ được thực hiện (đối với bất kỳ cuộc khảo sát ý kiến nào) và nó sẽ đóng vai trò như một cơ sở thử nghiệm ở các giai đoạn khác nhau của việc thực hiện dự án, bằng cách cung cấp phản hồi và cảm nhận, kết quả sẽ được tích hợp trong thiết kế.
Nghiên cứu hành vi này có thể rất hiệu quả, chẳng hạn như đo thời gian phản ứng của người dùng hoặc đo hành trình của mắt họ trên màn hình bằng cách sử dụng cái gọi là công cụ “theo dõi mắt” hoặc “bản đồ nhiệt”. Các thử nghiệm này thường hoạt động dựa trên nguyên tắc của cái được gọi là thử nghiệm A / B: giữa giải pháp A và giải pháp B đã được thử nghiệm, giải pháp nào tốt nhất?
Sử dụng dữ liệu này, nhà thiết kế UX sẽ điều chỉnh để mỗi hành động của người dùng mất ít thời gian nhất mà không gây nhầm lẫn, tốc độ thực thi là một yếu tố cốt lõi trong nhiệm vụ UX.
2. Sự phát triển của các kịch bản
Song song với nghiên cứu hành vi này, trình thiết kế UX sẽ lập một danh sách các giả thuyết sẽ phải được tích hợp vào thiết kế và các bài kiểm tra thực tế.
Các tình huống này tương ứng với danh sách các chức năng được cung cấp bởi ứng dụng.
Làm thế nào để tắt ứng dụng? Làm thế nào để hoàn tác một hành động? Điều gì sẽ xảy ra nếu ứng dụng gặp lỗi? Các bước phải thực hiện để di chuyển từ hành động X hoặc Y? Tóm lại, nhà thiết phải tính đến tất cả các hành động có thể xảy ra, tất cả các tình huống phải được xem xét để sẵn sàng cho bất kỳ tình huống nào và đáp ứng tốt nhất cho người dùng.
Do đó, những tình huống này có thể là hành vi (hành động do một cá nhân thực hiện) nhưng cũng có thể là bắt nguồn từ môi trường. Ví dụ: Điều gì sẽ xảy ra nếu độ sáng thay đổi? Nếu nhận được cuộc gọi thì sẽ ra sao? Điều gì sẽ xảy ra nếu bất chợt tương tác với một ứng dụng khác? Vân vân.
3. Cấu trúc lại thông tin
Khi chúng ta biết mình đang nói chuyện với ai và tất cả các hành động có thể được thực hiện trên một trang web hoặc một ứng dụng là gì, bây giờ chúng ta phải sắp xếp tất cả!
Do đó, UX sẽ nhóm các hành động hoặc thông tin này thành các họ logic và trong các họ này, thiết lập các mức độ ưu tiên. Một số nhiệm vụ thực sự ít quan trọng hơn những nhiệm vụ khác. Các công cụ lập bản đồ tư duy do đó rất hữu ích trong giai đoạn này.
Cấu trúc này sau đó được thực hiện ở hai cấp độ:
– Ở cấp độ tổng quan, xác định danh sách tất cả các màn hình và các liên kết hợp lý của chúng.
– Ở cấp độ cụ thể, bằng cách xác định hệ thống phân cấp thông tin trong mỗi màn hình.
Trong trường hợp của một trang Thương mại Điện tử, ví dụ: trên trang sản phẩm, người dùng phải có thể xem sản phẩm, giá cả, tìm hiểu về đặc điểm của đối tượng, cá nhân hóa đối tượng nếu cần, sửa đổi số lượng và thêm nó vào giỏ của mình.
Những thông tin hàng đầu của sản phẩm là gì?
Giá của nó? Thiết kế của nó? Đặc tính kỹ thuật của nó?
Câu trả lời còn tùy thuộc nhiều cái, thiết kế sẽ được sửa đổi để làm nổi bật đặc điểm bán hàng tốt nhất.
Sau đó, nhà thiết kế UX phải ghi lại tầm quan trọng tương đối của từng tương tác này và sắp xếp chúng theo thứ tự hợp lý.
Ví dụ: Đầu tiên bạn sẽ xem hình ảnh, sau đó là giá, sau đó bạn tìm hiểu thêm về sản phẩm và những lời hứa hẹn của nó, và chỉ khi “bị thuyết phục”, bạn mới có thể thực hiện hành động thêm mặt hàng vào giỏ hàng.
Một ví dụ khác: Việc truy cập hồ sơ người dùng của bạn có quan trọng không? Đối với các Điều khoản & Điều kiện Bán hàng Chung? Nếu có thì là khi nào? Mọi người thường tìm những món đồ này ở đâu? Vân vân.
Tất cả những câu hỏi này sẽ được giải quyết tại bước này…
4. Wireframe
Sau đó đến giai đoạn mô phỏng đầu tiên.
Wireframe là một mô hình có các phần tử và thông tin được xác định trước đó trên màn hình (thiết bị di động, máy tính hoặc thiết bị khác).
Wireframe là “bản đồ” thực của ứng dụng hoặc trang web, khung của nó, với những khoảng trống được nhà thiết kế giao diện người dùng cho là “lấp đầy”, như trong ví dụ dưới đây:
Theo truyền thống, phần mềm như Sketch hoặc Adobe XD sẽ được sử dụng để tạo Wireframe.
5. Tư duy về các tương tác
Cuối cùng, nhà thiết kế UX sẽ hình dung cách tương tác với mô hình đã tạo trước đó.
Hoạt ảnh, chuyển động của bàn tay (vuốt) hoặc của điện thoại (gia tốc kế), chuyển đổi màn hình, nói tóm lại, mọi thứ sẽ tạo thêm điểm cộng cho sự đắm chìm của người dùng sẽ được nhà thiết kế UX “lên kịch bản” để cuối cùng, nhà thiết kế giao diện người dùng có thể tạo ra các tài nguyên cần thiết và người lập trình đưa tất cả điều đó vào thực tế.
Tìm hiểu thêm về giao diện người dùng, thiết kế trực quan của ứng dụng web hoặc di động
Với Giao diện người dùng, chúng ta hoàn thành công việc do UX khởi xướng và làm phong phú nó bằng các yếu tố hình ảnh sẽ tạo nên tính cách thực sự của ứng dụng hoặc trang web.
Do đó, chúng ta sẽ sử dụng các yếu tố thiết kế thông thường:
- Phông chữ
- Màu sắc và bảng màu
- Logo, hình dạng
- Kích thước và tỷ lệ tương ứng của tất cả các yếu tố này
- Hình ảnh minh họa, hình ảnh các loại
- Thiết kế chuyển động
Mục đích của giao diện người dùng là thu hút người dùng, khuyến khích họ ở lại trang họ đang truy cập để thúc đẩy sự tương tác.
Trong quy trình làm việc của mình, một nhà thiết kế giao diện người dùng có thể thực hiện các bước sau:
1. Tạo bảng tâm trạng (Moodboard)
Bảng tâm trạng là một tập hợp các ảnh hưởng sẽ dẫn dắt nguồn cảm hứng của dự án.
Bảng tâm trạng này có thể bao gồm các tác phẩm nghệ thuật, đồ vật, trang web hoặc các ứng dụng, màu sắc và tông màu đã có sẵn, nói tóm lại là bất cứ thứ gì có thể gắn với “tinh thần” mà chúng ta muốn đưa vào tác phẩm.
Bảng tâm trạng có thể đến từ:
- Bảng điều khiển mẫu
- Nhà thiết kế giao diện người dùng hoặc yếu tố nghệ thuật
- Nghiên cứu các xu hướng hiện tại
2. Đề xuất đồ họa
Dựa trên các ý tưởng được thảo luận từ trước và được minh họa bởi bảng tâm trạng, thiết kế giao diện người dùng sau đó sẽ đề xuất các cơ sở cho tỉ lệ đồ họa bao gồm như sau:
- Phông chữ: thường từ 1 đến 3
- Màu sắc: thường từ 2 đến 5
- Hình dạng hoặc hoa văn để trang trí tất cả
Đối với đề xuất tỉ lệ đồ họa này, có thể được thêm logo và / hoặc biểu tượng ứng dụng.
3. Thực hiện các hướng dẫn về đồ họa và cải tiến các công cụ do UX cung cấp
Sau khi các nguyên tắc đồ họa được xác định, nhà thiết kế giao diện người dùng sẽ có thể sử dụng wireframe do nhà thiết kế UX phát triển để tạo ra những gì sẽ là mô hình cuối cùng của ứng dụng.
Trong quá trình làm việc này, nhà thiết kế giao diện người dùng sẽ sử dụng chuyên môn của mình để hiệu chỉnh hoàn hảo toàn bộ tổng thể, sao cho ứng dụng trông hài hòa nhất có thể.
Nó cũng sẽ tô điểm cho app bằng các yếu tố đồ họa rõ ràng như: biểu tượng, hình minh họa, nội dung hoạt hình, v.v. và do đó mang lại sức sống cho toàn bộ dự án.
4. Đánh giá sự tiếp nhận của công chúng, lặp đi lặp lại
Trong nỗ lực hoàn thiện ứng dụng di động, nhà thiết kế giao diện người dùng, giống như đối tác là nhà thiết kế UX của mình, sẽ tìm kiếm ý kiến của bảng điều khiển thử nghiệm của mình để đảm bảo rằng mọi người sẽ hoan nghênh thiết kế.
Sau đó có thể xem xét một số đợt sửa đổi để thu được sản phẩm thành công nhất có thể.
