Ux & ui 1

23
ران گ ی ه د ب ی ما ن ما ه ز چ ی زا ل و ص ح م هاد ن ش" ی$ پ ی م م؟ ی ن ک دز ش ز گی ی ا ب ج و م ول ص ح م ی ف ر مع ی ش خ ب< ت ه لذ رب ج< ب ذه ش< ق ل خ که[email protected] ی م ی ر ک مذ ح م

Transcript of Ux & ui 1

چه زمانی ما

به دیگران

محصولی را

می پیشنهاد

کنیم؟معرفی موجب انگیزش در

محصول

که خلق تجربه لذت بخشی

شده

[email protected]محمد کریمی

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 FA

C Eبه چگونگی صفحه

بندی محصول

معطوف است.

رفتار، حالت و

احساسات کاربر

[email protected]

آ�ش�ن�ا�ی�ی� ب�ا� چ�ن�د� م�ف�ه�و�م

[email protected]

آ�ش�ن�ا�ی�ی� ب�ا� چ�ن�د� م�ف�ه�و�م(CXی�ا� ) customer experienceت�ج�ر�ب�ه� م�ش�ت�ر�ی

CX  با یک شرکت یا یک موسسه، یک برند، محص�ول، تعامل آن چیزی است که مشتری در احساس خدمات شرکت، سایت و یا اپ موبایل دریافت می کند.

(UXی�ا� ) user experienceت�ج�ر�ب�ه� ک�ا�ر�ب�ر

UX  هRب یRک فرد چطور کRه ایRن یعنRی کاربری به تجربRه یRا درونRی صRورت احسRاسی یRا به طور ویژRه یRکتعاملRی کRه بRا یRک پروژRه )مثRل وب سایت ها، محصRول دیجیتال و

