زیبایی شناسی سایت چه اهمیتی دارد؟

زیبایی شناسی سایت چه اهمیتی دارد؟

زیبایی شناسی = گرافیک + رنگ + شیوه + چیدمان و صفحه آرایی

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

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

برخی از سایت ها نسبت به اطلاعات و برخی دیگر نسبت به گرافیک، حساس هستند سایت های حساس به اطلاعات ممکن است به علت تعداد بلوک‌های متنی، شلوغ به نظر برسند، اما منظور آن است که بهترین استفاده را از فضای صفحه نمایش به عمل می‌آورند و عمق و ارزش اطلاعات را نزد بازدید کننده عملا نشان می‌دهند، سایت های خرده فروشی در این دسته قرار می‌گیرند. آزمون‌های به عمل آمده توسط Amazon نشان داده است که آن‌ها بهترین تصویر ارزش سفارش میانگین را با ایجاد کانتینرهای متعدد در نوارهای جانبی چپ و راست و با انتخاب چندین بار پیمایش ایجاد می‌کنند. در این حالت در زمان اسکن و پیمایش، فرصت بیشتری برای ارتباط دادن مخلبان مختلف با آن محصولات و تبلیغات وجود دارد. در سایت های حساس به گرافیک، متون نسبتا کمی وجود دارد. در این گونه سایت ها از گرافیک و انیمیشن برای تأثیرگذاری روی بازدید کنندگان استفاده می‌شود، سایت های برند FMCG اغلب از این رویکرد به همراه صفحه نمایش گرافیکی معرفی یا ابتدایی که برای مدت کوتاهی نشان داده می‌شود استفاده می‌کنند.
محدودیت‌های طراحی در کجا قرار دارند؟

محدودیت‌ها و چالش‌های زیادی بر سر راه طراحان وب وجود دارد متأسفانه لیست محدودیت‌ها، بسیار طولانی است و گاهی اوقات از آن‌ها غفلت می‌شود که اثر بسیار بدی در پی دارد:

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

تحقیقات (۲۰۰۶) Akamai نشان می‌دهد که باید محتوای سایت به سرعت بارگذاری شود (ظرف چهار ثانیه) در غیر این صورت بازدید کنندگان، سایت را ترک می‌کنند اما تحقیقات حاکی از آن است که هزینه های بالای محصولات، حمل و نقل آن‌ها و مشکلات مربوط به آن، مهم‌تر از سرعت در نظر گرفته شدند. اما بسیاری از خریداران عنوان کرده‌اند که امکان ضعیفی وجود دارد دوباره به سایت هایی که عملکرد ضعیفی دارند سر بزنند (%۶۴) یا از این خرده فروش خرید کنند (%۶۲).
این نکات عملی برای طراح آن که توسط متخصص توانمندی Trenston Moss از Webcredible انجام شده حاکی از آن است که روش‌های کد نویسی صفحات چه طور می‌تواند ( زیبایی شناسی ) تفاوتی را به وجود آورد. بنابراین اطمینان حاصل کنید که طراحان سایت، بهینه سازی را در مورد سرعت انجام می‌دهند، نه آن که فقط بر طراحی بصری تمرکز می‌کنند.

۱- چیدمان صفحات خود را با شیوه‌نامه‌های آبشاری یا CSS انجام دهید نه با جداول

۲- برای نمایش متن، از تصاویر استفاده نکنید

۳- تصاویر تزئینی را از طریق CSS فراخوانی کنید

۴- از انتخابگرهای متنی استفاده کنید (برای فرمت بندی از کلاس‌ها استفاده کنید)

۵- از خصوصیات CSS اختصاری استفاده کنید

۶- فضای خالی (موجود در کد)، بازگشت به ابتدای خطوط و تگ های توضیح را به حداقل برسانید

۷- از call – up نسبی استفاده کنید

۸- تگ های META غیر ضروری و محتوای META را بردارید

۹- CSS و JavaScript را در قالب اسناد خارجی قرار دهید

۱۰- در پایان لینک های دایرکتوری از / استفاده کنید

۲- وضوح صفحه نمایش – امروزه نسبتا کاربران کمتری از وضوح‌های صفحه نمایش کمتر از ۴۸۰ × ۶۴۰ یا ۸۰۰ × ۶۰۰ پیکسل استفاده می‌کنند اغلب کاربران از ۱۰۲۴ × ۷۶۸ پیکسل یا بیشتر استفاده می‌کنند اما اگر طراحان از وضوح‌های بیشتر از وضوح‌های میانگین کاربران استفاده کنند، ممکن است خواندن ( زیبایی شناسی ) صفحه نمایش برای بیشتر افراد دشوار باشد. طراحی های شناور ممکن است برای سایت های خرده فروشی که در آن‌ها طراحی، فضای صفحه نمایش را به حداکثر می‌رساند، بهترین انتخاب باشد. اما طراحان سایت های برند اغلب، طراحی های ثابت را ترجیح می‌دهند، چرا که کنترل بیشتری روی موارد بصری دارند. برخی از طراحی های سایت همچون kelko، انتخاب را به کاربران واگذار می‌کنند. خدمات تخصصی اینستاگرام اعتبار و تداوم کسب و کارتان را تضمین می‌کند.

