چک لیست طراحی صفحه‌ی تنظیمات

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

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

در این مقاله از سری مقالات چک لیست طراحی به سراغ Setting page می‌رویم و اصول طراحی آن را بررسی می‌کنیم.

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

در طراحی صفحه‌ای تنظیمات ابتدا نیاز است با مفاهیم زیر آشنا شویم.

یافت‌پذیری- Findability

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

تنظیمات Profile.ir

هر چقدر پیدا کردن تنظیمات مورد نظر کاربر راحت‌تر باشد تجربه‌ی بهتر و سریع‌تری از کار با اپلیکیشن ما خواهد داشت.

استفاده از Mega pattern و نمایش همه‌ی تنظیمات در یک صفحه یافت‌پذیری را زیاد می‌کند اما از طرفی طرح را شلوغ کرده و Cognitive Load را افزایش می‌دهد در نتیجه برای نمونه‌های با تنظیمات زیاد و یا صفحات اپلیکیشن که فضای کمتری دارد مناسب نیست.

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

درک‌پذیری - Understandability

درک‌پذیری به زبان ساده به مفهوم بودن کارکرد تنظیمات اشاره دارد.

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

https://twitter.com/amirtaqiabadi/status/1210868745142493184

آیکن، عنوان، توضیحات و آموزش هر تنظیم می‌تواند به افزایش درک‌پذیری کاربر از آن ویژگی منجر شود.

یادآورپذیری - Memorability

یادآورپذیری هم یکی از المان‌های مهم کاربرپذیری محسوب می‌شود و به این موضوع اشاره می‌کند که امکانات و جایگاه آنها در مراجعه‌ی بعدی چقدر به راحتی به یاد می‌آید.

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

بخت‌یافت - Serendipity

یافتن تصادفی یا بخت‌یافت به یافته یا دستاوردی اتفاقی و مفید و مثبت گفته می‌شود که جوینده به دنبالش نبوده و به صورت جانبی و اتفاقی بدست آمده‌ است. اولین بار یک نویسنده انگلیسی در نامه‌ای خطاب به دوستش در فلورانس از این کلمه استفاده کرده. او می‌نویسد که این عبارت را با تکیه بر افسانه ای ایرانی به نام "سه شاهزاده سرندیپ"، اثر نویسنده هندی فارسی‌زبان، امیرخسرو دهلوی، ابداع کرده.
در این افسانه سه شاهزاده بارها کشفیات اتفاقی می‌کنند که بسیار مفید هستند. از این گونه موارد تصادفی‌ یافت شده می‌توان این موارد را برشمرد:
کشف قاره آمریکا، پنیسیلین، قرص وایاگرا، تفلون، پرتو ایکس، برگه‌های یادداشت چسبنده (Post-it Note)، جوراب ساق‌بلند (جوراب نایلون)، ال اس دی و ... - ویکیپدیا

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

مثلا اولین بار که به صورت اتفاقی متوجه یک قابلیت خاص در تلگرام یا اینستاگرام شده‌اید را به یادآورید.

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

قطعا توجه به محدودیت‌های افراد دارای معلولیت نه تنها باعث افزایش بالقوه تعداد کاربران می‌شود بلکه به عنوان مسوولیت اجتماعی سازمان می‌تواند باعث تبلیغات مثبت و بهبود وجه شرکت نزد مشتریان شود.

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

حال که به مفاهیم مهم در طراحی Setting Page آشنا شدید وقت آن است به مسیر طراحی آن برسیم.

عناوین، آيکن و توضیحات مناسب

اولین قدم در طراحی صفحه‌ی تنظیمات لیست کردن تمامی تنظیماتی است که کاربر به آن نیاز دارد. از آنجا که زمان و هزینه‌ی توسعه در این مسیر دشمن شماست لازم است ابتدا دست به انتخاب مهم‌ترین ویژگی‌ها به کمک ماتریس Feature Audit که با نام Red Routes هم شناخته می‌شود بزنید.

محور افقی در این ماتریس تعداد کاربرانی که به آن ویژگی نیاز دارند و محور عمودی تناوب استفاده از آن ویژگی است. بدیهی است که ویژگی‌هایی که در این نمودار به سمت راست و بالای ماتریس ( جایگاه ستاره در تصویر) متمایل‌تر هستند اولویت بالاتری برای پیاده‌سازی دارند.

لیست به دست آمده را به ترتیب بچینید و بررسی کنید که آیتم‌های بالاتر آیا ویژگی اصلی اپلیکیشن شما نباشند که در این صورت جایگاه آن ویژگی‌ها در صفحه‌ی اصلی اپلیکیشن شما است نه در صفحه‌ی تنظیمات.

به عنوان مثال ویژگی فلاش دوربین در اپلیکیشن تومن یا WhatsApp Web در واتس‌اپ یک ویژگی مهم برای کارکرد آن است و در صفحه‌ی اصلی قرار گرفته است.

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

