بهترین راه برای ساخت اینفوگرافیک های تعاملی چیست؟ بهترین نمونه های استفاده از اینفوگرافیک های تعاملی در صفحات فرود

احتمالاً متوجه تغییر گسترده ای در دنیای آنلاین از محتوای متنی به محتوای بصری شده اید.

نمی توان منکر قدرت تصاویر در اینترنت و زندگی روزمره ما شد. در یوتیوب و اینستاگرام، محتوای بصری غالب است. یوتیوب سومین سایت پربازدید در وب است که روزانه بیش از 80 میلیون عکس در اینستاگرام پست می شود.

پست‌ها و مقاله‌های وبلاگ در صورتی که دارای تصاویر رنگی، سرصفحه یا تصاویر کوچک باشند 80 درصد بیشتر «مصرف‌پذیر» هستند و اگر سایتی از ثانیه‌های اول توجه آن‌ها را جلب نکند، بیش از 15 ثانیه زمان صرف نمی‌کنند.

اینفوگرافیک ها در بین مخاطبان و فروشندگان محبوبیت دارند و امروزه 800 درصد بیشتر از سال 2012 برای مردم جالب هستند.

علاوه بر این، محتوا با سرعت هشدار دهنده ای تولید می شود - 60٪ از بازاریابان حداقل هر روز یک بخش کوچک از محتوای جدید تولید می کنند! در مقاله مروری می توانید اطلاعات بیشتری کسب کنید.

هر چه بیشتر و بیشتر افراد محتوا تولید می کنند، چیزی مشخص می شود: برای دیده شدن، باید متمایز شوید.

به طور طبیعی، بازاریابان محتوا در حال حاضر به آینده محتوای بصری فکر می کنند، متوجه می شوند که اکنون چه کاری می توانند انجام دهند، چه کاری می توانند انجام دهند، و چه فناوری های جدیدی در حال حاضر در افق هستند. این نوع تفکر رو به جلو چیزی است که می تواند تمام تلاش های بازاریابی محتوای شما را شکست دهد یا شکست دهد. شما باید خود را وفق دهید وگرنه غرق خواهید شد.

با محتوای بصری مانند اینفوگرافیک، بازاریابان به طور منحصربه‌فردی در موقعیتی منحصر به فرد قرار می‌گیرند تا با نزدیک‌تر شدن آینده، آینده را ببینند. شرکت ها، طراحان گرافیک و بازاریابان همگی شروع به استفاده از اینفوگرافیک ها کرده اند - آنها را به روز می کنند تا برای مخاطبان خود جذاب تر شوند. حتی اگر قبلاً به طور منظم اینفوگرافیک‌ها را «فقط پست می‌کنید»، هرگز زود نیست که درباره روندهایی که به تازگی شروع به توسعه کرده‌اند بدانید، همانطور که برای دانستن نحوه پیاده‌سازی آن‌ها در استراتژی‌های بازاریابی محتوای خود خیلی زود نیست.

اگر می خواهید به آینده نگاه کنید و شاید حتی قبل از دیگران چند ترفند یاد بگیرید، اکنون وقت آن است!

در اینجا سه ​​نوع اینفوگرافیک وجود دارد که در آینده (نزدیک) رایج ترین آنها خواهند بود.

اگر به دنبال یک ابزار اینفوگرافیک جالب هستید، توصیه می کنم Visme را بررسی کنید. برای شروع، آنها یک حساب کاربری رایگان و ویژگی های مفید عالی برای افراد غیر طراحی ارائه می دهند. اکنون می توانید یک حساب کاربری رایگان دریافت کنید.

1. اینفوگرافیک های تعاملی

در حالی که ما زیبایی وب سایت های تعاملی و بازی های آسان برای استفاده را می بینیم، اینفوگرافیک های تعاملی هنوز در زمینه خود نسبتاً جدید هستند. مانند اینفوگرافیک ها، مشخصاً حاوی اطلاعاتی هستند و معمولاً پویا هستند. اما استفاده از عناصر تعاملی به کاربران امکان ارتباط با اطلاعات و ایجاد اطلاعات خود را می دهد.

صرف نظر از کسب‌وکار، محصول، خدمات یا پیام‌تان، می‌توانید اینفوگرافیک‌های تعاملی ایجاد کنید که به افراد امکان می‌دهد به خود امتیاز دهند (مثلاً «BMI خود را اینجا محاسبه کنید»). کاربران همچنین می توانند بر روی اطلاعات مربوطه کلیک کنند، که آنها را به یک منبع هدفمندتر ارسال می کند یا به صفحه فرود باز می گردد و در نتیجه ترافیک ایجاد می کند. این یک راه بسیار سازگار و سرگرم کننده برای جذب مخاطب است.

بسیاری از بازاریابان قبلاً با این نوع اینفوگرافیک سازگار شده اند و به سرعت منتقل می شود. اما در عین حال، بسیاری، با این وجود، آن را به عنوان مبنا قرار می دهند اینفوگرافیک ساده:

.... فقط تصور کنید با اینفوگرافیک های تعاملی چه کارهای دیگری می توانید انجام دهید.

