نکات مهم در طراحی پنل آکاردئونی

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

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

در این مقاله به صورت خاص روی یک رابط کاربری ساده تمرکز خواهیم کرد، پنل های آکاردئونی!

کالبدشکافی پنل آکاردئونی

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

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

انتخاب یک نماد برای نشان دادن باز و بسته بودن

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

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

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

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


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

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

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

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

انتخاب مکان آیکون

بدون درنظر گرفتن آیکونی که انتخاب کرده اید، برای مکانی که می توانید آیکون را در آنجا قرار دهید، ۳ انتخاب دارید:
الف) در سمت چپ عنوان
ب) در سمت راست عنوان
c) در امتداد لبه سمت چپ کل نوار و Align کردن آن را با عنوان

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

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

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

نحوه ی تعامل کاربر با پنل آکاردئونی

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

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

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


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