Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Design Theory

Lỗi: quyết định tệ hay thiết kế tệ?

by
Length:MediumLanguages:
This post is part of a series called Web Design Theory.
The Scaling Fallacy and Web Design
Less is More: Fundamentals of Minimalist Web Design

Vietnamese (Tiếng Việt) translation by Thùy Trang (you can also view the original English article)

Thẳng thắn nhé: lỗi xảy ra mọi lúc mà. Hầu hết các lỗi gây ra bởi thứ chúng ta gọi là lỗi con người và chúng có vẻ như không thể tránh khỏi, nhưng tôi sẽ tranh luận một chút trong chuyên mục này, rằng một thói quen thiết kế tốt có thể giúp giảm bớt và thậm chí là xóa sổ các lỗi xảy ra trên web. Còn với hầu hết các lỗi còn lại trên thế giới, tôi sẽ để chuyện đó cho ai đó khác.

Giới thiệu nhanh: đây là một chuyên mục nữa trong series “Lý thuyết thiết kế”. Tôi sẽ bắt đầu bằng việc nói về một số nguyên tắc thiết kế về mặt trừu tượng; Sau đó chúng ta sẽ nhanh chóng tiến tới vài ví dụ thực hành về việc làm thế nào chúng ta có thể áp dụng các ý tưởng đó vào thiết kế web.

Nguyên nhân của lỗi

Dù là làm đổ hộp sữa, quẹo sai hướng, hay điền sai một mẫu web, tất cả lỗi đầu có thể truy nguồn về tâm lý con người. Một vài nghiên cứu tâm lý học đã gợi ý rằng lỗi có thể được chia thành hai nhóm chính:

  • Trượt, hay các lỗi thực hành.
  • Sai lầm, hay các lỗi về ý định.

Chúng ta sẽ thảo luận về cả 2 thứ này sâu hơn một chút trong chốc lát nữa, nhưng hãy thử cân nhắc phát biểu này nhé: nguồn gốc thực sự của hầu hết các lỗi đều không có gì phức tạp, khó khăn hoặc do sự thiếu năng lực của người dùng… nguồn gốc thực sự của hầu hết các lỗi là thiết kết tồi. Như một trong những tác giả viết về design tôi yêu thích đã tóm gọn:

Không phải sự phức tạp là vấn đề, mà là thiết kế tồi. Thiết kế tồi làm mọi thứ trở nên rắc rối một cách không cần thiết và khiến chúng ta nhầm lẫn. Thiết kế tốt có thể thuần phục sự phức tạp.
-Donald A. Norman

Dựa trên logic đó, chỉnh sửa hoặc ngăn ngừa lỗi không chỉ là vấn đề đơn giản hóa các thiết kế của chúng ta, mà là làm chúng tốt hơn. Nghe thì dễ, đương nhiên… nhưng hãy điểm qua xem “tốt hơn” nghĩa là thế nào theo thuật ngữ design.

Ngăn ngừa lỗi thì dễ, nhưng không đơn giản

Quá nhiều thứ đã được nói về “sự đơn giản” như chén thánh của ngành design trong thập kỷ qua. Nhiểu quyển sách dày cộm đã được viết về tính thần thánh của sự đơn giản, và thì “mọi thứ chúng ta cần làm để chỉnh sửa các vấn đề của thế giới là đơn giản hóa nó”. Nó vô nghĩa hoàn toàn nếu bạn hỏi ý kiến của tôi, nhưng đây là một vài ví dụ bạn có thể nghe đâu đó quanh máy nước lạnh hoặc góc quán cà phê:

“Ipod cách mạng hóa ngành công nghiệp máy nghe nhạc cầm tay bằng cách đơn giản hóa giao diện.”

“Amazon.com trở thành người khổng lồ bán hàng online bằng cách khiến việc mua hàng trực tuyến đơn giản hơn.”

“Facebook đánh bại MySpace vì sử dụng nó đơn giản hơn.”

Tôi khóc không nổi nữa! Điều ngu ngốc về những phát biểu này là không ai thực sự nghĩ xem họ đang nói cái gì… ý tôi là… nghiêm túc đó, giao diện iPod không đơn giản đến vậy đâu, nếu bạn đang cố mô tả nó cho bà ngoại 85 tuổi của mình; Amazon.com chẳng làm gì mới để đơn giản hóa trải nghiệm mua hàng trực tuyến cả, và Facebook đánh bại MySpace là vì thiết kế của MySpace quá xấu!

