Thiết kế UI

Micro Interaction - Các điểm chạm nhỏ nhưng “có võ” trong thiết kế UX UI

content2 — Mon, 03 Jun 2024 06:55:55 +0000

Micro Interaction - Các điểm chạm nhỏ nhưng “có võ” trong thiết kế UX UI content2 T2, 06/03/2024 - 13:55 UX/UI

Trong thị trường cạnh tranh ngày nay, tạo nên một trải nghiệm có giá trị với người dùng không phải việc dễ dàng. Trải nghiệm người dùng (UX) có vai trò quan trọng trong việc tăng sự tương tác và giữ chân khách hàng trên ứng dụng / website.

Trong việc định hình thiết kế UX, ngay cả những chi tiết nhỏ nhất cũng rất quan trọng. Micro interaction hiển thị khi người dùng tương tác với nội dung hoặc các yếu tố nhỏ tương tự.

Tuy “nhỏ nhưng có võ”, micro interaction có thể mang đến tác động rất lớn cho toàn bộ thiết kế của trải nghiệm.

Thiết kế UX Thiết kế UI

Tuy “nhỏ nhưng có võ”, micro interaction có thể mang đến tác động rất lớn cho toàn bộ thiết kế của trải nghiệm.

Bài viết liên quan

Tuy “nhỏ nhưng có võ”, micro interaction có thể mang đến tác động rất lớn cho toàn bộ thiết kế của trải nghiệm.

Micro interaction là gì?

Các yếu tố thiết kế nhỏ giúp cải thiện trải nghiệm người dùng bằng các tương tác tự nhiên được gọi là micro interaction. Ví dụ, biểu tượng “Like” và phản ứng khi nhấn vào để tương tác với nội dung là một ví dụ hoàn hảo về micro interaction. Nút đặt dấu vân tay cảm ứng trên màn hình là một ví dụ khác.

Micro interaction giúp kết nối giao diện với trải nghiệm người dùng trên trang web hoặc ứng dụng, liên tục cung cấp những cách tương tác có ý nghĩa để nâng ý nghĩa của trải nghiệm.

Micro interaction bao gồm 4 phần:

Trigger: Hành động bắt đầu hiệu ứng tương tác, như là nhấn vào nút
Rule: Các quy định cho những hiệu ứng xảy ra sau khi trigger bắt đầu, như hiện popup sau khi ấn nút
Feedback: Phản hồi để người dùng hiểu những gì đang diễn ra trên màn hình
Loops và Modes là các lệnh điều kiện quyết định micro interaction trong các trường hợp khác, như khi nút bị disable.

Đọc thêm: Cách sử dụng atomic design để xây dựng một design system hiệu quả

Tại sao lại cần tối ưu hoá micro interaction

Interaction hay tương tác là một trong những tiêu chí chúng tôi sử dụng để đánh giá trải nghiệm của một ứng dụng. Chúng nhỏ bé đến mức người dùng còn không đế ý tới, nhưng lại là cầu nối quan trọng để sự chuyển dịch giữa các màn được liền mạch.

Các lợi ích chính của micro interaction là:

Giúp người dùng tương tác với sản phẩm một cách liền mạch, không gián đoạn
Cung cấp phản hồi ngay lập tức với các hành đồng của người dùng
Cải thiện mức độ tương tác của người dùng
Đem đến cảm giác kiểm soát tốt hơn với ứng dụng
Thể hiện các hoạt động nền để người dùng hành động kịp thời (như xử lý lỗi)

Đọc thêm: 4 bước tối ưu hoá hành trình khách hàng - Customer Journey trên tất cả các điểm chạm doanh nghiệp

Cách sử dụng micro interaction hiệu quả nhất

Dẫu bé nhỏ, micro interaction vẫn tiếp tục phát triển qua thời gian để tương tác hiệu quả với người dùng hơn. Và đây là những cách sử dụng những hiệu ứng xinh xinh này hiệu quả nhất:

Ưu tiên trải nghiệm người dùng

Như một thành phần của UX, micro interaction cũng cần đặt người dùng làm trung tâm. Không chỉ là phần nhìn, chúng còn cần giúp hành trình sử dụng tối ưu hơn. Sự cân bằng nằm ở sự đơn giản trong sử dụng, nhưng vẫn hữu ích với khách hàng.

Cân bằng giữa quen thuộc và tân tiến

Hầu hết người dùng quen thuộc với micro interaction dù không chủ ý, nhưng ứng dụng vẫn có thể tìm cách để làm mới mình khi đưa ra những tương tác mới mẻ, thú vị. Tiktok là một ví dụ tuyệt vời khi mọi tương tác đều có chủ ý với cảm xúc người dùng, mà vẫn có sự khác biệt. Dẫu vậy, tối ưu trải nghiệm sử dụng vẫn là mục đích cao nhất.

Không làm quá tải nhận thức người dùng

Micro interaction tập trung vào một hành động cụ thể, nên thường chỉ cần một ít hiệu ứng để tạo ra sự phản hồi thị giác. Nếu designer quyết định sử dụng nhiều hiệu ứng hơn, rất có thể người dùng sẽ thấy tiêu cực thay vì tích cực. Đừng cho phép micro interaction trở nên khác biệt so với thiết kế tổng thể. Hãy nhớ, nhỏ vẫn có võ.

Đọc thêm: Cải thiện hành trình trải nghiệm khách hàng chất lượng qua những điểm chạm tinh tế

Kết

Micro interaction như những gói snack nhỏ bé đáng yêu, chúng sẽ giúp hành trình sử dụng trở nên thú vị hơn khi có những hiệu ứng thị giác đúng lúc. Nhưng hãy nhớ, những nguyên tắc cơ bản của thiết kế trải nghiệm vẫn sẽ là cơ sở để quyết định micro interaction. Giữ chúng nhỏ, có võ, và phù hợp với toàn bộ trải nghiệm.

Quá trình tái thiết kế mô hình Double Diamond để nâng cấp quá trình sản xuất Giành lại quyền kiểm soát hình ảnh thương hiệu chỉ trong 3 bước 15 trường hợp nên sử dụng hệ thống ERP (Enterprise Resource Planning) - Hoạch định nguồn lực doanh nghiệp Đo lường hiệu quả UX Design - Thiết kế trải nghiệm người dùng dưới góc nhìn kinh doanh 4 bước tối ưu hoá hành trình khách hàng - Customer Journey trên tất cả các điểm chạm doanh nghiệp Xây dựng chiến lược sản phẩm số để chiến thắng trên thị trường Data & Design - Cách thiết kế và dữ liệu song hành tạo nên trải nghiệm

Off

FIGMA – Công cụ thiết kế toàn năng cho thiết kế trải nghiệm UX/UI

content2 — Sat, 20 May 2023 10:04:56 +0000

FIGMA – Công cụ thiết kế toàn năng cho thiết kế trải nghiệm UX/UI content2 T7, 05/20/2023 - 17:04 UX/UI

Công nghệ phát triển nhanh chóng, tác động tới nhiều linh vực và thiết kế không nằm ngoài sự ảnh hưởng. Một số công cụ mà designer đang dùng hằng ngày, vài năm trước không hề tồn tại. Bởi vậy, chúng ta luôn cần cập nhật những xu hướng công nghệ mới, nghĩ về tương lai của thiết kế, những khả năng và thách thức nó sẽ mang đến cho người dùng và designer.

Công cụ đã làm thay đổi ngành thiết kế gần đây chính là Figma! Trong bài viết này chúng ta sẽ tìm hiểu câu trả lời tại sao và như thế nào cho công cụ đột phá này.

UX Designer UX/UI Thiết kế UI

Công cụ đã làm thay đổi ngành thiết kế gần đây chính là Figma! Trong bài viết này chúng ta sẽ tìm hiểu câu trả lời tại sao và như thế nào cho công cụ đột phá này.

FIGMA là gì?

Chỉ mới gia nhập thị trường năm 2016, Figma là công cụ thiết kế mới đang thay thế nhiều công cụ khác của designer. Là một ứng dụng nền tảng web, mọi thứ được lưu trữ online và designer có thể dùng với nhiều máy tính khác nhau, thực hiện nhiều dự án cùng một lúc.

Nó là một công cụ thiết kế toàn năng với nhiều tính năng tích hợp sẵn cho cả macOS lẫn Windows. Trong Figma, designer có thể tạo UI, UX, prototype và làm việc với các designer khác trong cùng một dự án, một file thiết kế hay một prototype, tất cả cùng trong một công cụ.

Một cách mới để làm việc

Thiết kế luôn là một công việc hợp tác, đặc biệt là trong những lúc tìm kiếm ý tưởng. Tuy nhiên, các công cụ lại chỉ cho phép chúng ta lại thường làm việc độc lập. Thứ dẫn tới hạn chế về tính nhất quán, sáng tạo và sự hiểu nhầm, sai lệch giữa các thành viên của team.

Nhưng với Figma, điều ấy đã thay đổi. Công cụ mới, hệ thống và giao diện thiết kế mới, tất cả đều kết nối và tạo điều kiện cho designer có thể cùng làm việc. Chúng ta không còn lo lắng tới việc sắp xếp file, folder, mọi thứ có thể được đặt và sắp xếp trong cùng một file, với sự tham gia của nhiều người.

Tại sao là FIGMA?

Hiện tại, chúng tôi đã chuyển hết quy trình thiết kế lên Figma. Nó giúp quy trình của chúng tôi trở nên hiệu quả hơn, mọi người hợp tác dễ dàng hơn. Trước khi có Figma, nhóm thiết kế khi làm việc sẽ gửi rất nhiều loại file cho nhau. Như vậy cũng ổn, nhưng khi có lựa chọn tốt hơn thì tại sao không thay thế.

Figma là công cụ đầu tiên có thể đưa mọi tài liệu vào cùng một nơi và mọi người khi vào file sẽ đều có thể xem được chúng, bất kể họ có quyền chỉnh sửa hay không. Ngoài ra, mọi thứ được tích hợp real-time, vậy nên, sự hiểu lầm do giao tiếp cũng được giảm thiểu. Nhờ có Figma, chúng tôi có một nguồn trung tâm và có thể trích xuất mọi thứ chúng tôi cần.

Multiplayer

Tính năng multiplayer của Figma cung cấp khả năng hợp tác dễ dàng giữa các designer và những vai trò trong phát triển sản phẩm. Khi chúng tôi nghĩ về Figma, chúng tôi nghĩ về một công cụ thiết kế cộng đồng, nơi chúng tôi làm việc trên cùng một file nên chúng tôi tôn trọng công sức của tất cả mọi người.

Dưới đây là một số nguyên tắc chúng tôi tuân theo khi làm việc theo hướng multiplayer:

Thêm ảnh đại diện: để mọi người có thể nhận diện và biết ai làm gì
Giới thiệu bản thân: lắc con trỏ khi vào file là cách đơn giản để chào hỏi
Để lại comment: khi có câu hỏi hoặc bình luận, viết comment, tag người liên quan
Tôn trọng cấu trúc file: tránh thay đổi màn hình bạn không làm việc với. Nếu muốn thay đổi, hãy tạo bản copy sau đó bàn bạc lại sau.

Một nguồn duy nhất

Figma có thể chứa nhiều loại file vậy nên nó có thể trở thành nguồn dữ liệu duy nhất cho một dự án. Chúng ta không phải chuyển giữa các phần mềm, cũng không phải lo lắng liệu file này đã là file mới nhất chưa.

Tạo slide thuyết trình nhanh chóng

Chỉ cần một slide template và rồi mọi người cùng vào và thêm nội dung, thiết kế cho slide. Slide được cập nhật theo thời gian thực, giúp cho việc làm silde trở nên nhanh chóng, hiệu quả.

Đọc thêm: Cách để tạo một bảng màu cho thiết kế UI

Chia sẻ Prototype với team và khách hàng

Khi thiết kế của bạn đã sẵn sàng thử nghiệm, bạn có thể chia sẻ prototype của bạn với người khác. Khi mời một người vào prototype, bạn có thể quyết định quyền truy cập của họ ở file hoặc chỉ ở prototype. Điều này rất hữu ích khi bạn cần chia sẻ prototype với khách hàng.

Chúng tôi thường chỉ cần copy link prototype và gửi cho khách hàng. Dùng cách này, khách hàng sẽ chỉ nhìn thấy prototype và cũng không phải phải đăng nhập trước.

Dễ dàng tham gia

Chúng ta chỉ cần click share để thêm thành viên vào dự án hoặc file. Chủ hoặc editor của fiel có thể mời người khác chỉ bằng email hoặc gửi link. Không giống như editor, viewer có thể được thêm miễn phí, họ có thể kiểm tra, xuất nội dung, xem code, comment và điều hướng qua prototype.

Hướng dẫn sử dụng Figma

Hệ thống phím tắt thường dùng

