درختان تصمیم برای اجزای رابط کاربری – مجله Smashing

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

بیایید چند نمونه از آن را بررسی کنیم درخت تصمیم برای اجزای UI و چگونه می توانیم بیشترین بهره را از آنها ببریم.

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

ناوبری B2B و اجزای راهنما: Doctolib

سیستم طراحی Doctolib یک سیستم طراحی بسیار چشمگیر با درختان تصمیم، مسیرهای ناوبری B2B، عکاسی، ورودی پین، نوشتن UX و اعلان های پیامکی است – و راهنماهای کامل در مورد نحوه انتخاب اجزای رابط کاربری.

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

درختان تصمیم برای اجزای رابط کاربری: روز کاری

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

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

درخت تصمیم اجزای فرم: Lyft

یک انتخاب از a جزء فرم اغلب می تواند دلهره آور باشد چه زمانی باید از دکمه های رادیویی، چک باکس ها یا کرکره ها استفاده کنید؟ Runi Goswami از Lyft درخت تصمیم گیری اجزای فرم را با جزئیات به اشتراک گذاشته است که به تیم آنها کمک می کند بین کنترل های فرم انتخاب کنند.

ما با بررسی اینکه آیا یک کاربر می تواند بیش از یک گزینه را در رابط کاربری ما انتخاب کند یا خیر، شروع می کنیم. اگر واقعاً چند انتخابی است، برای گزینه‌های کوتاه از کلیدها و برای گزینه‌های طولانی‌تر از چک باکس استفاده می‌کنیم.

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

انتخاب اجزای Onboarding: NewsKit

Onboarding به اشکال و اشکال مختلفی ارائه می شود. بسته به نحوه ظریف یا برجسته ما می‌خواهیم یک ویژگی خاص را برجسته کنیم، می‌توانیم از پاپ‌اورها، نشان‌ها، نکات، پرچم‌ها، نان تست‌ها، کارت‌های ویژگی استفاده کنیم یا حالت خالی بهتری طراحی کنیم. تیم Newskit یک نمونه اولیه Onboarding Selection را در Figma جمع آوری کرده است.

انتخاب بستگی به این دارد که ما بخواهیم قطع کردن کاربران برای نمایش جزئیات (معمولاً خیلی مؤثر نیستند) نشان می دهد یک ویژگی به طور ماهرانه در طول تجربه (موثرتر)، یا فعال کردن کشف با برجسته کردن یک ویژگی در زمینه کاری که کاربر سعی در انجام آن دارد.

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

نمودارهای جریان فرآیند سیستم طراحی: هسته

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

و در اینجا درخت های تصمیم گیری مفید برای اضافه کردن اجزای جدید به یک سیستم طراحی:

درختان تصمیم را قابل مشاهده کنید

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

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

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

شایان ذکر است که هر پروژه ای به درخت های سفارشی خود نیاز دارد، بنابراین لطفاً نمونه های بالا را به عنوان یک مشاهده کنید ایده برای ساختن و برای نیازهای خود سفارشی کنید.

با الگوهای طراحی رابط هوشمند آشنا شوید

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

100 الگوی طراحی و نمونه های واقعی.
دوره 10 ساعته ویدیویی + آموزش زنده UX. پیش نمایش رایگان.