Các nhà thiết kế web nên học typography

Trên L'espresso, một tạp chí lớn bậc nhất của Ý, nhà thiết kế Oliver Reichenstein có lần đã phát biểu: “Thiết kế web là một nghề quá tự do, chỉ có quá tự do thì người ta mới có thể làm ra nhiều trang web tệ kinh khủng đến như thế”. Các website của Việt Nam không nằm ngoại lệ. Nội dung là phần cốt lõi của một website, nhưng các nhà thiết kế web Việt Nam có vẻ hầu như chẳng thèm quan tâm tới trải nghiệm của người dùng khi đọc nội dung trên trang web của mình.

Cỡ chữ

Để đánh giá trải nghiệm người dùng với các thiết kế web, hãy nhìn vào phần mềm NoSquint.

NoSquint là một addon nằm trong top 80 trên gần 10.000 addon được sử dụng nhiều nhất của Firefox, được người sử dụng bầu chọn 5 sao, được chính Mozilla gán mác Nên dùng (Recommend). Tính năng tương tự NoSquint được tích hợp thẳng (build-in) luôn vào trình duyệt Chrome. NoSquint làm chức năng tự động phóng to mọi trang web. Thành công của những phần mềm kiểu NoSquint nói lên một điều, các trang web bây giờ thiết kế rất khó đọc.

Theo nghiên cứu, mắt người sẽ thoải mái nhất khi đọc văn bản cỡ 12-14pt (point). Vì vậy nên cỡ chữ mặc định của các phần mềm soạn thảo văn bản như MS Word, OpenOffice,… đều là 12pt. VnExpress, Dân trí, Vietnamnet,… hầu hết các trang web lớn của Việt Nam cũng đều dùng font cỡ 12pt.

Nhưng các nhà thiết kế web không để ý rằng, phần mềm soạn thảo văn bản dùng để làm ra các văn bản in, và qui tắc “cỡ 12-14pt” để áp dụng cho văn bản giấy. Lúc đó đơn vị pt là một con số tuyệt đối, 72pt=1inch, tức là mắt sẽ thoải mái khi đọc chữ cỡ trong khoảng 0,423 đến 0,494cm. Còn pt trên trang web, khi hiển thị lên màn hình là một con số tương đối, nó sẽ biến đổi khác nhau tùy thuộc vào độ phân giải của màn hình. Độ phân giải màn hình càng cao thì kích cỡ thật của pt càng bé.

Cùng một văn bản, một khổ chữ, nhưng sẽ có cỡ khác nhau khi hiển thị trên các màn hình độ phân giải khác nhau

Mười năm trước, khi màn hình phổ thông là 17inch, độ phân giải 1440×900 thì kích thước “pt màn hình” xấp xỉ “pt thực” nên 12pt vẫn dễ đọc. Nhưng bây giờ, công nghệ đã có nhiều bước tiến lớn, các hãng đua nhau nâng cấp chất lượng màn hình, độ phân giải tăng vọt, hệ quả là chữ hiển thị trên website cũng bị thu nhỏ hẳn lại, nhất là với laptop, đặc biệt trong tình hình máy xách tay nhiều hơn để bàn như hiện nay. Hãy thử nhìn vào một số máy trên thị trường:

Lenovo X300 13.3inch: 12pt màn hình = 0.318cm ~ 9pt thực
Toshiba Satellite 14.4inch: 0.3cm ~ 8.5pt thực
Thinkpad T61p 15.4inch: 0.276cm ~ 7.85pt thực

Rõ ràng với chữ bé như vậy thì đọc rất mệt, rất mỏi mắt. Vậy nếu các nhà thiết kế web không muốn người đọc phải dùng phần mềm bổ trợ khi đọc website của mình thì hãy bắt kịp với công nghệ, sử dụng các phương pháp tự động thay đổi cỡ font theo độ phân giải màn hình như là RWD (Responsive web design) chẳng hạn, hay chí ít cũng tăng kích cỡ font văn bản lên.

Arial và Times New Roman

