Làm thế nào để biểu đồ đẹp và infographics cho trang web của bạn?

Cập nhật: 21/2020/XNUMX / Bài viết của: Jerry Low

Nếu Internet là một điều, nó là hình ảnh.

Mọi người yêu thích thông tin nhanh chóng và dễ dàng truy cập và infographics chỉ cung cấp loại trực quan hóa dữ liệu đó. Ngay cả dữ liệu phức tạp cũng dễ hiểu hơn khi kết hợp với biểu đồ hình tròn, biểu đồ hoặc ảnh.

Theo một infographic của các trường tiếp thị hàng đầu, một infographic có khả năng tiếp cận khoảng 15 triệu người.

Tại sao Infographics?

Chuyên gia tiếp thị, Bell Pottinger, đã thấy ngân sách kinh doanh tăng 55% cho các mặt hàng kỹ thuật số như đồ họa thông tin.

Trong một họa thông tin về infographics, Unbounce nói rằng số người tìm kiếm infographics đã thấy mức tăng 800% trong hai năm qua. Với số liệu thống kê như vậy, thật khó để phủ nhận rằng trực quan hóa dữ liệu dưới dạng infographics là một nội dung / tiếp thị tốt cho các trang web và blog.

Lợi ích # 1- Khách truy cập mới

Thêm infographics thu hút khách truy cập trang web mới theo một vài cách.

  • Tìm kiếm trên web: Người dùng Internet có thể đang thực hiện nghiên cứu về chủ đề Infographic của bạn. Nếu bạn là trang web duy nhất có một infographic về lý do tại sao quả việt quất làm cho bạn thông minh hơn, thì bạn sẽ nhận được lưu lượng truy cập từ bất cứ ai tìm kiếm một infographic về chủ đề đó. Những người đang tìm kiếm hình ảnh cụ thể cũng có thể đi qua infographic của bạn.
  • Truyền thông xã hội: Các họa thông tin từ các trường tiếp thị hàng đầu chỉ ra rằng một bài đăng truyền thống được về các tweet tweet 75, trong khi một đồ họa thông tin được gần như 600. Vì mọi người có nhiều khả năng chia sẻ đồ họa thông tin của bạn trên Twitter hơn là một bài đăng đơn giản, tiềm năng của bạn để tiếp cận khách truy cập mới thông qua truyền thông xã hội là rất lớn.

Nielson / Norman Group ước tính rằng lượt truy cập trang trung bình kéo dài dưới một phút. Trừ khi bạn lấy được sự quan tâm của độc giả, cô ấy sẽ lướt qua trang của bạn và chuyển sang trang tiếp theo.

Khách truy cập trang web có thói quen cuộn thông tin và tin tức. Đây là một lý do khác tại sao infographics hoạt động rất tốt để thu hút sự quan tâm của độc giả. Một đại diện trực quan của một sự thật thú vị là một cách nhanh hơn để trình bày thông tin so với các đoạn văn bản. Người đọc có thể lướt qua infographic của bạn một cách nhanh chóng, tiếp thu thông tin cần thiết và sẽ ở lại lâu hơn một chút để kiểm tra những gì bạn cung cấp, hoặc có thể đánh dấu trang web của bạn để sử dụng sau.

Thách thức kỹ thuật trong việc phục vụ infographics giàu thông tin

Tuy nhiên, một điều cần lưu ý là trong khi infographics thêm giá trị, hình ảnh nặng mất nhiều thời gian để tải có thể phục vụ để thúc đẩy khách truy cập đi. Nghiên cứu của Pew Internet ước tính rằng khách truy cập trang web trung bình mong đợi một trang tải dưới 3 giây. Trang web của bạn tải nhanh hơn, tỷ lệ chuyển đổi của bạn càng tốt.

Đây là hành động cân bằng để đảm bảo rằng trang web của bạn cung cấp trải nghiệm trực quan phong phú trong khi vẫn tải nhanh như chớp. Cách tốt nhất để thực hiện điều này là với các máy chủ nhanh và hình ảnh được tối ưu hóa. Bạn sẽ chú ý trong lưu trữ web đánh giá, chúng tôi nhấn mạnh rất nhiều về tốc độ và thực hiện nhiều bài kiểm tra tốc độ khi xếp hạng máy chủ web.

Lợi ích # 2- Giữ chân khách truy cập

Nielson / Norman Group ước tính rằng lượt truy cập trang trung bình kéo dài dưới một phút. Trừ khi bạn lấy được sự quan tâm của độc giả, cô ấy sẽ lướt qua trang của bạn và chuyển sang trang tiếp theo.

Khách truy cập trang web có thói quen cuộn thông tin và tin tức. Đây là một lý do khác tại sao infographics hoạt động rất tốt để thu hút sự quan tâm của độc giả. Một đại diện trực quan của một sự thật thú vị là một cách nhanh hơn để trình bày thông tin so với các đoạn văn bản. Người đọc có thể lướt qua infographic của bạn một cách nhanh chóng, tiếp thu thông tin cần thiết và sẽ ở lại lâu hơn một chút để kiểm tra những gì bạn cung cấp, hoặc có thể đánh dấu trang web của bạn để sử dụng sau.

Tuy nhiên, một điều cần lưu ý là trong khi infographics thêm giá trị, hình ảnh nặng mất nhiều thời gian để tải có thể phục vụ để thúc đẩy khách truy cập đi. Nghiên cứu của Pew Internet ước tính rằng khách truy cập trang web trung bình mong đợi một trang tải dưới 3 giây. Trang web của bạn tải nhanh hơn, tỷ lệ chuyển đổi của bạn càng tốt.

Đó là hành động khá cân bằng để đảm bảo rằng trang web của bạn cung cấp trải nghiệm trực quan phong phú trong khi vẫn tải nhanh như chớp. Cách tốt nhất để thực hiện điều này là sử dụng máy chủ lưu trữ web nhanh và hình ảnh được tối ưu hóa. Bạn sẽ nhận thấy rằng chúng tôi nhấn mạnh rất nhiều vào tốc độ trong các bài đánh giá lưu trữ của chúng tôi - xem Đánh giá Hosting A2 ví dụ hoặc kiểm tra đánh giá khác của chúng tôi để xem máy chủ web nào đáp ứng tốt nhất nhu cầu về tốc độ của bạn.

Lợi ích # 3 - Thêm quyền

50% bộ não của chúng ta có liên quan đến xử lý hình ảnh (nguồn).

Hầu hết mọi người đều là người học trực quan. NeoMam đã biên soạn nghiên cứu từ các nguồn như Google Trends, Nielson và Pearson cho thấy 70 phần trăm của các thụ thể cảm giác được đặt trong mắt và mọi người có thể tham gia và thấu hiểu một cảnh trực quan chỉ trong vòng 1 / 10th trong một giây.

Mọi người có xu hướng tin những gì họ nhìn thấy bởi vì họ hiểu nó tốt hơn. Làm nghiên cứu và sao lưu nó trong đồ họa thông tin của bạn có thể thêm quyền lực cho thương hiệu của bạn. Chắc chắn rằng:

  • Cung cấp thống kê vững chắc
  • Thêm tài nguyên được tôn trọng ở cuối bản đồ họa thông tin
  • Thêm biểu đồ và biểu đồ hiển thị các thống kê đó theo cách trực quan

Khi bạn kết hợp các giác quan thị giác với các tính năng tương tác, chẳng hạn như đồ họa thông tin NeoMam, các thống kê này xuất phát, bạn không chỉ thu hút sự quan tâm của độc giả mà còn thu hút nó.

Bạn thấy gì hơn? Bạn có nhận thấy một hình ảnh đơn giản trên trang hoặc hình ảnh di chuyển, nhấp nháy hoặc có thể bắt đầu một video không?

 


 

Điều gì làm cho một Infographic tốt?

