Giải mã các thuật ngữ cơ bản trong UI-UX (phần 1)

1. UI – USER INTERFACE/ GIAO DIỆN NGƯỜI DÙNG

UI là những gì người dùng nhìn thấy được và tương tác cùng trong quá trình sử dụng một sản phẩm thiết kế chẳng hạn như button, text, hình ảnh, thanh trượt,…

UI thể hiện các yếu tố thị giác của sản phẩm trên mọi kích thước và nền tảng số.

Thiết kế UI là một quá trình kỹ thuật số có sự kết hợp chặt chẽ giữa mọi bên của sản phẩm như Product Owner, Business Analyst, Developer và Designer.

Thiết kế UI chịu trách nhiệm chuyển giao sức mạnh và các yếu tố thị giác của thương hiệu sang giao diện app/website.

Mục đích để tăng cường trải nghiệm người dùng (UX), thiết kế UI là quy trình hướng dẫn thị giác người dùng thông qua giao diện app/ website trên mọi thiết bị/ kích cỡ và các yếu tố chuyển động.

Công việc của UI designer bao gồm:

Phân tích thiết kế (UI Prototyping), Nghiên cứu thiết kế – Phát triển hình ảnh thương hiệu (Design study), Câu chuyện dẫn dắt người dùng (User Guide/ Storyline), Lên mẫu giao diện (Design Research), Tương tác hoạt hình (Interactivity & Animation), Thích nghi với mọi thiết bị, Kết hợp với Developers.

2. UX – USER EXPERIENCE/ TRẢI NGHIỆM NGƯỜI DÙNG

UX là những gì mà người dùng cảm nhận được trong quá trình sử dụng sản phẩm, là sự hài lòng và trung thành của người dùng bằng cách nâng cao tính ứng dụng, dễ hay khó sử dụng, và sự hài lòng giữa người dùng và sản phẩm.

UX tham gia vào quy trình nghiên cứu, thử nghiệm, phát triển, tạo nội dung và tạo nguyên mẫu prototype để thử nghiệm chất lượng sản phẩm.

UX trên lý thuyết là quá trình non-digital (không thuộc kỹ thuật số) mà thuộc về khoa học nhận thức, nhưng trong thực tế được sử dụng và định nghĩa chủ yếu bởi các sản phẩm kỹ thuật số.

Trách nhiệm của UX designer khá phức tạp, đa nhiệm và đầy thử thách, bao gồm kết hợp công việc của marketer, thiết kế và quản lý dự án.

UX designer xem xét sự lặp lại của quy trình phát triển sản phẩm, kết hợp với sự phân tích và thử nghiệm nếu cần thiết, mục tiêu là liên hệ mục đích của doanh nghiệp với nhu cầu của người dùng thông qua quá trình thử nghiệm và tinh lọc các yếu tố thoả mãn lợi ích của hai phía.

Công việc hằng ngày của UX designer bao gồm:

– Chiến lược nội dung: Phân tích người dùng, Phân tích đối thủ, Cấu trúc – chiến lược sản phẩm, Phát triển nội dung.

– Wireframe – Prototype: Wireframing, Prototyping, Thử nghiệm lặp lại (Testing), Phát triển kế hoạch.

3. FLAT DESIGN

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.

Flat Design là một phương pháp không sử dụng thêm bất kỳ hiệu ứng nào trong thiết kế như đổ bóng, góc xiên, dập nối, độ dốc cùng các yếu tố khác góp phần tạo nên độ sâu, nét nổi bật của thiết kế trên màn hình để tạo nên những hình ảnh đơn giản hơn. Thiết kế phẳng cũng được coi là có họ hàng với Minimalist, một phong cách thiết kế tối giản nhấn mạnh vào phần usability – tính ứng dụng.

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

4. WIREFRAME

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.

Vẽ Wireframe là bước vô cùng quan trọng và không thể thiếu trong quá trình thiết kế sản phẩm UI UX.

Wireframe có thể được vẽ bằng giấy, hoặc các công cụ như Photoshop, Illustrator, InDesign… Wireframe không bao gồm việc thể hiện chi tiết màu sắc, nội dung hình ảnh, thông tin…

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.

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

5. MOCK-UP – LAYER CUỐI CÙNG CỦA UI DESIGN

“Wireframes are the skeleton. Prototypes demonstrate the behavior. Mockups are the skin.” – Jerry Cao

Hiểu một cách đơn giản, 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.

Chúng ta có thể phân chia Mock-up thành 3 loại chính:

#1. Graphic Design Software

#2. Mock-up App

#3. Code

6. PROTOTYPE

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ế.

Vai trò của Prototype:

– Giúp designer, developer nhận ra những lỗ hổng và thiếu sót của bản thiết để từ đó hoàn thiện sản phẩm.

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:

– 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.

TẠM KẾT

Trên đây là những thuật ngữ cơ bản nhất khi nhắc đến UI UX Design. Và nếu bạn đang muốn tìm hiểu về UI UX mà chưa biết bắt đầu từ đâu, hãy tham khảo ngay khóa học UI cho người mới bắt đầu của ColorME bạn nhé!