Phân cấp thị giác trong thiết kế giao diện website

ĐỀ TÀI PHÂN CẤP THỊ GIÁC TRONG THIẾT KẾ GIAO DIỆN WEBSITE GVHD Ths Nguyễn Lê Mai BỘ THÔNG TIN VÀ TRUYỀN THÔNG HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG Tổng quát Thiết kế giao diện người dùng đóng[.]

ĐỀ TÀI: PHÂN CẤP THỊ GIÁC TRONG THIẾT KẾ GIAO DIỆN WEBSITE

GVHD: Ths Nguyễn Lê Mai

BỘ THÔNG TIN VÀ TRUYỀN THÔNG HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG

Tổng quát

Thiết kế giao diện người dùng đóng vai trò trọng yếu trong việc tối đa hóa tiện ích và khả năng sử dụng sản phẩm Bài nghiên cứu của nhóm chúng tôi sẽ cung cấp thông tin về phân cấp thị giác - một kĩ thuật nổi tiếng được các nhà thiết kế áp dụng để

tổ chức nội dung trang web Bài viết sẽ chỉ ra vai trò, tầm quan trọng của kĩ thuật phân cấp thị giác trong thiết kế giao diện website Ngoài ra, chúng tôi cũng tổng hợp một số phương pháp hiện đang được sử dụng, và điểm mạnh nó mang lại trong việc thiết kế giao diện, đồng thời nhấn mạnh các nguyên tắc mà các nhà thiết kế cần lưu ý trong quá trình thiết kế, cũng như hiểu được cách áp dụng các nguyên tắc này vào tình huống thực tế Qua đó, các nhà thiết kế có thể hiểu rõ về các yếu tố quyết định trong phân cấp thị giác để áp dụng chúng trong việc đảm bảo nội dung và thẩm mĩ khi thiết

kế giao diện website

Mục lục

MỞ ĐẦU 1

CHƯƠNG 1: TỔNG QUAN VỀ PHÂN CẤP THỊ GIÁC 3

1.1 Khái niệm về phân cấp thị giác 3

1.2 Các nguyên tắc của phân cấp thị giác 3

CHƯƠNG 2: PHÂN CẤP THỊ GIÁC TRONG GIAO DIỆN WEBSITE 6

2.1 Vai trò của phân cấp thị giác trong thiết kế giao diện website 6

2.2 Phương pháp tạo nên một phân cấp thị giác tốt trong thiết kế giao diện website 7

2.3 Các lưu ý khi phân cấp thị giác trong giao diện website 11

CHƯƠNG 3: TỔNG KẾT 14

MỞ ĐẦU

Trong thời đại bùng nổ Công nghệ thông tin không ai có thể phủ nhận tầm quan trọng trong việc thiết kế website doanh nghiệp Cho dù công ty hay doanh nghiệp đang kinh doanh lĩnh vực nào đi chăng nữa thì việc sử dụng website chính là xu thế tất yếu

mà hầu hết các doanh nghiệp đều sử dụng Khi khách hàng ghé thăm website của bạn nghĩa là họ đang có sự quan tâm đối với sản phẩm, dịch vụ mà bạn đang cung cấp

Để níu chân khách hàng vào website lâu và thu hút sự quan tâm không phải là điều dễ dàng Cùng một sản phẩm, dịch vụ thì có rất nhiều người kinh doanh, việc bạn không giữ được chân của khách hàng khi đến với website của mình chính là bạn đã tạo cơ hội cho những đối thủ cạnh tranh khác Để có thể giữ chân khách hàng ngay từ lúc họ mới vào website thì bạn phải chắc chắn rằng website của bạn có một giao diện bắt mắt, thu hút người nhìn, bố cục hợp lý đơn giản và dễ dàng thao tác Điểm cộng lớn

để giúp cho khách hàng có thêm những thao tác tiếp theo trên website của bạn Đây cũng chính là lý do tại sao doanh nghiệp dù lớn hay nhỏ cũng nên có một website cho riêng mình Theo thống kê, Việt Nam có trên 50 triệu người dùng mạng internet, chúng