Chả có ví dụ nào nói trên mà “sự đơn giản” đóng vai trò quan trọng trong lý do một công ty hay sản phẩm nào đó thành công cả. Chính thiết kế làm đều đó! Dĩ nhiên, sự đơn giản luôn là một chiến lược ưa chuộng nếu bạn đang đối mặt với một vấn đề hoặc thiết kế quá sức phức tạp, nhưng chúng ta cần ngưng nói về nó như thể đó là câu trả lời cho mọi vấn đề của chúng ta.

Ngày nay người ta phun ra từ ‘đơn giản’ quá dễ dàng ở khắp mọi nơi. Điều họ thực sự ngụ ý khi họ nói thứ gì đó “quá đơn giản!” là “nó được thiết kế quá tốt!”

Nói đi nói lại thì… bước đầu tiên để hiểu cách thức sửa chữa và ngăn ngừa lỗi trên web là quăng cục tạ ‘đơn giản’ của bạn xuống đất ngay đi. Sự đơn giản không phải chiếc đũa thần, nó là một lưỡi cưa, và có nhiều đồ nghề chúng ta cần dùng hơn để nhắm tới các vấn đề thiết kế. Được rồi, hãy bước sang phần thực hành ngon ngọt của chuyên đề...

Lỗi loại 1: Trượt

Trạm đầu trên chuyến tàu lỗi, trượt. Trượt có thể được diễn giải là lỗi thực hiện. Chúng không phải những sai lầm cố ý, nhưng chúng xảy ra hoài vì con người thiệt tình là quá hậu đậu. Đây là một vài ví dụ về trượt trên khía cạnh thiết kế web:

  • Đánh vần sai địa chỉ mail, tên hoặc số điện thoại của bạn.
  • Chọn sai check box.
  • Quên điền hoàn toàn một web form.
  • Quên nhấn “save” trước khi đóng một tài liệu.

Làm thế nào để tránh trượt

Là một web designer, đối phó với trượt có thể khá gay go vì chúng xảy ra như kết quả của những tiến trình vô thức và nhầm lẫn trong tâm trí con người. Bạn không thể ngăn ai đó không trượt 100% tất cả mọi lúc… mà giống hơn với một cửa tiệm tạp hóa dùng bảng “sàn ướt” khi họ đang chùi một mớ hỗn độn, có vài thứ bạn có thể làm để khiến người dùng ý thức hơn về các hành động của họ.

Dùng các ví dụ tương tự về trượt phía trên, đây là vài giải pháp đơn giản:

  • Đánh vần sai địa chỉ email. Khắc phục: Xác nhận thời gian thực những forms mấu chốt để kiểm tra lỗi. 
  • Chọn sai check box. Khắc phục: Giới hạn lựa chọn trong một con số hợp lý, và cho người dùng thấy một danh sách rõ ràng các lựa chọn của họ trước khi nộp form lần cuối.
  • Quên điền hoàn tất một web form. Khắc phục: cảnh báo người dùng lập tức khi họ bỏ qua một trường bắt buộc bằng cách hight light nó, hoặc thiết kế một tín hiệu rõ ràng cho thấy nó là bắt buộc.
  • Quên bấm “save” trước khi đóng một tài liệu. Khắc phục: auto-save tài liệu hoặc trường cho họ… hoặc nhắc họ save trước khi họ được phép đóng trang hoặc cửa sổ đó.

Như bạn đã thấy từ các ví dụ trên, sự đơn giản chỉ là một công cụ có thể dùng để giúp giải quyết lỗi. Trong hầu hết các trường hợp này, chúng ta không đơn giản hóa thiết kế, chúng ta thực ra thêm một bố cục rắc rối nữa bằng cách thêm layer tương tác “hướng dẫn”. Ngăn ngừa trượt không có nghĩa là phát minh ra “một cách đơn giản hơn để đi bộ”, nó có nghĩa là thêm các biển cảnh báo và các sàn nhà có độ bám dính tốt hơn.

Lỗi loại 2: Sai lầm

Sai lầm là một giống lỗi khác. Chúng xảy ra khi ai đó làm điều gì đó sai một cách có ý thức. Đây là vài ví dụ về sai lầm xảy ra trong thiết kế web.

  • Một người dùng cố gắng đánh sập hệ thống vote bằng cách vote nhiều lần.
  • Ai đó nhập mã Javascript vào trường văn bản đơn để chèn mã độc.
  • Người dùng không may chọn sai nghành nghề trên một trang tìm việc (chẳng hạn như monster.com).
  • Các thành viên trang cố upload thật nhiều hình ảnh độ phân giải cao lên Facebook.

