محصولت از نقشهٔ ساختمونش بزرگ‌تر شده؟
فرانتاندخلاصهٔ کامل‌تر
محصول‌های جدید با چند فیچر محدود و یه ساختار ساده شروع می‌کنن و همون سادگی بخشی از جذابیتشونه. ولی به گفتهٔ یسنیا پرز-کروز، وقتی محصول رشد می‌کنه مفهوم‌های تازه باید تو ساختاری جا بشن که برای محصول ساده‌تری ساخته شده بود. نتیجه‌ش میشه پاپ‌آپ و اورلی روی هم، رفتار دکمهٔ back نامنظم، و یه دکمهٔ edit که معلوم نیست inline باز میشه یا مودال میاره یا کل صفحه رو عوض می‌کنه.
تیم Slack همین نقطه رو تو نوشتهٔ Rethinking Slack توصیف کرده: محصول از یه ساختار سه‌ستونی برای پیام و فایل و سرچ شروع شد، بعد posts و صدا و ویدیو و دایرکتوری و thread و ری‌اکشن اضافه شد و کاربرها دیگه نمی‌فهمیدن دارن چی می‌بینن. نویسنده می‌گه تو کتاب Expressive Design Systems نوشته بود دیزاین سیستم جواب این drift هست، ولی حالا فکر می‌کنه بلوک‌های یکسان فقط نصف مشکل رو حل می‌کنن.
دکمه و رنگ و تایپوگرافی مشترک مثل ساختن یه خونه با مصالح یکسانه، اما خونه نقشهٔ ساختمون هم داره که می‌گه هر فضا کجاست و چطور بین‌شون حرکت می‌کنی. تو یه نقشهٔ خوب دو چیز برقراره: رابط دقیقاً همون‌طور که محصول کار می‌کنه رو نشون می‌ده، و وزن رابط با وزن واقعی اون تعامل جور درمیاد. تب یعنی حرکت کنار به کنار بین هم‌رده‌ها، و آیتم‌های یه ساید‌نویگیشن مثل اتاق‌های یه راهرو دیده می‌شن.
مشکل از جایی شروع میشه که رابطه‌های زیر این الگوها عوض می‌شن ولی خود الگوها سر جاشون می‌مونن. تو Substack، آیتم Dashboard کنار Home و Explore نشسته پس همه شبیه اتاق‌های یه راهرو به نظر می‌رسن، در حالی که Dashboard آدمو می‌بره به فضای جدای مدیریت نشریه و اونجا Home معنی دیگه‌ای داره. در مقابل YouTube لینک ورود به Studio رو کنار آواتار و حساب کاربری گذاشته، پس اون جهش بزرگ‌تر منطقی به نظر می‌رسه.
تو Shopify هم تیم‌ها مدام اورلی اضافه می‌کردن، چون سریع‌ترین راه شیپ کردن یه فیچر بدون دست زدن به اتاق زیریه. به همین خاطر کامپوننت Sheet تو Polaris حذف شد، چون خیلی از اون فیچرها جاشون همون صفحهٔ پایینی بود و sheet فقط یه context switch الکی اضافه می‌کرد. بعدش لایه‌های فضایی برعکس شدن و عنصر global به پایین منتقل شد، تا سطح کار مثل یه پنجرهٔ جابه‌جاشدنی روی یه فریم ثابت بشینه و راه برگشت معلوم باشه.
نکات کلیدی:
- نویسنده دو شرط برای یه نقشهٔ ساختمون روشن می‌ذاره: رابط ساختار واقعی محصول رو نشون بده، و وزن رابط با وزن تعامل جور باشه
- کامپوننت Sheet از دیزاین سیستم Polaris شاپیفای حذف شد، چون فیچرهاش معمولاً جاشون خود صفحه بود
- شاپیفای عنصر global رو از نوار بالا به پایین منتقل کرد تا سطح کار مثل پنجرهٔ جابه‌جاشدنی روی فریم ثابت بشینه
- تو Substack همون رابطهٔ بین تجربهٔ خواننده و ناشر، بسته به این که کجای محصول باشی، با فاصلهٔ متفاوتی نمایش داده میشه
- هزینهٔ عقب انداختن اصلاح ساختار جمع میشه: هر مودال و شیت تکراری یه چیز دیگه‌ست که باید با صفحهٔ زیرش هم‌گام نگه داشته بشه
