ساده ترین روش تجزیه و تحلیل جریان کار یا یک روش ساده برای اثبات خود و ذینفعان است که جریان کاری که ایجاد کرده ایم ارزش اجرای آن را دارد.

ما به عنوان طراح ، غالباً باید به خود و ذینفعان ثابت کنیم که چه کار مهمی انجام داده ایم و شایسته اجرا شدن را دارد. یافتن استدلال های قانع کننده برای اینکه آنها باور کنند که جریان به روز شده موفقیت آمیز خواهد بود دشوار است (ایده های عالی)

یکی از بهترین راه ها برای نشان دادن کارایی یک محصول یا عملکرد چیست؟ شماره! برای خاص تر بودن – ایده های معتبر با داده ها. من ساده ترین روش تجزیه و تحلیل جریان کار را در این مقاله با شما به اشتراک می گذارم.

نگاهی به مثال onboarding flow

                                                             Onboarding flow

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

۱:کلیک کردن

۲:تایپ کردن

۳:باز کردن لینک

۴:طومار

در مرحله بعد، باید آنها را با توجه به اهمیت آنها (بار ذهنی)، زمان و تلاش صرف شده ارزیابی کنیم. به عنوان مثال، به نظر می رسد پیمایش ساده ترین کار است زیرا کاربر مجبور نیست تصمیمی اساسی بگیرد. آنها هنگام پیمایش فقط به سرعت به محتوا نگاه می کنند. بنابراین من 1 امتیاز به آن اختصاص دادم. این یک قسمت بسیار ذهنی از فرایند است، بنابراین در هنگام ارزیابی، آزادانه آزمایش کنید. در مورد من Tap 3 امتیاز ، Type 5 امتیاز و لینک خارجی 10 امتیاز است (این بالاترین میزان است زیرا کاربران مجبور به ترک برنامه هستند که می تواند خطرناک باشد).

صفحه ها را ارزیابی کنید

علائم را برای شناسایی هر عمل در نزدیکی صفحه های مربوطه قرار دهید:

                                12 Taps / 4 Types / 1 External link / 1 Scroll

جریان را ساده کنید

اکنون وقت آن است که جریان را ساده کرده و اقدامات را دوباره بشماریم. من تصمیم گرفتم چهار صفحه اول را به یکی تبدیل کنم، انواع ورودی ها را کنار هم قرار داده و تعداد فیلدهای ورودی رمز عبور را حذف کردم. در اینجا نسخه ساده جریان(onbording) وجود دارد:

                   

                      6 Taps / 3 Types / 1 External link / 1 Scroll

محاسبه

به محض ارزیابی جریان های اولیه و به روز شده، وقت آن است که اکسل را باز کرده و دو صفحه ایجاد کنیم. یکی برای نسخه اولیه و دیگری برای نسخه به روز شده. فرمولهای ساده را در ستون سوم وارد کنید (e.x. = B1 * 3 – در صورت ضربه زدن – تعداد شیپور خاموشی در مقدار آن).

                                                            Tap counts =B1*3