Tiến về phía trước, chúng tôi sẽ xem xét một số tài nguyên và công cụ tốt nhất để trực quan hóa dữ liệu hiện nay. Bất kể bạn là một blogger bình thường, người chỉ đơn giản muốn tạo ra một số infographics đẹp cho mục đích xây dựng thương hiệu hoặc một nhà thiết kế đồ họa nghề nghiệp, người cần tìm hiểu sâu hơn về lĩnh vực này; Tôi chắc chắn bạn sẽ tìm thấy bài viết này hữu ích.

Kiến trúc thông tin

Nói chung, một phần trực quan hóa dữ liệu tốt bao gồm ba yếu tố chính:

  1. Dữ liệu có ý nghĩa,
  2. Thiết kế thông tin phù hợp và
  3. Đồ họa đẹp.

Hãy nhớ rằng mặc dù đồ họa thông tin và biểu đồ có xu hướng thu hút sự chú ý từ blogsphere và người dùng mạng xã hội; họ nên làm nhiều việc hơn là chỉ quảng bá thương hiệu - Đồ họa thông tin và biểu đồ được cho là cung cấp dữ liệu nhàm chán và lộn xộn theo cách thân thiện với người dùng ngay từ đầu.

Do đó, trước tạo đồ thị hoặc đồ họa thông tin, bạn sẽ cần phải 1) Tổ chức, lọc và tinh chỉnh dữ liệu của bạn; 2) Quyết định cách trình bày dữ liệu của bạn (hay còn gọi là thiết kế trực quan hóa dữ liệu).

Khai thác dữ liệu

Nhập OpenRefine - Một công cụ khai thác dữ liệu mạnh mẽ giúp chúng ta tiết kiệm việc sắp xếp dữ liệu của mình theo từng hàng trên Trang tính Excel. Trước đây được gọi là Google Refine (và Freebase Gridworks), công cụ này giúp người dùng khám phá và dọn dẹp dữ liệu, chuyển đổi dữ liệu từ định dạng này sang định dạng khác và mở rộng dữ liệu với các dịch vụ web khác nhau.

Trong trường hợp bạn đang làm việc với một số dữ liệu không có thứ tự lớn, OpenRefine chắc chắn phải có trong bộ công cụ của bạn. Công cụ hiện được lưu trữ trên GitHub, bạn có thể truy cập trang này cho tất cả các thông tin cần thiết và giúp. Để tiếp tục theo dõi và tin tức mới nhất, Bạn cũng nên xem trang web mới được phát hành của mình tại http://openrefine.org/

Trình bày dữ liệu

Khi bạn đã sẵn sàng với dữ liệu của mình, đã đến lúc quyết định cách bạn sẽ trình bày nó cho người xem.

Có vô số cách tiếp cận để thực hiện điều này: Biểu đồ hình tròn, sơ đồ, biểu đồ đường, biểu đồ, bản đồ nhiệt, lưu đồ, bảng tuần hoàn, v.v. Mỗi cách tiếp cận này hoàn toàn phù hợp với một số loại dữ liệu nhất định (và sẽ rất tệ nếu bị lạm dụng).

Bạn nên trình bày dữ liệu của mình như thế nào để thống kê của bạn đẹp, bắt mắt và dễ hiểu?

Về vấn đề này, Trực quan đọc viết xây dựng một bảng tuần hoàn vô cùng tiện dụng trên tất cả các tùy chọn bạn có thể sử dụng để trực quan hóa dữ liệu của bạn (xem bên dưới).

Lưu ý rằng bảng tuần hoàn hiển thị một số ví dụ thú vị khi bạn cuộn qua chuột của bạn, vì vậy hãy chắc chắn rằng bạn xem bảng thực tế trên trang web.

Bảng tuần hoàn trên trực quan hóa dữ liệu

Trong trường hợp bạn đang tìm kiếm các cách tiếp cận phi truyền thống, thì bạn nên kiểm tra bài viết tuyệt vời này trên tạp chí Smashing. Bài đăng được xuất bản một thời gian trước nhưng vẫn còn, tôi thấy nó rất hữu ích.

 


 