اپلیکیشن های موبایل و ... ( دارد، واکنش نشان می دهد.

RیRلRمRاRعRت RیRحRاRرRطInteraction design ( RاRیIXD)

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

[email protected]

آ�ش�ن�ا�ی�ی� ب�ا� چ�ن�د� م�ف�ه�و�م RیRحRاRرRط RرRکRفRتdesign thinking

و فیزیکی تعاملRی بRا رابطRه در فرد یRک کلRی تجربRه طراحRی یعنRی طراحRی تفکRر موبایل، وب اپلیکیشRن بRا تعامRل از تجرRبRه مثالً دارد، یRک شرکRت بRا کRه غیرفیزیکRی

سایت، تماس تلفنی و ... مسئله در تفکر طراحی2سود و بهره وری شرکت و صاحب خدمات1(تیم ها و کسانی که این خدمات را ارائه می کنند.2(

RلRوRصRحRم RیRحRاRرRطPRODUCT DESIGN

و فرم چیزهای تعریRف کردن شکRل یعنRی کلRی به طور یا فیزیکRیطراحRی محصRول .دیجیتالی

ایRن اسRت کRه طراحRی محصRول بسRیار کلی تر از طراحRی تعاملRی بRا اصRطالحتفاوت ایRن طراحRی تعاملRی در نظRر گرفتRه می شود کRه هRم بRه تعامالت مرتبRط مRی باشRد و هRم به

اجسام و اشیاء[email protected]

ISO ب�ر�ا�س�ا�س� UXت�ع�ر�ی�ف�

تعریف اساس عنوانISOبر user experience

شامل کلیه عواطف، اعتقادات، مزیت ها، پاسخ های

اجراهRا و رفتارهRا روانRی، و زمان فیزیکRی از قبل

اطالق می بعRد از آRن و زمان اسRتفاده، در اسRتفاده

گردد. [email protected]

UX و� UIت�ف�ا�و�ت� ب�ی�ن� UI ه میRی شود گفتRش داده مRفحه نمایRه در صRر چیزی کRه هRنعت نرم افزار بRدر ص

شود کRه شامRل تصRاویر، متRن هRا، دیاگرام هRا، ماژولهRا، جداول ، ویدئوهRا و همچنین

رنگ ، سایر و مکان آن ها می باشد.

UX ر ازRیع تRیار وسRبس UI ی که ازRاس کاربر زمانRه و احسRه تجربRد و بRی باشRم

محصول شما استفاده می نمایند گفته می شود.

بRه عنوان مثال زمانRی کRه شمRا از سRایت دیجRی کاال محصRولی را سRفارش مRی دهید و

خوبRی وجود داشته UXآRن بسRیار سRریع تحویRل شمRا مRی گردد بRه ایRن معناسRت کRه

[email protected]است.

ب�ا� ه�م� ب�ب�ی�ن�ی�مخارجی

ایرانی

http://www.pennyjuice.com/htmlversion/whoispj.htmwww.techinsider.iowww.mashable.comwww.engadget.com

www.tabnak.irhttps://www.alibaba.ir/ www.digikala.com https://bama.ir/ [email protected]

UX )USER EXPERIENCE(طراح�ی شده و تمام�ی تالش این کاربر خاص شمRا تجرب�ه کاربری، روش�ی برای س�اخت محص�ولی هس�ت ک�ه برای

رضایت در جه�ت خلRق محیRط تعاملRی راحRت و کاربردی عل�م برای موفقی�ت و رش�د کس�ب و کار شم�ا ب�ا هدف

می باشد.مندی کاربر نهایی در ذهن کاربر نقش ببنددخاطره ای خوش هدف، این است که

ارتباط راحت کاربر با محصول -< خوشحالی و رضایت کاربر

اصول و شناخت صحیح از کاربر نهایی محصول

(: هدف قراردادن مشکالت کاربر و ارایه راه حل تعاملی لذت بخش و UXDطراح تجربه کاربری )مفید

معیارهای توصیف رفتار کاربر، قابل اندازه گیری

?

?

?

?

? از محصول استفاده بازهمتا او

کند.

[email protected]

UXD )USER EXPERIENCE DESIGNER(

UXDدانش

روانشناسی

انسان شناسی

علوم کامپیوتر

طراحی گرافیک

طراحی صنعتی

علوم شناختی

شناخت و

حدس

رفتارهای

کاربر

روابط عمومی خوب و باالیی

به ویژگی هاي تکنیکی و فنی UXDیک کار کاری ندارد.

[email protected]

کدام برای شما

مناسب است:ذهن طراحRی بر مبنای رابRط کاربری بیشتRر بRه درد کسRایی میخوره کRه

دارن و یک کم نیاز به تکنیک هم دارنتوانایی های ویژوالو هنرمندتر

UX & UI

UI

طراحRی بر مبنای تجربRه کاربر بیشتRر یRه کار اجتماعیRه و یRه زمینRه تحلیلی

هم دارن که میشه گفت قسمت فنی طراحی هست

UX

[email protected]

Look outside world mentality

User status

کلید موفقیت در کسب و کار شناخت سریع کاربران

!WOW

!از دریچه دید کاربر به محصول نگاه کنید، خودتان را جای کاربر بگذارید و برای مشکالت راه حل مفید

پیدا کنید

کاربران همیشه در جای صحیح و مناسب خودشان قرار دارند، این شما هستید که باید در کنار آنها قرار ایده خود را با مشتری در میان بگذارید و از همفکری استفاده کنید

بگیرید.

ایده من کاربر زیاد آره این ایده توجیه پذیر هستجذب می کنه

!! کاربران با من موافق هستند

من درست میگمم�ن� ی�ه� ا�ی�د�ه� ن�ا�ب� !

د�ا�ر�م�!

خارج از ساختمان ذهنیت دنیا رو ببین

[email protected]

Jumping Ramp Of The BicycleWhat?

طراحی شما بیهوده و

پوچبدون شنیدن صداي

مشتري

[email protected]

دید آیا تابحال به برنامه های خود از

نگاه کرده اید؟یک کاربر

چه برنامه ای ظاهر دید یک کاربر از

دانیم چه عواملی سبب میشود تا این برنامه ها مشکل این جاست که نمیحرفه ای دارد؟

به نظر برسند و شما می توانید آنها را از سایر برنامه های حرفه ای

کنید؟متمایزمعمولی [email protected]

ارایه راه حل برای داشتن یکپارچگی در سراسر نرم افزار1( های آماده در سراسر نرم افزارTemplateروش استفاده از 2(نکات مهم برای رنگ بندی نرم افزار3(چگونه با رنگ بندی مناسب کاربران را ساعت ها پای نرم افزار نگه دارید؟4(چرا باید در انتخاب فونت نرم افزار حساسیت به خرج داد؟5(بهترین انتخاب برای فونت های نرم افزار چیست ؟6(ارایه یک روش بسیار ساده برای تغییر فوRنت بخش های مختلف7( اولین گام را به سوی ارایه یک نرم افزار حرفه ای بردارید.Splashبا فرم 8( قرار دهیم که موثر باشد؟Splashچه اطالعاتی درون فرم 9(

خوب طراحی کنیم؟Splashچگونه یک فرم 10(

حفظ جامعیت نرم افزار

[email protected]

RیRحRاRرRط RیRاRهRدRنRفRرRت RزRا RیRشRخRمبRرRی فRاRه چRنRدR سRتRوRنRهR وRرRوRدR اRطRالRعRاRت

شRدRنتRکR سRتRوRنRه

[email protected]

RیRاRه RمRرRف RیRحRاRرRط RیRاRهRدRنRفRرRت RزRا RیRشRخRبوRرRوRدR اRطRالRعRاRت

قرار دادنLabelدر باالی کنترل های ورود اطالعات   قرار دادنLabelهمراستا در سمت راست کنترل های ورود اطالعات Placeholderها به جای labelها تراز بودنlabelها نسبت به کنترل های ورود اطالعات 

Label

[email protected]

RیRاRه RمRرRف RیRحRاRرRط RیRاRهRدRنRفRرRت RزRا RیRشRخRبButtوRرRوRدR اRطRالRعRاRت

on شامل عملیات  ثبت ، ویرایش، بروزرسانی، حذفCRUDعملیات

تمایز در طراحی دکمه ها رنگ مناسب برای دکمه ها و آیکونها: رنگ بندی

براساس گاو بنفشمحل قرارگیری دکمه هانمایش دکمه های اضافه به درخواست کاربردر بیاورید Rدکمه ها را به شکل منواستفاده از آیکن ها انتخاب عنوان مناسب )از سوم شخص استفاده نکنید و

بهتر است از نام موجودیت استفاده کنید.(

[email protected]

RیRاRه RمRرRف RیRحRاRرRط RیRاRهRدRنRفRرRت RزRا RیRشRخRبوRرRوRدR اRطRالRعRاRت

Button

کنیم و چه موقع از دکمه استفاده نکنیم؟استفادهچه موقع دکمه

در صRورتی کRه فرمانRی مشخص بRه سیستم برای گرفتن یRا درخواسRت منبRع در سRرور( الگوریتRم )اجرای پاسRخ داده نمRی شود بهتRر اسRت از برچسRب لینRک بRه جای یک

دکمه استفاده گردد. )دکمه های راهنما(

[email protected]

RیRاRه RمRرRف RیRحRاRرRط RیRاRهRدRنRفRرRت RزRا RیRشRخRبوRرRوRدR اRطRالRعRاRت فیلدهای اختیاری را حذف نمایید. اگر نمی شود آن را حذف نمود در برچسب

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

نویسی یا بانکهای اطالعاتیبرای خالصه کردن شجاع باشید

[email protected]

RیRاRه RمRرRف RیRحRاRرRط RیRاRهRدRنRفRرRت RزRا RیRشRخRبوRرRوRدR اRطRالRعRاRت .R.R. RرRیRاRس

فرم های اس�تاندارد مث�ل about , splash را در پروژه های خودفراموش نکنیم.

اطالعات ورود های فرم در افزار نرم در سراسر یکپارچگ�ی ب�ه پایبند باشیم.

در ص�ورت عدم انتخاب فون�ت مناس�ب، ارتباط دایم�ی کاربر با نرمافزار را مختل می کنیم.

گران با  رقاب�ت برای را افزارهایتان نرم ظاه�ر کوتاه، زمان در قیمت ترین نرم افزارهای تجاری طراحی کنید.

[email protected]

Ten do’s and don'ts of UI and UX design تجربه ی یکسانی بدون در نظر گرفتن نوع دیوایس برای کاربران فراهم کنید.1(

امکانی فراهم کنید که یافتن منابع در سایت شما ساده و قابل فهم باشد.2(

قسمت های مهم تر را در مرکز توجه قرار دهید.3(

اطمینان حاصل کنید که تمام لینک ها و دکمه ها به درستی کار می کنند.4(

اجازه دهید تا کاربران کنترل تجربه ی مرور کردن سایتتان را در دست بگیرند.5(

اجازه ندهید تا طراحی سایتتان مانع سهولت استفاده از آن شود.6(

مانع مرور اجمالی کاربران نشوید.7(

صفحه را با مطاالب غیر مرتبط پر نکنید.8(

بازدیدکنندگان را برای لود شدن مطالبتان منتظر نگذارید.9(

[email protected]مواردی را که موجب عدم توجه به مطلب اصلی می شود حذف کنید.10(

[email protected]محمد کریمی