تعداد بازدید 270

magbot

طراحی رابط SaaS: روند ها و بهترین روش برای طراحی رابط کاربری SaaS

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

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

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

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

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

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

یکی دیگر از سایت هایی که دارای ناوبری داشبورد مشابه هستند، FreshBooks با این حال آنها برچسب ها را در کنار آیکون ها قرار می دهند تا بتوانید به راحتی آنچه را که برای هر پیوند است، ببینید.

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

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

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

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

تیم BuzzSumo حتی گروه بندی برنامه خود را گسترش داده تا محصول جدیدی را شامل شود. BloomBerry پرسش های رایج را براساس موضوع اصلی یا کلمات کلیدی دسته بندی می کند.

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

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

آمار ترافیک، حجم کلمات کلیدی، گراف های رقیبان، عملکرد کلمات کلیدی بالا و حتی snippet غنی داده ها با تصاویر همراه آنها.

کلید موفقیت این است که SEMrush این نمودار ها را به صفحات مختلف تقسیم می کند. نمای کلی "داشبورد" برای یک وب سایت با داده ها بسته بندی می شود. اما همانطور که در رابط کاربری عمیق تر می بینید، هر صفحه فقط اطلاعات قابل مشاهده مربوط به موضوع را نشان می دهد (افزایش رتبه بندی، تحقیق رقیب، و غیره).

یک نمونه عالی دیگر در داشبورد آیرفز .

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

داشبورد VWO می توانید نمونه خوبی باشد.

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

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

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

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

مقالات مرتبط

قواعد جدید برای پیمایش در طراحی وب

پذیرش رویکرد طراحی در مرورگر

طراح و توسعه دهنده full-stack

تعداد بازدید 270 طراحی رابط SaaS: بهترین روش برای طراحی رابط کاربری SaaS
نویسنده	پیام