به محض اینکه فرمولهایی در ستون C وارد شد ، ستون B را با رقم پر کنید. نمره کل در ستون 5 و سطر C نشان داده می شود (برای مشاهده نتیجه = SUM را وارد کنید (C1: C4 در آن).

کار در Excel اختیاری است ، شما می توانید همه چیز را فقط با استفاده از قلم و کاغذ محاسبه کنید

اکنون می توانید نتایج را مشاهده کنید: جریان به روز شده 37٪ ((67-42) / 67×100 = 37) ساده تر از جریان اصلی است!

 

چه زمانی ساده ترین روش تجزیه و تحلیل جریان کار مفید است؟

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

 

منبع: uxmag.com

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

 در مرحله ای هستیم که می توانید برای مشاغل خاص سیستم های طراحی درخواست کنید و اظهاراتی مانند: “در آینده ، هر مارک و هر محصولی از سیستم طراحی استفاده خواهد کرد” کاملاً منطقی به نظر می رسد.

من در مورد سیستم های طراحی همان احساسی را دارم که قبل از سخنرانی ناتاشا جن در سال ۲۰۱۸ با عنوان “Desin Thinking Is Bullsh * t” در مورد تفکر طراحی احساس کردم. یعنی چرا هیچ کس در مورد نکات منفی صحبت نمی کند؟ معلوم شد که کاملاً درست نیست.

در جستجوی بیش از ۲۰۰ مقاله در medium و سایر وبلاگها بصورت آنلاین ، من در زیر همه روش هایی که برای بررسی جنبش سیستم های طراحی آغاز شده است، یک جریان زیرزمینی را پیدا کردم.

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

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

تعریف

ریشه مشکل سیستم های طراحی را می توان در تعریف یافت. در اینجا یک توضیح ساده از یک مقاله محبوب در این زمینه آورده شده است: “

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

 

هر آنچه باید بدانید

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

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

مجموعه ای از اجزای طراحی رابط کاربر بدون همراهی فلسفه، اصول، دستورالعمل ها، فرآیندها و مستندات مانند ریختن یک دسته از اجزای IKEA روی زمین است و گفتن” اینجا ، یک کمد بساز! “دستورالعمل ها و مستندات همراه با اجزای طراحی رابط کاربری به عنوان کتابچه راهنمای همراه با اجزای IKEA برای کمک به کاربر در ساخت درست و موفقیت آمیز مبلمان. ” ~

 

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

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

سیستم های طراحی ، طراحی را به یک جعبه تأیید تبدیل می کنند

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

ناتاشا جن: تفکر طراحی مزخرف است

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

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

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

این باعث بی ارزش شدن طراحی و تضعیف طراحان می شود. “شما نمی توانید طراحی را بسیار مورد توجه قرار دهید در حالی که مقدار زیادی از آن را به سیستم کنترل مرکزی منتقل می کنید.”

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

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

 

سیستم های طراحی وقت تلف می کنند

ما ۲ سال را در حال ساخت بهترین بخش مدل مشارکت برای سیستم طراحی GOV.UK هستیم و هنوز کار ما تمام نشده است. حتی نزدیک نیست. ” ~

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

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

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

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

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

درست است که سیستم های طراحی به شما امکان می دهد در یک زمینه سریعتر پیش بروید – وقتی که در یک مسیر اشتباه حرکت می کنید.

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

اما با کوتاه کردن روند طراحی و تأکید بیش از حد بر سرعت، سیستم های طراحی فضای مورد نیاز را برای سوال بردن فرضیات موجود در یک کار از بین می برند ،

 احتمالات جدید را تصور می کنند یا حتی در وهله اول آیا این ویژگی یا صفحه نمایش جدید مورد نیاز است یا خیر.

سیستم های طراحی کار نمی کنند

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

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

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

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

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

 

سیستم های طراحی متن را نادیده می گیرند

طراحان آموزش دیده اند و انتظار می رود که بر اساس قضاوت تصمیمات خوبی بگیرند … برای در نظر گرفتن این قضاوت در سیستمی که از طریق گروه اندیشی آشکار می شود ، ارائه تخصص طراحان فردی به یک نیروی خارجی است.”

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

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

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

 خارج کردن یک مولفه از متن ، تنظیم قوانین و انبوهی از متغیرها ، این توهم غلط را ایجاد می کند که اکنون این مولفه می تواند بدون مراجعه به متن جدید اعمال شود.

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

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

اگر چیزی همیشه عملی شود ، همیشه به روز می شود ، چگونه می توان به آن اعتماد کرد؟

سیستم های طراحی خلاقیت را در بند میکشد و مهارت را از بین میبرد

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

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

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

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

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

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

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

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

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

نکته آخر

من معتقدم ما باید سیستم ها را نتیجه یک طرز تفکر درباره طراحی بدانیم.

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

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

 

منبع: uxplanet.org

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

    سایز کوچک: فقط شامل اجزای بسیار اصلی و ویژگی های آن است

    قابل تنظیم: برای اجازه دادن به بیان نام تجاری در برنامه های مختلف

    علامت گذاری: چارچوب برای استفاده در هردسته از برنامه ها

با جستجوی راه حل های موجود، نمی توانم راه حلی پیدا کنم که تمام این شرایط را برآورده کند.

برخی از آنها دارای ویژگی های زیادی بودند که من نیازی به آنها نداشتم ، برخی از آنها سفارشی سازی کم را مجاز نمی دانند و بیشتر آنها براساس یک چارچوب خاص مانند React ، Vue یا Angular ساخته شده اند.

من ساختن Kor را در 21 نوامبر 2019 آغاز کردم و اولین نسخه 4 روز بعد منتشر شد. از امروز ، 7000+ بارگیری در npm ، 92 ستاره در GitHub و 300 کاربر متوسط ماهانه دارد.

۱- تعریف قوانین پایه سیستم های طراحی

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

ابعاد

ابعاد تأثیر زیادی در هماهنگی ادراک شده رابط کاربر دارد و بهترین راه برای دستیابی به آن تعریف واحد پایه است. در مورد Kor ، این واحد به عنوان 8 px  تعریف شد ، قراردادی که توسط اکثر سیستم های طراحی متناسب با رایج ترین وضوح صفحه نمایش دنبال می شود. معمولاً واحدها به شرح زیر تعریف می شوند:

8px: فاصله بین عناصر یک جز

16px: حاشیه اجزای خارجی

24px: اندازه نمادها و ارتفاع خط

در موارد نادر مانند رابط های کاربری متراکم با اطلاعات ، شبکه 8px را می توان یک بار دیگر تقسیم کرد و در نتیجه 4 مانند 4 ، 12 یا 20 افزایش می یابد.

رنگ ها

از رنگ ها برای انتقال سلسله مراتب ، برجسته سازی حالت ها و جلب توجه به برخی از مولفه های UI استفاده می شود. برای کاهش پیچیدگی و تغییر آسان تم ها ، در Kor من بر کاهش تعداد رنگ ها به حداقل توجه کرده ام و در مجموع 4 دسته تعریف شده است:

   پایه: پس زمینه محتوا(مانند نوار برنامه ، کارت ها ، صفحه)

  خنثی: رنگهای مثبت و منفی (مانند متن ، خطوط تقسیم کننده و موارد برجسته شفاف)

  لهجه: رنگهای برجسته حالت فعال و فراخوان

 عملکردی: رنگهای تأیید ، هشدار ، خطا و حالت خنثی

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

تایپوگرافی

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

با مختصر نگه داشتن مقدار سبک ها ، 4 سبک قلم تعریف شده و از طریق متغیرها قابل تنظیم هستند:

هدر 1: برچسب نوار برنامه و عناوین محتوا

هدر 2: عناوین مولفه ها (به عنوان مثال برگه ها ، کارت ها)

 متن 1: برچسب های مولفه (به عنوان مثال برچسب ها ، کادرهای تأیید)

 متن 2: متن ثانویه مولفه (به عنوان مثال آواتار)

ارتفاع

روش مفید دیگر برای سازماندهی UI و انتقال سلسله مراتب محتوا ، استفاده از ارتفاعات است. در Kor من 4 لایه تعریف کرده ام که با استفاده از رنگ و سایه تنظیم می شوند. مقادیر رنگی برای هر لایه بر اساس تأثیر طبیعی نور بر روی سطوح تعریف شده است، به این معنی که لایه های نزدیکتر به بیننده در هر دو مضمون روشن و تاریک روشن تر از لایه های دیگر هستند.

بسته به زبان بصری برنامه ، می توان سایه ها و رنگ ها را در صورت ترجیح دادن ظاهر مسطح ، دوباره تعریف یا حذف کرد.

لایه 1: پس زمینه صفحه

لایه 2: محتوای کناری (صفحه ها ، میله های ناو)

لایه 3: ظروف محتوا (کارت ، آکاردئون)

لایه 4: محتوای پوشانده شده (اعلان ها ، روش ها)

شمایل نگاری (کشیدن ایکون)

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

۳-ساخت کامپوننت‌ها

کامپوننت‌های سیستم طراحی واحدهای UI هستند که عمومی هستند (که می توانند در موارد مختلف استفاده شوند) و با استفاده از ویژگی ها، اسلات ها و رویدادها قابل تنظیم هستند. برنامه ها معمولاً از 80٪ مولفه های رایج مانند دکمه ها یا فرم‌های اینپوت و 20٪ از موارد منحصر به فرد مانند نقشه ها یا تقویم ها تشکیل شده اند.

در سیستم طراحی Kor من موارد متداول را متمرکز کرده ام تا آن را مختصر و سبک وزن نگه دارم.

• ویژگی ها دکمه هایی هستند که از طریق آنها می توان اجزا را سفارشی کرد (به عنوان مثال برچسب دکمه ها).
• رویدادها توسط اجزای برنامه فعال می شوند (به عنوان مثال کلیک روی دکمه)
• اسلات‌ها ظرفهایی هستند که می توان محتوای سفارشی را در آنها قرار داد (به عنوان مثال متن داخل کارت)

۳:کشیدن و رها کردن سندباکس

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

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

۴. مستندات، راهنمایی و پشتیبانی

به موازات طراحی و توسعه سیستم طراحی، من در صفحه اصلی اسناد برای توضیح نحوه تنظیم، مصرف و کمک به Kor کار کرده ام.

کل برنامه وب با خود کتابخانه مولفه ساخته شده است.

منبع: uxplanet.org

فرایند گام به گام و الگوی miro

با اینکه ماه‌ها شده است کهداریم  از خانه کار میکنی و پایان این دورکاری مشخص نیست، تیم ما باید نحوه همکاری و برقراری ارتباط را تنظیم کند.

 مدت‌ها گذشته است که ما می توانیم جلسات آزمایش شخصی، طوفان مغزی و کارگاهی را که زمانی برای گردش کار ما ضروری بودند، برگزار کنیم.

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

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

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

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

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

چگونه می توانم نقشه سفر کاربر ایجاد کنم؟ در اینجا مراحل تشکیل کارگاه نقشه برداری سفر کاربر مجازی آورده شده است:

۱. حوزه کارگاه را مشخص کنید.

ابتدا باید مشخص کنید که می‌خواهید با کدام کاربر سفر کنید. متمرکز کردن کارگاه در یک سفر خاص کاربر به شما امکان می‌دهد تا در تجربه کاربر عمیق تر فرو رفته و با یک نقشه سفر با برنامه‌ریزی بیشتر ظهور کنید.

۲. افراد را به شرکت دعوت کنید.

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

این اطمینان می‌دهد که نقشه سفر شما کاملاً گرد است و راهی عالی برای سرمایه‌گذاری ذینفعان مربوطه در روند طراحی است.

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

۳. برای کارگاه آماده شوید قبل از کارگاه مجازی، باید فضای کار را آماده کنید.

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

نکته: از شرکت کنندگان بخواهید حساب‌های Miro (یا حساب های هر برنامه ای را که استفاده می کنید) را زودتر از موعد ایجاد کنند و در صورت دسترسی به آنها آزمایش کنند.

۴. کارگاه را برگزار کنید.

هورا!

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

در غیر این صورت ، شرکت کنندگان شما باید درگیر مکالمات باشند و بیشتر کارها را انجام دهند. این برنامه‌ای است که من برای تیم خود ایجاد کردم:

۱. مقدمه (۵دقیقه): استقبال و مروری کلی در مورد نحوه برگزاری کارگاه و نتایج دلخواه

۲. کارشخصی (۵دقیقه): شرکت کنندگان اطلاعات شخصیت خود را مرور می کنند و نقشه همدلی خود را پر می‌کنند (این کار به افراد فرصتی می‌دهد تا ویژگی‌های شخص را مرور کنند).

۳. طوفان فکری (۵دقیقه): شرکت کنندگان اهداف شخصیت خود را (گسترده یا خاص) می‌نویسند و قدم بر روی نت‌های چسبنده فردی می‌گذارند.

۴. ایجاد نقشه سفر کاربر (۲۵دقیقه): شرکت کنندگان در گروه‌ها کار می‌کنند تا بفهمند در کدام گروه اهداف یکسانی دارند و سپس کارهایی را از این اهداف ایجاد و سازماندهی می‌کنند تا یک سفر خطی را تشکیل دهند.

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

۵.  استراحت (۵دقیقه)

۶.  ارائه‌ها و بحث‌ها (۳۰دقیقه): هر گروه نقشه سفر کاربر خود را با همه ارائه و بحث می‌کند.

۷. بحث فرصت (۱۵دقیقه): اکنون که همه از سفرهای شخصی و نقاط درد عبور کرده اند، وقت آن است که نقشه‌های نهایی را با هم مرور کنیم تا لحظات اصلی سفر را با بیشترین فرصت برای پیشرفت برجسته کنیم.

چه تغییراتی به نفع بیشترین افراد خواهد بود و بزرگترین مشکلات موجود را برطرف می کند؟ دستیابی به چه اهدافی برای کاربران ما مهم است؟

۸.  جمع‌بندی (چند دقیقه آخر): از شرکت کنندگان برای کمک‌شان تشکر کرده و مراحل بعدی را به آنها اطلاع دهید.

9. پیگیری کنید.

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

نتیجه

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

 

منبع: uxplanet.org

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

در این مقاله ، من قصد دارم هر یک را با مثال توضیح دهم و بررسی کنم.

۱- قابل مشاهده بودن وضعیت سیستم

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

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

• وقتی روی دکمه ارسال روی فرم کلیک می شود
• وقتی سفارش خرید دریافت شد
• وقتی کالایی به سبد خرید شما اضافه یا حذف می شود
• هنگامی که یک تلاش برای ورود موفقیت آمیز است یا نه
• وقتی داده وارد شده نادرست یا در قالب نادرست باشد

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

اگر در اینجا قابلیت مشاهده “افزودن به سبد خرید” را فراهم نمی کردیم، کاربر می توانست مرتباً بر روی دامن کوچک تام هنکس کلیک کند و در نهایت به طور تصادفی دوازده خرید کند! اگر قصدی باشد که آنها قصد داشتند قضاوت نکنید ، اما شما احتمالاً فقط یک قضاوت را می خواهید. 😉

۲- مطابقت بین سیستم و دنیای واقعی

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

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

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

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

۳- کنترل و آزادی کاربر

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

شاید کاربر متوجه نشده باشد که هنر هنکی چقدر گران است و از کل زیرمجموعه دلار ۴۲۰۰ دلاری خود احساس اندکی غرق شدن می کند! به همین دلیل ما یک دکمه حذف به شکل سطل زباله (مطابقت بین سیستم و دنیای واقعی) داریم تا آنها بتوانند به راحتی عملکرد “افزودن به سبد خرید” را لغو کنند.

برخی از مثالهای خوب دیگر شامل گزینه Gmail برای واگرد پیام ایمیل ارسالی و گزینه Undo / redo هنگام ویرایش اسناد در اسناد Google است. این یک عمل کاملاً کاربرپسند است زیرا افراد غالباً نظر خود را تغییر داده و پشیمانی فوری را تجربه می کنند. برخی از وب سایت های دیگر با گزینه های “خرید سریع” ممکن است از این مزیت استفاده کنند و توانایی کنترل کاربر پس از کلیک روی دکمه خرید را نفی کنند.

۴- سازگاری و استانداردها در طراحی رابط کاربری

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

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

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

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

۵- پیشگیری از خطا در طراحی رابط کاربری

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

یک مثال عالی برای جلوگیری از خطا را می توان در وب سایت ها و برنامه های بانکی یا انتقال پول مشاهده کرد. قبل از انجام معامله یا انتقال پول به یک دوست ، معمولاً یادداشتی از کاربر خواسته می شود که “آیا مطمئن هستید که می خواهید X $ به حساب Y منتقل کنید؟”. این پیام ها و مراحل تأیید اضافی می تواند کاربران را از مشکلات زیادی نجات دهد ، به خصوص اگر آنها قصد انجام چنین کاری را نداشته باشند.

۶- شناخت به جای یادآوری در طراحی رابط کاربری

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

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

به عنوان مثال ، اگر از شما سوال شود “آیا پاریس پایتخت فرانسه است؟” ، 3 سرنخ زمینه به شما داده می شود: پاریس ، پایتخت و فرانسه. اگر از شما سوال شود “پایتخت فرانسه چیست؟” ، فقط 2 سرنخ به شما داده می شود: پایتخت و فرانسه.

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

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

۷- انعطاف پذیری و کارایی استفاده

 شتاب دهنده ها – که توسط کاربر تازه کار دیده نشده است – ممکن است اغلب تعاملات کاربر متخصص را تسریع کنند به گونه ای که سیستم بتواند پاسخگوی کاربران بی تجربه و باتجربه باشد. به کاربران اجازه دهید اقدامات منظم را متناسب کنند.

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

یک مثال عالی برای این کار ، قابلیت کپی و چسباندن متن است. یک کاربر تازه کار می تواند مراحل زیر را انجام دهد:

• متن را برجسته کنید
• به بخش «ویرایش» بروید
• روی “کپی” کلیک کنید
• روی مکانی که می خواهند متن برود کلیک کنید
• به بخش «ویرایش» بروید
• روی «چسباندن» کلیک کنید

این بسیار خوب کار خواهد کرد، اما یک کاربر باتجربه تر می تواند برای صرفه جویی در وقت ، این مراحل را کاهش دهد:

• متن را برجسته کنید
• “Command + C” را بزنید
• روی مکانی که می خواهند متن برود کلیک کنید
• “Command + V” را بزنید

نمونه دیگری از این انعطاف پذیری را می توان در اینستاگرام یافت ، جایی که کاربران می توانند نماد ❤️را پیدا کرده و کلیک کنند ، یا فقط روی پست دوبار ضربه بزنند تا آن را “پسند” کنند.

۸- طراحی زیباشناختی و مینیمالیستی

در طراحی رابط کاربری گفتگوها نباید حاوی اطلاعات بی ربط یا به ندرت مورد نیاز باشد. هر واحد اطلاعاتی اضافی در گفتگو با واحدهای اطلاعاتی مربوطه رقابت می کند و از دید نسبی آنها می کاهد.

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

در اینجا مثال بسیار خوبی از یک وب سایت داریم که همراه با این اکتشافات خاص دنبال نمی شود:

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

دوباره ، شاید لینگ در واقع یک نابغه است زیرا کلیک کردن روی آن بسیار دشوار است.

۹- به کاربران کمک کنید خطاها را شناسایی، تشخیص و بازیابی کنند

 پیام های خطا باید به زبان ساده (بدون کد) بیان شوند ، دقیقاً مشکل را نشان دهند و به طور سازنده ای راه حل را پیشنهاد دهند.

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

به عنوان مثال ، اگر سعی کنید بدون وارد کردن ایمیل یا رمز عبور روی “ورود” در Pinterest.com کلیک کنید ، خطای زیر را مشاهده خواهید کرد:

در اینجا به ما پیام واضحی درباره اشتباه و نحوه رفع آن داده شده است و ورودی با قرمز برجسته شده است (یک رنگ مشترک با علامت “توقف” یا “خطا”)

منبع: prototypr.io

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

بسیاری از طراحان در پرسیدن این سال ها کوتاهی می کنند و بدون تأمل زیاد به طور خودکار از کادرهای تأیید استفاده می کنند. در نتیجه، آنها با استفاده از آنها در زمینه غلط، مسائل کاربردی را ایجاد می کنند.

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

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

۱- برچسب های “نه” منفی است

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

۲- موارد تکراری وظیفه مضاعف دارند

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

۳- هدف بزرگتر به عنوان نشانه تشکر از شما

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

۴- سریعتر از لیست لباسشویی از موارد، اسکن می شود.

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

۵- هنگامی که احساس‌ها یکی نیستند، از چک‌مارک استفاده نکنید

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

برای دسترسی به مقالات بیشتر و اطلاع از مقالات جدید عضو خبرنامه شوید.

منبع: uxmovement.com