آموزش
آموزش

UX و UI، تفاوت ها و بکارگیری در وردپرس


با پیشرفت صنعت طراحی وب، شاید در طول روز کلمه های UI و UX که به معنای User Interface (رابط کاربری) و User Experience (تجربه کاربری) میباشند را زیاد بشنوید. حتی بسیاری از افراد، این دو اصطلاح را به جای هم به کار میبرند و از تفاوت دقیق آنها آگاه نیستند. اگر به این دو مبحث از طراحی وب علاقه مندید، در ادامه ی این نوشته از منطقه وردپرس با ما باشید تا یک بررسی جامع بر این دو اصطلاح داشته باشیم.

UX چیست؟

تعریف تجربه کاربری در طراحی وب به این صورت است :

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

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

اهمیت UX برای توسعه دهندگان و طراحان وردپرس

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

ux

چگونه UX را بهبود بخشیم ؟

ابتدایی ترین و مهم ترین عاملی که در بهبود تجربه کاربری به شما کمک میکند، افزایش uptime سایت است! شاید این موضوع به نظرتان ساده و بدیهی بیاید،‌ اما شما از زمان دقیق آپتایم و دان تایم سایتتان آگاه هستید؟‌ بدترین چیز برای یک سایت، در دسترس نبودن آن است! بد نیست نگاهی به سایر عواملی که نقش مهمی در تجربه کاربری سایت شما ایفا میکنند، بیاندازیم :

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

طراحی مبتنی بر محتوا:‌ Content is the king! بسیاری از شما این جمله معروف بیل گیتس(مقاله) را شنیده اید! شما باید سایت خودتان را برای انسان طراحی کنید، نه برای خزنده های گوگل!‌ محتوای سایت شما باید متناسب با عنوان سایت و برچسب هایی باشد که در گوگل ایندکس میشوند!

تا اینجا فکر کنم مفهوم User Experience را درک کرده باشید، حالا به سراغ UI میرویم!‌

رابط کاربری چیست؟‌

این اصطلاح نیز در بین طراح وب بسیار رایج است! در حقیقت UI یک واسط بین ماشین و انسان است! UI همان چیزی ست که شما در سایت میبینید مانند دکمه ها، تصاویر، فرم ها و … . نکته ای که باید بدانید اینست که برای پیاده سازی ظاهری UX،‌ از UI استفاده میکنیم! یک طراح UI با ساخت فرم ها، آیکون ها، تایپوگرافی ها و …. ، با کاربر تعامل(UX) میکنند. توضیحات شغل یک طراح رابط کاربری را در KPMG بخوانید.

چرا طراحی UI برای وردپرس کاران مهم است؟

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

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

برای مثالی از طراحی رابط کاربری، بد نیست نگاهی به گذشته پنل مدیریت وردپرس داشته باشیم :

نمونه یک رابط کاربری بد

پیشخوان وردپرس در سال ۲۰۰۳

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

نمونه یک رابط کاربری خوب در وردپرس

رابط کاربری وردپرس در سال ۲۰۱۵

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


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

نمایش دیدگاه ها
در حال حاضر هیچ دیدگاهی وجود ندارد

دو × = ده