Di chuyển đối tượng (V)
Phóng to, thu nhỏ đối tượng (K)
Artboard/frame (A) hoặc (F)
Hình chữ nhật ®
Văn bản (T)
Thêm hoặc xem comments ©
Paste văn bản (Cmd + V)
Paste không định dạng (Cmd + Shift + V)
Ẩn/hiện interface (Command + .)
Tìm kiếm công cụ (Command + /)
Nhân đôi (Option + drag) or (Command + D)
Xem tất cả phím tắt (Control + Shift + ?)

Font Helper

Figma cung cấp quyền truy cập vào Google Web Font. Nếu bạn muốn dùng những font không thuộc Google Font, bạn cũng có thể dùng font có sẵn trong máy tình của mình. Nếu bạn dùng bản Figma Desktop, mọi font bạn có trong máy sẽ tính hợp trong phần mềm. Bạn có thể tìm thấy font Google bằng Font Picker, hoặc nếu dùng Figma trình duyệt, bạn sẽ cần thêm plugin Font Helper để lấy font.

Artboards/Frames

Trong Figma, bạn có thể thêm layer trực tiếp từ Canvas. Nếu bạn thiết kế cho một thiết bị hoặc màn hình cố định, bạn sẽ muốn tạo một vùng chứa cho thiết kế. Đó là khi cần tới frames (hay artboards). Khi đã thiết kế xong, bạn có thể xuất file bằng bảng export phía dưới bên phải.

Theo dõi quá trình bằng chế độ quan sát

Khi ai đó xem một file hoặc một prototype, avatar của ho sẽ xuất hiện trên thanh bar. Điều này cho phép mọi người biết ai đang ở trong file. Và nếu bạn click vào avatar của một người, bạn sẽ chuyển sang chế độ quan sát. Giống như việc chia sẻ màn hình, chế độ quan sát cho bạn thấy màn hình Figma hiện tại của người đó.

Đọc thêm: Hợp tác Agency: Chuyện thả thính của các clients

Có gì mới trong Figma?

Figma luôn cập nhật với nhiều tính năng mới. Hầu hết chúng là câu trả lời cho nhu cầu hợp tác làm việc đang phát triển. Như Dylan Field, CEO của Figma trình bày: thiết lế là một công việc hợp tác, không phải độc lập. Hãy tìm hiểu những tính năng mới này là gì bên dưới đây:

Figjam

Thứ đầu tiên chúng tôi muốn giới thiệu tới bạn là Figjam. Figjam là một online whiteborad, nó khiến việc brandstrorm trở nên dễ dàng và vui hơn, khiến các thành viên gắn kết và tập trung hơn.

Làm việc trong những dự án mới có thể rất áp lực, đặc biệt là khi bạn không quen ai trong team, không biết họ đảm nhiệm gì. Để giúp giải quyết điều này và để sẵn sàng cho những dự án phức tạp, Figjam tích hợp những trò trơi online giúp team phá băng, tạo kết nối giữa các thành viên.

Vai trò chính của Figjam là để cho công việc trở nên dễ dàng hơn, việc cộng tác trở nên hiệu quả hơn. Với Standups, chúng ta có thể dành 15 phút đầu ngày để sắp xếp công việc, có thể cho biết task nào đang được tiến hành bằng cách thêm sticker. Để tạo thêm tương tác, các thành viên có thể thêm reaction, thể hiện cảm xúc trên bảng.

Những reaction này rất quan trọng trong những feedback section. Figjam giúp bạn dễ dàng thu thập feedback và khi giai đoạn được hoàn thành, bạn và team có thể xem xét và thảo luận để cải thiện chúng.

Ngoài ra, nó còn tích hợp rất nhiều template có sẵn hoặc được tạo bởi cộng đồng Figma, tiện dụng, phù hợp cho nhiều công việc khác nhau, giúp bạn tiết kiệm thời gian.

Figma trên điện thoại

Figma cũng được đưa lên ứng dụng điện thoại, rất hữu dụng khi bạn muốn thử nghiệm thiết kế mobi hoặc muốn xem thiết kế, prototype khi bạn không có máy tính. Tuy nhiên, bạn không thể sửa chúng bằng điện thoại, mong rằng, chúng ta sẽ có được update này sớm.

Comment bằng audio

Để tạo ra giải pháp tốt nhất cho những team không làm việc tại văn phòng, Figma giới thiệu tính năng audio mới. Nó vẫn chưa được công bố, tuy nhiên, hãy chú ý update để được sử dụng tính năng này.

Đọc thêm: Hợp tác với Agency: Câu chuyện về những khách hàng thích hoài nghi

Nâng cấp Multiplayer

Như đã nhắc tới, multiplayer là một trong những tính năng nổi bật nhất và giờ bạn có thể thêm tới 500 người dùng với nó.

Cộng đồng Figma

Figma tạo ra một cộng đồng sáng tạo để chia sẻ thiết kế, truyền cảm hứng sáng tạo và kết nối với những designer khác thông qua việc comment.

30 nguồn tài nguyên đáng quý về thiết kế trải nghiệm người dùng UX Các loại toggle trong thiết kế UI, dùng gì? khi nào? Ngành Công Nghiệp Làm Font Và Nhu Cầu Hiện Nay Cách custom typeface - font chữ độc quyền tạo ra sức mạnh thương hiệu cho tập đoàn Xây dựng tông giọng thương hiệu chỉ trong 7 bước Cách xử lý ảo giác trong thiết kế UI - Đừng tin vào pixel!

Off

10 quy tắc ứng dụng typography cho thiết kế UI đúng cách

content2 — Sun, 14 May 2023 12:54:34 +0000

10 quy tắc ứng dụng typography cho thiết kế UI đúng cách content2 CN, 05/14/2023 - 19:54 UX/UI

Giao tiếp là mục tiêu của thiết kế. Sản phẩm thiết kế cần giao tiếp một cách rõ ràng, truyền đi thông điệp một cách hiệu quả. Khi chúng ta nói tới giao tiếp chúng ta cũng cần nói tới văn bản, bởi mục tiêu của mọi văn bản trên website hay ứng dụng vốn là để đảm bảo quá trình giao tiếp, tương tác với người dùng được hiệu quả.

Typo Typeface Thiết kế UI

Typography đóng vai trò quan trọng trong trải nghiệm đọc của người dùng. Typography hiệu quả sẽ khiến việc đọc trở nên dễ dàng và ngược lại, typography tệ khiến người dùng bối rối.

Bài viết liên quan

Và typography đóng vai trò quan trọng trong trải nghiệm đọc của người dùng. Typography hiệu quả sẽ khiến việc đọc trở nên dễ dàng và ngược lại, typography tệ khiến người dùng bối rối.

Hướng dẫn sử dụng typography trong thiết kế UI

Có nhiều tranh cãi về việc dùng typography như thế nào và không có nguyên tắc nào đúng cho mọi trường hợp. Tuy nhiên, vẫn có những thứ bạn cần lưu ý để đảm bảo typography phù hợp với nội dung, đảm bảo tính dễ đọc.

1. Không dùng nhiều typeface trong cùng một thiết kế

Dùng nhiều hơn 3 typeface trong một giao diện có thể khiến app/site của bạn trở nên hỗn loạn. Bạn nên giới hạn số font được sử dụng từ 1 tới 2 family font và sử dụng chúng một cách thống nhất quan các trang.

Hãy bắt đầu chọn typeface cho body text trước. Nó quan trọng bởi nó sẽ ảnh hưởng tới việc chúng ta chọn typeface gì cho headline. Ngoài ra nó cũng sẽ là element được sử dụng nhiều nhất trong thiết kế app/site. Bởi vậy, thiết kế và cảm xúc của body text sẽ ảnh hưởng tới chất lượng tổng thể của cả thiết kế.

Dùng duy nhất một typeface trước, cho tới khi bạn hiểu rõ nó. Lời khuyên này dành cho beginner. Hãy trung thành với lựa chọn, chơi với các weight và style khác nhau. Một typeface có nhiều style, weight có thể ứng dụng cho nhiều nội dung, bối cảnh khác nhau. Một ví dụ điển hình là San Francisco của Apple.

Đảm bảo sự kết hợp giữa các font chữ hợp lý. Nếu bạn muốn dùng nhiều hơn một font, đảm bảo hai bộ font ấy hỗ trợ lẫn nhau. Lấy ví dụ như hình dưới, Georgia và Verdana có chung một số yếu tố về cấu trúc vậy nên nó tạo ra sự kết hợp hài hòa. Trong khi, cặp Baskerville và Impact với tương phản quá mạnh, khiến hai font chữ nhìn không liên quan.

2. Chọn kích thước font phù hợp

Kích thước của font chữ cũng ảnh hướng tới trải nghiệm đọc của người dùng:

Font chữ quá nhỏ có thể khiến người dùng thấy vất vả khi đọc, có thể bỏ qua nhiều thông tin quan trọng. Lưu ý, nó thường xảy ra với giao diện mobile.
Font quá to cũng tạo ra vấn đề. Văn bản quá lớn khiến người dùng mất tập trung, có thể ảnh hưởng tới phân cấp trên trang.

Đó là lý do chúng ta luôn cần chọn một kích thước font vừa đủ cho body text. Một số gợi ý cho bạn khi lựa chọn kích thước font chữ:

Cho màn hình máy tính: Dùng 16px hoặc lớn hơn cho body text.
Với thiết bị iOS: Dùng text không dưới 11 point.
Với thiết bị Android: Dùng text không dưới 12 sp, khuyến bị dùng ở 14 sp.

3. Căn văn bản bên trái

Thói quen đọc là từ trên xuống dưới, từ trái qua phải. Vậy nên, căn văn bản bên trái sẽ khiến nó dễ đọc hơn. Khi văn bản được căn trái, mắt chúng ta sẽ biết cần bắt đầu từ đâu và mỗi khi hết dòng, chúng ta cũng dễ để tìm thấy đầu dòng tiếp theo hơn.

Ngoài ra, cũng nên lưu ý không nên để duy nhất một chữ bị rớt ở dòng cuối.

4. Chọn typeface có hiển thị tốt trong nhiều kích thước khác nhau

Người dùng sẽ dùng app/site của chúng ta ở nhiều thiết bị với nhiều kích thước màn hình khác nhau. Bởi vậy UI cần được tích hợp cho nhiều thiết bị và font chữ cũng cần hiển thị ở nhiều kích thước khác nhau. Lúc này, chúng ta cần chọn ra typeface có thể tối ưu cho nhiều kích thước, đảm bảo độ dễ đọc trên nhiều thiết bị. Nên tránh những font có tính trang trí, viết tay, chúng đẹp nhưng sẽ khó đọc, khó ứng dụng.

Đọc thêm: 4 nhân tố tạo nên thương hiệu doanh nghiệp vững mạnh: Logo, Typeface và font, Image, Style guideline

5. Dùng font chữ có đặc điểm chữ cái rõ ràng

Tính dễ đọc của một font chữ chia làm hai yếu tố là: readability và legibility. Trong đó legibility là khả năng phân biệt các chữ cái với nhau trong cùng một bộ chữ. Tuy nhiên, không phải font chữ nào cũng có độ dễ đọc cao. Có nhiều font chữ có chữ “i” và chữ “L” (như ví dụ bên trên). Chúng ta cần tránh những font như thế, tránh gây khó đọc cho người dùng khi đọc nội dung ở màn hình nhỏ.

6. Giới hạn độ dài dòng

Độ dài dòng quá lớn là một trong những lỗi phổ biến nhất trong các thiết kế web. Dòng quá dài khiến quá trình đọc thiếu thoải mái, dễ mất dấu dòng khi đọc xuống dòng. Nhìn chung, với màn hình máy tính, độ dài dòng tạo độ thoải mái ở khoảng 60 ký tự trên một dòng.

Đối với màn hình mobi, con số này nên nằm ở khoảng 30-40 ký tự. Để thấy rõ bạn có thể xem ví dụ dưới đây. Bên trái là 50-75 ký tự trên một dòng và bên phải là 30-40 ký tự.

7. Tránh dùng all caps

All caps text — nghĩa là văn bản được viết toàn bộ bằng in hoa. Nếu bố cảnh sử dụng là từ viết tắt hay logo nó sẽ không ảnh hưởng. Tuy nhiên, nếu nó là nội dung cần đọc, tốt hơn hết chúng ta nên tránh để all caps. Bởi hình dạng các chữ all cap đều là các khối vuông, khiến người đọc khó nhận dạng chữ cái và quá trình quét và đọc văn bản theo đó cũng chậm lại.

8. Tránh căn hai lề

Việc căn hai lề tuy làm khối text gọn hơn, tránh để một lề bị thụt thò. Tuy nhiên nó lại tạo ra khoảng cách chữ trên các dòng không đồng nhất.

Với ví dụ bên trái, người đọc sẽ rất dễ bị phân tâm (ví dụ như cuộc gọi đến). Trong khi, bên phải với khoảng trống ngẫu nhiên bên phải khiến mắt dễ tìm dòng hơn khi xuống dòng.

Đọc thêm: Thiết kế UI: Những yếu tố cơ bản trong Typography những "tay mơ" cần biết

9. Giữ khoảng cách dòng hợp lý