ta đều nhận thấy đây là một thị trường thực sự tiềm năng đối với hầu hết các ngành nghề kinh doanh, dịch vụ hay mua bán Nếu như trước đây, việc giới thiệu sản phẩm, quảng bá thương hiệu hoặc mua bán, kinh doanh chỉ diễn ra tại địa phương hoặc trong nước thì giờ đây, thông qua website của mình doanh nghiệp, công ty có thể tiếp cận được với các khách hàng lớn ở nước ngoài một cách dễ dàng nhất Việc thiết kế website riêng cho doanh nghiệp gần như đã trở thành một điều bắt buộc nếu doanh nghiệp muốn thúc đẩy sự phát triển cũng như quảng bá sản phẩm, thương hiệu của mình với người tiêu dùng Website đã trở thành bộ mặt, một kênh quan trọng để doanh nghiệp tiếp thị sản phẩm của mình tới mọi nơi trên thế giới

Khi khách hàng ghé vào một website nào đó, trước khi họ kịp xem liệu có thứ họ cần hay không, nội dung, sản phẩm trong website đó như thế nào thì điều trước tiên đập vào mắt họ đó chính là giao diện của website đó Một giao diện xấu, cũ, màu sắc,

bố cục lộn xộn, liệu có giữ chân được khách hàng tìm kiếm cái họ muốn tìm, khách hàng sẽ thoát ra ngay sau khi nhìn thấy giao diện web như vậy mà không cần quan tâm đến website đó có cái gì Một thiết kế website được gọi là thành công nếu như người đó mang đến cho người dùng sự thuận tiện khi truy cập vào website Tâm lý của khách hàng họ rất ghét những website nào rối rắm, làm mất thời gian của họ Thứ họ quan tâm là sản phẩm, chính vì vậy khi truy cập vào một website đơn giản, giúp họ tìm đến nhanh với sản phẩm của mình thì sẽ là một điểm cộng nữa cho website của bạn Mỗi nhà thiết kế đều có những cách thiết kế khác nhau để từ đó họ tạo ra những sản

phẩm sáng tạo hơn, tuy nhiên có một vài nguyên tắc cơ bản mà tất cả các nhà thiết kế cần phải tuân thủ và hiểu rõ nó trước khi có thể phá vỡ nguyên tắc Trong số các nguyên tắc đó có một nguyên tắc rất quan trọng mang tên "Phân cấp thị giác" nhiều người cũng thường gọi là phân cấp trực quan Một trong những yếu tố quan trọng góp phần nâng cao hiệu quả thiết kế của bạn là sắp đặt và phân cấp rõ ràng, bằng việc làm này bạn chỉ cho người xem đâu là điểm quan trọng được nhấn mạnh trong tác phẩm,

từ đó truyền tải thông điệp một cách rõ ràng và chuẩn xác Phân cấp thị giác là một phương pháp tổ chức các yếu tố thiết kế theo thứ tự quan trọng Nói cách khác, đó là một tập hợp các nguyên tắc ảnh hưởng đến thứ tự mà chúng ta nhận thấy những gì chúng ta thấy Những quy tắc vàng này giúp chúng ta sáng tác các thiết kế có tính thẩm mỹ và thu hút sự chú ý đúng đắn Theo thuật ngữ cơ bản, hệ thống phân cấp thị giác là sự căn chỉnh kích thước và phân phối các yếu tố trong một thiết kế Nếu là một nhà thiết kế, bạn sẽ nhận thấy việc căn chỉnh và phân bố nội dung rất quan trọng, cần phải chia tỷ lệ và phân phối các đối tượng theo cách khiến cho người xem phân biệt ngay các thông tin quan trọng nhất với các phần còn lại Phân cấp thị giác là nền tảng của kiến trúc thông tin hiệu quả Khi các yếu tố giao diện người dùng được cấu trúc và sắp xếp, mọi người thích sử dụng một sản phẩm và sẽ hiệu quả hơn trong việc giải quyết các vấn đề của họ Hơn nữa, hệ thống phân cấp thị giác mạnh mẽ cải thiện hệ thống định vị vì mọi người có thể định hướng tốt hơn trong một sản phẩm

