هر طراح در صنعت طراحی تجربه کاربری این مراحل را اجرا می کند. اما آیا آن را با شیوه ای متفاوت از هم انجام می دهند؟ احتمالاً جواب درست را در مراحل طراحی پیدا می کنید. در این مقاله من شما را با اصول طراحی تجربه کاربری آشنا می کنم. پیشنهاد میشود ابتدا تعاریف UI و UX را مطالعه کنید.

۱- شروع پروژه – پیدا کردن بنیان و شالوده طرح

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

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

جلسه شروع کار
این جلسه حدوداً چهار ساعت طول می کشد و ما از مشتری ها در مورد سایر الزامات طرح، پرسشهایی به عمل می آوریم سپس طرح اولیه را می زنیم با توجه به این نکته که کاربران چه کسانی هستند و چه چیزهای نیاز دارند و این که اگر برند یا محصول مورد نظر مشتری درقالب یک انسان بود آنها تمایل داشتند که چه شکلی باشد؟

۲- تحقیقات مقدماتی – آلفا، امگا و ویژگیهای تجربه کاربری

پس از جمع آوری و دسته بندی اطلاعات به دست آمده، معمولاً یکسری تحقیقات مقدماتی هفت روزه یعنی مرحله دوم طراحی تجربه کاربری برای کسب اطلاعات بیشتر انجام می دهیم.

انجام گفتگو و مصاحبه با کاربران گروه هدف برای تأیید ویژگی ها و تکمیل مراحل بازدید مشتری و کاربر از سایت.
تحقیق در مورد رقیبان، کسب اطلاعات در مورد ویژگی‎ها، مزایا و معایب.
طراحی صفحه برای نمایش محصولات.
زمانبندی تکمیل پروژه، برنامه هفتگی برای حداقل دو ماه و برنامه دراز مدت برای ادامه پروژه.

۳- تست طرح اولیه و قابلیت کاربری آن

همیشه وقتی که طرح آماده میشود، آن را به مشتری نشان میدهیم. این مهمترین فاکتوری است که آنها در مورد مراحل طراحی طرح و اصول تجربه کاربری میدانند.

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

نمونه اولیه
وقتی که چند ایده خوب در ذهن داشته باشیم و بدانیم که ساختار اصلی اپلیکیشن مورد نظر چگونه باید باشد، شروع به ساختن چهارچوب اولیه طرح میکنیم. گاهی اوقات اگر فرصت اندک و محصول مورد نظر ساده باشد، یک وایرفریم میکشیم یا فقط از یک طرح استفاده میکنیم، از آنها عکس میگیریم و از یکی از برنامه ها مثل Marvel یا pop استفاده میکنیم. در غیر اینصورت بیشتر از برنامه های Axure یا Invision استفاده میکنیم تا وایرفریم‎ها و نمونه های اولیه را با حداکثر سرعت و به صورت کارآمد درست کنیم.

تست کاربر
ما در استودیو طراحی به مدت یک هفته با حداکثر سرعت کار میکنیم و طرح را چندین بار بازبینی و بررسی میکنیم و همیشه ایده هایمان را با آزمایش روی کاربران واقعی مورد تأیید قرار میدهیم. در طول فرآیند طراحی، درک این مسأله بسیار مهم است که محصول برای کاربران است و نه بالعکس.

ساخت فلوچارت
در صورتی که یکی از سهامداران (مشتری،سازندگان و غیره) نیاز فلوچارت داشته باشند ما یک فلوچارت را جهت نمایش ارتباط بین صفحات تهیه میکنیم.

۴- طراحی دقیق و تست A/B – قرار گرفتن در مسیردرست

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

جمع آوری بهترین شیوه ها
ما معمولاً به دنبال بهترین نمونه طرح های موجود هستیم (که میتواند یک اپلیکیشن یا برنامه در یک فروشگاه یا یک پروژه در حال اجرا باشد). ما بهترین روش ها را جمع آوری میکنیم.

معمولا” از برنامه pinterest dashboards استفاده میکنیم.

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

طراحی دقیق تر
مرحله بعدی از پروسه طراحی تجربه کاربر، طراحی کامل با برنامه Photoshop یا Sketch است.

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

تست A/B
ما معمولاً برای انتخاب بهترین نسخه اپلیکیشن و برای دستیابی به بازده بیشتر از تست A/B استفاده میکنیم.

۵- پیگیری کردن

وقتی که محصولی در مسیر درستش قرار میگیرد بسیار خرسند میشویم. چرا که میخواهیم مطمئن شویم اپلیکیشن مورد نظر به همان صورتی عمل میکند که ما آن را طراحی کرده ایم. دو احتمال وجود دارد:

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

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

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

ما میدانیم که از همه چیز آگاه نیستیم ولی دائماً سعی در بهبود پروسه طراحی داریم بنابراین اگر شما دوست دارید متدهای خود را به اشتراک بگذارید، یا ایده و نظری در این مورد دارید لطفاً در بخش کامنت ها نظر خود را اعلام کنید.

تفاوت های رابط کاربری و تجربه کاربری

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

مثال رابط کاربری و تجربه کاربری – پختن کیک شکلاتی!

برای پختن بهترین کیک شکلاتی هر دو طراحی رابط کاربری و تجربه کاربری لازم است. نه اصلاً شوخی نمیکنم. برای شروع شما نیاز به دستور پخت، مواد اولیه، لوازم آشپزخانه و یک فر دارید. سپس باید مواد را با هم مخلوط کنید، بپزید، برش دهید، در بشقاب سرو و میل کنید.