۳- تعداد رنگ ها – برخی از کاربران مانیتورهایی دارند که تعداد ۱۶ میلیون رنگ را نمایش می‌دهند و عکس‌ها را واقعی نشان می‌دهند، در حالی که دیگران ممکن است کامپیوتر خود را روی ۲۵۶ رنگ تنظیم کرده باشند

۴- مرورگرها – انواع مختلف مرورگرهای وب همچون Microsoft Internet Explorer, Mozilla Firefox و Apple Safari و نگارش های مختلف مرورگرها مثل نگارش ۰/۶ یا ۰/۷ ممکن است گرافیک یا متن را قدری متفاوت نشان دهند یک سایت تجارت الکترونیکی که تحت یک مرورگر، آزموده شده ممکن است با مرورگر دیگر، کاملا با ناکامی روبه رو شود اطمینان حاصل کنید که طراحان، ماحصل طراحی خود را با نگارش‌های مختلف مرورگرهای وب و با استفاده از ابزاری همچونBrownsercam  آزمایش کرده باشند. بسیاری این کار را انجام نمی‌دهند اما بهتر است این کار صورت گیرد!

۵- Plug – in ها و زمان دانلود – اگر سایت مورد نظر به Plug – in ای احتیاج داشته باشد که کاربر در اختیار نداشته باشد ممکن است تعداد مخاطبان شما متناسب ( زیبایی شناسی ) با تعداد افرادی که قادر به دانلود این Plug – in ها نیستند یا آمادگی لازم را برای انجام این کار ندارند. کاهش پیدا کند. از Plug – in های استاندارد همچون Macromedia Flash یا Windows Media Player که از قبل روی کامپیوترها نصب می‌شوند استفاده کنید.

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

۷- پلت‌فرم – سایت ها از طریق تلفن های همراه یا وسایل دستی دیگر همچون Play Station Plus دیده می‌شوند. شیوه‌نامه‌های مختلفی را می‌توان برای حالت‌های نمایش ( زیبایی شناسی ) یا پلت‌فرم های مختلف همچون چاپ یا بدون تصاویر فراهم کرد اما کارآمدتر آن است که تمهیدات لازم برای مرور صفحات وب از طریق تلفن همراه در نظر گرفته شود.

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

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

اولین بازدیدها مهم هستند، چه در دنیای واقعی و چه از طریق وب سایت. طراحی بصری سایت برای جلب اعتماد دیگران اهمیت دارد و خاطره‌ای در ذهن بازدید کنندگان از سایت به جا می‌گذارد.
بزرگ‌ترین خطا در طراحی بصری سایت عدم رعایت تعادل در آن است طراحان، باید طراحی بصری متعادلی را خلق کنند که توجه را به خود جلب کرده و در عین حال روی توانمندی، قابلیت استفاده، ترغیب ( زیبایی شناسی ) و ساخت برند کار کنند. یک راه برای کمک به تحقق این موضوع، استفاده از بخش‌های مختلف صفحه نمایش است تا این عناصر را حاصل کند. در گذشته توسط خود Jakob Nielsen گفته شد که ۹۹% Flash بد است اما امروزه به طور روزافزون از Flash استفاده می‌شود و از عناصر آن برای مشارکت دادن مخاطبان و نشان دادن تجربه برند استفاده می‌شود. سایت های برند شکلات divinechokolate.com ، شرکت‌های سازنده نرم افزارهای تجاری همچون salesforce.com یا  microstrategy.comکه از بنر Flash لتفاده می‌کنند یا شرکت روابط عمومی Ketchum  که دارای بخشی به عنوان عضو تیم است، مخلبان را به خود جذب می‌کند اما با استفاده از سایتی که ۱۰۰ درصد Flash باشد هنوز هم چندان ایده خوبی به حساب نمی‌آید، چرا که محتوای کمی برای موتور های جستجو وجود دارد، به جز سایت های سرگرمی دارای محتوای بازی.
رنگ

ترکیب رنگ های مورد استفاده موضوع با اهمیتی است. چرا که رنگ ها احساس‌هایی را در مورد سایت و برند مربوطه به وجود می‌آورندہ انتخاب رنگ ها باید درست باشد به عنوان مثال:

* انتخاب رنگ به گونه‌ای باشد که شخصیت را با مخاطب هدف منطبق سازد
* انتخاب رنگ به گونه‌ای باشد که با برند مورد نظر هم خوانی داشته باشد
* انتخاب رنگ مناسب برای قابلیت استفاده و توانمندی

نماهای مختلف رنگ ها، مثل قرمز و نارنجی گرم، احساسات مختلفی را در مخاطب به وجود می‌آورد و رنگ های آبی و سبز سرد می‌توانند نگاه حرفه‌ای‌تری را ارائه دهند. البته هر رنگی دارای ( زیبایی شناسی ) معنا یا نماد خاصی است. به عنوان مثال در فرهنگ های غربی، رنگ قرمز نشانه جنبش و پر حرارت بودن است، یعنی نشانه عشق و غضب، در حالی که طرح و سایه رنگ آبی نشانگر قابلیت اطمینان است. اما باید در مورد تفسیرهایی که به طور محلی در مورد رنگ ها وجود دارد، محتاطانه عمل کرد. برای مشاهده نمونه‌هایی از نمادهای رنگ ها در فرهنگ‌های مختلف به سایت  princetonol.com مراجعه فرمایید.
رنگ های تکمیلی که متضاد یکدیگر هستند و در گردونه رنگ آمیزی قرار دارند باید به دقت استفاده شوند و بسیاری از آن‌ها ممکن است مشکلاتی را در توانمندی ایجاد کنند. رنگ های تکمیلی ( زیبایی شناسی ) اولیه عبارتند از: قرمز و سبز، آبی و نارنجی، زرد و ارغوانی. رنگ های تقابلی که ضرورتا متضاد یکدیگر نیستند، در چرخه رنگ معمولا جلوه‌ای خوش رنگ دارند (در صورتی که زرق و برق نداشته باشند). هنگام در نظر گرفتن متن در رنگ پس زمینه، به منظور توانمندی، کنتراست بالا، مثبت و کادرهای پس زمینه و دارای ته رنگ نیز برای برجسته نشان دادن محتوایی مثل call – to – action که قصد دارید بازدید کنندگان بخوانند مفید است سایت شرکت Unilever  نشان می‌دهد که چگونه رنگ غالب می‌تواند در هر بخش از سایت، استفاده شود. این سایت نیز از کنتراست استفاده می‌کند.
مسئله دیگری که باید لحاظ شود، فضای خالی (یا ته رنگ های پس زمینه) است. فضای خالی می‌تواند میزان جلب توجه را بالا ببرد و قابلیت استفاده را افزایش دهد. اما در این مسئله هم باید توازن برقرار شود، چرا که باید بازدید کنندگان سایت برای رسیدن به محتوای سایت، بیشتر به سمت پایین صفحه پیمایش کنند.
اما صرف نظر از الگوی رنگ مورد استفاده، باید آن را از حیث توانمندی، امتحان کرد. به عنوان مثال در شبیه سازهای کور رنگی مثل سایت  tools/colourblind – simulatorسه نوع کوررنگی (Deuteranopia, Protanopia و Tritanopia) آزمایش می‌شوند.
طول مدت اثرگذاری چقدر باید باشد؟

تحقیقات نشان می‌دهد که بازدید کنندگان می‌توانند در مورد دوست داشتن یک سایت، بسیار سریع تصمیم بگیرند. این زمان دو ثانیه نیست بلکه ۵۰ میلی ثانیه است خلاصه تحقیق انجام شده توسط Gitte Lindgaard و دیگران ۲۰۰۶ در دانشگاه Carleton در اتاوا که در نشریه Behaviour and Information Technology به چاپ رسیده، آمده است:

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

این مسئله به سبب “تمایل مربوط به شناخت” است. افراد از این که حق با آن‌ها باشد لذت می‌برند بنابراین ادامه استفاده از وب سایتی که تجربه اولیه خوبی در اذهان داشته باشد به “اثبات” این مسئله کمک می‌کند که آن‌ها تصمیم اولیه خوبی گرفته‌اند”.