Công cụ Infographic và Sạc để sử dụng

Ngay sau khi bạn hoàn thành kiến ​​trúc thông tin, đã đến lúc sản xuất thực sự. Tạo một biểu đồ đẹp mắt từ dữ liệu thô không bao giờ là một nhiệm vụ dễ dàng, may mắn thay, có vô số công cụ để hoàn thành công việc.

Có, vô số công cụ để trực quan hóa dữ liệu. Có các công cụ toàn diện tạo ra đồ họa tương tác từ dữ liệu phức tạp; cũng có những ứng dụng web dễ dàng không làm gì khác ngoài việc tạo biểu đồ đường 2 trục đơn giản.

Vì lý do thực tế, chúng tôi sẽ xem xét cả hai bên và liệt kê ra nhiều công cụ đồ họa cho cả người dùng trước và người dùng thông thường.

Công cụ biểu đồ nâng cao

Đầu tiên, chúng ta hãy xem xét một số thứ trước.

1. ggPlot2 và R

R và ggplot2

R là một ngôn ngữ máy tính và môi trường cho thao tác dữ liệu, tính toán và hiển thị đồ họa. ggplot2, mặt khác, là một hệ thống âm mưu cho R giúp sản xuất đồ họa nhiều lớp phức tạp. Ví dụ: Bản đồ nhiệt bên trên được tạo bằng ggplot2 và R.

Nếu bạn muốn học R và ggplot2, LearnR là một blog tuyệt vời để đọc thêm (mặc dù blog chưa được cập nhật một thời gian).

2. jqPlot

jqPlot

jqPlot là một plugin vẽ và biểu đồ cho khuôn khổ Javascript jQuery. jqPlot tạo ra các biểu đồ đường, thanh và hình tròn đẹp mắt. Công cụ này đi kèm với một số tính năng hay như tạo ra các điểm tương tác mà người dùng có thể điều chỉnh trên trình duyệt web. Tuy nhiên, cần lưu ý rằng công cụ này không được kiểm tra kỹ lưỡng và có thể không được hỗ trợ bởi một số trình duyệt web nhất định - cụ thể là Chrome và IE dưới 7.

3. Biểu đồ JP

Biểu đồ JP

Biểu đồ JP là một công cụ biểu đồ dựa trên PHP hỗ trợ các loại cốt truyện khác nhau. Trong trường hợp bạn đang viết một chương trình PHP cần một thư viện tạo biểu đồ, đây là điều mà bạn nên xem xét. Tôi không nói JP Graph là một công cụ dễ dàng cho người mới bắt đầu nhưng công cụ (hoặc, thư viện PHP) sẽ rất hữu ích khi bạn cần tạo biểu đồ và biểu đồ từ máy chủ web của mình. JP Graph miễn phí cho sử dụng phi thương mại và bạn sẽ cần một máy chủ web hỗ trợ PHP 4.3.x trở lên.

4. Bộ công cụ JS InfoVis

Bộ công cụ JavaScript InfoVis

Bộ công cụ JavaScript InfoVis là một thư viện được phát triển bởi Nicolas Garcia Belmont. Thư viện đi kèm với một loạt các lựa chọn trực quan và hoàn toàn miễn phí sử dụng.

 KHAI THÁC. Phân tích IBM (trước đây gọi là Nhiều mắt)

IBM Analytics là một công cụ miễn phí cho phép người dùng tạo trực quan hóa từ hầu hết mọi loại tập dữ liệu.

Được lưu trữ trên các máy chủ IBM, Many Eyes không chỉ đơn thuần là trực quan hóa dữ liệu - nó cho phép người dùng tải lên tập dữ liệu của riêng họ cũng như tạo mô hình trực quan hóa mới dựa trên bất kỳ dữ liệu nào được lưu trữ trong máy chủ.

6. Biểu đồ Google

Google Chart

Google Chart là miễn phí, mạnh mẽ, linh hoạt và được hỗ trợ bởi rất nhiều công cụ dành cho nhà phát triển khác.