Trước đây, các nhà thiết kế web của Việt Nam gặp phải một vấn đề khó chịu, đó là font chữ tiếng Việt. Nếu người dùng không có font tiếng Việt cài trong máy, chữ tiếng Việt sẽ bị “vỡ”, không thể đọc được. Nên các nhà thiết kế thường chọn dùng những font có sẵn đi theo hệ điều hành, gọi là system font, như là Arial, Times New Roman, Tahoma, Verdana,… để đảm bảo máy người dùng lúc nào cũng hiển thị được tiếng Việt. Nhất là Arial và Times New Roman, hai font mặc định của Microsoft, được dùng ở khắp mọi nơi. VnExpress: Arial cho trang chủ, Times New Roman cho thân bài; Dân trí: Arial cho trang chủ, Times New Roman cho thân bài; Zing: Times New Roman; 24H: Arial,… Cứ tiếng Việt là Arial và Times New Roman.

Một lần, trên diễn đàn về font chữ, có người lên xin tư vấn thế này:

Tôi vẫn thường dùng Arial với Times New Roman và thấy rất hài lòng, giờ tôi muốn tìm thêm vài font đẹp khác để đôi lúc thay đổi cho đỡ nhàm chán.

Câu trả lời được nhiều người đưa ra nhất là:

Một khi Times New Roman và Arial mà cũng vừa mắt bạn thì đối với bạn, font nào cũng đẹp hết.

Có nghĩa là Arial và Times New Roman… cực xấu.

Nửa sau của thế kỉ 20, có một font đạt được thành công rất lớn đó là Helvetica, thành công đến mức có hẳn qui luật: “Nếu khó chọn, cứ dùng Helvetica”. Arial là một phiên bản copy của Helvetica, có sửa đổi để tránh bản quyền. Nhưng chính thứ “bắt chước có sáng tạo” đó đã làm mất đi những cái cân đối và hài hòa đã làm nên thành công của Helvetica, khiến người ta ví đọc văn bản Arial cảm giác không khác ngồi ăn tối trên một cái bàn cập kênh. Times New Roman được thiết kế cho báo giấy Times (của London) những năm 30 thế kỉ trước. Để tiết kiệm giấy nên Times New Roman khá hẹp, khoảng cách giữa các chữ xít nên dễ gây rối và mỏi mắt với đoạn văn bản dài. Cả hai font này đều không nên dùng.

Bây giờ, công nghệ đã cho phép tải font từ máy chủ, các trang web có thể hiển thị đúng font theo thiết kế mà không phụ thuộc vào font cài trên máy người dùng. Điều này đã giải phóng cho các trang web việc phụ thuộc quá nhiều vào system font. Nếu bạn quan tâm tới tính thẩm mỹ của chữ nghĩa, tới tính dễ đọc của trang web, nếu bạn không muốn trang web của mình lọt thỏm giữa một rừng các trang Arial, Times New Roman nhan nhản trên internet bây giờ thì có rất nhiều font tốt để cho bạn lựa chọn: Myriad như Apple, Lucida Grande như Facebook, Frutiger như ở sân bay Charles de Gaulle, Pháp; rồi Franklin Gothic, Gill Sans,… hay thậm chí nhiều trang web đã thiết kế font chữ riêng cho mình để đảm bảo phong cách và tính độc đáo.

Công nghệ có sẵn, font có nhiều, nếu vẫn sử dụng Arial và Times New Roman thì đó là một sự lựa chọn lười biếng và cẩu thả.

Rất nhiều trang web đã tự thiết kế riêng font chữ để đảm bảo phong cách và tính độc đáo

Khoảng trắng

Ngày xưa, khi vào Google, nhìn nguyên trang web hầu như chỉ có mỗi logo và ô tìm kiếm, còn lại là cả một khoảng trắng mênh mông, tôi nghĩ “sao phí không gian thế”. Nhưng càng ngày, tôi càng thấy đó là một trong những thiết kế xuất sắc nhất trên thế giới. Thiết kế đó khiến cho người dùng không thể phân tán sự chú ý sang bất kì việc gì khác, ngoài việc sử dụng dịch vụ của Google. Google đã áp dụng rất tốt câu: “Khoảng trắng không phải phí, khoảng trắng là để tăng tập trung vào nội dung”.

