سپنتا پویا — طراح محصول

دو مسیر چهارمرحله‌ای که از راست به چپ خوانده می‌شوند و هر دو با «کاربر روی ذخیره می‌زند» شروع می‌شوند. در مسیر بالا، ورود از در دیگر، کاربر به صفحهٔ جداگانهٔ ورود فرستاده می‌شود، یک خط‌چین صورتی درگاه را نشان می‌دهد، بعد به صفحهٔ اصلی سایت برمی‌گردد و یادداشتی که نوشته بود پاک شده است. در مسیر پایین، ورود در جا، یک پنجرهٔ ورود روی همان صفحه باز می‌شود، کاربر همان‌جا می‌ماند و کالا ذخیره می‌شود. زیر مسیر بالا نوشته سه قدم اضافه و یک نیت گم‌شده و زیر مسیر پایین نوشته کار از همان‌جا ادامه پیدا کرد
منبع: بنیاد طراحی تعامل (IxDF) · بازنویسی آزاد: سپنتا پویا با کمک هوش مصنوعی · مهر ۱۴۰۵ · زمان مطالعه: حدود ۱۲ دقیقه

یادآور ورود (Sign-in Reminders) چیست؟

💡 این متن «بازنویسی آزاد» است: ایده‌ها و مفاهیم مطلب اصلی با نگارش کاملاً مستقل فارسی و مثال‌های تازه بازگو شده‌اند و ترجمهٔ کلمه‌به‌کلمه نیست. بخش‌های افزودهٔ مترجم در جعبهٔ منبع مشخص شده‌اند. ترجمه و بازنویسی این متن با کمک هوش مصنوعی انجام شده است.

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

در این لحظه چیزی خراب نشده است. سایت درست کار کرده، فقط کاربر را از کاری که می‌کرد جدا کرده. این مقاله دربارهٔ الگوی کوچکی است که جلوی همین جدا شدن را می‌گیرد.

یادآور ورود چیست؟

یادآور ورود (Sign-in Reminder) پیامی است که درست وقتی کاربر کاری می‌کند که به حساب کاربری نیاز دارد، به او می‌گوید وارد نشده و همان‌جا راه ورود را جلویش می‌گذارد. هدفش کم کردن زمان و زحمتی است که کاربر باید بپردازد تا به کار نیمه‌تمامش برگردد.

این الگو در کتابخانه‌های الگوی طراحی رابط آمده است. جنیفر تیدول در کتاب Designing Interfaces و مارتین فان‌ویلی در کتابخانهٔ الگوهایش آن را ثبت کرده‌اند. ایده ساده است: سایت‌هایی که بخشی از امکاناتشان فقط برای اعضاست، باید لحظهٔ برخورد کاربر با آن بخش را طراحی کنند، نه اینکه آن را به حال خود رها کنند.

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

چرا کاربر یادش می‌رود وارد نشده است

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

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

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

اثر درگاه: هزینهٔ فرستادن کاربر به جای دیگر

منبع یک دلیل روان‌شناختی هم برای این الگو می‌آورد که به نظرم مهم‌ترین بخش آن است. حتماً برایتان پیش آمده که برای برداشتن چیزی به اتاق دیگری بروید و همین که از در رد می‌شوید، یادتان برود برای چه آمده‌اید. روان‌شناسان به این پدیده «اثر درگاه» (Doorway Effect) یا «اثر به‌روزرسانی مکان» می‌گویند.

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

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

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

چهار قاعدهٔ پیاده‌سازی

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

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

۲. امکان ورود را در خود یادآور بگذارید. پیامی که فقط می‌گوید «برای این کار باید وارد شوید» و کاربر را خودش دنبال دکمهٔ ورود می‌فرستد، نصف کار را کرده است. فیلدهای ورود، یا دست‌کم دکمه‌ای که مستقیم به آن‌ها برسد، باید همان‌جا باشد.

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

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

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

یکپارچگی: یادآور باید همه‌جا یکی باشد