شما ممکن است امتحان کنید:

  • استفاده از تکنیک های اسکرول که تصاویر یا اشکال را از پس زمینه متمایز می کند
  • پنجره‌های بازشو بسازید که نواحی متن را گسترش می‌دهد
  • تصاویر شناور یا آمار وقتی روی آنها کلیک می کنید
  • تبدیل اینفوگرافیک خود به صفحات متعددی که کاربران می توانند مشاهده کنند

برای بیشتر مثال مفصلاینفوگرافیک تعاملی، به این یکی نگاه کنید:

برای اینکه اینفوگرافیک خود بسیار تعاملی باشد (با اسکرول، پنجره های بازشو و غیره) باید کمی در مورد HTML5 یا CSS یاد بگیرید یا شخص دیگری را استخدام کنید تا آن را برای شما کشف کند.

با وجود تلاش اضافی، پاداش شما یک محتوای منحصر به فرد، جذاب و موثر خواهد بود.

چرا باید در آینده نزدیک سعی کنید اینفوگرافیک را پیاده سازی کنید؟

  • مخاطبان شما را تشویق می کند تا با محتوای شما درگیر شوند و با آن به اشتراک بگذارند.
  • این باعث ایجاد ترافیک (از طریق پیوندها) می شود
  • این به مخاطبان شما ثابت می کند که شما مبتکر، مدبر و متعهد به ارائه محتوای به موقع و جذاب هستید.
  • سطوحی از اینفوگرافیک های تعاملی وجود دارد که توسعه آن را هدایت می کند.

2. ویدئو و GIF جاسازی شده

این یکی دیگر از انواع اینفوگرافیک است که امروزه بیشتر و بیشتر می بینیم. اینفوگرافیک‌هایی که ویدیوهای کوتاه یا حتی GIF (فرمت تبادل گرافیکی) ارائه می‌دهند، راهی عالی برای جلب توجه و متمایز کردن اینفوگرافیک شما از سایرین است. در حالی که این پلتفرم ها را محدود می کند، می توانید اینفوگرافیک های خود را در زمان واقعی به اشتراک بگذارید.

بسیاری از ابزارهای ساده اینفوگرافیک مانند Easel.ly گزینه "ویدیوی یوتیوب جاسازی شده" را ارائه می دهند، یا می توانید با استفاده از یک لایه ویدئو، به اینفوگرافیک هایی که در فتوشاپ ایجاد می کنید، ویدیو اضافه کنید. حتی می توانید یک ویدیو به آن اضافه کنید اسلاید پاورپوینتکه می توانید به اینفوگرافیک نیز تبدیل کنید.

علاوه بر این، می‌توانید میلیون‌ها فایل GIF را در شبکه پیدا کنید و به همان روش درج کنید. نکته مهم در اینجا این است که شما باید اینفوگرافیک خود را به عنوان یک URL توزیع کنید تا مطمئن شوید که به درستی در سایت شما تعبیه شده است. شما نمی توانید چنین اینفوگرافیک ها را در قالب jpeg. یا PDF توزیع یا ذخیره کنید. بدون شک، با محبوبیت بیشتر و بیشتر، ابزارهای دیگری برای درج ویدیو و GIF وجود خواهد داشت تا فرآیند را آسان تر کند.

اما اگر می‌خواهید از این نوع اینفوگرافیک استفاده کنید قبل از اینکه دیگران، حتی سگ‌هایشان، نحوه انجام آن را بیاموزند، اکنون با ابزارهایی که آنلاین پیدا می‌کنید شروع کنید.

اگر می‌خواهید آن را به سطح بعدی ببرید، می‌توانید از اینفوگرافیکی که قبلاً دارید یک ویدیو بسازید. این یک فرصت عالی برای دیده شدن در یوتیوب، اینستاگرام، و حتی در پلتفرم‌های ویدئویی مانند Vimeo، Snapchat و دیگران است. ویدیوی زیر نمونه ای عالی از نحوه تبدیل اینفوگرافیک به ویدیو است.

چرا فیلم ها یا GIF ها را در اینفوگرافیک جاسازی کنیم؟

  • این یک عنصر شگفتی را به شما می دهد - مردم انتظار ندارند تصویر شروع به حرکت کند!
  • این بسیار سرگرم کننده و اصلی است، که شانس تعامل افراد و به اشتراک گذاری اینفوگرافیک شما را افزایش می دهد.
  • این راه خوبمنحصر به فرد بودن برند خود را به همه نشان دهید

3. اینفوگرافیک متحرک

اینفوگرافیک های متحرک تعداد زیادی مدل بصری دارند و نیاز به توجه زیادی دارند. زمانی که کاربر یک صفحه را مشاهده می کند، معمولاً انتظار ندارد چیزی جابجا شود، بنابراین اگر قبل از دیگران همه این تکنیک ها را یاد بگیرید، ایده خوبی است.

با توجه به این واقعیت که بسیاری از اینفوگرافیک های متحرک بسیار پیچیده هستند و ممکن است به برخی نیاز داشته باشند طراحی گرافیک، کد نویسی، و / یا دانش نرم افزار، آنها بسیار مورد توجه هستند.

در اینجا یک مثال از آنچه من در مورد آن صحبت می کنم آورده شده است:

اگر می‌خواهید درباره نحوه ایجاد اینفوگرافیک متحرک بیشتر بدانید، این اینفوگرافیک را از Tabletop Whale بررسی کنید. همچنین می توانید پیدا کنید خدمات مختلفکه به ایجاد اینفوگرافیک هایی از این دست کمک می کند. در هر صورت، این یکی از دشوارترین فرآیندها در تکامل اینفوگرافیک است.

چرا باید زمان، انرژی و/یا پول خود را صرف ایجاد اینفوگرافیک های متحرک کنید؟

  • در واقع شما را از جمعیت متمایز می کند، زیرا همه به این نوع دسترسی ندارند نرم افزاریا محتوا
  • چند سال دیگر این امر عادی خواهد شد - شما یکی از اولین کسانی خواهید بود که این کار را انجام می دهید!
  • انیمیشن اطلاعات داخل اینفوگرافیک را به یاد ماندنی تر می کند
  • این به کاربران شما انگیزه می دهد که با شما کار کنند.

همه اینها علمی تخیلی نیست.

ممکن است خیلی فنی به نظر برسد و در حال حاضر چیزی دور از دسترس شما به نظر برسد، اما به احتمال زیاد این نوع اینفوگرافیک ها در عرض 2 تا 3 سال بسیار رایج خواهند شد. ما در حال حاضر شاهد پیشرفت قدرتمندی در اینفوگرافیک های متحرک و اینفوگرافیک های GIF هستیم، به خصوص که محبوبیت GIF همچنان در حال افزایش است. اینفوگرافیک ها در حال تبدیل شدن به یکی از پرمصرف ترین و رایج ترین انواع محتوا در اینترنت هستند. چرا؟ زیرا مغز برای دریافت و پردازش مقدار یک نماد تنها به 250 میلی ثانیه نیاز دارد.

اگر یک فرد معمولی حدود 15 ثانیه را در یک وب سایت صرف کند و سپس شروع به حوصله کند، مطمئناً می خواهید هر چیزی را که ممکن است او را به تأخیر بیندازد - یا حداقل در 15 ثانیه یا کمتر پیامی دریافت کنید. برخی از مطالعات حتی ثابت کرده اند که افراد نمی توانند بیش از 8 ثانیه روی چیزی تمرکز کنند و این رقم هر سال کاهش می یابد.

این دلیل و احتمالاً محصول جانبی نیاز دائمی ما به اطلاعات است. ما در عصر اطلاعات زندگی می کنیم و همه اطلاعات در دسترس ماست. اما این بدان معناست که هرچه افراد بیشتر سعی کنند پیام ها را به اشتراک بگذارند و به هر سؤال احتمالی پاسخ دهند، محتوای تولید شده بیشتر به نویز پس زمینه تبدیل می شود.

اگر امروز در دسترس بودن اینفوگرافیک ها یک شاخص است، به زودی آنها در همه جا خواهند بود. این به معنای تغییرات جدید در کار شما است. هیچ کمپین بازاریابی در تاریخ با انجام یک کار مشابه همیشه موفق نبوده است.

ایده اینجا این است که بیشتر از یک تصویر jpeg در اینفوگرافیک ببینید. اینفوگرافیک ها را می توان با آن سازگار کرد محیط های مختلفو بر روی پلتفرم های مختلف مورد استفاده قرار گیرد. کارآفرینان و بازاریابان قبلاً پتانسیل این موضوع را دیده‌اند. و شما؟

در چند سال گذشته، اینفوگرافیک ها از تصاویر ایستا به تجربیات تعاملی غنی با عناصر انیمیشن و ویدیویی که با محتوای منحصر به فرد سازگار شده اند، تبدیل شده اند. دیگر محدود به قالب های از پیش ساخته شده و عمومی نیست. و مجموعه امروز حاوی بهترین اینفوگرافیک ها برای نشان دادن این است که یک تجربه جالب و آموزنده چگونه به نظر می رسد.

بیشتر اینفوگرافیک های این لیست برای نمایش انتخاب شده اند روش های مختلفکه با آن طراحان به تجسم داده ها نزدیک می شوند. با این حال، چندین "هیبرید" نیز در اینجا وجود دارد که نشان می دهد خطوط بین اینفوگرافیک و تجربیات چند رسانه ای غنی را محو می کند و در عین حال محتوای جذاب و داستان های جذاب را در صفحات فرود ایجاد می کند. انحراف از اشکال سنتیبه این معنی است که ما وارد یک چشم‌انداز رسانه‌ای پیچیده‌تر شده‌ایم، و این نوع آزمایش با فناوری و داستان‌گویی است که برای شکل‌دهی به آینده طراحی گرافیک بسیار مهم است.

1. نقشه بادها

نقشه باد طرحی دیدنی است که جهت و سرعت باد بر فراز ایالات متحده را نشان می دهد. این طرح یک هدف هنری دارد تا سودمند، و این عالی است: خیلی خوب است که بنشینید و رشته های نازک را که در اطراف نقشه می چرخند تماشا کنید. یک مثال ساده و در عین حال سنجیده از این که چگونه اینفوگرافیک ها مسیرهای اشکال را نشان می دهند از انیمیشن و موشن گرافیک بهره می برند.