Nhưng rất tiếc, tư tưởng “phí” vẫn đang thống trị đầu óc các nhà thiết kế web Việt Nam hiện nay. Các website thi nhau nhét tranh ảnh, quảng cáo, bài vở kín mít tất cả các chỗ trống trên trang web, giống hệt đường Hà Nội lúc tan tầm, chật chội, ngột ngạt và chẳng chú tâm được vào cái gì. Khoa học đã chứng minh 98% con người trên thế giới này là “đơn nhiệm”, tức là chỉ làm tốt khi làm một lúc một việc. Nhét càng nhiều nội dung vào một chỗ chỉ càng làm người đọc chẳng tập trung được vào chỗ nào.

Họ sẽ lại nói “cần phải có nhiều quảng cáo để lấy thu nhập cho trang web”. Câu trả lời là website của họ không thể quảng cáo nhiều bằng Google, mà Google vẫn đủ không gian cho khoảng trắng. Như vậy vấn đề nằm ở trình độ và tư tưởng thiết kế chứ không phải ở “quảng cáo”.

Trang tin công nghệ của The Brander

Trang tin công nghệ của VNExpress

Trong khi các trang web lớn trên thế giới như Yahoo, càng ngày càng tăng khoảng trắng trên trang chủ, thì các trang web của Việt Nam mỗi ngày lại nhồi thêm lắm thứ vào trong một nơi. Người ta có câu: Nội dung là trên hết (Content is King). Nếu muốn người đọc tập trung vào nội dung của website thì các nhà thiết kế web nên Tối đa hóa khoảng trắng. Hãy nhớ: Khoảng trắng là để tăng tập trung vào nội dung.

Typography

Nếu không phải là một website multimedia, thì phần chiếm nhiều không gian nhất của trang web chính là văn bản. Để làm ra một trang web tốt, người thiết kế sẽ phải để nhiều tâm trí vào việc trình bày văn bản. Từ việc chọn font đẹp, dễ đọc, phù hợp với phong cách thiết kế tổng thể, nổi bật lên nội dung, cho đến phối hợp chữ với hình ảnh, hài hòa với bố cục, màu sắc, thân thiện với người dùng.

Những điều đó là đối tượng nghiên cứu của một bộ môn có tên là Typography. Typography cung cấp các qui luật về thẩm mỹ, các qui tắc trình bày văn bản thân thiện với người đọc, và rất nhiều vấn đề thú vị khác về khoa học và nghệ thuật về chữ. Với tình trạng thẩm mỹ các trang web như hiện nay, các nhà thiết kế web Việt Nam rất nên đi học Typography.

Read More

Bàn về sự đơn giản

Nếu bạn thử nhìn vào sự phát triển logo qua các thời kì của Nike, Mercedes, hay là Microsoft Windows, bạn sẽ thấy có một điểm chung: sự đơn giản. Các logo càng ngày càng đơn giản. Xu hướng đơn giản hóa hiện không chỉ ở trong thiết kế đồ họa, mà còn ảnh hưởng rất nhiều tới thế giới công nghệ ngày nay.

Xu hướng đơn giản hóa

Trước khi iPhone đình đám của Apple xuất hiện, những chiếc điện thoại trông như thế nào, hình vuông, hình bầu dục, gập, trượt, bút, nhiều nút, bàn phím đầy đủ, đủ loại đường nét góc cạnh,… Sau khi iPhone ra đời với đúng 1 nút bấm, hình dáng gần như phẳng lì, toàn đường nét cơ bản, thì điện thoại bây giờ trông như thế này:

Các hãng điện thoại đua nhau tìm kiếm những thiết kế đơn giản nhất có thể, nhiều đường thẳng, mặt phẳng, ít nút.

Máy tính cũng thế

Dell ngày trước và bây giờ

Hay trên internet

Yahoo 2004 và 2013

Phần mềm

Firefox cũ và mới

Tất cả đều ngày một đơn giản hơn.