Bất kì một sản phẩm nào từ trang web, phần mềm đều có thể được phân tích thành những phần nhỏ hơn tượng trưng cho các yếu tố trong thiết kế thị giác Quan điểm này được thể hiện bởi Alan Hashimoto – giáo sư bộ môn thiết kế đồ họa và khoa học máy tính tại Đại học bang Utah, và Mike Clayton – giám đốc kiêm giáo sư bộ môn nghệ thuật thiết kế đồ họa trường Đại học Incarnate Word, trong quyển sách Visual Design Fundamentals: A Digital Approach (Nền tảng của thiết kế thị giác: Cách tiếp cận kĩ thuật số) Những yếu tố này là công cụ mà các nhà thiết kế thị giác thường sử dụng, do đó kiến thức cơ bản về chúng là điều tất yếu trong công việc Một thiết kế thành công là tạo được sự chú ý cho người xem Để làm tốt được công việc thiết kế giao diện website ngoài cách sắp xếp, chọn lọc hình ảnh, nội dung, bố cục, đường nét việc phân cấp thị giác là rất quan trọng Nó là yếu tố quan trọng góp phần nâng cao hiệu quả thiết kế của bạn là sắp đặt và phân cấp rõ ràng, bằng việc làm này bạn chỉ cho người xem đâu là điểm quan trọng được nhấn mạnh trong tác phẩm, từ đó truyền tải thông điệp một cách rõ ràng và chuẩn xác Để có một trang web hay phần mềm đẹp mắt, chúng ta cần nắm rõ những yếu tố cơ bản trong thiết kế thị giác và cách ứng dụng chúng sao cho thật phù hợp Đường thẳng, hình dạng, không gian âm, cường độ, màu

sắc và sắc thái là những yếu tố cơ bản Cách sắp đặt tối ưu các yếu tố là một kiến thức quan trọng đối với bất kì nhà thiết kế nào Biết cách thiết kế sao cho có được các yếu

tố như sự nhất quán, thống nhất, tầng lớp rõ ràng, cân bằng, tương phản, tỉ lệ hợp lý, tính nổi trội và tương đồng sẽ giúp bạn rất nhiều trong công việc Các nguyên lý phân cấp thị giác giúp ta có cái nhìn toàn diện, hiểu rõ và thấy được tầm quan trọng khi áp dụng vào trong thiết kế Các nhà thiết kế phải khôn ngoan chọn những nguyên tắc nào

để sử dụng Những quy tắc vàng này giúp chúng ta sáng tác các thiết kế có tính thẩm

mỹ và thu hút sự chú ý đúng đắn Phần lớn người đọc đều quen đọc từ trên xuống dưới, từ trái sang phải trừ một số vùng ở Trung Đông, Nam Á và Đông Á Bằng việc kết hợp chiêu bôi đậm và việc sắp đặt thông tin rõ ràng, bạn sẽ luyện được chiêu phân cấp thị giác để truyền đạt cho người dùng câu chuyện mà bạn muốn kể

CHƯƠNG 1: TỔNG QUAN VỀ PHÂN CẤP THỊ GIÁC 1.1 Khái niệm về phân cấp thị giác

Phân cấp thị giác là nguyên tắc sắp xếp các yếu tố thể hiện thứ tự quan trọng của chúng trong thiết kế Bằng cách bố trí những yếu tố này hợp lý và có chiến lược các nhà thiết kế sẽ tác động được đến nhận thức của người dùng và chỉ dẫn họ đến các hành động mong muốn

Phân cấp thị giác là một trong những kỹ thuật cốt lõi được áp dụng trong quá trình thiết kế Ban đầu nó được dựa trên lý thuyết tâm lý Gestalt để kiểm tra nhận thức trực quan của người dùng về các yếu tố liên quan đến nhau, cũng như cho thấy người dùng có xu hướng gộp nhất các yếu tố hình ảnh thành các nhóm