Điều quan trọng cần suy ngẫm là sai lầm không phải lúc nào cũng ác độc, thậm chí nếu chúng là cố ý. Mẹ tôi  chẳn hạn, có thể cố gắng làm điều cuối cùng trong danh sách bên trên (cố upload vài trăm ảnh chụp cỡ bự lên Facebook), nhưng bà không phạm sai lầm đó một cách có mục đích… bà chỉ không biết rằng nó thường lấy mất của bà nhiều ngày để upload những tấm hình đó với tốc độ kết nối internet chậm.

Làm thế nào để tránh sai lầm

Tránh sai lầm, cũng giống như trượt, sẽ khá dễ một khi bạn đã xác định loại lỗi mà bạn đang đối phó. Hãy trở lại ví dụ nguyên thủy:

  • Một người dùng cố gắng đánh sập hệ thống vote bằng cách vote nhiều lần. Khắc phục: Áp dụng một đoạn mã giới hạn số lần vote cho mỗi địa chỉ IP. 
  • Ai đó nhập mã Javascript vào trường văn bản đơn để chèn mã độc. Khắc phục: Làm sao để chỉ văn bản thô có thể được dùng trong trường văn bản. 
  • Người dùng bất không may chọn sai nghành nghề trên một trang tìm việc (chẳng hạn như monster.com). Khắc phục: dẫn người dùng qua một cây quyết định để họ tìm đúng phân loại của mình thay vì đoán già đoán non.
  • Các thành viên trang cố upload thật nhiều hình ảnh độ phân giải cao lên Facebook. Khắc phục: Chèn mã upload để kiểm tra kích thước file trước khi thực sự upload, và cho người dùng biết thời gian ước tính để upload.

Cũng như phía trước, giải pháp khá dễ về mặt thiết kế. Trong hầu hết mọi trường hợp, text-message đơn giản hoặc thiết kế loại quy trình công việc là đủ để vừa thông báo cho người dùng các sai lầm tiềm ẩn, vừa ngăn chặn chúng cùng một lúc. Một lần nữa, giải pháp ở đây không phải là giảm xuống cho đơn giản, mà là thêm vào một layer design nữa một cách thông minh để hướng dẫn người ta quanh những hành động dễ gây lỗi.

Layer thứ 3: giải pháp thực tế để tránh lỗi 

Vài mẹo vặt tiếp heo là những ví dụ thực tế về thực hành thiết kế sẽ giúp bạn xóa sổ việc xảy ra lỗi. Điều này không chỉ áp dụn cho các web form… nguyên tắc để khắc phục là…

Để đối phó với tình huống nơi lỗi xảy ra thường xuyên và người dùng hay bực bội, bước đầu tiên là cân nhắc việc thêm vào một “layer thứ 3” cho thiết kế của bạn.

Nhưng “layer thứ 3” mà tôi đang nói tới ở đây là gì? Đầu tiên, hãy xem qua cách mà hầu hết designer tiếp cận việc thiết kế website:

Đây là mô hình, các layer chức năng chính là thứ bạn có thể gọi là wireframe của trang. Nó bao gồm bố cục tổng quan cũng như các nội dung và chức năng chính của trang.

Layer thiết kế trực quan đại diện cho làn da, hoặc phong cách. Đây có thể là bất cứ thứ gì từ màu sắc, kiểu chữ, hình ảnh v…v… Đây là layer trực quan mà bạn bọc ngoài nội dung để làm nó trông lung linh hơn… nếu nó được làm đúng, điều này cũng sẽ giúp trang của bạn thân thiệt hơn với người dùng bằng cách làm cho nó dễ đọc và dễ điều hướng hơn.

Giờ hãy nhìn vào mô hình có layer thứ 3:

Giờ thì, mô hình bao gồm cả layer hướng dẫn thứ 3. Layer này đại diện cho các yếu tố “trợ giúp” trên trang của bạn.

