Cẩm nang hướng dẫn thiết kế Web (Phần 2)

Thiết kế những trang mục tiêu riêng lẻ

Chiến lược về nội dung

Có lẽ phần quan trọng nhất của chiến lược là việc tập trung vào thiết kế trên những trang mục tiêu. Phải hiểu mục tiêu của từng trang và viết nội dung căn cứ vào những mục tiêu ấy.

Sau đây là vài mẹo nhỏ để nâng cao khả năng viết nội dung:

wp-caption aligncenter”>
Image Source: Witteia
Image Source: The Daily Rind
Toàn bộ text viết hoa sẽ làm cho người dùng cảm thấy khó đọc.

Cấu trúc trang

Một cấu trúc trang hoàn chỉnh là phải rõ ràng để mỗi người dùng có thể giao tiếp với các yếu tố được sắp đặt trên mỗi trang. Trong khi không có 1 quy tắc cụ thể nào để áp dụng cho tất cả các trường hợp, thì có 1 vài hướng dẫn sau đây sẽ giúp bạn tạo nên 1 cấu trúc vững vàng:

Những hệ thống lưới và bố cục là 1 phần di sản của thiết kế và vẫn còn sử dụng trong thế giới đa nền tảng ngày nay. Hệ thống lưới trong Adobe XD giúp cho người thiết kế giữ được tính đồng nhất, thiết lập những thiết kế cho những màn hình kích thước khác nhau và quản lý những tỷ lệ giữa các yếu tố trong thiết kế bằng cách điều chỉnh hệ thống lưới.
Wireframe được tạo bởi Adobe XD. Image Source: Tim Hykes

Tính phân cấp về sự hiển thị

Mọi người thường lướt nhanh qua 1 trang web hơn là đọc kỹ mọi thứ có trên đó. Vì vậy, nếu người truy cập muốn tìm nội dung hay muốn hoàn thành nhiệm vụ nào đó, họ thường đọc lướt qua cho đến khi họ tìm thấy cái mà họ cần. Chính vì thế, bạn, là 1 người thiết kế, có thể giúp họ bằng cách thiết kế ra những sản phẩm có tính phân cấp mạnh về sự hiển thị. Đó là việc sắp xếp các yếu tố theo cách muốn nhấn mạnh tầm quan trọng của yếu tố đó (là nơi mà tầm nhìn của người dùng sẽ tập trung vào đầu tiên, rồi nơi nào chiếm thứ hai….). Việc phân cấp sẽ giúp người dùng đọc lướt qua dễ dàng hơn

Kiểu F-shaped được sử dụng bởi CNN.
Kiểu Z-scanning được sử dụng bởi Basecamp.
CTA “Learn More About Brains” nổi bật lên trong trang web.

Scrolling behavior (Thói quen cuộn thanh cuộn)

Một quy tắc bất di bất dịch trong thiết kế web là mọi người không scroll. Nhưng xin làm rõ lại: Ngày nay, mọi người đều scroll!

Để cải thiện thói quen scrolling là hoàn toàn có thể chỉ với vài mẹo nhỏ sau:

Hành động cuộc thanh cuộn gắn liền với việc điều hướng. Image Source: Zenman
Hiệu ứng chuyển slide (như dấu hiệu tải trang của Tumblr) sẽ báo cho người dùng biết còn nhiều nội dung hơn đang được tải.
Trang đăng ký của Tumblr sử dụng thanh cuộn hijacking.

Content loading (Quá trình tải nội dung)

Việc tải nội dung là giá trị thêm vào để mô tả rõ hơn về tính khả dụng của ứng dụng. Trong khi những câu trả lời liền là tốt, nhưng có những lúc trang web của bạn sẽ cần nhiều thời gian hơn để mang nội dung có giá trị đến người dùng. Sự kết nối Internet không tốt có thể là nguyên nhân gây ra phản ứng chậm, hay lúc thao tác có thể cần thêm 1 ít thời gian để hoàn thành. Nhưng sẽ là vấn đề nghiêm trọng, nếu trang web của bạn phải xuất hiện nhanh hơn và phải có tính responsive.

Facebook sử dụng skeleton screens để điền thông tin khi nội dung được tải từ từ.

Buttons (Các thanh tác vụ)