1.2 Các nguyên tắc của phân cấp thị giác

1.2.1 Phân cấp Typographic

Nội dung là một phần quan trọng của bất kỳ thiết kế giao diện người dùng nào

Đó là lý do tại sao hệ thống phân cấp thị giác thường phụ thuộc nhiều vào kiểu chữ Các chuyên gia đã quyết định nhấn mạnh tầm quan trọng của việc trình bày bản sao bằng cách tạo ra một hệ thống phân cấp thị giác riêng biệt được gọi là hệ thống phân cấp typographic

Hệ thống này nhằm mục đích tổ chức nội dung theo cách tốt nhất cho nhận thức của người dùng Nhà thiết kế sửa đổi và kết hợp phông chữ để xây dựng sự tương phản giữa các yếu tố sao chép có ý nghĩa và nổi bật nhất cần được chú ý đến thông tin văn bản đầu tiên và thông thường Các phông chữ được sửa đổi bằng cách điều chỉnh kích thước, màu sắc và family cũng như sự liên kết của chúng

Phân cấp Typographic bao gồm các yếu tố khác nhau của nội dung sao chép là tiêu đề, tiêu đề phụ, bản sao nội dung, phần tử gọi hành động, phụ đề và một số nội dung khác Để xây dựng hệ thống phân cấp trực quan hiệu quả, tất cả các phần tử cần được phân đoạn thành các cấp độ khác nhau Hãy xem chúng là gì

Sơ cấp: Nó bao gồm các loại lớn nhất như trong tiêu đề Cấp chính nhằm mục

đích cung cấp cho người dùng thông tin cốt lõi cũng như thu hút sự chú ý của mọi người vào sản phẩm

Trung cấp: Đây là loại phần tử sao chép cần được quét dễ dàng Chúng thường

liên quan đến các tiêu đề phụ và phụ đề giúp người dùng nhanh chóng điều hướng qua nội dung

Cao cấp: Nội dung văn bản và một số dữ liệu bổ sung sẽ tạo cấp độ cao nhất

Các nhà thiết kế thường áp dụng loại tương đối nhỏ nhưng nó vẫn có thể đọc được

Vì nội dung bản sao thường là nguồn thông tin chính trong giao diện người dùng nên các nhà thiết kế cần trình bày dữ liệu dần dần Bằng cách phân đoạn các phần tử sao chép vào các trình thiết kế cấp độ khác nhau giúp người dùng dễ dàng chuyển từ một bản sao này sang bản khác và nhận thông tin theo đúng thứ tự

Một điều nữa cần lưu ý là khi tạo kiểu chữ cho các sản phẩm di động, các nhà thiết kế được khuyến nghị giữ số lượng các lớp trong cấp thứ hai Vấn đề là màn hình

di động nhỏ không cung cấp đủ không gian cho ba cấp độ Đó là lý do tại sao các yếu

tố của cấp trung cấp như các tiêu đề phụ dịch chuyển sang một bên để làm cho giao diện người dùng trên thiết bị di động trở nên rõ ràng

1.2.2 Công cụ phân cấp trực quan

Khi các nhà thiết kế đã chọn tất cả các thành phần nội dung, đây là quá trình phân cấp Hãy tìm hiểu điều gì giúp các nhà thiết kế thiết lập hệ thống phân cấp trực quan hiệu quả của các thành phần giao diện người dùng

- Kích thước

Một trong những công cụ mạnh mẽ nhất để chuyển đổi vật liệu trực quan là kích thước Nó bắt nguồn từ tâm trí con người rằng những thứ lớn bằng cách nào đó quan trọng hơn những cái nhỏ Đó là lý do tại sao sự chú ý của người dùng tự động đi đầu tiên với những từ lớn hoặc hình ảnh lớn