Tất thảy vấn đề của typography đều liên quan tới khoảng trống, trong đó chúng ta có một thuật ngữ riêng cho khoảng trống giữa các dòng, đó là leading. Trong một số phần mềm, nó còn được gọi là “line spacing.”

Leading quá nhỏ sẽ khiến mật độ chữ trở nên dày, gây khó đọc, khó tìm dòng. Lúc này, chúng ta cần tăng khoảng cách dòng để cải thiện khả năng dễ đọc nhưng đồng thời nó cũng sẽ làm tăng diện tích của cột text.

Khoảng cách dòng bắt buộc phải lớn hơn độ cao của chữ. Thường thì leading nên lớn hơn 30% so với cap height.

10. Tương phản của văn bản

Ngoài những yếu tố về khoảng trống, yếu tố màu cũng ảnh hưởng tới tính dễ đọc. Bạn nên dùng màu cho văn bản có độ tương phản cao so với nền, đảm bảo chữ cái hiển thị rõ ràng.

Tuy nhiên, tương phản quá cao cũng không tốt. Một lỗi thường gặp là dùng cặp đen trắng cho text và nền, với độ tương phản cao như vậy nếu đọc trong thời gian dài sẽ khiến người đọc bị mỏi mắt.

Đọc thêm: Cách custom typeface - font chữ độc quyền tạo ra sức mạnh thương hiệu cho tập đoàn

Kết luận

Typography không chỉ để chúng ta đọc mà còn để chúng ta cảm nhận. Nó cũng là kỹ năng mà mỗi designer cần có, dù là chúng ta thiết kế digital hay in ấn. Và giống như mọi kỹ năng khác, để thực sự học nó chúng ta cần làm nó. Bạn càng thực hành nhiều, kỹ năng và hiểu biết của bạn càng được cải thiện.

Series: Typography trong quy trình xây dựng trải nghiệm số #3: Ứng dụng trong thiết kế website/App Truyền Thông Thị Giác: Nhận Thức Và Thao Túng Hợp tác với Agency: Câu chuyện về những khách hàng thích hoài nghi Thiết kế UI: Những yếu tố cơ bản trong Typography những "tay mơ" cần biết Quy trình thiết kế trải nghiệm người dùng UX để đạt tầm nhìn doanh nghiệp Sony - Một typeface tập đoàn ứng dụng cho 93 ngôn ngữ toàn cầu

Off

Cách xử lý ảo giác trong thiết kế UI - Đừng tin vào pixel!

content2 — Wed, 08 Feb 2023 07:04:02 +0000

Cách xử lý ảo giác trong thiết kế UI - Đừng tin vào pixel! content2 T4, 02/08/2023 - 14:04 UX/UI

Mắt chúng ta vốn kỳ lạ và nó thường nhầm lẫn. Thế nhưng nếu bạn hiểu về sự nhầm lẫn ấy, bạn có thể tạo ra thiết kế tốt hơn.

Khoảng những năm 1920, nguyên lý về nhận thức thị giác Gestalt xuất hiện. Nó giải thích cách mắt chúng ra xử lý hình ảnh và cách bộ não giải thích hình ảnh ấy. Trong bài viết này chúng ta sẽ nói kỹ về một số nguyên lý Gestalt mà mọi designer nên ứng dụng cho sản phẩm của mình.

UI Thiết kế UI UX/UI ui design

Mắt chúng ta vốn kỳ lạ và nó thường nhầm lẫn. Thế nhưng nếu bạn hiểu về sự nhầm lẫn ấy, bạn có thể tạo ra thiết kế tốt hơn.

Bài viết liên quan

Những thứ ấy không chỉ giúp type designer tạo ra font chữ dễ đọc, cân bằng, mà nó còn có thể giúp những designer thiết kế UX/UI cho các sản phẩm số.

1. Trọng lượng hình

Trong hình dưới đây, hình nào lớn hơn? Một hình vuông 400px và một hình tròn 400px. Dù hai hình này bằng nhau cả về chiều dài lẫn chiều rộng nhưng mắt chúng ta lại nhìn ra là hình vuông lớn hơn.

Giờ chúng ta sẽ phóng to kích thước của hình tròn một chút, bạn có thấy chúng đã bằng nhau?

Đã không còn có thể nói hình nào to hơn hình nào. Còn đây là so sánh thực tế:

Giờ chúng ta chồng hai hình tròn lên hình vuông. Bên trái, hình tròn 400px có diện tích nhỏ hơn hình vuông 400px, bởi vậy mà chúng ta nhìn thấy hình vuông to hơn. Trong khi, hai hình tròn và vuông bên phải có diện tích tương đương, vậy nên chúng ta cảm thấy chúng bằng nhau, dù hình tròn vốn to hơn.

Ảo giác này cũng xảy ra với hình tam giác và hình kim cương. Để cân bằng thị giác, chúng ta cũng cần để các hình này lớn hơn, tăng diện tích lên để bằng với diện tích hình vuông.

Vậy chúng ta ứng dụng ảo giác này vào UI như thế nào? Ví dụ như khi bạn tạo một nhóm icon, chúng ta phải để đạt được cân bằng về trọng lượng thị giác, không có icon nào bị to hay nhỏ hơn. Nếu chúng ta đặt icon vào hình vuông, chúng ta sẽ thấy icon nào giống hình vuông hơn sẽ cho cảm giác lớn hơn.

Tôi khuyến khích cân bằng thị giác cho icon bằng cách cho icon nhỏ to hơn khung lưới và thu nhỏ icon to.

Dưới đây là một ví dụ thực tế:

Đó chính là lý do mà trong một nhóm icon thường có một số icon có kích thước lớn hơn icon còn lại. Cách dễ nhất để thử tính cân bằng thị giác là làm mờ các đối tượng, từ đó, chúng ta có thể so sánh diện tích của chúng.

Nhưng đôi khi chúng ta sẽ thiết kế với những icon có sẵn như icon mạng xã hội. Trong ví dụ dưới đây, icon Facebook và Instagram là hình vuông, còn icon Twitter là hình con chim, Pinterest là hình chữ P. Tôi phóng to icon Twitter và Pinterest lớn hơn một chút để cân bằng thị giác với icon Facebook và Instagram.

Một ví dụ khác về cân bằng thị giác là text box và nút tròn. Nếu kích thước của nút bằng với chiều cao của textbox, mắt chúng ta sẽ nhìn nút nhỏ hơn text box. Bởi vậy, nếu phóng to nút hơn một chút chúng ta có thể đạt cân bằng thị giác.

Những nếu chúng ta đảo chiều âm dương của nút, chúng ta sẽ không cần phóng to nữa. Trong hình dưới, cả nút và textbox đều có chiều cao 80px, nhưng nút bên phải không cho cảm giác thiếu cân bằng nữa.

Tóm lại:

Trọng lượng thị giác là cách mắt chúng ta cảm nhận kích thước và tầm quan trọng của một vật, và cảm nhận này có thể không khớp với kích thước thực.
Hình tròn, hình kim cương, tam giác khi đặt cùng hình vuông cần có kích thước lớn hơn hình vuông.
Icon nên có khoảng không dành cho cân bằng thị giác. Khi icon đứng thành nhóm nó cần được tùy chỉnh để đạt được trọng lượng thị giác thống nhất.

2. Căn chỉnh hình

Hãy nhìn hình dưới đây và so sánh chiều dài của hai hình, chúng có bằng nhau không?

Về bản chất là có, nhưng khi thoạt nhìn chúng ta sẽ cảm thấy hình dưới ngắn hơn hình trên.

Chúng ta thay đổi một chút và chúng sẽ bằng nhau:

Để cân bằng lại thị giác, tôi đã tăng 20px cho chiều dài của hình dưới để bù lại khoảng khuyết của hình.

Và một số ví dụ phức tạp hơn:

Vậy nên, nếu bạn ứng dụng những hình này và thiết kế, hãy đảm bảo cân bằng thị giác.

Còn với những phẫn văn bản highlight thì sao? Nó tùy thuộc vào độ tương phản. Nếu tương phản giữa nền không cao, bạn có thể căn văn bản theo cách bình thường:

Nhưng nếu tương phản ấy cao:

Không giống như bản nền trắng, nền đen tạo ra sức nặng thị giác lớn và nếu mục tiêu là để đoạn text liền mạch, chúng ta cần đưa nó về cùng kích thước với text.

Nguyên tắc tương tự cũng được áp dụng cho nút và vùng nhập. Tất nhiên, không phải lúc nào nó cũng đúng. Mọi cân bằng thị giác vẫn là dựa trên nhận thức thị giác.

Trong hình bên trái, màu của vùng nhập và nút không có tương phản lớn, chúng có thể được căn trên cùng một đường thẳng. Nhưng ở bên phải, nút gửi có thiết kế nhọn và màu của vùng nhập và nút có tương phản cao, vậy nên tôi đẩy nút về bên phải một chút để cân bằng thị giác.

Một khía cạnh khác về căn chỉnh là căn chỉnh hình và text của nút. Như hai nút phía dưới đây, text có nằm ở giữa?

Ở nút bên phải, tôi đã di chuyển chữ “send” qua bên trái một chút vì cạnh bên phải của hình là hình tam giác. Đồng thời tôi cũng đã kéo nút rộng hơn 40px so với nút bên phải để cho hai nút nhìn có vẻ bằng nhau:

Không chỉ cần căn để cân bằng theo chiều ngang, chúng cần cả cân bằng theo chiều dọc. Chúng ta có thể căn nó theo chiều cao của chữ cái viết hoa (cap height), khoảng trống trên và dưới nên bằng chiều cao chữ viết hoa.

Một cách căn khác là căn theo chiều cao của chữ viết thường (x-height) và trọng lượng chữ sẽ tập trung chính ở phần chữ thường

Vậy có gì khác biệt giữa hai cách căn này không? Câu trả lời là: có, những không nhiều.

Xem thêm một số ví dụ bên dưới. Bên trái là những nút được căn theo chiều cao chữ viết hoa, có nút Cancel và Ok cân bằng hơn. Bởi Cancel và OK có đều có 2 chữ cái cao bằng cap height. Trong khi chữ Sync có chỉ có 1 chữ cái viết hoa, cộng với có chữ y nhô xuống dưới nên khi căn theo x-height sẽ cân bằng hơn.

Với các nút sử dụng biểu tượng hay thì text, việc cân bằng thị giác cũng sẽ khác. Hãy đặt biểu tượng “gửi” vào một nút tròn. Bạn thấy bên nào cân bằng hơn?

Hẳn bạn cảm thấy có gì đó không hợp lý với nút bên trái. Bởi nút bên trái, biểu tượng được căn theo lưới vuông. Trong khi bên trái, biểu tượng được căn theo lưới tròn.

Câu chuyện cũng tương tự tới nút play:

Nếu bạn muốn nút được cân bằng, hãy căn biểu tượng theo lưới tròn.

Tóm lại:

Các hình có cạnh sắc nên được nên được to hoặc dài hơn khi đứng cạnh đối tượng hình vuông.
Căn text và shape của nút bằng cap height hoặc x-height.
Căn biểu tượng của nút bằng lưới tròn.

3. Hình bo góc

Thứ gì có thể cong hơn một hình tròn? Tôi từng nghĩ là không, nhưng như đã đề cập, mắt chúng ta vốn kỳ lạ và đôi khi nó nhìn ra những thứ bất ngờ. Hình tròn nào ở hình dưới có đường tròn mượt mà nhất?

Những người được hỏi chọn ra số 3 hoặc số 4. Số 1 và hai quá gầy, trong khi số 5 quá tròn trịa. Tuy nhiên, nếu chúng ta chồng số 3 và số 4 lên nhau - một hình tròn tuyệt đối và một hình đã được chỉnh - chúng ta sẽ thấy hình tròn đã được chỉnh nhìn thuận mắt hơn.

Để hiểu hơn, chúng ta hãy lấy 3 chữ o của 3 font chữ nổi tiếng là Futura, Circe, và Geometria để so sánh.

Những font chữ chất lượng đều được xây dựng dựa trên nhận thức thị giác, sử dụng những cấu trúc phức tạp để cân bằng nhiều ảo thị giác. Tôi nghĩ những hình tròn cho chúng ta cảm giác chúng tròn hơn những hình tròn kỷ hà thông thường. Chúng làm chúng ta thoải mái hơn, thuận mắt hơn.

Hãy chồng chúng lên hình tròn kỷ hà để so sánh:

Chữ o của Futura là chữ có shape gần với hình tròn kỷ hà nhất, còn hai chữ o còn lại đều có chiều rộng rộng hơn.

Về mặt nhận thức thị giác, hình tròn được điều chỉnh (phải) cho cảm giác tròn hơn hình tròn kỷ hà (trái).

Kiến thức này sẽ giúp chúng ta ứng dụng cho việc bo góc của hình. Tất nhiên, chúng ta có thể dùng tính năng có sẵn trong phần mềm nhưng kết quả sẽ không tối ưu như tùy chỉnh.

