در این مطلب قصد دارم دو مفهوم که به صورت وسیعی استفاده می‌شود را به سرعت توضیح دهم. طراحی رابط کاربری و طراحی تجربه کاربری. درک موضوعات مربوط به مقالات گذشته‌ای که در راکت منتشر شده، همراه با این مقاله به شما کمک می‌کند که طراح بهتری باشید.
شروع کنیم
اولین موردی که می‌خواهیم بحث کنیم این است که واقعا طراحی رابط‌کاری و طراحی تجربه‌کاربری چیستند و اینکه چه تفاوت‌هایی با همدیگر دارند؟
به صورت ساده اگر گفته شود، رابط‌کاربری بیانگر شیوه نمایش یک چیز است و تجربه‌کاربری بیانگر شیوه کار کردن آن. تجربه کاربری یک پروسه و رابط کاربری تحویل دادنی‌ست. با درک این موضوعات، بیاید عمیق‌تر به مسائل بنگریم.
طراحی رابط کاربری
طراحی رابط کاربری یا UI یکی از صنعت‌های بزرگ و عظیم به حساب می‌آید. در یک تئوری، طراحی رابط کاربری به ترکیب محتوا (متن، تصویر، ویدیو و...)، فرم‌ها (دکمه، ورودی متن، برچسب، چک‌باکس و...)و رفتارها (اتفاق‌هایی که بعد از کلیک/هاور/درگ‌درپ و… می‌افتند) گفته می‌شود.
برای چنین کاری نیاز دارید که تمرینات بسیاری کنید، با خطاها و مشکلات زیادی روبرو شوید، تا بتوانید در این زمینه حرفه‌ای باشید. به عنوان یک طراح رابط کاربری شما باید رابط کاربری طراحی کنید که زیبا و جذاب باشد و در نهایت مطمئن شوید که محصول‌تان واکنش خوبی از طرف کاربران دریافت می‌کند.
وقتی من یادگیری این موارد را شروع کردم، مربی به من می‌گفت که کل پروسه را مانند یک سفر در نظر بگیرم. وبسایت یا اپلیکیشن‌تان را مانند یک سفر در نظر بگیرید. هرکاربری که از هر طریقی اپلیکیشن یا وبسایت شما را پیدا می‌کند، وارد این مسافرت می‌شود. ویژگی اصلی یک مسافرت چیست؟ این است که لذت‌بخش باشد.
در این مسافرت شما نقش یک تورلیدر را دارید که مسافرت را طراحی کرده است. بنابراین شما نباید هر اطلاعاتی که دارید را بدون هیچ سامان‌دهی روی صفحه مشتری قرار دهید تنها به این امید که شاید وی آن‌ها را دریافت کند. این شیوه، مخالف یک رابط کاربری خوب است.
بجای آن شما یک تورلیدر خوب هستید که مسافرت بسیار شگفت‌انگیزی را از طریق اپلیکیشن‌تان برای مشتری فراهم می‌کنید. برای این کار شما نیاز دارید که توجه کاربران را در بین قسمت‌های متفاوت اپلیکیشن، جلب کنید.
طراحی فقط به این موضوع برنمی‌گردد که شما بتوانید از یک نرم افزار طراحی استفاده کنید -البته این موضوع قسمت مهمی نیز به حساب می‌آید. نرم‌افزار برای یک طراح شبیه به شمشیر وی است. شما از شمشیر برای مبارزه نیاز دارید اما این تمام چیزی نیست که شما نیاز به یاد گرفتن آن داشته باشید. برای برنده شدن جدای از یک شمشیر شما به استراتژی، عملیات‌های مختلف، نکات و تکنیک‌های متفاوتی نیاز دارید. در طراحی رابط کاربری شما نیاز دارید که کاربران‌تان را درک کرده و آن‌ها را در میان استفاده از اپلیکیشن‌تان آزمایش کنید.
فایده داشتن یک محصول خوب طراحی شده این است که می‌تواند نرخ بیشتری از توجه‌هات کاربری را داشته باشید.
چیزهایی که برای ساخت یک رابط‌کاربری خوب باید به خاطر بسپارید
۱. روی یک صفحه، مردم همیشه بزرگ‌ترین و برجسته‌ترین کلمات را اول از همه می‌خوانند و بعد از آن شاید وارد سطوح دیگری شوند.
این طبیعت انسان است. توجه ما اینگونه پایه‌ریزی شده که ابتدا بزرگ‌ترین و برجسته‌ترین موارد را مشاهده می‌کنیم. بعد از آن نیز به سراغ متون کوچک‌تر با میزان برجستگی کمتر می‌رویم.
به عنوان یک طراح می‌توانید از این اطلاعات برای مرتب کردن تجربیات کاربران استفاده کنید.
۲. اهمیت ترازبندی
ترازبندی یکی از جنبه‌های مهم و پایه‌ای در طراحی رابط‌کاربری است. مهمترین موضوع در این رابطه این است که تعداد خطوط هم تراز را کمتر کنید. این کار باعث می‌شود که خوانایی صفحه شما بیشتر شود و کاربر بهتر بتواند ارتباط چشمی با آن برقرار کند.
در تصویر بالا، قسمت چپ همانطور که مشاهده می‌کنید تنها یک خط ترازبندی شده وجود دارد در حالیکه سمت راست شامل ۴ خط ترازبندی شده است.
یک مثال دیگر از اینکه خطوط ترازبندی اگر کمتر باشند برای خوانایی بهتر است را می‌توانید در تصویر زیر مشاهده کنید:
دو نوع پایه‌ای از ترازبندی در دنیای طراحی وجود دارد، ترازبندی گوشه‌ای و مرکزی.
- ترازبندی گوشه‌ای برای زمانی‌ست که همه چیز در گوشه‌ای از صفحه یا از طرف مشخصی از صفحه (راست یا چپ) قرار گرفته.
- ترازبندی مرکزی نیز منظور جهت‌گیری المانی در نقطه مرکزی قسمتی که قرار گرفته است.
براساس نیازتان شما باید یکی از این موارد را انتخاب کنید. معمولا ترازبندی گوشه‌ای نتیجه بهتر و خوانایی بیشتری را تحویل می‌دهد. ترازبندی المان‌ها در نرم‌افزارهای گرافیکی مانند فوتوشاپ نیز بسیار ساده است. بیشتر نرم‌افزارهای گرافیکی از یک خط‌کش یا راهنما برای استفاده بهتر از حالت ترازبندی نیز ارائه می‌دهند.
۳. به یک معمار مراقب تبدیل شوید
برای درک این مسئله دو موضوع ارائه می‌شود. ۱) شما باید کاری کنید که توجه کاربران‌تان را با طراحی‌تان جلب کنید، ۲) شما باید به تمام مسائل موجود در طراحی‌تان توجه کامل کنید. برای اینکه تبدیل به یک طراح عالی شوید باید هر دو مورد را رعایت کنید. دومین مورد این قسمت باعث می‌شود که شما تبدیل به یک تشکیل‌دهنده یا قالب‌گیر شوید.
طراحی رابط کاربری مانند این است که برای فردی لباسی بدوزید، شما با توجه به مواردی که آن‌ها بیان می‌کنند، مواردی را رعایت کنید.
راه‌هایی برای جلب توجه کاربران از طریق متن:
- اندازه آن را بزرگ‌تر یا کوچک‌تر کنید.
- رنگ‌های آن را برجسته‌تر و روشن‌تر کنید -می‌توانید آن را خاموش نیز بکنید-.
- از یک تایپ‌فیس با برجستگی نسبتا بالا در مقابل قلم‌های نازک استفاده کنید.
- کلمات را کج کنید، برای بعضی دیگر آن‌ها را با حروف بزرگ و کوچک نشان دهید.
- فاصله میان حروف یک کلمه را بیشتر کنید تا فضای بیشتری از صفحه را به خود اختصاص دهید، این کار باعث جلب توجه بیشتر از سوی کاربر می‌شود.
یکی دیگر از موارد بسیار مهم در هنگام طراحی، تست کردن است. مطمئن شوید که در این پروسه همه چیز را تست کرده‌اید -رنگ‌ها، فونت‌ها، وزن‌ها، زوایا، ترازبندی‌ها، لایه‌بندی و…-. با طراحی‌های مختلف کار کنید، اینگونه پی می‌برید به اینکه می‌توانید از طرق مختلف جلب توجه کنید.
برای خواندن بیشتر در رابطه با رابط کاربری می‌توانید به صفحه ویکی‌پدیا مراجعه کنید. همچنین ما در راکت دوره آموزشی طراحی رابط‌کاربری و تجربه‌کاربری را نیز ارائه کرده‌ایم که می‌توانید از آن نیز بهره ببرید. وبسایت‌های Behance وdribbble، مناسب‌ترین مکان‌ها برای پیدا کردن طراحی‌های رابط کاربری خوبی هستند.
طراحی تجربه کاربری
هدف طراحی تجربه کاربری این است که تجربه‌ای لذت بخش و عاری از مشکل را به کاربر تحویل دهد. در اینجا می‌توانید ۷ سوال را مشاهده کنید که با استفاده از آن‌ها می توانید مطمئن شوید که آیا تجربه‌کاربری محصول شما مناسب است یا خیر.
۱. استفاده‌پذیری : کاربری برای چه چیزی از اپلیکیشن من استفاده می‌کند؟ کارکرد اصلی اپلیکیشن من در چیست؟ چه چیزی باعث می‌شود که استفاده درستی از اپلیکیشن من شود؟
حال، من چگونه می‌توانم کاری کنم که تعداد قدم‌هایی که کاربر برای رسیدن به یک هدف برمی‌دارد را کمتر کنم؟ اصلی‌ترین چیزی که کاربران می‌خواهند در اپلیکیشن من به آن برسند چیست؟ چگونه می‌توانم تجربه رسیدن به هدف را برای کاربران تا جایی که می‌توانم نرم‌تر، سریع‌تر و لذت‌بخش‌تر کنم؟
۲. نمایه‌سازی کاربری : شما نیاز دارید که کاربران‌تان و نیازهایی که می‌خواهند به آن برسند را بدانید. بهترین راه برای این کار نمایه‌سازی کاربران‌تان است -منظور از نمایه‌سازی پیدا کردن و بسته‌بندی اطلاعات مربوط به کاربران و آنالیز آن‌هاست-.
برای اینکه از بازارتان بهتر متوجه شوید و درک خود را برای آن بالا ببرید، نیاز است که چند تمرین ساده را انجام دهید. اصلی‌ترین سوالی که همواره باید از خودتان بپرسید این است که کاربرد و کارکرد اصلی اپلیکیشن من چیست؟ پروفایل کاربران‌تان باید مدام این سوال را ارزیابی کند.
۳. درخواست مجوز : اگر اپلیکیشنی که ساخته‌اید نیاز دارد تا با سرویس موقعیت یاب موبایل، قسمت رویدادها، ادغام با شبکه‌های اجتماعی و… ارتباط برقرار کند و داده‌های آن را دریافت کند پس باید این اجازه را از کاربران دریافت کنید، سعی کنید در قسمت‌های مهم اپلیکیشن از کاربر چنین درخواستی را کنید تا بهتر بتواند آن را مشاهده کند. بجای اینکه تمام موارد را در یک زمان از کاربر بپرسید، از رویکرد بنجامین فرانکلین استفاده کنید، «قبل از اینکه از افراد علاقه‌مندی‌های بزرگ‌شان را درخواست کنید، علاقه‌مندی‌های کوچک‌شان را درخواست کنید». بهتر است که کاربران را با سرعت کم، به مسیر هدایت کنید.
مطمئن شوید که درخواست مجوز تنها زمانی ارسال می‌شود که کاربر سعی داشته باشد از ویژگی آن استفاده کند، نه هر زمانی که اپلیکیشن را اجرا می‌کند.
۴. فرم در مقابل کارکرد : طراحی همواره فقط در رابطه با فرم نیست، طرح رنگی زیبا، فونت‌ها، لایه‌بندی و موارد دیگری نیز با آن ارتباط دارند. در کنار این موارد کارکرد و شیوه کارکرد اپلیکیشن نیز اهمیت دارد، همواره این موضوع را باید نسبت به دیگر موارد در ارجعیت قرار دهید.
۵. همخوان : آیا من در قسمت‌های مختلف اپلیکیشن‌م همخوانی را رعایت کرده‌ام؟ آیا اپلیکیشن من با برندی که دارم در تناقض نیست؟ ناهخوان بودن در طراحی باعث می‌شود که سردرگمی در طراحی بوجود بیاید. یک کاربر سردرگم، همواره ناراضی است.
به موضوع همخوان بودن فکر کنید، البته نه فقط در ظاهر بلکه در کارایی نیز به آن توجه کنید.
۶. ساده‌سازی : آیا می‌توانم اپلیکیشن را ساده‌تر کنم؟
مطمئن شوید که اپلیکیشن را بسیار ساده کنید، تا جایی که افراد سالخورده نیز بتوانند آن را درک و استفاده کنند. یک اپلیکیشن نامناسب و سردرگم کننده اپلیکیشنی است که در آن ردیف‌ها ردیف از دکمه‌ها، رنگ‌های متفاوت و رابط کاربری ناهمخوان استفاده می‌کند.
۷. مرا وادار به فکر کردن نکن!
آیا درک چیزهای مختلف را برای کاربران‌م پیچیده می‌کنم؟ انسان‌ها دوست ندارند که سردرگم شوند. وقتی ما مشغول برنامه‌نویسی هستیم، تا جایی که می‌توانیم، سعی می‌کنیم که کدهای‌مان را سبک و کارآمد نگه‌داریم.
اما وقتی رابط کاربری را طراحی می‌کنیم هدف اصلی‌مان این خواهد بود که رابط کاربری واضح و بدون وجود پیچیدگی را ایجاد کنیم. و البته زیبا!
تا جایی که می‌توانید، سعی کنید که پیام‌تان را به صورت واضح برسانید.
نکاتی برای به‌خاطر سپردن در مورد تجربه‌کاربری :
۱. هیچوقت آموزشی طولانی برای استفاده از اپلیکیشن‌تان را تهیه نکنید. بجای آن سعی کنید در زمان درست و مورد نیاز اطلاعات مفید را به کاربران بدهید. نکات را به آن‌ها بگویید. سعی کنید طراحی و لایه‌بندی را به شکلی درست کنید که کاربر بتواند در کمترین زمان ممکن و بدون نیاز داشتن به آموزش استفاده از آن را یاد بگیرد. اینجا جائیست که طراحی بصری و درک‌پذیر وارد عرصه می‌شود.
۲. وقتی مواردی در ذهن کاربر و به صورت عادی در اپلیکیشن‌های مختلف وجود دارد از آن‌ها نیز استفاده کنید -برای مثال امکان pull to refresh یا زوم کردن تصویر با دو انگشت و...-. نکته دیگر این است که هیچوقت از این امکانات برای اهداف دیگری استفاده نکنید. برای مثال از pull to refresh برای اضافه کردن داده استفاده نکنید، این کار بسیار طرف مقابل را سردرگم می‌کند.
۳. هیچوقت با کاربران‌تان تعامل‌های پیش پا افتاده را تجربه نکنید. برای مثال هیچوقت برای تایید یک عملی که چندین بار اتفاق می‌افتد، از وی تاییدیه و… نگیرید. از آن‌ها تنها در مواقع اضطراری و عملیات‌هایی که ممکن است موجب به وجود آمدن آسیب شود استفاده کنید. هیچوقت کاری نکنید که کاربر فکر کند شما وی را یک ساده‌لوح فرض کرده‌اید.
برای خواندن بیشتر در رابطه با تجربه کاربری می‌توانید به صفحه ویکی‌پدیا مراجعه کنید. همچنین ما در راکت دوره آموزشی طراحی رابط‌کاربری و تجربه‌کاربری را نیز ارائه کرده‌ایم که می‌توانید از آن نیز بهره ببرید.
کلام آخر
امیدوارم که این مقاله به شما این کمک را کرده باشد که دانش پایه‌ای از طراحی رابط کاربری و تجربه کاربری را بدست بیاورید. اگر نقطه نظر یا ایده‌ای دیگر در رابطه با این موضوع دارید می‌توانید در قسمت نظرات با ما به اشتراک بگذارید.
طراحی فقط مربوط به ظاهر و نمایش نمی‌شود، طراحی شیوه کارکرد را نیز تعیین می‌کند. -استیو جابز
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید