CÁC NGUYÊN TẮC CƠ BẢN
Chương 3. Nhập môn thiết kế biển quảng cáo
Thiết kế để đọc lướt, không phải đọc kĩ.
Nếu bạn / không biết / Biển hiệu này / của ta
Bạn chắc chắn / chưa đi quá xa / Kem cạo lông Burma!
Thứ tự biển hiệu quảng cáo bên lề đường, 1935, hãng Burma-shave.
Đối mặt với thực tế rằng người dùng của bạn sử dụng trang web vù vù như chạy giặc, có một số điều quan trọng bạn có thể làm để đảm bảo họ sẽ nhìn thấy và hiểu được nhiều nhất có thể những gì họ cần biết và những gì bạn muốn họ biết:
- Lợi dụng các tập quán chung.
- Tạo ra hệ thống phân cấp thị giác hiệu quả.
- Chia trang thành các khu vực chặt chẽ, có hệ thống.
- Làm cho những thứ click được phải thật rõ ràng.
- Loại bỏ các tác nhân gây phân tán.
- Định dạng nội dung sao cho phù hợp với việc đọc lướt.
Các tập quán chung là bạn tốt.
Một trong những cách tốt nhất để làm cho hầu hết mọi thứ được hiểu nhanh hơn, dễ dàng hơn là tuân theo các tập quán có sẵn, các khuôn mẫu thiết kế được sử dụng rộng rãi và chuẩn hóa. Ví dụ:
- Biển báo Dừng lại. Tất nhiên tài xế phải nhìn thấy và nhận ra biển báo Dừng lại ngay tức thì, ở 1 khoảng cách xa cũng nhìn ra, trong mọi điều kiện thời tiết và ánh sáng,... nên việc các biển báo Dừng lại phải trông giống nhau là rất quan trọng. (Một số chi tiết cụ thể của biển báo có thể khác nhau tùy theo từng quốc gia, nhưng nhìn chung chúng có độ tương đồng khá lớn trên toàn thế giới.)
Tập quán này bao gồm 1 hình khối rõ ràng, 1 chữ cơ bản mang ý nghĩa “Stop”, 1 màu nổi bật và có độ tương phản tốt với thiên nhiên xung quanh, và ở 1 vị trí, chiều cao, kích cỡ theo tiêu chuẩn.
- Hệ thống điều khiển xe hơi. Tưởng tượng phải đi 1 chiếc xe thuê mà cái chân ga không được đặt ở bên phải của chân phanh, hoặc còi không được đặt trên bánh lái.
Trong vòng 20 năm trở lại đây, 1 vài tập quán chung trên các trang Web đã thay đổi. Là người dùng Internet, chúng ta ít nhiều sẽ hình thành tập quán chung về những thứ như:
- Cái gì nằm ở đâu trên 1 trang web. Ví dụ, người dùng sẽ hình dung cái logo của website thường nằm ở top-left (ít nhất là ở những nước mà người ta đọc từ trái qua phải) và cái cụm điều hướng cũng sẽ nằm ở top, nhưng là ở phía bên còn lại.
- Cách mọi thứ hoạt động. Ví dụ, hầu hết các trang web thương mại điện tử đều có dùng biểu tượng cái xe đẩy (shopping cart) và 1 chuỗi những biểu tượng quen thuộc khác để đại diện cho những thứ như cách thanh toán, địa chỉ nhận hàng, etc..
- Hình thức đồ họa của mọi thứ. Nhiều thứ trên 1 trang web có giao diện được tiêu chuẩn hóa, như cái icon mà bạn nhìn cái là biết nó sẽ link tới 1 cái video, cái icon tìm kiếm có hình kính lúp, và icon tùy chọn chia sẻ lên các trang mạng xã hội.
Các tập quán chung cũng đã phát triển cho các loại trang web khác nhau - Thương mại, trường đại học, blog, nhà hàng, phim ảnh và nhiều hơn nữa - vì tất cả các trang web trong mỗi ngành đều phải giải quyết cùng một chuỗi các vấn đề.
Những tập quán này không phải tự nhiên mà có: Tất cả đều là những ý tưởng tốt của ai đó. Nếu một ý tưởng đủ hay và thực tiễn, các trang web khác sẽ bắt chước ý tưởng đó và cuối cùng người ta sẽ nhìn thấy nó nhiều lần ở nhiều chỗ tới mức nó không cần giải thích nữa.
Khi được áp dụng đúng cách, các tập quán chung giúp người dùng sử dụng web dễ dàng hơn, vì họ không cần phải liên tục tìm hiểu xem mọi thứ là gì và cách chúng nó vận hành ra sao, khi họ đi từ trang web này tới trang web khác.
Bạn cần bằng chứng về việc các tập quán chung này đắc lực như nào không? Nhìn cái trang web này xem bạn có hiểu nó là cái gì không - kể cả khi tiếng Nhật bạn 1 chữ bẻ đôi không biết - tất cả là nhờ trang web đó được thiết kế theo các tập quán đã có sẵn.
Tuy nhiên, có một vấn đề với các tập quán chung: Mấy ông designer hay ngại dùng cái này.
Khi chuẩn bị phải tuân theo một tập quán chung nào đó, các designers thường sẽ có mong muốn mãnh liệt cho việc tạo ra 1 thứ gì đó mới, phần lớn là bởi vì họ tin rằng (niềm tin này không hề sai trái đâu nhé) họ được thuê để sáng tạo và làm thứ khác biệt, chứ không phải đi theo lối mòn. Chưa nói tới việc những lời khen ngợi từ đồng nghiệp, các giải thưởng về thiết kế, và các job offer ngon nghẻ hiếm khi dựa trên các tiêu chí như “sử dụng tập quán chung 1 cách thuần thục” / “đi đúng lối mòn”.
Thi thoảng, dành thời gian để phát minh lại mô hình bánh xe cũng cho ra được 1 thiết bị lăn lăn mới mang tính cách mạng. Nhưng trong phần lớn các trường hợp còn lại thì nó chả đem lại điều gì mới.
Nếu bạn định đổi mới, trước tiên bạn phải hiểu giá trị của những gì bạn đang thay thế (hoặc lời bài hát của Bob Dylan: “Để sống được ngoài vòng pháp luật, bạn phải trung thực”) và thật dễ dàng để coi nhẹ các giá trị mà tập quán chung mang lại. Ví dụ điển hình là Scroll bar. Bất cứ khi nào một ông designer nào đó quyết định tạo ra 1 kiểu scroll bar mới lạ - thường để cho nó nhìn đẹp hơn - kết quả luôn chỉ ra rõ ràng cái sự thật rằng ông designer đó chả bao giờ biết được sự phát triển của hệ thống scroll bar tiêu chuẩn ngày nay đã bao gồm hàng trăm ngàn giờ nghiên cứu và tinh chỉnh trước đó.
Nếu bạn không sử dụng một tập quán chung khi thiết kế web hiện có, bạn cần chắc chắn rằng những gì bạn đang tạo ra cần phải
(a) hoạt động tốt y như các tập quán chung có sẵn, nghĩa là nó phải rất rõ ràng và mang tính tự giải thích, tới mức không mất thời gian công sức để học cách dùng nó
hoặc
(b) bổ sung thêm nhiều giá trị cho sản phẩm tới mức nó đáng để bỏ 1 chút thời gian công sức để học cách sử dụng.
Lời khuyên của tôi là: Đổi mới khi bạn biết chắc ý tưởng của bạn là tốt hơn, còn không thì cứ tận dụng các tập quán chung.
Đừng hiểu nhầm tôi nhé: Tôi không bao giờ cố gắng ngăn cản sự sáng tạo. Tôi thực sự thích các bản thiết kế Web sáng tạo và độc đáo. Một trong các ví dụ ưa thích của tôi là Harlem.org. Cả trang web đó được xây dựng với tấm ảnh nổi tiếng của Art Kane về 57 nghệ sĩ Jazz, chụp ở Harlem vào tháng 8 năm 1957. Thay vì sử dụng text links hay menu, bạn có thể điều hướng và tìm kiếm ngay trong bức ảnh.
Cái này không chỉ thú vị và sáng tạo, nó còn rất dễ hiểu và dễ sử dụng. Người thiết kế website còn đủ thông minh để hiểu rằng cái phương pháp này dùng 1 hồi sẽ chán, nên họ cũng thêm vào 1 định dạng điều hướng theo đầu mục (category) kiểu truyền thống: Bạn có thể tìm kiếm thông tin về các nhạc sĩ Jazz theo tên, nhạc cụ, và phong cách chơi nhạc của họ.
Nguyên tắc cơ bản là: Bạn có thể - và bạn nên - sáng tạo và đổi mới kiểu gì cũng được, làm cho sản phẩm lung linh hấp dẫn và có thẩm mỹ ra sao cũng được, miễn là bạn đảm bảo rằng nó vẫn có thể sử dụng được.
Và lời cuối cùng về tính đồng nhất.
Bạn thường hay nghe ‘tính đồng nhất’ dưới 1 quan điểm tính cực. Chúng ta thường thuyết phục được khách hàng chỉ bằng việc nêu ra: “nếu làm thế sẽ không đồng nhất”.
Tính đồng nhất luôn là 1 tiêu chuẩn phù hợp mà bạn cần phải mang lại cho sản phẩm của mình. Nếu hệ thống điều hướng của bạn lúc nào cũng ở 1 vị trí, thì tôi không cần phải suy nghĩ về nó hoặc mất thời gian tìm xem nó ở đâu. Nhưng cũng sẽ có các trường hợp đặc biệt, khi mà sản phẩm sẽ rõ ràng hơn nếu bạn làm cho nó khác biệt đi 1 chút, 1 cách có chủ ý.
Đây là thứ bạn cần ghi nhớ:
SỰ RÕ RÀNG QUAN TRỌNG HƠN SỰ ĐỒNG NHẤT
Nếu bạn có thể làm cho thứ gì đó rõ ràng hơn hẳn bằng cách khiến cho nó khác biệt đi 1 chút (1 chút thôi nhé), hãy làm như vậy đi.
Tạo ra hệ thống phân cấp thị giác hiệu quả.
Một cách quan trọng khác để làm cho sản phẩm của bạn dễ nắm bắt trong thời gian ngắn là đảm bảo mọi thứ trên trang web - tất cả các yếu tố của 1 giao diện - diễn đạt 1 cách chính xác sự tương quan giữa các yếu tố đó: cái nào là quan trọng nhất, cái nào có vai trò giống nhau, cái nào nằm ở bên trong cái nào. Nói cách khác, mỗi trang web cần có 1 hệ thống phân cấp thị giác thật rõ ràng.
Cái gì càng quan trọng thì phải càng nổi bật. Các yếu tố quan trọng nhất thường sẽ to hơn, đậm hơn, có màu sắc nổi bật hơn, có nhiều khoảng trống xung quanh hơn, hoặc ở gần đầu trang hơn - có thể là kết hợp của các yếu tố trên.
Cái gì có liên kết về mặt logic, phải được liên kết về mặt bố cục. Ví dụ, bạn có thể chỉ ra rằng những cái này có liên kết với nhau / giống nhau, bằng cách nhóm chúng nó vào cùng dưới 1 cái tiêu đề, hoặc cho chúng nó có cùng 1 style, hoặc đặt cả mớ vào 1 khung rõ ràng, tách biệt so với phần còn lại.
Cái gì được xếp gần nhau sẽ cùng thuộc một cái gì đó rộng hơn. Ví dụ, 1 mục có tên “Sách về máy tính” sẽ xuất hiện bên trên 1 dãy tựa đề từng cuốn sách riêng lẻ, cho ta biết rằng các cuốn sách đó thuộc về mục đó. Và mỗi tựa đề sách sẽ bao gồm tất cả những thứ cấu thành nên cuốn sách đó.
Cũng chả có gì mới về hệ thống phân cấp thị giác cả. Nhìn tất cả các trang báo mà xem. Trang nào cũng dùng các phương pháp làm nổi bật, xếp nhóm, tạo cụm thông tin, để đưa ra cho người đọc những định hình cơ bản về nội dung các trang báo mà không cần họ phải đọc lấy 1 chữ. Cái ảnh này đi liền với câu chuyện này, vì chúng nó cùng thuộc chiều dài với cái tiêu đề này. Bài viết này là quan trọng nhất, vì tiêu đề của nó to nhất và nó nằm ở 1 vị trí nổi bật trên trang báo.
Tất cả chúng ta đều phân tích thứ bậc thị giác mỗi ngày, nhưng nó xảy ra nhanh đến mức chỉ khi nào chúng ta không thể phân cấp thông tin được thì mới nhận ra là mình đang làm điều đó - chính là khi các gợi ý về thị giác (hoặc là do sự sắp xếp bất hợp lý của chúng) bắt chúng ta phải nghĩ.
Một hệ thống phân cấp trực giác tốt giúp chúng tôi tiết kiệm công việc bằng cách xử lý trước trang cho chúng tôi, sắp xếp và ưu tiên nội dung của nó theo cách mà chúng tôi có thể nắm bắt gần như ngay lập tức.
Nhưng khi trang web không có 1 hệ thống phân tích thứ bậc thị giác rõ ràng - nếu cái gì trông cũng quan trọng như nhau - chúng ta buộc phải quay lại quy trình đọc lướt trang web để tìm các từ khóa quan trọng, và tự hình thành nên suy luận về cách mọi thứ được sắp xếp và ưu tiên. Quy trình này mất công sức hơn khá nhiều.
Đọc 1 trang web với hệ thống phân cấp thị giác mà chỉ hơi lỗi lỗi thôi - chỉ cần cái tiêu đề bài báo trải dài hơn phần nội dung của nó, sang cả nội dung bài viết khác thôi - cũng gây khó chịu y như khi ta đọc 1 câu văn lủng củng vậy.
Hệ thống phân cấp thị giác cùi bắp này thể hiện rằng mọi đầu mục của trang web đều thuộc về khu vực “Sách về máy tính”.
Đặt lại tiêu đề ở đúng vị trí của nó khiến cho sự tương quan về thông tin rõ ràng hơn.
Kể cả khi chúng ta vẫn có khả năng hiểu đúng ý của trang web, việc này vẫn đẩy người dùng vào 1 trạng thái băn khoăn nho nhỏ, và buộc họ phải suy nghĩ khi không cần thiết.
Chia trang thành các khu vực chặt chẽ, có hệ thống.
Lý tưởng nhất, trên bất kỳ trang web nào được thiết kế tốt, người dùng có thể chơi một biến thể nho nhỏ của chương trình trò chơi truyền hình của Mỹ thời xưa ( Kim tự tháp 25.000 đô la - người chơi phải đưa ra các gợi ý về cùng 1 chủ đề để cho người kia đoán. Ví dụ, nếu các gợi ý là “dao thái thịt”, “nồi niêu xoong chảo”, “gia vị”. etc… thì chủ đề sẽ là “Dụng cụ đầu bếp”) .
Liếc nhìn xung quanh trang web, người dùng có thể chỉ vào các khu vực khác nhau của trang và bảo “Đây là những thứ mình có thể làm được trên trang web này!” “Đây là các bài viết lên top trong ngày hôm nay!” “Đây chính sản phẩm công ty này bán ra.” “Đây là những thứ chúng nó muốn mình mua! “Đây là hệ thống điều hướng giúp mình lướt tiếp phần còn lại của trang web mà không bị lạc!”
Việc chia trang thành các khu vực được xác định rõ ràng là rất quan trọng, vì nó cho phép người dùng quyết định nhanh chóng khu vực nào của trang để tập trung vào và khu vực nào họ có thể bỏ qua một cách an toàn.
Các nghiên cứu về hành vi di chuyển của mắt người dùng khi họ lướt qua trang web cho thấy rằng: người dùng chỉ cần lướt mắt qua 1 chút là đã có thể quyết định nhanh chóng xem phần nào chứa thông tin hữu ích, và họ gần như không nhìn các phần còn lại, kiểu như các phần đó không tồn tại luôn vậy. (Cái này gọi là Banner blindness - dùng để nói về khả năng bỏ qua hoàn toàn các khu vực trên trang web mà người dùng nghĩ là quảng cáo)
Làm cho những thứ click được phải thật rõ ràng.
Vì người dùng khi lướt website hầu như chỉ có đúng 1 thứ để làm, đó là tìm coi mình có thể click vào phần nào nữa, nên việc làm cho những thứ click được trở nên rõ ràng hơn là rất quan trọng.
Khi chúng ta xem một website, ta sẽ để ý nhiều kiểu gợi ý về mặt thị giác, thứ sẽ giúp ta xác định những thứ có thể click vào (hoặc gõ vào được, với trường hợp màn hình cảm ứng). Những thứ như shape (nút, tab, etc..), vị trí (trong thanh menu, etc..) và định dạng (màu text, gạch chân hoặc cả 2, etc..). Chúng ta cũng dựa vào thực tế là con trỏ trong trình duyệt Web sẽ thay đổi từ hình mũi tên sang hình con trỏ ngón tay khi bạn lướt chuột vào 1 thứ gì đó click vào được, nhưng điều này đòi hỏi người dùng phải di chuyển con trỏ chuột xung quanh 1 cách có nhận thức, và đây là một quá trình tương đối chậm. Ngoài ra cách này cũng không hoạt động trên màn hình cảm ứng vì nó không có con trỏ chuột.
Quá trình tìm kiếm các gợi ý sử dụng dựa trên ngoại hình của 1 thứ gì đó không giới hạn ở mỗi các trang Web. Như Don Norman giải thích 1 cách đầy thú vị trong tác phẩm kinh điển mới được cập nhật gần đây của ông “The Design of everyday things”, chúng ta thường xuyên phân tích hoàn cảnh và môi trường (như nhìn vào cái tay cầm mở cửa) để tìm ra các gợi ý này (phân tích để quyết định xem cái tay cầm này nên kéo hay đẩy). Đọc cuốn này đi. Bạn sẽ nhìn vào mấy cánh cửa 1 cách khác hẳn luôn.
Việc xác định xem cái gì click vào được trên 1 trang web vốn đã là 1 vấn đề lúc nổi lúc chìm từ khi những trang web đầu tiên được thiết kế.
Tuy nhiên, hiện tại, vấn đề này lại nổi lên trong thiết kế di động, như bạn sẽ thấy trong Chương 10.
Nói chung, bạn sẽ ổn thôi - nếu bạn giữ một màu đồng nhất cho tất cả các text link và button, hoặc đảm bảo rằng hình dạng và vị trí của chúng nó được thể hiện rõ ràng rằng “cái này có thể click được, mời bà con vào click”. Đừng phạm những sai lầm ngớ ngẩn như để text link và tiêu đề (không click dc) cùng 1 màu là được.
Loại bỏ các tác nhân gây phân tán.
Một trong những kẻ thù lớn nhất của các trang web được thiết kế theo kiểu dễ nắm bắt, đó là sự nhiễu loạn về hình ảnh. Người dùng có mức độ chấp nhận khác nhau với sự phức tạp và phân tán; một số người không có vấn đề gì với các trang web nhiều thông tin, nhưng rất nhiều người thấy mấy trang kiểu này hết sức khó chịu.
Có người còn thử dán giấy nhớ trên màn hình của họ để che đi các animation hay các hình ảnh động mà khiến họ mất tập trung khi lướt web.
Thường có 3 kiểu nhiễu loạn về hình ảnh:
Nhiễu loạn vô-duyên. Khi mà cái gì trên trang web đó cũng gào lên bắt bạn phải chú ý tới nó, hiệu ứng sẽ có thể rất quá đà. Nhìn đâu cũng thấy cực nhiều lời mời gọi mua sắm! Nhiều câu slogan giật gân, nhiều kiểu font chữ, màu sắc sáng chói! Banner dạng chuyển động cầu kì, pop-up quảng cáo hiện lên ‘tinh tinh!’ 1 phát, và còn 1 tỉ kiểu quảng cáo ồn áo khác để thu hút sự chú ý của người dùng.
Sự thật là, không phải cái gì cũng quan trọng được. Kiểu nhiễu loạn này thường là kết quả của sự thất bại trong việc đưa ra các quyết định về phân cấp ưu tiên cho các yếu tố thị giác.