چطور یک دیزاین سیستم طراحی کنیم؟

تو دنیای پیچیده امروز دیزاین، جای یه دیزاین سیستم تو محصول مثل یه سوپر قهرمان ناشناس و بی سر و صدا میمونه. دیزاین سیستم همزمان با اینکه سعی میکنه برند رو حفظ کنه چارچوب ساختاری رو ارائه میده که فرآیند دیزاین و توسعه رو چندین و چند پله بالا تر میبره.

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

بدون دیزاین سیستم چی میشه؟

قبل از اینکه در مورد مرحله های طراحی دیزاین سیستم صحبت کنیم بیایید در مورد این صحبت کنیم که اگه دیزاین سیستم نداشته باشیم چی میشه، مخصوصا تو یه محصول و تیم بزرگ که از دیزاینر های مختلف تشکیل شده، خب وقت رو تلف نکنیم بریم ببینیم بدون دیزاین سیستم چی اتفاقی برای محصول میوفته.

ناهماهنگی بصری

بدون یه دیزاین سیستم، طراحی‌های مختلف تو محصول قطعا هماهنگی های بصری خودشون رو از دست میدن. از طرف دیگه این نبود هماهنگی بصری باعث ضربه خوردن به برند میشه خود این ضربه خوردن باعث افت اعتماد کاربر ها نسبت به برند و محصول میشه.

از بین بردن زمان

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

گنگ‌شدن فرآیند توسعه

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

هزینه تغییرات

برند ها و محصولات همیشه در حال پیشرفت هستن، حالا فرض کنید یه محصول نیازه به تغییر توی برخی کامپوننت ها داره یا حتی بزرگ تر از اون، محصول به طور کامل ریبرند کرده و نیازه که کل محصول با برند جدید هماهنگ بشه، بدون داشتن یه دیزاین سیستم، تغییر دادن یه کامپوننت یا حتی همسو کردن کل محصول با برند جدید تقریبا یه کار غیر ممکنه و بعد از تغییر دادن تازه متوجه این میشید که تو چه چالش بزرگی افتادید، چون اونجاست که نا هماهنگی های محصول چندین و چند برابر میشه.

کاهش تمرکز بر نوآوری

بدون داشتن یه دیزاین سیستم واحد، دیزاینر های شما مجبورن به جای تمرکز روی کار اصلی یعنی دیزاین کردن، روی مسائل بیهوده و تکراری وقت بذارن و این یعنی از بین رفتن نوآوری و تکرار مسائل بیهوده.

اگه بخواییم کلی بگیم، نداشتن دیزاین سیستم میتونه به تنهایی یه مانع بزرگ برای توسعه و پیشرفت محصول شما بشه و بهتره هر چه زود تر تو تیم محصولتون برای طراحی و ساخت دیزاین سیستم یه بودجه مشخص بذارید چون دیر یا زود مشکل های بالا گردن گیر شما میشن. خب حالا میرسیم به اینکه برای داشتن یه دیزاین سیستم باید چه مراحلی رو طی کنیم. بریم سراغ اصل مطلب.

۱ - هدف

تو پست های قبلی هم راجب این موضوع صحبت کردیم،‌ تا وقتی ندونید به کجا میخوایید برید، نمیتونید مطمعن باشید که مسیر درستی رو انتخاب کردیم، در نتیجه قبل از هر چیز با تیمتون مشخص کنید که دقیقا با طراحی دیزاین سیستم دنبال چی هستید و چه هدفی دارید. دامنه دیزاین سیستم شما باید به طور کامل مشخص باشه، نه تنها برای خودتون تعریف شده باشه بلکه برای افراد خارج تیم شما هم یک مسیر مشخص و روشن باشه. مواردی مثل اینکه آیا این دیزاین سیستم فقط شامل بخش دیجیتال محصول میشه یا بخش چاپی یا حتی هر دو بخش رو پوشش میده. تعیین هدف های واضح تصمیم‌گیری‌های شما تو طول فرآیند طراحی و ایجاد دیزاین سیستم رو بسیار راحت تر و بهینه تر میکنه، پس قبل از هر چیز، اول ببینید که هدفتون چیه.

۲ - تحقیق

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

نکته کنکوری
به عنوان یه لید تیم طراحی دیزاین سیستم یکی از بزرگ ترین مشکل هایی که همیشه با اون درگیر بودم، این بوده که افراد مختلف که به شکلی با دیزاین سیستم درگیرن، نظر های مختلفی در مورد کامپوننت ها دارن، از مدیر های محصول گرفته تا توسعه دهنده ها و یا حتی دیزاینر ها.

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

اما راه حل چیست؟
برای حل این مشکل ما برای هر کامپوننت یه تعریف مشخص نوشتیم و برای اینکه این تعریف وارد جلسه های طولانی نشه و همه افراد هم اون رو قبول داشته باشن، این تعریف هارو به یه رفرنس معتبر وصل کردیم، در نهایت برای تمام کامپوننت ها داخل داکیومنت یک رفرنس مستقیم به سایت W3 ایجاد کردیم تا هم برای هر کامپوننت تعریف مشخصی داشته باشیم و هم اینکه اگه کسی درخواست اضافه ای داشت، خیلی راحت افراد رو به رفرنس ارجاع بدیم و مشکل حل بشه. بهم اعتماد کنید، حجم بزرگی از درخواست ها از بین میره و آدم ها هم خیلی زود تر از قبل قانع میشن.