Khi một đường thẳng đột ngột chuyển thành đường cong như trên sẽ không cho cảm giác tự nhiên. Vậy nên tôi sửa đổi lại một chút:

Hình trên, đường biên của bo góc được đẩy ra ngoài, khiến điểm giao giữa đường thẳng và đường cong ít bị chú ý hơn, tự nhiên hơn.

Cùng so sánh:

Chúng ta có thể ứng dụng nó vào việc thiết kế nút

Hẳn bạn đã thấy những nút bên phải có đường cong mượt mà hơn bên trái.

Câu chuyện cũng tương tự với icon app.

Hình bên trái là hình được chỉnh theo hình tròn kỷ hà, còn hình bên phải là hình tôi đã tạo. Hình trái là một hình siêu cong, còn được gọi là Lamé curve, được khám phá bởi nhà toán học Pháp - Gabriel Lamé. Và tùy vào công thức mà chúng ta có thể ứng dụng nó để bo góc nhiều dạng hình khác nhau.

Marc Edwards cũng cho rằng Lamé curve cho ra hình với đường tròn mượt mà hơn và icon của iOS 7 trở đi đều được dựa trên nó.

Để có đường tròn như vậy, sau khi sử dụng tính năng bo góc của phần mềm bạn hãy tinh chỉnh lại nó bằng cách kéo dài trỏ path.

Tóm lại:

Bo góc theo hình tròn kỷ hà nhìn thiếu tự nhiên, chúng ta có thể dễ dàng nhìn thấy điểm giao giữa đường thẳng và đường cong.
Đoạn bo góc cần được đẩy ra ngoài biên của đường tròn kỷ hà để khắc phục.

4. Hình vuông

Đôi khi hình vuông lý tưởng lại không phải hình vuông tuyệt đối. Nếu không tin, hãy nhìn hình dưới, hình nào nhìn vuông hơn?

Bạn có thấy hình bên trái vuông vức hơn?

Mắt của chúng ta nhạy cảm với chiều cao hơn nhiều dọc. Nó giải thích tại sao chữ o của các font chữ thường có chiều rộng rộng hơn hình tròn kỷ và nét dọc của chữ H luôn dày hơn nét ngang.

Bạn thấy sao về các ảo giác trong UI này, liệu bạn có thể áp dụng vào quá trình phát triển sản phẩm, hoặc sự nghiệp UX/UI của mình?

Vai trò của nghiên cứu người dùng trong thiết kế UX Tổng quan về Digital Design — Giới thiệu về UX & UI Các loại toggle trong thiết kế UI, dùng gì? khi nào? Nghiên cứu kiểu DIY: Tự mình thu thập feedback UX 3 lý do để đầu tư nhiều hơn vào UX - trải nghiệm người dùng Thực hiện phỏng vấn người dùng như nào để cải thiện UX?

Off

Hiểu về nhận thức thị giác: xử lý Icons và text trong UI

content2 — Wed, 04 Jan 2023 04:52:30 +0000

Hiểu về nhận thức thị giác: xử lý Icons và text trong UI content2 T4, 01/04/2023 - 11:52 UX/UI

Ngoài ra, chúng ta cũng không mất quá nhiều nỗ lực cho việc ấy, mọi thứ lập tức được đưa vào vô thực một cách tự động. Và cũng chính nó đã trở thành một chủ đề lớn trong thiết kế. Nhận thức thị giác luôn là vấn đề được cân nhắc khi chúng ta thiết kế giải pháp, đáp ứng nhu cầu cho người dùng.

Tốc độ nhận thức

Nhận thức thị giác ảnh hưởng tới nhiều khía cạnh của cuộc sống, vậy nên, nếu chúng ta bỏ qua nó khi thiết kế sản phẩm sẽ là việc thiếu khôn ngoan. Đó cũng là lý do mà chúng ta sử dụng những yếu tố đồ họa có chức năng cao như icon đưa vào giao diện. Tác động của nó tới hiệu quả của sản phẩm đã là một chủ đề kéo dài trong cộng đồng thiết kế thế giới.

UX Designer UX/UI Thiết kế UI

Mắt chúng ta là một công cụ thu thập thông tin hiệu quả, nó có thể nhận một lượng lớn thông chỉ trong nháy mắt.

Tốc độ nhận thức

Trong nghiên cứu khoa học về nhận thức thị giác, sau khi phân tích và thử nghiệm, các nhà khoa học đã đưa ra kết luận: “Sự thật là chỉ cần lướt qua là mắt có thể hiểu một mức nhất định về bối cảnh xung quanh. Việc tiếp nhận, hiểu và đưa ra phán đoán ấy không phải thứ gì bí ẩn, ngược lại, nó là cơ chế bình thường của thị giác. Dù không phải ai cũng biết vẽ nhưng có vẻ như tất cả mọi người đều có thể nhận biết hình ảnh một cách hiệu quả” - A. Santella

Nhìn chung, con người có khả năng nhận biết các dấu hiệu thị giác, tiếp nhận và xử lý dữ liệu hình ảnh, thậm chí phân tích hình ảnh trừu tượng. Và nó là những yếu tố mà designer thường xuyên sử dụng để cải thiện khả năng sử dụng và điều hướng cho sản phẩm.

Một lý do mà designer thường dùng icon cho các sản phẩm của họ đó là tốc độ nhận thức. Con người xử lý những hình ảnh như icon hay minh họa nhanh hơn từ ngữ. Tự nhiên tạo ra chúng ta là một loài vật được định hướng với thị giác, vậy nên, khi thiết kế chúng ta cần tuân theo quy tắc của nhận thức thị giác. Một số quy tắc mà chúng ta nên lưu ý khi thiết kế:

Mắt con người đọc hình ảnh nhanh hơn văn bản.
Chúng ta cần khoảng 1/10 giây để tiếp nhận thông tin của một hình ảnh.
Thông tin ngôn ngữ truyền tới não thường được hình ảnh hóa.
Việc tiếp nhận hình ảnh ít bị ảnh hưởng bởi môi trường xung quanh, không bị phụ thuộc vào khả năng dễ đọc như văn bản.
Hình ảnh có khả năng lưu trữ cao hơn, với ít nỗ lực hơn.

Ngoài ra, icon và những hình ảnh rút gọn khác có thể khiến giao diện dễ tiếp cận cho nhiều đối tượng hơn. Một ứng dụng hay website có thể được dùng bởi nhiều người, trên nhiều quốc gia khác nhau. Vậy nên, chúng ta có thể kết luận là việc sử dụng icon có thể cải thiện khả năng hiểu giao diện. Ngoài ra, hình ảnh cũng hữu ích cho những người bị giới hạn về nhận thức, ví dụ như trẻ mắc chứng khó đọc.

Nơi chúng ta thường dùng icon nhất trong giao diện là tab bar. Tab bar có không gian hạn chế, vậy nên khi ứng dụng icon sẽ khiến thiết kế gọn gàng và hiệu quả hơn. Ví dụ như giao diện dưới đây được thể hiện với đồ họa chuyển động khiến thiết kế trở nên sinh động, tăng cường tính tương tác.

Một ví dụ khác về khả năng truyền tải thông tin của icon. Các biểu tượng dễ hiểu, đồng thời tiết kiệm không gian, khiến cho bố cục gọn gàng nhưng vẫn cung cấp đủ thông tin.

Độ rõ ràng của thông tin

Chúng ta có thể nhận biết icon một cách nhanh chóng, thế nhưng nếu thông điệp chúng truyền tải không rõ ràng thì tốc độ ấy không phải là một trải nghiệm tối ưu. Một icon tối nghĩa không thực sự được coi là nhận biết, vì chúng ta chỉ nhận chứ không biết. Nhận biết ở đây không chỉ là nhanh mà còn là đúng thông tin.
Có nhiều icon được đa số chúng ta hiểu với cùng một ý nghĩa, ví dụ như icon điện thoại nghĩa là gọi điện, icon thư là email, kính lúp là tìm kiếm,.. Từ đó, sử dụng những icon này tạo ra một nhận thức nhanh chóng cho chức năng của UI. Ngược lại, nếu hình ảnh của một icon không thể hiện một ý nghĩa rõ ràng, chúng ta nên cân nhắc kỹ trước khi sử dụng. Nếu icon không đẩy nhanh quá trình tương tác thì tốc độ nhận thức nhanh hay chậm không quan trọng. Đó là lý do, trong một số trường hợp, khi văn bản truyền tải thông điệp rõ ràng hơn chúng ta sẽ đặt văn bản cùng với icon để chúng có thể hỗ trợ lẫn nhau.

Dưới đây là ví dụ thể hiện khả năng hỗ trợ lẫn nhau của icon và văn bản. Kỹ thuật này kích hoạt nhận thức về tương tác chuyển tiếp, hỗ trợ khả năng nhận diện cho nút CTA. Với những người có khả năng nhận biết biểu tượng cao, sẽ không chú ý tới văn bản. Nó cũng tương tự với những người gặp vấn đề về nhận diện văn bản. Tuy nhiên, sử dụng văn bản cùng icon vẫn giảm rủi ro nếu người dùng hiểu sai tương tác của icon.

Một trường hợp khác, icon kết hợp với văn bản trong menu. Tùy thuộc vào concept thiết kế, icon có thể được thể hiểu để phù hợp với thiết kế tổng thể.

Blog App by Ludmila Shevchenko

Trong thiết kế giao diện blog này, icon hỗ trợ văn bản tên thư mục, giúp nó trở nên trực quan, dễ nhận biết hơn. Ngược lại, văn bản hỗ trợ icon, tránh việc người dùng hiểu sai về thư mục. Hơn nữa, trong trường hợp này, icon hỗ trợ thể hiện màu sắc tương ứng với thư mục, giúp đẩy nhanh tốc độ nhận biết và tìm kiếm thư mục. Với kỹ thuật này, tương tác trên giao diện sẽ trở nên dễ dàng và nhanh hơn, đồng thời, tăng khả năng sử dụng và điều hướng cho người dùng.

Nhìn chung, việc đưa icon, văn bản hay cả hai vào giao diện nên thông qua việc phân tích khán giả và hiểu mục tiêu, nội dung cần truyền tải trong tương tác.

Lý do nên ứng dụng icon vào giao diện

Thông qua những thứ đã đề cập bên trên chúng ta có thể xác định một số lý do cho việc dùng icon cho giao diện như sau:

Thúc đẩy quá trình nhận thức
Hỗ trợ quá trình ghi nhớ thông qua hình ảnh
Cải thiện điều hướng
Tối ưu không gian màn hình
Hỗ trợ văn bản, đưa ra giải thích một cách trực quan
Cộng hưởng với concept chung của thiết kế

Các yếu tố cần cân nhắc khi dùng icon

Việc làm hài lòng mọi người dùng hay đọc hết tất cả những sơ đồ nhận thức là điều bất khả thi, nhưng nhìn chung, chúng ta vẫn có những khía chung cần cân nhắc khi xét về nhận thức thị giác trong thiết kế sản phẩm:

Khách hàng mục tiêu (khả năng thể chất, tuổi, văn hóa, trình độ học vấn)
Khả năng đọc của người dùng tiêu biểu
Môi trường sử dụng phổ biến
Độ phủ của sản phẩm trên thị trường
Độ nhận biết của những yếu tố đồ họa đã chọn
Độ phân tâm/tập trung mà các yếu tố đồ họa tạo ra.

Tất thảy chúng đều liên quan tới khả năng nhận thức, thứ quyết định chất lượng và hiệu quả của việc nhận biết thông tin hình ảnh. Với designer, icon không chỉ là yếu tố đồ họa trên layout, mà hơn thế, nó là một thông điệp có tốc độ truyền tải tối ưu. Nhưng việc ấy không có nghĩa là nó có thể thay thế toàn bộ văn bản, ngược lại, văn bản và icon hỗ trợ nhau để tạo ra một trải nghiệm người dùng thân thiện hơn.

Cải thiện trải nghiệm khách hàng CX ngay với 3 bước đơn giản sau Nghiên cứu kiểu DIY: Tự mình thu thập feedback UX 3 lý do để đầu tư nhiều hơn vào UX - trải nghiệm người dùng Trải nghiệm khách hàng (CX) khác gì với trải nghiệm người dùng (UX)? Đừng để nghiên cứu UX - UX Research trở thành vật cản

Off

Các loại toggle trong thiết kế UI, dùng gì? khi nào?

content2 — Tue, 09 Aug 2022 04:01:49 +0000

Các loại toggle trong thiết kế UI, dùng gì? khi nào? content2 T3, 08/09/2022 - 11:01 UX/UI

Lựa chon loại trừ (mutually exclusive) và lựa chọn không loại trừ (mutually inclusive)

Hãy bắt đầu bằng định nghĩa về của hai khái niệm này:

Trái: lựa chọn loại trừ, phải: lựa chọn không loại trừ

Khi hai sự kiện A và B không thể xảy ra cùng lúc đó là lựa chọn loại trừ. Đây là cách cơ bản mà radio button hoạt động, chúng ta có rất nhiều lựa chọn nhưng chỉ được chọn một và bỏ chọn tất cả lựa chọn còn lại. Mỗi khi thiết bị hoạt động, luôn có một lựa chọn được chọn, không có trường hợp bỏ chọn toàn bộ các lựa chọn.

