10 điểm lưu ý khi thiết kế giao diện cho người dùng

Bài viết này được dịch từ bài gốc tiếng Anh sau khi được sự đồng ý của tác giả. (10 cheat codes for designing User Interfaces)

Tôi thấy dường như đa số chúng ta bắt tay vào thiết kế giao diện cho người dùng mà hiểu rất ít về nó hoặc hầu như chẳng biết gì. Tuy nhiên mặc dù gặp khó khăn trắc trở lúc đầu thì cuối cùng chúng ta cũng xoay xở tìm ra cách của mình qua hàng đống sách báo về design để hiểu được thế nào là màu sắc, là bố cục, là nghệ thuật sắp chữ…v.v…

Vì vậy trong bài viết này tôi chia sẻ cùng các bạn những điều tôi đã học được từ các designer khác, những điều tôi học được qua việc thiết kế giao diện người dùng và cả những phát hiện mới của tôi trên con đường này:

*Lưu ý: Những ví dụ “Không nên” tôi đưa ra dưới đây không có nghĩa là nó sai. Nó chỉ là những minh họa cơ bản cho thấy làm thế nào để cải thiện 1 design tốt thành 1 thứ tốt hơn.

1. Câu này quan trọng, cho nó lớn hơn đi!

Khi đối mặt với nội dung cần sắp xếp thứ tự cấp độ font, thì việc làm câu lớn hơn để nhấn mạnh và tạo tầm quan trọng thông thường không giải quyết được vấn đề, giống như ví dụ dưới đây:

Cấp độ font không chỉ đơn thuần là vấn đề về độ to nhỏ của font. Nó là vấn đề về sự kết hợp đúng đắn giữa độ lớn nhỏ, đậm nhạt và màu sắc để tạo nên sự tương phản. Càng tương phản càng tốt.

Tôi đã cải thiện sự tương phản như thế nào?

· Không dùng chỉ 1 độ đậm nhạt với nhiều font khác nhau để tạo sự tương phản và cấp độ.

· Thay vào đó dùng kiểu đậm hơn và tối hơn cho nội dung cấp trên hoặc là nhạt hơn và nhỏ hơn cho nội dung cấp dưới (ít quan trọng hơn).

· Tạo ra 3 kiểu màu text biến đổi từ đậm đến nhạt (xem ví dụ bên dưới). Thông thường tôi lấy màu cơ bản của tôi làm màu phần body text.

· Đừng e ngại khi độ lớn font quá cách biệt (ví dụ: tiêu đề 24px, nội dung chính 16px, chữ meta 10px …v.v…). Cách biệt lớn hơn = Tương phản tốt hơn.

· Tham khảo Modularscale là công cụ tính toán online bạn có thể sử dụng để tạo cấp độ font tốt hơn.

· Nhớ rằng, tương phản = size + độ đậm nhạt + màu.

· Cuối cùng, đừng quên kiểm tra contrast ratio. Bạn có thể sử dụng công cụ này calculator để kiểm tra.

Từ màu nền của tôi, tôi chuyển từ màu đậm hơn cho phần headlines tới màu nhạt hơn cho phần thông tin cấp thấp hơn.

2. Đừng tạo nhiều màu đen

Đừng làm đời bạn rắc rối hơn bằng việc chuyển cây color picker lên xuống để tạo nhiều kiểu text màu đen trên nền trắng.