Các thanh tác vụ quan trọng trong việc tạo nên quy trình sử dụng giữa người dùng và ứng dụng sao cho mượt nhất có thể. Cho nên đáng để tập trung vào những điều cơ bản nhất sau đây:

Có phải hộp màu cam ở góc trên bên trái màn hình là button không? Không, nhưng hình khối và gán nhãn làm cho yếu tố thiết kế đó trông như một thanh tác vụ vậy.
Đừng để người dùng phải tự hỏi là những yếu tố thiết kế trên giao diện này là gì. Source Image: UX Matters.
Hãy cố gắng giữ sự đồng nhất.

Imagery (Hình ảnh)

Như mọi người đều nói, một bức ảnh có giá trị như 1,000 từ. Con người là những loài có tính hình ảnh rất cao, họ có khả năng xử lý thông tin về mặt hình ảnh ngay tức thì; 90 phần trăm lượng thông tin mà chúng ta ghi nhận và được truyền đến não tất cả đều dưới dạng hình. Những hình ảnh có năng lực mạnh thu hút được sự chú ý của người dùng và phân biệt sản phẩm. Một ảnh đơn có thể truyền tải thông điệp đến người xem nhiều hơn là một khối text đã được thiết kế kỹ lưỡng. Hơn nữa, hình ảnh có thể vượt qua mọi rào cản ngôn ngữ để truyền đạt thông tin còn text thì không.

Những nguyên lý sau sẽ giúp bạn tích hợp hình ảnh vào trong thiết kế web:

Hình ảnh không có liên quan đến nội dung sẽ gây rối cho người dùng.
Những hình ảnh không khớp sẽ làm cho người dùng thiếu đi sự gắn kết.
Những bức ảnh xuống cấp so với những bức ảnh đúng kích thước chuẩn.

Video

Với sự gia tăng tốc độ của Internet, video đang trở nên phổ biến hơn, đặc biệt xem xét đến việc chúng kéo dài thời gian của người dùng trên website của họ. Ngày nay, video có mặt ở mọi nơi. Chúng ta xem chúng trên màn hình máy tính, máy tính bảng, và trên điện thoại. Khi được dùng hiệu quả, video trở thành một trong những công cụ quyền năng nhất trong việc tương tác với người dùng – chúng truyền tải thông điệp cảm xúc nhiều hơn và mang đến cho người dùng nhiều cảm nhận hơn về sản phẩm và dịch vụ.

Những video trên Facebook phát một cách tự động ngay khi người dùng tiếp cận chúng, nhưng không phát ra âm thanh cho đến khi người dùng khởi động nó.
Image Source: Dmakproductions

 

Nội dung video có phụ đề chuyển ngữ sẽ làm cho người dùng tiếp cận thông tin nhanh hơn.

(Còn tiếp)

(Sưu tầm-A_Comprehensive_Guide_To_Web_Design)


Lê Quang CảnhLê Quang CảnhWriter
32 bộ portfolios truyền cảm hứng cho dân thiết kế bạn nên biết! (Phần 2)

i-Gallery
32 bộ portfolios truyền cảm hứng cho dân thiết kế bạn nên biết! (Phần 2)
6 phút để đọc
32 bộ portfolios truyền cảm hứng cho dân thiết kế, bạn nên biết! (Phần 1)

i-Gallery
32 bộ portfolios truyền cảm hứng cho dân thiết kế, bạn nên biết! (Phần 1)
9 phút để đọc
Những poster quảng cáo phim ấn tượng nhất 2017

i-Gallery
Những poster quảng cáo phim ấn tượng nhất 2017
5 phút để đọc
Print ads - Nghệ thuật dùng bánh quy thể hiện văn hóa tết

i-Gallery
Print ads – Nghệ thuật dùng bánh quy thể hiện văn hóa tết
5 phút để đọc
32 bộ portfolios truyền cảm hứng cho dân thiết kế, bạn nên biết! (Phần 1)

i-Gallery
32 bộ portfolios truyền cảm hứng cho dân thiết kế, bạn nên biết! (Phần 1)
9 phút để đọc
Xu hướng thiết kế web tháng 7/2020

Graphic Design
Xu hướng thiết kế web tháng 7/2020
5 phút để đọc