Các lỗi thường gặp khi thiết kế UI

Hiện nay, thiết kế UI đã có sự đổi khác so với thiết kế đồ họa truyền thống. Tuy vậy, thiết kế UI vẫn là một phần không thể tách khỏi lĩnh vực gốc là thiết kế hình ảnh.

Với mỗi bước tiến của mình, thiết kế hình ảnh đã hình thành nên nhiều ngôn ngữ, bố cục và quy trình thiết kế mới. Qua nhiều thế hệ, designer đã chuyển đổi từ giấy in sang màn hình hiển thị, với mỗi thế hệ này thiết kế đồ họa đã hoàn thành sứ mệnh biểu diễn ngôn ngữ hình ảnh của mình.

Bởi vậy, để thiết kế UI thoát kén, ta cần phát triển một thế giới đồ họa như thế nào? Thật không may, với biểu hiện hiện nay, tương lai có nguy cơ ảm đạm. Đa số UI Design ngày nay hầu như đã bị chuẩn hóa và lặp đi lặp lại. Đa số cuộc thảo luận trực tuyến chỉ lo làm sao để thiết kế hoạt động bình thường, chứ ít quan tâm đến hình ảnh đồ họa mới mẻ. Với cách làm việc cứng nhắc, chỉ đi theo xu hướng như hiện nay; UI Designers đã tự tạo nên một môi trường hình ảnh đơn điệu, đồng thời làm giảm tầm quan trọng của một designer. Vấn đề không nằm ở chuyên môn, mà nằm ở việc thể hiện đồ họa đơn điệu.

Bởi vậy, năm lỗi thiết kế UI thường thấy là:

• Chăm chăm đi theo các quy luật thiết kế
• Lạm dụng Grid
• Dùng sai Typeface
• Thiết kế UI theo chuẩn
• Chăm chăm tuân theo quy luật Contrast 

Lỗi thường thấy #1: UI Designers chỉ làm theo quy luật

Giới thiết kế đồ họa từ trước đến nay vẫn tuân theo các quy luật và quy chuẩn. Trong bất cứ trường phái thiết kế nào, người ta thường lầm tưởng lỗi thiết kế là do ta phá những quy luật này. Vì vậy, việc tuân theo các quy luật dường như đã trở thành chuẩn mực bất biến.

Tuy nhiên, cũng với mọi trường phái thiết kế, những bước tiến và sáng kiến thiết kế mới bắt nguồn từ việc phá những quy tắc an toàn này. Mặt khác, việc thiết kế cũng phải tuân theo điền kiện và yêu cầu sự cẩn trọng từ designer chứ không phải là một quy trình có kết quả rõ ràng. Vì vậy, luật thiết kế chỉ nên là một hướng dẫn chứ không phải là một bộ “luật” cứng nhắc. Những designer giàu kinh nghiệm chỉ biết và tuân theo quy luật không quá nhiều, không quá ít.

Thật không may, trên mạng nọi người nói về thiết kế theo hai kiểu “phải làm” và “không được làm”.”Lỗi thường thấy và cách thực hiện thiết kế trong 10 bước đơn giản!”. Việc thiết kế không dễ dàng như vậy, đây không phải là một cái checklist để ta tuần tự tuân theo, mà cần ta phải hiểu rõ các nguyên tắc và xu hướng cần thiết.

Vấn đề là, nếu designers không chịu “phá luật”, ta sẽ không thể có những sáng chế mới. Nếu UI designers chỉ chăm chăm theo luật mà không tự quyết đinh, họ sẽ sớm bị đào thải. Một câu hỏi nữa được đặt ra, thiết kế như thế nào là một thiết kế mới lạ?

Hãy Để Ý Đến Mười Quy Luật Thiết Kế Hàng Đầu

Quy luật thiết kế trong cộng đồng thiết kế UI hiện nay tỏ ra khá thừa thãi.  Nếu muốn giải quyết vấn đề nào đó, designer không chịu tự giải quyết mà tìm ngay đến các bộ giải pháp có sẵn của cộng đồng. Tuy nhiên, theo khối lượng quy luật và hướng dẫn càng tăng, các quy luật lại càng thiếu tin cậy hơn

Từ khóa “Top UI Design Mistakes” cho ra hơn nửa triệu kết quả trên Google. Với nhiều kết quả như vậy, liệu những tác giả này có đồng ý với ý kiến của nhau? Và liệu các lời khuyên mà họ đưa ra có áp dụng được vào trường hợp của người đọc?