Ưu điểm của đơn giản

Đơn giản thì dễ dùng. Sản phẩm càng đơn giản càng dễ dùng. Chỉ trừ một số người chuyên sâu hay mày mò khám phá, còn lại đại đa số người sử dụng bình thường thích một sản phẩm động đến là biết cách dùng. Người ta kể rằng Steve Jobs đã yêu cầu đội ngũ kỹ sư thiết kế iPod làm thế nào để người nghe có thể chọn được bài hát ưa thích trong vòng 3 thao tác. Hoặc như Google, ngoài chất lượng tìm kiếm, một phần cũng quan trọng cho sự thành công của họ là thiết kế đơn giản, đơn giản đến mức hầu như bất kì ai cũng có thể sử dụng được mà không phải học hỏi gì nhiều. Kết quả là 70% số người dùng máy MP3 nghe nhạc bằng iPod và trên 80% lượng tìm kiếm internet dùng Google.

Không chỉ dễ dùng, việc đơn giản hóa sản phẩm giúp cho các nhà phát triển được tập trung vào chất lượng. Những người theo chủ nghĩa đơn giản có câu “Ít hơn tức là nhiều hơn” (Less is More). Cùng một công sức bỏ ra, phần mềm đơn giản hơn, ít chức năng hơn đồng nghĩa với chất lượng mỗi chức năng sẽ nhiều hơn. Hãy nghe lời Steve Jobs khuyên Larry Page, CEO của Google: “Xác định 5 sản phẩm chính của anh là gì, rồi quăng hết những thứ còn lại đi. Những thứ đó chỉ có kìm hãm anh lại thôi”. Chúng ta không thực sự biết có phải Larry Page nghe lời Jobs hay không, nhưng danh sách những sản phẩm, dịch vụ mà Google khai tử dưới thời Larry Page cũng khá dài: Bookmarks Lists, Friend Connect, Google Gears, Google Search Timeline, Google Wave, Knol, CalDAV API, Google Building Maker, Google Cloud Connect,… Thay vào đó, Google Search, sản phẩm chủ lực của Google, mỗi ngày lại một thêm cải tiến, tiện lợi hơn cho người dùng và doanh thu của Google tăng đều trong mấy năm qua.

Dấu ấn của đơn giản in đậm nét trong tất cả các sản phẩm đặc sắc ở nhiều lĩnh vực khác nhau trong cuộc sống, không chỉ riêng công nghệ. Những chiếc siêu xe không bao giờ nhiều màu, thậm chí đa số chỉ một màu rất cơ bản là đen hoặc trắng. Những bộ trang phục sang trọng không bao giờ tua rua. Những văn bản chuyên nghiệp không có quá 2 font chữ.

Vậy tại sao người ta không làm mọi thứ đều đơn giản? Bởi vì làm đơn giản rất khó.

Sự phức tạp của đơn giản

Jonathan Ive, thiết kế trưởng Apple, tác giả những chiếc máy Mac đơn giản mà sành điệu, nói: Để làm ra một thứ đơn giản, người ta phải làm rất nhiều điều phức tạp phía sau.

Chúng ta thử nhìn vào logo của Apple, một quả táo cắn dở trông rất vừa mắt được tạo nên bởi vài đường tròn đơn giản, thế nhưng ẩn sau vài cái đường tròn đơn giản đấy là cả một công trình phức tạp, tính toán kĩ càng áp dụng tỉ lệ vàng, tỉ lệ hài hòa nhất trong tự nhiên, như thế này:

Vậy đơn giản ở đây phải hiểu là đơn giản phía người dùng, không phải đơn giản cho người làm sản phẩm. Thực tế, càng đơn giản cho người dùng bao nhiêu, càng phức tạp cho người phát triển bấy nhiêu.

Hồi tôi còn học trong trường đại học, làm bài tập lập trình, để chương trình chạy ra được kết quả thì nhanh, nhưng lập trình để cho thầy giáo kiểm tra bài một cách thuận tiện nhất, ít thao tác nhất, trình bày ra màn hình một cách đẹp đẽ nhất có thể thì tốn rất nhiều thời gian và công sức. Tỉ lệ công sức đôi khi đến mức 20-80, với chỉ 20% dành cho việc chương trình chạy ra kết quả.