Ở phía bên kia, lựa chọn không loại trừ là khi chúng ta có thể chọn nhiều lựa chọn cùng lúc, mọi lựa chọn có thể được chọn hoặc bỏ chọn cùng lúc.

Trong một checkbox có thể là lựa chọn loại trừ hoặc không loại trừ. Với một checkbox duy nhất, chúng ta chỉ có thể tích chọn hoặc không chọn. Với một tập checkbox, chúng ta gộp nhóm chúng với một checkbox mẹ, chúng có thể chọn một vài checkbox và bỏ chọn một vài checkbox, vậy checkbox mẹ có thể:

Chọn: Nếu tất cả các checkbox con được chọn
Bỏ chọn: Nếu tất cả các checkbox con bỏ chọn
Cả hai: Các checkbox con có cả chọn và được chọn

Toggle, switch, and checkbox

Các loại toggle khác nhau

Có nhiều tên cho những nút này như: toggle switch, checkbox toggle, toggle button… Tất cả chúng có cùng một cơ chế như một điều khiển dùng để chuyển giữa hai trạng thái/chế độ.

Đầu tiên, chúng ta cần phân biệt giữ toggle button và toggle switch, chúng đều có khả năng chuyển giữa hai chế độ nhưng không thực sự theo cùng một cách:

- Toggle button: Đại diện cho một hành động thay đổi trạng thái

- Toggle switch: Đại diện cho hai (hoặc nhiều hơn) trạng thái loại trừ hoặc là lựa chọn có thể được chuyển qua lại

Tip: Nếu toggle là một hành động (play/pause) nhãn/tên đi cùng hành vi đó nên thể hiện sự chuyển đổi. Nếu toggle là một lựa chọn (on/off), nó nên thể hiện trạng thái hiện tại.

Nếu chúng ta nghĩ về hành vi của checkbox, đó cũng chính là cách mỗi checkbox hoạt động, có hai trạng thái, chọn hoặc không chọn. Nhưng khi nào dùng cái nào thì còn tùy vào bối cảnh:

Toggle: Dùng cho hành động hoặc lựa chọn có ảnh hưởng ngay lập tức tới giao diện. Những hành động này thường không cần xác nhận lại từ người dùng.
Checkbox: Dùng khi đó là thay đổi bổ xung, thường thấy trong form và cần được xác nhận lại.

Vậy điều gì xảy ra khi chúng ta có nhiều hơn 2 lựa chọn? Bạn có thể tạo một toggle có 3 trạng thái nhưng hãy cần thận, vì có thể nó sẽ gây khó khăn khi sử dụng.

Khi có nhiều hơn 2 lựa chọn sẽ là một trường hợp khác mà chúng ta nên cân nhắc sử dụng checkbox, radio button hoặc segmented control thay vì toggle.

Radio group and segmented control

Radio group (trái) và segmented control (phải)

Theo Human interface guidlenes của Apple, một segmented control là một giải lựa chọn có từ hai lựa chọn trở lên, hoạt động theo cách lựa chọn loại trừ. Ví dụ như lựa chọn căn văn bản của Word là một segmented control, bạn chỉ có thể chọn một trong ba căn trái, căn phải hoặc căn giữa.

Tương tự như vậy với radio group, vậy thì khi nào sẽ dùng cái nào?

Radio group: Tương tự như checkbox, dùng nó khi đó là lựa chọn bổ xung, thường thấy trong form và cần được xác nhận trước khi đi tới bước tiếp theo.
Segmented control: Dùng cho thay đổi tạo tác động tới UI ngay tức thì.

Đối với radio button, để đảm bảo tính dễ đọc, chúng ta nên đặt các lựa chọn theo chiều dọc để người dùng có thể quét qua các lựa chọn. Ngược lại nếu lựa chọn buộc phải đặt ngang, chú ý về khoảng cách giữa chúng.

Toggle button group

Toggle button group (trái) vs segmented control (phải).

Cuối cùng là toggle button group, nó là một nhóm các toggle hoạt động theo cách lựa chọn không loại trừ, tức mỗi toggle có thể được chọn hoặc không chọn một cách độc lập.

Về mặt hiển thị, toggle button group và segmented control có hình thức tương tự nhau. Khi đưa vào sử dụng, cách hoạt động của chúng sẽ được nhúng vào mô hình tư duy của người dùng. Tuy nhiên, không nên dùng cả hai loại cùng lúc, trừ khi chúng ta chắc được rằng người dùng có thể hiểu được chức năng và bối cảnh tương ứng của mỗi cái.

Usage recommendations

Tóm tắt những ý chính:

Không dùng toggle trong form, thay vào đó, dùng checkbox hoặc radio button
Không dùng toggle trong filter hoặc tùy chọn có nhiều hơn 2 lựa chọn
Dùng toggle cho cài đặt hoặc thay đổi tương tác tới UI ngay lập tức
Tránh dùng toggle button group cùng segmented controls cùng lúc
Chú ý cách sắp xếp lựa chọn và khoảng cách của radio group
Tránh dùng switch với nhiều lựa chọn

Thiết kế UI ui design UX/UI nghiên cứu thiết kế thiết kế

Chúng ta thường xuyên sử dụng toggle trong thiết kế UI/UX. Vậy bạn đã biết dùng chúng như thế nào và khi nào để đạt được hiệu quả tốt nhất?

Lựa chon loại trừ (mutually exclusive) và lựa chọn không loại trừ (mutually inclusive)

Hãy bắt đầu bằng định nghĩa về của hai khái niệm này:

Trái: lựa chọn loại trừ, phải: lựa chọn không loại trừ

Ở phía bên kia, lựa chọn không loại trừ là khi chúng ta có thể chọn nhiều lựa chọn cùng lúc, mọi lựa chọn có thể được chọn hoặc bỏ chọn cùng lúc.

Chọn: Nếu tất cả các checkbox con được chọn
Bỏ chọn: Nếu tất cả các checkbox con bỏ chọn
Cả hai: Các checkbox con có cả chọn và được chọn

Toggle, switch, and checkbox

Các loại toggle khác nhau

Đầu tiên, chúng ta cần phân biệt giữ toggle button và toggle switch, chúng đều có khả năng chuyển giữa hai chế độ nhưng không thực sự theo cùng một cách:

- Toggle button: Đại diện cho một hành động thay đổi trạng thái

- Toggle switch: Đại diện cho hai (hoặc nhiều hơn) trạng thái loại trừ hoặc là lựa chọn có thể được chuyển qua lại

Toggle: Dùng cho hành động hoặc lựa chọn có ảnh hưởng ngay lập tức tới giao diện. Những hành động này thường không cần xác nhận lại từ người dùng.
Checkbox: Dùng khi đó là thay đổi bổ xung, thường thấy trong form và cần được xác nhận lại.

Khi có nhiều hơn 2 lựa chọn sẽ là một trường hợp khác mà chúng ta nên cân nhắc sử dụng checkbox, radio button hoặc segmented control thay vì toggle.

Radio group and segmented control

Radio group (trái) và segmented control (phải)

Tương tự như vậy với radio group, vậy thì khi nào sẽ dùng cái nào?

Radio group: Tương tự như checkbox, dùng nó khi đó là lựa chọn bổ xung, thường thấy trong form và cần được xác nhận trước khi đi tới bước tiếp theo.
Segmented control: Dùng cho thay đổi tạo tác động tới UI ngay tức thì.

Toggle button group

Toggle button group (trái) vs segmented control (phải).

Usage recommendations

Tóm tắt những ý chính:

Không dùng toggle trong form, thay vào đó, dùng checkbox hoặc radio button
Không dùng toggle trong filter hoặc tùy chọn có nhiều hơn 2 lựa chọn
Dùng toggle cho cài đặt hoặc thay đổi tương tác tới UI ngay lập tức
Tránh dùng toggle button group cùng segmented controls cùng lúc
Chú ý cách sắp xếp lựa chọn và khoảng cách của radio group
Tránh dùng switch với nhiều lựa chọn

Thiết Kế Web Chuyên Nghiệp – Nền Tảng Thành Công Của Các Doanh Nghiệp Kỷ nguyên Số: Khi trải nghiệm UX làm nên thương hiệu Tương lai của Logo: Nó đã chết hay sẽ còn sống mãi? Tận Dụng Các Mô Hình Nhận Thức Vào Sản Phẩm Thiết Kế p1 Những nguyên tắc Gestalt - Khai thác quy luật thị giác trong thiết kế UI Tâm lý học Màu sắc và ứng dụng trong thiết kế Phương Pháp Design Sprints cho Định Vị Thương Hiệu

Off

Kiến thức thiết kế cơ bản: Tâm lý học nhận thức của hình dạng

content — Thu, 30 Jun 2022 08:46:50 +0000

Kiến thức thiết kế cơ bản: Tâm lý học nhận thức của hình dạng content T5, 06/30/2022 - 15:46 Cảm hứng thiết kế sáng tạo

Hiệu quả của thiết kế liên quan rất lớn tới nhận thức thị giác. Có nhiều yếu tố ảnh hưởng tới nhận thức này, một phần không nhỏ đó là tâm lý. Bài viết hôm nay đề cập tới tâm lý học của hình dạng và cách chúng ta ứng dụng nó để tăng hiệu quả của thiết kế.

Tâm lý học của hình dạng

Mọi đối tượng hình ảnh đều có thể được phân tách bởi hình. Ví dụ như một ngôi nhà chúng ta có thể được biểu diễn bởi sự kết hợp của hình vuông và hình tam giác, hoặc mặt trời là sự kết hợp của hình tròn với các nét xung quanh. Tuy không phải lúc nào chúng ta cũng phân tích chúng như vậy, nhưng một cách vô thức, những hình dạng này sẽ tác động tới nhận thức và hành vi của chúng ta. Trong khoa học, chúng ta gọi nó là tâm lý học của hình dạng. Trong đó, mỗi hình dạng có ý nghĩa riêng, cũng như ảnh hưởng tới tâm lý theo một cách riêng.

Ý nghĩa của hình kỷ hà (hình học)

Hình vuông và hình chữ nhật

Là hai hình phổ biến, chúng ta nhìn thấy hình vuông và hình chữ nhật mọi nơi. Chúng là tường, giường, tủ, sách, màn hình,...những thứ chúng ta tiếp xúc hằng ngày. Đường thẳng và góc vuông khiến hai hình này đem tới cảm giác an toàn, chắc chắn. Trong thực tế, những tòa nhà lớn có hình dạng này nên nó cho chúng ta cảm giác tin cậy, uy quyền.

Ý nghĩa thường thấy ở hình vuông và hình chữ nhật:

Kỷ luật
Sức mạnh
Can đảm
Bảo vệ
Tin cậy

Hình tam giác

Tam giác là một hình năng động, tạo ra chuyển động và dẫn hướng. Mắt của chúng ta có xu hướng chú ý vào đỉnh tam giác hoặc hướng mà tam giác hướng tới. Tùy vào góc của hình mà hình tam giác có thể mang lại ý nghĩa khác nhau. Hình tam giác đứng mang cảm giác ổn định, cân bằng. Trong khi tam giác ngược tạo cảm giác hình đang rơi xuống, thiếu an toàn.

Ý nghĩa thường thấy của hình tam giác:

Phấn khích
Thiếu an toàn
Nguy hiểm
Cân bằng hoặc không cân bằng

Hình tròn, oval, elip

Ý nghĩa quan trọng nhất của hình tròn đó là sự toàn vẹn, bởi nó không có điểm bắt đầu, cũng không có điểm kết thúc. Hình tròn được liên kết với mặt trời, trái đất, các hình oval, elip cũng liên quan nhiều tới những quỹ đạo hành tinh. Bởi vậy mà chúng thường cho chúng ta cảm giác bí ẩn, kỳ bí. Ngoài ra, hình tròn không có góc cạnh nên nó cho cảm giác mềm mại và dịu dàng.

Ý nghĩa thường thấy của hình tròn:

Vĩnh cửu
Tính nữ
Vũ trụ
Ma thuật
Huyền bí

Hình xoắn ốc

Hình xoắn ốc thường được thấy trong tự nhiên, ví dụ như vỏ ốc, một số loại hoa. Vậy nên, nó thường cho ta liên tưởng về sự sống, sự phát triển. Ngoài ra, trong một số nền văn hóa nó là biểu tượng cho kiến thức, trong xã hội hiện đại nó đại diện cho sức sáng tạo.

Một số ý nghĩa thường thấy của hình xoắn ốc:

Sự phát triển
Sáng tạo
Điềm tĩnh
Hiểu biết

Ý nghĩa của hình tự nhiên

Hình tự nhiên là những hình xuất hiện trong thiên nhiên, ví dụ như hình lá, hình hoa, hình động vật. Hình tự nhiên mang ý nghĩa tương ứng với hình dạng, mỗi hình sẽ là một ý nghĩa riêng biệt. Ví dụ, hoa hồng là loại hoa của tình yêu và đam mê, sư tử là sự kiêu hãnh, dũng cảm.