2. در حال پرواز

در سال 2014، گاردین یک اینفوگرافیک در پرواز راه‌اندازی کرد که داده‌های زمان واقعی پروازهای تجاری را نشان می‌دهد (به نظر می‌رسد که اطلاعات در حال حاضر به‌روزرسانی نشده است، که حیف است)، و همچنین درسی در مورد تاریخچه هوانوردی. گفتگوهای آرام بین خدمه پرواز در شروع نمایش تعاملی فضای خاصی را ایجاد می کند. به نظر می رسد اینفوگرافیک ها این روزها کم کم به تجربه های سینمایی تبدیل می شوند. حداقل "در پرواز" به این سمت اشاره می کند ...

3. شماره ماه را بگیرید

در اینفوگرافیک Dial A Moon اتفاق زیادی نمی افتد، اما به خوبی به هدف خود عمل می کند. در سال 2015، به لطف ناسا، اینفوگرافیک فاز قمری هر ساعت به روز می شد و شما نمی توانستید برای جستجوی این اطلاعات مرموز به گوگل بروید. اکنون می توانید با وارد کردن دستی ماه، روز و ساعت، تصاویر را مشاهده کنید.

4. روز با پلوتون

مجله نیچر اینفوگرافیک های جالب بسیاری را برای مخاطبان علاقه مند به علم خود منتشر می کند. یکی از آنها درباره پرواز معروف یک فضاپیما در نزدیکی پلوتون (24 ساعت از پلوتون) بود. اینفوگرافیک ها حاوی اطلاعات متنی زیادی بودند، اما تصاویر بصری درک آسانی از جالب ترین آنها، از ساختار یک سیاره کوتوله گرفته تا شکل گیری قمرهای آن، ارائه می کرد. اکنون بخش متن و همچنین دو فیلم متحرک از اینفوگرافیک در اینترنت موجود است.

5. چگونه خانه های آمریکایی تغییر کردند

در رویای بزرگ آمریکایی که از طریق تکامل در سبک خانه منعکس شده است، سفر کنید. این اینفوگرافیک به خوبی نشان داده شده به شما این امکان را می دهد که پشت فرمان ماشین بنشینید (همچنین ظاهر آن را با پیمایش برای همگام شدن با دوران تغییر می دهد) و از دهه 1900 تا 2000 حرکت کنید و برای چندین دهه از کنار ساختمان های محبوب عبور کنید. در طول مسیر، با انبوهی از مواد مفید (از جمله شرایط سیاسی-اجتماعی آن زمان، و همچنین روند مد) مواجه خواهید شد و همه اینها با سوالی به پایان می رسد که شما را وادار می کند آینده خانه آمریکایی را تصور کنید. اینفوگرافیک Decades Of American Homes یک نمونه عالی از اسکرول افقی است و در اینجا جا می گیرد.

6. تکامل تجزیه و تحلیل بازاریابی

در اینفوگرافیک Evolution of Insight، شرکت تحقیقاتی کاربر هوشمند Vision Critical، تحولات بازار فناوری بازاریابی در سراسر جهان را از دهه 1890 تا به امروز دنبال می‌کند. عملکرد آن مشابه اینفوگرافیک چگونه خانه های آمریکایی تغییر کرد، عمل می کند و بنابراین به شما امکان می دهد اثربخشی استفاده از یک جدول زمانی تعاملی را برای دو داستان بسیار متفاوت مقایسه کنید. اینفوگرافی Decades Of American Homes این مزیت را دارد که دیدن خانه‌ها در حین رانندگی بسیار شهودی‌تر از سفر به تحلیل‌های بزرگ آمریکایی است. اینفوگرافیک های خوب با در نظر گرفتن محتوا ایجاد می شوند، نه پیرامون آن.

7. حقوق جامعه LGBT در سراسر جهان

گاردین با این اینفوگرافیک زیبا که وضعیت حقوقی حقوق دگرباشان جنسی را در طیفی از موضوعات (ازدواج، تبعیض در محل کار، جنایات ناشی از نفرت و غیره) در هر کشوری در جهان توضیح می‌دهد، جایگاه دیگری را در فهرست ما کسب می‌کند. حرکت در یک نیم دایره راهی سریع و آسان برای مقایسه آمار بین آنها فراهم می کند کشورهای مختلفو ترکیب اینفوگرافیک وضعیت جهانی را در پیش زمینه در مرکز نگه می دارد. همچنین یک فراخوان قدرتمند برای اقدام در اینجا وجود دارد که هدف آن پر کردن شکاف بین آگاهی ساده و فعالیت است.

8. نابرابری قابل رفع است

یکی دیگر از نمونه های عالی اینفوگرافیک های تعاملی، نابرابری قابل رفع است، مخاطب را دعوت می کند تا خود را در مشکل غوطه ور کند و آن را عمیقاً شخصی کند. بیننده تضمین می‌کند که علاقه خود را به مطالبی که به او می‌گوید چقدر و چرا دستمزد کمتری دریافت می‌کند، از دست نمی‌دهد. با قرار دادن کاربر به بخشی از داستان، توسعه دهندگان کنجکاوی را برانگیخته و کاربر را از طریق تمام مراحل لازم و درست به سمت تماس برای اقدام (Call-To-Action) در پایان راهنمایی می کنند.