Thông thường, những bài viết như vậy chỉ tập trung chính xác vấn đề mà không đi sâu vào nguyên lý đằng sau chúng. Và kết quả, designers mới vào nghề chỉ biết sao chép cái đã có mà không hiểu được cách thức thiết kế chân chính. Không ai nhận thấy rằng những bài báo này không hề đề cập đến việc “thử nghiệm” hay sao?

Designer chỉ nên cần một bộ chỉ dẫn chứ không phải là một bộ “luật” đi theo các thiết kế định sẵn. “Bấm x để xoay parallax và y cho carousels. Trước khi lựa chọn, tham khảo các bài viết về công cụ định hướng trending”. Chán òm!

Một Số Lời Khuyên Và Mười Xu Hướng Hàng Đầu Hiện Nay

Đối với designers, xu hướng chỉ như thức ăn nhanh thôi. Các xu hướng này cho ra các thiết kế rẻ tiền tuy có thể thu lại một khoảng lợi nhanh chóng, nhưng lại bất lợi về lâu dài. Nói cách khác, với những designers chuyên theo xu hướng, thiết kế của họ không những nhanh lỗi thời, mất hiệu quả, mà họ cũng sẽ không cảm thấy thỏa mãn với kết quả đạt được. Tìm sáng kiến mới dù khá cực nhọc, nhưng kết quả sẽ rất xứng đáng với công sức bỏ ra. Bạn có thấy hứng thú và đam mê khi chỉ đi sao chép người khác?

Lỗi Thường Thấy #2: Phụ Thuộc Vào Grid Làm Giới Hạn Thiết Kế UI

Dù tôi không mê luật, nhưng luật này các bạn phải tuân theo: Không có Grid thì không thể thiết kế UI được. Giao diện web và điện thoại chỉ có thể dựa trên tổ hợp nhiều điểm ảnh thôi. Tuy vậy, đều này không đồng nghĩa với việc giao diện phải đi theo hình thức hay quy trình dựa theo Grid.

Grid Là Khuynh Hướng Mới

Nhìn chung, thiết kế theo khuynh hướng sẽ dễ làm ra một thiết kế nghèo nàn. Tuy thiết kế có thể sẽ thỏa mãn được các tính năng cần có, nhưng bạn sẽ chán ngán và không hề thấy thích thú gì. Khuynh hướng chỉ là những cái tầm thường. Vì vậy, khi áp dụng Grid vào thiết kế, công cụ Grid này thể hiện những gì và giúp ta những gì. Grid là một công cụ trung hòa, cân bằng vị trí của các phần tử trong phạm vi của nó. Grid cũng cho ra một trải nghiệm điều hướng trung hòa. Người dùng có thể nhảy giữa các mục mà không vấp phải sự cản trở của curatorial hand. Trong khi, với các cấu trúc điều hướng khác, designer có thể nhóm nội dung, hay tùy ý thiết lập các chuỗi hình ảnh mong muốn.

Hãy Mặc Định Grid Là Công Cụ Work FLow

Dylan Fracareta, đào tạo viên tại RISD và gián đốc tạp chí PIN-UP, chỉ ra rằng “đa số mội người bắt đầu với grid 12 cột… sau đó bỏ bớt 3 hoặc 4 cột nếu muốn”. Điều nguy hiểm ở đây là designer đã quyết định sẵn tất cả nội dung họ sẽ đưa vào. Thay vào đó, Fracareta chỉ dùng công cụ move lên một số lượng xác định, chứ không hề đặt nội dung vào dòng grid, việc này sẽ mở ra nhiều kết quả bất ngờ hơn. Trước đây, để thiết kế trình duyệt ta từng thêm vài dòng code, ngồi chờ kêt quả.Giờ đây, thiết kế web đã quay lại cách thức truyền thống hơn: layour designer “điểu chỉnh hai mảnh giấy trong suốt”. Designers được lợi gì từ được lợi gì từ sự thay đổi này? Không làm việc với Grid dù grids có thể tạo giới hạn, chúng là công cụ tổ chức truyền thống nhất. Grid chính là trực giác. Grid cũng trung hòa và đơn giản. Vậy nên grids làm nổi bật nội dung  và cho phép người dùng điều hướng tùy ý.

Lỗi Thường Thấy #3: Chuẩn Hóa Thiết Kế UI Bằng Patterns

