SlideShare a Scribd company logo
‫به‬ ‫ما‬ ‫زمانی‬ ‫چه‬
‫ر‬ ‫محصولی‬ ‫دیگران‬‫ا‬
‫پیشنهاد‬‫کنی‬ ‫می‬‫م؟‬
‫در‬ ‫انگیزش‬ ‫موجب‬‫محصول‬ ‫معرفی‬ ‫بخشی‬ ‫لذت‬ ‫تجربه‬‫ش‬ ‫خلق‬ ‫که‬‫ده‬
‫اسالم‬ ‫مدارک‬ ‫و‬ ‫اطالعات‬ ‫مدیریت‬ ‫پژوهشکده‬‫ی‬
‫محمد‬‫کریمی‬
mk.socialir@yahoo.com
UX & UIUser satisfaction
U S E R
E X P E R I E N C E
U S E R
I N T E R F A C E
‫ب‬ ‫صفحه‬ ‫چگونگی‬ ‫به‬‫ندی‬
‫است‬ ‫معطوف‬ ‫محصول‬.
‫کار‬ ‫احساسات‬ ‫و‬ ‫حالت‬ ،‫رفتار‬‫بر‬
mk.socialir@yahoo.com
‫مفهوم‬ ‫چند‬ ‫با‬ ‫آشنایی‬
mk.socialir@yahoo.com
‫مفهوم‬ ‫چند‬ ‫با‬ ‫آشنایی‬
‫ه‬‫تجرب‬‫تری‬‫ش‬‫م‬customer experience‫یا‬(CX)
CX‫احساس‬‫آن‬‫چیزی‬‫است‬‫که‬‫مشتری‬‫در‬‫تعامل‬‫با‬‫یک‬‫شرکت‬‫یا‬‫یک‬،‫موسسه‬‫یک‬،‫برند‬،‫محصول‬‫خدمات‬‫ش‬،‫رکت‬
‫سایت‬‫و‬‫یا‬‫اپ‬‫موبایل‬‫دریافت‬‫‌کند‬‫ی‬‫م‬.
‫ه‬‫تجرب‬‫ربر‬‫کا‬user experience‫یا‬(UX)
UX‫تجربه‬‫کاربری‬‫یعنی‬‫این‬‫که‬‫یک‬‫فرد‬‫چطور‬‫به‬‫صورت‬‫احساسی‬‫یا‬‫درونی‬‫به‬‫تعاملی‬‫که‬‫با‬‫ی‬‫ک‬‫پروژه‬‫و‬‫یا‬
‫طور‬‫به‬‫ویژه‬‫یک‬‫محصول‬‫دیجیتال‬(‫مثل‬‫وب‬،‫ها‬‫سایت‬‫اپلیکیشن‬‫های‬‫موبایل‬‫و‬...)،‫دارد‬‫واکنش‬‫نش‬‫ان‬‫دهد‬‫می‬.
‫ی‬‫ل‬‫م‬‫عا‬‫ت‬ ‫ی‬‫ح‬‫طرا‬Interaction design‫یا‬(IXD)
‫این‬‫بحث‬‫مربوط‬‫به‬‫طراحی‬‫های‬‫واکنش‬‫رد‬‫و‬‫بدل‬‫شده‬‫یا‬‫در‬‫واقع‬‫تعامل‬‫میان‬‫انسان‬‫و‬‫محصوالت‬‫دیجی‬‫تال‬
‫است‬.
mk.socialir@yahoo.com
‫مفهوم‬ ‫چند‬ ‫با‬ ‫آشنایی‬
‫ی‬‫ح‬‫طرا‬ ‫کر‬‫ف‬‫ت‬design thinking
‫تفکر‬‫طراحی‬‫یعنی‬‫طراحی‬‫تجربه‬‫کلی‬‫یک‬‫فرد‬‫در‬‫رابطه‬‫با‬‫تعاملی‬‫فیزیکی‬‫و‬‫غیرفیزیکی‬‫ک‬‫ه‬‫با‬‫یک‬‫شرکت‬،‫دارد‬
ً‫ال‬‫مث‬‫تجربه‬‫از‬‫تعامل‬‫با‬‫اپلیکیشن‬،‫موبایل‬‫وب‬،‫سایت‬‫تماس‬‫تلفنی‬‫و‬...
2‫مسئله‬‫در‬‫تفکر‬‫طراحی‬
(1‫سود‬‫و‬‫وری‬‫بهره‬‫شرکت‬‫و‬‫صاحب‬‫خدمات‬
(2‫ها‬‫تیم‬‫و‬‫کسانی‬‫که‬‫این‬‫خدمات‬‫را‬‫ارائه‬‫کنند‬‫می‬.
‫ل‬‫صو‬‫مح‬ ‫ی‬‫ح‬‫طرا‬PRODUCT DESIGN
‫طراحی‬‫محصول‬‫طور‬‫به‬‫کلی‬‫یعنی‬‫تعریف‬‫کردن‬‫شکل‬‫و‬‫فرم‬‫چیزهای‬‫فیزیکی‬‫یا‬‫دیجیتالی‬.
‫تفاوت‬‫این‬‫اصطالح‬‫با‬‫طراحی‬‫تعاملی‬‫این‬‫است‬‫که‬‫طراحی‬‫محصول‬‫بسیار‬‫تر‬‫کلی‬‫از‬‫طراحی‬‫تعاملی‬‫در‬‫نظر‬
‫گرفته‬‫شود‬‫می‬‫که‬‫هم‬‫به‬‫تعامالت‬‫مرتبط‬‫می‬‫باشد‬‫و‬‫هم‬‫به‬‫اجسام‬‫و‬‫اشیاء‬.
mk.socialir@yahoo.com
‫تعریف‬UX‫براساس‬ISO
‫بر‬‫اساس‬‫تعریف‬ISO‫عنوان‬user experience‫شامل‬‫کلیه‬
،‫عواطف‬،‫اعتقادات‬‫مزیت‬،‫ها‬‫پاسخ‬‫های‬‫فیزیکی‬‫و‬،‫روانی‬‫رفت‬‫ارها‬‫و‬
‫اجراها‬‫قبل‬‫از‬‫زمان‬‫استفاده‬،‫در‬‫زمان‬‫استفاده‬‫و‬‫بعد‬‫از‬‫آن‬‫اطال‬‫ق‬
‫می‬‫گردد‬.
mk.socialir@yahoo.com
‫بین‬ ‫تفاوت‬UI‫و‬UX
UI‫در‬‫صنعت‬‫نرم‬‫افزار‬‫به‬‫هر‬‫چیزی‬‫که‬‫در‬‫صفحه‬‫نمایش‬‫داده‬‫می‬‫شود‬‫گفته‬‫می‬‫شود‬‫که‬‫شامل‬،‫تصاویر‬
‫متن‬،‫ها‬‫دیاگرام‬،‫ها‬،‫ماژولها‬‫جداول‬،‫ویدئوها‬‫و‬‫همچنین‬‫رنگ‬،‫سایر‬‫و‬‫مکان‬‫آن‬‫ها‬‫می‬‫باشد‬.
UX‫بسیار‬‫وسیع‬‫تر‬‫از‬UI‫می‬‫باشد‬‫و‬‫به‬‫تجربه‬‫و‬‫احساس‬‫کاربر‬‫زمانی‬‫که‬‫از‬‫محصول‬‫شما‬‫استفاده‬‫می‬
‫نمایند‬‫گفته‬‫می‬‫شود‬.
‫به‬‫عنوان‬‫مثال‬‫زمانی‬‫که‬‫شما‬‫از‬‫سایت‬‫دیجی‬‫کاال‬‫محصولی‬‫را‬‫سفارش‬‫می‬‫دهید‬‫و‬‫آن‬‫بسیار‬‫سریع‬‫ت‬‫حویل‬‫شما‬
‫می‬‫گردد‬‫به‬‫این‬‫معناست‬‫که‬UX‫خوبی‬‫وجود‬‫داشته‬‫است‬.
mk.socialir@yahoo.com
‫ببینیم‬ ‫هم‬ ‫با‬
‫خارجی‬
‫ایرانی‬
http://www.pennyjuice.com/htmlversion/whoispj.htm
www.techinsider.io
www.mashable.com
www.engadget.com
www.tabnak.ir
https://www.alibaba.ir/
www.digikala.com
https://bama.ir/ mk.socialir@yahoo.com
UX (USER EXPERIENCE)
‫تجربه‬،‫کاربری‬‫روشی‬‫برای‬‫ساخت‬‫محصولی‬‫هست‬‫که‬‫برای‬‫کاربر‬‫خاص‬‫شما‬‫طراحی‬‫شده‬‫و‬‫تمامی‬‫تالش‬‫این‬‫علم‬‫برای‬‫موف‬‫قیت‬‫و‬
‫رشد‬‫کسب‬‫و‬‫کار‬‫شما‬‫با‬‫هدف‬‫خلق‬‫محیط‬‫تعاملی‬‫راحت‬‫و‬‫کاربردی‬‫در‬‫جهت‬‫رضایت‬‫مندی‬‫کاربر‬‫نهایی‬‫می‬‫باشد‬.
‫که‬ ‫است‬ ‫این‬ ،‫هدف‬‫خوش‬ ‫ای‬‫خاطره‬‫ببندد‬ ‫نقش‬ ‫کاربر‬ ‫ذهن‬ ‫در‬
‫محصول‬ ‫با‬ ‫کاربر‬ ‫راحت‬ ‫ارتباط‬->‫کاربر‬ ‫رضایت‬ ‫و‬ ‫خوشحالی‬
‫محص‬ ‫نهایی‬ ‫کاربر‬ ‫از‬ ‫صحیح‬ ‫شناخت‬ ‫و‬ ‫اصول‬‫ول‬
‫کاربری‬ ‫تجربه‬ ‫طراح‬(UXD:)‫مفید‬ ‫و‬ ‫بخش‬ ‫لذت‬ ‫تعاملی‬ ‫حل‬ ‫راه‬ ‫ارایه‬ ‫و‬ ‫کاربر‬ ‫مشکالت‬ ‫قراردادن‬ ‫هدف‬
‫گیر‬ ‫اندازه‬ ‫قابل‬ ،‫کاربر‬ ‫رفتار‬ ‫توصیف‬ ‫معیارهای‬‫ی‬
?
?
?
?
?
‫تا‬‫او‬‫بازهم‬‫کند‬ ‫استفاده‬ ‫محصول‬ ‫از‬.
mk.socialir@yahoo.com
UXD (USER EXPERIENCE DESIGNER)
‫دانش‬UXD
‫روانشناسی‬
‫انسان‬‫شناسی‬
‫علوم‬‫کامپیوتر‬
‫طراحی‬‫گرافیک‬
‫طراحی‬‫صنعتی‬
‫علوم‬‫شناختی‬
‫حدس‬ ‫و‬ ‫شناخت‬
‫کاربر‬ ‫رفتارهای‬
‫باالیی‬ ‫و‬ ‫خوب‬ ‫عمومی‬ ‫روابط‬
‫یک‬UXD‫ویژگی‬ ‫به‬‫فنی‬ ‫و‬ ‫تکنیکی‬ ‫هاي‬‫ند‬ ‫کاري‬ ‫کار‬‫ارد‬.
mk.socialir@yahoo.com
‫است‬ ‫مناسب‬ ‫شما‬ ‫برای‬ ‫کدام‬:
‫طراحی‬‫بر‬‫مبنای‬‫رابط‬‫کاربری‬‫بیشتر‬‫به‬‫درد‬‫کسایی‬‫میخوره‬‫که‬‫ذهن‬‫هنرمندت‬‫ر‬‫و‬‫توانایی‬
‫های‬‫ویژوال‬‫دارن‬‫و‬‫یک‬‫کم‬‫نیاز‬‫به‬‫تکنی‬‫ک‬‫هم‬‫دارن‬
UX & UI
UI
‫طراحی‬‫بر‬‫مبنای‬‫تجربه‬‫کاربر‬‫بیشتر‬‫یه‬‫کار‬‫اجتماعیه‬‫و‬‫یه‬‫زمینه‬‫تحلیلی‬‫هم‬‫دارن‬‫که‬‫میشه‬
‫گفت‬‫قسمت‬‫فنی‬‫طراحی‬‫هست‬
UX
mk.socialir@yahoo.com
Look outside world mentality
User status
‫کاربران‬ ‫سریع‬ ‫شناخت‬ ‫کار‬ ‫و‬ ‫کسب‬ ‫در‬ ‫موفقیت‬ ‫کلید‬
!WOW!
‫از‌دریچه‌دید‌کاربر‌به‌محصول‌نگاه‌کنید،‌خودتان‌را‌جای‌کاربر‌بگذارید‌و‌برای‌مشکالت‌راه‌حل‌مفید‌پیدا‌ک‬‫نید‬
‫ایده‌خود‌را‌با‌مشتری‌در‌میان‌بگذارید‌و‌از‌همفکری‌استفاده‌کنید‬
‫‌‌این‌شما‌هستید‌که‌باید‌در‌کنار‌آنها‌قرار‌بگیرید‬،‫کاربران‌همیشه‌در‌جای‌صحیح‌و‌مناسب‌خودشان‌قرار‌دارند‬.
‫ایده‬ ‫این‬ ‫آره‬‫پذیر‬ ‫توجیه‬‫هست‬‫کاربر‬ ‫من‬ ‫ایده‬‫می‬ ‫جذب‬ ‫زیاد‬‫کن‬‫ه‬
‫هستند‬ ‫موافق‬ ‫من‬ ‫با‬ ‫کاربران‬!!
‫میگم‬ ‫درست‬ ‫من‬
!‫دارم‬ ‫ناب‬ ‫ایده‬ ‫یه‬ ‫من‬!
‫ببین‬ ‫رو‬ ‫دنیا‬ ‫ذهنیت‬ ‫ساختمان‬ ‫از‬ ‫خارج‬
mk.socialir@yahoo.com
Jumping Ramp Of The Bicycle
What?
‫مشتری‬ ‫صدای‬ ‫شنیدن‬ ‫بدون‬
mk.socialir@yahoo.com
‫آیا‬‫تابحال‬‫از‬ ‫خود‬ ‫های‬ ‫برنامه‬ ‫به‬‫کاربر‬ ‫یک‬ ‫دید‬‫ن‬‫گاه‬
‫اید‬ ‫کرده‬‫؟‬
‫از‬‫کاربر‬ ‫یک‬ ‫دید‬‫دارد‬ ‫ای‬ ‫حرفه‬ ‫ظاهر‬ ‫ای‬ ‫برنامه‬ ‫چه‬‫؟‬
‫که‬ ‫جاست‬ ‫این‬ ‫مشکل‬‫نمی‬‫دانیم‬‫ها‬ ‫برنامه‬ ‫این‬ ‫تا‬ ‫میشود‬ ‫سبب‬ ‫عواملی‬ ‫چه‬‫ای‬ ‫حرفه‬‫ب‬ ‫نظر‬ ‫به‬‫رسند‬
‫معمولی‬ ‫های‬ ‫برنامه‬ ‫سایر‬ ‫از‬ ‫را‬ ‫آنها‬ ‫توانید‬ ‫می‬ ‫شما‬ ‫و‬‫متمایز‬‫کنید؟‬
mk.socialir@yahoo.com
(1‫افزار‬ ‫نرم‬ ‫سراسر‬ ‫در‬ ‫یکپارچگی‬ ‫داشتن‬ ‫برای‬ ‫حل‬ ‫راه‬ ‫ارایه‬
(2‫روش‬‫از‬ ‫استفاده‬Template‫افزار‬ ‫نرم‬ ‫سراسر‬ ‫در‬ ‫آماده‬ ‫های‬
(3‫افزار‬ ‫نرم‬ ‫بندی‬ ‫رنگ‬ ‫برای‬ ‫مهم‬ ‫نکات‬
(4‫چگونه‬‫با‬‫رنگ‬‫بندی‬‫دارید؟‬ ‫نگه‬ ‫افزار‬ ‫نرم‬ ‫پای‬ ‫ها‬ ‫ساعت‬ ‫را‬ ‫کاربران‬ ‫مناسب‬
(5‫داد؟‬ ‫خرج‬ ‫به‬ ‫حساسیت‬ ‫افزار‬ ‫نرم‬ ‫فونت‬ ‫انتخاب‬ ‫در‬ ‫باید‬ ‫چرا‬
(6‫؟‬ ‫چیست‬ ‫افزار‬ ‫نرم‬ ‫های‬ ‫فونت‬ ‫برای‬ ‫انتخاب‬ ‫بهترین‬
(7‫مختلف‬ ‫های‬ ‫بخش‬ ‫فونت‬ ‫تغییر‬ ‫برای‬ ‫ساده‬ ‫بسیار‬ ‫روش‬ ‫یک‬ ‫ارایه‬
(8‫فرم‬ ‫با‬Splash‫بردارید‬ ‫ای‬ ‫حرفه‬ ‫افزار‬ ‫نرم‬ ‫یک‬ ‫ارایه‬ ‫سوی‬ ‫به‬ ‫را‬ ‫گام‬ ‫اولین‬.
(9‫فرم‬ ‫درون‬ ‫اطالعاتی‬ ‫چه‬Splash‫باشد؟‬ ‫موثر‬ ‫که‬ ‫دهیم‬ ‫قرار‬
(10‫فرم‬ ‫یک‬ ‫چگونه‬Splash‫خوب‬‫کنیم‬ ‫طراحی‬‫؟‬
‫نرم‬ ‫جامعیت‬ ‫حفظ‬‫افزار‬
mk.socialir@yahoo.com
‫طراحی‬ ‫ترفندهای‬ ‫از‬ ‫بخشی‬‫فرم‬‫های‬‫اطالعات‬ ‫ورود‬
‫شد‬ ‫ستونه‬ ‫چند‬‫ن‬ ‫ستونه‬ ‫تک‬
mk.socialir@yahoo.com
‫اطالعات‬ ‫ورود‬ ‫های‬ ‫فرم‬ ‫طراحی‬ ‫ترفندهای‬ ‫از‬ ‫بخشی‬
‫دادن‬ ‫قرار‬Label‫اطالعات‬ ‫ورود‬ ‫های‬ ‫کنترل‬ ‫باالی‬ ‫در‬
‫دادن‬ ‫قرار‬Label‫ورود‬ ‫های‬ ‫کنترل‬ ‫راست‬ ‫سمت‬ ‫در‬ ‫همراستا‬‫اطالعات‬
Placeholder‫جای‬ ‫به‬ ‫ها‬label‫ها‬
‫بودن‬ ‫تراز‬label‫ورود‬ ‫های‬ ‫کنترل‬ ‫به‬ ‫نسبت‬ ‫ها‬‫اطالعات‬
Label
mk.socialir@yahoo.com
‫اطالعات‬ ‫ورود‬ ‫های‬ ‫فرم‬ ‫طراحی‬ ‫ترفندهای‬ ‫از‬ ‫بخشی‬
Button ‫عملیات‬CRUD‫عملیات‬ ‫شامل‬‫حذف‬ ،‫بروزرسانی‬ ،‫ویرایش‬ ، ‫ثبت‬
‫دکمه‬ ‫طراحی‬ ‫در‬ ‫تمایز‬‫ها‬
‫رنگ‬‫و‬ ‫ها‬ ‫دکمه‬ ‫برای‬ ‫مناسب‬‫آیکونها‬:‫گاو‬ ‫براساس‬ ‫بندی‬ ‫رنگ‬‫بنفش‬
‫ها‬ ‫دکمه‬ ‫قرارگیری‬ ‫محل‬
‫کاربر‬ ‫درخواست‬ ‫به‬ ‫اضافه‬ ‫های‬ ‫دکمه‬ ‫نمایش‬
‫بیاورید‬ ‫در‬ ‫منو‬ ‫شکل‬ ‫به‬ ‫را‬ ‫ها‬ ‫دکمه‬
‫آیکن‬ ‫از‬ ‫استفاده‬‫ها‬
‫مناسب‬ ‫عنوان‬ ‫انتخاب‬(‫بهتر‬ ‫و‬ ‫نکنید‬ ‫استفاده‬ ‫شخص‬ ‫سوم‬ ‫از‬‫از‬ ‫است‬
‫کنید‬ ‫استفاده‬ ‫موجودیت‬ ‫نام‬).
mk.socialir@yahoo.com
‫اطالعات‬ ‫ورود‬ ‫های‬ ‫فرم‬ ‫طراحی‬ ‫ترفندهای‬ ‫از‬ ‫بخشی‬
Button ‫دکمه‬ ‫موقع‬ ‫چه‬‫استفاده‬‫نکنیم؟‬ ‫استفاده‬ ‫دکمه‬ ‫از‬ ‫موقع‬ ‫چه‬ ‫و‬ ‫کنیم‬
‫در‬‫صورتی‬‫که‬‫فرمانی‬‫مشخص‬‫به‬‫سیستم‬‫برای‬‫گرفتن‬‫پا‬‫سخ‬(‫اجرای‬
‫الگوریتم‬‫یا‬‫درخواست‬‫منبع‬‫در‬‫سرور‬)
‫داده‬‫نمی‬‫شود‬‫بهتر‬‫است‬‫از‬‫برچسب‬‫لینک‬‫به‬‫جای‬‫یک‬‫دکمه‬
‫استفاده‬‫گردد‬.(‫دکمه‬‫های‬‫راهنما‬)
mk.socialir@yahoo.com
‫اطالعات‬ ‫ورود‬ ‫های‬ ‫فرم‬ ‫طراحی‬ ‫ترفندهای‬ ‫از‬ ‫بخشی‬
‫حذف‬ ‫را‬ ‫اختیاري‬ ‫فیلدهاي‬‫نمایید‬.‫اختیا‬ ‫فیلد‬ ‫این‬ ‫که‬ ‫بنویسید‬ ‫برچسب‬ ‫در‬ ‫نمود‬ ‫حذف‬ ‫را‬ ‫آن‬ ‫شود‬ ‫نمی‬ ‫اگر‬‫است‬ ‫ري‬.
‫بانکهاي‬ ‫یا‬ ‫نویسی‬ ‫برنامه‬ ‫نگاه‬ ‫از‬ ‫نه‬ ‫شوند‬ ‫طراحی‬ ‫منطقی‬ ‫کاربر‬ ‫نگاه‬ ‫از‬ ‫باید‬ ‫اطالعات‬ ‫ورود‬ ‫هاي‬ ‫فرم‬‫اطالعاتی‬
‫شجاع‬ ‫کردن‬ ‫خالصه‬ ‫براي‬‫باشید‬
mk.socialir@yahoo.com
‫اطالعات‬ ‫ورود‬ ‫های‬ ‫فرم‬ ‫طراحی‬ ‫ترفندهای‬ ‫از‬ ‫بخشی‬
‫سایر‬...
‫فرم‬‫های‬‫استاندارد‬‫مثل‬about , splash‫را‬‫در‬‫پروژه‬‫های‬‫خود‬‫فراموش‬‫نکنیم‬.
‫به‬‫یکپارچگی‬‫در‬‫سراسر‬‫نرم‬‫افزار‬‫در‬‫فرم‬‫های‬‫ورود‬‫اطالعات‬‫پایبند‬‫باشیم‬.
‫در‬‫صورت‬‫عدم‬‫انتخاب‬‫فونت‬،‫مناسب‬‫ارتباط‬‫دایمی‬‫کاربر‬‫با‬‫نرم‬‫افزار‬‫را‬‫مختل‬‫می‬‫ک‬‫نیم‬.
‫در‬‫زمان‬،‫کوتاه‬‫ظاهر‬‫نرم‬‫افزارهایتان‬‫را‬‫برای‬‫رقابت‬‫با‬‫گران‬‫قیمت‬‫ترین‬‫نرم‬‫افزارهای‬
‫تجاری‬‫طراحی‬‫کنید‬.
mk.socialir@yahoo.com
Ten do’s and don'ts of UI and UX design
(1‌‫تجربه‌ی‌یکسانی‌بدون‬‫در‬‫نظر‌گرفتن‌نوع‌دیوایس‌برای‌کاربران‌فراهم‌کنید‬.
(2‫امکانی‌فراهم‌کنید‌که‌یافتن‌منابع‌در‌سایت‌شما‌ساده‌و‌قابل‌فهم‌باشد‬.
(3‫قسمت‌های‌مهم‌تر‌را‌در‌مرکز‌توجه‌قرار‌دهید‬.
(4‫اطمینان‌حاصل‌کنید‌که‌تمام‌لینک‌ها‌و‌دکمه‌ها‌به‌درستی‌کار‌می‌کنند‬.
(5‫اجازه‌دهید‌تا‌کاربران‌کنترل‌تجربه‌ی‌مرور‌کردن‌سایتتان‌را‌در‌دست‌بگیرند‬.
(6‫اجازه‌ندهید‌تا‌طراحی‌سایتتان‌مانع‌سهولت‌استفاده‌از‌آن‌شود‬.
(7‫مانع‌مرور‌اجمالی‌کاربران‌نشوید‬.
(8‫صفحه‌را‌با‌مطاالب‌غیر‌مرتبط‌پر‌نکنید‬.
(9‫بازدیدکنندگان‌را‌برای‌لود‌شدن‌مطالبتان‌منتظر‌نگذارید‬.
(10‫مواردی‌را‌که‌موجب‌عدم‌توجه‌به‌مطلب‌اصلی‌می‌شود‌حذف‌کنید‬.mk.socialir@yahoo.com
‫یت‬‫ق‬‫ف‬‫مو‬ ‫وی‬‫ز‬‫ر‬‫آ‬ ‫با‬
‫اسالم‬ ‫مدارک‬ ‫و‬ ‫اطالعات‬ ‫مدیریت‬ ‫پژوهشکده‬‫ی‬
‫محمد‬‫کریمی‬
mk.socialir@yahoo.com

More Related Content

Viewers also liked

پنج حقیقت ترسناک درباره کارآفرینی
پنج حقیقت ترسناک درباره کارآفرینیپنج حقیقت ترسناک درباره کارآفرینی
پنج حقیقت ترسناک درباره کارآفرینی
Modirinfo
 
Clusterin k means
Clusterin k meansClusterin k means
Clusterin k means
sinaexe
 
Ang Pagpasok sa Estados Unidos
Ang Pagpasok sa Estados UnidosAng Pagpasok sa Estados Unidos
Ang Pagpasok sa Estados Unidos
IamAuthor1
 
Tugaz bacaan mad
Tugaz bacaan madTugaz bacaan mad
Tugaz bacaan mad
alwi mashuri
 
Fail Fast, Learn Fast, Move Fast: My UX journey to move faster
Fail Fast, Learn Fast, Move Fast: My UX journey to move fasterFail Fast, Learn Fast, Move Fast: My UX journey to move faster
Fail Fast, Learn Fast, Move Fast: My UX journey to move faster
Jeremy Johnson
 
Columbia Basin College and Eastern Washington University Unofficial Transcript
Columbia Basin College and Eastern Washington University Unofficial TranscriptColumbia Basin College and Eastern Washington University Unofficial Transcript
Columbia Basin College and Eastern Washington University Unofficial TranscriptHaley Stricker
 
Ux design process
Ux design processUx design process
Ux design process
Junying Chang
 
Resume- Syed Muhammad Talha Kazmi
Resume- Syed Muhammad Talha KazmiResume- Syed Muhammad Talha Kazmi
Resume- Syed Muhammad Talha KazmiTalha Kazmi
 
How UX Design Has Changed The World
How UX Design Has Changed The WorldHow UX Design Has Changed The World
How UX Design Has Changed The World
BuiltByHQ
 

Viewers also liked (9)

پنج حقیقت ترسناک درباره کارآفرینی
پنج حقیقت ترسناک درباره کارآفرینیپنج حقیقت ترسناک درباره کارآفرینی
پنج حقیقت ترسناک درباره کارآفرینی
 
Clusterin k means
Clusterin k meansClusterin k means
Clusterin k means
 
Ang Pagpasok sa Estados Unidos
Ang Pagpasok sa Estados UnidosAng Pagpasok sa Estados Unidos
Ang Pagpasok sa Estados Unidos
 
Tugaz bacaan mad
Tugaz bacaan madTugaz bacaan mad
Tugaz bacaan mad
 
Fail Fast, Learn Fast, Move Fast: My UX journey to move faster
Fail Fast, Learn Fast, Move Fast: My UX journey to move fasterFail Fast, Learn Fast, Move Fast: My UX journey to move faster
Fail Fast, Learn Fast, Move Fast: My UX journey to move faster
 
Columbia Basin College and Eastern Washington University Unofficial Transcript
Columbia Basin College and Eastern Washington University Unofficial TranscriptColumbia Basin College and Eastern Washington University Unofficial Transcript
Columbia Basin College and Eastern Washington University Unofficial Transcript
 
Ux design process
Ux design processUx design process
Ux design process
 
Resume- Syed Muhammad Talha Kazmi
Resume- Syed Muhammad Talha KazmiResume- Syed Muhammad Talha Kazmi
Resume- Syed Muhammad Talha Kazmi
 
How UX Design Has Changed The World
How UX Design Has Changed The WorldHow UX Design Has Changed The World
How UX Design Has Changed The World
 

Similar to Ux & ui 1

pdf-back.pptx
pdf-back.pptxpdf-back.pptx
pdf-back.pptx
Tehranborj
 
رابط کاری / تجربه کاری (UI/UX)
رابط کاری / تجربه کاری (UI/UX)رابط کاری / تجربه کاری (UI/UX)
رابط کاری / تجربه کاری (UI/UX)
Yousef Alipour
 
تجربه کاربری یا User Experience دقیقا چیه؟
تجربه کاربری یا User Experience دقیقا چیه؟تجربه کاربری یا User Experience دقیقا چیه؟
تجربه کاربری یا User Experience دقیقا چیه؟
Ali Jafari
 
What is Ux - User Experience .
What is Ux - User Experience .What is Ux - User Experience .
What is Ux - User Experience .
Farhad jafari
 
بهینه‌سازی تجربه‌کاربری
بهینه‌سازی تجربه‌کاربریبهینه‌سازی تجربه‌کاربری
بهینه‌سازی تجربه‌کاربری
Web Standards School
 
نرم افزار تابلو اعلانات اتوماسیون اداری
نرم افزار تابلو اعلانات اتوماسیون ادارینرم افزار تابلو اعلانات اتوماسیون اداری
نرم افزار تابلو اعلانات اتوماسیون اداری
chargoon
 
What is User Experience? | Presentied in TrigUp | BMDX
What is User Experience?   |   Presentied in TrigUp  |   BMDXWhat is User Experience?   |   Presentied in TrigUp  |   BMDX
What is User Experience? | Presentied in TrigUp | BMDX
Mobin M. Bahrami
 
انفجار تجربه‌کاربری
انفجار تجربه‌کاربریانفجار تجربه‌کاربری
انفجار تجربه‌کاربری
Web Standards School
 
وبینار از تجربه کاربری به تجربه مشتری | چرا طراحان تجربه باید مانند معماران ف...
وبینار از تجربه کاربری به تجربه مشتری | چرا طراحان تجربه باید مانند معماران ف...وبینار از تجربه کاربری به تجربه مشتری | چرا طراحان تجربه باید مانند معماران ف...
وبینار از تجربه کاربری به تجربه مشتری | چرا طراحان تجربه باید مانند معماران ف...
Martech Academy
 
Adobe connect
Adobe connectAdobe connect
Adobe connect
Taavonitarjome
 
سناریوهای کسب و کار و اهداف کسب و کار
سناریوهای کسب و کار و اهداف کسب و کارسناریوهای کسب و کار و اهداف کسب و کار
سناریوهای کسب و کار و اهداف کسب و کار
Amir Darajeh
 
How to choose appropriate technology for product development - Persian Version
How to choose appropriate technology for product development - Persian VersionHow to choose appropriate technology for product development - Persian Version
How to choose appropriate technology for product development - Persian Version
aminmesbahi
 
Ux notice
Ux noticeUx notice
Ux notice
Amir Shokri
 
بوم مدل کسب و کار
بوم مدل کسب و کاربوم مدل کسب و کار
بوم مدل کسب و کار
Amin Barahmand
 
Digital Publisher
Digital PublisherDigital Publisher
Digital Publisher
Shad Far
 
معرفی نرم افزار فرآیندساز (BPMS)؛ هر چیزی که دوست دارید؛ طراحی کنید! آهارسافت
معرفی نرم افزار فرآیندساز (BPMS)؛ هر چیزی که دوست دارید؛ طراحی کنید! آهارسافتمعرفی نرم افزار فرآیندساز (BPMS)؛ هر چیزی که دوست دارید؛ طراحی کنید! آهارسافت
معرفی نرم افزار فرآیندساز (BPMS)؛ هر چیزی که دوست دارید؛ طراحی کنید! آهارسافت
Aharsoft
 
Navid Conference - 1394 - Shiraz, Iran
Navid Conference - 1394 - Shiraz, IranNavid Conference - 1394 - Shiraz, Iran
Navid Conference - 1394 - Shiraz, Iran
Hamed Takmil
 
کارگاه آموزش مقدماتی طراحی واسط و تجربه کاربری UI/UX Desgin Workshop
کارگاه آموزش مقدماتی طراحی واسط و تجربه کاربری UI/UX Desgin Workshopکارگاه آموزش مقدماتی طراحی واسط و تجربه کاربری UI/UX Desgin Workshop
کارگاه آموزش مقدماتی طراحی واسط و تجربه کاربری UI/UX Desgin Workshop
Esmail MohammadiPanah
 
IOT-Startup-Business-Model-Canvas
IOT-Startup-Business-Model-CanvasIOT-Startup-Business-Model-Canvas
IOT-Startup-Business-Model-Canvas
Mahdi Nasseri
 
Osm
OsmOsm

Similar to Ux & ui 1 (20)

pdf-back.pptx
pdf-back.pptxpdf-back.pptx
pdf-back.pptx
 
رابط کاری / تجربه کاری (UI/UX)
رابط کاری / تجربه کاری (UI/UX)رابط کاری / تجربه کاری (UI/UX)
رابط کاری / تجربه کاری (UI/UX)
 
تجربه کاربری یا User Experience دقیقا چیه؟
تجربه کاربری یا User Experience دقیقا چیه؟تجربه کاربری یا User Experience دقیقا چیه؟
تجربه کاربری یا User Experience دقیقا چیه؟
 
What is Ux - User Experience .
What is Ux - User Experience .What is Ux - User Experience .
What is Ux - User Experience .
 
بهینه‌سازی تجربه‌کاربری
بهینه‌سازی تجربه‌کاربریبهینه‌سازی تجربه‌کاربری
بهینه‌سازی تجربه‌کاربری
 
نرم افزار تابلو اعلانات اتوماسیون اداری
نرم افزار تابلو اعلانات اتوماسیون ادارینرم افزار تابلو اعلانات اتوماسیون اداری
نرم افزار تابلو اعلانات اتوماسیون اداری
 
What is User Experience? | Presentied in TrigUp | BMDX
What is User Experience?   |   Presentied in TrigUp  |   BMDXWhat is User Experience?   |   Presentied in TrigUp  |   BMDX
What is User Experience? | Presentied in TrigUp | BMDX
 
انفجار تجربه‌کاربری
انفجار تجربه‌کاربریانفجار تجربه‌کاربری
انفجار تجربه‌کاربری
 
وبینار از تجربه کاربری به تجربه مشتری | چرا طراحان تجربه باید مانند معماران ف...
وبینار از تجربه کاربری به تجربه مشتری | چرا طراحان تجربه باید مانند معماران ف...وبینار از تجربه کاربری به تجربه مشتری | چرا طراحان تجربه باید مانند معماران ف...
وبینار از تجربه کاربری به تجربه مشتری | چرا طراحان تجربه باید مانند معماران ف...
 
Adobe connect
Adobe connectAdobe connect
Adobe connect
 
سناریوهای کسب و کار و اهداف کسب و کار
سناریوهای کسب و کار و اهداف کسب و کارسناریوهای کسب و کار و اهداف کسب و کار
سناریوهای کسب و کار و اهداف کسب و کار
 
How to choose appropriate technology for product development - Persian Version
How to choose appropriate technology for product development - Persian VersionHow to choose appropriate technology for product development - Persian Version
How to choose appropriate technology for product development - Persian Version
 
Ux notice
Ux noticeUx notice
Ux notice
 
بوم مدل کسب و کار
بوم مدل کسب و کاربوم مدل کسب و کار
بوم مدل کسب و کار
 
Digital Publisher
Digital PublisherDigital Publisher
Digital Publisher
 
معرفی نرم افزار فرآیندساز (BPMS)؛ هر چیزی که دوست دارید؛ طراحی کنید! آهارسافت
معرفی نرم افزار فرآیندساز (BPMS)؛ هر چیزی که دوست دارید؛ طراحی کنید! آهارسافتمعرفی نرم افزار فرآیندساز (BPMS)؛ هر چیزی که دوست دارید؛ طراحی کنید! آهارسافت
معرفی نرم افزار فرآیندساز (BPMS)؛ هر چیزی که دوست دارید؛ طراحی کنید! آهارسافت
 
Navid Conference - 1394 - Shiraz, Iran
Navid Conference - 1394 - Shiraz, IranNavid Conference - 1394 - Shiraz, Iran
Navid Conference - 1394 - Shiraz, Iran
 
کارگاه آموزش مقدماتی طراحی واسط و تجربه کاربری UI/UX Desgin Workshop
کارگاه آموزش مقدماتی طراحی واسط و تجربه کاربری UI/UX Desgin Workshopکارگاه آموزش مقدماتی طراحی واسط و تجربه کاربری UI/UX Desgin Workshop
کارگاه آموزش مقدماتی طراحی واسط و تجربه کاربری UI/UX Desgin Workshop
 
IOT-Startup-Business-Model-Canvas
IOT-Startup-Business-Model-CanvasIOT-Startup-Business-Model-Canvas
IOT-Startup-Business-Model-Canvas
 
Osm
OsmOsm
Osm
 

Ux & ui 1

  • 1. ‫به‬ ‫ما‬ ‫زمانی‬ ‫چه‬ ‫ر‬ ‫محصولی‬ ‫دیگران‬‫ا‬ ‫پیشنهاد‬‫کنی‬ ‫می‬‫م؟‬ ‫در‬ ‫انگیزش‬ ‫موجب‬‫محصول‬ ‫معرفی‬ ‫بخشی‬ ‫لذت‬ ‫تجربه‬‫ش‬ ‫خلق‬ ‫که‬‫ده‬ ‫اسالم‬ ‫مدارک‬ ‫و‬ ‫اطالعات‬ ‫مدیریت‬ ‫پژوهشکده‬‫ی‬ ‫محمد‬‫کریمی‬ mk.socialir@yahoo.com
  • 2. UX & UIUser satisfaction U S E R E X P E R I E N C E U S E R I N T E R F A C E ‫ب‬ ‫صفحه‬ ‫چگونگی‬ ‫به‬‫ندی‬ ‫است‬ ‫معطوف‬ ‫محصول‬. ‫کار‬ ‫احساسات‬ ‫و‬ ‫حالت‬ ،‫رفتار‬‫بر‬ mk.socialir@yahoo.com
  • 3. ‫مفهوم‬ ‫چند‬ ‫با‬ ‫آشنایی‬ mk.socialir@yahoo.com
  • 4. ‫مفهوم‬ ‫چند‬ ‫با‬ ‫آشنایی‬ ‫ه‬‫تجرب‬‫تری‬‫ش‬‫م‬customer experience‫یا‬(CX) CX‫احساس‬‫آن‬‫چیزی‬‫است‬‫که‬‫مشتری‬‫در‬‫تعامل‬‫با‬‫یک‬‫شرکت‬‫یا‬‫یک‬،‫موسسه‬‫یک‬،‫برند‬،‫محصول‬‫خدمات‬‫ش‬،‫رکت‬ ‫سایت‬‫و‬‫یا‬‫اپ‬‫موبایل‬‫دریافت‬‫‌کند‬‫ی‬‫م‬. ‫ه‬‫تجرب‬‫ربر‬‫کا‬user experience‫یا‬(UX) UX‫تجربه‬‫کاربری‬‫یعنی‬‫این‬‫که‬‫یک‬‫فرد‬‫چطور‬‫به‬‫صورت‬‫احساسی‬‫یا‬‫درونی‬‫به‬‫تعاملی‬‫که‬‫با‬‫ی‬‫ک‬‫پروژه‬‫و‬‫یا‬ ‫طور‬‫به‬‫ویژه‬‫یک‬‫محصول‬‫دیجیتال‬(‫مثل‬‫وب‬،‫ها‬‫سایت‬‫اپلیکیشن‬‫های‬‫موبایل‬‫و‬...)،‫دارد‬‫واکنش‬‫نش‬‫ان‬‫دهد‬‫می‬. ‫ی‬‫ل‬‫م‬‫عا‬‫ت‬ ‫ی‬‫ح‬‫طرا‬Interaction design‫یا‬(IXD) ‫این‬‫بحث‬‫مربوط‬‫به‬‫طراحی‬‫های‬‫واکنش‬‫رد‬‫و‬‫بدل‬‫شده‬‫یا‬‫در‬‫واقع‬‫تعامل‬‫میان‬‫انسان‬‫و‬‫محصوالت‬‫دیجی‬‫تال‬ ‫است‬. mk.socialir@yahoo.com
  • 5. ‫مفهوم‬ ‫چند‬ ‫با‬ ‫آشنایی‬ ‫ی‬‫ح‬‫طرا‬ ‫کر‬‫ف‬‫ت‬design thinking ‫تفکر‬‫طراحی‬‫یعنی‬‫طراحی‬‫تجربه‬‫کلی‬‫یک‬‫فرد‬‫در‬‫رابطه‬‫با‬‫تعاملی‬‫فیزیکی‬‫و‬‫غیرفیزیکی‬‫ک‬‫ه‬‫با‬‫یک‬‫شرکت‬،‫دارد‬ ً‫ال‬‫مث‬‫تجربه‬‫از‬‫تعامل‬‫با‬‫اپلیکیشن‬،‫موبایل‬‫وب‬،‫سایت‬‫تماس‬‫تلفنی‬‫و‬... 2‫مسئله‬‫در‬‫تفکر‬‫طراحی‬ (1‫سود‬‫و‬‫وری‬‫بهره‬‫شرکت‬‫و‬‫صاحب‬‫خدمات‬ (2‫ها‬‫تیم‬‫و‬‫کسانی‬‫که‬‫این‬‫خدمات‬‫را‬‫ارائه‬‫کنند‬‫می‬. ‫ل‬‫صو‬‫مح‬ ‫ی‬‫ح‬‫طرا‬PRODUCT DESIGN ‫طراحی‬‫محصول‬‫طور‬‫به‬‫کلی‬‫یعنی‬‫تعریف‬‫کردن‬‫شکل‬‫و‬‫فرم‬‫چیزهای‬‫فیزیکی‬‫یا‬‫دیجیتالی‬. ‫تفاوت‬‫این‬‫اصطالح‬‫با‬‫طراحی‬‫تعاملی‬‫این‬‫است‬‫که‬‫طراحی‬‫محصول‬‫بسیار‬‫تر‬‫کلی‬‫از‬‫طراحی‬‫تعاملی‬‫در‬‫نظر‬ ‫گرفته‬‫شود‬‫می‬‫که‬‫هم‬‫به‬‫تعامالت‬‫مرتبط‬‫می‬‫باشد‬‫و‬‫هم‬‫به‬‫اجسام‬‫و‬‫اشیاء‬. mk.socialir@yahoo.com
  • 7. ‫بین‬ ‫تفاوت‬UI‫و‬UX UI‫در‬‫صنعت‬‫نرم‬‫افزار‬‫به‬‫هر‬‫چیزی‬‫که‬‫در‬‫صفحه‬‫نمایش‬‫داده‬‫می‬‫شود‬‫گفته‬‫می‬‫شود‬‫که‬‫شامل‬،‫تصاویر‬ ‫متن‬،‫ها‬‫دیاگرام‬،‫ها‬،‫ماژولها‬‫جداول‬،‫ویدئوها‬‫و‬‫همچنین‬‫رنگ‬،‫سایر‬‫و‬‫مکان‬‫آن‬‫ها‬‫می‬‫باشد‬. UX‫بسیار‬‫وسیع‬‫تر‬‫از‬UI‫می‬‫باشد‬‫و‬‫به‬‫تجربه‬‫و‬‫احساس‬‫کاربر‬‫زمانی‬‫که‬‫از‬‫محصول‬‫شما‬‫استفاده‬‫می‬ ‫نمایند‬‫گفته‬‫می‬‫شود‬. ‫به‬‫عنوان‬‫مثال‬‫زمانی‬‫که‬‫شما‬‫از‬‫سایت‬‫دیجی‬‫کاال‬‫محصولی‬‫را‬‫سفارش‬‫می‬‫دهید‬‫و‬‫آن‬‫بسیار‬‫سریع‬‫ت‬‫حویل‬‫شما‬ ‫می‬‫گردد‬‫به‬‫این‬‫معناست‬‫که‬UX‫خوبی‬‫وجود‬‫داشته‬‫است‬. mk.socialir@yahoo.com
  • 9. UX (USER EXPERIENCE) ‫تجربه‬،‫کاربری‬‫روشی‬‫برای‬‫ساخت‬‫محصولی‬‫هست‬‫که‬‫برای‬‫کاربر‬‫خاص‬‫شما‬‫طراحی‬‫شده‬‫و‬‫تمامی‬‫تالش‬‫این‬‫علم‬‫برای‬‫موف‬‫قیت‬‫و‬ ‫رشد‬‫کسب‬‫و‬‫کار‬‫شما‬‫با‬‫هدف‬‫خلق‬‫محیط‬‫تعاملی‬‫راحت‬‫و‬‫کاربردی‬‫در‬‫جهت‬‫رضایت‬‫مندی‬‫کاربر‬‫نهایی‬‫می‬‫باشد‬. ‫که‬ ‫است‬ ‫این‬ ،‫هدف‬‫خوش‬ ‫ای‬‫خاطره‬‫ببندد‬ ‫نقش‬ ‫کاربر‬ ‫ذهن‬ ‫در‬ ‫محصول‬ ‫با‬ ‫کاربر‬ ‫راحت‬ ‫ارتباط‬->‫کاربر‬ ‫رضایت‬ ‫و‬ ‫خوشحالی‬ ‫محص‬ ‫نهایی‬ ‫کاربر‬ ‫از‬ ‫صحیح‬ ‫شناخت‬ ‫و‬ ‫اصول‬‫ول‬ ‫کاربری‬ ‫تجربه‬ ‫طراح‬(UXD:)‫مفید‬ ‫و‬ ‫بخش‬ ‫لذت‬ ‫تعاملی‬ ‫حل‬ ‫راه‬ ‫ارایه‬ ‫و‬ ‫کاربر‬ ‫مشکالت‬ ‫قراردادن‬ ‫هدف‬ ‫گیر‬ ‫اندازه‬ ‫قابل‬ ،‫کاربر‬ ‫رفتار‬ ‫توصیف‬ ‫معیارهای‬‫ی‬ ? ? ? ? ? ‫تا‬‫او‬‫بازهم‬‫کند‬ ‫استفاده‬ ‫محصول‬ ‫از‬. mk.socialir@yahoo.com
  • 10. UXD (USER EXPERIENCE DESIGNER) ‫دانش‬UXD ‫روانشناسی‬ ‫انسان‬‫شناسی‬ ‫علوم‬‫کامپیوتر‬ ‫طراحی‬‫گرافیک‬ ‫طراحی‬‫صنعتی‬ ‫علوم‬‫شناختی‬ ‫حدس‬ ‫و‬ ‫شناخت‬ ‫کاربر‬ ‫رفتارهای‬ ‫باالیی‬ ‫و‬ ‫خوب‬ ‫عمومی‬ ‫روابط‬ ‫یک‬UXD‫ویژگی‬ ‫به‬‫فنی‬ ‫و‬ ‫تکنیکی‬ ‫هاي‬‫ند‬ ‫کاري‬ ‫کار‬‫ارد‬. mk.socialir@yahoo.com
  • 11. ‫است‬ ‫مناسب‬ ‫شما‬ ‫برای‬ ‫کدام‬: ‫طراحی‬‫بر‬‫مبنای‬‫رابط‬‫کاربری‬‫بیشتر‬‫به‬‫درد‬‫کسایی‬‫میخوره‬‫که‬‫ذهن‬‫هنرمندت‬‫ر‬‫و‬‫توانایی‬ ‫های‬‫ویژوال‬‫دارن‬‫و‬‫یک‬‫کم‬‫نیاز‬‫به‬‫تکنی‬‫ک‬‫هم‬‫دارن‬ UX & UI UI ‫طراحی‬‫بر‬‫مبنای‬‫تجربه‬‫کاربر‬‫بیشتر‬‫یه‬‫کار‬‫اجتماعیه‬‫و‬‫یه‬‫زمینه‬‫تحلیلی‬‫هم‬‫دارن‬‫که‬‫میشه‬ ‫گفت‬‫قسمت‬‫فنی‬‫طراحی‬‫هست‬ UX mk.socialir@yahoo.com
  • 12. Look outside world mentality User status ‫کاربران‬ ‫سریع‬ ‫شناخت‬ ‫کار‬ ‫و‬ ‫کسب‬ ‫در‬ ‫موفقیت‬ ‫کلید‬ !WOW! ‫از‌دریچه‌دید‌کاربر‌به‌محصول‌نگاه‌کنید،‌خودتان‌را‌جای‌کاربر‌بگذارید‌و‌برای‌مشکالت‌راه‌حل‌مفید‌پیدا‌ک‬‫نید‬ ‫ایده‌خود‌را‌با‌مشتری‌در‌میان‌بگذارید‌و‌از‌همفکری‌استفاده‌کنید‬ ‫‌‌این‌شما‌هستید‌که‌باید‌در‌کنار‌آنها‌قرار‌بگیرید‬،‫کاربران‌همیشه‌در‌جای‌صحیح‌و‌مناسب‌خودشان‌قرار‌دارند‬. ‫ایده‬ ‫این‬ ‫آره‬‫پذیر‬ ‫توجیه‬‫هست‬‫کاربر‬ ‫من‬ ‫ایده‬‫می‬ ‫جذب‬ ‫زیاد‬‫کن‬‫ه‬ ‫هستند‬ ‫موافق‬ ‫من‬ ‫با‬ ‫کاربران‬!! ‫میگم‬ ‫درست‬ ‫من‬ !‫دارم‬ ‫ناب‬ ‫ایده‬ ‫یه‬ ‫من‬! ‫ببین‬ ‫رو‬ ‫دنیا‬ ‫ذهنیت‬ ‫ساختمان‬ ‫از‬ ‫خارج‬ mk.socialir@yahoo.com
  • 13. Jumping Ramp Of The Bicycle What? ‫مشتری‬ ‫صدای‬ ‫شنیدن‬ ‫بدون‬ mk.socialir@yahoo.com
  • 14. ‫آیا‬‫تابحال‬‫از‬ ‫خود‬ ‫های‬ ‫برنامه‬ ‫به‬‫کاربر‬ ‫یک‬ ‫دید‬‫ن‬‫گاه‬ ‫اید‬ ‫کرده‬‫؟‬ ‫از‬‫کاربر‬ ‫یک‬ ‫دید‬‫دارد‬ ‫ای‬ ‫حرفه‬ ‫ظاهر‬ ‫ای‬ ‫برنامه‬ ‫چه‬‫؟‬ ‫که‬ ‫جاست‬ ‫این‬ ‫مشکل‬‫نمی‬‫دانیم‬‫ها‬ ‫برنامه‬ ‫این‬ ‫تا‬ ‫میشود‬ ‫سبب‬ ‫عواملی‬ ‫چه‬‫ای‬ ‫حرفه‬‫ب‬ ‫نظر‬ ‫به‬‫رسند‬ ‫معمولی‬ ‫های‬ ‫برنامه‬ ‫سایر‬ ‫از‬ ‫را‬ ‫آنها‬ ‫توانید‬ ‫می‬ ‫شما‬ ‫و‬‫متمایز‬‫کنید؟‬ mk.socialir@yahoo.com
  • 15. (1‫افزار‬ ‫نرم‬ ‫سراسر‬ ‫در‬ ‫یکپارچگی‬ ‫داشتن‬ ‫برای‬ ‫حل‬ ‫راه‬ ‫ارایه‬ (2‫روش‬‫از‬ ‫استفاده‬Template‫افزار‬ ‫نرم‬ ‫سراسر‬ ‫در‬ ‫آماده‬ ‫های‬ (3‫افزار‬ ‫نرم‬ ‫بندی‬ ‫رنگ‬ ‫برای‬ ‫مهم‬ ‫نکات‬ (4‫چگونه‬‫با‬‫رنگ‬‫بندی‬‫دارید؟‬ ‫نگه‬ ‫افزار‬ ‫نرم‬ ‫پای‬ ‫ها‬ ‫ساعت‬ ‫را‬ ‫کاربران‬ ‫مناسب‬ (5‫داد؟‬ ‫خرج‬ ‫به‬ ‫حساسیت‬ ‫افزار‬ ‫نرم‬ ‫فونت‬ ‫انتخاب‬ ‫در‬ ‫باید‬ ‫چرا‬ (6‫؟‬ ‫چیست‬ ‫افزار‬ ‫نرم‬ ‫های‬ ‫فونت‬ ‫برای‬ ‫انتخاب‬ ‫بهترین‬ (7‫مختلف‬ ‫های‬ ‫بخش‬ ‫فونت‬ ‫تغییر‬ ‫برای‬ ‫ساده‬ ‫بسیار‬ ‫روش‬ ‫یک‬ ‫ارایه‬ (8‫فرم‬ ‫با‬Splash‫بردارید‬ ‫ای‬ ‫حرفه‬ ‫افزار‬ ‫نرم‬ ‫یک‬ ‫ارایه‬ ‫سوی‬ ‫به‬ ‫را‬ ‫گام‬ ‫اولین‬. (9‫فرم‬ ‫درون‬ ‫اطالعاتی‬ ‫چه‬Splash‫باشد؟‬ ‫موثر‬ ‫که‬ ‫دهیم‬ ‫قرار‬ (10‫فرم‬ ‫یک‬ ‫چگونه‬Splash‫خوب‬‫کنیم‬ ‫طراحی‬‫؟‬ ‫نرم‬ ‫جامعیت‬ ‫حفظ‬‫افزار‬ mk.socialir@yahoo.com
  • 16. ‫طراحی‬ ‫ترفندهای‬ ‫از‬ ‫بخشی‬‫فرم‬‫های‬‫اطالعات‬ ‫ورود‬ ‫شد‬ ‫ستونه‬ ‫چند‬‫ن‬ ‫ستونه‬ ‫تک‬ mk.socialir@yahoo.com
  • 17. ‫اطالعات‬ ‫ورود‬ ‫های‬ ‫فرم‬ ‫طراحی‬ ‫ترفندهای‬ ‫از‬ ‫بخشی‬ ‫دادن‬ ‫قرار‬Label‫اطالعات‬ ‫ورود‬ ‫های‬ ‫کنترل‬ ‫باالی‬ ‫در‬ ‫دادن‬ ‫قرار‬Label‫ورود‬ ‫های‬ ‫کنترل‬ ‫راست‬ ‫سمت‬ ‫در‬ ‫همراستا‬‫اطالعات‬ Placeholder‫جای‬ ‫به‬ ‫ها‬label‫ها‬ ‫بودن‬ ‫تراز‬label‫ورود‬ ‫های‬ ‫کنترل‬ ‫به‬ ‫نسبت‬ ‫ها‬‫اطالعات‬ Label mk.socialir@yahoo.com
  • 18. ‫اطالعات‬ ‫ورود‬ ‫های‬ ‫فرم‬ ‫طراحی‬ ‫ترفندهای‬ ‫از‬ ‫بخشی‬ Button ‫عملیات‬CRUD‫عملیات‬ ‫شامل‬‫حذف‬ ،‫بروزرسانی‬ ،‫ویرایش‬ ، ‫ثبت‬ ‫دکمه‬ ‫طراحی‬ ‫در‬ ‫تمایز‬‫ها‬ ‫رنگ‬‫و‬ ‫ها‬ ‫دکمه‬ ‫برای‬ ‫مناسب‬‫آیکونها‬:‫گاو‬ ‫براساس‬ ‫بندی‬ ‫رنگ‬‫بنفش‬ ‫ها‬ ‫دکمه‬ ‫قرارگیری‬ ‫محل‬ ‫کاربر‬ ‫درخواست‬ ‫به‬ ‫اضافه‬ ‫های‬ ‫دکمه‬ ‫نمایش‬ ‫بیاورید‬ ‫در‬ ‫منو‬ ‫شکل‬ ‫به‬ ‫را‬ ‫ها‬ ‫دکمه‬ ‫آیکن‬ ‫از‬ ‫استفاده‬‫ها‬ ‫مناسب‬ ‫عنوان‬ ‫انتخاب‬(‫بهتر‬ ‫و‬ ‫نکنید‬ ‫استفاده‬ ‫شخص‬ ‫سوم‬ ‫از‬‫از‬ ‫است‬ ‫کنید‬ ‫استفاده‬ ‫موجودیت‬ ‫نام‬). mk.socialir@yahoo.com
  • 19. ‫اطالعات‬ ‫ورود‬ ‫های‬ ‫فرم‬ ‫طراحی‬ ‫ترفندهای‬ ‫از‬ ‫بخشی‬ Button ‫دکمه‬ ‫موقع‬ ‫چه‬‫استفاده‬‫نکنیم؟‬ ‫استفاده‬ ‫دکمه‬ ‫از‬ ‫موقع‬ ‫چه‬ ‫و‬ ‫کنیم‬ ‫در‬‫صورتی‬‫که‬‫فرمانی‬‫مشخص‬‫به‬‫سیستم‬‫برای‬‫گرفتن‬‫پا‬‫سخ‬(‫اجرای‬ ‫الگوریتم‬‫یا‬‫درخواست‬‫منبع‬‫در‬‫سرور‬) ‫داده‬‫نمی‬‫شود‬‫بهتر‬‫است‬‫از‬‫برچسب‬‫لینک‬‫به‬‫جای‬‫یک‬‫دکمه‬ ‫استفاده‬‫گردد‬.(‫دکمه‬‫های‬‫راهنما‬) mk.socialir@yahoo.com
  • 20. ‫اطالعات‬ ‫ورود‬ ‫های‬ ‫فرم‬ ‫طراحی‬ ‫ترفندهای‬ ‫از‬ ‫بخشی‬ ‫حذف‬ ‫را‬ ‫اختیاري‬ ‫فیلدهاي‬‫نمایید‬.‫اختیا‬ ‫فیلد‬ ‫این‬ ‫که‬ ‫بنویسید‬ ‫برچسب‬ ‫در‬ ‫نمود‬ ‫حذف‬ ‫را‬ ‫آن‬ ‫شود‬ ‫نمی‬ ‫اگر‬‫است‬ ‫ري‬. ‫بانکهاي‬ ‫یا‬ ‫نویسی‬ ‫برنامه‬ ‫نگاه‬ ‫از‬ ‫نه‬ ‫شوند‬ ‫طراحی‬ ‫منطقی‬ ‫کاربر‬ ‫نگاه‬ ‫از‬ ‫باید‬ ‫اطالعات‬ ‫ورود‬ ‫هاي‬ ‫فرم‬‫اطالعاتی‬ ‫شجاع‬ ‫کردن‬ ‫خالصه‬ ‫براي‬‫باشید‬ mk.socialir@yahoo.com
  • 21. ‫اطالعات‬ ‫ورود‬ ‫های‬ ‫فرم‬ ‫طراحی‬ ‫ترفندهای‬ ‫از‬ ‫بخشی‬ ‫سایر‬... ‫فرم‬‫های‬‫استاندارد‬‫مثل‬about , splash‫را‬‫در‬‫پروژه‬‫های‬‫خود‬‫فراموش‬‫نکنیم‬. ‫به‬‫یکپارچگی‬‫در‬‫سراسر‬‫نرم‬‫افزار‬‫در‬‫فرم‬‫های‬‫ورود‬‫اطالعات‬‫پایبند‬‫باشیم‬. ‫در‬‫صورت‬‫عدم‬‫انتخاب‬‫فونت‬،‫مناسب‬‫ارتباط‬‫دایمی‬‫کاربر‬‫با‬‫نرم‬‫افزار‬‫را‬‫مختل‬‫می‬‫ک‬‫نیم‬. ‫در‬‫زمان‬،‫کوتاه‬‫ظاهر‬‫نرم‬‫افزارهایتان‬‫را‬‫برای‬‫رقابت‬‫با‬‫گران‬‫قیمت‬‫ترین‬‫نرم‬‫افزارهای‬ ‫تجاری‬‫طراحی‬‫کنید‬. mk.socialir@yahoo.com
  • 22. Ten do’s and don'ts of UI and UX design (1‌‫تجربه‌ی‌یکسانی‌بدون‬‫در‬‫نظر‌گرفتن‌نوع‌دیوایس‌برای‌کاربران‌فراهم‌کنید‬. (2‫امکانی‌فراهم‌کنید‌که‌یافتن‌منابع‌در‌سایت‌شما‌ساده‌و‌قابل‌فهم‌باشد‬. (3‫قسمت‌های‌مهم‌تر‌را‌در‌مرکز‌توجه‌قرار‌دهید‬. (4‫اطمینان‌حاصل‌کنید‌که‌تمام‌لینک‌ها‌و‌دکمه‌ها‌به‌درستی‌کار‌می‌کنند‬. (5‫اجازه‌دهید‌تا‌کاربران‌کنترل‌تجربه‌ی‌مرور‌کردن‌سایتتان‌را‌در‌دست‌بگیرند‬. (6‫اجازه‌ندهید‌تا‌طراحی‌سایتتان‌مانع‌سهولت‌استفاده‌از‌آن‌شود‬. (7‫مانع‌مرور‌اجمالی‌کاربران‌نشوید‬. (8‫صفحه‌را‌با‌مطاالب‌غیر‌مرتبط‌پر‌نکنید‬. (9‫بازدیدکنندگان‌را‌برای‌لود‌شدن‌مطالبتان‌منتظر‌نگذارید‬. (10‫مواردی‌را‌که‌موجب‌عدم‌توجه‌به‌مطلب‌اصلی‌می‌شود‌حذف‌کنید‬.mk.socialir@yahoo.com
  • 23. ‫یت‬‫ق‬‫ف‬‫مو‬ ‫وی‬‫ز‬‫ر‬‫آ‬ ‫با‬ ‫اسالم‬ ‫مدارک‬ ‫و‬ ‫اطالعات‬ ‫مدیریت‬ ‫پژوهشکده‬‫ی‬ ‫محمد‬‫کریمی‬ mk.socialir@yahoo.com

Editor's Notes

  1. CX مثلاً تجربه مشتری در مورد کار با سایت علی بابا شاید به این صورت باشد: مشتری تبلیغات این شرکت را در فیسبوک یا جاهای دیگر به صورت آنلاین مشاهده می‌کند و نهایتاً تصمیم می‌گیرد که بر روی آن کلیک کند. با کلیک کردن بر روی تبلیغ، مشتری به وب سایت این شرکت منتقل می‌شود. بعد او شروع به بازدید کردن از وب سایت کرده و نگاهی اجمالی و کلی به مطالب داخل آن می‌اندازد. بعد مشتری تصمیم می‌گیرد که با بخش خدمات مشتری تماس گرفته و سؤالاتی بپرسد. فرض می‌کنیم که مشتری بعد از این مرحله مستقیماً به سراغ خرید بلیت می‌رود و پس از پرداخت، یک ایمیل تأییدیه دریافت می‌کند. مشتری با بلیتی که در دست دارد به فرودگاه می‌رود. سوار هواپیما می‌شود. وعده غذایی که در هواپیما سرو می‌شود را میل می‌کند. در مورد وضعیت پرواز از خلبان هواپیما چیزهایی می‌شنود و پس از مدتی هواپیمایش در فرودگاه به زمین می‌نشیند (البته در گل سرسبد کشورهای دنیا -یعنی ایران- ممکن است این هواپیما اصلا به زمین ننشیند!) سپس به دنبال چمدانش می‌گردد و آن را پس می‌گیرد. بعد یک فرم شکایت یا نظرسنجی پر می‌کند و در آن نظرش را در مورد تجربه‌اش از خدمات این شرکت را بیان می‌کند. با بررسی ایمیل‌هایش متوجه می‌شود که یک ایمیل دریافت کرده است که پیشنهاد ویژه و با تخفیف بالا از این این شرکت به او داده شده است. به طور کل، تمام این مراحلی که مشتری طی کرده است تجربه مشتری نامیده می‌شود. UX در مثالی که قبل‌تر تشریح کردیم، تجربه کاربری در رابطه با شرکت علی بابا، به آن بخشی مربوط می‌شود که مشتری مورد نظر قصد داشت بلیت هواپیما را به صورت آنلاین خریداری کند. مثلاً ممکن است او برای این کار از ابزار ویژه خرید بلیت آنلاین برای گرفتن بلیت یک طرفه پرواز تهران به مشهد استفاده کرده باشد. احتمالاً کاربر از این که مجبور بوده بیش از 30 بخش مختلف را در مراحل مختلف پر کند احساس خستگی و کلافگی داشته است. علاوه بر این که یکی از اطلاعات درخواستی برای دریافت بلیت شماره ملی او بوده که باعث شده کمی در مورد روشی که برای دریافت بلیت انتخاب کرده است مردد و مضطرب شود. بسیاری از مشتری‌ها دوست ندارند اطلاعات شخصی و امنیتی خودشان را به دست افراد دیگر بدهند. در نتیجه این مسافر احتمالاً تجربه کاربری خیلی خوبی نداشته است. IXD مثلاً یک طراحی تعاملی خوب می‌تواند به شرکت علی بابا کمک کند که یک ابزار خرید بلیت را به صورت اختصاصی برای شرکتش طراحی کند به صورتی که تعداد فیلدهای لازم برای پر کردن در آن کمتر باشند. به علاوه اطلاعاتی که لازم است توسط کاربر ارائه شوند را هم طوری تغییر می‌دهد که کاربر احساس امنیت و اطمینان بیشتری داشته باشد. یعنی اطلاعات وارده شده کمتر حالت امنیتی و خصوصی داشته باشند.
  2. وظیفه طراح وب سایت چیزی بیش از طراحی محیطی زیبا برای وب سایت شما می باشد که طراح می بایست هیجان و احساسات کاربران شما را در نظر بگیرد و سایت را به گونه ای طراحی نماید تا وب سایت شما ارتباط احساسی برقرار نماید. طراح وب سایت یکی از مهترین اعضای تیم شما می باشد که در صورتی که کار خود را به درستی انجام دهد تاثیر بسیار مثبتی در کسب و کار شما خواهد داشت . مارک زاکربرگ خالق فیس بوک میز طراحان وب سایت خود را نزدیک میز خود قرار داده بود تا بدین وسیله هم کار ایشان را دائما تحت نظر داشته باشد و هم بتواند خط مشی و دیدگاه های خود را دائما به ایشان منتقل نماید تا بدین وسیله طراح با درک بهتر فعالیت وب سایت طراحی های مفهومی تری را ارائه نماید. مهندسان در کار طراحی سایت بخش هایی را پیاده سازی می نمایند که کاربر مشاهده نمی نماید و منطق و اصول کار را پیاده سازی می نمایند حال آنکه طراحان وب سایت رابط کاربری وب سایت را پیاده سازی می نماید.
  3. خیلی از تیم هاي استارتاپ قبل از شناخت مسئله ، خودشون رو درگیر زیر ساخت هاي پیچیده فنی می کنند . به نظر من این کار اشتباه هست و مثل این هست که وقتی نمی دونیم قرار هست چه نوع وسیله نقلیه اي داشته باشیم در مورد چرخ هایی که قرار هست وزن خودرو رو تحمل کنند برنامه ریزي و صحبت کنیم .
  4. UI در کل بیشتر با نگاه مردم به محصول نگاه می کنند و باید برای این کار باید ادارک خوبی از تفکر مردم داشته باشن و اینکه قرار چطوری از محصول استفاده کنن UX شما باید بتونید با مردم مستقیم ارتباط برقرار کنین تا به شما بگن که محصول شما چه چیزی نیاز داره که بهتر بشه بعد شما باید تفسیر و تحلیل کنین و از این اطلاعات استفاده کنین تا در طول زمان بتونین محصول رو بهتر کنین
  5. این عبارت به این موضوع اشاره داره که براي شناخت کاربر باید فکر و ذهنمون رو به سمت جایگاهی که هستن ببریم . باید در جامعه باشیم و در میان افراد . باید با کاربرانمون صحبت کنیم و با مشکلات و نیاز هایی که دارند آشنا بشیم .
  6. تجربه کاربری ( UX ) نشان داده که تا جای امکان از یک ستونه در فرم های ورود اطلاعات استفاده کنید و از چند ستونه شدن بپرهیزید زیرا  چشم و مغز در فرم های  چند ستونه بیشتر درگیر خواهد شد  و حرکت چشم ها  به صورت z   صورت گرفته و به هنگام اسکن فرم کار را دشوار خواهید کرد.
  7. البته برای فرم هایی با تعداد بالای ۵  فیلد این روش در نرم افزارهای ویندوز اپلکیشن پیشنهاد نمی شود اما در وب برای فرم های با فیلدهای بالا نیز پیشنهاد می گردد.
  8. تمایز در طراحی دکمه ها: برآمده باشند و در صورتی که نوع طراحیFlat باشد بهتر است با تغییر اندازه یا کادر بندی آن را شبیه دکمه کنید در صفحات وب معمولا ۹۰ درصد دکمه ها عمل پست کردن را به سرور انجام می دهند این پست ها می توانند آژاکسی و یا به صورت پست عادی انجام گردند. یک اصطلاحی در دنیای تجارت وجود دارد به اسم گاو بنفش به این معنی که اگر به یک دسته گاو نگاه کنید هیچ تفاوتی در بین آنها نمی بینید اما کافی است یکی از گاوها بنفش باشد در بازاریابی اگر شما بتوانید محصول خود را گاو بنفش کنید یک پله از رقبا جلوتر خواهید بود. سعی کنید صفحه از حضور دکمه ها راحت باشد تا می توانید دکمه های کمتری نشان دهید. در صورت نیاز و  سعی کنید به در خواست کاربر دکمه های دیگر نشان داده شوند. محل قرارگیری دکمه: دکمه هایی که با فیلدهای ورودی همردیف نیستند، بدنما می شوند. دو روش برای تراز بندی دکمه ها وجود دارد.
  9. البته برای فرم هایی با تعداد بالای ۵  فیلد این روش در نرم افزارهای ویندوز اپلکیشن پیشنهاد نمی شود اما در وب برای فرم های با فیلدهای بالا نیز پیشنهاد می گردد.