Chúng ta đều biết rằng dùng text màu đen (#000) sẽ làm người đọc mỏi mắt, và giải pháp của chúng ta là tạo ra nhiều kiểu màu đen khác nhau để dùng luân phiên. Nhưng thay vì chọn 3 giá trị hex color khác nhau, chúng ta có thể giải quyết bằng cách dùng màu đen với các giá trị độ trong suốt khác nhau.

Ở ví dụ trên, tôi dùng màu sắc ban đầu là màu đen （#000000）, rồi tùy vào nơi sử dụng (ví dụ: nội dung chính, nội dung phụ ..v.v…) mà tôi giảm độ trong suốt xuống.

3. Làm tính đi rồi sẽ hiểu được màu sắc

Hầu hết chúng ta mệt mỏi với việc chọn ra một tổ hợp màu sắc phù hợp và khi nhìn một thiết kế với bảng màu được trình bày đẹp mắt (giống như mấy cái dưới đây) chúng ta tự hỏi “Sao người ta làm được hay vậy?”

Cho đến khi tôi biết được việc hiểu được màu sắc không phải chỉ dành sẵn cho những người giỏi về design mà chỉ cần làm tính cộng trừ nơi chỗ Hue, Saturation, Brightness (HSB) cũng sẽ tạo ra phép màu (chúng ta dùng HSB thay cho RGB). Bạn có thể tống khứ cái màu trắng chán ngắt và biến nó thành 1 bức họa của Picasso như dưới đây.

Vậy phép cộng và trừ nơi HSB dùng như thế nào?

Thật ra có 2 cách chúng ta có thể làm, như chúng ta có thể thấy thì cả 2 option dưới đây đều có cùng cái màu cơ bản #B9F4BC (background hình tròn) nhưng khác nhau chỗ màu Folder với màu đường kẻ ngang. Trước khi bắt đầu, luôn nhớ cái con số đầu tiên tương ứng với Hue, tiếp theo là Saturation và cuối cùng là Brightness.

Option A

Ở Option A chúng ta có thể thấy là chúng ta giữ nguyên giá trị Hue là 123 ở tất cả các hình dạng (hình tròn, folder, đường kẻ ngangp) trong khi chỉ thay đổi Saturation với Brightness.

Giờ chúng ta tập trung vô Saturation của base đang là 24 và Brightness đang là 96, cả 2 giá trị đều thay đổi khi chúng ta tạo màu xanh lá đậm hơn cho Folder. Saturation từ 24 trở thành 40 (tăng +16) và Brightness từ 96 trở thành 82 (giảm -14), từ đây chúng ta có thể thấy 1 sự thay đổi nơi saturation dù là tăng hay giảm thì cần 1 sự điều chỉnh ngược lại tương ứng về brightness để tạo ra được contrast tốt (và ngược lại). Điều tương tự cũng xảy ra với đường kẻ sọc, dùng Saturation và Brightness của Folder làm giá trị nền, chúng ta chuyển từ 40 sang 44 (tăng +04) cho Saturation, và giảm 82 thành 75 (giảm -07) cho Brightness. Từ đây chúng ta có công thức:

Giá trị đậm/tối hơn = Tăng nơi Saturation là giảm nơi Brightness

Giá trị nhạt/sáng hơn = Giảm nơi Saturation là tăng nơi Brightness

Công thức này luôn có ích mỗi khi tôi băn khoăn không biết chọn màu gì cho hợp với design của mình. Tôi đã nhận ra rằng tốt nhất là bắt đầu với 1 cái màu nền và từ đó điều chỉnh Saturation và Brightness trong khi vẫn giữ nguyên giá trị của Hue.

Option B

Trong Option B, cái quy tắc trên vẫn được áp dụng nhưng lần này giá trị của Hue thay đổi. Và giờ chúng ta đã hiểu ra mấy cái thuật ngữ RGB và CMY mà chúng ta thường bắt gặp trong nhiều loại chất liệu.

RGB là viết tắt của Red, Green, và Blue, trong khi CMY là Cyan, Magenta, và Yellow. Mấy thuật ngữ này không khiến tôi để ý mấy khi mới bắt đầu cho tôi khi tôi tình cờ phát hiện cách dùng RGB và CMY để kết hợp màu sắc.

Rồi giờ nơi Option B nếu chúng ta muốn tạo ra 1 base color đậm hơn thì điều chúng ta cần làm là chuyển color picker về hướng RGB gần nhất trên bảng màu của chúng ta, hoặc là di chuyển về hướng của CMY để tìm 1 màu khác nhạt hơn.

Ví dụ:

Vì chúng ta muốn tạo 1 cái đậm hơn từ base color #B9F4BC (background hình tròn) để dùng cho cái Folder icon, nên chúng ta cần di chuyển color picker về hướng RGB gần nhất (trong trường hợp này là Blue). Nhưng nếu chúng ta muốn có 1 cái Folder nhạt hơn thì chúng ta sẽ di chuyển color picker về bên trái gần CMY (trong trường hợp này là Yellow).

*Thông thường RGB đưa tới 1 lựa chọn đậm hơn và CMY đưa tới 1 lựa chọn nhạt hơn.

Sau khi di chuyển color picker tới option mong muốn, chúng ta áp dụng công thức vào Option A, và dẫn tới có cái kết hợp màu như này:

Red, Green, Blue (RGB) + công thức Option A = Option đậm hơn

Cyan, Magenta, Yellow (CMY) + công thức Option A = Option nhạt hơn

4. Dùng khoảng trống để tách các nhóm

Bên cạnh việc thêm line giữa 2 group để cho thấy sự tách biệt, chúng ta có một cách dễ dàng và tốt hơn đó là dùng một khoảng trống tương đối rộng.

Giống như Luật Lân Cận có nói:

Những vật ở gần nhau hay xấp xỉ nhau có xu hướng nhóm lại với nhau.

Như ví dụ trên, mục đích của tôi là tạo sự tách biệt giữa title với tên tác giả bằng cách dùng 1 khoảng trống lớn 24px giữa chúng.

5. Dùng màu sắc để tách biệt các dòng

Lúc design, làm cái giao diện kiểu dòng có thể thấy rất chán vì nó chỉ yêu cầu nhân cái dòng đó lên n lần. Nhưng bên phía user có khi việc đọc thông tin nơi các dòng đó khó khăn vì không có sự khác biệt gì lớn giữa các dòng. Cho nên bên cạnh việc dùng các đường line, thêm màu background vào các dòng sẽ giúp ích rất nhiều cho user trong việc đọc thông tin và đương nhiên cũng khiến cho designer chúng ta thích thú hơn.

6. Dùng Multiply thay cho việc tạo shadow cho text

Khá là vất vả khi chúng ta design các thành phần của header hay là thêm text vô hình ảnh, đặc biệt trong trường hợp hình background nhiều màu (hay là hình có thể thay đổi).

Giải pháp thông thường cho text trên nền hình ảnh nhiều màu là cho shadow vào, tuy nhiên nó cũng không giúp user đọc rõ hơn bao nhiêu. Nó chỉ thêm rối mắt vì chiếm khoảng trống giữa các chữ.

Trong một số trường hợp, black/white color overlay là giải pháp hữu ích cho những kiểu design như thế này. Nhưng gần đây tôi phát hiện ra việc dùng Multiply như là bend tool để tạo gradient.

Làm cái này dễ hơn nhiều so với việc tạo background màu đen trên hình và giảm opacity của nó. Thêm nữa, hình được gray scale khiến cho những phần khác của nó giữ nguyên màu gốc và phần có text sẽ tối hơn dễ đọc hơn.

7. Độ dài của dòng

Điểm chung mà hầu hết các designer mắc phải là tăng độ dài của dòng để nó vừa với container nhưng làm vậy chỉ khiến mắt user thêm mỏi. Tốt nhất là chỉ để 45~65 chữ trong 1 line.

Bạn đã từng rơi vào tình huống phân vân khó xử khi muốn làm độ dài của dòng ngắn lại trong khoảng lý tưởng nhưng kéo theo đó là một khoảng trống lớn được tạo ra ở bên phải như dưới đây?

Đừng ngần ngại nữa, cho toàn bộ cột text vô giữa là có thể bỏ bớt khoảng trắng rồi.

8. Đừng mất công làm lại cái tương tự

Điều làm cho design của không thống nhất là vì nó không được dựa trên các thành phần. Đó là khi bạn nhận ra mình đã làm 5 kiểu card, 10 kiểu button và 5 kiểu heading…v.v…

Trước khi bắt đầu tạo 1 cái giao diện cho 1 thành phần đặc biệt nào đó, hãy thử nhìn lại mấy cái design bạn đã tạo trước đó vì biết đâu có cái pattern bạn có thể sử dụng lại.

Thay vì mất công làm 1 cái card Art Group mới (xem ví dụ), chúng ta có thể dùng cái Article card và thay nội dung của Art Group vào. Điều này có thể tiết kiệm thời gian cho designer và làm giao diện nhất quán.

9. Dùng màu thương hiệu như là điểm nhấn

Chúng ta thường nghĩ là màu đặc trưng phải chiếm 1 phần lớn trong lượng màu sắc nơi giao diện. Chúng ta vất vả trong việc nhét mấy cái màu sắc sặc sỡ vàng neon, cam, hồng đặc trưng của khách hàng vô cái layout sạch sẽ gọn gàng của chúng ta. Giải pháp là gì? Hãy dùng chúng như là màu để nhấn.

10. Đem bullet ra ngoài

Cuối cùng, nếu bạn tạo 1 cái list như cái trên thì hãy để bullet, con số, hay biểu tượng nằm nơi margin để làm nổi bật cái list lên. Việc này sẽ giúp user đọc dễ dàng liền lạc hơn.