Khái niệm chuẩn hóa phần tử trong thiết kế đã có trước cả việc thiết kế UI. Nhìn vào các công trình, ta có thể thấy các chi tiết kiến trúc đã được lặp lại tuần tự hàng thế kỷ nay. Nhìn chung, những chi tiết lặp lại này chỉ thường được thấy với những chi tiết cụ thể trong công trình và người dùng ít khi nhận thức được sự lặp lại này. Tuy nhiên, kể từ khi kiến trúc sư bắt đầu chuẩn hóa các chi tiết thường thấy (như chiều nội thất, chiều cao lan can,…), người ta bắt đầu mất sự thích thú trước môi trường vật lý đơn điệu mà sự. Hơn nữa, chiều không giản chuẩn hóa không tỏ ra hữu hiệu lắm, các chuẩn này không thực sự áp dụng cho đa số mọi người tuy được xem là số liệu trung bình. Đến cùng, tuy chi tiết lặp có thể dùng được, nhưng bạn phải thật cẩn thận với chúng.

Designers Dùng Pattern Làm Sản Phẩm

Nhiều UI designers xem pattern như giải pháp hàng loạt cho các vấn đề về thiết kế chứ không phải một công cụ rút ngắn thời gian. Mục đích của patterns chỉ là chuẩn hóa các nhiệm vụ lặp đi lặp lại, giúp công việc của designer đơn giản hơn. Nhưng trái lại, một số patterns như F PAttern LAyouts, Carousels hay Pagination lại nghiễm nhiên trở thành toàn bộ cấu trúc của đa số giao diện.

Biện Hộ Cho Pattern

Designers tự huyễn rằng ta có pattern hình F là do cách mọi người đọc trên web. Espen Brunborg chỉ ra rằng có lẽ là do ta thiết kế theo hướng này trước rồi mọi người mới đọc theo. Ông Brunborg trình bày: “Nếu web designers chỉ biết làm theo công thức thì đẻ ra cái nghề này để làm gì?”

Lỗi Thường Thấy #4: Hiểu Sai Về Typefaces

Nhiều lời khuyên của designer cũng đề cập đến các quy luật cứng nhắc về Font. Và luật nào cũng được họ đẩy lên trên trời, “Chỉ được dùng một họ font thôi! Monospaced chả ai dùng nữa đâu! Tuyệt đối không dùng font chữ mỏng!”. Nhưng trong thực tế, chỉ có một quy luật duy nhất về type: text và font nên dùng một cách tinh tế và thể hiện được ý nghĩa muốn truyền tải. Miễn là ta dùng đúng type, hầu như dùng typefaces nào cũng phù hợp. Vì vậy, biết rõ lịch sử, cách dùng và mục đích của mỗi font trước khi đưa vào UI là nghĩa vụ cần có ở mỗi designer.

Dùng Typeface Chỉ Để Dễ Đọc

Typeface vừa truyền tải ý nghĩa vừa giúp dễ đọc. Trước những cuộc thảo luận xoay quanh độ rõ ràng trên nhiều thiết bị,.. designers đang quên đi rằng mục tiêu của type là để tăng độ nhận biết và dễ đọc của text. Làm sao cho dễ đọc rất quan trọng, tôi không phải đối ý kiến này –  nhưng ý tôi muốn nói là độ dễ đọc mới chính là mục tiêu cao nhất. Nếu không phải thế, ta sẽ không chỉ dừng ở Helvetica, hay là Highway Gothic. Tuy nhiên, font không chỉ được thiết kế cho nhiều ngữ cảnh và độ dễ đọc khác nhau. Ta còn có typefaces, cũng quan trọng không kém trong việc truyền tải ý nghĩa và “thổi hồn” vào text.

Tuyệt Đối Không Dùng Font Chữ Mỏng

Theo xu hướng đang nổi (và chuẩn bị chìm?), một chỉ trích thiết kế thường thấy là: hoàn toàn tránh dùng font mỏng. Giống như cách ngày nào fonts mỏng nổi lên, rồi lại chìm ngay. Mẫu chốt ở đây, là ta phải hiểu rõ nguyên tắc của typefaces chứ không phải mải mê đi theo các xu hướng.

Một số người cho rằng font mỏng hoàn toàn không thể đọc được, còn nếu có thì chỉ trên một số thiết bị nhất định. Tôi khá đồng tình. Tuy vậy, nếu designer chỉ quan tân đến độ dễ đọc mà bỏ qua ý nghĩa và giá trị của typeface, vậy thì tại sao ta không loại bỏ hết font chữ mỏng?

Bạn tìm hiểu lý do và bối cảnh khi nào cần dùng font mỏng. Font dày tất nhiên sẽ phù hợp hơn cho tiêu đề và văn bản ngắn. Nhưng với văn bản dài, font mỏng lại phù hợp cho các đoạn văn bản dài hơn. Bởi font mỏng thường theo kiểu serif với các ký tự nghiêng dễ đọc với tốc độ nhanh.

Font mỏng còn được lựa chọn bởi khả năng thể hiện sự thanh lịch. Vì thế, nếu designer dang làm việc cho khách hàng đòi hỏi sự thanh lịch, các loại typeface nặng nề sẽ khó lòng truyền tải được.