در تحقیقاتی که Lindgaard و دیگران (۲۰۰۶) انجام دادند، از چند داوطلب ( زیبایی شناسی ) خواسته شد نگاه کوتاهی به صفحات وب که پیش از آن ارزیابی شده بودند، بیندازند و آن‌ها را از حیث سهولت برای چشم، ارزیابی کنند. هم چنین از آن‌ها درخواست شد وب سایت های مرتبط را در جدول قابل تطبیق از حیث جذابیت عینی، رتبه‌بندی کنند.
اگر چه هر تصویر فقط به مدت ۵۰ میلی ثانیه در برابر دیدگان آن‌ها به نمایش در آمد (یعنی تقریبا به مدت نشان دادن یک فریم از اندازه استاندارد تلویزیون) رأی آن‌ها با رای به دست آمده پس از نمایش طولانی‌تر تصویر، مطابقت داشت.
تحقیقات بیشتر به عمل آمده توسط Haynes و (۲۰۰۷) Zambonini یک منحنی از بازدید کنندگان سایت های موزه را نشان می‌دهد که در آن حداکثر تعداد (کلیک بازدید کنندگان) در محدوده زمانی ۲-۳ ثانیه پس از بارگذاری صفحه انجام شده بود. بر این اساس، با مقایسه با ورزش مشت‌زنی باید به ضربه مشت یک – دو دست پیدا کنید. اول باید تأثیر زیادی در صفحه اصلی سایت داشته باشید که کار نسبتا ساده‌ای است، اما بعد از آن ضذبه فنی در صفحه دوم یا جایی پایین‌تر از صفحه اصلی است که پیشنهاد به صورت تفصیلی آورده می‌شودو تبدیل را از طریق طیفی از مزایا ویژگی‌های بارز و نظرات دیگران آغاز می‌کند و اگر پیشنهاد شما خوب باشد می‌تواند بازدید کنندگان را به انجام خرید متقاعد سازند.
صفحه آرایی

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

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

مشاوره الکترونیکی (۲۰۰۷) رویکردهای زیر را برای بهترین شیوه صفحه آرایی پیشنهاد می‌کند:

۱- در سرتاسر سایت از صفحه آرایی پایداری استفاده کنید. این کار معمولا از طریق شیوه‌نامه‌های آبشاری انجام می‌شود.

۲- استفاده از انواع و اندازه‌های مختلف فونت را محدود کنید.

۳- معمولا شیوه‌های فونت San – serif همچون Arial یا Verdana به بهترین شکل در وب کار می‌کنند چرا که این فونت‌ها در صفحه نمایش، واضح‌تر به نظر می‌رسند و از این رو اسکن کردن و خواندن آن‌ها راحت‌تر انجام می‌پذیرد (بر خلاف چاپ که در آن حالت معکوس، صحیح است). Sans – serif مشهورترین رویکرد آنلاین به شمار می‌آید اما اگر ازNew York Times   دیدن کنید، می‌بینید که استفاده از فونت های Serif شده ممکن است سایت را متمایزتر نمایان سازد و بر شخصیت سایت اثر بگذارند.

۴- متنی که در مرورگرهای وب از سمت چپ تراز شود به بهترین ( زیبایی شناسی ) نحو به خوانایی متن کمک می‌کند.

۵- استفاده گسترده از تصاویر برای ارائه متن در سرتیترها و پیمایش امروزه معمولا به خاطر توانمندی و دلایل مربوط به بهینه سازی موتور جستجو (موتور های جستجوی متنی نه تصویری) توصیه نمی‌شود، اما موارد استثنا شامل متنی است که در ساخت برند، تبلیغات و برخی از سایت ها وجود دارد که مستلزم داشتن تجربه زیادی است.

۶- در جاهایی که از تصاویر به جای عناوین، استفاده می‌شود، باید به خاطر توانمندی، از متن جایگزین موسوم به “alt tags” پرهیز کرد.

۷- زمان بندی آزمون و نیازمندی‌های طراحی جداگانه‌ای را برای ارائه فونت ها در مرورگرهای مختلف ایجاد کنید.
چک لیستی برای برتری در صفحه آرایی

۱- هرگز از زیر خط دار کردن متن بدنه استفاده نکنید، چرا که خواننده ممکن است آن را هایپرلینک تصور کند.

۲- از حروف مورب (ایتالیک) زیاد استفاده نکنید، چرا که خواندن آن‌ها روی صفحه نمایش دشوار است اما استفاده از آن‌ها می‌تواند تنوع ایجاد کند.

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

۴- به خاطر داشته باشید که بسیاری از کاربرانی که با مرورگر وب کار می‌کنند، اندازه حروف خود را افزایش می‌دهند، بنابراین کنترل کنید که طراحی شما هنگام بزرگ شدن (دست کم تا مقدار کمی بزرگ‌تر کردن) حروف، به طور مطلوب جلوه کند.

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

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

۷- فونت های استاندارد باید در شیوه‌نامه‌ها مشخص شوند که به طراح یا توسعه دهنده این امکان را می‌دهند که ترتیب فونتی را که مرورگر وب باید روی آن کار کند و اندازه را به دست بیاورد، تعیین کند تغییرات ساده و سریع در فونت های نمایش داده شده را می‌توان با استفاده از CSS انجام داد.

منبع: نوکارتو