Trọn bộ thuật ngữ chuyên ngành trong thiết kế UI/UX

I. Tổng quan về UI/UX. Giải mã thuật ngữ chuyên ngành UI/UX trong thiết kế

1. Giải mã thuật ngữ UI

UI (User Interface) đại diện cho giao diện người dùng trên các sản phẩm số như ứng dụng di động, trang web, hoặc phần mềm. 

Thiết kế UI liên quan đến cách tạo và sắp xếp các yếu tố như: nút bấm, thanh điều hướng, màu sắc, và hình ảnh được sắp xếp để tạo ra một trải nghiệm hấp dẫn và dễ sử dụng cho người dùng. Mục tiêu của thiết kế UI là tạo ra một giao diện mà người dùng có thể tương tác một cách dễ dàng và hiệu quả.

2. Giải mã thuật ngữ UX

UX (User Experience) là trải nghiệm người dùng khi tương tác với sản phẩm. 

Thiết kế UX tập trung vào việc tạo ra một trải nghiệm thoả mãn, dễ sử dụng và thuận tiện cho người dùng. Điều này bao gồm việc tạo cảm xúc, tình cảm khi người dùng có sự tương tác với giao diện. Mục tiêu của thiết kế UX là đảm bảo người dùng có trải nghiệm tốt, từ khi họ bắt đầu cho đến khi họ kết thúc sử dụng.

Đó chính là những điểm giống và khác nhau sẽ giúp bạn phân biệt UI và UX một cách rõ ràng hơn.

II. Tầm quan trọng của việc hiểu rõ các thuật ngữ chuyên ngành trong thiết kế UI/UX

1. Tầm quan trọng của việc hiểu rõ các thuật ngữ chuyên ngành trong thiết kế UI/UX #01

Giúp giao tiếp đồng nhất: Các thuật ngữ giúp bạn truyền đạt ý tưởng của mình một cách rõ ràng và hiệu quả hơn. Khi bạn hiểu và sử dụng đúng thuật ngữ, người khác có thể dễ dàng hình dung được ý tưởng hoặc yêu cầu của bạn.

2. Tầm quan trọng của việc hiểu rõ các thuật ngữ chuyên ngành trong thiết kế UI/UX #02

Giúp bạn làm việc hiệu quả: Nắm vững các thuật ngữ giúp bạn hiểu rõ công việc và quy trình thiết kế, từ đó làm việc hiệu quả hơn cao hơn.

3. Tầm quan trọng của việc hiểu rõ các thuật ngữ chuyên ngành trong thiết kế UI/UX #03

Tăng cường tính chuyên nghiệp: Nếu bạn có khả năng giao tiếp một cách chính xác và chuyên nghiệp, bạn sẽ làm việc liên kết phòng ban tốt hơn.

III. Trọn bộ thuật ngữ trong thiết kế UI/UX

3 Click Rule - Quy tắc ba lần nhấp chuột

Đây là quy tắc cho rằng người dùng sẽ rời khỏi trang web nếu họ không thể truy cập vào page họ muốn trong vòng 3 lần nhấp chuột.

5 Second Test - Thử nghiệm 5 giây

Thử nghiệm 5 giây là việc hiển thị cho người dùng giao diện của ứng dụng phần mềm hoặc trang web trong 5 giây, sau đó sẽ yêu cầu họ nhớ lại những gì họ đã thấy trên trang. Đây là một phương pháp tuyệt vời để kiểm tra về UX của trang web

80/20 Rule - Quy Tắc 80/20

Điều này được dựa trên nguyên tắc Pareto. Áp dụng cho bất kỳ trang web, ứng dụng web hoặc môi trường phần mềm nào, sẽ có 20% chức năng và tính năng sẽ chịu trách nhiệm cho 80% kết quả.

A/B Testing - Thử nghiệm A/B

Thử nghiệm A/B yêu cầu bạn kiểm tra hai phiên bản có nội dung trực tuyến khác nhau với người dùng để xem đâu là phiên bản mà họ thích.

Accessibility - Khả năng truy cập

Khả năng truy cập có thể hiểu là các tính năng giúp người dùng hiểu trang web hoặc ứng dụng một cách dễ dàng. Ví dụ như một vài trang web/ứng dụng dành cho những người mù màu dễ sử dụng sẽ có chức năng điều chỉnh màu sắc.

