Cách con người đọc một trang web Để tạo được đúng Visual Hierachy cần phải hiểu cách con người xử lý một trang web Quan trọng hơn cả ý tưởng, một nghệ sỹ giỏi luôn phải suy xét đến các vấn đề về bố cục.
Cách con người đọc một trang web Để tạo được đúng Visual Hierachy cần phải hiểu cách con người xử lý một trang web. Quan trọng hơn cả ý tưởng, một nghệ sỹ giỏi ln phải suy xét đến các vấn đề về bố cục, kích thước, màu sắc, phải đưa vào cái gì điều gì là quan trọng điều gì có thể bỏ qua. Điều này khơng hề dễ dàng, điều đó lý giải tại sao các bậc thầy như Van Gohg và da Vinci được coi trọng. Một giao diện website cũng vậy, nó là một nghệ thuật trực quan và phải đem theo những dạng quy tắc nghệ thuật truyền thống kết hợp với những ngun tắc thương mại. Đồng thời một website đặc biệt cần tạo lên sự lơi cuốn và hấp dẫn. Trong bài này chúng ta tìm hiểu làm thế nào để tạo visual hierachy và sự liên quan có nó với mắt con người khi quan sát website. Tổ chức trực quan (Visual Organization) Trong bài “Kết nối với Visual Hierachy" tác giả Luke đã giải thích về vấn đề này như sau: ● Thơng tin người dùng (Informating Users): Như một bàn tay vơ hình chỉ, hướng dẫn người dùng (khơng q độc đốn) để họ có thể dễ dàng từng bước qua các thơng tin các bước khác nhau trên giao diện website. https://squareup.com/global/en/register ● Kết nối các mối quan hệ nội dung (Comunicating content relationship): Giao diện nên giới thiệu nội dung theo các thứ tự ưu tiên cho người dùng để thể hiện một cách phù hợp. http://abduzeedo.com đã đưa thơng tin chun mục ở trên đầu, nội dung nổi bật ở giữa và phân trang ở cuối. ● Tạo ảnh hưởng về cảm xúc (Creating emotional impact): Mọi người ghé thăm nhà hàng khơng chỉ vì bữa ăn, họ muốn nếm, thưởng thức, trải nghiệm xem có gì đáng nhớ. Thiết kế giao diện khơng có gì đáng nhớ thì họ cũng chẳng quan tâm nhiều, ví dụ với trang web http://www.wufoo.com là một ví dụ hồn hảo về hữu dụng và dễ chịu. Mục đích cuối cùng của Thiết kế UI là trả lời 3 câu hỏi: ● Cái gì đây? ( tính hữu ích ) ● Làm sao sử dụng nó? ( tính khả dụng) ● Tại sao tơi phải quan tâm? ( sự thèm muốn ) Dự đốn trước mắt con người (Human eyes) Trong bài “Kết nối với Visual Hierachy" tác giả Luke đã giải thích về vấn đề này như sau: Người dùng thường đọc lướt, nên ta phải có chiến thuật để nội dung gây chú ý vào các vị trí họ đọc lướt. Mơ hình chữ F ● Người dùng ít khi đọc từng chữ ● 2 Đoạn đầu tiên rất quan trọng, cần đưa nội dung câu kéo vào ● Đoạn đầu tiên, tiêu đề con, danh sách các đặc điểm chính, Mơ hình Z Mơ hình này phù hợp với web thương hiệu, vì nó tạo ra giao diện đơn giản. ● Background nền để tách chia và giữ tầm nhìn người dùng ● Point #1 đây là vị trí đắc địa cho logo ● Point #2 thêm màu thứ cấp để giữ và hướng dẫn mắt người xem đến phần tiếp theo dọc theo Z ● Center of Page đây là phần để Featured Image Slider nhằm tách phần đầu và phần dưới ● Point #3, Point #4 Túm lại sử dụng mơ hình F hoặc Z để dẫn dắt mắt người xem chỉ hướng người xem một cách tế nhị. 4 chìa khố để tạo visual hierachy 01. Contrast (Tương phản) Tương phản là giữa 2 thành phần khác nhau được đặt gần . Trong thiết kế UI web có thể là màu sắc, văn hoa, hình dáng, hướng, hoặc kích thước … để có thể đặt tên cho những thứ quan trọng. Sự xem kẽ giữa các chữ có kích thước, màu sắc khác nhau cũng tạo ra sự phân cấp. Kết hợp với mơ hình Z sẽ tạo lên sự nổi bật và dẫn dắt người dùng bấm vào nút Try it Free. Túm lại độ tương phải sẽ tách động mạnh mẽ đến sự phản ứng cơ bản của con người. 02. Color (Màu sắc) Khai thác tính chất màu sắc để tạo lên sự nổi bật, gây chú ý cho người xem. Ngồi ra màu sắc cịn quyết định tâm trạng của website (vd: xanh n tĩnh, đỏ hoạt động, ) Kết hợp với mơ hình Z tạo lên màu gọi (đỏ), ngủ (xanh). 03. Size (Kích thước) 04. Space (Khoảng cách) Khoảng cách giúp tạo ra điểm thở của bố cục, tạo sự dễ dàng khi xem và kích thích tương tác. Túm lại cần cân nhắc để kết hợp: Tương phản (contrast) Màu sắc và Hịa sắc (color and tint) Kích thước & Định kiểu (size and style) Khoảng trống và Kết cấu (space and texture) Hướng và Bố cục (Z, F) (direction and layout) Văn bản đồ họa (typography) Hiểu về Visual Hierachy trong thiết kế Web Thiết kế = Kết nối Hãy nên hiểu rằng mọi người sẽ xem thiết kế của chúng ta thieo chiều hướng quan trọng, cho nên cần để họ thấy sự thiết kế hiệu quả của chúng ta. Hình đơn giản rất dễ nhận ra và khơng nói là 2 hình trịn mà là một đen, một đỏ. Với hình phức tạp hơn cần phải phân cấp trực quan để tạo lên thiết kế dễ dàng. Phân cấp thị giác thất bại Visual Hierachy Một phân cấp thị giác tốt khơng phải làm đồ họa một cách hoang dã, khơng phải là các hiệu ứng Photoshop mới nhất, nó là về việc tổ chức thơng tin theo cách có thể tiếp cận (accessible), sử dụng được (usable) và logic để mọi người viếng thăm mỗi ngày. Cách kiểm tra phân cấp thị giác Đưa ra một danh sách những điểm then chốt về thơng tin mà khách hàng có thể thích tìm kiếm hoặc quan tâm (có thể sử dụng AB testing) Gán giá trị (110) cho tầm quan trọng của thơng tin mà người dùng sẽ truy cập trung bình. Bây giờ hãy nhìn vào thiết kế một lần nữa. Gán giá trị (110) cho hình ảnh thực sự quan trọng mà bạn nhìn thấy trong thiết kế. (các thành phần xem live) Xem xét: Liệu dự kiến quan trọng có khớp với thiết kế trực quan mà đã tạo ra để quan trọng hay khơng? Cải tiến nó. Kiểm tra Visual Hierachy (cơng nghệ mờ) Làm mờ thiết kế rồi kiểm tra Khi người dùng vào website chúng ta có 5s để gây sự chú ý cho họ, tạo ấn tượng cho họ do đó website cần phải có “một phân cấp trực quan và tạo ra các trật tự quan trọng”, tạo ra Call to actions, các H1, H2 là tiêu đề quan trọng, H3, H4, link, paragraph và hình ảnh sẽ được xét sau. Vậy hệ thống phân cấp trực quan sẽ là rất quan trọng. Hãy quan sát website theo cách mờ đi, điều này sẽ kiểm tra được những thứ nổi bật vẫn sẽ nhìn thấy ngay cả khi bị mờ. Cách thức sử dụng Photoshop tạo một screenshot > Gaussion Blur khoảng 5px; Kết quả sẽ như thế này: Cách kiểm tra: Nếu thấy cần thiết phải thay đổi để quan sát tốt hơn, nổi bật những điều quan trọng hơn thì có thể thay đổi những vấn đề sau: ● Size ● Contrast ● Colour ● Shape ● Position ● Whitespace and padding Có thể muốn tốt hơn thì sử dụng Blur lên hẳn 10px để nhìn xem cịn tốt khơng? On Visual Hierarchy Ví dụ cụ thể Ví dụ ... Với hình phức tạp hơn cần phải phân cấp trực quan để tạo lên thiết kế dễ dàng. Phân cấp? ?thị? ?giác? ?thất bại ? ?Visual? ?Hierachy Một phân cấp? ?thị? ?giác? ?tốt khơng phải làm đồ họa một cách hoang dã, khơng phải là các hiệu ... Màu sắc và Hịa sắc (color and tint) Kích thước &? ?Định? ?kiểu (size and style) Khoảng trống và Kết cấu (space and texture) Hướng? ?và Bố cục (Z, F) (direction and layout) Văn bản đồ họa (typography) Hiểu về? ?Visual? ?Hierachy trong thiết kế Web ... Point #3, Point #4 Túm lại sử dụng mơ hình F hoặc Z để dẫn dắt mắt người xem chỉ? ?hướng? ?người xem một cách tế nhị. 4 chìa khố để tạo? ?visual? ?hierachy 01. Contrast (Tương phản) Tương phản là giữa 2 thành phần khác nhau được đặt gần . Trong thiết kế UI web có thể là