Material 3 Expressive: داستان طراحی انقلابی گوگل برای ارتباط عمیق‌تر با کاربران

به گزارش مدیاتی:گوگل در سکوت مشغول بازتعریف رابطه کاربران با دیجیتال بود. Material 3 Expressive تنها یک آپدیت بصری نیست، بلکه تلاشی جسورانه برای تزریق «احساس» به رابط‌های خشک دیجیتال است. اما چه انگیزه‌ای پشت این تحول عظیم طراحی نهفته است؟ اسناد داخلی و مصاحبه‌های انحصاری به دست آمده نشان می‌دهد چگونه تیم طراحی گوگل، روانشناسی رنگ‌ها، پویایی‌های حرکتی و حتی اصول هنرهای تجسمی را با فناوری مدرن تلفیق کرده تا زبانی جدید برای تعامل انسان و ماشین خلق کند. آیا این آخرین گام گوگل برای محو کردن مرز بین دنیای فیزیکی و دیجیتال است

افشاگری: گوگل چگونه و چرا Material 3 Expressive را خلق کرد

گوگل پیش از رونمایی رسمی در این ماه، به طور تصادفی یک پست وبلاگی را منتشر کرد که به تشریح تفکر و تحقیقات پشت طراحی Material 3 Expressive می‌پرداخت.

نسخه‌ی کامل این پست توسط Wayback Machine آرشیو شده است (تصاویری که در نسخه‌ی آرشیو شده نیستند در ادامه آمده‌اند). در اینجا نکات کلیدی این افشاگری را مرور می‌کنیم:

Material 3 Expressive به اصطلاح “رویکرد جسورانه و جدید گوگل در طراحی” است که “بیشترین میزان تحقیق را در بین به‌روزرسانی‌های سیستم طراحی گوگل تا به امروز” داشته است. هدف گوگل این است که اپلیکیشن‌ها از طراحی‌های “تمیز” و “خسته‌کننده” فراتر رفته و رابط‌هایی ایجاد کنند که در سطح احساسی با کاربران ارتباط برقرار کنند. علاوه بر نام کامل، از آن با عنوان‌های “M3 Expressive” یا صرفاً “طراحی رسا” نیز یاد می‌شود.

Material 3 Expressive بر اساس تحقیقات شکل گرفته است؛ نه از نوع “41 طیف رنگ آبی” که تصمیمات طراحی را به داده‌ها واگذار می‌کرد، بلکه از طریق یک پرسش و پاسخ مشارکتی بین تیم‌های تحقیق، طراحی و مهندسی.

در سال 2022، تیم Material Design این سوال را مطرح کرد: “چرا همه‌ی این برنامه‌ها اینقدر شبیه به هم و خسته‌کننده به نظر می‌رسند؟ آیا فضایی برای افزایش حس و حال وجود نداشت؟”

طی سه سال گذشته، آن‌ها پیامدهای این گفتگو را بررسی کرده و ده‌ها دور طراحی و تحقیق را برای یافتن تکامل بعدی Material Design پشت سر گذاشته‌اند. از طریق 46 مطالعه‌ی تحقیقاتی جداگانه با صدها طرح و بیش از 18000 شرکت‌کننده از سراسر جهان، آن‌ها سیستمی را تنظیم کرده‌اند که هم زیبا و هم بسیار کاربردی است. اصول Material 3 Expressive ریشه در تحقیقات قوی و بهترین شیوه‌های کاربردی دیرینه دارد، بنابراین طراحان می‌توانند با اطمینان از این اجزا و اصول جدید استفاده کنند و بدانند که چیزی می‌سازند که استفاده از آن آسان خواهد بود و مردم می‌توانند با آن ارتباط برقرار کنند.

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

ردیابی چشم: تجزیه و تحلیل اینکه کاربران روی چه چیزی تمرکز می‌کنند.
نظرسنجی‌ها و گروه‌های متمرکز: سنجش واکنش‌های احساسی به طرح‌های مختلف.
آزمایش‌ها: جمع‌آوری احساسات و ترجیحات.
قابلیت استفاده: بررسی سرعت درک و استفاده‌ی شرکت‌کنندگان از یک رابط کاربری.
گوگل می‌گوید “بخش‌های اساسی طراحی رسا، استفاده از رنگ، شکل، اندازه، حرکت و محفظه‌بندی است.” علاوه بر این: “Material 3 Expressive با استفاده‌ی جسورانه از شکل و رنگ مشخص می‌شود و تجربه‌های کاربری لذت‌بخشی ایجاد می‌کند.”

این جنبه‌های طراحی همچنین برای افزایش قابلیت استفاده‌ی یک محصول از طریق جلب توجه به موارد مهم در رابط کاربری اساسی هستند: برجسته کردن اقدامات کلیدی و گروه‌بندی عناصر مشابه.

یک “نوار ابزار شناور” یکی از اجزایی است که از دل Material 3 Expressive متولد شده است. در طرح‌های مفهومی، یک نوار پایین قرصی شکل را می‌بینیم که تمام عرض صفحه را نمی‌پوشاند. به این ترتیب، بخشی از پس‌زمینه دیده می‌شود و طراحی‌های لبه به لبه اهمیت بیشتری پیدا می‌کنند. این مشابه چیزی است که امروزه در Google Chat موجود است.

تحقیقات گوگل نشان داده است که “طراحی‌های رسا آسان‌تر قابل استفاده هستند” و به کاربران کمک می‌کنند تا “به سرعت اقدام کلیدی در هر صفحه را پیدا کرده و سریع‌تر پیمایش کنند.”

“… شرکت‌کنندگان توانستند عناصر کلیدی رابط کاربری را تا 4 برابر سریع‌تر تشخیص دهند، که نشان می‌دهد این طرح‌ها برای هدایت توجه کاربر به مهم‌ترین بخش صفحه کارآمد هستند. ما شاهد دستیابی بسیاری از برنامه‌ها به این سطح از بهبود بوده‌ایم و این فراتر از زمان تثبیت چشم است. ما همچنین شاهد کاهش چند ثانیه‌ای در زمان ضربه زدن به اقدامات کلیدی در طراحی‌های مختلفی که آزمایش کرده‌ایم بوده‌ایم.”

باز هم تاکید می‌شود که این‌ها صرفاً طرح‌های مفهومی هستند و بازتاب‌دهنده‌ی محصولات نهایی نیستند. (برای چیزی نهایی‌تر، طراحی مجدد Google Clock در آخر هفته لو رفت.) با این حال، مثال “قبل” در زیر به وضوح رابط کاربری فعلی Gmail است.

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

نظر برتر توسط Zargh: موفقیت/شکست پذیرش واقعاً به سهولت پیاده‌سازی/یکپارچگی به‌روزرسانی از M3 بستگی دارد. Jetpack Compose این روزها در وضعیت بسیار بهتری قرار دارد، بنابراین من با احتیاط خوشبین هستم.

در همین حال، تحقیقات و آزمایش‌های کاربری نشان داد که “یک طراحی رسای به خوبی اجرا شده، به شدت توسط افراد در تمام سنین نسبت به طراحی غیررسایی که از دستورالعمل‌های رابط کاربری انسانی iOS پیروی می‌کند، ترجیح داده می‌شود.”

گوگل دریافت که “طراحی‌های رسا جذاب هستند”، به ویژه جذابیت برند: “تحقیقات ما نشان داد که استفاده از طراحی M3 Expressive باعث افزایش میزان ‘جذابیت’ یک محصول از نظر مردم می‌شود.”

“… ما شاهد افزایش 32 درصدی در درک خرده‌فرهنگ بودیم، که نشان می‌دهد طراحی رسا باعث می‌شود یک برند مرتبط‌تر و ‘به روزتر’ به نظر برسد.”

“… افزایش 34 درصدی در مدرنیته، که باعث می‌شود یک برند تازه و آینده‌نگر به نظر برسد.”

“… جهش 30 درصدی در سرکشی، که نشان می‌دهد طراحی رسا یک برند را به عنوان یک رهبر جسور و نوآور، مایل به شکستن قراردادها، معرفی می‌کند.”