ݺߣ

ݺߣShare a Scribd company logo
‫بانک‬ ‫محصوالت‬ ‫کاربری‬ ‫تجربه‬ ‫طراحی‬ ‫از‬ ‫تجربه‬ ‫ده‬‫ی‬
Hossein Sharafi @MacromediaX
www.macromediax.com
‫گرافیکی‬ ‫نمای‬UI
‫ها‬ ‫المان‬ ‫و‬ ‫ها‬ ‫فلو‬
‫اطالعات‬ ‫معماری‬
‫فیچر‬ ‫طراحی‬/‫سرویس‬
‫بیزینس‬ ‫و‬ ‫کاربر‬ ‫اهداف‬
1.‫باال‬ ‫به‬ ‫پایین‬ ‫از‬ ‫محصول‬ ‫طراحی‬(‫برعکس‬ ‫نه‬)
Credit: The Elements of UX - Jesse James Garret
2.‫کنید‬ ‫هماهنگ‬ ‫کاربر‬ ‫رفتار‬ ‫با‬ ‫را‬ ‫کاربر‬ ‫فلوی‬
‫راهکار‬:‫دهید‬ ‫کاربر‬ ‫به‬ ،‫پول‬ ‫از‬ ‫قبل‬ ‫را‬ ‫کارت‬
‫مشکل‬:‫پول‬ ‫دریافت‬ ‫هنگام‬ ‫بانکی‬ ‫کارت‬ ‫فراموشی‬
‫در‬ ‫اوت‬ ‫الگ‬ ‫فراموشی‬‫کیوسک‬‫های‬swype
‫رویکرد‬Barrier design
Read more: Macromediax.com/UX/514
‫راهکار‬:‫کنید‬ ‫دریافت‬ ،‫مرحله‬ ‫آخرین‬ ‫از‬ ‫قبل‬ ‫را‬ ‫پسورد‬
3.‫واقعی‬ ‫دنیای‬ ‫در‬ ‫کاربر‬ ‫توسط‬ ‫محصول‬ ‫تست‬(‫شما‬ ‫اتاق‬ ‫در‬ ‫نه‬)!
‫واقعی‬ ‫دنیای‬ ‫در‬ ‫سازی‬ ‫پیاده‬
‫محصول‬ ‫خروجی‬(output)
‫طراحی‬ ‫فرایند‬
‫محصول‬ ‫نتیجه‬(outcome)
Read more: bit.ly/design-outcome
4.‫توسعه‬ ‫کار‬ ،‫اطالعات‬ ‫معماری‬ ‫چیدن‬‫ها‬‫دهنده‬‫نیست‬!
‫گزینه‬"‫بیمه‬ ‫حق‬ ‫پرداخت‬"‫خودپردازها‬ ‫در‬ ‫را‬‫اند‬‫گذاشته‬‫منوی‬ ‫توی‬
"‫وجه‬ ‫انتقال‬."
‫مورد‬ ‫این‬ ،‫بانکی‬ ‫سیستم‬ ‫در‬ ‫چون‬ ‫چرا؟‬‫وجه‬ ‫انتقال‬ ‫متد‬ ‫با‬‫انجام‬
‫چیند‬‫می‬ ‫فانکشن‬ ‫اساس‬ ‫بر‬ ‫رو‬ ‫منوها‬ ،‫فنی‬ ‫تیم‬ ‫و‬ ‫شه‬‫می‬!
developer-centric development !
Card sorting / tree test
‫تست‬5‫کاربر‬/‫غیرفنی‬ ‫همکار‬
5.‫کارفرما‬ ‫به‬ ‫طراحی‬ ‫مستندات‬ ‫ارائه‬
Quantitative Survey results
Requirements Documents
Heuristic evaluation results
User Flow
Usability checks (colors, elements)
6.‫ها‬ ‫دهنده‬ ‫توسعه‬ ‫به‬ ‫سازی‬ ‫پیاده‬ ‫راهنمای‬ ‫مستندات‬ ‫ارائه‬
UI implementation notes
Activity diagram (flowchart)
Design system / UI KIT
Code friendly Design
UI component check out
7.‫مالی‬ ‫های‬ ‫فناوری‬ ‫در‬ ‫نیاز‬ ‫باالترین‬ ‫امنیت؛‬
‫تر‬ ‫کوتاه‬ ‫های‬ ‫فرم‬
‫کاربر‬ ‫خصوصی‬ ‫حریم‬ ‫حداکثری‬ ‫حفظ‬
‫کاربر‬ ‫برای‬ ‫سازی‬ ‫شفاف‬
300 million dollar button
Read more: bit.ly/300button
8.‫کیفیت‬ ‫هرم‬(‫کاربری‬ ‫تجربه‬)‫محصول‬ ‫طراحی‬ ‫در‬
Credit: Alan Dix
‫اولیه‬ ‫کارکرد‬-‫محصول‬ ‫خود‬ ‫فنی‬ ‫موارد‬
‫هدف‬ ‫به‬ ‫رسیدن‬ ‫سازی‬ ‫آسان‬ ‫و‬ ‫بهینه‬
‫جذابیت‬ ،‫دلبستگی‬ ‫ایجاد‬ ،‫کاربر‬ ‫رضایت‬ ‫احساس‬
Focus on UX once lower needs are satisfied
9.‫محور‬ ‫داده‬ ‫طراحی‬/‫کاوی‬ ‫داده‬/‫مصنوعی‬ ‫هوش‬
Database
Analytics / firebase
Company support / helpdesk
Social network comments
Data mining / AI
10.‫طراحی‬ ‫حوزه‬ ‫در‬ ‫نگاه‬ ‫تغییر‬ ‫برای‬ ‫هایی‬ ‫کتاب‬
Refactoring UI ‫روزمره‬ ‫اشیاء‬ ‫طراحی‬ ‫سازی‬ ‫جایگاه‬
‫شوگر‬ ‫استیو‬ ، ‫واتن‬ ‫آدام‬ ‫نورمن‬ ‫دونالد‬ ‫ریس‬ ‫ل‬َ ‫ا‬–‫تروت‬ ‫جک‬
‫شما‬ ‫همراهی‬ ‫از‬ ‫تشکر‬ ‫با‬
Hossein Sharafi
Twitter.com/MacromediaX
Linkedin.com/in/Hossein-Sharafi

