هنر , خلاقیت , آموزش

دید روانشناسی در طراحی تجربه کاربر


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

- اکثر مردم به آنچه بیتشر میتوانند انجام دهند فکر نمیکنند ! 

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

- محدودیت ها 

اکثر مردم مالتی تسک نیستند ! یعنی نمیتوانند بر روی چندین کار در آن واحد تمرکز کنند و این وشیفه بر عهده طراح UX است که فکر و ذهینیت آنها را متمرکز نماید و اطلاعاتی که آنها به دنبالشان هستند را در اختیارشان قرار دهد … دسته بندی اطلاعات ( بر حسی موضوعیت و یا زمان نمونه های خوبی هستند ) … نمایش مطالب مهم در سر تیتر ها و … پس باید به خوبی نیاز های کاربران را در نظر داشته باشید .


- کاربران اشتباه میکنند … !

انسان ، خود و فکرش جایزالخطاست … میتواند اشتباه کند … تمامی کاربران شما طراح و مهندس نیستند و همه افکار شما را نمیدانند پس باید به آنها در مواجهه با یک مقوله جدید حق بدهیم که گیج شوند و این وظیفه شماست که تا چه حد میتوانید از سردرگمی آنها جلوگیری کنید … مثالی میزنم : شما تا به حال خودرو BMW نداشته اید … در زمانیکه شما اولیه خودرو BMWخود را خریداری میکنید با کلی علامت سوال روبرو هستیند تا نحوه استفاده از امکاناتش را فرا بگیرید که این امری معمول و طبیعیست … فرض میکنیم مدل ماشین شما ۲۰۰۸ میباشید … حال شما بر حسب اتفاق سوار خودرو BMW مدل ۲۰۱۳ دوستتان میشوید … آیا سردرگم و گیج هستید ؟ خیر × چرا که طراحان و مهندسان این شرکت خودرو ساز خوب میدانند که با شما باید چگونه رفتار کنند که وقتی خودرو خود را عوض میکنید بتوانید به راحتی از آن استفاده کنید و با اطلاعات قبلی که دارید دچار سردرگمی نشوید .. .برای همین است که شخصی که BMW و یا Benz خریداری میکند نمیتواند در خودرو دیگر حس بهتری داشته باشد …

۱۳۹۴-۰۱-۰۵ Ui-design.ir HTML/CSS
در طراحی های ریسپانسیو ( Responsive ) شما به طور قطع برای نمایش در Device های گوناگون از meta name=”viewport” استفاده خواهید کرد که کار بسیار درستی است ، اما برای ظرافت در نوع نمایش آن در همگام Landscape و همچنین portrait میتوان تغییرات دیگری نیز اعمال کرد که ارزش کار بیشتری را به پروژه خود داده باشید .متا تگ زیر به صورت عمومی برای انجام واکنش در نوع نمایش ریسپانسیو استفاده میشود :<meta name=“viewport“ content=“width=device-width“>
به این معنیست که مرورگر از تمامی محیط خود برای نمایش وب سایت استفاده نماید . اگر به گوشی های iphone نگاهی بیاندازیم از آیفون ۱ تا ۵ عرض نمایش ۳۶۰ پیکسل و در آیفون ۶ عرض نمایش ۳۷۵ پیکسلی و در آیفون ۶+ عرض نمایشی ۴۱۴ پیکسلی را پیش روی خود داریم . پس در گوشی های متفاوت با گستره ی نمایش مختلفی روبرو هستیم که این تگ در device ها مختلف تمامی گستره ی نمایش را بر در میگیرد .
به تصویر زیر دقت نمایید ، ما در چرخش گوشی به هنگام نمایش با یک بزرگنمایی عجیب و غریب سروکار خواهیم داشت :

چه رنگی و چرا ؟


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


تاثیر رنگ در پروژه شما 

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


انتخاب رنگ مناسب 

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

marketo-infographic-true-colors-what-your-brand-colors-say-about-your-business

میتوانید مشاهده کنید که چه رنگ هایی در چه حیطه تجارتی به خوبی پاسگو بوده و تاثیر خوب و یا بدی را در بیننده خود داشته است .

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


چه تعداد رنگ باید استفاده کنیم ؟ 

گاهی موارد این سوال یکی از اولویت هاست اما همانطور که در این اینفوگرافیک مشاهده کردید تنها ۵% از ۱۰۰ شرکت برتر مورد بررسی قرار گرفته از بیش از دو رنگ در طرح های اصلی خود استفاده کرده اند ( منظور از رنگ طیف رنگی میباشد مثلا : آبی و قرمز و نه آبی پرنگ و کم رنگ ) .

___ در طراحی های چاپی نیز اکثرا برای انتخاب رنگ و تاثیر گذاری بلند مدت در ذهن بیننده خود از رنگ های اصلی برند و لوگو استفاده میشود .

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


انتخاب رنگ بر اساس عکس 

choosing-from-photos-2

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