Clickstream Analysis - Phân tích clickstream

Phân tích Clickstream (còn được gọi là phân tích dữ liệu đường dẫn) là quá trình thu thập và phân tích dữ liệu về những trang web mà khách truy cập và thứ tự của nó.

Competitor Analysis - Phân tích đối thủ cạnh tranh

Trong công việc chúng ta luôn cần đánh giá chính xác về điểm mạnh và điểm yếu của các đối thủ cạnh tranh hiện tại cũng như cả nhưng đối thủ tiềm năng.

Conversion Rate - Tỷ lệ chuyển đổi

Conversion rate (CR) là chỉ số của khách mua hàng so với tổng số lượng khách ghé thăm (visits) của toàn website hay của một kênh quảng cáo nào đó. Trong thương mại điện tử, tiếp thị chuyển đổi là hành động chuyển đổi từ khách truy cập trang web thành khách mua hàng. Quá trình cải thiện tỷ lệ chuyển đổi được gọi là tối ưu hóa tỷ lệ.

Color contrast - Sự khác biệt giữa hai màu

Đen trắng là bộ đôi tạo độ tương phản cao nhất. Màu sắc có thể tương phản về hue, value và saturation. Chúng ta thường muốn có độ tương phản cao giữa văn bản và màu nền của nó. Nhưng sự tương phản quá cao giữa các yếu tố thiết kế có thể sẽ gây khó hiểu và khá lộn xộn. Sử dụng hiệu quả độ tương phản là thành phần thiết yếu giúp mọi người xem có thể tiếp cận được nội dung mình muốn truyền tải.

End Users 

Với các công ty lớn thì việc giữ khách hàng cũ bao giờ cũng quan trọng không kém gì tìm thêm khách hàng mới. Chi phí của việc giữ khách hàng cũ thường chỉ bằng 20% so với tìm thêm khách hàng mới. Tuy nhiên nó lại là một trong các khoản chi quan trọng nhất trong phát triển thị trường.

Engagement  (User Engagement) - Chỉ số Engagement

Đây là dữ liệu dùng để đánh giá hiệu quả của một chiến dịch Digital Marketing, dữ liệu này phản ánh các cảm nhận của người dùng đối với nội dung thông điệp được truyền tải tới. 

Error Analysis - Phân tích lỗi

Phân tích tần suất và loại lỗi xảy ra cho mỗi tập hợp các luồng nhiệm vụ được chỉ định.

Error Rate - Tỷ lệ lỗi

Tần suất xảy ra lỗi trong một khoảng thời gian nhất định.

Grid - Lưới

Grid là tập hợp các đường kẻ dọc/ ngang chia Layout thành nhiều hàng (Row) và nhiều cột (Layout). Grid tạo nên trật tự và tính nhất quán trong UI design; cung cấp một cấu trúc chung và tính linh hoạt để bố trí nội dung một cách hợp lý nhất.

Modal - Khung thông báo 

Modal thông báo cho người dùng về một tác vụ và có thể chứa thông tin quan trọng, yêu cầu quyết định hoặc liên quan đến nhiều tác vụ.

Modal thường nằm trên đầu trang, có một lớp bán trong suốt (semi-transparent) phía sau để tách chúng khỏi trang chính. Chúng vô hiệu hóa tương tác với phần còn lại của trang và buộc người dùng phải tương tác đầu tiên với cửa sổ phương thức. Modal cho phép người dùng ở trong context của giao diện hiện tại trong khi vẫn có thể thực hiện các hành động liên quan mà không làm gián đoạn quy trình làm việc trên trang chính.

Usability - Tính khả dụng

Tính khả dụng là tính dễ sử dụng và tìm hiểu của một vật thể do con người tạo ra, chẳng hạn như công cụ hoặc thiết bị.  Trong kỹ thuật phần mềm, tính khả dụng là mức độ mà một phần mềm có thể được sử dụng bởi người tiêu dùng  để đạt được mục tiêu nhất định với hiệu quả sự hài lòng trong bối cảnh sử dụng .

User Flow - Luồng người dùng

Nếu trang web của bạn là một thành phố thì User Flow là những con đường chạy qua nó. 

User Research - Nghiên cứu người dùng

