درس هایی برای طراحی محصول مقیاس پذیر
مقیاس پذیر ی در طراحی محصولات، فاکتور بسیار مهمی در ارائه ی یک تجربه ی کاربری خوب به مشتریان است. دو دلیلی که اهمیت سازگار بودن محصول را می رساند، یکی سادگی در یادگیری و دیگری کاهش سردرگمی کاربران نهایی است. همه ی ما می دانیم که سازگاری از دید کاربر نهایی مهم است، اما باید بدانیم که این موضوع هم چنین زمانی که با مجموعه ای از مهندسان و طراحان وب بر روی پروژه ی مشترکی کار میکنیم مهم است.
در POWr، شرکتی که بر ساخت برنامه های کاربردی تمرکز دارد، مشکل مقیاس پذیری و سازگاری محصولات زمانی که کتابخانه ی برنامه های کاربردی به 50 عدد افزایش یافت، آشکار شد. این مشکل به طور داخلی زمانی شروع شد که هر برنامه ای بر حسب مهندسی که روی آن کار می کرد به شکل متفاوتی طراحی می شد. مهندسان و طراحان بدون پیروی از هیچگونه استاندارد یا مستندسازی به هر پروژه به صورت جداگانه نگاه می کردند. این موضوع منجر به طراحی های مجزا و عدم سازگاری نه تنها در خود برنامه ها، بلکه در طراحی وب سایت، ایمیل، داشبوردهای کاربران و … شد.
کاملا آشکار است که برای موفقیت در کسب و کار تولید برنامه های کاربردی، نیاز به منبعی از الگوها یا فرآیندها در زمینه ی طراحی و تجربه کاربران داریم. به غیر از موضوع حفظ سازگاری، دریافتیم که مهندسان معمولا محصولات یکسانی را به روش های مختلف می ساختند. این موضوع منجر به تفاوت های ریشه ای در طراحی شده و بهره وری را تحت تاثیر قرار می دهد. در یک تیم کوچک که افزونه های زیادی را تولید می کند این موضوع بسیار مهم است که هرکسی از زمان خود بهترین بهره را ببرد و دوباره کاری هیچ جایی اتفاق نیفتد. تمیز نگه داشتن کد و جلوگیری از هرگونه دوباره کاری امری بسیار مهم و حیاتی است.
در نهایت ما سه چیز مهم را در طراحی محصولات مقیاس پذیر آموختیم که در اینجا آنها را برای شما آورده ایم:
در نام تجاری خود متخصص باشید.
قدم اول این است که شما کی هستید و می خواهید نام تجاری خود را چگونه معرفی کنید؟ این موضوعی نیست که چند نفر به طور جداگانه بتوانند در مورد آن تصمیم بگیرند. نمایندگان همه ی دپارتمان های خود را دور هم جمع کرده و چیستی نام تجاری خود را با چند روش ساده تعیین نمایید. باید بدانید ارزش های شرکت شما چه چیزهایی است و می خواهید این ارزش ها را چگونه معرفی کنید؟ گام بعدی این است که بر روی چگونگی ترجمه ی این مفاهیم به طراحی کار کنید.
سپس نگاه منتقدانه ای به واسط های کاربری محصول خود بیندازید. زمانی که این کار را انجام می دهید ممکن است متوجه وجود سبک های مختلفی در رنگ ها، طراحی دکمه ها، سایه زنی ها و … شوید. این ناسازگاری و عدم مقیاس پذیر ی به شناسایی نام تجاری و تجربه کاربران شما لطمه می زند. بایستی زبان تصویری محصول خود را به گونه ای تعریف کنید که با شخصیت برند شما همخوانی داشته باشد. زبان تصویری شکل ها، آیکون ها، تایپوگرافی و رنگ را شامل می شود. هنگامی که این موضوعات تعریف شد، می توانید به صورت موثرتری طراحی کنید و فرآیندهای کسب و کار خود را تعریف نمایید.
تعیین کنید در چه جاهایی می توانید کارایی را بهینه کنید.
این قسمت می تواند بسیار وقت گیر باشد اما مزایای آن بسیار زیاد خواهد بود. زمان را در تعریف اجزای مورد نیاز در طراحی محصول، تجربه کاربری و آنچه در کار شما بارها مورد استفاده مجدد قرار می گیرد سرمایه گذاری کنید. در این مرحله بسیار مهم است که با مهندسان و توسعه دهنگان مجموعه ی خود صبحت کنید. باید مولفه هایی را که در طراحی سایت یا محصول شما مورد استفاده مجدد قرار می گیرند بشناسید و آن ها را تا حد ممکن مستقل نماییدبه این معنی که آن ها می توانند در هر محل و هر شرایطی قرار بگیرند و به گونه ای که از آن ها انتظار می رود رفتار کنند. استفاده مجدد از مولفه ها، منجر به کاهش زمان تست کیفیت محصول خواهد شد.
اگر شما از یک پیش پردازنده ی CSS مانند SASS یا LESS استفاده می کنید، ویژگی های مانند رنگ، شعاع مرزی، تایپوگرافی و … را به متغیرها یا mixin ها اضافه کنید. اینکار قابلیت نگهداری کد شما را افزایش می دهد چراکه این متغیرها قابل استفاده مجدد خواهند بود. در صورتی که به هرگونه تغییر یا به روز رسانی، مثلا در رنگ ها، نیاز داشته باشید به جای تغییر عدد مبنای شانزده آن در قسمت های مختلف کد، کافی ست تنها یکبار مقدار متغیر مربوطه را عوض کنید. یعنی بیشتر از سبک ها و مولفه های آماده استفاده کنید و بدین ترتیب زمان کدنویسی را کاهش دهید.
با در نظر گرفتن این مراحل، تیم شما بسیار کارامدتر خواهد شد و از بسیاری کارهای خسته کننده و تکراری جلوگیری خواهد شد. در نتیجه شاهد سازگاری و هماهنگی بیشتری در کل خروجی های تیم مهندسی خود خواهید بود.
راهنمای جامعی برای سبک ها توسعه دهید.
همه ی ما می دانیم که باید کدهایی با قابلیت نگهداری تولید کنیم، اما به منظور این که مطمئن شویم در طول زمان نیز این موضوع رعایت خواهد شد باید قوانینی در مورد نحوه ی استفاده وضع کنیم. اگر این کار را نکنید متوجه خواهید شد که همه ی افراد به شکل یکسانی فکر نمی کنند و این بر کد، محصول، شناخت نام تجاری و تجربه کاربری شما تاثیرگذار خواهد بود.
مرحله اول این است که نام گذاری اجزا و مولفه ها را استاندارد سازی کنید. یک روش نام گذاری مانند BEM، SMACSS یا OOCSS انتخاب کنید. حتی می توانید بر حسب اینکه چه چیزی برای کسب و کار شما بهتر است از ترکیبی از روش های بالا استفاده نمایید. هر تصمیمی که می گیرید، مطمئن شوید که به آن وفادار می مانید.
دومین مرحله این است که دستورالعمل هایی برای چگونگی استفاده از مولفه ها تعریف کنید. آیا می دانید که استفاد از منوی کشویی را ترجیح می دهید یا یک دکمه ی رادیویی؟ یا می دانید در هر فرم جدیدی نوتیفیکیشن ها را در چه جایی قرار دهید؟ داشتن یک دستورالعمل این ابهام ها را رفع نموده و طراحی را آسان می کند.
سوم اینکه این مولفه ها را ماژولار نگه دارید. در POWr ماژولار نگه داشتن مولفه ها به ما کمک کرد که کدهای CSS را تمیز و سازمان دهی شده نگه داریم.
یک سیستم طراحی به شما کمک می کند تا ضمن بهبود تجربه ی کاربری، همواره تیم مهندسی خود را در مسیر درست نگه دارید.
یک سیستم طراحی به شما کمک می کند طراحی و تجارب خود را سازگار نگه دارید. این کار مسیر را برای یک تجربه ی کاربری بی نظیر هموار می کند. از دید داخلی، سیستم طراحی به شما کمک می کند تا با استفاده از دستورلعمل های ساده و قابل اجرا و مولفه های قابل استفاده مجدد، بهره وری تیم خود را در طراحی، مهندسی و توسعه افزایش دهید.
نیازی نیست که هربار می خواهید چیزی به سایت یا محصول خود اضافه کنید، از نو چرخ را اختراع کنید! همان طور که ما در POWr اینکار را انجام دادیم و اکنون نتیجه ی آن در کتابخانه ی کلی افزونه های ما قابل مشاهده است. این کار منجر به تولید کدی تمیز تر، بهره وری بالاتر مهندسان و طراحان فرآیند توسعه ی چابک محصولات خواهد شد. در نهایت منجر به تولید محصولی مقیاس پذیر و سازگار می شود.
اگر به دنبال تولید یک محصول مقیاس پذیر هستید، یک فرآیند طراحی و یک دستورالعمل ایجاد کنید. به ما اعتماد کنید، ارزشش را خواهد داشت.
