خلاصه پروژه
پروژه: طراحی سایت دندانپزشکی «الهام» (نمونه کار مفهومی)
نقش من: طراحی UI/UX و پیاده سازی
ابزار: وردپرس و المنتور پرو
هدف: ساخت سایتی آرام و ساده که کاربر بتونه خدمات رو بشناسه، پزشک رو پیدا کنه و نوبت بگیره
آقا یه سوال؟ چرا بیشتر در طراحی سایت دندانپزشکی، حالا چه دندانپزشکی و چه کلینیک های دیگه، این قدر خشک و بی روح هستن؟ چرا این همه شلوغ پلوغن؟
یا مثلا در حال اسکرول هستی، یهو میبینی متن ها از چپو راست با انیمیشن وارد صفحه میشن، تصاویر نامرتبطه، فونت درست و حسابی ای نداره یا اصلا سرعتش جالب نیست.
ولی خب میتونه بخشی از این دیزاین به سلیقه کارفرما برگرده و یا شاید هم شرکت های طراحی سایت بزرگ. چیزی که برای من جالبه اینه که چرا حس می کنیم هرچی المان بیشتری توی صفحه قرار بدیم،کاربر همه رو میخونه و میبینه؟
به نظرم مشکلی که فراموش می کنیم اینه که کاربر اصلا برای دیدن انیمیشن ها و افکت های ما وارد سایت نشده ( البته نمیگم بده افکت یا انیمیشن، منظورم اینه استفاده نابجا خیلی خوشایند نیست )
احتمالا دنبال یک اطلاعات مشخصه؛ میخواد خدمات یک کلینیک رو بشناسه، پزشک مورد نظرش رو پیدا کنه و یا برای دریافت خدمات نوبت بگیره.
و چنین شد که چنین شد؛ طراحی یک نمونه کار مفهومی با نام « الهام »، با این هدف که ببینم چطور میشه با طراحی سایت دندانپزشکی هم ظاهر متفاوتی داشته باشه و هم کار کردن باهاش راحت باشه.
ایده طراحی سایت دندانپزشکی الهام از کجا اومد؟
البته ایده خاصی هم نبود، صرفا دوست داشتم سایتی بسازم که کاربردی باشه، از شلوغی ها به دور و به جای خفه کردن کاربر با المان های بی دلیل، بهش حس آرامش و اطمینان بده.
یه تصویر کلی از ساختار طرح در ذهنم داشتم که : کاربر وارد سایت بشه، با فضای کلینیک آشنا بشه، خدمات رو ببینه، پزشکان رو بشناسه و در نهایت اگر خواست، مسیر رزرو نوبت رو دنبال کنه.
نمی خواستم هر بخش ساز خودش رو بزنه. دوست داشتم وقتی کاربر از ابتدای صفحه شروع به اسکرول میکنه، احساس کنه داره یک مسیر مشخصی رو طی میکنه، نه اینکه هر چند ثانیه با یک طراحی کاملا متفاوت روبه رو بشه.
به قولی میشه گفت یک جور خط داستانی در سایت طی بشه، ترتیب بخش ها، تصاویر و حتی فضای خالی بین قسمت ها به هم ارتباط داشته باشن.
چرا برای طراحی سایت الهام سراغ رنگ سبز تیره رفتم؟
وقتی صحبت از طراحی سایت پزشکی میشه، اولین ترکیبی که به ذهن خیلی ها میرسه آبی و سفیده، البته ترکیب خوبیه ها، مثلا حس سرزنده بودن میده، ولی من برای الهام دنبال فضای متفاوتی بودم.
میخواستم وقتی وارد سایت میشی، بیشتر از اینکه حس حضور در یک محیط بیمارستانی رو داشته باشی، با یک فضای آرام، مرتب و کمی کلاسیک روبه رو بشی.
سبز تیره شد، رنگ اصلی هویت بصری پروژه. رنگ های روشن تر کمک کردن صفحه بیش از حد سنگین نشه و جزئیات طلایی هم در قسمت هایی که نیاز به تاکید بصری داشتن، استفاده شدن.
در کنار رنگ ها، از خطوط هندسی و فاصله گذاری های منظم استفاده کردم تا اجزای صفحه بدون اینکه بیش از حد به هم نزدیک بشن، یک ارتباط بصری مشخص داشته باشن.
وقتی کاربر وارد سایت میشه، اول باید چی ببینه؟
همیشه یکی از وقت گیر ترین بخش های طراحی برای من، بخش سکشن هیرو هست،چون باید در همون نگاه اول، توجه مخاطب رو جلب کنه و یک تصویر اولیه از مجموعه توی ذهنش بسازه، تصویری که باهاش وارد بخش های بعدی سایت بشه.
مثلا فکر کن برای اولین بار وارد سایت یک کلینیک دندانپزشکی شدی و در مرحله اول چشمت میوفته به سکشن هیرو، و حالا تیتر + پاراگراف + دکمه و تصویر به چه صورته؟ بدون استفاده اندازه درست فونت، بدون فاصله استاندارد مابین خطوط و از همه مهم تر، بیشترین تاثیری که بر مخاطب داره تصویره که متاسفانه رعایت نمیشه و از گوگل گرفته میشه و بعد اسکرول میکنی به پایین هنوز نمیدونی دقیقا چه خدماتی ارائه میده، چه پزشکانی داره یا اصلا چطور باید نوبت بگیری.
برای همین سعی کردم صفحه اصلی رو با یک عنوان شعار محور شروع کنم ، تصویر مناسبی برای سکشن بسازم و بعد به تدریج اطلاعات بیشتری در اختیار مخاطب بذارم. از معرفی مجموعه و خدمات گرفته تا پزشکان، مطالب آموزشی و بخش رزرو نوبت.
نکته: همه اطلاعات سایت به یک اندازه اهمیت ندارن و قرار نیست همه اون ها هم زمان جلوی چشم کاربر باشن.
مثلا کسی که دنبال ایمپلنت دندانه، احتمالا دوست داره سریع تر به اطلاعات مربوط به این خدمت برسه. کسی هم که هنوز برای انتخاب پزشک تصمیم نگرفته، ممکنه اول بخواد با تیم درمانی آشنا بشه.
پس طراحی خوب فقط به این نیست که همه چیز رو داخل سایت قرار بدیم، مهمه که پیدا کردن هر چیز هم راحت باشه.
طراحی بخش خدمات دندانپزشکی؛ هر خدمت باید قابل تشخیص باشه
در طراحی این قسمت، خدمات مختلفی مثل معاینه و پیشگیری، درمان های ترمیمی، دندانپزشکی زیبایی، ایمپلنت و درمان لثه رو در نظر گرفتم.
برای اینکه خدمات راحت تر از هم تشخیص داده بشن، هر کدوم رو در یک کارت جداگانه قرار دادم؛ با عنوان، توضیح کوتاه و آیکنی که موضوع اون خدمت رو مشخص می کنه
چرا این موضوع اهمیت داره؟
چون عنوان هایی مثل «خدمات دندانپزشکی» به تنهایی همیشه برای مخاطب کافی نیستن. کسی که وارد سایت می شه، ممکنه ندونه دقیقا چه درمان هایی زیرمجموعه خدمات یک کلینیک قرار می گیرن.
وقتی خدمات به شکل مشخص و جداگانه نمایش داده بشن، هم شناخت بهتری ایجاد می شه و هم کاربر راحت تر می تونه چیزی رو که دنبالش هست پیدا کنه.
در ظاهر این بخش هم سعی کردم از تصاویر و ترکیب رنگی استفاده کنم که با هویت کلی سایت هماهنگ باشن؛ نه اینکه هر کارت ظاهر و حال و هوای متفاوتی داشته باشه.
معرفی پزشکان؛ بالاخره قراره بدونیم با چه کسانی طرفیم!
به نظرم یکی از بخش هایی که در سایت های پزشکی نباید دست کم گرفته بشه، معرفی پزشکانه.
فرض کن دو کلینیک خدمات مشابهی ارائه میدن. وقتی وارد سایتشون میشی، در یکی فقط چند عنوان خدمات میبینی؛ اما در اون یکی میتونی با پزشکان، تخصص و اطلاعاتشون آشنا بشی.
طبیعتا تجربه این دو سایت برای تو یکسان نیست.
برای همین در الهام بخشی رو به معرفی پزشکان اختصاص دادم. در این قسمت، هر پزشک فضای مشخص خودش رو داره تا تصویر و اطلاعاتش به راحتی قابل مشاهده باشه.
در طراحی این بخش هم حواسم بود که تصاویر بیش از حد شلوغ یا فشرده نباشن. بالاخره قرار نیست همه چیز برای جلب توجه با هم رقابت کنه!
فرم رزرو نوبت؛ چرا کاربر باید از پر کردن فرم خسته بشه؟
فرض کن وارد سایت شدی و میخوای برای یه معاینه ساده نوبت بگیری. روی دکمه رزرو کلیک میکنی و با یه فرم بلند روبه رو میشی که از همون اول کلی اطلاعات ازت میخواد. خیلی زود حوصله ات سر میره و صفحه رو میبندی.
من هر فرمی که بیش از حد اطلاعات بخواد رو دوست ندارم و ایده آلش اینه که فقط نام و شماره تماس بخواد. ولی توی رزرو نوبت چند تا انتخاب لازمه: خدمت، پزشک و زمان. پس به جای اینکه همه رو یه جا جلوی کاربر بریزم، مسیر رو به چهار مرحله کوچیک تقسیم کردم:
- انتخاب خدمت موردنظر
- انتخاب پزشک، تاریخ و ساعت
- وارد کردن اطلاعات تماس
- بررسی اطلاعات و تایید نهایی
توی هر مرحله فقط همون چیزی که لازمه نشون داده میشه، یه نوار پیشرفت مشخص میکنه کجای مسیر هستی و هر وقت خواستی میتونی یه قدم برگردی و چیزی رو عوض کنی. نتیجه اینه که کاربر به جای یه فرم طولانی، قدم به قدم جلو میره و همیشه میدونه چه کاری باقی مونده.
توی انتخاب تاریخ هم به جای یه تقویم کامل، روزهای یه هفته رو کنار هم لیست کردم. امروز با پس زمینه و بوردر ملایم مشخص شده و روز انتخاب شده به رنگ اصلی سایت در میاد. تغییر بزرگی نیست، ولی انتخاب رو سریع تر میکنه.
نکته: فرم الهام یه نمونه تعاملی و نمایشی از فرآیند رزروه و به سیستم نوبت دهی واقعی وصل نیست.
سایت دندانپزشکی فقط برای رزرو نوبت نیست!
یک بخش دیگه که برای الهام در نظر گرفتم، مطالب آموزشی و سوالات متداول بود.
چون همه افرادی که وارد سایت یک کلینیک میشن، جدا از بررسی خدمات، حتما یه سری سوالاتی متداول برایش پیش میاد.
مثلا ممکنه کسی درباره ایمپلنت تحقیق کنه، فرد دیگه ای بخواد با روش های مراقبت از دندان آشنا بشه یا صرفا دنبال پاسخ یک سوال باشه.
نکته : بخش سوالات متداول در سئو تاثیر کمی داره، ولی از لحاظ تجربه کاربری خیلی کاربرد داره ، ابهامات کاربر، پیش سوالات رو رفع میکنه و گاهی میتونه سیگنال مثبتی برای تبدیل بازدید کننده به مشتری هم داشته باشه.
به جای اینکه سایت فقط به معرفی خدمات محدود بشه، میتونه به یک منبع اطلاعاتی برای مخاطبان هم تبدیل بشه. از طرف دیگه، مطالب آموزشی مرتبط با خدمات کلینیک میتونن مسیر آشنایی کاربر با موضوعات مختلف رو هموارتر کنن.
در طراحی بخش وبلاگ و مقاله هم سعی کردم تمرکز اصلی روی خوانایی محتوا باشه؛ چون در نهایت کاربر برای خوندن مقاله وارد این قسمت میشه.
پیاده سازی سایت با وردپرس و المنتور پرو
برای ساخت این پروژه از وردپرس و Elementor Pro استفاده کردم.
دلیل انتخاب وردپرس هم مشخصه؛ برای چنین سایتی نیاز داریم بخش های مختلف مثل خدمات، پزشکان و مقالات به راحتی قابل مدیریت باشن و در آینده هم بشه اون ها رو توسعه داد.
از طرف دیگه، المنتور این امکان رو فراهم میکنه که بخش های مختلف رابط کاربری رو با آزادی بیشتری پیاده سازی کنم و ظاهر نهایی به طرح موردنظر نزدیک باشه.
اما یک نکته رو نباید فراموش کرد: استفاده از وردپرس یا المنتور به تنهایی تضمین کننده یک سایت خوب نیست. چیزی که اهمیت داره، نحوه استفاده از این ابزارها و ساختاریه که باهاشون پیاده سازی میکنیم.
نسخه موبایل؛ طراحی فقط برای مانیتور نیست!
یه صفحه ممکنه روی مانیتور بزرگ عالی به نظر برسه، ولی وقتی با گوشی بازش میکنی تازه میفهمی فاصله ها، اندازه نوشته ها و چیدمان اصلا جواب نمیده.
برای همین نسخه موبایل رو جدا بررسی کردم:
- کارت های خدمات از چند ستون به یک ستون تبدیل میشن تا متن و آیکن راحت خونده بشن
- دکمه رزرو نوبت همیشه توی دسترسه و کاربر مجبور نیست دنبالش بگرده
- فاصله بین دکمه ها و فیلدهای فرم به اندازه ای هست که با انگشت راحت بشه انتخابشون کرد
- توی فرم رزرو، هر مرحله یه صفحه کامل رو میگیره و چیزی روی هم نمیفته
اگه کاربر نتونه با گوشی راحت از سایت استفاده کنه، زیبایی طراحی به تنهایی مشکل رو حل نمیکنه.
در نهایت، الهام چه چیزی برای من داشت؟
در این پروژه سعی کردم چند موضوع رو کنار هم قرار بدم: یک هویت بصری متفاوت، ساختار قابل فهم، معرفی منظم خدمات و پزشکان، فرم رزرو چند مرحله ای و بخش محتوای آموزشی.
شاید هیچ کدوم از این موارد به تنهایی چیز عجیب و غریبی نباشن؛ اما کنار هم قرار گرفتن درست اون هاست که می تونه تجربه استفاده از یک سایت رو شکل بده.
و البته هنوز هم فکر می کنم در طراحی سایت، همیشه جا برای بهتر شدن وجود داره. قرار نیست با ساخت یک پروژه به نقطه پایانی برسیم؛ هر تجربه میتونه ایده ای برای پروژه بعدی باشه.
اگر دوست دارید نتیجه رو از نزدیک ببینید، می تونید وارد نسخه نمایشی سایت دندانپزشکی الهام بشید:
مشاهده دموی سایت دندانپزشکی الهام
یک نکته: الهام یک پروژه مفهومی و نمایشی از طرف EbiStar است و متعلق به یک کلینیک واقعی نیست. اطلاعات پزشکان و فرآیندهای نمایش داده شده نیز جنبه نمایشی دارن.