"ما اجازه دادیم این اتفاق بیفتد - اکنون چگونه می توانیم آن را برطرف کنیم؟"

9. خودتان را ترسیم کنید: چگونه درآمد خانوار شانس یک کودک برای رفتن به دانشگاه را پیش بینی می کند

بسیاری از اینفوگرافیک های موجود در این لیست از انیمیشن و تعامل برای ارائه یک تجربه غنی استفاده می کنند. از نظر بصری، این اینفوگرافیک از نیویورک تایمز (شما آن را ترسیم می‌کنید: چگونه درآمد خانواده شانس تحصیل کودکان را پیش‌بینی می‌کند) به قالب نمودار کلاسیک پایبند است، اما همچنین از بینش رفتار کاربر برای گسترش زمینه طراحی اینفوگرافیک مانند فعالانه و تعاملی استفاده می‌کند. تجسم. با درخواست از خوانندگان برای ترسیم منحنی خود، آنها عنصری از علاقه شخصی را معرفی می کنند و بنابراین اطلاعات بسیار ارزشمندی را در اختیار مردم قرار می دهند.

بدترین نتیجه نیست! محور عمودی درصد کودکانی است که به دانشگاه می روند. محور افقی - صدک درآمد والدین

10. آمریکایی ها چگونه می میرند

به جز تصویر عنوان، این مثال بیشتر از نمودارهای قدیمی خوب برای ارائه محتوا استفاده می کند. اما این به هیچ وجه خسته کننده نیست، زیرا کاربران می توانند به طور مستقل در داده ها با حرکت مکان نما در امتداد نمودارها حرکت کنند. برای مثال، مقایسه تعداد مرگ‌های ناشی از خودکشی در دهه 70 با امروز بسیار آسان‌تر می‌شود (نکته: اکنون در حال افزایش است)، یک نمودار ثابت این کار را به این خوبی انجام نمی‌دهد.

11.

نیویورک تایمز از زمانی که اولین پروژه خود را با نام "Snowfall" آغاز کرد، که مورد توجه و تحسین همگان قرار گرفت، شهرت خود را برای روزنامه نگاری چندرسانه ای پیشرفته حفظ کرده است. تیم ناشر از ترکیبی از طراحی اینفوگرافیک و داستان سرایی عمیق برای ایجاد یک تجربه بسیار جذاب استفاده می کند. آنها نمونه های واضح تری دارند، اما The Russia Left Behind اثری است که طنین خاصی ایجاد کرده است. اینفوگرافیک ها مانند یک تور تعاملی روسیه عمل می کنند (شما مسیر خود را روی نقشه طی می کنید).

12. اتومبیل های باند

اگر می خواهید با نگاه کردن به اتومبیل های جیمز باند با تاریخچه او آشنا شوید، از فروشنده اتومبیل بریتانیایی ایوانز هالشاو تشکر کنید - او چنین فرصتی را به شما داد. اینفوگرافیک تعاملی Bond Cars به ​​شما امکان می دهد مدل و طراحی هر یک از اتومبیل های Bond و همچنین برخی موارد اضافی را بررسی کنید. حقایق جالب... با استفاده از تاکتیک لغزنده در همه جا، می توانید خودرو را با تمام شکوه متالیک خود "آشکار" کنید (به طور پیش فرض فقط یک الگوی تک رنگ ارائه می شود). بنابراین نویسندگان با خلاقیت مشکل نیاز به گنجاندن عکس هایی را که کاملاً با زیبایی شناسی اینفوگرافیک مطابقت ندارند حل کردند.

13. رنگ های حرکت

Colors Of Motion مجموعه‌ای اینفوگرافیک است که فیلم‌ها را تنها با پالت رنگ آن‌ها که از ترکیب همه فریم‌ها مشتق شده است، تجزیه و تحلیل می‌کند. اگر تا به حال فکر کرده اید، اکنون پاسخ آن را دارید. عنوان را در پایگاه داده پیدا نمی کنید؟ فقط یک پیام به توسعه دهندگان ارسال کنید - آنها درخواست ها را می پذیرند.

14. مقبره پادشاهان در پرو

نشنال جئوگرافیک مجموعه نسبتاً چشمگیری از آنچه آنها آن را "گرافیک های تعاملی" می نامند (که بیشتر آنها با توضیحات متنی مفصل همراه هستند، مانند ستون تراژان، برای مثال) دارد، اما ما این مثال نسبتاً ساده را برای برجسته کردن آن انتخاب کردیم. تکنیک ها در اینفوگرافیک های تعاملی واقعا موثر هستند. "مقبره سلطنتی واری" (مقبره سلطنتی واری پرو) ویژگی های دفن یک نجیب زاده آن زمان را نشان می دهد. تمرکز از پیچیدن مومیایی به دکوراسیون و موقعیت آن تغییر می کند. با تقسیم اطلاعات به قطعات کوچک و اجازه دادن به کاربر برای حرکت بین آنها، گرافیک های تعاملی از موذیانه ترین دام ها جلوگیری می کند: اضافه بار داده ها و جلوههای بصری... علاوه بر این، هر تعامل بعدی تجربه را گسترش می‌دهد، و آن را بسیار بیشتر از زمانی که همه چیز به یکباره ارائه می‌شد، پاداش می‌دهد. مغز ما مکانیزمی دارد که محرک های سرکوب کننده را رد می کند و نوع داده شدهتعامل به یک راه حل عالی برای کاربر تبدیل می شود و جذب اطلاعات را آسان می کند.

