فرآیند طراحی یک لندینگ پیج یا صفحه فرود برای دوره‌ی آموزشی آنلاین چگونه است؟ به عنوان طراح از کجا باید شروع کنیم و به عنوان صاحب بیزنس، چطور به طراح کمک کنیم؟ این کیس استادی راهنمای خوبی برای کسانی است که می‌خواهند از فرآیند طراحی لندینگ پیج یک دوره آموزشی آگاه شوند.
لندینگ پیج (Landing Page) یا صفحه فرود، یک تک صفحه از وبسایت است که بیشتر برای اهداف مارکتینگی و کمپین طراحی و اجرا می‌شود و بهتر است تنها یک کال تو اکشن (Call To Action) داشته باشد. این کال تو اکشن بسته به هدف صاحب بیزنس یا کلاینت (Client) متفاوت است. مثلا برای این کیس استادی (Case Study) که قرار است در ادامه بخوانید، کال تو اکشن یا دکمه فراخوان به عمل، دکمه ثبت‌نام دوره است.
قبل از پرداختن به ادامه و تعریف قصه طراحی لندینگ پیج، این نکته را مدنظر داشته باشید که در دنیای طراحی وبسایت و UI/UX، همیشه از یک سری اصطلاحات انگلیسی در زبان فارسی استفاده می‌کنیم که معادل قشنگی به فارسی ندارد. با این حال برای راحتی خوانش این متن، در کنار استفاده از اصطلاح یا عبارت انگلیسی، ترجمه و لغت آن را هم به انگلیسی بنویسیم تا اگر خواستید در گوگل هم جستجو کنید و درباره‌اش بیشتر بدانید.
قصه ما از روزی شروع شد که تیم سئوی منتوریکس به تیم UI/UX اطلاع دادند که کلاینت سئویی‌شان قصد معرفی و تبلیغ دوره‌ای به اسم «دوره سایکوانکولوژی» (PSYCHO-ONCOLOGY) را دارد و برای این دوره صفحه‌ای در سایتش ندارد تا روی سئوی آن کار کند. از طرف دیگر، دوره قرار بود به زودی شروع شود و هیچ صفحه‌ای برایش نبود که علاقمندان بتوانند برای این دوره ثبت‌نام کنند.
اگر درباره این دوره کنجکاو شدید، شاید بهتر باشد که به آن اشاره کنیم. این دوره تخصصی برای روانکاوان و روانشناسانی است که مراجعه‌کنندگانشان، بیماران مبتلا به سرطان هستند و قرار است که با راهکارهای درمانی متناسب با نیاز آن‌ها آشنا شوند.
معمولا اولین مرحله‌ی دیزاین، Problem Space یا Problem Statement است. یعنی فازی از پروژه که مشکل یا مسئله در آن به صورت مشخص بیان می‌شود. هدفمان از این مرحله این است که بدانیم چه مشکل یا مشکلاتی داریم و آن‌ها را اولویت‌بندی کنیم.
کلینیک بینش نوین برای تبلیغ یا معرفی دوره‌اش، فقط صفحه اینستاگرامش را داشت و ثبت‌نام به صورت تلفنی یا از طریق واتساپ انجام می‌شد. با این حال، کلینیک ترجیح می‌داد که علاقمندان را به سایت راهنمایی کند و همانطور که گفتیم، بچه‌های سئو هم نیاز داشتند که برای کار کردن روی رتبه سئویی صفحه دوره، یک لندینگ پیج داشته باشند.
بنابراین می‌توانیم بگوییم که سایت دو مشکل داشت که مشکل اصلی، نبود صفحه فرود یا لندینگ پیچ بود و مشکل دوم نداشتن محتوای مناسب برای این صفحه.
برای رفع مشکلات فاز قبلی، وارد فاز دوم می‌شویم که شامل تولید محتوای صفحه و طراحی لندینگ پیج براساس اصول UI/UX و سئویی است. در این قسمت نیاز به کمک تیم‌های سئو و محتوا و کلاینت داشتیم تا بتوانیم:
راه‌حل: چیدمان صفحه باید ساده و قابل درک باشد. در کنارش باید از فضاهای خالی (Whitespace) به‌درستی استفاده کنیم تا بخش‌های مهم مانند دکمه‌ها، خدمات و مزایا بهتر دیده شوند.
تأثیر: این کار موجب می‌شود که کاربران بدون سردرگمی به اطلاعات اصلی دسترسی پیدا کنند و تجربه کاربری بهتری داشته باشند.
راه‌حل: از رنگ‌های سازمانی در طراحی برای تقویت هویت برند و ایجاد حس اعتماد باید استفاده کنیم. رنگ‌بندی متعادل و هماهنگ باعث می‌شود صفحه جذاب‌تر و خواناتر به نظر برسد.
تأثیر: استفاده از پالت رنگی سازمان باعث شناخت بهتر یوزر از برند می‌شود و از طرف دیگر مشاهده سایر بخش‌های صفحه را هم راحت‌تر می‌کند.
راه‌حل: از تصاویر باکیفیت سازمان مثل خدماتشان، تیم پشتیبانی و واحد ارسال و بسته‌بندی استفاده کنیم تا عملکرد شرکت به طور شفاف به دید مخاطب برسد.
تأثیر: تصاویر باکیفیت اعتماد کاربران را افزایش می‌دهد و در نتیجه راحت‌تر با پست تی ان تی ارتباط می‌گیرند.
حالا که فهمیدیم مشکل چیست و چه راه‌هایی برای حل آن داریم، وقتش رسیده که آستین‌هایمان را بالا بزنیم و وارد دیزاین پروسس طراحی (Design Process: فرآیند دیزاین) بشویم.
فرقی ندارد که فریلنسر طراحی رابط کاربری/تجربه کاربری (UI/UX Designing) باشید یا عضو یک تیم UI/UX، در هر صورت، فرآیند طراحی یا دیزاین پروسس یه مسیر مشخص و تکرارشونده است که به شما کمک می‌کند راه درستی را برای طراحی در پیش بگیرید و به مقصد برسید. ما هم در منتوریکس از این قاعده مستنثی نیستیم و همین کار را انجام می‌دهیم.
این نکته را هم بگوییم که اگر همین الان در اینترنت دنبال مراحل Design Process باشید، با چندین نام مختلف برای مراحل اصلی دیزاین پروسس روبرو می‌شوید که همگی‌شان یک مطلب واحد را می‌گویند. مهم این است که به فرآیند پایبند باشیم و طبق همان پیش برویم.
در این دو مرحله قرار است پایمان را در کفش یوزر یا پرسونای کلینیک بگذاریم که می‌خواهد در دوره آموزشی سایکوانکولوژی بینش نوین شرکت کند. همدلی یا درک کردن یوزر (User) در این مرحله به ما طراحان کمک می‌کند تا درک بهتری از احساسات، عواطف، طرز تفکر، دردها و چالش‌هایشان داشته باشیم و از آن‌ها استفاده کنیم تا طراحی بهتری برای لندینگ داشته باشیم. بعد از آن در مرحله تعریف مسئله یا define، سراغ ارائه‌های راه‌حل‌های کاربردی برای مشکل یا مسئله می‌رویم.
1- چه گروه‌هایی از افراد متخصص سراغ دوره سایکوانکولوژی می‌روند؟
2- تعداد مردان بیشتر است یا زنان؟
3- این افراد برای ثبت‌نام دوره دنبال چه اطلاعاتی هستند و اولویت اطلاعاتشان چیست؟
4- ترجیح می‌دهند تلفنی ثبت‌نام کنند یا در واتساپ؟
5- آیا دنبال مدرک پایان دوره هستند؟
برای رسیدن به جواب این سوالات، جلسه‌ی آنلاینی با تیم بینش نوین ترتیب دادیم. بهتر است در جلسات این چنینی، افرادی که از طرف تیم کلاینت حاضر می‌شوند، اصطلاحا Decider یا تصمیم‌گیرنده باشند و از تمامی جوانب بیزنش مطلع باشند. اما چرا این کار را می‌کنیم؟
اگر با Decider جلسه نکنیم، ممکن است در طی فرآیند طراحی، بارها و بارها رفت و برگشت اطلاعاتی و طراحی رخ دهد که باعث فرسایش تیم و بی‌انگیزگی شود که نتیجه نهایی‌اش، به هم خوردن رودمپ و دیر آماده شدن پروژه است.
نتیجه تحقیق و تفحص ما در مرحله empathize و define این بود که به طور کلی 2 گروه از افراد وارد دوره‌های سایکوانکولوژی می‌شوند:
گروه اول: روانشناسان سلامت و بالینی در مقاطع کارشناسی، کارشناسی ارشد و دکترا
گروه دوم: کادر درمان مانند پزشکان، پرستاران، مددکاران و بهیاران
ترجیح تیم کلینیک بینش نوین این بود که از طریق ورود به صفحه فرود دوره و با کلیک روی دکمه‌ی ثبت‌نام، فرمی را پر کنند و بعد تیم بینش نوین از طریق تماس تلفنی یا واتساپ با آن‌ها در ارتباط باشند.
سایر مواردی که در لندینگ پیج دوره سایکوانکولوژی باید باشد شامل موارد زیر بود:
1- توضیحات منحصر به فرد و دقیق از دوره
2- شیوه یا روند ثبت‌نام
3- مشخصات مدرسین دوره: نام و نام خانوادگی، میزان تحصیل و حوزه تخصصی
4- عکس از گواهینامه‌ی پایان دوره
5- اطلاعات کلی دوره: زمان شروع، پلتفرم، مدت دوره
6- قوانین و شرایط دوره
7- معرفی صفحه اینستاگرام دوره
8- سوالات متداول
حالا که متوجه شدیم چه مواردی را باید در قسمت‌های مختلف لندینگ پیج بگنجانیم، وقتش رسیده بود که ایده‌پردازی کنیم. راستش اگر این مرحله را با محدودیت زمانی در نظر نگیریم، وقت زیادی از ما را خواهد کرد. در این مرحله باید با روی باز، هر پیشنهادی را بشنویم و یاداشت کنیم. طوفان فکری، اسکچ زدن، بررسی لندینگ پیج رقبا از کارهایی است که در این مرحله می‌توانیم انجام دهیم. فقط باید یادمان باشد که اول از همه مشکل را عنوان کنیم و برای راه‌حل‌های آن، طوفان فکری داشته باشیم.
از تیم سئویی برای این مرحله کمک زیادی گرفتیم. از آنجایی که آن‌ها روی رقبای بینش نوین هم کار می‌کنند، صفحات فرود زیادی را به ما معرفی کردند که می‌توانستیم از آن‌ها ایده بگیریم. خود ما هم با بررسی صفحات فرود سایت‌های خارجی متوجه شدیم که چطور برای معرفی دوره‌هایشان کار می‌کنند.
از طرف دیگر، به نکته‌ی مهم دیگری هم باید اشاره کنیم. یک اصلی به اسم منتال مدل (Mental Model: مدل ذهنی) در طراحی صفحات فرود یا لندینگ کمک می‌کند.
مدل ذهنی در معنای کلی‌اش یعنی چارچوب تفکر فردی درباره چگونگی کار در دنیای واقعی و بیرونی اما در طراحی سایت یا دنیای UI UX، این معنی کمی عمیق‌تر خواهد بود. در UI/UX، منتال مدل یوزر یعنی مجموعه باورها و تفکرش درباره سیستمی که مشغول استفاده از آن است. مثلا در پروژه ما، یوزر یا کاربری که وارد صفحه سایکوانکولوژی می‌شود، یک سری سوالات دارد که دنبال جوابشان می‌گردد تا به تصمیم‌گیری‌اش کمک کند.
منتال مدل یک صفحه دوره آموزش سایکوانکولوژی اینگونه است:
1. عنوان دوره:
دوره جامع آموزش سایکوانکولوژی
روانشناسی سرطان: دانش، مهارت‌ها و کاربردهای درمانی
2. توضیح کوتاه (بالای صفحه):
یک توضیح کوتاه و جذاب که به سرعت به کاربران نشان دهد این دوره درباره چیست. مثال: آموزش مهارت‌های روانشناسی برای کمک به بیماران مبتلا به سرطان و افزایش کیفیت زندگی آن‌ها.
3. بخش معرفی (چرا این دوره؟):
توضیح دهیم که سایکوانکولوژی چیست و چرا یادگیری آن مهم است.
اشاره به اهمیت و کاربردهای عملی این علم در کمک به بیماران و خانواده‌ها
4. سرفصل‌های دوره:
معرفی فهرست کامل موضوعات دوره. مثال:
مقدمه‌ای بر سایکوانکولوژی
تاثیرات روانی و اجتماعی سرطان
تکنیک‌های مداخلات روانشناختی در درمان بیماران سرطانی
مدیریت استرس و اضطراب در بیماران و خانواده‌ها
حمایت از بیماران در مراحل پایانی زندگی
5. برای چه کسانی مناسب است؟ (مخاطبین دوره):
روانشناسان، مشاوران، پزشکان، پرستاران، و افراد علاقه‌مند به حوزه بهداشت روان و سرطان.
6. مزایای این دوره:
دانش عملی و مهارت‌محور: یادگیری تکنیک‌های موثر برای حمایت از بیماران.
اساتید مجرب: تدریس توسط متخصصان برجسته در حوزه روانشناسی سرطان.
گواهینامه پایان دوره: ارائه مدرک معتبر پس از گذراندن موفق دوره.
7. روش تدریس:
مثلا استفاده از جلسات ویدئویی، کارگاه‌های عملی و آزمون‌های آنلاین.
8. نحوه ثبت‌نام:
لینک یا دکمه‌ای برای ثبت‌نام که کاربر را به فرم ثبت‌نام هدایت می‌کند.
9. نظرات شرکت‌کنندگان قبلی:
نمایش نظرات مثبت شرکت‌کنندگان قبلی می‌تواند اعتبار دوره را افزایش دهد (به شرطی که دوره قبلا برگزار شده باشد)
10. سوالات متداول (FAQ):
سوالات و جواب‌های رایج درباره دوره
مدت دوره چقدر است؟
آیا پیش‌نیاز خاصی لازم است؟
حالا که منتال مدل را مشخص کردیم و رقبا را هم بررسی کردیم، وقتش رسیده که وارد فاز بعدی شویم: طراحی وایرفریم و پروتوتایپ (Wireframe/Prototype)
بالاخره وارد مرحله‌ای شدیم که باید با وایرفریم یا اسکچ دستی (Napkin Sketch) ایده‌هایمان را پیاده کنیم و بعد از بالا و پایین کردن طرح، به آن رنگ و لعاب بدهیم تا به پروتوتایپ (Prototype) تبدیل شود.
قسمت هیجان‌انگیز دیزاین همین مرحله است، اما اگر به خوبی نتوانیم فونداسیون یا استخوان‌بندی آن را در مراحل قبلی دربیاوریم، ممکن است که مدت زمان زیادی در این مرحله گیر کنیم.
اغلب افرادی که با UI/UX آشنا ندارند، فکر می‌کنند که طراحی یک لندینگ یا حتی سکشن (Section: بخش یا قسمتی از طراحی) به سادگی آب خوردن است و تفکری پشتش نیست اما اینطور نیست. یک طراح موفق و حرفه‌ای برای هر قسمتی که در لندینگ پیج قرار می‌دهد، دلیل یا به قول بچه‌های بازی مافیا، فَکتی دارد. پس بدون پشتوانه و دلیل منطقی طراحی نمی‌کند. البته دقت کنید که گفتیم: حرفه‌ای!
ما برای لندینگ پیج خودمان، یک وایرفریم طراحی کردیم تا حد و حدود سکشن یا قسمت‌های مختلف را بدانیم.
وایرفریم (Wireframe) معمولا به صورت‌های مختلف کشیده می‌شود: اسکچ دستی روی کاغذ، وایت برد یا با ابزارهایی مثل فیگما، ویزلی (visily)، بالزامیک (Balsamiq) و sketch برای طراحی وایرفریم استفاده می‌شوند.
ما برای وایرفریم این پروژه از فیگما استفاده کردیم:
بعد از نهایی شدن وایرفریم و اطمینان از درستی سکشن‌ها، نوبت پروتوتایپ یا طراحی اصلی صفحه رسید. برای طراحی اصلی صفحه نیاز به پالت رنگی سایت، لوگو و سایر المان‌هایی داشتیم که هویت بصری وبسایت را بیان می‌کند. همه این موارد که گفتیم، در قالب دیزاین سیستم (Design System) تعریف می‌شود.
دیزاین سیستم مجموعه‌ای از المان‌های پرتکرار و ثابتی است که در هر وبسایت استفاده می‌شود: دکمه‌ها، رنگ‌ها، تایپوگرافی، پترن‌ها و … .
به دلیل نبود دیزاین سیستم بینش نوین، ما باید چاره‌ی دیگری می‌اندیشیدیم. بنابراین در اینجور مواقع که خبری از دیزاین سیستم نیست، بهتر است که یک UI Kit ساده برای سایت تهیه کنیم. UI Kit به پُر و پیمانی دیزاین سیستم نیست و در این پروژه فقط شامل دکمه‌ها، پالت رنگی، آیکون‌ها، گرید سیستم (Grid System) و تایپوگرافی شد.
بعد از اینکه دستی به سر و گوش Ui Kit سایت کشیدیم، نوبتش رسید که سراغ وایرفریم برویم و رنگ و لعاب به آن اضافه کنیم.
تا یادمان نرفته این نکته را هم بگوییم که برای واقعی‌تر شدن طرح، به یک سری تایتل یا عنوان سئویی که به تگ‌های H معروفند، نیاز داشتیم. البته نوشته‌های توضیحات تیترها را هم باید به لیست نیازمندی‌ها اضافه کنیم.
برای نوشتن محتوا و تگ‌های سئویی از تیم سئو و محتوای منتوریکس و مسئولین کلینیک کمک گرفتیم. علت اینکه از کلاینت یا استیک هولدر (Stakeholder) کمک گرفتیم، اطمینان از صحت اطلاعات بود. یادتان باشد که همیشه برای نوشتن محتوای داخل صفحه یا تعیین آن باید از ذینفع‌های پروژه که به Stakeholder شناخته می‌شوند، هماهنگ باشید. اگر هماهنگ نباشیم، ممکن است بعدا به دردسر بیفتیم و متنی را بارها و بارها بازنویسی کنیم یا اینکه طرح را به طور کلی عوض کنیم.
معمولا در قراردادهای وب دیزاین منتوریکس، کار طراحی و اجرای سایت با خود ماست اما در این پروژه، تیم بینش نوین، دولوپر (Developer) یا کارشناس وردپرس داشت. بنابراین باید جلسه‌ای با او برگزار می‌کردیم و جزئیات طرح را با او در میان می‌گذاشتیم تا اجرا کند.
در یک جلسه آنلاین، طرح را ارائه دادیم و نکته‌های مهم را یادآور شدیم. همچنین اعلام کردیم که آماده کمک کردن هم هستیم. اصطلاحا به این مرحله Standby می‌گوییم: جایی که برای کمک به تیم فنی آماده‌ایم.
از طرف تیم فنی بینش نوین به ما خبر دادند که لندینگ پیج آماده است. البته هنوز لندینگ در حالت پیش‌نویس در وردپرس بود. نتیجه اجرای طراحی برای تیم ما قابل قبول نبود و آن چیزی که انتظارش را می‌کشیدیم اتفاق نیفتاد. اجرای طرح، باگ‌های زیادی داشت که با تهیه اسکرین شات از هر ایراد یا باگ و حتی اسکرین ریکوردینگ از صفحه در موبایل، آن‌ها را به تیم فنی تحویل دادیم تا برطرف کند. اصطلاحا به این مرحله دیباگینگ می‌گوییم و صفحه را از لحاظ کاربردپذیری (Usability) و طراحی بصری مورد بررسی قرار می‌دهیم. ایرادهایی مثل کار نکردن دکمه‌های ثبت‌نام، باز نشدن سرفصل‌ها و سوالات متداول، لینک نبودن دکمه‌های کال تو اکشن شماره تلفن، کوچک بودن سایز نوشته‌ها به خصوص در نسخه موبایلی، اجرای ناقص عکس در قسمت Hero Section از مواردی بود که برای تیم بینش نوین فرستادیم.
به طور کلی، برای طراحی یک لندینگ پیج دوره آموزشی (فرقی ندارد چه دوره‌ای باشد)، باید به موارد زیر توجه کنید:
1- درآوردن منتال مدل کاربر
2- مصاحبه با صاحب بیزنس یا کلاینت (جلسه آنلاین یا حضوری و ارسال پرسشنامه)
3- بررسی لندینگ پیج رقبای داخلی و خارجی
4- تدوین پرسونا
5- گرفتن تاییدیه از صاحب بیزنس یا ذینفع اصلی پروژه (تصمیم‌گیرنده اصلی: Decider)
6- برگزاری جلسه تحویل دیزاین به تیم فنی