۳ - هویت بصری و استایل ها

یک از بزرگ ترین هدف های یه دیزاین سیستم هماهنگی بصری تمام بخش های محصول با همدیگه هستش. برای شروع بخش طراحی با تعیین هویت بصری برند شروع کنید، این هویت بصری میتونه شامل بخش های زیر بشه:

تایپوگرافی

هر برندی قطعا فونت و تایپوگرافی های مخصوص به خودش رو داره، بخش بزرگی از هر محصول رو متن ها تشکیل میدن، برای هماهنگی و همچنین خوانا بودن بخش های مختلف محصول شروع کنید به تعریف تایپوگرافی ها و قلم‌های مختلف. این تایپوگرافی ها میتونن برای عنصر های مثل هدینگ، متن اصلی و یا هر عنصر دیگه ای که تو محصول وجود داره دسته بندی بشن.

پالت رنگ

اما بعد از تایپوگرافی میرسیم به پالت های رنگی، هر محصولی از تعداد زیادی رنگ تشکیل شده از رنگ های برند گرفته تا رنگ های خنثی، پس مرحله بعدی ایجاد یک پالت رنگی است. پیشنهادم اینه از همون شروع کار با توکن ها پیش برید و رنگ های خودتون رو توکنایز کنید.

بخش هویت بصری و استایل ها میتونه شامل موضوعات دیگه مثل نوع استفاده از لوگو و برند، فاصله ها و ... بشه اما اصلی ترین ها تایپوگرافی و پالت رنگی هستن که بدون اون ها جلو بردن دیزاین سیستم عملا غیر ممکن میشه.

۴ - توسعه

کامپوننت های رابط کاربری (UI) آجر های ساختاری ساختمان دیزاین سیستم شما هستن. شروع به طراحی کتابخونه ای از کامپوننت های قابل استفاده کنید، کامپوننت هایی مثل دکمه‌ها، فرم‌ها، منوهای ناوبری، آیکون‌ها و ... این کامپوننت ها بسته به هر محصول میتونن تعداد و انواع متفاوتی داشته باشن اما همیشه بعضی از اجزا مثل دکمه ها (Button)، چک باکس ها (Checkboxs)، اینپوت ها (Inputs) و ... جزو کامپوننت های اصلی هستن و تقریبا تو هر محصولی استفاده میشن. البته که سعی میکنم تو یه پست جدا در مورد کامپوننت های ضروری بیشتر صحبت کنم. مطمعن بشید این طراحی ها چه از لحاظ ساختاری و چه از لحاظ ظاهری با برند محصول همخونی داشته باشن. در نهایت ابزارهایی مثل Figma، Sketch یا Adobe XD میتونن برای طراحی و سازماندهی این کامپوننت ها خیلی خیلی کمک‌کننده باشن. (البته که اگه از من میشنوید تا ابد فیگما ?)

۵ - مستندسازی

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

۶ - دسترسی‌پذیری

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

۷ - همکاری و بازخورد

همیشه روی این نکته پا فشاری داشتم دیزاین یعنی تعامل، این میتونه گاهی تعامل با کاربر باشه یا گاهی تعامل با افراد ذینفع، چیزی که مشخصه اینه که در نهایت نتیجه یه تعامل خوبه که باعث دیزاین خوب میشه. افراد کلیدی از جمله دیزاینر ها، توسعه‌دهنده ها، مدیر های محصول و ... رو تو فرآیند طراحی و ایجاد دیزاین سیستم درگیر کنید. همیشه سعی کنید روحیه بازخورد پذیری و همکاری داشته باشید و باقی افراد رو هم تشویق به این کار کنید تا دیزاین سیستم به طور مداوم در حال بهبود باشه. تو این مورد هم بهم اعتماد کنید، فکر های متفاوت باعث خروجی های شگفت انگیز میشه.

۸ - اجرا

وقتی که دیزاین سیستم به مرحله نهایی رسید و برای استفاده آماده شد، وقت اونه که این دیزاین سیستم رو توی پروژه‌های مختلف شروع به استفاده کنید. تو نوع استفاده چند پیشنهاد بهتون میدم، البته که این رویکرد، توی محصول های مختلف میتونه متفاوت باشه، پیشنهاد اولم اینه که استفاده کننده اول دیزاین سیستم خود شما نباشید و از افراد دیگه بخوایید که شروع به استفاده از بخش های مختلف دیزاین سیستم بکنند، این بهتون کمک میکنه که خیلی راحت تر حفره های احتمالی رو پیدا و برطرف کنید. به عنوان پیشنهاد دوم، پیشنهاد میکنم تو چند محصول به صورت محدود شروع به تست کنید و باگ ها احتمالی رو پیدا و برطرف کنید، این شروع محدود به شما کمک میکنه که هزینه کمتری برای تغییرات احتمالی بدید در انتها مطمعن بشید که تیم توسعه تسلط کافی به استفاده از کامپوننت ها، اجزا و دستور عملی های دیزاین سیستم دارن و مشکلی در استفاده نیست.

۹ - نگهداری

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

۱۰ - آموزش

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

در نهایت

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