طراحی سایتی که بار ذهنی کاربر رو کم میکنه
فرانتاندخلاصهٔ کاملتر
این مقاله یه مطالعهٔ موردی از پروژهای به اسم «A Better Lou»ئه؛ یه سایت حوزهٔ سلامت که سؤال اصلی طراحاش این بوده: چطور برای آدمایی سایت طراحی کنیم که اصلاً حوصله ندارن وقتشون رو پای خوندن سایتهای سلامت بذارن؟ به گفتهٔ تیم، مشکل رایج این سایتها اینه که میخوان همهچی رو یهجا توضیح بدن و نتیجهش میشه صفحههای شلوغ با دکمهها و تصمیمهای زیادی که کاربر رو خسته میکنه.
اولین تصمیمشون این بوده که بهجای زبان بصری کلیشهای پزشکی (رنگ آبی، عکس دکترای روپوشسفید، تصاویر بالینی) اعتماد رو از راه شفافیت بسازن؛ یعنی با تایپوگرافی، فاصلهگذاری، سلسلهمراتب و عکسهای نزدیک به زندگی واقعی. تصمیم مهم دوم هم این بوده که ساختار سایت رو حول «نتیجه» بچینن نه «درمان». نویسنده میگه آدما معمولاً دنبال اسم یه درمان نمیگردن، با یه مشکل میان: کمانرژی بودن، کندی ریکاوری، یا اثرات بالا رفتن سن.
بخش زیادی از مقاله دربارهٔ مقیاسپذیریه. به گفتهٔ تیم، ساختن چند صفحهٔ خوشگل سخت نیست؛ چالش واقعی وقتیه که سایت بزرگ میشه و سرویس و بخش جدید اضافه میشه. برای همین بهجای ساختن لحظههای خاص و جدا، از اول یه سری قاعده و الگوی تکرارشونده تعریف کردن تا صفحهٔ جدید بدون بازطراحی کامل اضافه بشه. تجربهٔ سالها کارشون با وبفلو هم بهشون یاد داده که ساختار محتوا، روابط CMS و کامپوننتهای قابلاستفادهٔ دوباره باید از همون اول در نظر گرفته بشه، نه بعد از لانچ.
از نظر پیادهسازی، کل سایت تو وبفلو ساخته شده و کارشون همیشه با پایهها شروع میشه: تایپوگرافی، دکمهها، لینکها، فاصلهها و کامپوننتهای تکرارشونده. محتوای پویا هم از طریق Webflow CMS مدیریت میشه و حتی میشه دادهها رو از فایل CSV وارد کرد تا بهروزرسانی سایت شبیه مدیریت یه فایل اکسل بشه. برای انیمیشنها از GSAP استفاده کردن که با یکپارچگی نیتیو وبفلو، بدون کدنویسی دستی و شبیه کیفریمگذاری تو افترافکت ساخته میشه. برای ویدیو هم بهجای امبد مستقیم، یه اتصال سفارشی به Vimeo با ID و پارامتر hash درست کردن تا کلاینت فقط با عوضکردن ID ویدیو رو آپدیت کنه.
جمعبندی نویسنده اینه که سختترین بخش یه پروژه، ساختن چند صفحهٔ چشمگیر نیست؛ ساختن چیزیه که وقتی محتوا زیاد میشه، سرویسها عوض میشن و تیم بعد از لانچ باهاش کار میکنه، همچنان کارراهانداز بمونه. به نظرش بهترین سیستمها اوناییان که بیسروصدا از رشد پشتیبانی میکنن، بدون اینکه شش ماه بعد مجبور بشی همهچی رو از نو فکر کنی.
نکات کلیدی:
- بهجای چیدن سایت سلامت دور درمانها، اونو دور نتیجهای که کاربر دنبالشه بچین.
- اعتماد رو با شفافیت و تایپوگرافی بساز، نه با کلیشههای بصری پزشکی.
- مقیاسپذیری رو از اول با الگوهای تکرارشونده و ساختار CMS طراحی کن، نه بعد از لانچ.
- کل پروژه تو وبفلو با GSAP برای انیمیشن و اتصال سفارشی Vimeo برای ویدیو ساخته شده.
