آموزش ux design – طراحی تجربۀ کاربری از صفر تا صد

در این مقاله قصد داریم به آموزش ux design بپردازیم. وقتی صحبت از ux design می‌شود، اولین چیزی که ممکن است به اذهان برسد اینست که هدف این رشته طراحی رابط کاربری برای نرم‌افزارها، وب‌سایت‌ها و اپلیکیشن‌ها است. البته ux design مسلماً شامل آن هم می‌شود، اما این تمام ماجرا نیست. UX سرنام کلمات موجود در عبارت User Experience به معنای تجربۀ کاربری است. اجازه دهید همین ابتدای کار یادآور شوم که مراقب باشید UX را با UI که مخفف user interface به معنای رابط کاربری است، اشتباه نگیرید.

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

بدون شک یکی از بهترین روش‌های طراحی رابط کاربری پیشرفته، می‌تواند استفاده از بهترین ابزارها و فناوری‌های موجود باشد. در همین راستا آموزش طراحی رابط کاربری UI مدرن در NET. با کامپوننت‌های جانوس از فرادرس را به شما توصیه می‌کنم.

• آموزش طراحی رابط کاربری UI مدرن در NET. با کامپوننت‌های جانوس در فرادرس — کلیک کنید

آموزش ux design – تشریح ux design با یک مثال ملموس

در این بخش از مقالۀ آموزش ux design قصد دارم با یک مثال، دید شما را به قضیه ux عوض کنم. برای اینکه بهتر بتوانیم منظور از ux را منتقل کنیم، اجازه دهید یک مثال بزنیم. فرض کنید یک روز صبح با سردرد از خواب بیدار می‌شوید و قرار است که به محل کارتان برود. خانه را جستجو می‌کنید تا بلکه قرص سردردی بیابید، اما چیزی یافت نمی‌شود.

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

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

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

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

آموزش ux design – آموختن از کاربر در ux design

در این بخش از مقالۀ آموزش ux design می‌خواهم دو نوع تفکر به‌ظاهر متناقض را روبه روی‌هم قرار دهم و دید دیگری نسبت به قضیه به شما بدهم. آنچه در ux design غایت است، اینست که تجربۀ کاربری را بهبود دهیم؛ بنابراین در اینجا هدف نهایی اینست که کاربر تجربۀ بهتری از کل ماجرا داشته باشد. در اینجا می‌خواهم نقل‌قولی از هنری فورد، بنیان‌گذار کارخانه‌های فورد، بازگو کنم. هنری فورد در جایی می‌گفت، اگر می‌خواستم در آغاز کار از افراد دربارۀ اتومبیل نظرسنجی کنم و طبق نظر آنها کار را پیش ببرم، احتمالاً آنها از من یک ارابۀ تندرو می‌خواستند.

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

البته از سوی دیگر نظرات و دیدگاه‌های مصرف‌کنندگان را نیز جمع‌آوری کنیم و مدام محصول را بهبود بخشیم. ازآنجاکه فرایند ux design یک‌چرخهٔ تکرارشونده است و هرگز مسیری خطی نیست. مدام جا برای جمع‌آوری بازخوردها و بهبود تجربۀ کاربری وجود دارد.

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

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

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

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

یکی از فریم‌ورک‌های قدرتمند برای بهبود تجربۀ کاربری در وب، فریم‌ورک جی کوئری است. در همین راستا آموزش طراحی رابط کاربری سایت با فریم‌ورک jQuery UI را به شما توصیه می‌کنم.

• آموزش طراحی رابط کاربری سایت با فریمورک jQuery UI — کلیک کنید

توصیه هایی برای بهبود تجربۀ کاربری وبسایت ها

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

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

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

خیلی از آنها در مثال‌هایشان وب‌سایت‌هایی را مثال می‌زدند که ازروی تجربه می‌دانستم پشت‌صحنهٔ آنها توسط فریم‌ورک‌های مبتنی بر بوت‌استرپ ایجاد شده است. پس اگر شما به‌عنوان یک طراح وب، مستقیماً سراغ بهترین گزینه‌های ممکن در بازار بروید و از آنها استفاده کند، شک نکنید نظر مساعد متخصصان ux design را هم تأمین کرده‌اید. چرا که اساساً ذهن انسان عمدۀ کارهایش را با مقایسه الگوهای موجود انجام می‌دهد و به‌ندرت افرادی پیدا می‌شوند که چارچوب شکنی کنند و فراتر از الگوهای موجود بیندیشند. گاهی اوقات حتی فکرکردن به موضوعی جدید شجاعت فراوان می‌خواهد که از عهدۀ هرکسی برنمی‌آید.

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

نتیجه گیری

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

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

• آموزش بوت استرپ Bootstrap برای طراحی صفحات وب
• مجموعه آموزش طراحی سایت