Danh sách kiểm tra đánh giá thiết kế web cơ bản

Vì vậy, bạn đã xây dựng một trang web. Vì bất kỳ lý do gì, và với bất kỳ công cụ nào. Chúc mừng! Tuy nhiên, trước khi đưa nó vào không gian kỹ thuật số rộng lớn trên toàn thế giới, bạn có thể muốn dừng lại và kiểm tra xem mọi thứ có phù hợp với các yếu tố của một thiết kế tốt hay không.

Nhiều người nghĩ rằng thiết kế là vấn đề của sở thích, và đó là lý do tại sao bạn có thể tự do tô màu cho trang web của mình khi bạn thấy phù hợp. Nhưng trên thực tế, nó không bao giờ là về vẻ đẹp hay tính thẩm mỹ. Một trang web có thiết kế tốt phải đáp ứng được mục tiêu kinh doanh của bạn và đảm bảo rằng những người bạn muốn truy cập sẽ không bị từ chối.

Ấn phẩm này là kết quả của quá trình động não của nhóm thiết kế web của chúng tôi nhằm nỗ lực soạn thảo danh sách kiểm tra đánh giá thiết kế trang web duy nhất, đầy đủ và toàn diện. Vì vậy, hãy lấy một cốc cà phê, mở trang web của bạn và xem liệu tất cả các mánh lới quảng cáo của bạn có ở đúng chỗ không!

Để thuận tiện cho bạn, chúng tôi đã chia danh sách kiểm tra thiết kế web của mình thành 7 phần và minh họa từng phần bằng những gì chúng tôi coi là ví dụ thiết kế tốt cho các danh mục cụ thể đó. Hãy ghi một điểm cho mỗi mục bạn đã kiểm tra và ở cuối bài viết này, hãy làm tròn số điểm của bạn để xem thiết kế trang web của bạn thực sự tốt đến mức nào!



Sẵn sàng? Chúng ta đi đây!

Phần 1. Trang chính

Trang chính của bạn là trang bìa và tiêu đề trang web của bạn – và cũng giống như sách, các trang web cũng được đánh giá qua trang bìa và tiêu đề của chúng. Người dùng Internet ngày nay duyệt quá nhiều trang web để dành sự quan tâm đặc biệt cho từng trang web, vì vậy hãy lưu ý rằng nếu trang web của bạn không tạo ấn tượng đúng ngay từ đầu – thì chắc chắn nó sẽ bị bỏ lại phía sau. Dưới đây là các tiêu chí quan trọng nhất mà trang chính của bạn phải tuân theo:

• Đúng thông điệp. Khách truy cập có thể xác định nội dung trang web của bạn trong năm giây hoặc ít hơn.
• Xóa bước tiếp theo. Khách truy cập phải thấy chính xác nơi để đi từ trang chính.
• Hình ảnh anh hùng tốt. Trang chính có hình ảnh trung tâm, có thể là hình ảnh, hoạt ảnh hoặc video, giúp thu hút sự tập trung của khách truy cập.
• Kêu gọi hành động. Ít nhất một, nhưng nếu trang web của bạn theo đuổi nhiều loại hành động, hãy thực hiện càng nhiều lệnh gọi càng tốt.
• Gọi cảm xúc. Nhập trang web của bạn như thể bạn đã thực hiện lần đầu tiên. Nó có tạo ấn tượng mà bạn muốn khách truy cập của mình trải nghiệm không?

Phần #2. Cấu trúc & Điều hướng

Các trang web có thiết kế tốt được tổ chức theo cách sao cho mọi khách truy cập đều đạt được mục tiêu của họ một cách dễ dàng nhất có thể. Khi bạn khởi chạy trang web của mình, bạn chắc chắn biết mục tiêu của khách truy cập sẽ là gì: viết bài đăng, đăng ký, mua, bán, tìm thông tin nhất định, v.v.

Cấu trúc và điều hướng của trang web thể hiện mức độ tiếp cận mục đích của nó đối với người dùng. Đánh giá thiết kế trang web của bạn một cách nghiêm túc. Dưới đây là một số mẹo để kiểm tra xem tất cả đều tốt về vấn đề này:

• Bản đồ đường đơn giản. Menu chính của bạn sẽ bao gồm tất cả nội dung của bạn thành một số danh mục riêng biệt. Các trang web tốt không có nhiều hơn 5-6 danh mục cấp cao nhất và một số nghiên cứu cho thấy rằng một người bình thường chỉ có khả năng ghi nhớ 4 chủ đề trong bộ nhớ ngắn hạn. Vì vậy, càng ít càng tốt sẽ là quy tắc chung ở đây.
• Chỉ cần một vài cấp độ, xin vui lòng. Không ai thích mở một thư mục có mười thư mục con chỉ để biết rằng mỗi thư mục lại chứa hàng trăm thư mục khác. Đừng làm cho điều hướng của bạn quá sâu. Nếu bạn có nhiều danh mục không thể hợp nhất dễ dàng, hãy cân nhắc sử dụng menu thả xuống mở rộng, như minh họa trong hình trên.
• Hiển thị vị trí hiện tại. Hiển thị cho người dùng của bạn chính xác vị trí của họ trên trang web của bạn và cách họ đến đó. Breadcrumbs là một cách tốt để thực hiện điều này.
• Tính nhất quán của các trang. Giữ đầu trang, chân trang và logo ở cùng một vị trí trên tất cả các trang của bạn. Bạn chỉ có thể tạo một ngoại lệ cho trang chính của mình nếu bạn muốn nó hoạt động như một trang bìa.
• Hãy để người của tôi tìm kiếm. Cho dù điều hướng của bạn đơn giản và rõ ràng đến đâu, một số người dùng chỉ muốn nhập những gì họ muốn tìm trên trang web của bạn. Cung cấp cho họ khả năng đó với hộp Tìm kiếm tích hợp.

Phần #3. Trải nghiệm người dùng

Có một câu nói phổ biến với các chuyên gia về Trải nghiệm người dùng, “Thiết kế tốt là càng ít thiết kế càng tốt”. Các quy tắc và mẫu UX là khoa học thuần túy được đúc kết từ nhiều năm nghiên cứu và cho phép ít hoặc không cho phép sáng tạo.

Những nguyên tắc thiết kế web tốt này đã được thử nghiệm trên hàng tỷ người dùng trong suốt lịch sử thiết kế web. Để tìm hiểu xem chúng có được triển khai đúng cách trên trang web của bạn hay không, hãy kiểm tra những điều sau:

• Phân biệt giữa nút và liên kết. Các nút trên trang web của bạn đại diện cho các hành động. Khi khách truy cập của bạn nhìn thấy một nút, họ phải có ý tưởng rõ ràng về hành động mà họ sẽ thực hiện bằng cách nhấp vào nút đó. Mặt khác, các liên kết giả định đưa người dùng đến một phần nội dung nhất định. Liên kết lý tưởng gợi ý về những gì đằng sau nó. Các trang web mà hai điều này bị nhầm lẫn thì cuối cùng khách truy cập cũng bị nhầm lẫn.
• Tổ chức các hình thức. Hầu hết các trang web hiện đại đều cho rằng các tính năng đăng ký hoặc đăng ký của người dùng và chúng tôi cá là trang của bạn cũng vậy. Phương tiện để khách truy cập của bạn nhập dữ liệu của họ được gọi là biểu mẫu. Biểu mẫu bao gồm các trường, hộp, nút và trình đơn thả xuống phải được sắp xếp theo đúng cách. Đây là một hướng dẫn hữu ích về những điều nên làm và không nên làm trong quản lý biểu mẫu. So sánh các thực tiễn đã biết với cách triển khai biểu mẫu của bạn!
• Sử dụng hộp kiểm và đài phát thanh đúng cách. Hai yếu tố này thường xuyên bị nhầm lẫn, khiến người dùng rất tiếc. Một hộp kiểm giả định một tùy chọn có hoặc không. Nếu nó được kiểm tra, đó là có. Nếu không, đó là không. Và không có nền tảng trung gian. Hộp radio cung cấp sự lựa chọn trong số các tùy chọn và thường là hơn hai tùy chọn. Biết khi nào nên sử dụng cả hai yếu tố và không bao giờ đặt dấu bằng giữa chúng.
• Lặp lại hành động chính của bạn, thay vì chỉ sử dụng nó một lần. Khi bạn muốn khách truy cập hoàn thành điều gì đó trên trang web của mình, đừng để họ chỉ có một cách để làm điều đó. Đặt một nút ở dưới cùng và một liên kết nhanh ở bên cạnh. Một ý tưởng hay là làm cho hành động chính có thể truy cập được từ nhiều trang.