بخش سخت این الگو نوشتن یک یادآور خوب نیست. سخت این است که یادآور در همهٔ ورودی‌ها و همهٔ کارها یکسان رفتار کند. در محصولی که چند تیم رویش کار می‌کنند، معمولاً هر تیم مسئلهٔ «کاربر واردنشده» را جداگانه حل کرده است.

جدولی که ستون‌هایش چهار کار نیازمند حساب است، یعنی ذخیره، نظر، افزودن به سبد و دنبال کردن، و ردیف‌هایش چهار راه رسیدن کاربر، یعنی صفحهٔ اول، نتیجهٔ جست‌وجو، لینک فرستاده‌شده و ایمیل یا اعلان. بیشتر خانه‌ها دایرهٔ تیرهٔ «یادآور در جا» دارند. سه خانه صورتی‌اند: لینک فرستاده‌شده و نظر با «خطای مبهم»، ایمیل و سبد با «صفحهٔ ورود جدا»، و جست‌وجو و دنبال کردن با «دکمه کاری نمی‌کند». زیر جدول نوشته کاربر سایت را از خانه‌های صورتی قضاوت می‌کند، نه از خانه‌های تیره
— نمودار از سپنتا پویا برای این ترجمه (sepantapouya.com)

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

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

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

سه نمونه از منبع

منبع سه نمونهٔ واقعی می‌آورد که هر کدام یک جنبهٔ الگو را نشان می‌دهد.

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

زالاندو، فروشگاه آنلاین پوشاک اروپایی، وقتی کاربر واردنشده روی «علاقه‌مندی» می‌زند، یادآور را نشان می‌دهد. این نزدیک‌ترین نمونه به داستان کفش ابتدای مقاله است. کاربر کاری کوچک و آنی می‌خواهد و ورود نباید آن را به یک پروژه تبدیل کند.

اسپاتیفای در بخش هنرمندان، یادآور را وسط یک فرایند چندمرحله‌ای گذاشته است. اگر کاربر را از این فرایند بیرون می‌فرستاد، باید همهٔ مراحل را از نو طی می‌کرد. اینجا یادآور ورود جلوی بزرگ‌ترین هزینهٔ اثر درگاه را می‌گیرد: گم شدن پیشرفت در یک کار طولانی.

وقتی یادآور به دیوار تبدیل می‌شود

این بخش افزودهٔ من است. یادآور ورود الگوی مفیدی است، ولی دیده‌ام که همین الگو چطور خراب می‌شود. چهار شکل رایجش را بشناسید.

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

یادآوری که بسته نمی‌شود. کاربری که فقط می‌خواهد یک مطلب را بخواند و دکمهٔ ذخیره را اشتباهی زده، باید بتواند پنجره را ببندد و ادامه دهد. نبودن دکمهٔ بستن، یا پنهان کردنش در گوشه‌ای کم‌رنگ، کنترل را از کاربر می‌گیرد. اهمیت این کنترل را در کنترل کاربر باز کرده‌ایم.

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

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

در بافت فارسی

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

پنج نکتهٔ یادآور ورود در بافت فارسی: ورود با کد پیامکی کند است پس نیت کاربر را نگه دارید، فیلد کد هر دو نوع رقم را بپذیرد، خرید بدون حساب را بالا بگذارید، دکمهٔ بستن در جای آشنای راست‌به‌چپ باشد، و پیام یادآور را با فعل کاری که کاربر می‌خواست بنویسید
— نمودار از سپنتا پویا برای این ترجمه (sepantapouya.com)

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

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

سه: خرید بدون حساب را بالا بگذارید. خیلی از کاربران برای یک خرید یک‌باره نمی‌خواهند حساب بسازند. اگر سایت شما امکان خرید مهمان دارد، آن را در خود یادآور و هم‌وزن با دکمهٔ ورود نشان دهید، نه با یک پیوند کم‌رنگ در پایین صفحه.

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

پنج: پیام را با فعل کار کاربر بنویسید. «برای ادامه وارد شوید» پیام عمومی و سردی است. «برای ذخیرهٔ این کفش وارد شوید» به کاربر یادآوری می‌کند چه می‌خواست و چرا ارزش دارد چند ثانیه صرف ورود کند. این جمله کوتاه است، ولی یک قول هم در خود دارد: بعد از ورود، کفش ذخیره شده است.

