خانه / آموزش تجربه کاربری UX (کاربردی) – بخش اول

آموزش تجربه کاربری UX (کاربردی) – بخش اول

5/5 - (14 امتیاز)
آموزش کاربردی UX (طراحی طبق تجربه کاربری)
5/5 - (14 امتیاز)

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

یو ایکس (UX) چیست؟

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

یک تجربه کاربری خوب یا بد چگونه رقم می خورد ؟

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

۱ – کاربر عضو نمی شود :

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

۲ – کاربر عضو می شود :

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

۳ – تجربه کاربری خوب :

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

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

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

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

 

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

اهمیت تجربه کاربری UX

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

۱ – تجربه کاربری به شما کمک می کند تا مشتریان بیشتری جذب کنید.

۲ – تجربه کاربری به شما کمک می کند با کمی تغییرات مثبت؛ کاربران دیگر سایت های رقیب را به سمت خود هدایت کنید.

۳ – رعایت تجارب کاربری در سایت خود باعث می شود که هزینه های شما بابت خروج کاربران به مراتب کمتر شود.

۴ – تجربه کاربری خوب باعث می شود که کاربران به شما وفادار بمانند در نتیجه اهداف شرکت یا شخص شما را محقق سازند.

تفاوت UX با UI در چیست؟

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

چرا باید UX را یاد بگیرید ؟

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

مطلب پیشنهادی : نرخ پرش کاربر چیست و چگونه باید کاربر را در سایت نگهداریم؟ (bounce rate)

میخواهم سایت یا اَپ خود را طبق فرآیند UX طراحی کنم از کجا شروع کنم؟

بهتر است ابتدا با عناوین زیر آشنایی پیدا کنید. هرکدام از این موارد در UX کاربرد فراوانی دارند

  • اسکچ (Sketch) یا کروکی
  • وایرفریم (Wireframe)
  • پروتوتایپ (prototype)
  • طراحی گرافیک یا Graphic Designe
  • طراحی رابط کاربری یا Ui Designe
  • برنامه نویس یا توسعه دهنده رابط کاربری Ui Developer
  • محقق تجربه کاربری UX Researcher
  • طراح تعامل Interaction Designer

 

در ادامه به توضیح هرکدام از این تخصص ها خواهیم پرداخت

اسکچ – sketch

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

sketch یا طرح دستی

 

« نمونه sketch بر روی کاغذ »

وایرفریم – Wireframe

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

طراحی وایرفریم - سایت سازی

« نمونه Wireframe بر روی کاغذ »

ابزارهای Axure و Uxpin می تواند برای ساخت وایرفریم به شما کمک کند.

طراحی / طراح گرافیک – Graphic Designer

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

طراح گرافیکی

 

طراحی / طراح تجربه کاربری – UX Designer

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

طراح تجربه کاربری UX

 

طراح رابط کاری – UI Designer

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

طراح رابط کاربری ui designer

 

پروتوتایپ – Prototype

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

آموزش prototype

از جمله نرم افزارهای قوی در این زمینه برنامه فیگما و ادوبی اکس دی و اسکچ (ویژه مک) می باشد. فیگما تحت وب بوده و یک سرو گردن از ادوبی اکس دی بالاتر است. ما در تیم سایت سازی از هردوی این برنامه ها استفاده می کنیم.

برنامه نویس رابط کاربری – UI Developer

برنامه نویسان UI مسئول کدنویسی بخش پشت صحنه ای هستند که ظاهر آن را قبل تر؛ طراح رابط کاربری طراحی کرده است. اینکار با نرم افزارهای کدنویسی (IDE) مثل ، DreamWeaver یا phpstorm و یا حتی نوت پد پلاس پلاس انجام می گیرد. برنامه نویسان رابط کاربری برای افزایش سرعت از فریم ورک بوت استرپ هم برای کدنویسی رابط کاربری بهره می برند. طراحان رابط کاربری از زبان های html – css – javaScript – jquery و کتابخانه های دیگر جاوا برای طراحی رابط کاربری کمک می گیرند. برنامه نویسی رابط کابری یعنی تبدیل طرح های انجام شده ی گرافیکی(رابط کاربری) به ظاهر وبی. توسعه دهنده و برنامه نویس رابط کاربری وظیفه دارد کدنویسی خود را بر اساس اصول تجربه کاربری و برطبق الگویی که طراح رابط کاربری در قالب فایل psd یا fig به او می واگذار می کند؛ انجام دهد.

برنامه نویس رابط کاربری برنامه نویس رابط کاربری UI Developer

محقق تجربه کاربری – UX Researcher

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

۱ – کاربران محصول ما چه کسانی هستند؟

۲ – کاربران محصول ما چه چیزی می خواهند؟

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

محقق تجربه کاربری UX Researcher

طراح تعامل – Interaction Designer

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

طراح تعامل Interaction Designer

 

برنامه نویس بک اند – Backend Developer

طراحی کامل و بهره برداری از یک اپ و یا سایت به موارد بالا ختم نمی شود، برنامه نویس بک اند یا برنامه نویس سمت سرور هم در ادامه؛ کار را از برنامه نویس رابط کاربری تحویل گرفته و کارهای مربوط به سرور، دیتابیس، و کدنویسی های داینامیکی را انجام می دهد. برنامه نویس بک اند یکی از مهم ترین شخصیت ها در هر تیم سایت سازی یا اپ سازی می باشد. برنامه نویس بک اند کمترین ارتباط را با موضوع ux دارد. اگر برای هر اپ یا سایتی ۲-۳ نفر لازم باشد یکی از آنها برنامه نویس بک اند می باشد و یکی دیگر برنامه نویس رابط کاربری.برنامه نویس بک اند backend developer

برنامه نویس های بک اند اکثراً در ایران از این زبان ها بیشتر استفاده می کنند.

۱ – PHP و LARAVEL

2 – Asp.net

3 – pyton

4 – java

مطلب پیشنهادی : دیجیتال مارکتینگ و اهمیت آن در افزایش فروش و برندینگ (digital marketing)

جمع بندی : ما در بخش اول از سری آموزش UX علاوه بر تعریف یو ایکس و اهمیت تجربه کاربری؛ به تخصص هایی که به نحوی با آن ارتباط دارند نیز اشاره کردیم. در قسمت های بعدی آموزش UX مطالب جذاب تر ارائه خواهیم داد. هم اکنون این مقالات در دست تهیه و تولید می باشند.

برای مشاهده قسمت دوم آموزش کاربردی UX در اینجا کلیک بفرمایید.

اگر این مقاله برای شما مفید بود لطفاً به آن ستاره بدهید

5/5 - (14 امتیاز)
اشتراک گذاری در telegram
تلگرام
اشتراک گذاری در whatsapp
واتس آپ
اشتراک گذاری در facebook
فیس بوک
اشتراک گذاری در linkedin
لینکدین
اشتراک گذاری در twitter
تـوئیـتر
طراحی سایت

طراحی سایت همایش

طراحی سایت همایش در واقع به منظور اطلاع رسانی همایش ها و رویدادها صورت می گیرد. طراحی سایت همایش به صورت کلی به صورت اختصاصی

ادامه مطلب »
طراحی سایت کاریابی
طراحی سایت

طراحی سایت کاریابی

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

ادامه مطلب »
طراحی سایت درمانگاه
طراحی سایت

طراحی سایت درمانگاه

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

ادامه مطلب »
طراحی سایت کارخانه
طراحی سایت

طراحی سایت کارخانه

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

ادامه مطلب »

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

تماس بگیرید : 02133720934