Ý nghĩa của hình trừu tượng

Hình trừu tượng là hình ảnh biểu tượng thể hiện một ý tưởng, một cảm xúc. Chúng không mô tả một vật nào mà tập trung vào cảm giác. Một hình trừu tượng có thể bao hàm nhiều ý nghĩa, vậy nên nó được ứng dụng phổ biến trong thiết kế, đặc biệt là thiết kế logo.

Hình trừu tượng là cách truyền đi thông điệp cảm xúc hiệu quả, mà không cần có văn bản cụ thể. Cảm xúc của hình trừu tượng tùy thuộc vào đặc tính hình ảnh mà designer thiết kế.

Cách ứng dụng tâm lý học của hình vào thiết kế

Hình dạng là yếu tố cơ bản của thiết kế đồ họa. Nó xuất hiện trong mọi phong cách thiết kế. Chúng có thể đóng vai trò như thành phần chính trong bố cục hoặc trở thành yếu tố phân chia không gian/nội dung.

Trong thiết kế logo, hình dạng được ứng dụng cho logo sẽ tạo nên cảm xúc cho logo. Với vai trò là nhận diện thương hiệu, hình khối trong logo sẽ phải mang những tính chất, tính cách mà thương hiệu ấy hướng tới. Ví dụ, một logo cho công ty tài chính cần mang lại cảm giác tin cậy có thể cân nhắc chọn hình vuông.

Hình khối cũng xuất hiện trên các giao diện người dùng. Chúng là những nút, biểu tượng, biểu mẫu,... Các khối văn bản thường được đặt trong một hình vuông hoặc hình chữ nhật nhằm cho phép người dùng sao chép văn bản nhanh. Các yếu tố trong một giao diện nên được sắp xếp theo các dạng hình để mắt dễ nắm bắt thông tin chính hơn. Ví dụ, chúng ta đặt nội dung theo một hình tam giác, với nội dung quan trọng nằm ở đỉnh tam giác sẽ giúp mắt dễ dàng tím tới nó.

Tương tự, trong typography, hình khối cũng rất quan trọng. Bản thân các con chữ là sự kết hợp của nhiều hình khác nhau và cảm xúc của những hình ấy sẽ tạo thành cảm xúc cho tổng thể font chữ. Nếu font chữ có nhiều hình tròn, nó sẽ khiến font chứ mềm mại và nữ tính hơn. Ngược lại, nếu font có nhiều đường thẳng, sẽ tạo cảm giác mạnh mẽ, nam tính.

tâm lý học ứng dụng màu sắc Mô Hình Nhận Thức hình khối trong thiết kế Thiết kế UI ui design

Bài viết hôm nay đề cập tới tâm lý học của hình dạng và cách chúng ta ứng dụng nó để tăng hiệu quả của thiết kế.

Tâm lý học của hình dạng

Ý nghĩa của hình kỷ hà (hình học)

Hình vuông và hình chữ nhật

Ý nghĩa thường thấy ở hình vuông và hình chữ nhật:

Kỷ luật
Sức mạnh
Can đảm
Bảo vệ
Tin cậy

Hình tam giác

Ý nghĩa thường thấy của hình tam giác:

Phấn khích
Thiếu an toàn
Nguy hiểm
Cân bằng hoặc không cân bằng

Hình tròn, oval, elip

Ý nghĩa thường thấy của hình tròn:

Vĩnh cửu
Tính nữ
Vũ trụ
Ma thuật
Huyền bí

Hình xoắn ốc

Một số ý nghĩa thường thấy của hình xoắn ốc:

Sự phát triển
Sáng tạo
Điềm tĩnh
Hiểu biết

Ý nghĩa của hình tự nhiên

Ý nghĩa của hình trừu tượng

Cách ứng dụng tâm lý học của hình vào thiết kế

Xanh, Đỏ và Câu chuyện Ứng dụng màu sắc trong Thiết kế UI Thiết kế đồ hoạ: Cần Bao Nhiêu Cái Wow Cho Một Thiết Kế? Hình khối trong Thiết kế Web: Tâm lý học và Nhận thức thị giác Cách thương hiệu ứng dụng màu sắc trong thiết kế nhận diện Hiểu từ A-Z về Thiết kế Website Responsive

Off

Tổng quan về Digital Design — Giới thiệu về UX & UI

content — Thu, 30 Jun 2022 08:17:26 +0000

Tổng quan về Digital Design — Giới thiệu về UX & UI content T5, 06/30/2022 - 15:17 UX/UI digital design digital thiết kế số Thiết kế UI Thiết kế UX

Thiết kế digital đã trở thành một trong những ngành phát triển nhất và thiết kế đã không chỉ còn là thứ chúng ta thấy, mà là trải nghiệm của chúng ta trên các thiết bị.

Bài viết liên quan

Thiết kế digital thường được gắn với UX, UI và vai trò của người thiết kế khi làm digital là phải để sản phẩm có thể tích hợp trên nhiều hệ điều hành, thiết bị khác nhau.

Bởi sự phát triển nhanh chóng của công nghệ di động, đã biến các tương tác giữa con người và các thiết bị số trở thành một tương tác cơ bản hàng ngày. Điều ấy khiến thiết kế digital đã trở thành một trong những ngành phát triển nhất và thiết kế đã không chỉ còn là thứ chúng ta thấy, mà là trải nghiệm của chúng ta trên các thiết bị.

Thiết kế digital là gì?

Về cơ bản, thiết kế digital là phần thiết kế hiển thị trên một thiết bị nhằm tương tác với con người. Hai phần chính của thiết kế digital là thiết kế trải nghiệm người dùng (UX) và thiết kế giao diện người dùng (UI). Một digital designer sẽ tạo ra nghiệm người dùng, bao gồm cả giao diện lẫn cảm xúc của sản phẩm. Thiết kế hình ảnh chỉ là một phần nhỏ trong số ấy, phần chính đó là nhu cầu của người dùng, tính tương thích giữa sản phẩm và vấn đề của người dùng và chức năng tối thiểu cần có để người dùng có thể đjat được mục tiêu của họ. Điều ấy có nghĩa là thiết kế digital liên quan rất nhiều tới kỹ thuật.

Một sản phẩm kỹ thuật số giống như cơ thể con người, phần code sẽ là bộ xương, cho cơ thể một cấu trúc. UX sẽ là cơ quan nội tạng, giúp đo lường, tối ưu hóa và tạo ra sự sống. Trong khi, UI sẽ là da thịt, nó đại diện, tương tác với thế giới bên ngoài. Quan trọng hơn, tất cả chúng tương quan lẫn nhau và không thể hoạt động nếu thiết một trong ba thứ ấy.

Thiết kế UX là gì?

Mỗi sản phẩm nào cũng bao gồm trải nghiệm người dùng tương ứng với nó, từ cốc cà phê, cái bàn, cái ghế hay cái đèn. Với vai trò là designer, chúng ta thiết kế ra sản phẩm đồng thời tạo ra trải nghiệm người dùng cho chính sản phẩm ấy. Nó không khác gì khi xét với sản phẩm digital, chúng ta tạo ra trải nghiệm, tạo sự thú vị, làm người dùng thỏa mãn, đồng thời, tạo sản phẩm tối ưu, hiệu quả.

Khái niệm trải nghiệm người dùng (UX) lần đầu được giới thiệu bởi Donald Norman - kỹ sư điện, nhà khoa học nhận thức, kiêm kỹ sư trải nghiệm người dùng tại Apple. Ông định nghĩa, trải nghiệm người dùng là toàn bộ trải nghiệm của một người với một hệ thống, sản phẩm hoặc thiết bị. Cụ thể, nó là tương tác của họ với chất liệu, hình dạng, màu sắc, tính năng của sản phẩm ấy. Bởi vậy, trải nghiệm người dùng là yếu tố chính quyết định thành bại của một sản phẩm trên thị trường và thiết kế cần được thực hiện dựa trên nhu cầu và mục tiêu của người dùng cuối.

Người dùng luôn là trung tâm của sản phẩm, mục tiêu chính mà sản phẩm được tạo ra là để đáp ứng nhu cầu, mong muốn của họ. Đó là lý do, thiết kế trải nghiệm người dùng không chỉ là đồ họa hay nghệ thuật, mà còn bao hàm cả khoa học, sinh học, tâm lý học và công nghệ. Một sản phẩm trực quan, dễ sử dụng, có thể đáp ứng mong muốn và mục tiêu của người dùng một cách dễ dàng, nhanh chóng chính là một sản phẩm có trải nghiệm tốt.

Ngoài thiết kế, UX designer sẽ tham gia nhiều giai đoạn phát triển sản phẩm khác để hiểu và đáp ứng nhu cầu của người dùng, ví dụ như nghiên cứu người dùng, lên chiến lược cho sản phẩm. Điều này cũng nhằm mục đích có thể tạo ra một sản phẩm phù hợp với nhu cầu của thị trường. Nếu sản phẩm không phù hợp với nhu cầu và mong muốn của người dùng, có nghĩa sản phẩm ấy không có giá trị và sẽ bị loại bỏ khỏi thị trường, gây tổn thất về cả thời gian lẫn tiền bạc cho nhà phát triển. Bởi vậy, UX designer sẽ là người tạo ra giải pháp cho người dùng nhưng cung phải đáp ứng được mục tiêu kinh doanh, thông qua nhiều câu hỏi tại sao, cái gì và như thế nào:

Tại sao người dùng chọn dùng sản phẩm?
Mục tiêu của họ khi dùng nó là gì? Sản phẩm của chúng ta có đáp ứng chúng?
Họ có thể đạt được những mục tiêu ấy một cách dễ dàng với sản phẩm không?

Công việc chính khi thiết kế UX

Có 4 công việc chính khi xây dựng trải nghiệm người dùng là: thiết kế tương tác, cấu trúc thông tin, nghiên cứu người dùng và tạo chiến lược trải nghiệm:

Thiết kế tương tác: Tạo một sản phẩm dễ sử dụng, điều hướng tốt. Những thứ như button, chuyển trang, animation là những phần thuộc về thiết kế tương tác.
Cấu trúc thông tin: Sắp xếp, tổ chức thông tin theo một cách có hệ thống, rõ ràng, cho người dùng có thể hiểu và được điều hướng dễ dàng.
Nghiên cứu người dùng: Nhằm xác định vấn đề, hiểu người dùng, từ đó có thể thiết kế ra giải pháp tối ưu.
Chiến lược trải nghiệm: Đóng vai trò chính trong việc kết nối giữa người dùng và mục tiêu kinh doanh.

UI là gì?

Giao diện người dùng là điểm tương tác giữa người dùng và sản phẩm. Nó có thể là màn hình cảm ứng điện thoại, touchpad trên một máy bán hàng tự động, hay giao diện của các nền tảng online hay website chúng ta sử dụng. Tất cả những gì người dùng thấy và dùng để đạt được mục đích của họ với sản phẩm.

Nhiệm vụ của UI designer là tìm hiểu nhu cầu của người dùng và đưa nó vào giao diện. Cụ thể, họ thiết kế các element đồ họa và các tương tác đáp ứng nhu cầu của nhóm khách hàng mục tiêu. Để làm được điều ấy, UI designer cần chọn ra đúng typeface, màu, đặt các nút đúng chỗ cần đặt và đảm bảo user flow hợp lý, điều hướng người dùng để họ không phải bỏ nhiều nỗ lực khi dùng sản phẩm.

“UX tập trung vào hành trình khách hàng nhằm giải quyết một vấn đề. Còn UI tập trung vào giao diện và chức năng của sản phẩm ấy.” - Ken Norton

Các yếu tố trong thiết kế UI

Trong thiết kế UI, việc chọn các element để đưa vào giao diện người dùng rất quan trọng. Khi chọn đúng, chúng sẽ giúp chúng ta điều hướng người dùng qua các trang, giúp họ đạt được mục tiêu tương ứng. Một trong những yếu tố UI phổ biến nhất là input control, hệ thống điều hướng và hệ thống thông tin.

1. Hệ thống điều hướng

Hệ thống điều hướng giúp người dùng được điều hướng qua các trang của website hoặc ứng dụng. Chúng bao gồm icon, menu, thanh tìm kiếm, chân trang, slider và tag.

2. Hệ thống thông tin

Hệ thống thông tin là nơi mà người dùng sẽ được được các thông tin trong khi sử dụng sản phẩm. Chúng bao gồm thông báo, chú giải, thanh load, hộp thư, cửa sổ.

3. Vùng chứa

Mục đích chính của vùng chứa là để gộp những nội dung liên quan lại, nó có thể bao gồm một lượng lớn thông tin trong một khoảng giới hạn. Vùng chứa thường thấy là widgets và sidebar.

Nguyên tắc thiết kế UI

Hình ảnh đồ hoạ, typeface, cấu trúc thông tin, copywriting là những yếu tố mà UI designer cần cân nhắc tới khi họ thiết kế giao diện người dùng. Có rất nhiều nguyên tắc thiết kế mà cả UI designer và UX designer cần biết, dưới đây là một trong những nguyên tắc quan trọng nhất:

1. Lấy người dùng làm trung tâm

Giao diện người dùng cần tập trung vào người dùng và mục tiêu chính là tạo ra một giao diện thuận tiện cho việc điều hướng. Để đạt được điều ấy, designer sẽ phải thực hiện phỏng vấn người dùng, thử nghiệm sản phẩm để kiểm tra khả năng sử dụng của sản phẩm.

2. Thiết kế rõ ràng, đơn giản

Giao diện người dùng thành công là khi người dùng có thể nhận biết các phần có tương tác trên sản phẩm, biết các tương tác ấy sẽ dẫn tới điểm nào trong luồng tương tác. Để người dùng có thể nhanh chóng hiểu và làm quen với sản phẩm, thiết kế của sản phẩm cần đơn giản, rõ ràng.

3. Giảm tối đa tùy chọn

Để đảm bao điều hướng, bạn nên giảm tối thiểu tùy chọn các bước, hành động và tập trung một trang có một hành động chính. Để những hành động khác ở bước tiếp theo, nếu hành động ấy mang lại giá trị lớn cho người dùng, hãy thiết kế cho nó một trang riêng.

4. Thống nhất và thân thuộc

Khi sản phẩm tương tác như cách người dùng kỳ vọng, nó sẽ khiến họ cảm thấy thoải mái. Ví dụ một đoạn văn bản nhìn giống như nó chưa link và người dùng click vào nó, nếu nó chuyển tới một trang khác nó khiến họ cảm thấy an toàn, tin tưởng, ngược lại, nếu nó không chuyển trang nó sẽ khiến người dùng thấy khó hiểu. Thiết kế tốt là khi người dùng có thể dự đoán được kết quả của tương tác được tạo ra khi nhìn qua giao diện.

5. Đừng khiến người dùng phải nghĩ

Thiết kế tốt là thiết kế vô hình. Khi người dùng đạt được mục tiêu của họ trên sản phẩm mà không gặp phải bất cứ khó khăn nào, họ được tập trung vào hành động và mục tiêu của họ thay vì thiết kế.

6. Undo và phản hồi

Đã bao lần bạn click nhầm vào một link nhưng lúng túng không biết làm sao để quay lại? Tình huống ấy hết sức phổ biến và designer cần cân nhắc tới nó khi thiết kế giao diện. Người dùng có thể nhấn nhầm vậy nên hãy để họ quay lại bước trước đó một cách dễ dàng, đừng để họ cảm thấy căng thẳng trong tình huống ấy. Bên cạnh đó, thông báo cho người dùng về quá trình xử lý cũng quan trọng. Thiết kế cửa sổ thông báo và cho họ biết hành động đang được thực hiện, hoàn thành hoặc có lỗi.

7. Khả năng tiếp cận và tính linh hoạt

Khi thiết kế giao diện cũng cần cân nhắc tới khả năng tiếp cận của người dùng. Có rất nhiều người dùng bị hạn chế thị giác hoặc mù màu, họ thường xuyên gặp vấn đề khi sử dụng những giao diện trên laptop và smartphone. Designer nên để thiết kế của mình linh hoạt, có thể tương thích với nhiều màn hình và nền tảng, để có thể cung cấp cùng một giá trị cho nhiều người dùng khác nhau.

Kết luận

Làn sóng công nghệ đã tác động tới rất nhiều lĩnh vực, trong đó có cả thiết kế. Trong những năm quá, thiết kế đã phát triển và thay đổi rất nhiều. Nhiều công cụ mà chúng ta đang dùng hằng ngày không tồn tại trong vài năm trước đó. Một thứ công cụ mới được sinh ra sẽ thay thế một hoặc thậm chí nhiều thứ cũ. Nằm trong làn sóng ấy, chúng ta cần theo sát xu hướng, đồng thời, suy nghĩ về những khả năng và thách thức cho cả chúng ta và người dùng trong tương lai.

Nếu chúng ta không nghĩ về tương lai, rất nhiều khả năng chúng ta sẽ bị bỏ lại phía sau. Một vài năm trước, chúng ta thiết kế máy phát CD, giờ đây, chúng ta thiết kế giao diện cho Spotify, Deezer và Apple music. Bởi vậy, chúng cần thích ứng, phát triển kỹ năng dựa trên những phát triển của công nghệ. Tương tự với việc kinh doanh, nếu không nhận thức được sự phát triển và thay đổi của ngành, việc phát triển sản phẩm sẽ đi tới điểm thất bại.

Mọi thứ nói ở trên chứng minh một điều: thiết kế giống như sự sống, nó phát triển và thích ứng theo sự thay đổi của công nghệ và nhu cầu của người dùng. Không có gì tồn tại mãi, nhưng điều chắc chắn là trong lĩnh vực thiết kế và phát triển sản phẩm số, chúng ta mới chỉ bước những bước đầu, sẽ còn nhiều thứ đang chờ đợi chúng ta phía trước.

Cẩm nang cho CEO: Cách tránh 10 cạm bẫy làm chậm quá trình chuyển đổi số Xây dựng chiến lược website tập đoàn nhằm đạt được mục tiêu trong ngắn và dài hạn Chuyển đổi số mô hình kinh doanh để bắt kịp xu thế 4.0

Off

Tương quan phức tạp giữa dấu và khoảng trống trong font Tiếng Việt

content — Wed, 08 Jun 2022 03:08:42 +0000

Tương quan phức tạp giữa dấu và khoảng trống trong font Tiếng Việt content T4, 06/08/2022 - 10:08 Cảm hứng thiết kế sáng tạo

Trong bài viết trước, chúng ta đã bàn luận về những thách thức khi thiết kế font Tiếng Việt. Tiếp tục chủ đề ấy, nhưng trong bài viết này, ta sẽ cùng nhau bàn kỹ hơn về khoảng trống và dấu trong font chữ Tiếng Việt.

Kerning, tracking và leading luôn là vấn đề đau đầu của các type designer. Bởi tương quan giữa khoảng âm (khoảng trống) và khoảng dương (chữ) rất quan trọng và nó ảnh hướng lớn tới thẩm mỹ của font chữ. Việc căn chỉnh khoảng trống này không thể chỉ dừng lại ở việc giãn cho đủ rộng để các ký tự không bị chạm vào nhau. Mà chúng cần tìm được một khoảng cách thích hợp để đảm bảo cả độ dễ đọc lẫn thẩm mỹ của font chữ.

Xem thêm: Series: Typography trong quy trình xây dựng trải nghiệm số #1: Lựa chọn font chữ

Và khi chúng ta xét trong trường hợp của font Tiếng Việt, việc căn chỉnh khoảng cách này càng trở nên phức tạp hơn. Với bộ dấu gồm cả dấu chữ và dấu giọng, thiết kế font Tiếng Việt có thể gặp nhiều vấn đề như:

Ảnh hưởng tới khoảng cách dòng
Ảnh hưởng tới khoảng cách khi bắt cặp với các chữ cái khác
Một số trường hợp sẽ phải lựa chọn giữa tính dễ đọc và thẩm mỹ của font

=> Thiết kế UI: Những yếu tố cơ bản trong Typography những "tay mơ" cần biết

Chữ cái có móc: ư, ơ trong font Tiếng Việt

Vấn đề chính của ư và ơ là kerning. Trong trường hợp khi nó bắt cặp với những chữ cái như n, m, u, t phía sau, móc của chúng có thể chạm vào stem hoặc ear của chữ cái sau. Đặc biệt là khi font chữ đó là font có chân, chân của n, m, u càng khiến việc kerning trở nên khó khăn.

Có hai hướng giải quyết. Thứ nhất, chúng ta có thể điều chỉnh thiết kế sao cho dấu móc và chân chữ có thể tối ưu được khoảng cách kerning. Hoặc chúng ta phải điều chỉnh khoảng cách ấy rộng hơn so với các cặp tương tự của u và o. Tuy nhiên khoảng cách này không được rộng hơn quá nhiều, tránh để tổng thể font bị lỏng lẻo.

Nếu xét riêng về ơ, vì có cấu trúc là đường tròn nên vị trí trục tung (trục dọc) của dấu móc sẽ lệch sang trái, giúp chữ được gọn hơn và dễ kerning hơn so với chữ ư.

Dù khác cấu trúc nhưng, thiết kế của dấu móc trong cả hai chữ vẫn phải giống nhau, đồng thời vị trí của chúng trên trục hoành (trục ngang) cũng nên tương đồng. Dấu móc này khi đặt vị tró cao hơn (hình trái) chữ sẽ dễ kerning nhưng khó đặt dấu giọng, khó leading. Ngược lại, khi nó đặt ở vị trí thấp hơn sẽ dễ đặt dấu giọng và leading hơn, nhưng nó sẽ khó kerning hơn.

Mốt số designer giải quyết vấn đề này bằng cách biến tấu hoặc xoay dấu móc. Tuy nhiên, nó chỉ có thể ứng dụng cho font display.

Với ư và ơ, khi có một khoảng âm bên phải (móc) việc đặt dấu giọng cần xem xét sao cho có sự cân bằng cả khi chữ cái đứng một mình lẫn khi ghép cặp với chữ cái khác.

Chữ có mũ: Â, â, Ê, ê, Ô, ô trong font Tiếng Việt

Vấn đề lớn nhất của nhóm có mũ đó là khi được thêm dấu giọng chữ sẽ trở thành 2 tầng dấu và nó sẽ ảnh hưởng tới khoảng cách dòng (leading). Khi có 2 tầng dấu, khoảng cách dòng của font buộc phải rộng hơn. Bởi nếu khoảng cách quá nhỏ sẽ khiến dấu dính với dòng trên, đặc biệt là khi dòng trên có những chữ như p, g, y.

Trong trường hợp không thể điều chỉnh khoảng cách, chúng ta sẽ phải điều chỉnh thiết kế và vị trí của font chữ. Với thiết kế chúng ta có thể giảm độ dầy nét để dấu không còn chiếm nhiều không gian. Tuy nhiên, không phải bộ font nào cũng có thể đi với dấu nét mảnh. Bởi vậy chúng ta sẽ cần điều chỉnh vị trí của dấu sao cho tối ưu được không gian giữa hai dòng.

Cụ thể hơn chúng ta sẽ phải điều chỉnh vị trí của dấu giọng, bởi vị trí dấu mũ cần đi theo trục chữ (axis). Chúng ta có ba vị trí có thể đặt dấu giọng là: trái, phải và đỉnh.

Đối với dấu ngã, hầu hết các trường hợp cũng sẽ được đặt theo trục chữ. Bởi nếu đặt bên trái sẽ không đúng với chiều tay viết chữ. Còn đăt bên phải sẽ có thể khiến dấu bị dính vào chữ phía sau. Một số trường hợp với font all caps, nó vẫn được đặt bên phải để làm khối chữ nhìn chắc chắn hơn, đồng thời, tránh ảnh hưởng tới khoảng cách dòng.

Trong khi đó, dấu hỏi có chiều rộng hẹp hơn dấu ngã nên nó thường được đặt bên phải của dấu mũ. Dù vậy, vẫn có thể đặt nó tại đỉnh để chữ được cân bằng hơn, đảm bảo về thẩm mỹ hơn, tuy nhiên vị trí này không tối ưu cho leading. Ngược lại, khi đặt nó bên phải, leading được tối ưu nhưng chữ lại kém cân bằng.

Tương tự với dấu sắc và dấu huyền, chúng sẽ tối ưu hơn nếu đặt bên phải dấu mũ. Một số font chữ, dấu huyền được đặt bên phải, tuy nhiên dấu sắc không bao giờ đặt ở vị trí này. Nguyên nhân vẫn là do ngược với chiều tay viết, gây mất tự nhiên.

Ngoài ra, vị trí dấu còn phụ thuộc vào độ cao của ascender. Đối với font có ascender cao, dấu sẽ có nhiều không gian hơn và ngược lại, ascender thấp dấu sẽ có ít không gian hơn.

Bên cạnh đó, kerning cũng là một vấn đề đối với nhóm â, ê, ô khi có thêm dấu giọng. Việc kerning cần đảm bảo tính dễ đọc, tránh để dấu dính với những chữ như đ hay t khi bắt cặp.

Một số font chữ, hình dạng dấu khác nhau khi có 1 tầng dấu chuyển thành 2 tầng dấu. Việc này nhằm tối ưu leading, tuy nhiên, nó sẽ ảnh hưởng tới thẩm mỹ của font chữ.

Xem thêm: Muôn nẻo đường ngoắt ngoéo với font Tiếng Việt

Chữ có mũ ngược: Ă, ă trong font Tiếng Việt

Tương tư như dấu mũ, dấu mũ ngược cũng gặp vấn đề về leading khi thêm dấu giọng. Tuy nhiên, khác với dấu mũ, cấu trúc của dấu mũ ngược có có hai đỉnh kèm không gian trống ở giữa. Điều này khiến cho các dấu giọng khi đi kèm dấu mũ ngược buộc phải đặt ở đỉnh.