جمع‌بندی

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

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

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

منبع

این نوشته «بازنویسی آزاد» است از موضوع What are Sign-in Reminders? منتشرشده در وب‌سایت بنیاد طراحی تعامل (Interaction Design Foundation — IxDF؛ بدون نام نویسندهٔ مشخص)، به‌همراه مقالهٔ همراه آن، Use Sign-in Reminders to Support Extended Functionalities. مفاهیم پایهٔ برگرفته از این منبع — تعریف یادآور ورود، مسئلهٔ ورودی‌های گوناگون و فراموش کردن وضعیت ورود، اثر درگاه یا اثر به‌روزرسانی مکان، چهار قاعدهٔ پیاده‌سازی، ترجیح پنجرهٔ روی صفحه و هشدار پیش از جابه‌جایی، و نمونه‌های لینکدین و زالاندو و اسپاتیفای — از این منبع گرفته شده، اما متن فارسی و توضیح‌ها کاملاً مستقل نوشته شده‌اند.

متن مقالهٔ اصلی تحت هیچ لایسنس بازی منتشر نشده است؛ به همین دلیل اینجا ترجمهٔ کلمه‌به‌کلمه ارائه نشده و متن کامل انگلیسی (به‌همراه همهٔ تصاویر) در لینک زیر در دسترس است.

ارجاع‌های بیرونی: کتاب Designing Interfaces نوشتهٔ جنیفر تیدول؛ کتابخانهٔ الگوهای مارتین فان‌ویلی؛ و پژوهش‌های گابریل رادوانسکی و همکاران دربارهٔ اثر درگاه و مرز رویدادها.

بخش‌های افزودهٔ مترجم: داستان آغازین لینک کفش؛ تفاوت یادآور ورود با ثبت‌نام اجباری؛ توضیح مرز رویداد در اثر درگاه و پیوندش با بار شناختی؛ نمودار دو مسیر ورود در جا و ورود از در دیگر؛ گسترش هر یک از چهار قاعده و اجرای خودکار کار پس از ورود؛ کل بخش یکپارچگی، جدول ورودی‌ها و کارها و روش بررسی با پنجرهٔ ناشناس؛ کل بخش «وقتی یادآور به دیوار تبدیل می‌شود» شامل یادآور زودهنگام، یادآور بسته‌نشدنی، یادآور تکراری و انقضای نشست وسط فرم؛ و کل بخش «در بافت فارسی» شامل ورود با کد پیامکی، ارقام فارسی و انگلیسی در فیلد کد، خرید مهمان، جای دکمهٔ بستن در رابط راست‌به‌چپ و نوشتن پیام با فعل کار کاربر.

تصاویر: تصویرهای منبع، که نماگرفت‌هایی از لینکدین و زالاندو و اسپاتیفای‌اند، با عنوان استفادهٔ منصفانه (Fair Use) آمده‌اند و هیچ‌کدام اینجا بازتولید نشده‌اند. هر سه نمودار این صفحه طراحی اختصاصی مترجم است.

مشاهدهٔ مقالهٔ اصلی
سپنتا پویا

مترجم: سپنتا پویا

طراح ارشد محصول. مقالات تخصصی UI/UX را با حفظ ساختار و لحن نسخهٔ اصلی و با کمک هوش مصنوعی به فارسی برمی‌گردانم.

دربارهٔ من

در این مقاله

  • - یادآور ورود چیست؟
  • - چرا کاربر یادش می‌رود وارد نشده است
  • - اثر درگاه: هزینهٔ فرستادن کاربر به جای دیگر
  • - چهار قاعدهٔ پیاده‌سازی
  • - یکپارچگی: یادآور باید همه‌جا یکی باشد
  • - سه نمونه از منبع
  • - وقتی یادآور به دیوار تبدیل می‌شود
  • - در بافت فارسی
  • - جمع‌بندی

برچسب‌ها

  • الگوی طراحی
  • ورود و ثبت‌نام
  • حافظه
  • ترجمه