گرافیک و زیبایی شناسی در طراحی وب سایت
( گرافیک و زیبایی شناسی در طراحی وب سایت ) زیبایی شناسی = گرافیک + رنگ + شیوه + چیدمان و صفحهآرایی
همانطور که در مقالههای قبلی عنوان شد، طراحی کارآمد وب سایت دربر گیرنده فرم و عملکرد است. فرم یعنی زیبایی شناسی ایجاد شده به واسطه طراحی بصری و عملکرد یعنی تعامل، پیمایش و ساختار. در این بخش به موضوع زیبایی شناسی، اجزای آن و محدودیتها پرداخته میشود. سایت دارای جاذبه زیبایی شناسی قوی میتواند به ارتباط ارزشهای ضروری برند کمک کند. استفاده از گرافیک، رنگ، شیوه، چیدمان و صفحهآرایی، زیبایی شناسی را ایجاد میکنند. همه این عوامل، شخصیت سایت را تشکیل میدهند.
شخصیت سایت
عباراتی که میتوان از آنها در توصیف شخصیت سایت استفاده کرد، مثل همان عباراتی هستند که در مورد افراد کاربرد دارند: رسمی، شوخیآمیز یا سرگرمکننده یا حرفهای و جدی، این عوامل باید با برند مورد نظر همخوانی داشته باشند، تست پاسخ احساسی میتواند با مقایسه سایت های شناخته شده در دستهبندی با بخشهای سایت موجود یا پیشنهاد شده به عنوان بخشی از طراحی کاربر محور کامل شود.
شخصیت سایت خود را چگونه توصیف میکنید؟ آیا شخصیت سایت شما آنگونه است که میخواهید آن را جلوه دهید؟ آیا سایت شما با مخاطبان هدف، سازگاری دارد؟ نظر شما چیست؟ آیا از مشتریان خود پرسیدهاید که نظرشان چیست؟
در بعضی از سایت ها از گرافیک کمتر استفاده شده و در بعضی سایت ها بیشتر. این بخشی از فرآیندی است که از آن تحت عنوان web site undesign (عدم طراحی وب سایت) یاد میشود. استفاده زیاد از متن و استفاده کمتر از گرافیک به این خاطر است که قابلیت استفاده و توانمندی را بهبود بخشند و موتور جستوجو را بهینه سازی کنند. اما با فراگیر شدن امکانات باند پهن، سایت هایی هم هستند که بیشتر از رسانه غنی در طراحی هایبریدی استفاده میکنند. این سایت ها دارای عناصر Flash در کانتینر اصلی و در صفحه اصلی هستند و در شبکه تعاملی خود از ویدئو و صوت استفاده میکنند. بعضی از سایت ها از نوار جانبی سمت راست برای پیمایش خود استفاده میکنند. این کار، غیر شرطی است اما مزایایی در پی دارد؛ به طوری که مرکز و سمت چپ تصویر رویت میشوند و این نقاط مکانهایی هستند که بازدیدکنندگان به طور طبیعی به آنها نگاه میکنند.
شیوه سایت
برخی از سایت ها نسبت به اطلاعات و برخی دیگر نسبت به گرافیک، حساس هستند، سایت های حساس به اطلاعات ممکن است به علت تعداد بلوکهای متنی، شلوغ به نظر برسند، اما منظور آن است که بهترین استفاده را از فضای صفحه نمایش به عمل میآورند و عمق و ارزش اطلاعات را نزد بازدیدکننده عملا نشان میدهند؟ سایت های خردهفروشی در این دسته قرار میگیرند. تستهای به عمل آمده توسط Amazon نشان داده است که آنها بهترین تصویر ارزش سفارش میانگین را با ایجاد کانتینرهای متعدد در نوارهای جانبی چپ و راست و با انتخاب چندین بار پیمایش ایجاد میکنند. در این حالت در زمان اسکن و پیمایش، فرصت بیشتری برای ارتباط دادن مخاطبان مختلف با آن محصولات و تبلیغات وجود دارد، در سایتهای حساس به گرافیک، متون نسبتا کمی وجود دارد. در این گونه سایت ها از گرافیک و انیمیشن برای تأثیرگذاری روی بازدیدکنندگان استفاده میشود. سایت های برند FMCG اغلب از این رویکرد به همراه صفحه نمایش گرافیکی معرفی یا ابتدایی که برای مدت کوتاهی نشان داده میشود استفاده میکنند. در پکیج جامع دیجیتال مارکتینگ تخصصی نوکارتو میتوانید پیرامون طراحی وب سایت مطالعه نمایید.
محدودیتهای طراحی در کجا قرار دارند؟
محدودیتها و چالشهای زیادی بر سر راه طراحان وب وجود دارد. متأسفانه لیست محدودیتها، بسیار طولانی است و گاهی اوقات از آنها غفلت میشود که اثر بسیار بدی در پی دارد:
۱- مودم ها و زمان دانلود،. اگر چه دستیابی به باند پهن به سرعت در حال گسترش است، طراحان خوب، گرافیک را برای دانلود سریع، بهینه سازی میکنند و بعد آنها را با مودم کم سرعت که از طریق خطوط تلفن کار میکند، تست میکنند. به خاطر داشته باشید که سایت های برتر در کمتر از یک ثانیه دانلود میشوند هم چنین قاعده هشت ثانیه را به خاطر داشته باشید. اغلب بازدیدکنندگانی که برای اولین بار به سایت سر میزنند، اگر مدت زمان دانلود آن تجربه طولانی باشد، تا آن اندازه صبر نخواهند کرد.
نکته عملی بازاریابی الکترونیکی
کاهش زمان دانلود: آیا سایت شما قانون چهار ثانیه را رعایت میکند؟
تحقیقات (۲۰۰۶) Akamai نشان میدهد که باید محتوای سایت به سرعت بارگذاری شود (ظرف چهار ثانیه) در غیر این صورت بازدیدکنندگان، سایت را ترک میکنند. اما تحقیقات حاکی از آن است که هزینههای بالای محصولات. حمل و نقل آنها و مشکلات مربوط به آن، مهمتر از سرعت در نظر گرفته شدند. اما بسیاری از خریداران عنوان کردهاند که امکان ضعیفی وجود دارد دوباره به سایت هایی که عملکرد ضعیفی دارند سر بزنند (۶۴ %) یا از این خرده فروش خرید کنند (۶۲ %). این نکات عملی برای طراحان که توسط متخصص توانمندی انجام شده حاکی از آن است که روشهای کدنویسی صفحات چطور میتواند تفاوتی را به وجود آورد. بنابراین اطمینان حاصل کنید که طراحان سایت، بهینه سازی را در مورد سرعت انجام میدهند، نه آن که فقط بر طراحی بصری تمرکز می کنند.
۱- چیدمان صفحات خود را با شیوهنامههای آبشاری یا CSS انجام دهید نه با جداول.
۲- برای نمایش متن، از تصاویر استفاده نکنید.
٣- تصاویر تزئینی را از طریق CSS فراخوانی کنید.
۴- از انتخابگرهای متنی استفاده کنید برای فرمت بندی از کلاسها استفاده کنید).
۵- از خصوصیات CSS اختصاری استفاده کنید.
۶- فضای خالی موجود در کد، بازگشت به ابتدای خطوط و تگهای توضیح را به حداقل برسانید.
۷- از call – up های نسبی استفاده کنید.
۸- تگهای META غیر ضروری و محتوای META را بردارید.
۹- CSS و JavaScript را در قالب استاد خارجی قرار دهید.
۱۰- در پایان از لینکهای دایرکتوری استفاده کنید.
۲- وضوح صفحه نمایش: امروزه به ندرت کاربران از وضوحهای صفحه نمایش کمتر از ۴۸۰*۶۴۰ یا ۶۰۰*۸۰۰ پیکسل استفاده میکنند. اما اگر طراحان از وضوحهای بیشتر از وضوحهای میانگین کاربران استفاده کنند، ممکن است خواندن صفحه نمایش برای بیشتر افراد دشوار باشد. طراحی های شناور ممکن است برای سایت های خرده فروشی که در آنها طراحی، فضای صفحه نمایش را به حداکثر میرساند، بهترین انتخاب باشد. اما طراحان سایت های برند اغلب، طراحی های ثابت را ترجیح میدهند، چرا که کنترل بیشتری روی موارد بصری دارند. برخی از طراحی های سایت همچون Kelkoo انتخاب را به کاربران واگذار میکنند.
٣- تعداد رنگها: کاربران مانیتورهایی دارند که تعداد ۱۶ میلیون رنگ را نمایش میدهند و عکسها را واقعی نشان میدهند، در حالی که دیگران ممکن است کامیپوتر خود را روی ۲۵۶ رنگ تنظیم کرده باشند.
۴- مرورگرها: انواع مختلف مرورگرهای وب همچون Mozilla Firefox ،Explorer و نگارشهای مختلف مرورگرها مثل نگارش ممکن است گرافیک یا متن را قدری متفاوت نشان دهند، یک سایت تجارت الکترونیکی که تحت یک مرورگر، تست شده ممکن است با مرورگر دیگر، کاملا با ناکامی رو بهرو شود. اطمینان حاصل کنید که طراحان، ماحصل طراحی خود را با نگارشهای مختلف مرورگرهای وب تست کردهباشند. بسیاری این کار را انجام نمیدهند اما بهتر است این کار صورت گیرد!
۵- Plug-in ها و زمان دانلود: اگر سایت مورد نظر به plug-in ای احتیاج داشته باشد که کاربر در اختیار نداشته باشد ممکن است تعداد مخاطبان شما متناسب با تعداد افرادی که قادر به دانلود این plug-in ها نیستند یا آمادگی لازم را برای انجام این کار ندارند، کاهش پیدا کند.
۶- اندازههای فونت: انتخاب فونتهای بزرگ در بعضی سایت ها سبب روی هم افتادگی بخشهای مختلف طراحی میشود. به جهت توانمندی، امکان تغییر اندازه فونت برای کاربر، مورد نیاز است. از این رو میزان تلورانس طراحی را برای تغییر فونت متن، تست کنید. ۷- پلت فرم: سایت ها از طریق تلفنهای همراه یا وسایل دستی دیگر همچون Play Station Plus دیده میشوند. شیوهنامههای مختلفی را میتوان برای حالتهای نمایش یا پلت فرمهای مختلف همچون چاپ یا بدون تصاویر فراهم کرد. اما کارآمدتر آن است که تمهیدات لازم برای مرور صفحات وب از طریق تلفن همراه در نظر گرفته شود.
در نتیجه این محدودیتهاست که کار طراحی وب مصالحه ثابتی است میان آنچه که توجه را به خود جلب میکند و آنچه که مدرن به نظر میرسد( گرافیک )؛ آنچه که در مرورگرهای قدیمی به نظر میرسد و آنچه که با مودم های کندتر رؤبت میشود، یعنی کوچکترین مخرج مشترک.
پیچیدگیهای تمامی این محدودیتها چیست؟ اگر چه بسیاری از طراحان حرفهای سایت با این محدودیتها کار میکنند، بهترین کار آن است که در مورد پلتفرمهایی که منظور نظرتان است پیشتاز باشید. توجیه یا مشخصه نیازمندیها باید محیطهای مقصد هم چون وضوح صفحه نمایش، مرورگرها و پلت فرمها را مشخص کنند.
طراحی بصری
همانطور که در بخش بینی بازاریابی الکترونیکی در ادامه مشاهده میشود، اولین بازدیدها مهم هستند ( گرافیک )، چه در دنیای واقعی و چه از طریق وب سایت. طراحی بصری سایت برای جلب اعتماد دیگران اهمیت دارد و خاطرهای در ذهن بازدیدکنندگان از سایت به جا میگذارد.
بزرگترین خطا در طراحی بصری سایت عدم رعایت تعادل در آن است. طراحان، باید طراحی بصری متعادلی را خلق کنند که توجه را به خود جلب کرده و در عین حال روی توانمندی، قابلیت استفاده، ترغیب و ساخت برند کار کنند. یک راه برای کمک به تحقق این موضوع، استفاده از بخشهای مختلف صفحه نمایش است تا این عناصر را حاصل کند. در گذشته توسط خود Jakob Nielsen گفته شد که Flash ۹۹٪ بد است اما امروزه به طور روزافزون از Flash استفاده میشود و از عناصر آن برای مشارکت دادن مخاطبان و نشان دادن تجربه برند استفاده میشود. اما استفاده از سایتی که ۱۰۰% Flash باشد هنوز هم چندان ایده خوبی به حساب نمیآید، چرا که محتوای کمی برای موتورهای جستوجو وجود دارد، به جز سایت های سرگرمی دارای محتوای بازی.
رنگ
ترکیب رنگهای مورد استفاده موضوع با اهمیتی است، چرا که رنگها احساسهایی را در مورد سایت و برند مربوطه به وجود میآورند. انتخاب رنگها باید درست باشد به عنوان مثال:
- * انتخاب رنگ به گونه ای باشد که با برند مورد نظر همخوانی داشته باشد.
- * انتخاب رنگ بهگونهای باشد که شخصیت را با مخاطب هدف منطبق سازد.
- * انتخاب رنگ مناسب برای قابلیت استفاده و توانمندی
دماهای مختلف رنگها، مثل قرمز و نارنجی گرم، احساسات مختلفی را در مخاطب به وجود میآورد و رنگهای آبی و سبز سرد میتوانند نگاه حرفهایتری را ارائه دهند ( گرافیک ). البته هر رنگی دارای معنا یا نماد خاصی است. به عنوان مثال در فرهنگهای غربی، رنگ قرمز نشانه جنبش و پرحرارت بودن است، یعنی نشانه عشق و غضب، در حالی که طرح و سایه رنگ آبی نشانگر قابلیت اطمینان است. اما باید در مورد تفسیرهایی که به طور محلی در مورد رنگها وجود دارد، محتاطانه عمل کرد.
رنگهای تکمیلی که متضاد یکدیگر هستند و در گردونه رنگآمیزی قرار دارند باید به دقت استفاده شوند و بسیاری از آنها ممکن است مشکلاتی را در توانمندی ایجاد کنند. رنگهای تکمیلی اولیه عبارتند از: قرمز و سبز، آبی و نارنجی، زرد و ارغوانی، رنگهای تقابلی که ضرورتا متضاد یکدیگر نیستند. در چرخه رنگ معمولا جلوهای خوش رنگ دارند (در صورتی که زرق و برق نداشته باشند). هنگام در نظر گرفتن متن در رنگ پس زمینه به منظور توانمندی، کنتراست بالا، مثبت و کادرهای پسزمینه و دارای ته رنگ نیز برای برجسته نشان دادن محتوایی مثل –call to action- که قصد دارید بازدیدکنندگان بخوانند مفید است.
مسأله دیگری که باید لحاظ شود، فضای خالی (یا ته رنگهای پس زمینه) است. فضای خالی میتواند میزان جلب توجه را بالا ببرد و قابلیت استفاده را افزایش دهد. اما در این مسأله هم باید توازن برقرار شود، چرا که باید بازدیدکنندگان سایت ( گرافیک ) برای رسیدن به محتوای سایت، بیشتر به سمت پایین صفحه پیمایش کنند
اما صرف نظر از الگوی رنگ مورد استفاده، باید آن را از حیث توانمندی، تست کرد. به عنوان مثال در شبیه سازهای کوررنگی بعضی سایت ها قابلیت تست دارند.
بینش بازاریابی الکترونیکی
طول مدت اثرگذاری چقدر باید باشد؟
تحقیقات نشان میدهد که بازدیدکنندگان میتوانند در مورد دوست داشتن یک سایت، بسیار سریع تصمیم بگیرند. این زمان دو ثانیه نیست بلکه ۵۰ میلی ثانیه (یعنی۰۵/۰ ثانیه) است. خلاصه تحقیق انجام شده توسط لیندگارد و دیگران (۲۰۰۶) در دانشگاه Carleton در اتاوا که در نشریه Behaviour and Information Technology به چاپ رسیده، آمده است:
«روانشناسان اثر ماندگار اولین بازدید روی انسان را اثر halo می نامند: اگر بتوانید با طراحی جذاب، افراد را مجذوب خود کنید، امکان بیشتری وجود دارد که تنها اثر سایر خطاهای جزئی سایت شما، صرف نظر کنند و محتوای واقعی آن را به نحوی مطلوبتر ارزیابی کنند».
این مسأله به سبب تمایل مربوط به شناخت است. افراد از این که حق با آنها باشد لذت میبرند؛ بنابراین ادامه استفاده از وب سایتی که تجربه اولیه خوبی در اذهان داشته باشد به اثبات این مسأله کمک میکند که آنها تصمیم اولیه خوبی گرفتهاند.
در تحقیقاتی که لیندگارد و دیگران (۲۰۰۶) انجام دادند، از چند داوطلب خواسته شد نگاه کوتاهی به صفحات وب ( گرافیک ) که پیش از آن ارزیابی شده بودند، بیندازند و آنها را از حیث سهولت برای چشم، ارزیابی کنند. هم چنین از آنها درخواست شد وب سایت های مرتبط را در جدول قابل تطبیق از حیث جذابیت عینی، رتبهبندی کنند.
اگرچه هر تصویر فقط به مدت ۵۰ میلی ثانیه در برابر دیدگان آنها به نمایش در آمد (یعنی تقریبا به مدت نشان دادن یک فریم از footage استاندارد تلویزیون) رأی آنها با رأی به دست آمده پس از نمایش طولانیتر تصویر، مطابقت داشت.
تحقیقات بیشتر به عمل آمده توسط Haynes و Zambonini در سال (۲۰۰۷) یک منحنی از بازدیدکنندگان سایت های موزه را نشان میدهد که در آن حداکثر تعداد (کلیک بازدیدکنندگان) در محدوده زمانی ۲-۳ ثانیه پس از بارگذاری صفحه انجام شده بود ( گرافیک )، بر این اساس، با مقایسه با ورزشی مشتزنی باید به ضربه مشت یک – دو دست پیدا کنید، اول باید تأثیر زیادی در صفحه اصلی سایت داشته باشید که کار نسبتا سادهای است، اما بعد از آن ضربه فنی در صفحه سطح دوم یا جایی پایینتر از صفحه اصلی است که پیشنهاد به صورت تفصیلی آورده میشود و تبدیل را از طریق طیفی از مزایا، ویژگیهای بارز و نظرات دیگران آغاز میکند و اگر پیشنهاد شما خوب باشد میتواند بازدیدکنندگان را به انجام خرید متقاعد سازد.
صفحهآرایی
قدرت صفحهآرایی در افزودن جذابیت عینی و قدرت ترغیبکننده وب سایت، اغلب کم اهمیت جلوه داده میشود. در این بخش به چند نکته عملی اشاره میشود.
نکته عملی بازاریابی الکترونیکی
بایدها و نبایدها در صفحهآرایی
در این جا مثالی از چند دام معمول که باید هنگام استفاده از فونتها از آنها پرهیز کرد، آمده است. شرکت XYZ به شما پیشنهاد میکند تا در رقابت Online آن شرکت که به طور انحصاری برای افرادی است که چندین خرید را طی سال گذشته انجام دادهاند، شرکت کنید. مشاوره الکترونیکی (۲۰۰۷) رویکردهای زیر را برای بهترین شیوه صفحهآرایی پیشنهاد میکند:
۱- در سرتاسر سایت از صفحهآرایی پایداری از استفاده کنید. این کار معمولا از طریق شیوهنامههای آبشاری انجام میشود.
۲- استفاده از انواع و اندازههای مختلف فونت را محدود کنید.
٣- معمولا از شیوههای فونتی استفاده کنید که به بهترین شکل در وب کار میکنند چرا که این فونتها در صفحه نمایش، واضحتر به نظر میرسند و از این رو اسکن کردن و خواندن آنها راحتتر انجام میپذیرد (برخلاف چاپ که در آن حالت معکوس، صحیح است).
۴- متنی که در مرورگرهای وب از سمت چپ تراز شود به بهترین نحو به خوانایی متن کمک میکند.
۵- استفاده گسترده از تصاویر برای ارائه متن در سرتیترها و پیمایش امروزه معمولا به خاطر توانمندی و دلایل مربوط به بهینه سازی موتور جستوجو (موتورهای جستوجوی متنی نه تصویری) توصیه نمیشود، اما موارد استثنا شامل متنی است که در ساخت برند، تبلیغات و برخی از سایت ها وجود دارد که مستلزم داشتن تجربه زیادی است.
۶- در جاهایی که از تصاویر به جای عناوین، استفاده میشود، باید به خاطر توانمندی، از متن جایگزین موسوم به alt tags پرهیز کرد.
۷- زمان بندی تست و نیازمندیهای طراحی جداگانهای را برای ارائه فونتها در مرورگرهای مختلف ایجاد کنید.
چک لیستی برای برتری در صفحهآرایی وب
۱- هرگز از زیر خط دار کردن متن بدنه استفاده نکنید، چرا که خواننده ممکن است آن را هایپرلینک تصور کند.
۲- از حروف مورب (ایتالیک) زیاد استفاده نکنید، چرا که خواندن آنها روی صفحه نمایش دشوار است اما استفاده از آنها میتواند تنوع ایجاد کند.
۳- استاندارد حروف بزرگ را برای سر تیترها بپذیرید ( گرافیک ).
۴- تیترهای بزرگتر از سه یا چهار کلمه ممکن است به بهترین شکل برای مقاصد SEO کار کنند، از این رو برای پشتیبانی از این موضوع با امکان پشتیبانی از شکستن متن به خط بعد یا تیترهای فرعی اطمینان حاصل کنید که اندازه فونت، بیش از حد بزرگ نباشد.
۵- به خاطر داشته باشید که بسیاری از کاربرانی که با مرورگر وب کار می کنند، اندازه حروف خود را افزایش میدهند، بنابراین کنترل کنید که طراحی شما هنگام بزرگ شدن (دستکم تا مقدار کمی بزرگتر کردن) حروف، به طور مطلوب جلوه کند.
۶- اختلاف میان اندازه فونت تیتر، تأثیر متمایزی روی طراحی دارد. از اختلاف اندک میان آنها برای ایجاد اثر هموار استفاده کنید و از اختلاف زیاد برای طراحی متمایزتر بهرهمند شوید.
۷- در صورت امکان از درج صفحاتی که در آنها محتوای متن در تمامی عرض مرورگر گسترده شده است، به ویژه در طراحیهای دارای چیدمان شناور خودداری کنید. تقسیم بندی محتوا به ستونها، موجب افزایش زیاد خوانایی میشود و هم راستا با نحوه خواندن مقالات و محتوا در روزنامهها و مجلات توسط مردم است.
۸- فونتهای استاندارد باید در شیوهنامهها مشخص شوند که به طراح یا توسعه دهنده این امکان را میدهند ( گرافیک ) که ترتیب فونتی را که مرورگر وب باید روی آن کار کند و اندازه را به دست بیاورد، تعیین کند. تغییرات ساده و سریع در فونتهای نمایش داده شده را میتوان با استفاده از CSS انجام داد.
۹- SIFR برای به کارگیری فونتهای غیر استاندارد در تیترهای سایت، در اختیار است. SIFR رویکرد دوست دار SEO در استفاده از صفحهآرایی تخیلی در سایت ها به شمار میآید. برای تیترهایی که برای SEO و برنامه اصلی SIFR اهمیت دارند، متن مورد نظر هنوز هم به صورت h1 h2 تعیین میشود.
زیبایی شناسی متشکل از گرافیک، رنگ، شیوه و شخصیت است. بسیاری از وب سایت ها بیش از حد به گرافیک میپردازند، به طوری که از توانایی و شکیبایی مخاطبان خود برای رویت آنها غافل میشوند. طراحان وب باید محدودیتهای مربوط به مودمهای مختلف، وضوح تصاویر، نمایش رنگها، برنامههای مرورگر و البته مخاطبان را لحاظ کنند. بسیاری از طراحان دوست ندارند طراحی را بر اساس کوچکترین مخرج مشترک انجام دهند، اما با لحاظ کردن این مسأله، بیشترین مخاطبان را دارند.
برای مطالعه مقاله های دیگر در زمینههای مختلف فناوری اطلاعات و ارتباطات اینجا کلیک کنید.
دیدگاه خود را ثبت کنید
تمایل دارید در گفتگوها شرکت کنید؟در گفتگو ها شرکت کنید.