Nhà thiết kế cần phải phân biệt mức độ ý nghĩa cho từng yếu tố nội dung và dựa trên dữ liệu này biến đổi các thành phần thành lớn và nhỏ

- Màu sắc

Trong các bài viết trước của chúng tôi, chúng tôi đã đề cập rằng màu sắc có tác động rất lớn đến nhận thức của người dùng lý do tại sao nó có vai trò như một công

cụ hiệu quả để tạo phân cấp thị giác

Màu sắc có hệ thống phân cấp riêng của chúng được xác định bởi sức mạnh của ảnh hưởng đến tâm trí của người dùng Có các màu đậm như đỏ, cam và đen có thể

dễ dàng thu hút sự chú ý Mặt khác, có màu sắc yếu hoặc mềm, như màu trắng và màu kem thường dùng làm nền là tốt nhất

Sử dụng các màu sắc khác nhau có thể hỗ trợ một hệ thống phân cấp các Element trong giao diện người dùng Ví dụ, các nút CTA có màu đậm chắc chắn sẽ gây chú ý đến người dùng nếu các Element khác được tạo ra trong một bảng màu nhẹ

và sáng hơn

- Tương phản

Tương phản góp một vai trò rất quan trọng trong hệ thống phân cấp thị giác Thiết

kế cần đảm bảo độ tương phản tốt để người xem có thể thấy sự khác biệt giữa các element và nội dung Độ tương phản có thể được tạo thông qua kích thước, màu sắc

và kiểu chữ Tuy nhiên, cần đảm bảo sự tương phản cần được cân bằng để các Element không áp đảo nhau

- Không gian âm

Có thể có nhiều thành phần trong giao diện người dùng và để làm cho tất cả chúng đều đáng chú ý cho người thiết kế mắt của người dùng cần phải cung cấp cho

họ một số không gian riêng tư Không gian âm, hoặc khoảng trắng, là vùng giữa các phần tử trong một thành phần thiết kế Một số nhà thiết kế thường không nghĩ về không gian màu trắng như là một thành phần của thiết kế vẫn còn các chuyên gia áp dụng nó như một công cụ hữu ích giúp xây dựng một thành phần thích hợp

- Tiệm cận

Như chúng tôi đã nói ở trên, phân cấp thị giác được xây dựng theo nguyên tắc Gestalt, do đó, nhà thiết kế chú ý sâu đến sự gần gũi của các yếu tố giao diện người dùng Khi mọi người có xu hướng thống nhất các yếu tố hình ảnh thành các nhóm, các

thành phần giao diện người dùng cần được đặt theo cách đó để người dùng có thể phân loại chúng Nếu một số yếu tố được đặt trong khoảng cách nhất định, người dùng

sẽ tự động cảm nhận chúng như một nhóm Nhà thiết kế có thể sử dụng khoảng cách gần như một công cụ giúp phân chia nội dung thành các danh mục phụ

- Lặp lại

Nếu mọi người nhận thấy rằng một số yếu tố trông giống nhau, họ có thể tự động hợp nhất chúng thành một nhóm Đó là cách lặp lại hoạt động Các nhà thiết kế lặp lại một số mẫu cho các đối tượng khác nhau có mục đích để người dùng có thể thống nhất chúng Ví dụ: một trang web có số lượng bản sao nội dung tuyệt vời tại một trang

có thể làm nổi bật các câu quan trọng nhất bằng một màu khác Nhìn thấy các câu trong màu này, người dùng có thể theo dõi từ điểm này đến điểm khác

CHƯƠNG 2: PHÂN CẤP THỊ GIÁC TRONG GIAO DIỆN WEBSITE

2.1 Vai trò của phân cấp thị giác trong thiết kế giao diện website

Việc thiết kế giao diện website ảnh hưởng rất nhiều đến khả năng người đọc tiếp nhận thông tin, ghi nhớ và thúc đẩy sự hành động Mặc dù nội dung luôn nắm vai trò trọng tâm, nhưng không một ai thích sử dụng một website với thiết kế nghèo nàn Sự phân cấp thị giác đóng vai trò rất quan trọng giúp người thiết kế định hướng người xem, kể cho người xem một câu chuyện, thông điệp phi ngôn từ hấp dẫn, thú vị, thay