15. رفراندوم اسکاتلند چیست؟ توضیح برای غیر انگلیسی ها

گاردین، مانند نیویورک تایمز، بر روزنامه‌نگاری چندرسانه‌ای متکی است و ویدیوی آن‌ها با یکی از کارکردهای اصلی اینفوگرافیک کنار می‌آید: دادن اطلاعات حجیم به شکل قابل قبولی. برای بسیاری از ما در خارج از بریتانیا، همه پرسی موضوع بسیار گیج کننده ای است. خوشبختانه، این ویدیو (رفراندم اسکاتلندی برای غیر بریتانیایی ها توضیح داده شده است) به شما کمک می کند تا سریعاً در مورد او بدانید. جنبه های مهمبدون نیاز به فرو رفتن عمیق در تاریخ.

16. بهداشت عمومی

آتلانتیک وظیفه داشت چشم اندازی برای بهبود سلامت عمومی ایجاد کند. به آزمایشگاه حقیقت دستور داد تا مجموعه مقالات 3 قسمتی بهداشت جمعیت را به داستان سرایی دیجیتال تبدیل کند. هدف اصلی هنرمند حفظ اسکرول طبیعی سند و تجربه عادی خواندن کاربر، در عین ایجاد تجربه ای متفاوت از دیدگاه بصری بود. آن‌ها ابزارها و استراتژی‌هایی را از سینما به عاریت گرفتند تا دید خود را زنده کنند، اما همچنین بر مجموعه‌ای از اصول طراحی برای حمایت از خوانایی به عنوان یک قانون کلیدی تمرکز کردند.

17. دانه های جوهو

قهوه‌ساز اتریشی جوهو یک تجربه چندرسانه‌ای چشمگیر به نام Joho's Bean ایجاد کرد تا داستان منشأ دانه‌های قهوه را بیان کند. این روایت به طور هماهنگ مواد صوتی، تصویری و عکاسی را با هم ترکیب می‌کند که تقریباً تمام حواس کاربر را درگیر می‌کند. چهچهه‌ی پرندگان. ، صدای دانه های قهوه برشته شده کیسه ای و سر و صدای خیابان های شلوغ و ترافیک شهر.

Joho's شما را به سفری می برد و منشا دانه های قهوه خود را توضیح می دهد

18. جاده اولیه

مسیر وحشی است آزمایش تعاملی، داستان سفر تولید شده با Canvas. عنصر اصلی نقشه است که هنگام پیمایش صفحه، مسیر روی نقشه را متحرک می کند. این پروژه ممکن است در همه مرورگرها کار نکند. اما با مقاله ای همراه است که تمام فناوری های پشت صحنه برای ایجاد اینفوگرافیک را توضیح می دهد.

19.

پوشش گاردین (نتایج انتخاباتی زنده) از انتخابات ریاست جمهوری 2016 ایالات متحده، یک عنصر سرگرم کننده را به موضوع جدی درصدها و مراکز رای گیری وارد کرد. اینفوگرافیک های تعاملی آراء را در چهار ایالت ردیابی کردند. به طور پیش فرض، نمودار نتایج را برای کل کشور نشان می داد و اگر کاربر مکان نما را روی هر منطقه ای از نقشه قرار می داد، نشان داده می شد که نامزدها چه اعدادی را در آنجا تایپ کرده اند. نامزدهای ریاست جمهوری به عنوان آواتارهای پیکسلی خنده دار معرفی شدند. همانطور که اینفوگرافیک ها در زمان زنده به روز می شدند، مردان کوچک ایالت هایی را که در آن برنده شدند رنگ آمیزی کردند. هر از گاهی، یک نقل قول از نامزد در حباب در کنار نامزد ظاهر می شود.

انعکاس نتایج انتخابات در زمان واقعی

آینده تجسم داده ها تعامل است.

اما چگونه می توان اینفوگرافیک های تعاملی واقعا خیره کننده ایجاد کرد؟

اینفوگرافیک ها همه جا هستند و اخیراً به طور فزاینده ای تعاملی شده اند.

در مقاله امروز، اسرار ایجاد اینفوگرافیک های تعاملی و همچنین لینک هایی به منابع مفید را با شما در میان می گذاریم.

1. روانشناسی را درک کنید

قبل از ایجاد یک اینفوگرافیک تعاملی، مهم است که بدانید چرا می خواهید آن را داشته باشید.

همانطور که در این اینفوگرافیک توضیح داده شده است، مردم اطلاعات بصری را بهتر درک می کنند. اگر ارائه ای حاوی تصاویر جذاب باشد، احتمال خواندن، درک و حفظ آن بسیار بیشتر است. هست یک ابزار موثریادگیری، اما می تواند حتی بهتر شود.

