گرایش‌های پرطرفدار در طراحی رابط کاربری SaaS

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

همچنین از ابتدای شکل‌دهی اسکلت تا آماده شدن همه نمونه‌های اولیه باید برای تجربه کاربری آن برنامه‌ریزی کنید.

در این مطلب برخی از گرایش‌های محبوب و رایجی را که در طراحی پنل مدیریت وب‌سایت‌های saas یا Software as a Service به‌کاررفته‌اند گردآوری شده است که در ادامه آنها را بررسی خواهیم کرد.

راهبری سراسری saas

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

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

از نمونه های داخلی saas می توان وب سایت Tools.hostiran.net را نام برد که به صورت خودکار، سایت را مورد بررسی قرار می دهد.

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

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

FreshBooks هم نوع دیگری است که از منوی کاربری مشابهی با منو عمودی بهره می‌برد.

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

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

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

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

مقاله مرتبط: اشتباهات UI که به UX لطمه می‌زند

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

طبقه‌بندی پویا

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

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

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

همه گزینه‌های طبقه‌بندی نتایج در منوهای کشویی طراحی‌شده‌اند تا کاربر بتواند با توجه به نیازش آن‌ها را باز کند یا ببندد.

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

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

داده‌های تصویری مرتب

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

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

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

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

نکته اصلی اینجاست که SEMursh این جدول‌ها و گراف‌ها را به صفحه‌های مختلف تقسیم می‌کند. نمای «کلی» منوی کاربر برای هر وب‌سایت انتخابی داده‌های مختلفی را نشان می‌دهد اما اگر عمیق تر به رابط کاربری این اپلیکیشن نگاه کنید، متوجه می‌شوید که هر صفحه فقط داده‌های مصور مرتبط با موضوع (افزایش رتبه سایت، تحقیق درباره رقیبان و غیره) را به نمایش می‌گذارد.

منوی کاربری اپلیکیشن Ahrefs هم نمونه موفق دیگری از این مورد است.

Ahrefs یکی از رقیبان سرسخت SEMursh به شمار می‌رود و بدین ترتیب هر دو اپلیکیشن داده‌های مشابهی را برای کاربر به نمایش می‌گذارند؛ اما Ahrefs عمدتاً روی بررسی کیفیت بک لینک‌ها و لینک‌ها متمرکز است.  نمودارها و جدول‌های تصویری این اپلیکیشن معمولاً درباره تعداد بک لینک‌ها، گراف‌های عملکرد لینک‌ها بر اساس زمان و سایر معیارهای مرتبط هستند.

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

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

طراحی‌ رابط کاربری متراکم

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

مقاله مرتبط: بهترین ابزارهای طراحی رابط کاربری (UI) و تجربه کاربری (UX)

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

روش‌های مختلفی برای طراحی رابط کاربری متراکم و البته مرتب وجود دارد؛ آنچه در ادامه مشاهده می‌کنید برخی از این روش ها هستند:

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

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

البته این طراحی ممکن است در نگاه اول برای کاربران تازه‌وارد خوشایند به نظر نرسد؛ اما هرچه بیشتر از آن استفاده کنید، بیشتر با ویژگی‌ها و ترتیب ارائه داده‌های آن آشنا می‌شوید.

اغلب کاربران رابط کاربری متراکم را می‌پسندند چراکه همه داده‌ها در مقابل چشمانشان دیده می‌شود و می‌توانند به همه اطلاعات موردنیازشان به‌راحتی دسترسی پیدا کنند. بازهم باید تأکید کنیم که هیچ طراحی بدون نقصی وجود ندارد اما بهتر است هرچه کاربر نیاز دارد را در قالب رابط کاربری متراکم به او ارائه دهید.

اپلیکیشن ManageWP هم یک مثال فوق‌العاده دیگر از این نوع طراحی است.

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

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

کلام آخر

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