Biểu đồ trên Biểu đồ Google hoàn toàn dựa trên công nghệ HTML5 / SVG; công cụ này giúp tạo biểu đồ ở các định dạng khác nhau với hoạt ảnh đẹp và các điều khiển tương tác.

7. Trục

Trục

Axiis là một khung trực quan dữ liệu nguồn mở được phát triển bởi Tom Gonzalez và Michael VanDaniker. Công cụ này được thiết kế đặc biệt cho người mới bắt đầu và các chuyên gia phát triển. Axiis cung cấp cả các thành phần trực quan được xây dựng trước cũng như các mẫu bố cục trừu tượng và các lớp dựng hình cho phép bạn tạo ra các hình ảnh độc đáo của riêng bạn.

Công cụ Infographic dễ dàng cho người mới bắt đầu

Phải thừa nhận rằng, hầu hết các blogger (bao gồm cả tôi) không cần các công cụ biểu đồ toàn diện ở trên cho các hoạt động viết blog thông thường của họ. Thông thường, tất cả những gì chúng tôi cần là một ứng dụng web dễ dàng hoặc một công cụ đơn giản để hoàn thành công việc một cách nhanh chóng.

Với điều đó đang được nói, đây là danh sách các công cụ sáng tạo đòi hỏi rất ít nỗ lực học tập và thân thiện với người dùng.

1 Visme

visme

Visme là một nền tảng DIY cho phép người dùng tạo các bài thuyết trình và đồ họa thông tin chuyên nghiệp.

Hơn 350,000 cá nhân và tổ chức (bao gồm cả người dùng từ các công ty lớn như IBM và Disney) sử dụng công cụ này để giao tiếp tốt hơn thông qua đồ họa và bản trình bày tương tác.

2. Venngage

Venngage là một công cụ trực quan thân thiện với người dùng đã xuất hiện từ 2011. Công cụ này cung cấp một cách dễ dàng để tạo infographic với trình chỉnh sửa kéo và thả, canvas dạng tự do và 1,000 + của các ví dụ và mẫu dựng sẵn.

3. Easel.ly

Easel.ly

Easel.ly giúp tạo và chia sẻ dữ liệu trực quan dễ dàng trực tuyến. Ứng dụng web có giao diện đơn giản với một số mẫu cài sẵn và các tính năng kéo và thả. Mặc dù Easel.ly hiện vẫn đang ở chế độ beta, nhưng nó đã có hơn 130,000 hình ảnh do người dùng tạo trên máy chủ của mình.

4. Vizualize.me

VIsualize.me

Vizualize.me giúp tạo đồ họa thông tin tuyệt đẹp về các cá nhân (vâng, do đó có tên là Vizualize Me). Đó là một công cụ thú vị để sử dụng và nó tạo ra sơ yếu lý lịch hoặc hồ sơ tuyệt đẹp chỉ trong vài cú nhấp chuột. Trong trường hợp bạn đang sử dụng LinkedIn, bạn thực sự nên thử điều này - công cụ này có thể liên kết với hồ sơ LinkedIn của bạn và tạo ra đồ họa tuyệt đẹp dựa trên dữ liệu của bạn.

5. Hohli

Hohli

Bạn cần một trình tạo biểu đồ đơn giản? Sau đó Hohli là nơi để ghé thăm. Ứng dụng web này hỗ trợ nhiều loại biểu đồ khác nhau với mười hai kích thước khác nhau - tất cả những gì người dùng cần làm là nhập dữ liệu và chi tiết thiết kế.

6. Piktochart

Piktochart là một công cụ đồ họa thông tin dựa trên mẫu giúp các nhà thiết kế không tạo ra đồ họa và biểu đồ đẹp mắt.

Công cụ này hỗ trợ các tính năng kéo và thả và nó cung cấp nhiều lựa chọn trong các mẫu, biểu tượng, vectơ và hình ảnh được đặt trước. Nếu bạn đang tìm kiếm một công cụ đồ họa dễ dàng và không ngại trả một khoản phí nhỏ cho dịch vụ, Piktochart chắc chắn là một trong những lựa chọn tốt nhất của bạn.

 


 