Thiếu Biến Đổi

Thiếu biến đổi font trong khung giao diện là một lỗi thường thấy. Trong một khung giao diện, đổi font là một cách thiết lập cấp bậc hình ảnh và phân biệt chức năng rất hay. Thông thường, mục đề lớn nhất, hay font chữ dày nhất sẽ là phần quan trọng nhất và có sức nặng thị giác nhất. Qua nhấn mạnh về hình ảnh, ta có thể truyền tải tiêu đề của nội dung, và có lẽ là cả các chức năng nhay được dùng nữa.

Biến Đổi Quá Nhiều

Một lỗi thường gặp nữa: Đưa vào quá nhiều typeface khác nhau, từ các họ khác nhau, mỗi họ/typeface lại mạng một chức năng khác nhau. Và khi ta lựa chọn quá nhiều font đều đặc biệt như nhau, thì sẽ chả có font nào nổi bật lên cả. Mục đích khi ta thay font đến cuối cùng vẫn là để thiết lập cấp bậc thị giác và phân biệt chức năng trong giao diện. Vì vậy nếu các font đều khác nhau, người dùng sẽ dễ bị rối.

Lỗi Thường Thấy #5: Đánh Giá Sự Tương Phản Quá Cao/Thấp

“Tránh các giao diện tương phản thấp” là một sai lầm “hàng top” trong thiết kế IU. Tuy vẫn có nhiều trường hợp đúng thật là thiết kế tương phản thấp tỏ ra thiếu hiệu quả và khó đọc. Nhưng đây là một quan niệm nguy hiểm có thể tạo “văn hóa” thiết kế tương phản cao trong cộng đồng designer.

Tương Phản Cao Mọi Lúc Mọi Nơi

Với tương phản cao, làm thiết kế đẹp rất dễ. Hình ảnh tương phản cao cũng hiển nhiên đầy kích thích. Nhưng, ta đã quên rằng, ngoài cảm xúc kích thích, con người còn nhều trạng thái cảm xúc khác mà ta có thể khai thác được. “Hình ảnh kích thích” cũng không khác gì “hình ảnh an toàn”.

Ta có thể thấy vấn đề tương tự trong các bộ phim Khoa học viễn tưởng. Cả một nền công nghiệp phim này dùng hiệu ứng đen và xanh neon nhằm “lừa” người xem chấp nhận hình ảnh “kích thích” thay vì các hình ảnh mới lạ. Bài báo cũng cho rằng, với quá nhiều hình ảnh an toàn, ngành công nghiệp này đang bỏ lỡ cơ hội lớn.

Xét về mặt chức năng, nếu mọi thành phần trong giao điện đều tương phản với nhau, thì sẽ chả có thành phần nào nổi bật cả. Sự lạm dụng này sẽ làm mất đi giá trị tiềm tàng của công cụ phân cấp tương phản. Vì vậy, thay vì theo “luật” từ các xu hường cứng nhắc, hãy xem xét nhiều cách thức thiết kế khác nhau để tìm ra công cụ tối ưu nhất.

Tương Phản Thấp Sẽ Khó Đọc

Dùng font và background ít tương phản cũng là một lỗi thường thấy. Tuy nhiên, đây thường là lỗi kiểm tra beta chứ ít khi thuộc lỗi thiết kế.

Vấn đề ở đây là, mục quan trọng nhất sẽ tương phản kém hơn so với phần giao diện còn lại. Để giao diện hoạt động như mong muốn, các mục phải tương phản nhau theo một cách cụ thể. Và cách tương phản trong thiết kế này còn phải bàn thêm dài dài. Còn với vấn đề khó đọc, đây chỉ có thể là lỗi thử nghiệm.

Lý do lỗi này phổ biến như vậy là do mọi người cứ xem đây là một chủ đề chuyên môn được giải quyết bằng việc thay đổi giá trị, mà quên đi tác động thị giác cơ bản của sự tương phản.

Lời Kết

Khác với 4 lỗi đã đề cập, việc lạm dụng patterns ít khi làm mất chức năng Web mà thường sẽ hay gây nhàm chán hơn. Lại một lần nữa, designer đang “an toàn”. Nếu cộng đồng web tiếp tục đi theo con đường thiết kế an toàn này, sự thoái trào sẽ không dừng lại ở từng dự án thiết kế UI cá nhân nhỏ lẻ. Là một designer, bạn phải biết sáng tạo, thử nghiệm một cách cẩn trọng mà không quá phụ thuộc vào các quy luật, hướng dẫn sẵn có.

Via Techtalk.vn