یادگیری جنبشی یک جایگزین عالی است زیرا انسان اطلاعات را از طریق اعمال فیزیکی بهتر جذب می کند.

به همین دلیل است که تعامل را به آن اضافه می کنیم منطقه امیدوار کنندهتجسم ها می توانند به شما در ایجاد اینفوگرافیک های به یاد ماندنی تر و موثرتر کمک کنند.

این ترکیب رویکردهای بصری و جنبشی، اینفوگرافیک های متحرک را به محتوای آینده تبدیل می کند. البته برای برخی از تم ها بهتر است از عناصر تعاملی استفاده نشود، اما در بیشتر موارد فقط باعث بهبود محتوا می شوند.

حرکت به اطلاعات معنا می بخشد، به کاربر اجازه می دهد تا تجربه را دستکاری کند، و تخیل را به گونه ای درگیر می کند که اینفوگرافیک ایستا نمی تواند.

2. افکت های اسکرول را اضافه کنید

ترفند واقعیت مجازی این است که برای دیگران شما مانند یک احمق به نظر می رسید.

Cardboard Design Lab Google یک «آموزش» خوب برای طراحان مشتاق واقعیت مجازی است

اینفوگرافیک ها مانند یک بازی ماجراجویی هستند

مشکل Unity این است که انجام یک کار خوب در وب آسان نیست.

واقعیت مجازی برای چشمان شما مانند هدفون است

واقعیت مجازی به یک محیط امن نیاز دارد، شما نمی توانید در حال حرکت وارد آن شوید. این امکانات VR را محدود می کند

جلسه را صبح تعطیل کرد آرچی تسهاز نیویورک تایمز با موضوع تحریک آمیز "چرا NYT کمتر تعاملی کار می کند".

کار NYT بر اساس سه قانون داستان سرایی تصویری است:

  1. اگر خواننده نیاز به کلیک کردن داشته باشد، نه پیمایش، باید اتفاقی غیرعادی بیفتد.
  2. فرض کنید که راهنمای ابزار و هر افکت شناور دیگر هرگز توسط کسی دیده نخواهد شد. اگر محتوا مهم است، آن را طوری بسازید که خواننده فوراً آن را ببیند.
  3. اگر می‌خواهید چیزی تعاملی بسازید، به یاد داشته باشید - کار کردن آن روی همه پلتفرم‌ها گران است.

برای اینکه همه چیز روی دسکتاپ و موبایل کار کند، باید 2 یا 3 بار گرافیک خود را دوباره ترسیم کنید

چگونه این قوانین رویکرد NYT را تغییر داد:

  1. اکثر رندرها اکنون ثابت هستند
  2. متن های بیشتر
  3. اگر به حرکت در تصویر نیاز دارید، در حین پیمایش ظاهر می شود

(نکته چهارم می گوید که آنها هنوز مشغول کار تعاملی هستند. اما حالا دلیل آن باید بسیار معنی دار باشد).

ما مراحل "چند مرحله ای" را انجام دادیم. کاربران در مرحله 3 متوقف شدند. خوانندگان فقط می خواهند پیمایش کنند، نه کلیک کنند

Archie Tse: Scrolling Vs. کلیک کردن

به مدت 18 هفته، اندی کریبل اینفوگرافیک ها و داده ها را هر یکشنبه شب در VizWiz منتشر می کند. وظیفه این است که در طول دوشنبه حدود یک ساعت زمان اختصاص دهید، به سرعت تجسم را تجزیه و تحلیل کنید و نسخه خود را بسازید.

در زیر نتایج هفته گذشته - برده داری در قرن بیست و یکم را منتشر می کنیم.

#MakeoverMonday اثر اندی کریبل. توصیف همراه با جزئیاتو تعاملی - در وبلاگ اندی:

#MakeoverMonday اثر اندی کاتگریو. توضیحات مفصل و تعاملی - در وبلاگ اندی:

همچنین فهمیدم که 51 درصد از مردم جهان از من جوانتر هستند و 63 درصد در روسیه مسن تر هستند و شانس من برای مردن در حال حاضر چندان زیاد نیست. اعداد ناگهان "آمار" نبودند و به شدت به من ضربه زدند.

تجسم داده ها - از مجموعه داده های بزرگ با تعداد کمتر استفاده می کند خود ساختهبیش از طرح؛ بر اساس الگوریتم ها به عنوان مثال، کار تعاملی نیویورک تایمز.

هنرهای تجسمی - کدگذاری یک طرفه تجسم‌های زیبا اما رمزگشایی از آن دشوار است، مانند هنر محاسباتی کونال آناند.

مشکل چیه؟

در نتیجه، بسیاری از آثار فقط کاربران پیچیده را جذب می کنند، اما به خوانندگان ناآشنا اجازه نمی دهند ماهیت موضوع را درک کنند، در نتیجه به هدف تجسم - اطلاع رسانی به عموم آسیب می رساند. به همین دلیل است که درک و درک مسئله سواد بصری در زمینه تجسم بسیار مهم است.