Trước khi bạn bắt đầu: Cảm hứng Infographics

Vì vậy, bạn đã sẵn sàng để tạo ra một số infographics của riêng bạn? Chờ đợi. Chúng tôi vẫn còn một chút nữa để đến đây.

Dưới đây là một số thông tin và biểu đồ phổ biến nhất được chụp từ Internet.

Tôi khá chắc chắn rằng bạn đã từng thấy một số trong số chúng trên mạng xã hội trước đây - điều đó chứng tỏ rằng đồ họa đẹp với các que dữ liệu có ý nghĩa!

Ngoài ra, có những lý do tại sao các phòng trưng bày infographics bị buôn bán quá nhiều trong những ngày này.

Bằng cách tham khảo các tác phẩm của người khác, chúng ta có thể tìm hiểu những gì hoạt động tốt với khán giả.

  • Kích thước trung bình cho một họa thông tin phổ biến là gì?
  • Chủ đề nào được khán giả hoan nghênh nhất?
  • Bạn có nên bao gồm nhiều dữ liệu nhất có thể vào biểu đồ của mình không?
  • Bao nhiêu điểm bullet bạn nên bao gồm trong infographics của bạn?
  • Điều gì làm cho đồ họa thông dụng này trở nên phổ biến?

Ví dụ thực tế: Các loại Infographic

Đây là những câu hỏi cần hỏi khi bạn duyệt qua các mẫu.

Đồ uống cà phê được minh họa

Đồ uống cà phê được minh họa
nguồn: lokeshdhakar.com

Hướng dẫn thực địa cho Fan Boys 

Hướng dẫn về Fan World Fan trên thế giới
nguồn: PC World

Bia tốt nhất ở Mỹ 2008

Bia tốt nhất ở Mỹ
nguồn: Mikewithart.com

Bảng tuần hoàn các kiểu chữ

Bảng kiểu chữ

Bailout Tracker

Bailout Tracker
nguồn: New York Times

Sự phát triển của điện thoại

Infographics Timeline
Nguồn: Pow Wow ngay

 

Kiểm tra đồ thị

đồ họa họa thông tin
Nguồn: Quảng trường Bốn

Đào sâu hơn

Tôi đã xem qua hàng tá blog và trang web thú vị liên quan đến chủ đề của chúng tôi khi tôi thực hiện nghiên cứu của mình cho bài đăng này. Nghiêm túc mà nói, có quá nhiều thứ để đọc, vừa học vừa chơi! Tôi chưa bao giờ biết rằng có rất nhiều dữ liệu có sẵn miễn phí trên Gap Minder và Thế giới tốt hơn Flux; Tôi đã đọc rất nhiều trên các trang web / blog thông tin như UX Booth (không hoàn toàn liên quan đến hiển thị dữ liệu, nhưng có rất nhiều bài viết hữu ích về cách trực quan hóa cải thiện trải nghiệm người dùng web), Sơ đồ độngDữ liệu chảy; và tôi vô cùng ngưỡng mộ tất cả các tác phẩm tuyệt đẹp được trưng bày trên Bảng Pinterest của Randy và  Biểu đồ Khiêu dâm.

Nếu bạn chỉ đơn thuần bắt đầu hiển thị dữ liệu, tôi khuyên bạn nên truy cập vào các trang web và blog được liệt kê ở trên.

Nếu bạn chưa tận dụng sức mạnh của trực quan hóa dữ liệu trong chiến dịch tiếp thị của mình, thì bây giờ là lúc để bắt đầu.

Về Jerry Low

Người sáng lập WebhostingSecretReveal.net (WHSR) - một đánh giá lưu trữ được người dùng 100,000 tin cậy và sử dụng. Hơn nhiều năm kinh nghiệm trong lĩnh vực lưu trữ web, tiếp thị liên kết và SEO. Cộng tác viên của ProBlogger.net, Business.com, SocialMediaToday.com, v.v.