More Related Content

Ux in financial apps | تجربه کاربری خودپردازها و اپ های بانکی

  • 1. ‫بانک‬ ‫محصوالت‬ ‫کاربری‬ ‫تجربه‬ ‫طراحی‬ ‫از‬ ‫تجربه‬ ‫ده‬‫ی‬ Hossein Sharafi @MacromediaX www.macromediax.com
  • 2. ‫گرافیکی‬ ‫نمای‬UI ‫ها‬ ‫المان‬ ‫و‬ ‫ها‬ ‫فلو‬ ‫اطالعات‬ ‫معماری‬ ‫فیچر‬ ‫طراحی‬/‫سرویس‬ ‫بیزینس‬ ‫و‬ ‫کاربر‬ ‫اهداف‬ 1.‫باال‬ ‫به‬ ‫پایین‬ ‫از‬ ‫محصول‬ ‫طراحی‬(‫برعکس‬ ‫نه‬) Credit: The Elements of UX - Jesse James Garret
  • 3. 2.‫کنید‬ ‫هماهنگ‬ ‫کاربر‬ ‫رفتار‬ ‫با‬ ‫را‬ ‫کاربر‬ ‫فلوی‬ ‫راهکار‬:‫دهید‬ ‫کاربر‬ ‫به‬ ،‫پول‬ ‫از‬ ‫قبل‬ ‫را‬ ‫کارت‬ ‫مشکل‬:‫پول‬ ‫دریافت‬ ‫هنگام‬ ‫بانکی‬ ‫کارت‬ ‫فراموشی‬ ‫در‬ ‫اوت‬ ‫الگ‬ ‫فراموشی‬‫کیوسک‬‫های‬swype ‫رویکرد‬Barrier design Read more: Macromediax.com/UX/514 ‫راهکار‬:‫کنید‬ ‫دریافت‬ ،‫مرحله‬ ‫آخرین‬ ‫از‬ ‫قبل‬ ‫را‬ ‫پسورد‬
  • 4. 3.‫واقعی‬ ‫دنیای‬ ‫در‬ ‫کاربر‬ ‫توسط‬ ‫محصول‬ ‫تست‬(‫شما‬ ‫اتاق‬ ‫در‬ ‫نه‬)! ‫واقعی‬ ‫دنیای‬ ‫در‬ ‫سازی‬ ‫پیاده‬ ‫محصول‬ ‫خروجی‬(output) ‫طراحی‬ ‫فرایند‬ ‫محصول‬ ‫نتیجه‬(outcome) Read more: bit.ly/design-outcome
  • 5. 4.‫توسعه‬ ‫کار‬ ،‫اطالعات‬ ‫معماری‬ ‫چیدن‬‫ها‬‫دهنده‬‫نیست‬! ‫گزینه‬"‫بیمه‬ ‫حق‬ ‫پرداخت‬"‫خودپردازها‬ ‫در‬ ‫را‬‫اند‬‫گذاشته‬‫منوی‬ ‫توی‬ "‫وجه‬ ‫انتقال‬." ‫مورد‬ ‫این‬ ،‫بانکی‬ ‫سیستم‬ ‫در‬ ‫چون‬ ‫چرا؟‬‫وجه‬ ‫انتقال‬ ‫متد‬ ‫با‬‫انجام‬ ‫چیند‬‫می‬ ‫فانکشن‬ ‫اساس‬ ‫بر‬ ‫رو‬ ‫منوها‬ ،‫فنی‬ ‫تیم‬ ‫و‬ ‫شه‬‫می‬! developer-centric development ! Card sorting / tree test ‫تست‬5‫کاربر‬/‫غیرفنی‬ ‫همکار‬
  • 6. 5.‫کارفرما‬ ‫به‬ ‫طراحی‬ ‫مستندات‬ ‫ارائه‬ Quantitative Survey results Requirements Documents Heuristic evaluation results User Flow Usability checks (colors, elements)
  • 7. 6.‫ها‬ ‫دهنده‬ ‫توسعه‬ ‫به‬ ‫سازی‬ ‫پیاده‬ ‫راهنمای‬ ‫مستندات‬ ‫ارائه‬ UI implementation notes Activity diagram (flowchart) Design system / UI KIT Code friendly Design UI component check out
  • 8. 7.‫مالی‬ ‫های‬ ‫فناوری‬ ‫در‬ ‫نیاز‬ ‫باالترین‬ ‫امنیت؛‬ ‫تر‬ ‫کوتاه‬ ‫های‬ ‫فرم‬ ‫کاربر‬ ‫خصوصی‬ ‫حریم‬ ‫حداکثری‬ ‫حفظ‬ ‫کاربر‬ ‫برای‬ ‫سازی‬ ‫شفاف‬ 300 million dollar button Read more: bit.ly/300button
  • 9. 8.‫کیفیت‬ ‫هرم‬(‫کاربری‬ ‫تجربه‬)‫محصول‬ ‫طراحی‬ ‫در‬ Credit: Alan Dix ‫اولیه‬ ‫کارکرد‬-‫محصول‬ ‫خود‬ ‫فنی‬ ‫موارد‬ ‫هدف‬ ‫به‬ ‫رسیدن‬ ‫سازی‬ ‫آسان‬ ‫و‬ ‫بهینه‬ ‫جذابیت‬ ،‫دلبستگی‬ ‫ایجاد‬ ،‫کاربر‬ ‫رضایت‬ ‫احساس‬ Focus on UX once lower needs are satisfied
  • 10. 9.‫محور‬ ‫داده‬ ‫طراحی‬/‫کاوی‬ ‫داده‬/‫مصنوعی‬ ‫هوش‬ Database Analytics / firebase Company support / helpdesk Social network comments Data mining / AI
  • 11. 10.‫طراحی‬ ‫حوزه‬ ‫در‬ ‫نگاه‬ ‫تغییر‬ ‫برای‬ ‫هایی‬ ‫کتاب‬ Refactoring UI ‫روزمره‬ ‫اشیاء‬ ‫طراحی‬ ‫سازی‬ ‫جایگاه‬ ‫شوگر‬ ‫استیو‬ ، ‫واتن‬ ‫آدام‬ ‫نورمن‬ ‫دونالد‬ ‫ریس‬ ‫ل‬َ ‫ا‬–‫تروت‬ ‫جک‬
  • 12. ‫شما‬ ‫همراهی‬ ‫از‬ ‫تشکر‬ ‫با‬ Hossein Sharafi Twitter.com/MacromediaX Linkedin.com/in/Hossein-Sharafi