اصول طراحی و ساخت وب سایت برای هتل ها

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

اما به نظر میاد هتلها اینجا یه نقصی دارند و هنوز نمیدونن فقط ساختن سایت کافی نیست. مسافرها بیشتر از این ها انتظار دارن. مسافرها دوست دارن اطلاعاتی رو که دنبالشن بتونن پیدا کنن، چیزهای جالب و به درد بخوری هم پیدا کنند و بتونن هر چی که لازم دارن رو آنلاین رزرو کنند.
این راهنمای عملی با ارائه مثالهایی از طراحی خوب و طراحی بد، شما رو در طراحی سایتتون یاری میکنه. البته همه مثالها از بین سایت هتلها نیست اما میتونید همین قوانین رو موقع طراحی و ساختاربندی سایت خودتون پیاده کنید.
مهمترین قوانین طراحی سایت:
1- ارتباط و محتوا
2- فهرست و جهتیابی
3- برندسازی و طراحی
4- قالب
5- استفاده از تصاویر
6- زبان
7- عوامل حواس پرتی

• ارتباط و محتوا

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

• فهرست و جهتیابی

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

• برند سازی و طراحی

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

• قالب

خیلی مهمه که کاربرها بتونن اطلاعاتی رو که به دنبالشن به راحتی روی سایت پیدا کنند. فهرست جهتیابی سایتتون باید روی تمام صفحات یکسان باشه و در یک موقعیت ثابت قرار بگیره (معمولا بالا و سمت راست صفحه). پهنای سایت باید کمتر از 860 پیکسل باشه تا روی همه نمایشگرها خوب دیده شه. گاهی برای بیشتر کردن فضا میشه صفحه رو به دو ستون تقسیم کرد. سعی کنید اسکرول صفحه رو به حداقل برسونید. اگه محتواتون خیلی طولانیه، یه صفحه دیگه بسازید و محتوا رو به دو بخش تقسیم کنید. موقع طراحی صفحاتتون این روش رو دنبال کنید:
1- تضاد: باید دیدن متن روی پس زمینه راحت باشه و بنابراین باید یه رنگ جذاب استفاده کنید که توجه رو جلب کنه.
2- تکرار: فهرست جهتیابی باید روی تمام صفحات تکرار بشه تا کاربرها بدونن چطوری روی سایتتون گشت بزنن. اطلاعات مهم مثل حق کپی رایت و اطلاعات تماس باید در فوتر همه صفحات تکرار بشن. میتونید اطلاعات مهم رو هم روی همه صفحات سایتتون تکرار کنید یا هایپرلینک کنید تا به سئوی سایتتون کمک بشه.
4- به خط کردن: اگه همه تصاویر و نوشته های سایتتون به خط باشن خیلی زیباتره. ستونها هم میتونن تو این کار بهتون کمک کنند، اما اگه از ستون استفاده میکنید دقت کنید که پایین ستونها هم باهمدیگه هم سطح باشن و ظاهر مرتبی داشته باشه.
5- نزدیکی: اطلاعات مشابه رو نزدیک هم بذارید. باید این کارو موقع سازماندهی کردن محتواتون به دسته های مختلف در جهتیابی یا موقع استفاده از ستون در صفحات انحام بدید. همه تصاویر گالری باید کنار هم باشن، اطلاعات تماس (شامل آدرس، شماره تماس، ایمیل) هم همینطور.
مثال خوب:
این سایت، هدرها رو به رنگ خوانایی نوشته تا کاربرها براحتی بتونن به اطلاعات مورد نیازشون دست پیدا کنند.
متن مشکی تضاد خوبی با پس زمینه سفید ایجاد کرده، خدمات کنار هم فهرست شدند، متن به قسمتهای مرتبط لینک شده و تصاویر در کنار هم به خط شدند. فهرست جهتیابی و فوتر هم روی تمام صفحات ثابتند.
مثال بد:
هیچ چیزی روی صفحه با هم اتحاد ندارن.
ارتفاع تصاویر یکی نیست و یکی از تصاویر در ستون سمت چپ حتی لود هم نمیشه. نقشه صفحه موقعیت خود هتل رو هم نشون نمیده. پس زمینه به شکل یه کاغذ سوخته است که باعث شده سایت دیرتر بارگذاری بشه و جذابیتی نداشته باشه.
تصاویر زیبایی روی صفحه استفاده شده اما باعث شدند که صفحه به نظر شلوغ و در هم دیده بشه. شاید بهتر بود که بالای تصاویر رو به خط کنه و شکل یکسانی به عناصر بده.

• استفاده از تصاویر

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

• زبان

چون کاربرهای سایتتون معمولا دارن از کشورهای دیگه سفر میکنن شاید نتونن براحتی به زبون مادری شما صحبت کنند، بنابراین بهتره که یه ترجمه روی سایتتون داشته باشید. بهترین و راحتترین گزینه استفاده از مترجم گوگله. برای اینکار باید برید به صفحه translate.google.com و روی دکمه آبی رنگ Add to your Website Now کلیک کنید. گوگل برای بقیه مراحل راهنماییتون میکنه و در نهایت بهتون یه کد میده که باید به کمک طراح سایتتون روی سایت بچسبونید. هم سریعه و هم راحت و هم رایگان!
مثال خوب:
چون این هتل در کشوری در افریقای شرقی واقع شده، نسخه های کاملا سفارشی برای زبانهای آلمانی، انگلیسی و فرانسوی برای سه دسته مخاطب ارائه میده.
مترجم گوگل هم براحتی به سایت اضافه شده تا محتوای مرتبط و دقیقی برای کاربرها فراهم کنه.
مثال بد:
این هتل با اینکه اطلاعات خیلی خوبی روی سایتش داره و سعی کرده متن آلمانی رو به انگلیسی ترجمه کنه تا به بازار هدف دیگه هم دسترسی داشته باشه. اما انگلیسی زبانها وقت نمیذارن تا صفحه رو اسکرول کنند به پایین و محتوای انگلیسی رو پایین صفحه اصلی پیدا کنند.

• عوامل حواس پرتی

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