حرفه‌ای‌ها چگونه‌اند؟
8 آبان 1402
روانشناسی تست نرم‌افزار: چرا فرآیند تست در سازمان‌ها به درستی پیش نمی‌رود؟
9 آبان 1402
تقریبا نزدیک به یک‌سال و هشت ماه ( بهمن ۱۴۰۰ ریبرند) میشه که از ریبرند باسلام می‌گذره و حالا بعد از این مدت از گوشه وکنار باسلام زمزه‌هایی می‌شنویم که فونت باسلام خوب نیست. این موضوع تقریبا چندبار به چپتر طراحی محصول رسید اما هیچ موقع برای ما شفاف نشد که چرا خوب نیست یا اصلا خوب نیست یعنی چی؟ یعنی خوانا نیست؟ یعنی کاربر در هنگام مشاهده فونت نمی‌تونه فونت رو اسکن کنه؟ یا یعنی زیبا نیست؟
در جهت حل این مساله با توجه به اینکه فونت یه عنصر بین چپتری بین برند و طراحی محصول هست یه جلسه با همه ذینفعان طراحی محصول و برند تشکیل دادیم و تصمیم به باز کردن این مساله و حل اون گرفتیم.
اگر بخوام از تاریخچه فونت باسلام بگم درزمان ریبرند به پیشنهاد تیم برند فونت رو از راوی و ایران‌سنس به فونت انجمن تغییر دادیم و حالا قصد داریم خوب و بد بودن فونت انجمن رو بررسی کنیم.
کشف(discovery)مسئله خوب نبودن فونت انجمن
در قدم اول جلسات کوتاه با کسانی که می‌گفتند فونت خوب نیست گذاشتیم که ببینینم در پس ذهن اونها چی می‌گذره و منظورشون از خوب نبودن چیه؟
از نتیجه این گفت و شنودها به دو علتی که به خاطرش فونت انجمن را بد می‌ونستن رسیدیم
- فونت باسلام در مقایسه با فونت نمونه‌های مشابه باسلام(دیجی‌کالا) به اندازه کافی زیبا نیست
- فونت باسلام فونت سنگین و شلوغیه که طراحی رابط کاربری رو آشفته نشون می‌ده
خوانایی فونت انجمن
فیدبک‌های منفی معمولا درباره نازیبایی و شلوغی و…(مسايل زیبایی و سلیقه‌ای) بود، ولی ما در تیم طراحی محصول و UX دغدغه خوانایی فونت رو هم داشتیم. از نظر ما زیبایی، خوشگلی یا زشتی خیلی سلیقه‌ای و شخصیه و به تعداد نفرات می‌تونه متغیر و متفاوت باشه. حالا که مساله فونت باز شده این موقعیت رو فرصت شمردیم و تصمیم گرفتیم خوانایی رو هم در کنار زیبایی و نظراتی که سلیقه‌ای هست بررسی کنیم.
تصورمون اینه که فونت انجمن از نظر وزن بصری، فونت سنگینیه و در دیزاین حجم زیادی از وزن بصری رو به خودش می‌گیره که باعث شلوغی و آشفتگی در طراحی رابط کاربری می شه و به همین علت در جاهایی که از متن‌های پاراگراف یا تایتل‌های زیاد استفاده میشه خوانایی رو تحت تاثیر قرار می‌ده
فونت انجمن فونت serif است و جزئیات تزئینی زیادی داره که باعث شلوغی و عدم خوانایی میشه.
چطور بفهمیم فونت دیگری بهتر از فونت انجمن هست یا تأثیر مثبتی در تجربه کاربری باسلام دارد؟
حالا که دید بهتری نسبت به مساله داریم می‌تونیم تعریف مساله کنیم و بعد از اون به دنبال تست فرضیه‌هایی که برای مساله تعریف شده بریم.
تعریف مساله (فرضیه)
آیا فونت دیگری که serif نباشه در خوانایی و دیزاین رابط کاربر باسلام تاثیری داره؟
تست اول
فونت انجمن رو با یک فونت هندسی و ساده عوض کنیم
مسیر تست
فونت انجمن که فونتی هندسی نیست و جزییات زیادی داره رو در مقابل فونت ایران‌یکان قرار دادیم و با افزونه فونت آرا فونت باسلام رو با فونت ایران یکان جایگزین کردیم. و همین‌طور نمونه‌های مشابهی که از فونت ایران یکان استفاده می‌کردن، فونتشون رو به انجمن تغییر دادیم. نتیجه تغییر فونت در پروداکت‌های مختلف رو به مقایسه گذاشتیم.
نتیجه تست
براساس مشاهده از نظر بصری و در نگاه اول فونت ایران یکان هم در باسلام و هم در بقیه موارد خیلی بهتره، اما ترکیب‌بندی، تنالیته رنگ و فضا‌های سفید در دیزاین هم تاثیر زیادی داره که نمی‌شه ازش چشم پوشی کرد به اضافه اینکه برای جلوگیری از خطاهایی که یه افزونه در تغییر فونت می‌تونه داشته باشه و بعضی از قسمت‌ها وزن فونت رو اشتباه جایگزین کنه تست دوم رو شروع کردیم.
خلاصه نتیجه: فونت ایران یکان از نظر بصری در نگاه اول بهتره اما نمی‌تونیم از بقیه پارامتر‌هایی که در دیزاین تاثیر دارند چشم‌پوشی کنیم.
تست دوم
در این تست در کنار فونت (رنگ، فضای سفید، محتوا، ترکیب‌بندی و چیدمان) رو هم به متغییر های تست اضافه کردیم
اینجا یک دیزان رو مبنا و ثابت قرار دادیم و بقیه موارد رو در چند اتود مختلف تغییر دادیم.
در ادامه و بعد از دیزاین، روی هر کدام Preference tests رو با متد گوریلا انجام دادیم به این صورت که دیزاین‌ها رو به کاربرانی که می‌توانستند کاربر باسلام باشند نمایش دادیم و در نهایت ۳ تا سوال پرسیدیم:
صفحه‌ای که دیدی چقدر دوستانه و صمیمی بود؟
صفحه‌ای که دیدی چقدر مرتب بود؟
صفحه‌ای که دیدی چقدر خوانا بود؟
نتیجه تست
در هر سه تا دیزاین (دیزاین A: فونت انجمن و رنگ باسلام- دیزاین B: با فونت ایران یکان و رنگ باسلام و دیزاین C: فونت ایران یکان و رنگ باسلام) نتیجه شبیه هم بود و با آماری شبیه هم که در زیر گذاشتم روبرو شدیم:
- صفحه‌ای که دیدی چقدر دوستانه و صمیمی بود؟ افراد نمره ۴ از ۵ نمره دادند.
- صفحه‌ای که دیدی چقدر مرتب بود؟ افراد نمره ۳ از ۵ دادند
- صفحه‌ای که دیدی چقدر خوانا بود؟ افراد نمره ۴ از ۵ دادند
نتیجه این تست ثابت کرد که تغییر فونت با تغییر دیگر پارامتر‌های از نظر کابر خیلی تاثیر گذار نیست و تاثیری روی تجربه کاربر نداشت باز هم به این دوتا تست اکتفا نکردیم و برای اینکه بیشتر از فونت مطمئن بشیم تست سومی طراحی کردیم.
تست سوم
تست ۵ ثانیه با دو فونت ایران یکان و انجمن روی دیزاین یک لندینگ جدید
برای این تست فقط تمرکز رو روی خود فونت گذاشتیم و از چیدمان و رنگ باسلام کمی فاصله گرفتیم
دیزاین لندینگ یک بوت کمپ برنامه‌نویسی رو به مدت ۵ ثانیه به کاربر نمایش دادیم در نهایت چندتا سوال درمورد محتواهای متنی لندینگ ازش پرسیدیم.
سوالات
- در این دوره چه چیزی یاد می‌گیرید؟
- اسم این دوره چیه؟
- دوره چقدر طول می‌کشه؟
- نیازه که برای این دوره پول پرداخت کنید؟
نتیجه تست
در این تست تنها یک تفاوت بین فونت ایران یکان و انجمن بود. در جواب دادن به سوال شماره ۳ ( دوره چقدر طول می‌کشه؟) کاربری که طراحی با فونت انجمن رو دیده بود فقط یک عدد ۶ یادش بود اما کاربری که طرح با فونت ایران یکان دیده بود طول دوره که ۶ هفته بود رو کامل یادش بود . این نشانه‌ای از خوانا بودن ایران یکان نسبت به فونت انجمن بود.
بطور خلاصه: فونت ایران یکان خواناتر از فونت انجمن هست اما این تفاوت به اندازه‌ي چشمگیری نیست و در تجربه‌کاربری باسلام تاثیر زیادی نمی‌تونه داشته باشه
حالا فونت انجمن خوبه یا باید تغییرش بدیم؟
می‌تونیم بگیم که فونت ایران یکان خواناتر از فونت انجمن هست یا شاید از نظر بصری و تجربه‌کاربری فونت انجمن بهترین فونت نباشه اما فونت بدی هم نیست و از طرف دیگه تغییر فونت تأثیر چشمگیری روی تجربه کاربری و حس کاربر در هنگام کار با محصول نداره همچنین نسبت به بهینگی‌ای که ایجاد می‌کنه و هزینه‌ای که خلق می‌کنه ارزش ایجاد نمی‌شه . به اضافه اینکه فونت انجمن از نظر هویتی و شخصیتی با برندینگ باسلام سازگاره و می‌تونه در برندینگ و ایجاد هویت باسلام نقش زیادی داشته باشه.
و اما با سنگینی بصری دیزاین باسلام چه کردیم؟
یکی از مساله‌ها در مرحله کشف مساله سنگینی دیزاین باسلام بود که برای اون هم یک راه حل پیدا کردیم
در تست شماره دو که دیزاین باسلام با رنگ‌های جدید رو تست می‌کردیم، رنگ مشکی در تست پالت رنگی متفاوت رنگ مشکی خالص نبود و همین از وزن بصری فونت کم می‌کرد. چند نمونه محصول دیگه که در پالت رنگی‌شان از دو رنگ مشکی و یک رنگ اصلی استفاده می‌کنن هم بنچمارک گرفتیم (airbnb, dribble, fancy) و هیچ‌کدوم از مشکی خالص استفاده نمی‌کردن.
در این مسیر با تیم برند هم مساله رو درمیون گذاشتیم و پیشنهاد رنگ مشکی ناخالص (کد رنگی #0D0C22)رو به‌جای مشکی (#۰۰۰۰۰۰) دادیم. رنگ مشکی پیشنهادی ته مایه آبی سورمه‌ای داره که همزمان مکمل رنگ اصلی هم هست.
در ادامه مسیر تیم برند هم با تغییر رنگ همراه بودن و در نهایت رنگ مشکی رو در جهت کمتر شدن وزن بصری فونت به مشکی ناخالص که ته مایه سورمه‌ای داره تغییر دادیم که همزمان مکمل رنگ نارنجی (که رنگ اصلی هست) هم باشه، تغییر دادیم.
نتیجه گیری
براساس تست‌هایی که گرفتیم، میشه گفت فونت یکی از عناصر تاثیر گذار غیر مستقیم در محتوای بصری‌ه و بهتره که اگر محصول جدید طراحی می‌کنید از فونت‌های ساده و بدون جزییات در طراحیتون استفاده کنید.
البته اگر در حال حاضر محصولی دارید و فونت اون ساده نیست و جزییات داره اول هدفتون از تغییر فونت رو مشخص کنید و با تست مطمئن بشید که حتما به هدفتون می‌رسید. همونجور که گفتم براساس مشاهدات تست شماره دو فونت برخلاف رنگ یه عنصر تاثیر گذار غیر مستقیمه یعنی کاربر هویت محصول شما رو با فونت تشخیص می‌ده اما زمانی که تغییر می‌کنه متوجه تغییرش نمی‌شه و فقط محصول براش نا آشنا میشه در مقابل اگر رنگ رو تغییر بدیم، کاربر خیلی زود متوجه میشه و دنبال محصولی با رنگی که قبلا در ذهنش ثبتش کرده می‌گرده.
و در نهایت باید بگم همون‌قدر که در انتخاب رنگ حساسیت به‌خرج می‌دید در انتخاب فونت هم حساسیت داشته باشید و مطمئن بشید فونتی که انتخاب می‌کنید هم خوانایی خوبی داره و هم هویت و شخصیت فونت با هویت و شخصیت محصولتون یکی است.
