آخرین باری که به یک وبسایت بدون تصویر مراجعه کردید، چه زمانی بوده؟
به عنوان یک طراح وب، استفاده از تصاویر را در وبسایت‌ها بسیار دوست دارم، به این دلیل که تصاویر در خاطره می‌مانند و یک کانال مستقیم برای ارتباط برقرار کردن با ذهن مخاطبین را برای‌م می‌سازند. همچنین روند پردازش تصاویر در ذهن انسان بسیار سریع‌تر از هر متنی اتفاق می‌افتد. دقیقا به همین دلیل است که شبکه‌های اجتماعی مبتنی بر تصاویر بسیار محبوب شده‌اند.
اما با ظهور دنیای وب ۲.۰ چیز دیگری نیز بوجود آمد. استفاده بسیار زیاد از تصاویر در سراسر دنیای وب، چیزی بود که طراحان وب را با مشکل مواجه ساخت. افزایش تعداد تصاویر در وبسایت باعث می‌شد که کارایی وبسایت کاهش پیدا کند و تجربه کاربری نتواند آنچنان باید و شاید خوب تحویل داده شود.
در این مقاله قصد داریم شما را با پنج نکته اساسی آشنا کنیم که با استفاده از آن میتوانید بر این مشکل فارغ بیایید.
۱. بالا بردن کارایی
وقتی که موضوع تصاویر در صفحات وب به میان می‌آید، محتوا، رزولوشن و استایل آن، اولین چیزهایی است که وارد ذهن انسان می‌شود. اما در حقیقت مهمترین نکته‌ای که در هنگام کار با تصاویر باید به ذهن‌تان خطور بکند، کارایی است. کارایی حتی از خود تصویر نیز مهمتر است. در دنیای وب جدید کاربران دوست ندارند برای بارگذاری یک تصویر مدت زمان زیادی را صبر بکنند.
به صورت کوتاه باید گفت که وبسایت حاوی تصاویر نباید کند باشد. برای هر ثانیه تاخیر در بارگذاری تصویر، ۷ درصد کاهش در نرخ تبدیلات اتفاق می‌افتد. این بدان معناست که یک وبسایت فروشگاه آنلاین که در هر ساعت ۱۰۰۰ دلار درآمد دارد، ۲۵۰ هزار دلار را در سال از دست می‌دهد.
وبسایت‌هایی مانند Ryanair و Marks & Spencer بدلیل داشتن مشکلات کارایی در وبسایت، به سرعت شکست خوردند. بنابراین مطمئن باشید که همواره وبسایت‌تان را براساس کارایی و فاکتورهای آن می‌سازید.
میتوانید برای بهتر کردن کارایی وبسایت‌تان این لینک از وبسایت راکت را مطالعه کنید.
۲. تصاویر به عنوان بخشی از طراحی
این موضوع شاید بسیار برای‌تان واضح باشد اما بسیاری از اوقات پشت چشم گذاشته شده است. تصاویر بخشی یکپارچه از فرایند طراحی است بنابراین باید همواره به آن‌ها توجه کرد. به این دلیل که طراحان یک هدف مشترک را پیاده‌سازی می‌کنند، در نهایت باید تصاویر و موارد مربوط جزوی از هدف اصلی شما باشد و آن را پشتیبانی بکند.
طراحی تصاویر برای کامل شدن
به یاد داشته باشید که هدف یک صفحه را شناسایی و اولویت بندی بکنید. هدف شما هر چه که باشد در یک صفحه و یا در یک بخش، تصاویر قرار کردن در آن قسمت باید هدف شما را دنبال کند.
به عنوان یک مثال، وبسایت Essentials در ابتدای صفحه فرود خود از یک تصویر استفاده کرده که به سرعت می‌تواند چشم کاربران را به خود جلب بکند. میتوانید در این وبسایت سازگاری تصویر با طراحی صفحه را به خوبی مشاهده بکنید.
در کنار اینکه سعی می‌کنید تصاویر و طراحی در کنار همدیگر سازگار باشند، سعی کنید که قواعد استفاده‌پذیری را در وبسایت‌تان نیز رعایت بکنید. سعی کنید استفاده‌پذیری را چه در سطح المان‌ها و چه در سطح تصاویر رعایت نمایید.
۳. بگذارید تصاویر و متون با همدیگر سازگار باشند
نمایش متن و تصویر در یک صفحه می‌تواند یک کار تا حدی چالش برانگیز و کمی سخت باشد. چالش اصلی اینجاست که سعی کنید تا یک بالانس خوب را بین متن و تصاویر برای وبسایت‌تان ایجاد بکنید.
قرار دادن متن روی پس‌زمینه‌های نرم
قرار دادن متن روی پس‌زمینه‌هایی با رنگ‌های نرم یکی از ساده‌ترین تکنیک‌ها برای رعایت کنتراست رنگی در یک طراحی است. وبسایت Indiegogo یک مثال بسیار خوب از این حالت است. در این وبسایت شما میتوانید عنوان و توضیحات را در یک صفحه به خوبی مشاهده کنید. متن در این طراحی به خوبی نمایش داده شده و هیچ مشکل بصری ایجاد نکرده است.
ترکیب تصاویر و متن
Airbnb برای برگه لیست خانه‌ها از یک ترکیب بسیار زیبا تصاویر و متون استفاده کرده است. تصاویر موجود در این برگه در داخل خود یکسری متون را قرار داده‌اند که این کار باعث می‌شود تا بتوان یک ترکیب بسیار زیبا را از این دو المان بوجود آورد.
البته به عنوان یک نکته برای دسترسی‌پذیری حتما بحث کنتراست رنگی را رعایت بکنید و متن را بدرستی روی قسمت‌های سازگار تصاویر قرار دهید. همچنین بهتر است تا برای تصاویر از alt استفاده بکنید.
ترکیب تصاویر و متون به عنوان یک واحد تعاملی تکی
اگر به این صفحه دقت کنید می بینید که متن و تصویر در یک قالب یکپارچه و همچنین تعاملی قرار گرفته است. میتوانید ببینید که قابلیت mouseover روی المان‌ها به خوبی قرار گرفته و تاثیرپذیری مستقیمی را بجای می‌گذارد.
نمایش تصویری درست در زمانی درست می‌تواند تاثیر بسیار خوب و مثبتی روی تجربه کاربری شما بگذارد.
۴. پیاده‌سازی لایه‌بندی درست
همانطور که می‌دانیم، تجربه کاربری بسیار به لایه‌بندی و شیوه چینش المان‌ها در کنار یکدیگر وابسته است. برای وبسایت‌هایی که فایل‌های چندرسانه‌ای زیادی دارند، معمولا بهترین قالب کاری گرید خواهد بود. این بدان دلیل است که شیوه نمایش تصاویر و المان‌های دیگر در این حالت بسیار مرتب‌تر و مینیمال‌تر است.
در زیر قصد دارم تا شما را با ۳ نوع گرید اصلی آشنا کنم:
گرید کلاسیک
یک گرید کلاسیک شامل یکسری تصاویر بند انگشتی از تصاویری بزرگ‌تر است که در کنار همدیگر و با یک اندازه ثابت قرار گرفته است. این شیوه از گرید حس هارمونی داشتن و مرتب بودن را القا می‌کند. یوتیوب و Dribbble از وبسایت‌هایی هستند که از این شیوه استفاده می‌کنند.
گرید نامرتب
معمولا از این شیوه گرید زمانی استفاده می‌شود که بخواهید نظر بازدیدکنندگان‌تان را به یکسری از تصاویر معطوف بکنید. برای مثال در این لینک شما نقش کلیدی چند تصویر ساده را در یک طراحی بزرگ میتوانید شاهد باشید. البته این شیوه از طراحی ممکن است گاهی اوقات مشکلات استفاده‌پذیری را به همراه داشته باشد.
گرید Masonry
در این شیوه از گرید، سعی می‌شود که تصاویر در یک مقیاس کوچکتر از اندازه خودشان به صورتی مرتب قرار بگیرند. برای نمایش تصاویر بسیار زیاد که از یک قاعده کلی پیروی نمی‌کنند استفاده از این حالت می‌تواند بسیار کاربردی باشد. پینترست و Google Art & Culture از جمله وبسایت‌هایی است که از این حالت استفاده می‌کنند.
5. افزودن موشن هدفمند
موشن گرافیک یا المان‌های متحرکی که در یک وبسایت قرار می‌گیرند آن را سر زنده‌تر می‌کنند. با این حال وقتی از موارد چند رسانه‌ای بسیاری استفاده می‌کنید، سعی کنید که همه چیز را در یک تعادل قرار دهید. برخی از بهترین رویکردها در این رابطه را میتوانید در گوگل متریال دیزاین ببینید. در زیر میتوانید چند نکته مهم را برای مدیریت این موضوع مشاهده بکنید:
تغییرات لایه‌بندی را اعلام کنید
تغییرات لایه‌بندی در وبسایت رویکردی است که معمولا با اسکرول کردن پیاده‌سازی می‌شود. با این حال این تغییرات نباید یک دفعه انجام بگیرند، بلکه شما باید از قدرت انیمیشن‌ها برای نمایش روند این تغییر استفاده کنید. اینگونه کاربران دقیق‌تر می‌توانند متوجه شوند. این مثال یک نمونه بارز از این حالت است.
بارگذاری نرم
یکی دیگر از مثال های خوب برای این قسمت Uber است. در این حالت همانطور که کاربر به پایین وبسایت مراجعه می‌کند، انیمیشن‌ها در جهت اعلام پست‌های جدید به کاربران کمک می کنند.
سوئیچ تصاویر
در یک وبسایت که قصد دارد تا یک گالری تصویری را نمایش دهد، استفاده از تکنیک‌های انیمیشنی می‌تواند بسیار کارا و مثبت باشد. وبسایتی مانند این دقیقا براساس چنین فلسفه‌ای پیاده‌سازی شده است.
استفاده از انیمیشن برای بیان یک داستان
انیمیشن‌ها می‌توانند به شما کمک بکنند تا بتوانید یک روند داستانی را به جلو ببرید. این شیوه را میتوانید در این مثال مشاهده کنید.
در پایان
داشتن فایل‌های رسانه‌ای بسیار زیاد و استفاده بیش از حد از تصاویر به این معنا نیست که باید قوانین طراحی را پشت چشم بگذارید. تصاویر را به عنوان یک بخش بسیار مهم از وبسایت‌تان بدانید و با رویکردی روشن سراغ آن‌ها بروید. اینگونه می‌شود تفاوت یک وبسایت با تجربه کاربری بالا و یک وبسایت معمولی را درک کرد.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید