UI و UX چیست؟چگونه از نقص های UX در طراحی خود بپرهیزیم؟

UI و UX چیست؟چگونه از نقص های UX در طراحی خود بپرهیزیم؟

آنچه در این مقاله میخوانید

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

UI و UX چیست؟

به بیان ساده مجموعه ای از صفات و عناصر بصری مانند button  و icon  هستند که کاربر برای ارتباط با سایت یا برنامه موردنظر از آنها استفاده میکند.

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

Ui 

UI مخفف عبارت User Interface Design می باشد. در سال 1981 گروهی از مهندسان کامپیوتر با طراحی کامپیوتر شخصی Xerox PARC , رابط گرافیکی کاربر را به دنیا معرفی کردند که از پنجره ها، آیکون ها، منوهای radio button ، down-drop و checkbox ها استفاده میکرد.

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

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

UX

ui و ux چیست؟چگونه از نقص های ux در طراحی خود بپرهیزیم؟
ux

واژه UX کوتاه شده ی عبارت User Experience Design است که در سال 1990 به وسیله Don Norman از گروه Apple تجربه کاربری بیان شد که بر طبق توصیف او شامل تمام جنبه های تعاملی کاربر با شرکت، خدمات و محصولات آن است. نخستین الزام برای یک تجربه کاربری نمونه، برطرف کردن نیازمشتری بدون ایجاد زحمت و دردسر برای او است .سپس باید سادگی و ظرافت را در تولید محصول در نظر گرفت تا مشتری از آن محصول لذت ببرد.

مواردی مانند چگونگی ظاهر منو, هماهنگ بودن رنگ زمینه با رنگ کادر جستجو و طراحی باکس مربوط به بنر های تبلیغاتی و… مثال هایی از ui هستند.

چه گزینه هایی در منو وجود داشته باشد, جایگاه باکس جستجو یا بنرهای تبلیغاتی و … همه و همه نمونه هایی از ux است.

تفاوت ui و ux در چیست؟

در مورد تفاوت ui و ux  باید بگوییم,  کسی که ux یا تجربه ی کاربری را طراحی می کند, جز به جز رفتار کاربر در سایت را پیش بینی می کند. یعنی در نظر می گیرد که کاربر چرا و تحت چه شرایطی وارد سایت خواهد شد یا مثلا برای خرید محصول اقدام می کند. پس از ورود به سایت یا اپلیکیشن طراحی شده به کجا هدایت شود. هدف از این کار چیست و …

ui و ux چیست؟چگونه از نقص های ux در طراحی خود بپرهیزیم؟
تفاوت ui و ux

در واقع ux کار, نیاز ها, پیشنهادها و درخواست های مشتری را از قبل پیش بینی می کند و به برررسی جزییات آن می پردازد. بخشی از این نیازهای شناسایی شده برای اجرا به تیم فروش و بازاریابی ارسال میشود و بخشی دیگر به تیم طراحی سایت منتقل میشود. آن بخشی که به ظاهر وابسته است را رابط کاربری یا ui می گویند. در واقع ui بخش کوچکی از ux است. جالب است بدانید که ux یا تجربه ی کاربری بعد از طراحی و اجرا به پایان نمی رسد و مدام در حال به روزرسانی و بررسی است و این به روزرسانی ها می تواند باعث بهبود ui یا رابط کاربری شود.

مقاله ی پیشنهادی برای مطالعه ی بیشتر؛ ویژگی ها و کاربردهای UIوUX

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

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

چگونه از نقص های ux در طراحی خود بپرهیزیم؟

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

ماژولار بودن

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

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

Object-Oriented CSS (OOCSS) یک معماری فرانت ماژولار است, که ساختار UI را از ظاهر آن و محتوا را هم از چیزی که آن را در بر میگیرد، جدا می کند. استفاده از این روش استایل شما را قابل استفاده ی دوباره و همینطور قابل نگهداری می کند.

SMACSS به معنی معماری قابل مقیاس و ماژولار برای CSS است. توسط Jonathan Snook ساخته شده است و تقریبا مشابه OOCSS است. SMACSS در پنج دسته سازماندهی شده است : پایه ، پوسته ، ماژول ، حالت و زمینه.

 

در پایان

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

 

5/5 - (1 امتیاز)
ارسال نظر

آدرس ایمیل شما منتشر نخواهد شد.