Phần 4. Nội dung trực quan

Hình ảnh là thứ thu hút sự chú ý của khách truy cập và khiến họ muốn ở lại và khám phá thêm trang web của bạn. Thiếu hoặc lựa chọn kém về hình ảnh sẽ khiến người dùng cảm thấy nhàm chán, ngay cả khi trang web của bạn không hơn gì một thư mục trang vàng. Nhưng với việc lựa chọn đúng hình ảnh, hoạt ảnh, biểu tượng và nội dung video, bạn có thể yên tâm rằng trang web của mình sẽ lấp lánh với màu sắc và mang lại trải nghiệm sống động. Xem xét các nguyên tắc này khi lấp đầy trang web của bạn với nội dung như vậy:

• Không có hình ảnh rẻ tiền. Mỗi bức tranh phải tạo ra giá trị bổ sung cho chất liệu mà nó minh họa. Nhìn vào của bạn và xem nếu họ làm. Lời khuyên tốt nhất là sử dụng hình ảnh của riêng bạn hoặc hình ảnh được tạo riêng cho dự án này. Nếu đó không phải là một lựa chọn, hãy cân nhắc sử dụng các kho ảnh miễn phí như Unsplash và Pixabay.
• Tối ưu hóa kích thước hình ảnh. Tất nhiên, độ phân giải của ảnh càng cao thì càng tốt, nhưng chỉ ở một mức độ nhất định. Không ai muốn chờ tải những bức ảnh lớn hơn 10 Mb. Đảm bảo ảnh của bạn không làm chậm trang web của bạn.
• Biểu trưng được căn chỉnh ở trên cùng bên trái. Các biểu trưng được căn giữa hoặc các giải pháp sắp xếp thay thế khác cho chúng có thể trông thú vị, nhưng rất có thể sẽ gây nhầm lẫn cho người dùng. Đây là một nghiên cứu giải thích tại sao điều này sẽ xảy ra.
• Không có sự kích thích của Flash. Công nghệ Flash đã lỗi thời và không có hỗ trợ riêng trong hầu hết các trình duyệt hiện đại. Nếu khách truy cập thấy rằng họ phải cài đặt một số plugin để xem trang web của bạn, rất có thể họ sẽ đóng nó và đi nơi khác.
• Phong cách biểu tượng thống nhất. Đảm bảo rằng tất cả các biểu tượng và hình ảnh clipart của bạn trông giống như chúng thuộc về một bộ duy nhất. Những cái có quá ít điểm chung sẽ làm cho trang web của bạn giống như thịt và cá trong cùng một món ăn. Bạn cũng nên làm lại các nút chia sẻ xã hội mặc định và làm cho chúng phù hợp với phong cách chung của bạn.
• Tất cả các video đều là nhấp để phát. Ngoại lệ duy nhất có thể là clip đang chạy trong nền. Điều này khá dễ hiểu - không ai muốn bộ đệm video cắt giảm băng thông của họ và loa của họ đột nhiên trở nên sống động.

Phần 5. Nội dung văn bản

Chúng tôi không đề cập đến các tính năng sao chép và tiếp thị của văn bản trên trang web của bạn, vì nó không ảnh hưởng trực tiếp đến thiết kế. Thay vào đó, chúng ta hãy tập trung vào văn bản của bạn thực sự trông như thế nào. Kiểu chữ xấu có thể giết chết các tác phẩm nghệ thuật thị giác sáng giá nhất và để không để điều đó xảy ra với trang web của bạn, hãy đảm bảo bạn tuân theo các nguyên tắc thiết kế tốt đơn giản sau:

• Sử dụng ba cấp độ của tiêu đề. Tiêu đề giúp cấu trúc văn bản của bạn và tập trung sự chú ý của khách truy cập vào những gì quan trọng. Các nghiên cứu đồng ý rằng ba cấp độ nói chung là phương tiện hài lòng cho hầu hết các trang web.
• Không nhiều hơn hai họ phông chữ và các họ phông chữ giống nhau cho tiêu đề và nội dung trên toàn bộ trang web của bạn. Một lần nữa, tính nhất quán là quy tắc ngón tay cái.
• Cỡ chữ ít nhất 14 pt. Trang web của bạn sẽ được đọc bởi mọi người chứ không phải robot và mọi người thích nhìn thấy các chữ cái rõ ràng.
• Liên kết trong văn bản được xác định rõ ràng. Bằng màu sắc, đánh dấu hoặc gạch chân, nhưng trong mọi trường hợp, người đọc phải cảm nhận chúng như vậy.
• Một tính năng hiện-ẩn cho văn bản dài. Đừng làm quá tải khách truy cập của bạn với cuộn dài. Triển khai các tùy chọn “hiển thị thêm” và “hiển thị ít hơn” nếu có. Đây là một bài viết cực kỳ dài giải thích lý do tại sao bạn không thể đọc nó cho đến cuối.

Mục #6. Khả năng đáp ứng

Một trang web tốt nói chuyện với khách truy cập của nó. Và chúng tôi không chỉ có nghĩa là tin nhắn bằng lời nói. Các yếu tố trong giao diện trang web của bạn phải tương tác với hành động của người dùng, có thể là di chuyển chuột, cuộn lên hoặc xuống hoặc đơn giản là xem một số nội dung hiện ra trước mắt họ. Nếu bạn muốn khách truy cập coi trang web của mình như một sinh vật sống, hãy xem xét thực hiện một hoặc hai trong số những điều sau:

• Di chuột nhạy. Các trang web hiện đại làm nổi bật các yếu tố quan trọng khi di chuột qua. Nó có thể là các nút, phần menu, logo hoặc liên kết chuyển trang. Đảm bảo rằng trang web của bạn không bị coi là một bức tranh tĩnh và thực sự phản hồi các cử chỉ của người dùng.
• Cuộn đáp ứng. Bánh xe cuộn là nút chuột thứ ba và phải có các chức năng liên kết giống như hai nút còn lại. Làm cho các phần tử đồ họa của bạn di chuyển khi cuộn hoặc hình ảnh mờ dần khi cuộn hoặc màn hình thay đổi khi cuộn. Nói cách khác, đừng giới hạn chức năng của bánh xe cuộn chỉ để… cuộn!
• Cửa sổ bật lên thích hợp. Hãy đối mặt với nó: cửa sổ bật lên gây phiền nhiễu. Tuy nhiên, một số trang web không thể làm được nếu không có chúng. Nếu đây là trường hợp của bạn, hãy làm cho cửa sổ bật lên của bạn xuất hiện kín đáo và chỉ khi người dùng mong đợi. Các trang web che khuất nội dung của họ bằng các cửa sổ bật lên tích cực có xu hướng bị đóng ngay lập tức.
• Góc hoạt động thông minh. Nếu bạn đang theo xu hướng và làm cho menu của bạn cuộn ra từ một bên hoặc một góc của màn hình, hãy đảm bảo rằng nó chỉ làm như vậy khi người dùng muốn. Không có yếu tố trượt nào cản trở việc nhấp vào các liên kết và nút ở gần góc hoạt động.
• Gợi ý cho nội dung tương tác. Nếu bạn có hoạt ảnh hoặc trò chơi nhỏ phản hồi lại hành động của người dùng, hãy để lại gợi ý. Một thông báo đơn giản “giữ và kéo” hoặc “nhấp để quay” sẽ thúc đẩy phản hồi của khách truy cập, do đó, sẽ tăng thời gian họ dành cho trang web của bạn.

Tìm hiểu thêm Làm sao để thiết kế web tăng lượt chuyển đổi?