Nghiên cứu người dùng tập trung vào việc hiểu hành vi, nhu cầu và động lực của người dùng thông qua các kỹ thuật quan sát, phân tích nhiệm vụ và các phương pháp phản hồi khác. Từ những dữ liệu này, các giải pháp thiết kế được tạo mẫu và sau đó được thử nghiệm với nhóm người dùng mục tiêu. Quá trình này sẽ được lặp lại nhiều lần nếu cần.

Flat Design - Thiết kế phẳng

Flat Design hay còn gọi là thiết kế phẳng, là một trong những phong cách thiết kế website/ app, nó trở nên thu hút kể từ khi Microsoft chính thức phát hành Window 8 và sau đó là giao diện iOS 7. Xu hướng thiết kế Flat Design đang ảnh hưởng đến ngành công nghiệp thiết kế hiện nay.

Tính chất của Flat Design:

#1. Clean – Thiết kế sạch

#2. Open space – Không gian mở

#3. Crisp Edges – Góc bo nhọn

#4. Bright Color – Sử dụng tone màu sáng

#5. Two dimensional Illustrator – Hình ảnh hai chiều

Wireframe - Bố cục

Wireframe là bố cục của UI, là bản phác thảo giúp khách hàng có cái nhìn tổng quát nhất về website hoặc app.

Không chỉ designer mà các bộ phận khác như Developer, Product Management, Marketing, Business Analytics đến khách hàng đều cần tham gia chỉnh sửa để đưa đến bản wireframe tốt nhất.

Mock-up 

Mock-up chính là Wireframe nhưng ở phiên bản đầy đủ chi tiết hơn rất nhiều lần, từ màu sắc, kích cỡ, font chữ, hình ảnh, đường kẻ, phân luồng,...

Nếu như Wireframe thể hiện một cách tổng quát về bố cục màn hình thì Mock-up làm rõ là bên trong chiếc màn hình đó có những chi tiết gì, rõ ràng đến những chiếc dấu câu.

#1. Graphic Design Software

#2. Mock-up App

#3. Code

Prototype - Bản mẫu

Prototype là bản mẫu thử đầu tiên của sản phẩm, hoặc một chức năng của sản phẩm mà qua đó designer và user có thể kiểm tra được tính hợp lý, hiệu quả và dễ sử dụng của sản phẩm thiết kế. 

Prototype là bước không thể thiếu trong quá trình xây dựng sản phẩm và được lặp lại cho đến khi sản phẩm cuối cùng “chào đời”. Prototype giúp tiết kiệm tiền bạc và công sức khi xây dựng sản phẩm. 

Các hình thức Prototype phổ biến

Paper Prototype: phương thức test đơn giản mà designer có thể sửa thiết kế trực tiếp.

Digital Prototype: phương thức test trực quan và tiết kiệm thời gian nhưng lại không cho designer sửa trực tiếp trên bản thiết kế.

Đọc thêm về Prototype tại đây

Card 

Card hay Thẻ là một mảnh ghép không thể thiếu trong UI Design, là khung chứa các phần tử, thông tin có liên quan đến nhau.

Card có 4 đặc điểm chính đó là:

#1. Được sử dụng để nhóm các thông tin lại với nhau

#2. Trình bày nội dung tóm tắt và liên kết đến các chi tiết bổ sung khác

#3. Card trên UI design có hình ảnh giống với một chiếc thẻ thật ngoài đời

#4. Cho phép bố trí phần tử một cách linh hoạt

IV. Tổng kết

Hy vọng những kiến thức trong bài viết Các thuật ngữ chuyên ngành trong thiết kế đồ họa Newbie cần nắm rõ đã giúp bạn có những kiến thức cần thiết để đặt nền tảng khi bắt đầu gia nhập thế giới Creative & Design. Bạn cũng đừng quên theo dõi Blog & Fanpage từ colorME để nhận được những kiến thức hữu ích nhất nha!

Ngoài ra, colorME cũng gợi ý cho các bạn một số bài blog về lộ trình học thiết kế UI/UX bài bản và chuyên sâu hữu ích:

Phân biệt điểm khác biệt giữa thiết kế UI và UX? Các xu hướng thiết kế UI/UX và công cụ hỗ trợ thiết kế UI/UX hiệu quả 

UI / UX là gì? Học UI/UX đem đến những cơ hội gì? Người mới bắt đầu nên học khoá học UI/UX nào?