نقشه راه برای تبدیل شدن به یک طراح رابط کاربر و تجربه کاربری (UI/UX)

در مطالب پیشرو، یک نقشه راه برای چگونگی تبدیل شدن به یک طراح UI/UX وجود دارد. نقشه راه به گونه‌ای است که با ابزارهای متداول و خلاقیت راه به سوی طراح UI/UX را برای شما هموار میکند.با توجه به تکنولوژی های روز دنیا و روندی که جهان پیش رو گرفته، بیشتر کارها و امور به صورت آنلاین و از طریق وبسایت‌ها و شبکه های مجازی صورت میگیرد و داشتن یک استارت آپ موفق به عوامل بسیاری بستگی دارد.یکی از آن عوامل داشتن رابط کاربری (UI) و تجربه کاربری (UX) که از اجزای مهم و عامل موفقیت در کارآفرینی است.اغلب افراد دو اصلاح UI و UX را یکی و شبیه هم میدانند در ابتدا لازم است که با مفاهیم اولیه آن آشنا شویم :Ui:در واقع معنی و منظور از UI ( رابط کاربری) همان رنگ ها، دکمه ها، عکس ها، آیکون ها وغیره است.دیجی کالا مثال خوبی است برای درک بهتر از رابط کاربری.کاربران ایرانی اکثر خرید های خود را از این وب سایت محبوب انجام میدهند و بیشتر آنها رضایت نسبی از نحوه تعامل با وب سایت را دارند طراحی جذاب و کاربر پسند و همچنین استفاده از رنگ ها یکی از عواملی است تا این سایت فروشگاهی یکی از بهترین ها در حوزه فروشگاه اینترنتی باشد.Ux:تفاوت قابل توجهی بین UI و UX وجود دارد به گونه ای که منظور از UX وظایف مربوط به روانشناسی رنگ ها و شخصیت افراد و آزمایش A/B و ارزیابی آماری و غیره است.برای مثال اگر شخصی در خرید یک محصول کاربردی در زمان کمتری به نتیجه دلخواه برسد قطعا رضایت بیشتری از سایت شما دارد و هر چقدر دستیابی به محصولات شما آسان باشد شما در طراحی UX موفق تر خواهید شد بنابراین یک طراح UX توجه بیشتری به رضایت کاربر هنگام استفاده از محصول یا خدمات شما دارد.نقشه راه رابط کاربری (UI) :ابزار و وب سایت ها مورد نیاز در رابط کاربری:ICONS :ICONARCHIVE.COMICONFINDER.COMFLATICON.COMUI KIT :freebiesbug.comXdguru.comGetuikit.comColors :Paletton.comGoogle materialAbode kulerDesign ideas:Collectui.comUiparade.comUimovement.comStock photos :123rf.comStock.adobe.comPixabay.comدو تصویر زیر را در نظر بگیرید:در 90% نظرات کاربران ، رابط کاربری IOS جلوه و نما بیشتری نسبت به وAndroid دارد و تصویر سمت راست بیشتر جلب توجه میکند. به دلیل زیر:تصویر سمت چپ بدون تقارن چپ و راست است و باعث عدم تمرکز می گردد در حالی که در تصویر راست این ویژگی رعایت شده است.استفاده از فونت های رنگی در تصویر سمت چپ در حالی که در سمت راست فقط از یک رنگ با دو شفافیت متفاوت استفاده شده است.دکمه های متعددی در تصویر سمت چپ استفاده شده است اما در تصویر سمت راست دکمه کمتر و کاربردی تر استفاده شده است.دو مدل فونت در تصویر سمت چپ استفاده شده اما در تصویر سمت راست فونت ها ساده و مناسب است.نقشه راه UX (تجربه کاربری) :تمرکز اصلی تجربه کاربری، روانشناسی افراد است در واقع وب سایت و اپلیکیشن های طراحی شده باید به گونه ای باشند تا افراد هنگام کار کردن به مقصد نهایی خود برسند و رضایت کافی داشته باشند. بسیار پیش آمده افراد در زمان دانلود اپلیکیشن مورد نیاز به دلیل داشتن تجربه کاربری ضعیف، آن برنامه را دیلیت میکنند.به عنوان مثال اینستاگرام از محبوبیت فیس بوک پیشی گرفته است.اینستاگرام با روانشناسی دقیق به موفقیت دست یافت و کاربران با طی کردن مسیر کمتر و ساده‌تر به مسیر میرسند.در نقشه راه باید درباره محصول یا خدماتی که قرار است ارائه شود بدانید :چه محصولی قرار است ساخته شود؟چه کسی قرار است از این محصول استفاده کند؟چگونه از آن استفاده کنند؟آزمایش و تحلیل‌های زیادی بر روی افراد و کاربران صورت گرفته باعث نشان دادن روند درست یا غلط بودن طراحی است.برای مثال طبق تست های انجام شده فردی با نصب یک برنامه ورزشی تشویق به ورزش روزانه می شود چرا که در برنامه نصب شده یک تقویم کلی وجود دارد و روزهای که فرد در آن روز ورزش میکند خط نارنجی تعلق میگیرد و روزی که انجام نشود خط آبی و فرد برای اینکه این روند خطی از بین نرود تشویق به ورزش روزانه می شود.و یک مثال جالب از UI/UX گوگل :سایتی مانند ورزش 3 در ایران و گوگل در جهان چندین سال متوالی است که همان شکل ظاهری خود را حفظ کرده اند به این علت که کاربرانشان تجربه خوبی از آسودگی کار کردن با سایتشان را دارند و به این سادگی طراحی ui را تغییر نمیدهند که مبادا مورد نارضایتی کاربران مواجه شوند.طبق آزمایشات انجام شده، محققان به این نتیجه رسیده اند که انسان منطقی نیست!الگوهای فوق نشان میدهد که انسان همیشه بر اساس منطق و خرد تصمیم نمیگیرد و احساسات و تعصبات و ارتباطات نقش بسیاری در تصمیم گیری دارند و همچنین اگر الگویی اثری در ذهن افراد ثبت شود و مدت زیادی از آن بگذرد زمان زیادی لازم است تا آن طرح و نقش از ذهن حذف شود.نظریه فرایند دوگانه : سریع و آهسته فکر کردن:حالت تفکر کند: این حالت زمانی رخ میدهد که ذهن نیاز به تفکر فشرده دارد برای مثال خرید یک نرم افزار تدوین عکس که هر دو به یک قیمت و یک کار را انجام میدهند شما احتمالا سعی می کنید بر اساس محبوبیت UI زیباتر و نظر مثبت کاربران تصمیم به خرید کنید.حالت تفکر سریع : این حالت زمانی رخ میدهد که حداقل چندین بار در زمان های گذشته برای شما رخ داده باشد و قبلا با آن آشنا شده اید.در واقع مغز برنامه های معمول برای موفقیت های آشنا را ذخیره میکند و سعی میکند تصمیم گیری را به منظور صرفه جویی در منابع ذهنی به صورت خودکار انجام دهد.برای مثال ایمیل های روزانه یک وب سایت که بی اهمیت است و شخص بدون خواندن و باز کردن ایمیل اقدام به حذف آن می نماید.به تصویر زیر توجه کنید :انسان موجودی اجتماعی است، هنگامی که داستان، فیلم و سریال خوب روایت شده را میشنویم به صورت خودکار به سریال وابسته میشویم در واقع این الگو ux الگوی همدلی شخصیت های خیالی نامیده میشود.در واقع ما با شخصیت‌های داستان همدل می شویم و از آنجا که می خواهیم بدانیم چه اتفاقی برای افراد می افتد آن را دنبال می کنیم . netflix از این الگو ux با خبر است و در آن حداکثر استفاده را میکند.در واقع آنها اپیزودها و فصل ها و سریال های بیشمار به بینندگان و شنوندگان ارایه میدهد که برای هر فیلم یا سریال تعدادی کاور در نظر میگیرند و آن را طراحی میکند و بر اساس بیشترین ژانری که کاربر در سایت جستجو کرد و با توجه به شناخت کاربر بهترین کاور که مورد پسند باشد را به نمایش میگذارد. برای مثال اگر کاربر ژانر وحشت را بپسندد کاوری را متناسب با جستجو اخیر که مورد پسند کاربر واقع شده بود را به نمایش میگذارد.نتفلیکس با درک این موضوع که انسان ها موجودات بصری هستند، توانست بیشترین نفوذ بصری را از طریق کاور فیلم ها بر روی کاربران خود بگذارد.درک فرایند تصمیم گیریایجاد یک فرایند جالب :نشانه (Triggered cue) : یک نشانه میتواند داخلی باشد یا خارجی در نظر گرفته شود به عنوان مثال یک پیام متنی یک نشانه داخلی است وقتی ذهن به صورت خودکار به سمت عمل میرود نشانه ای درونی است برای نشانه خارجی بهترین کار این است : محصول را در محیط روزمره کاربر قرار دهید، هر بار نشانه ای جدید جهت نادیده گرفتن آن قرار دهید.واکنش شهودی (Intuitive reaction) :اگر از مردم بخواهید که کاری را انجام دهند ذهن به صورت خودکار به فکر کردن درباره آن می پردازد و به صورت میلی ثانیه می دانیم که میخواهیم آن کار را انجام دهیم یا خیر، در این مرحله لازم است که اعتبار و اعتماد لازم در مورد موضوع را در کاربران جلب کنیم.ارزیابی آگاهانه(Evaluation): بعد از اینکه توجه کاربر را جلب کردید و واکنش اولیه منفی نبود، کاربر اکنون هزینه ها و مزایا را ارزیابی می کند. آنچه شما می خواهید در این مرحله ارائه دهید استدلال های مختصر است، که به کاربر در مورد مزایای محصول آگاهی می دهد و هزینه های برداشت شده برای اقدام را کم اهمیت می کند. بهترین روش این است که مزایا را برجسته کنید، هزینه ها را به حداقل برسانید و گزینه ها را کم اهمیت جلوه دهید. این مثال کوتاه را در نظر بگیرید: "دوچرخه را به محل کار خود ببرید. این بدن شما را متناسب نگه می دارد، باعث لاغر شدن و طولانی شدن عمر شما می شود. چون مقید جاده نیستید، می توانید کوتاهترین مسیر بهینه را پیدا کنید و در وقت صرفه جویی کنید.در مقایسه با اتومبیل، از ترافیک طولانی و خرید زیاد، بیمه، تعمیر و نگهداری، سوخت و استهلاک هزینه جلوگیری خواهید کرد.بررسی توانایی(Ability Check ): کاربر باید به وضوح بداند که برای موفقیت در اجرای چه مراحلی لازم است. علاوه بر این ، آن کاربر باید منابع لازم برای اقدام را داشته باشد. همچنین کاربر باید مهارت های لازم را داشته باشد. نکته آخر اینکه، هیچ کاربری هرگز کاری را انجام نمی دهد که شکست بخورد. کاربر باید در موفقیت عمل متقاعد شودبررسی زمان(Time Pressure):در این مرحله ، کاربر از اقدام آگاه است و تصمیم به انجام آن گرفته است. اما آیا او واقعاً مجبور است اکنون این کار را انجام دهد؟ چرا آن را به طور نامحدود به تعویق نمی اندازید / به تعویق میاندازید..و در نهایت هیچ کاری انجام نمی دهید؟ شما باید فوریت ایجاد کنید فوریت میتواند داخلی یا خارجی باشد. فوریت خارجی به عنوان مثال وقتی می دانید، باید مالیات خود را بپردازید (در غیر این صورت، سازمان امور مالیاتی به شما مراجعه می کند). فوریت داخلی می تواند قوی تر باشد مانند مثال گرسنگی، تشنگی . همچنین کاربران می توانند بدون فوریت کاری را متقاعد کنند. گاهی اوقات ، یک کمک عالی این است که خاص باشید. این مثال را در نظر بگیرید: "شما باید به طور منظم ورزش کنید." در مقابل "فردا صبح ساعت 7 صبح ورزش کنید". آخرین مورد واقعی تر احساس می شود(اجرا)Execution: کاربر از تمام مراحل قیف CREATE عبور کرده و اقدام را انجام داده است. اما خیلی زود از خود راضی نشوید.کاربر فقط یک بار آن را اجرا کرد. جالب است، اگر کاربر مرتباً این کار را انجام دهد. و بهترین کار این است، اگر شما اصلاً نیازی به درخواست یا یادآوری کاربر ندارید، زیرا این یک عادت عمیق شده است. اگر می خواهید بفهمید، چگونه عادت های طولانی مدت ایجاد کنید، در بخش بعدی ادامه مطلب را بخوانید.نقشه تجربه مشتری(The Customer Experience Map):به نقشه‌ای گفته می‌شود که در آن، تجربه‌ی کاربر را در کل فرایند تعامل با محصول نشان می‌دهیم و در این نقشه تعامل کاربر با محصولات درون وب سایت را ارزیابی میکند.در این نقشه تمام احساسات، فعالیت ها و تجربه و همچنین افکار مثبت کاربران ثبت میشود با استفاده از این نقشه می توان نقاط ضعف و قوت را شناسایی کرد و ویژگی جدید را خلق کرد.بخش های زیر از بخش های ویژگی های یک نقشه تعامل کاربر است :مراحلی را که کاربر طی میکند.نمودار تجربه کاربر در هر مرحلهافکار و احساسات کاربر در هر مرحلهفعالیت کاربر در هر مرحلهنقاط تماس یا نقاط تعامل مشتری با محصول در هر مرحلهو در نهایت آن چیزی که بسیار با اهمیت است اینکه کاربر از لپتاپ یا موبایل استفاده میکند.نقشه تعامل کاربر به ما کمک میکند که ما راحت تر مشتری را بشناسیم و مشکلات را درک کنیم و بتوانیم خود را جای او بگذاریم.با استفاده از آن نقشه میتوان محصولات بهتری برای نیاز های واقعی مشتری طراحی کنیم و تجربه بهتری را به کاربر عرضه کنیم ومی توانیم متوجه شویم کاربر چگونه با محصولات تعامل می کند و نیازهای آن پاسخ داده میشود یا خیر.چگونه می‌توان سایتی مطابق با اصول UI و UX ایجاد کرد؟در یک کلام، به شما می‌گوییم کاربر باید بتواند خیلی راحت به انچه می‌خواهد برسد، چه از نظر محتوا و چه از نظر ظاهر و طراحی رابط کاربری، در طراحی UX یک اصل مهم وجود دارد و آن این است:کاربر اصلا نباید برای رسیدن به آن‌چه می‌خواهد فکر کند!چیدمان و نحوه‌ی قرارگیری المان‌های سایت باید به گونه‌ای باشد که کاربر بدون هیچ درنگی به نیاز خود برسد، از چیدمان منوی‌های سایت گرفته تا صفحات و محتوای داخلی، سرعت دسترسی، نمایش صحیح پیغام‌ها، خطاها و… همه‌و‌همه باید به بهترین شکل ممکن در اختیار او باشد..