Các yếu tố layer thứ 3 có thể bao gồm:

  • Chú giải công cụ và các cửa sổ phương thức – Cho phép người dùng có nhiều thông tin hơn mà không cần phải rời trang. 
  • Xác nhận form – lý tưởng nhất là, điều này nên hoàn thành lập tức. Xem thêm.
  • Các chỉ thị trực quan & tín hiệu trạng thái – hãy để người dùng biết họ đang ở đâu trong một quy trình từng bước, hoặc khi có lỗi xảy ra.
  • Các nhắc nhở bằng văn bản đơn thuần – để người ta biết cái gì họ có thể, và không thể làm.
  • Đơn giản hóa thông minh & Tái cấu trúc – xóa bỏ các yếu tố dư thừa gây nhầm lẫn khỏi thiết kế của bạn.
  • Cây quyết định – giúp người dùng tìm ra thứ họ đang tìm kiếm.
  • Checklist – giúp người dùng hiểu họ có và không có gì.
  • Hiển thị lịch sử - giúp người dùng thấy các thay đổi trong một khoảng thời gian để tăng cường nhận thức của họ.
  • Trang hỏi đáp – đây là một chiến lược nội dung hơn là chiến lược thiết kế, nhưng nó đủ hữu dụng để nằm trong danh sách của chúng ta (đặc biệt khi được kết hợp với hệ thống tìm kiếm hoặc cây quyết định).

Điều quan trọng cần lưu ý là layer thứ 3 này không nhất thiết rằng thiết kế của bạn cần trở nên phức tạp hơn… thêm hàng tấn yếu tố mới không phải lúc nào cũng là giải pháp trừ khi bạn có thể làm nó theo một cách sạch sẽ và không phô trương. Hãy nhớ, các thiết bị hỗ trợ này nhắm tới việc giúp người ta tránh lỗi… nếu tất cả những gì bạn đang làm là xáo trộn một thiết kế trang lên với một mớ rác cộng thêm, bạn thực ra đang tăng tỉ lệ có thể xảy ra lỗi bằng cách làm người dùng bối rối. Chìa khóa: thêm điều gì cần thiết để giúp người dùng theo cách ích gây ảnh hưởng nhất. Nếu bạn đang nói chuyện với họ bằng giọng thật, hãy nói thật điềm tĩnh – la lối không giải quyết được gì đâu ;)

Sự tha thứ

Ngăn ngừa lỗi xảy ra là làm rất nhiều thứ để tăng nhận thức tình huống của người dùng về những điều đang xảy ra quanh họ và giảm bớt tiếng ồn thị giác trên trang. Khá thường xuyên, designer giả định rằng một người dùng website sẽ có trình độ kiến thức ngang ngửa với họ… điều này ổn thôi, nếu bạn thực sự biết và tin tưởng đối tượng mục tiêu của mình, nhưng trong đa số rộng lớn của các dự án web, đây là một giả định hết sức nguy hiểm.

Thêm sự tha thứ vào thiết kế là một cách dễ dàng để giảm bớt cơn bùng nổ khi người dùng phạm sai lầm và trượt chân. Sự tha thứ, trong bối cảnh này, là đề cập tới những yếu tố sẽ giảm nhẹ sự nghiêm trọng của một lỗi nào đó khi nó xảy ra.

Ví dụ: điều này có thể là không cho phép người dùng hoàn tất một form đặt hàng trừ khi họ nhập vào một địa chỉ mail đã xác nhận.

Sự tha thứ cũng nằm dưới dạng cho phép người dùng tự chỉnh sửa lỗi của họ khi chúng  xảy ra. Làm thế nào để nó hiệu quả trong các ứng dụng thực tế sẽ tùy vào bạn… nhưng là một nguyên tắc design trừu tượng, điều này nghĩa là xây dựng các cách thức để người dùng điều chỉnh thông tin và chỉnh sửa các sai lầm.

Có những điều mà chúng ta hay coi thường trong thế giới của những người chỉnh sửa profile Facebook, các hệ thống CMS như WordPress và những thứ tương tự, nhưng khi bạn đang tạo ra một thiết kế từ con số 0, nó thực sự rất quan trọng để cân nhắc việc sự tha thứ cần được thêm vào đâu trong các dự án của bạn.

Kết luận

Vậy là đủ cho chuyên mục này! Nếu bạn thấy hứng thú nhiều hơn về những chuyên mục thiên hướng nguyên tắc và triết lý này, hãy cho chúng tôi biết và chúng tôi rất hân hạnh mang đến cho bạn nhiều hơn. Cá nhân tôi nghĩ rằng triết lý đằng sau việc thiết kế web khá dễ hiểu và cũng hữu dụng như những bài hướng dẫn thực tế về cách thức tạo ra các yếu tố design cụ thể, nhưng đây vẫn là trang web hướng về đám đông, nên chúng tôi sẽ lắng nghe những gì các bạn muốn nói!

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.