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

Bài viết được viết bởi:
  • Các bài viết
  • Cập nhật: Tháng mười 10, 2019

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?

Công ty tiếp thị, Bell Pottinger, đã chứng kiến ​​mức tăng 55% trong ngân sách kinh doanh cho các mặt hàng kỹ thuật số như infographics.

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.

Đâ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ủ 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ề tốc độ trong các đá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ù infographics và biểu đồ có xu hướng thu hút sự chú ý từ những người dùng blogsphere và phương tiện truyền thông xã hội; họ nên làm nhiều hơn là chỉ xúc tiến thương hiệu - Infographics và biểu đồ được giả định để cung cấp dữ liệu nhàm chán và lộn xộn một cách thân thiện với người dùng ở nơi đầu tiên.

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 tôi không thể tổ chức hàng dữ liệu của chúng tôi theo hàng trên Bảng 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 nó bằng nhiều 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 trong việc thực hiện việc này: Biểu đồ hình tròn, biểu đồ, biểu đồ đường kẻ, biểu đồ, bản đồ nhiệt, biểu đồ lưu lượng, bảng tuần hoàn, v.v. Mỗi phương pháp này phù hợp hoàn hảo cho một số loại dữ liệu nhất định (và stinks nặng 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ó những 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ó các ứng dụng web dễ dàng không làm gì ngoài việc tạo ra các biểu đồ đường trục 2 đơ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ẽ biểu đồ và biểu đồ cho khung công tác Javascript jQuery. jqPlot sản xuất biểu đồ đường, thanh và bánh đẹp. Công cụ này đi kèm với một số tính năng hay như tạo điểm tương tác có thể được điều chỉnh bởi người dùng trên trình duyệt web. Tuy nhiên, điều đáng chú ý là 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 bên 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ủ của IBM, nhiều Eyes không chỉ hiển thị 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 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ản trình bày và infographics 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ụ để giao tiếp tốt hơn thông qua đồ họa và thuyết trình tương tác.

KHAI THÁC. Vách ngăn

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 đặt trước và tính năng kéo và thả. Mặc dù Easel.ly 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 nó.

4. Vizualize.me

VIsualize.me

Vizualize.me giúp tạo ra các infographics đẹp về các cá nhân (vâng, do đó, tên Vizualize Me). Đây là một công cụ thú vị để chơi và nó tạo ra sơ yếu lý lịch hoặc hồ sơ đẹp chỉ trong vài cú nhấp chuột. Trong trường hợp bạn đang ở trên LinkedIn, bạn thực sự nên thử điều này - công cụ 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. Các ứng dụng web này hỗ trợ nhiều loại biểu đồ khác nhau trong 12 kích cỡ khác nhau - tất cả người dùng cần truy cập là chìa khóa trong 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 đã thấy một số người trong số họ trên các mạng truyền thông xã hội trong quá khứ - trong đó chứng minh rằng đồ họa đẹp với gậy 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 đã gặp phải hàng tá blog và trang web thú vị liên quan đến chủ đề của chúng tôi khi tôi đang nghiên cứu bài đăng này. Nghiêm túc, có rất nhiều thứ để đọc và học và chơi với! Tôi không bao giờ biết có rất nhiều dữ liệu có sẵn một cách tự do Gap MinderThế 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ơ đồ động, Dữ liệu chảy; và tôi rất ngưỡng mộ tất cả các tác phẩm tuyệt vời được hiển thị trên Bảng Pinterest của RandyBiể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 không tận dụng sức mạnh của hình ảnh hóa dữ liệu trong chiến dịch tiếp thị của mình, 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.