اما کدام بخش از این فرآیند رابط کاربری وکدام بخش تجربه کاربری است؟  فرآیند پختن کیک شکلاتی  تجربه کاربری میباشد و فرآیند سرو کردن آن در بشقاب همان رابط کاربری است.

اما در مورد خوردن کیک چطور؟ این مرحله همان تجرب کاربری است و تنها در مواردی استثنا بوجود می‎آید. ممکن است کسی که کیک را میخورد تجربه متفاوتی از کیک شکلاتی داشته باشد، بسته به اینکه کیک را داخل ماهیتابه سرو کنید یا در یک بشقاب شیک و زیبا. من با قاطعیت می گویم که بله، گزینه دوم مقبول‎تر است.

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

با توجه به پیش زمینه ی ذکر شده ، بیایید نگاهی اجمالی به تفاوتهای بین این دو طرح بیاندازیم .

طراحی تجربه کاربری فرآیندی است که به وسیله آن یک نیاز یا ضرورت شناسایی میشود. سپس طرح فرضی اولیه زده میشود ،که بعداً از طریق بررسی و آزمایش مورد تأیید یا عدم تأیید قرار میگیرد. وقتی که هر دو مدل تجاری و گزارش ارزیابی مورد تأیید قرار گرفت، محصول تولید میشود.

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

طراحی رابط کاربری = طرح بصری + طرح تعاملاتی

طرح بصری شامل شکل ظاهری و حس حال موجود در سایت، خصوصیات و برند میباشد. طرح تعاملاتی، روش برقراری ارتباط مردم با سایت شما است. وقتی شخصی یک دکمه را روی سایت شما کلیک میکند، اینکه دکمه به طور قابل توجهی تغییر کند باعث می‎شود که آنها متوجه موفق بودن یا نبودن آن شوند.

اگر چه هر دو طرح به صورت تعاملاتی طراحی شده اند، اما شما می توانید تجربه کاربری را به عنوان طرح تعاملات ماکرو و رتابط کاربری را به عنوان طرح تعاملات میکرو در نظر بگیرید.

 نظر طراح نیک بابیچ: رابط کاربری و تجربه کاربری

» بهترین طرح دو فاکتور را با هم دارد: ویژگی‎ها و جزئیات. ویژگی‎ها شامل مواردی است که بازدید کننده‎ها را به سمت طرح شما می کشاند. و جزئیات آن مواردی است که آنها را در سایت شما نگه می دارد. »

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

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

محصول : یک محصول که برای مشتری های مورد نظر شما با ارزش خواهد بود، با بررسی مدت ماندگاری محصول مورد تأیید قرار میگیرد.

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

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

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

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

اکنون طراح تجربه کاربری افراد دوست‎دار سگ را مورد بررسی قرار میدهد و سعی بر تشخیص اولویت‌های آنها دارد. وقتی که برای انتخاب دوست پشمالوی خود به کمک نیاز دارند چه چیزی برای آنها با ارزش یا مورد نیاز است؟ بنابراین آنها برای درک این مطلب شروع به کار میکنند، سؤالاتی را طرح میکنند، دیدگاه مردم را بررسی میکنند، با مردم مصاحبه میکنند. سپس طرح اولیه را می زنند و آن را مورد ارزیابی قرار میدهند.

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

چگونه طراحان رابط کاربری و تجربه کاربری در پروسه طراحی با هم کار میکنند؟

معمولاً طراحی تجربه کاربری همان تحقیق اولین قدم برای ساخت یک محصول یا اپلیکیشن است. طراحان تجربه کاربری تحقیقات زیادی برای تأیید یا عدم تأیید ایده اولیه محصول و همچنین راهنمایی در مورد تکمیل محصول اولیه انجام می دهند. وقتی که بعد از چندین بار بازبینی طرح اولیه زده و بخش زیادی از کار انجام شد ، طراح رابط کاربری وارد عمل میشود و بعد از نگاهی اجمالی به طرح شروع به کار روی جلوه‎های بصری و تعاملات میکرو میکند.

به هر حال ، این فرآیند همیشه به صورت خطی انجام نمی شود و به فاکتورهای زیادی بستگی دارد .مثلاً:

• چه کسی طراحی رابط کاربری و تجربه کاربری را به عهده می گیرد؟
• آیا فقط یک نفر آن طراحی را انجام میدهد یا شخص و گروه دیگری؟

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

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

جدا سازی رابط کاربری و تجربه کاربری

تقریباً غیر ممکن است  که رابط کاربری را از تجربه کاربری جدا کنیم و بالعکس.

به هر حال اگر ما سعی بر این کار داشته باشیم، به این نتیجه می رسیم که:

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

حالا شما کمی از تفاوت های بین زباط کلربری و تجربه کاربری را می‎دانید.

و اما در مورد آن کیک شکلاتی…

شما تمایل دارید که چگونه پخته و سرو شود؟

من دوست دارم کیک من کاملاً پخته شود. روی کیک ترد و داخلش شکلاتی و چسبناک باشد. و در یک بشقاب شیک با کمی پودر شکر، یک برگ نعنای سبز خوشرنگ و یک تمشک سرو شود.

چرا که یکی بدون دیگری اصلاً خوب نیست .

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