Tooltips | راهنمای شناور

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

چرا صفحه را با متن ثابت خفه نمی‌کنیم

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

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

هاور دسکتاپ، فوکوس صفحه‌کلید، لمس بدون نشانگر

در دسکتاپ، هاور ماوس رایج‌ترین محرک است؛ اما تنها محرک قابل قبول نیست. کاربر بدون ماوس باید با Tab به کنترل برسد و همان راهنما را ببیند. اگر فقط هاور کار کند، دسترس‌پذیری می‌شکند. زمان ظهور باید کوتاه باشد تا حس تأخیر ندهد، و زمان ماندگاری باید برای خواندن کافی باشد؛ ناپدید شدن با لرزش جزئی نشانگر، کلاسیک‌ترین آزردگی است.

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

مرز با toast، popover و متن درون‌خطی

toast می‌گوید «ذخیره شد» یا «اتصال قطع است»؛ موقتی است، معمولاً گوشهٔ صفحه، و به یک عمل یا رویداد سیستم وصل است. tooltip به یک کنترل خاص قلاب می‌شود و معنای همان نقطه را باز می‌کند. popover اغلب غنی‌تر است: لینک، دکمه، فرم کوچک؛ تعامل داخلش بیشتر است و معمولاً با کلیک باز و بسته می‌شود. متن درون‌خطی برای دستورالعمل اجباری یا توضیح فیلد مهم‌تر است چون بدون ژست اضافه دیده می‌شود.

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

متن کوتاه، مکان دقیق، تأخیر آگاهانه

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

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

دسترس‌پذیری؛ جایی که خیلی از پیاده‌سازی‌ها می‌شکنند

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

کنتراست متن و پس‌زمینه، اندازهٔ قلم خوانا، و عدم اتکا به هاور alone سه الزام عملی‌اند. محتوایی که فقط با رنگ در tooltip معنا می‌دهد—مثل نقطهٔ قرمز بدون واژه—همان مشکل معنا‌با‌رنگ را تکرار می‌کند. در محصولات دوزبانه، طول متن فارسی و انگلیسی فرق می‌کند؛ ظرف نباید برای یکی ببرد و برای دیگری خالی بماند.

نقش در آنبوردینگ و یادگیری تدریجی

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

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

فرم، جدول و آیکون؛ سه صحنهٔ پرتکرار

در فرم، کنار برچسب فیلد پیشرفته یا آیکون اطلاعات، توضیح قواعد اعتبارسنجی یا مثال ورودی مفید است—به شرطی که پیام خطای اصلی هنوز inline باشد. در جدول داده، توضیح ستون و فرمول محاسبه جلوی سوءبرداشت متریک را می‌گیرد. در نوار ابزار آیکونی، tooltip نام عمل را می‌دهد تا مبتدی بدون حفظ شکل‌ها کار کند. در هر سه صحنه، اگر عمل مخرب است، تأیید جدا لازم است؛ tooltip جای دیالوگ تأیید نیست.

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

آنتی‌پترن‌ها و جمع‌بندی عملی

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

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

در بازبینی طراحی سیستم، یک صفحهٔ قرارداد برای tooltip بنویسید: حداکثر تعداد نویسه، محرک‌های مجاز به تفکیک پلتفرم، رفتار لبهٔ صفحه، و ممنوعیت‌های محتوا. همان قرارداد را در crit و در کد توکن و کامپوننت قفل کنید تا هر تیم ویژگی، گویش جدا نسازد. این انضباط کوچک، در محصول‌های شلوغ بیشتر از ده جلسهٔ سلیقه‌ای اثر دارد و زبان مشترک طراح، جلوه‌گر و محصول‌منجر را روی یک تعریف نگه می‌دارد.