Việc đơn giản hóa sản phẩm là một việc rất khó mà nhiều khi những hãng khổng lồ cũng không làm nổi. Hãy thử xem một người dùng bình thường muốn xem thông số DNS trong Windows 7 bằng giao diện đồ họa mất bao lâu: 10 cái click chuột. Trong khi Mac OS chỉ mất 4, chưa đến một nửa. Đó là lí do tại sao người ta có câu “một khi đã dùng Mac sẽ không bao giờ muốn quay lại Windows”.

Làm thế nào để đơn giản

Điều đầu tiên hãy mạnh dạn gạt bỏ bớt chức năng định làm trong sản phẩm. Chỉ để lại một số ít những chức năng tối cần thiết cho người dùng. Thống kê cho thấy trong một hệ thống thông thường có đến 45% số lượng chức năng không bao giờ dùng đến, 35% ít khi dùng, chỉ có 20% là thường sử dụng. Vậy đừng lo việc lược bớt chức năng sẽ làm phần mềm của bạn không đáp ứng được yêu cầu người sử dụng. Thực tế, nhiều chức năng chỉ làm đội chi phí và thêm bối rối cho phía khách hàng mà thôi.

Hình dưới đây vẫn thường được đem ra để chỉ trích việc Microsoft ôm đồm quá nhiều chức năng vào trong Office khiến người sử dụng phải trả thêm tiền cho những chức năng mà họ hầu như không bao giờ động đến.

Hãy điều tra thị trường thật kỹ. Sắp xếp thứ tự ưu tiên các chức năng. Dũng cảm loại bỏ những chức năng không bao giờ hoặc thậm chí ít khi dùng. Ngày trước, khi Apple bỏ ổ đĩa mềm ra khỏi máy Mac, họ cũng bị phê phán rất nhiều. Nhưng chỉ ít lâu sau, ổ mềm đã biến mất sạch khỏi các PC mới xuất xưởng của những hãng sản xuất máy tính lớn còn lại. Thời gian sẽ cho câu trả lời.

Tối giản giao diện. Bỏ tất cả những chi tiết rườm rà. Giấu đi những thanh công cụ, những phím bấm ít khi dùng. Tối đa hóa không gian làm việc cho người sử dụng. Làm như Google khi thiết kế Chrome: “Chúng tôi muốn dành cho người dùng không gian lướt web rộng nhất có thể”. Chrome đã bỏ hết các menu truyền thống, gộp thanh tìm kiếm và địa chỉ vào thành một, tận dụng viền cửa sổ (window border) để đặt các tab, status bar chỉ hiện lên khi cần. Hãy nhìn sự thay đổi giao diện của Firefox, đối thủ sừng sỏ trong trận chiến trình duyệt, ở trang trước để thấy sự thành công của giao diện tối giản như thế nào.

Thay đổi tư duy. Chú trọng vào chất hơn lượng của sản phẩm. Một trong những tư duy tiêu biểu theo hướng này là đường lối của những nhà phát triển hệ điều hành Unix: Làm đúng 1 việc, và làm thật tốt việc đó (Do one thing and do it well). Họ không khuyến khích người lập trình làm ra những phần mềm nhiều chức năng, nhiều hiệu ứng. Họ yêu cầu mỗi phần mềm chỉ cần làm đúng một việc và giải quyết rốt ráo tất cả vấn đề xung quanh nó. Copy chỉ làm đúng việc copy, không thêm “cut” hay chức năng khác. Kết quả là các hệ điều hành họ nix có một hệ thống phần mềm cơ bản hoạt động rất ổn định và vô cùng mạnh mẽ.

Để kết thúc, xin lại trích lời “quái kiệt đơn giản” Jonathan Ive: “Làm ra những sản phẩm đơn giản, đơn giản đến mức người sử dụng không hề nhận thấy sản phẩm đã giải quyết được những công việc phức tạp đến thế nào”.

Read More