کمک به توسعه دهندگان در ساخت برنامه های وب قدرتمند و قابل نصب

Mustafa Kurtuldu

معرفی

در ابتدای سال 2020، تیم Chrome در سراسر تلفن همراه و دسکتاپ طرحی را برای بهبود قابلیت کشف و تعامل برنامه‌های وب نصب شده ارائه کرد. کار ما منجر به افزایش بیش از 100٪ در نصب و تعامل PWA شد. ما با تحقیق در مورد ویژگی‌های موجود، اجرای آزمایش‌های تست A/B و مصاحبه‌های کاربر برای به دست آوردن بینشی در مورد ادراکات و انتظارات کاربران به این امر دست یافتیم. این مقاله نحوه رسیدن ما به آنجا را پوشش می دهد.

زبان نصب یکپارچه

فراخوانی برای اقدامی که نصب PWA را راه‌اندازی می‌کند در سراسر پلتفرم وب ناسازگار بود. برای Chrome در Android، ما روی «افزودن به صفحه اصلی» قرار داشتیم، اما در پلتفرم‌های دسک‌تاپ، روی «نصب» تأکید کردیم. دلیل این اختلاف از مطالعه‌ای بود که تیم در سال 2016 انجام داد و رشته‌های مختلف را مقایسه کرد. تیم متوجه شد که افزودن به صفحه اصلی در موبایل بهتر عمل می‌کند، حتی اگر اندکی باشد.

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

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

آیکون را روی دسکتاپ نصب کنید

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

نماد نصب پلاس اصلی.

این نماد در ابتدا یک نماد مثبت بود، تا حدی به دلیل استعاره افزودن به صفحه اصلی مورد استفاده در تلفن همراه. با این حال، همانطور که گفته شد، زبان مورد استفاده ما Install بود. بازخوردی که از جامعه توسعه دهندگان دریافت کردیم این بود که این نماد گیج کننده است. علاوه بر این، اگر کاربری از عملکرد بزرگنمایی برای بزرگ‌نمایی متن استفاده می‌کرد، نماد بزرگ‌نمایی بسیار شبیه به نظر می‌رسید و کاربر را بیشتر گیج می‌کرد.

اشکال Omnibox با نمادهای بزرگنمایی و نصب موجود است.

من تصمیم گرفتم درک کاربر خود را بررسی کنم، زیرا بیشتر بازخوردها حکایتی بود. با همکاری محققان UX خود، مطالعه‌ای را با 10000 کاربر در ایالات متحده و اندونزی انجام دادیم تا درک کاربران از نماد نگاری نصب را مشخص کنیم. ما پنج طرح مختلف از جمله طرح موجود را آزمایش کردیم و از کاربران پرسیدیم که «نصب» به چه معناست. ما متوجه شدیم که نماد فعلی، نماد مثبت، برای کاربران ما گیج کننده ترین است. بسیاری این نماد را با "دارو"، "کمک های اولیه" و "باتری" اشتباه گرفتند.

همچنین متوجه شدیم که کاربران عمدتاً تصاویری مانند فلش‌ها و دستگاه‌ها را با نصب مرتبط می‌کنند. بر اساس این نتایج، ما یک آزمایش A/B/C در کروم انجام دادیم و طراحی موجود را با دو گزینه مقایسه کردیم. ما روی پیکانی فرود آمدیم که به سمت پایین به سمت مانیتور می رفت که عملکرد قابل توجهی بهتر از دو نمایشگر دیگر داشت. همچنین با این نماد جدید شاهد کاهش رد کردن رابط کاربری نصب بودیم.

انواع آیکونوگرافی نصب ما که می توانید از مجموعه آیکون Material Design دانلود کنید.

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

البته، یک آیکون تنها جهان را تغییر نخواهد داد، که ما را به ویژگی بعدی خود هدایت می کند.

کمک درون محصول

In-Product Help یک راهنمای ابزار حباب آبی است که کاربران را بر اساس ویژگی‌های جدیدی که ممکن است بر اساس معیارهای خاص مورد علاقه آنها باشد، معرفی می‌کند. ما تصمیم گرفتیم این الگوی طراحی را راه اندازی کنیم تا کاربران را در مورد ویژگی های نصب آگاه کنیم و از طراحی مجدد نماد جدید پشتیبانی بیشتری کنیم.

حباب راهنمای راهنمای داخل محصول که به کاربران درباره ویژگی‌ها آموزش می‌دهد.

وقتی کاربر به طور منظم از یک وب سایت بازدید می کند، Chrome از سرویسی به نام Site Engagement استفاده می کند. این اطلاعات در مورد میزان تعامل یک کاربر با یک سایت را ارائه می دهد. با مراجعه به chrome://site-engagement/ ، می‌توانید سایت‌هایی را که مرتباً با آن‌ها در ارتباط هستید، ببینید. با استفاده از این امتیازات، می‌توانیم مشخص کنیم که آیا کاربر به یک وب‌سایت علاقه دارد یا خیر. اگر سایت یک PWA بود و کاربر درگیر بود، رابط کاربری راهنما در محصول را نصب می‌کردیم. این بدان معنی است که ما فقط بر روی کاربران درگیر تمرکز می کنیم و کاربرانی را که ممکن است یک بار از یک سایت بازدید کنند، آزار ندهیم.

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

Richer Install UI

پارادایم نصب برای اکثر کاربران یک فروشگاه است. از اواسط دهه 2000، ما به کاربران آموزش دادیم که هر زمان که برنامه‌ای را نصب می‌کنند، توضیحات، اسکرین‌شات‌ها و سایر ابرداده‌ها را می‌بینند تا به آنها کمک کند تصمیم بگیرند که آیا یک برنامه چیزی است که می‌خواهند یا خیر.

با PWA ها، رابط کاربری که زمانی که کاربر تصمیم به نصب یک برنامه وب داشت نشان دادیم، نسبتاً ناچیز بود. بنابراین تیم تصمیم گرفت تا یک تجربه نصب غنی‌تر را بررسی کند که به کاربران ما در مورد برنامه وب ارائه می‌دهد و توسعه‌دهندگان را قادر می‌سازد تا PWA را که همتراز با تجربیات بومی بودند جشن بگیرند.

رابط کاربری غنی‌تر نصب، حالت‌های جمع‌شده و گسترش‌یافته.

در اوایل سال جاری، Richer Install را راه‌اندازی کردیم، یک رابط نصب گسترده در Chrome در Android که به توسعه‌دهندگان اجازه می‌دهد اسکرین‌شات‌ها را به مانیفست خود اضافه کنند. توسعه دهندگان همچنین می توانند توضیحاتی را اضافه کنند که توصیه می شود اما ضروری نیست. با توجه به این رابط کاربری جدیدتر، شاهد دو برابر شدن نرخ نصب برای برخی از PWA ها بودیم، که نشان می دهد کاربران در هنگام ارائه زمینه بیشتر و تجربیات غنی تر، اعتماد بیشتری به نصب برنامه های وب دارند. نسخه دسکتاپ این رابط کاربری در حال حاضر در حال انجام است.

نتیجه

این تیم دو سال گذشته را صرف کاوش و آزمایش ویژگی‌های جدیدتر در Chrome کرده است که توسعه‌دهندگان PWA را فعال و توانمند کرده و به آموزش کاربران در مورد مزایای تجربیات وب کمک کرده است. هنوز کارهای زیادی وجود دارد که می‌توانیم انجام دهیم، اما در مجموع می‌توانیم زندگی کاربران خود را بهبود بخشیده و غنی‌تر کنیم و از وب باز بیشتر حمایت کنیم.