Trong trường hợp muốn tối ưu leading của những cặp dấu này, chúng ta buộc phải thay điều chỉnh thiết kế chữ. Nhưng khi xem xét vấn đề này, nó sẽ lại liên quan tới thiết kế của các cặp dấu đi với dấu mũ. Dù dấu giọng khi đi với dấu mũ và khi đi với dấu mũ ngược có thể khác nhau, tuy nhiên chúng ta vẫn phải đảm bảo tính đồng bộ để thiết kế font được hài hòa.

Chữ có gạch ngang: Đ, đ trong font Tiếng Việt

Cấu trúc của đ tương tự như d, chỉ có thêm gạch ngang (ear). Thường gạch ngang này cũng sẽ được thiết kế với vị trí thiên về bên trái với chữ in thường và thiên về phải với in hoa. Vậy nên đ không gây nhiều vấn đề về kerning.

Vấn đề chỉ xảy ra khi nó bắt cặp với các chữ có dấu. Bởi phần gạch ngang ấy cũng sẽ lấn một phần diện tích khoảng trống, trong trường hợp chữ cái bên cạnh có hai tầng dấu, đ có thể dính với dấu giọng của chữ bên cạnh. Đó cũng là lý do nên hạn chế đặt dấu bên trái. Ví dụ với từ “đồng”, nếu dấu huyền ở bên trái sẽ làm khoảng trống giữa đ và ô rối mắt.

Typography Typo Font Tiếng Việt Font chữ UX/UI UI Thiết kế UI Thị trường Việt Nam

Trong bài viết trước, chúng ta đã bàn luận về những thách thức khi thiết kế font Tiếng Việt. Tiếp tục chủ đề ấy, nhưng trong bài viết này, ta sẽ cùng nhau bàn kỹ hơn về khoảng trống và dấu trong font chữ Tiếng Việt.

Chữ cái có móc: ư, ơ trong font Tiếng Việt

Mốt số designer giải quyết vấn đề này bằng cách biến tấu hoặc xoay dấu móc. Tuy nhiên, nó chỉ có thể ứng dụng cho font display.

Chữ có mũ: Â, â, Ê, ê, Ô, ô trong font Tiếng Việt

Xem thêm: Muôn nẻo đường ngoắt ngoéo với font Tiếng Việt

Chữ có mũ ngược: Ă, ă trong font Tiếng Việt

Chữ có gạch ngang: Đ, đ trong font Tiếng Việt

Xanh, Đỏ và Câu chuyện Ứng dụng màu sắc trong Thiết kế UI Hình khối trong Thiết kế Web: Tâm lý học và Nhận thức thị giác Designer cần biết gì về những loại nghiên cứu thiết kế để bắt đầu? Bạn đã biết về Quy tắc thiết kế UI cho website? Nghề thiết kế trải nghiệm người dùng (UI/UX Designer) có phải "nghề siêu dễ"? Muôn nẻo đường ngoắt ngoéo với font Tiếng Việt Phân tích tâm lý - 3 lớp cảm xúc của thiết kế UI Designer cần biết

Off

Phân tích tâm lý - 3 lớp cảm xúc của thiết kế UI Designer cần biết

content — Mon, 06 Jun 2022 03:04:08 +0000

Phân tích tâm lý - 3 lớp cảm xúc của thiết kế UI Designer cần biết content T2, 06/06/2022 - 10:04 UX/UI

Bằng khả năng thẩm mỹ, nhà thiết kế UI sẽ là những người thiết kế ra khả năng sử dụng, tính hữu ích hay sự thấu hiểu về sản phẩm.

Lớp thứ 1 trong thiết kế UI - Nội tại

Tôi vẫn nhớ cái cảm giác lần đầu tiên bước qua cửa hàng Apple, bị thu hút và buộc phải bước vào trong. Nó mang đầy vẻ hiện đại, tương lai, sang trọng nhưng chào đón - những cảm xúc này được coi là lớp nội tại.

Đầu tiên chúng ta cần hiểu rằng hành động/cảm xúc được tạo ra bởi lớp này được tạo ra ở tiềm thức và khách hàng không chủ động quyết định nó. Lớp này hoạt động khi lần đầu chúng ta thấy một ứng dụng, một website. Chúng ta có thể có những cảm xúc khác nhau, cả tiêu cực lẫn tích cực. Nhưng đa số chúng ta sẽ thích thú với những gì khác lạ, đẹp mắt hơn là gì đó đại trà.

Ngược lại, khi chúng ta chuẩn bị tới một triển lãm ô tô hạng sang, chúng ta sẽ mặc định nghĩ rằng chúng sẽ là mùi ghế da mới, những lớp sơn sáng bóng. Chúng là những hình ảnh, cảm xúc được khơi gợi dựa trên những trải nghiệm ta từng có. Đồng thời, chúng cũng là kỳ vọng mà chúng ta có cho những trải nghiệm tương tự trong tương lai.

=> Xanh, Đỏ và Câu chuyện Ứng dụng màu sắc trong Thiết kế UI

Thiết kế cảm xúc nội tại nhằm đi vào sâu tâm trí của khách hàng, trao cho họ cảm xúc để cải thiện trải nghiệm khách hàng.

Tuy nhiên, lớp nội tại này không liên quan gì tới khả năng sử dụng, tính hữu ích hay sự hiểu về sản phẩm. Sức mạnh chính của nó là tạo ra sức hút với một ấn tượng được định trước. Bằng khả năng thẩm mỹ, nhà thiết kế UI sẽ là những người thiết kế ra nó.

Xem thêm: Nghề thiết kế trải nghiệm người dùng (UI/UX Designer) có phải "nghề siêu dễ"?

Lớp thứ 2 trong thiết kế UI - Hành vi

[Tiếp tục câu chuyện trên]

Sau khi bước vào bên trong cửa hàng Apple đó, không có sản phẩm nào mà tôi không chạm tới. Tất cả chúng đều tuyệt vời trên bàn tay tôi. Nhưng điều tuyệt nhất là tôi đã được dùng thử iPhone 11, chơi game, test thử máy ảnh,... Tôi thử hết mọi thứ và không thể ngăn bản thân mua một chiếc.

Thiết kế hành vi có thể được gọi là khả năng sử dụng, nhưng về cơ bản, hai thuật ngữ này đề cập hai khía cạnh khác nhau. Khả năng sử dụng đề cập tới chức năng của sản phẩm có thể được sử dụng trong bối cảnh cá nhân. Trong khi, thiết kế hành vi liên quan tới cách người dùng thực hiện các hành vi, độ nhanh và chính xác mà họ có thể đạt được, các lỗi họ có thể mắc và khả năng đáp ứng của sản phẩm cho các nhóm đối tượng khác nhau.

Thiết kế hành vi là thiết kế dễ kiểm tra nhất, bởi nó có thể đo lường dễ dàng bằng các tác động vật lý (cầm nắm, tắt, gạt,..) hoặc kiểm tra một tính năng cụ thể, với những đối tượng cụ thể, ví dụ: Hai nút với hai tác vụ, được đặt ở các vị trí khác nhau để thử người dùng sẽ mất bao lâu để người dùng thực hiện hai tác vụ ấy liên tiếp.

Ngoài ra, tỷ lệ xảy ra lỗi trải nghiệm có thể được đo bằng các phương pháp tương tự. Ví dụ như sự thỏa mãn khi có thể nhanh chóng tìm thấy một số liên lạc và thực hiện cuộc gọi ngay lập tức, sự dễ dàng khi gõ phím trên máy tính, hay độ khó khi dùng phím điện thoại. Chẳng hạn như iPod Touch và sự thích thú mà chúng ta cảm nhận khi sử dụng bộ điều khiển mượt mà.

=> Hướng dẫn phân tích hành vi người dùng trên website

Khi sản phẩm cho phép chúng ta hoàn thành mục tiêu với càng ít khó khăn và nỗ lực ý thức, chúng ta càng có nhiều cảm xúc tính cực. Ngược lại, một sản phẩm đòi hỏi quá nhiều nỗ lực để thực hiện hay phải điều chỉnh mục tiêu theo hạn chế của sản phẩm, sẽ khiến chúng ta có cảm xúc tiêu cực.

Những cảm xúc tích cực từ những trải nghiệm hoàn chỉnh, mượt mà, sẽ khiến người dùng cảm thấy mình được trao quyền. Chúng tạo ra sự hài lòng và tin cậy cho sản phẩm từ mối tương quan trực tiếp giữa kỳ vọng và hành vi của người dùng. Đồng thời, những cảm xúc tích cực ấy cũng khuyến khích người dùng lặp lại các hành vi ấy, biến hành vi trở thành thói quen.

Lớp thứ 3 trong thiết kế UI - Phản chiếu

Hôm nay tôi chia sẻ trải nghiệm tuyệt vời mà tôi trải nghiệm tại Apple tới tất cả các bạn.

Đó chính là cách người dùng mô tả lại trải nghiệm của họ dưới dạng câu chuyện. Dó đó, nó được gọi là phản chiếu.

Lớp thiết kế UI này là lớp mạnh mẽ nhất. Cảm xúc tích cực với sản phẩm sẽ khuyến khích người dùng chia sẻ về trải nghiệm của họ với người khác. Bởi nó khơi gợi cảm giác tự hào về việc được trải nghiệm một sản phẩm tốt. Nhìn chung, cảm xúc phản chiếu này liên quan tới ý nghĩa của sản phẩm, cách nó tác động tới suy nghĩ, khả năng nó được chia sẻ và sự tương quan với văn hóa địa phương.

Không giống như 2 lớp trước đó, lớp phản chiếu được liên kết với nhận thức, nơi diễn ra suy nghĩ, lý luận và các quyết định ý thức. Cùng với đó, không như những cảm xúc vô thức, lớp phản chiếu là lớp có độ sâu về cảm xúc, cần thời gian để hình thành.

Xem thêm: Tận Dụng Các Mô Hình Nhận Thức Vào Sản Phẩm Thiết Kế

Thiết kế UI thiết kế giao diện UX/UI UI Thiết kế dành cho doanh nghiệp nghiên cứu thiết kế Thiết kế bộ nhận diện thương hiệu

“Mọi thứ đều có tính cách: mọi thứ đều gửi đi một tín hiệu cảm xúc nhất định. Ngày cả khi tín hiệu đó không phải là chủ đích của designer, nhưng người xem website vẫn sẽ tự động cảm nhận được tính cách và cảm xúc của chúng” - Don Norman.

Lớp thứ 1 trong thiết kế UI - Nội tại

"Tôi vẫn nhớ cái cảm giác lần đầu tiên bước qua cửa hàng Apple, bị thu hút và buộc phải bước vào trong. Nó mang đầy vẻ hiện đại, tương lai, sang trọng nhưng chào đón - những cảm xúc này được coi là lớp nội tại."

=> Xanh, Đỏ và Câu chuyện Ứng dụng màu sắc trong Thiết kế UI

Thiết kế cảm xúc nội tại nhằm đi vào sâu tâm trí của khách hàng, trao cho họ cảm xúc để cải thiện trải nghiệm khách hàng.

Xem thêm: Nghề thiết kế trải nghiệm người dùng (UI/UX Designer) có phải "nghề siêu dễ"?

Lớp thứ 2 trong thiết kế UI - Hành vi

[Tiếp tục câu chuyện trên]

"Sau khi bước vào bên trong cửa hàng Apple đó, không có sản phẩm nào mà tôi không chạm tới. Tất cả chúng đều tuyệt vời trên bàn tay tôi. Nhưng điều tuyệt nhất là tôi đã được dùng thử iPhone mới, chơi game, test thử máy ảnh,... Tôi thử hết mọi thứ và không thể ngăn bản thân mua một chiếc."

=> Hướng dẫn phân tích hành vi người dùng trên website

Lớp thứ 3 trong thiết kế UI - Phản chiếu

"Hôm nay tôi chia sẻ trải nghiệm tuyệt vời mà tôi trải nghiệm tại Apple tới tất cả các bạn."

Đó chính là cách người dùng mô tả lại trải nghiệm của họ dưới dạng câu chuyện. Dó đó, nó được gọi là phản chiếu.

Xem thêm: Tận Dụng Các Mô Hình Nhận Thức Vào Sản Phẩm Thiết Kế

Hình khối trong Thiết kế Web: Tâm lý học và Nhận thức thị giác 9 nguyên tắc phải biết khi nghiên cứu thiết kế (Design Research) Nghiên cứu UX định lượng khác gì với Phân tích dữ liệu? Quy trình thiết kế trải nghiệm người dùng UX để đạt tầm nhìn doanh nghiệp Cùng ngược dòng lịch sử đồ hoạ với những dấu mốc quan trọng Những gì designer cần biết về nghiên cứu thiết kế Vai trò quan trọng của nghiên cứu người dùng đối với thiết kế Hiểu từ A-Z về Thiết kế Website Responsive

Off