vì nhồi nhét các thông tin một cách lộn xộn và khô khan

Phân cấp thị giác là nền tảng của một layout hiệu quả Khi các yếu tố giao diện người dùng được cấu trúc và sắp xếp, người dùng sẽ thích sử dụng sản phẩm và sẽ cảm thấy hiệu quả hơn trong việc giải quyết các vấn đề của họ Một phân cấp thị giác tốt có thể thu hút người xem đi đến toàn bộ website và dẫn dắt họ đi qua các phần của

nó bằng cách tạo ra các mức độ ưu tiên và luồng trực quan khác nhau

Hệ thống phân cấp thị giác cũng rất quan trọng đối với mọi loại thiết kế hình ảnh, cho dù đó là một trang đích cần hướng dẫn truy cập khách quan hay một trang điều hướng của giao diện người dùng Bời vì sự hiểu biết của người dùng về mọi yếu tố được xác định dựa trên các yếu tố khác trong bố cục và bối cảnh của chúng Các yếu

tố cấu thành được xử lý phù hợp để hình thành nên các mối quan hệ trực quan, và từ

đó thiết lập hệ thống phân cấp thị giác trên một thiết kế Phân cấp thị giác là chìa khóa

để phân biệt giữa một trang web thực sự có tầm ảnh hưởng đến luồng người dùng và một trang web chỉ đẹp một cách đơn điệu

Không có hệ thống phân cấp thị giác thường dẫn đến một số lỗi mà người xem

dễ mắc phải:

- Bị nhầm lẫn:

Người xem cố gắng tiếp nhận tất cả nội dung nhưng chỉ nhận lại sự bối rối mà không thực sự hiểu được thông tin Họ phải đọc lại nhiều lần để có thể sắp xếp và ghi nhớ những thông tin quan trọng

- Bỏ qua:

Người xem thấy mọi thứ ở mức độ quan trọng như nhau, vì vậy họ thậm chí còn không cố gắng đoán xem trang web đang muốn nói với họ điều gì Họ bỏ qua tất cả các phần bởi không có gì thông báo cho họ biết họ nên bắt đầu từ đâu và di chuyển ra sao

- Mất tập trung:

Việc thiếu không gian trống (khoảng trắng) có thể dẫn đến một trang web lộn xộn, khó hiểu và hỗn loạn Không gian trống không chỉ giúp người xem dễ dàng tiêu hóa thông tin hơn bằng cách nhóm nó vào các ngăn, mà còn tạo ra sự tập trung vì nó giúp mắt không nhìn vào các mục riêng lẻ

Tóm lại, hệ thống phân cấp thị giác trong thiết kế giao diện website rất quan trọng

để thể hiện và thúc đẩy tiêu điểm, cấu trúc của trải nghiệm Hệ thống phân cấp trực quan sẽ gây ấn tượng và thuyết phục người dùng hơn, đặc biệt là về hình thức và giao diện

2.2 Phương pháp tạo nên một phân cấp thị giác tốt trong thiết kế giao diện website

Một website được phân cấp thị giác tốt sẽ dẫn người dùng đến chức năng của trang/màn hình và cung cấp cho họ các thông tin mà họ cần Bạn sẽ cần nghiên cứu

về người dùng để hiểu hơn về họ

- Khi gặp một trang web, người dùng phản ứng cực kỳ nhanh, họ sẽ quyết định rất nhanh trong việc nên ở lại hay rời đi

- Đôi mắt người dùng theo dõi các đường dẫn đọc có thể đoán trước được, theo hình chữ F hay chữ Z

Vì vậy, bạn có thể đặt các thành phần quan trọng trên các đường chữ F và Z đó, dẫn dắt người dùng đi theo con đường được xây dựng đến mục tiêu mà bạn mong