Phần #7. Khả năng thích ứng

Khi bạn tạo trang web của mình, có thể bạn đang sử dụng màn hình toàn cảnh, độ phân giải cao, được hỗ trợ bởi GPU mạnh mẽ. Mặc dù tất cả có thể trông đẹp và bắt mắt trên đó, nhưng hãy nhớ rằng trang web có thể - và sẽ được - xem từ nhiều thiết bị khác nhau, với nhiều độ phân giải màn hình và giới hạn RAM khác nhau. Việc không cung cấp trải nghiệm giống nhau cho tất cả chúng sẽ không làm tăng thêm lòng tin của khách truy cập. Dưới đây là những điều cơ bản nhất cần ghi nhớ về vấn đề này.

• Thích ứng với ít nhất 3 độ phân giải màn hình: Di động, Máy tính bảng và Máy tính để bàn. Một trang web lý tưởng trông giống như ứng dụng trên điện thoại di động, phiên bản rút gọn trên máy tính bảng và phiên bản đầy đủ trên máy tính để bàn. Tính đến các độ phân giải màn hình khác nhau mà khách truy cập sẽ duyệt qua trang web của bạn. Nếu bạn không đủ khả năng để có nhiều phiên bản của trang web, thì ít nhất hãy đảm bảo rằng nó không bị quá tải với hình ảnh và kích thước phông chữ vẫn có thể đọc được trên tất cả các màn hình.
• Tải nhanh trên tất cả các thiết bị. Điều này chảy ra trực tiếp từ điểm trước đó. Khách truy cập muốn trang web tải nhanh, nếu không họ sẽ chuyển sang trang thay thế ngay lập tức. Bạn không muốn họ từ bỏ trang web của bạn vì điều này, phải không?
• Không có chướng ngại vật cuộn ngón tay. Khi cuộn trên điện thoại di động và máy tính bảng, mọi người sử dụng ngón tay và họ không thích hành động cuộn kết thúc bằng cách nhấp vào nút hoặc liên kết. Đảm bảo có đủ khoảng trống ở giữa để người dùng không nhấn nhầm vào bất kỳ mục có thể nhấp nào trong khi cuộn.
• Kiểm tra tỷ lệ. Những người có thị lực kém cũng duyệt các trang web và khi họ truy cập vào trang web của bạn, họ không nên rời đi chỉ vì trang web của bạn hoạt động kỳ lạ khi mở rộng trình duyệt. Đảm bảo rằng các cột của bạn không giao nhau và màn hình của bạn thay đổi theo cách bình thường.

Được rồi, đến thời điểm này, bạn nên kiểm tra tất cả các mục trong danh sách của mình. Chúng tôi thực sự hy vọng rằng bạn thấy danh sách kiểm tra các phương pháp hay nhất về thiết kế web của chúng tôi hữu ích. Bây giờ, hãy để chúng tôi tổng hợp các điểm của bạn và xem thiết kế của bạn có thực sự phù hợp với mong đợi của khách truy cập không!

1 - 9 điểm
Trang web của bạn rõ ràng có vấn đề và bạn có thể muốn ngồi xuống và giải quyết chúng. Một trang web thô sơ như vậy có thể sẽ không thu hút được nhiều khách truy cập.

10 - 15 điểm
Bạn có một trang web tốt có thể có khả năng hoạt động trong một thời gian. Tuy nhiên, hãy lưu ý rằng rất có thể nó sẽ hết hạn khá nhanh. Có lẽ đó là một ý tưởng tốt để đầu tư vào một số điều chỉnh tốt hơn?

16 - 20 điểm
Thiết kế tốt là kinh doanh tốt và bạn đã có một trang web sẽ phục vụ mục đích của nó một cách hoàn hảo. Chúc may mắn với việc thu hút khách truy cập, người theo dõi và khách hàng!

21+ điểm
Ồ! Trang web của bạn rất tuyệt, bạn có thể muốn gửi nó cho một giải thưởng thiết kế tốt! Đăng ký tại Awwwards, FWA hoặc CSSDA và xem liệu trang web của bạn có thể giành được giải thưởng hay không!