پس از مشخص کردن ویژگی‌ها لازم است برای هر ویژگی یک نام، آیکن (در صورت نیاز)، توضیحات و مدل عملکردی آن را مشخص کند. مدل عملکردی یعنی باید مشخص کند که قرار است با استفاده از Toggle button تغییر موضع دهد یا Radio button یا ...

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

گروه‌بندی و اولویت‌دهی

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

در تنظیمات واتس‌اپ نسخه‌ی اندروید زیرگروه هر دسته نیز در توضیحات آن نوشته شده است تا یافت‌پذیری بهتر شود.

مدل بالا یکی از موارد پر استفاده است. اما برای لیست با تعداد تنظیمات کمتر می‌توان آنها را متناسب با تناوب استفاده به 2 یا سه گروه Quick Setting، General Setting و Advanced Setting تقسیم‌بندی کرد که ویژگی‌های پر استفاده‌تر با Interaction Cost کمتری در دسترس باشد.

این ویژگی برای فاز 1 که تعداد ویژگی‌ها کم است می‌تواند خیلی مفید باشد اما زمانی که تعداد ویژگی‌ها در فازهای بعدی بیشتر می‌شود دردسر ساز است و ناچار به تغییر دسته‌ها مطابق با گزینه‌ی اول می‌شویم که چون صفحات تنظیمات با تغییرات زیادی روبرو می‌شود و کاربران ذاتا نسبت به تغییرات موضوع دارند (نگاه شود به مقاله‌ی 10 خطای شناختی اثرگذار در طراحی Pricing Page بخش سوگیری دگرگون گریزی) موجب ناراحتی شده و کاربر مجبور است مجددا فرآیند یادگیری را طی کند.

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

همچنین اگر تعداد دسته‌ها زیاد است می‌توان مانند تصویر بالا به کمک قوانین گشتالت در طراحی UI با استفاده از رنگ‌بندی (Similarity) یا مجاورت (Common Region و Proximity)، گروه‌های مشترک را به هم مرتبط کرد.

جستجو در تنظیمات

بدیهی است اگر عناوین و توضیحات انتخابی برای هر ویژگی متناسب با Mental Model افراد باشد جستجوی تنظیمات به خصوص در لیست‌های بلند تنظیمات می‌تواند به شدت راهگشا باشد به شرطی که همانطور که در مقاله‌ی چک لیست طراحی Search Box گفتم فراموش نکنید که در hint فیلد جستجو قید کنید که برای جستجو در تنظیمات است و نه کل اپلیکیشن و نیز آن را در بالای لیست تنظیمات قرار دهید.

آیتم‌های مخرب در دور دست

یکسری از تنظیمات هستند که هم برای کاربر و هم Business مخرب هستند. گزینه‌هایی نظیر Delete Account و Detective و نیز Clear Data و از این دست تنظیمات که قطعا دوست نداریم کاربر اشتباها آنها را انتخاب کند. در نتیجه لازم است آنها را دور دست قرار دهیم و حتی برای انجام آنها با مودال تایید مجدد از کاربر بگیریم که سهوا انتخاب نشود.

بسیاری از شبکه‌های اجتماعی برای آنکه نمی‌خواهند شما Deactive و Delete Account کنید حتی این ویژگی را در نسخه‌ی موبایل قرار نمی‌دهند و شما را مجبور به استفاده از وبسایت می‌کنند و برای نهایی کردن آن رمز عبور شما را مجددا طلب می‌کنند.

اینستاگرام و فیسبوک به قدری پیدا کردن این ویژگی را سخت کرده‌اند که برای یافتن آن حتما باید گوگل کنید.

در مقاله‌ی کوتاه در مورد Dark Patterns در طراحی من باب این این موضوع بیشتر صحبت کرده‌ام.

ویژگی Log out یا خروج از حساب کاربری هم هرچند به اندازه‌ی موارد قبلی مخرب نیست اما بهتر است در انتهای لیست ویژگی‌ها قرار گیرد و با Modal تاییدِ خروج، محافظت شود.

اعلانات ضروری در بالای لیست

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

پیشنهادات در انتهای لیست

همچنین اگر تخفیف یا پیشنهادات مناسبتی دارید می‌توانید آن را در انتهای لیست و با رنگ متمایز قرار دهید و یا در قسمت پیام‌ها (اگر این قسمت را دارید) با اضافه کردن دایره‌ی قرمزرنگ نوتیفیکیشن آن را متمایز کنید.

اگر برنامه‌ی Referral Marketing هم دارید می‌توانید معرفی برنامه به دوستان را با رنگ متفاوت در انتهای لیست قرار دهید.

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

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

اگر به این مقاله علاقه‌مند بودید، مقالات زیر را نیز پیشنهاد می‌کنم و فراموش نکنید که لایک کنید و کامنت بگذارید.