"گرامر بصری" جدید روزنامه نگاری

در اینجا سه ​​نمونه وجود دارد که در حال آزمایش روش های ارائه روزنامه نگاری تعاملی هستند. آنها چشمگیر به نظر می رسند، اما تفسیر آنها می تواند برای بسیاری کار دلهره آور باشد.

حقوق همجنس گرایان در ایالات متحده، ایالت به ایالت

تعداد منابع داده در دسترس امروزه و ابزارهای پردازش آنها به خودی خود به وضوح نشان می دهد که بسیاری از مردم هرگز سعی نکرده اند در دنیای تجسم داده ها راحت باشند. و وقتی مطالب زیادی برای مطالعه وجود دارد، فقط یک سوال وجود دارد "از کجا شروع کنم؟"می تواند هر مبتدی را بترساند بنابراین بهترین کتابخانه ها کدامند و متخصصان چه توصیه هایی دارند؟ موضوع این مقاله خواهد بود.

صحبت در مورد تجسم داده ها بدون ذکر آن مانند صحبت کردن در مورد تاریخچه رایانه های شخصی و نگفتن یک کلمه در مورد استیو جابز است. D3 (Data Driven Documents) بدون اغراق مهمترین و غالب ترین کتابخانه جاوا اسکریپت منبع باز در بازار است که معمولاً برای ایجاد گرافیک های SVG استفاده می شود. SVG (گرافیک برداری مقیاس پذیر) به نوبه خود یک قالب است تصویر برداری، توسط مرورگرهای وب پشتیبانی می شود، اما قبلاً کمتر استفاده می شد.

کتابخانه D3 بیشتر محبوبیت خود را مدیون علاقه ناگهانی طراحان وب به SVG است که عمدتاً به دلیل برنده شدن است. گرافیک برداریبه صفحه نمایش های با وضوح بالا (به ویژه نمایشگرهای رتینا که در آن استفاده می شود) نگاه کنید دستگاه های اپل) که در حال رایج شدن هستند.

موریتز استفانر، کارشناس مستقل تجسم داده‌ها و مالک شرکت می‌گوید: «بیایید صادق باشیم، اگر چالش تجسم داده‌های مبتنی بر SVG است، پس همه کتابخانه‌های دیگر حتی به حل آن نزدیک نبودند. حقیقت و زیبایی... همچنین تعدادی پروژه جالب مبتنی بر D3 وجود دارد، مانند NVD3، که اجزای گرافیکی استاندارد را ارائه می‌کند - آماده استفاده اما قابل تنظیم. یا مثلاً Crossfilter یک ابزار عالی برای فیلتر کردن داده ها است.

اسکات موری، برنامه نویس، طراح و نویسنده کتاب تجسم داده های تعاملی برای وبمن با نظر قبلی موافقم: «D3 از این نظر بسیار قدرتمند است که از همه چیزهایی که مرورگرها برای ارائه دارند استفاده می کند. اگرچه این یک جنبه منفی دارد: اگر مرورگر چیزی را پشتیبانی نمی کند، به عنوان مثال، تصاویر سه بعدی مبتنی بر WebGL (از کتابخانه گرافیک وب انگلیسی)، D3 نیز از آن پشتیبانی نمی کند.

و اگرچه این کتابخانه واقعا جهانی است، اما هنوز اینطور نیست راه حل ایده آلبرای هر کاری اسکات موری می افزاید: «اشکال اصلی کتابخانه D3، به اصطلاح، این است که هیچ رویکرد رندر خاصی را تجویز نمی کند یا حتی پیشنهاد نمی کند. بنابراین واقعاً ابزاری برای بارگیری داده ها در مرورگر و سپس تولید اجزای DOM بر اساس آن داده ها است.

در حالی که D3 یک جعبه ابزار عالی برای تصاویر سفارشی است، اگر می خواهید یک نمودار استاندارد بدون کار بصری زیاد ایجاد کنید، ابزاری مانند وگا... Vega به عنوان یک چارچوب مبتنی بر D3، جایگزینی برای نمایش اجزای گرافیکی ارائه می دهد. با استفاده از Vega، می توانید داده های JSON مرکز روزنامه نگاری اروپا و پروژه روزنامه نگاری مبتنی بر داده را تجسم کنید. تاریخ دقیق دوره هنوز مشخص نیست، اما می توانید همین الان ثبت نام کنید.

در مدت پنج روز، شرکت کنندگان دوره می توانند یاد بگیرند که روزنامه نگاری داده چیست، چگونه کار می کند و چه مهارت های کلیدی را برای تبدیل شدن به یک متخصص در این زمینه نیاز دارید. دریابید که کجا به دنبال داده برای پشتیبانی از نمودارهای خود و نحوه یافتن ایده های جدید در داده ها باشید. هنر تبدیل داده های خسته کننده به یک داستان جذاب، اینفوگرافیک یا حتی تجسم تعاملی را بیاموزید. با اصول اولیه طراحی گرافیک که یک روزنامه نگار باید بداند آشنا شوید.

مدرسان دوره پنج نفر از کارشناسان برجسته جهان در روزنامه نگاری داده و تصویرسازی هستند.