Labels | برچسب‌ها
برچسب‌ها شناسه‌های توصیفی‌اند—معمولاً متن، و گاه آیکون همراه متن—که هدف یک عنصر رابط را برای کاربر روشن می‌کنند: این دکمه چه می‌کند، این فیلد چه داده‌ای می‌خواهد، این دسته چه محتوایی دارد. بدون برچسب، رابط به مجموعهٔ شکل‌های مبهم تبدیل می‌شود و کاربر مجبور است حدس بزند؛ حدس یعنی خطا، تردید، و رها کردن کار. برچسب خوب کوتاه است اما بدون ابهام؛ با زبان کاربر حرف می‌زند نه با اصطلاحات داخلی تیم؛ و در سراسر محصول یکدست می‌ماند تا یادگیری یک‌باره کافی باشد.
برچسب به‌عنوان قرارداد معنا میان انسان و رابط
هر کنترل تعاملی وعده‌ای می‌دهد. برچسب آن وعده را به زبان قابل‌خواندن ترجمه می‌کند. وقتی روی دکمه‌ای نوشته شده «ارسال پیام»، کاربر می‌داند پس از کلیک چه رخ می‌دهد؛ وقتی فقط «ارسال» یا بدتر یک آیکون مبهم است، هزینهٔ شناختی بالا می‌رود. همین قرارداد در فیلدها حیاتی‌تر است: برچسب «ایمیل کاری» با «ایمیل» فرق دارد و از پر شدن اشتباه جلوگیری می‌کند. برچسب‌ها لایهٔ معنایی رابط‌اند؛ ظاهر بدون معنا فقط دکوراسیون است.
در معماری اطلاعات، برچسب‌گذاری دسته‌ها، منوها و فیلترها مسیر کشف را می‌سازد. اگر دسته‌بندی فروشگاه «تازه» و «جدید» را هم‌معنا اما ناسازگار به کار ببرد، کاربر گزینه‌ها را از دست می‌دهد. ثبات واژگان—یک اصطلاح برای یک مفهوم—اعتماد و سرعت اسکن را بالا می‌برد. تیم باید واژه‌نامهٔ محصول داشته باشد تا طراح، نویسنده و مهندس یک برچسب را سه جور ننویسند.
برچسب فیلد: مکان، پایداری و پیوند برنامه‌ای
در فرم‌ها برچسب باید همیشه دیدنی بماند؛ placeholder جایگزین برچسب نیست چون با شروع تایپ ناپدید می‌شود و حافظهٔ کاری را خالی می‌گذارد. قرارگیری بالای فیلد یا کنار آن در چیدمان‌های فشرده رایج است؛ مهم این است که ارتباط دیداری و برنامه‌ای با ورودی قطع نشود. برای فناوری کمکی، هر input باید با label مرتبط باشد—از طریق for و id یا بسته‌بندی معنایی—تا صفحه‌خوان بتواند نام فیلد را اعلام کند.
دستورالعمل کمکی کنار برچسب می‌آید نه به‌جای آن: قالب تاریخ، مثال شماره، یا محدودیت نویسه. پیام خطا هم باید به همان فیلد و همان برچسب ارجاع دهد تا کاربر بداند کدام خانه را اصلاح کند. در زبان پارسی طول برچسب‌ها و شکست خط روی موبایل را واقعی بیازمایید؛ ترجمهٔ تحت‌اللفظی انگلیسی اغلب فیلد را شلوغ یا مبهم می‌کند و فضای لمسی را می‌خورد.
فیلدهای اجباری و اختیاری را با نشانهٔ واضح و توضیح کوتاه مشخص کنید. علامت ستاره بدون شرح در پاورقی برای بسیاری از کاربران کافی نیست. اگر داده حساس است، برچسب به‌تنهایی کافی نیست؛ یک جملهٔ کوتاه «چرا لازم است» اصطکاک اعتماد را کم می‌کند بدون آنکه برچسب را به پاراگراف تبدیل کند.
برچسب دکمه و اقدام: فعل مشخص به‌جای واژهٔ خنثی
برچسب دکمه‌های اصلی باید اقدام‌محور و مشخص باشد. «ثبت‌نام رایگان»، «دانلود گزارش»، یا «شروع دوره آزمایشی» روشن‌تر از «تأیید» یا «ادامه»اند، مگر آنکه بافت مرحلهٔ ویزارد خودش معنی را کامل کند. در جریان‌های چندمرحله‌ای، برچسب می‌تواند مرحله را نشان دهد—«ادامه به پرداخت»—تا کاربر بداند هنوز تمام نشده است. دکمه‌های مخرب مثل حذف باید برچسب صریح و اغلب الگوی تأیید جدا داشته باشند تا اشتباه لمسی جبران‌ناپذیر نشود.
طول برچسب دکمه تعادل ظریفی است: آن‌قدر کوتاه که در اسکن یک‌نگاهی خوانده شود، آن‌قدر کامل که تردید نسازد. تیم‌ها گاهی برای زیبایی برچسب را بیش از حد کوتاه می‌کنند و معنی را فدا می‌کنند. آزمون پنج‌ثانیه‌ای روی جمعی از دکمه‌های کلیدی صفحه سریع نشان می‌دهد کدام برچسب‌ها مبهم‌اند. در محصول چندزبانه، فضای دکمه را برای رشته‌های بلندتر پارسی و آلمانی رزرو کنید تا طراحی انگلیسی‌محور نشکند.
آیکون بدون متن: استثنا نه قاعده
چند آیکون تقریباً جهانی‌اند—ذره‌بین جستجو، سطل حذف در بعضی فرهنگ‌ها، خانه برای بازگشت به ابتدای محصول. اما اکثر آیکون‌ها مبهم‌اند و وابسته به قرارداد محلی محصول. تکیهٔ صرف به آیکون، به‌ویژه برای اقدامات حیاتی یا نادر، ریسک خطای جدی دارد. بهترین عمل ترکیب آیکون با برچسب متنی است؛ آیکون سرعت تشخیص را بالا می‌برد و متن قطعیت می‌سازد.
اگر محدودیت فضا مجبور به آیکون‌تنها کند—نوار ابزار فشرده یا موبایل—حداقل نام دسترس‌پذیر، راهنمای لمسی طولانی، و آزمون با کاربران تازه‌وارد ضروری است. تصور تیم که «همه این آیکون را می‌شناسند» معمولاً غلط از آب درمی‌آید. برچسب‌های متنی برای دسته‌بندی و فیلتر نیز نباید با آیکون‌های تزئینی جایگزین شوند؛ کشف‌پذیری متنی هنوز ستون فقرات پیمایش است.
دسترس‌پذیری: بدون نام، کنترل وجود ندارد
برای کاربر صفحه‌خوان، کنترل بدون نام قابل‌استفاده نیست. دکمهٔ بدون برچسب ممکن است فقط به‌عنوان «دکمه» اعلام شود و هدفش پنهان بماند. پیوندهای «اینجا کلیک کنید» نیز همین مشکل را دارند چون مقصد را نمی‌گویند. ARIA فقط وقتی لازم است که HTML معنایی کافی نباشد؛ اولویت با عناصر بومی و برچسب واقعی است نه نقش‌های مصنوعی روی div.
ناوبری صفحه‌کلیدی به برچسب‌های واضح وابسته است تا ترتیب فوکوس معنی‌دار باشد. در منوها، تب‌ها و درخت‌ها، نام هر گره باید مقصد یا حالت را بگوید. کنتراست متن برچسب با پس‌زمینه بخشی از خوانایی است؛ برچسب کم‌رنگ روی پس‌زمینهٔ شلوغ هم برای بینایی ضعیف و هم در نور بیرون شکست می‌خورد. دسترس‌پذیری برچسب اختیاری نیست؛ پایهٔ طراحی فراگیر است.
ثبات واژگان، لحن و مرز با پیوندها
یک محصول بالغ برای مفاهیم تکراری یک برچسب ثابت دارد: اگر جایی «سبد خرید» است جای دیگر «کارت» نشود مگر تغییر آگاهانهٔ برند. لحن باید با شخصیت برند هم‌خوان باشد اما وضوح را قربانی شوخی یا استعاره نکند—مگر آنکه مخاطب کاملاً تخصصی و آزمون‌شده باشد. بازبینی محتوا روی برچسب‌ها ارزان‌ترین بهبود کاربردپذیری است و اغلب بیشتر از بازطراحی رنگ نتیجه می‌دهد.
برچسب را با پیوند اشتباه نگیرید. پیوند دربارهٔ پیمایش و نشانهٔ مقصد است—اینکه چیزی قابل کلیک است و به کجا می‌برد. برچسب لایهٔ نام‌گذاری و توضیح عنصر است، چه دکمه باشد چه فیلد چه دسته. ممکن است متن یک پیوند خودش برچسب مقصد باشد، اما مسئلهٔ طراحی برچسب‌ها گسترده‌تر از ابرپیوند است: فرم، دکمه، فیلتر، وضعیت، و دسته‌بندی را پوشش می‌دهد. تیم باید برای هر دو الگوی جداگانه در سیستم طراحی داشته باشد.
وضعیت‌ها، جدول‌ها و برچسب در مقیاس محصول
برچسب فقط برای ورودی و دکمه نیست. وضعیت سفارش، برچسب اولویت تیکت، نام ستون جدول، و برچسب نمودار همه باید معنی دقیق بدهند. «در حال بررسی» با «در صف» فرق دارد؛ اگر تیم این دو را جابه‌جا به کار ببرد، پشتیبانی و کاربر حرف هم را نمی‌فهمند. در رابط‌های داده‌محور، برچسب ستون کوتاه اما دقیق—همراه واحد اندازه‌گیری در صورت نیاز—از تفسیر غلط جلوگیری می‌کند.
وقتی محصول رشد می‌کند، برچسب‌های قدیمی ممکن است با قابلیت جدید ناسازگار شوند. بازبینی دوره‌ای واژه‌نامه، هماهنگی با پشتیبانی دربارهٔ کلماتی که کاربر در تیکت تکرار می‌کند، و هم‌تراز کردن برچسب رابط با متن راهنما و ایمیل‌ها، هزینهٔ آموزش را کم می‌کند. ترجمه و بومی‌سازی را از ابتدا در نظر بگیرید: واژه‌ای که در انگلیسی سه حرف است در پارسی ممکن است دو برابر جا بگیرد و چیدمان را بشکند.
در نهایت، برچسب‌های خوب دیده نمی‌شوند چون کار را بی‌اصطکاک پیش می‌برند؛ برچسب‌های بد همه‌جا دیده می‌شوند چون کاربر را وادار به مکث و پرسش می‌کنند. سرمایه‌گذاری روی وضوح، ارتباط برنامه‌ای، اقدام‌محوری دکمه‌ها، و آزمون با فناوری کمکی، رابط را از حدس‌زدن به فهمیدن می‌برد و نرخ خطا و رهاسازی را پایین می‌آورد. تیمی که برچسب را جزئیات پیش‌پاافتاده بداند، معمولاً همان‌جا بیشترین اصطکاک خاموش را می‌کارد.
سوالات متداول
شناسهٔ متنی یا ترکیبی از متن و آیکون که هدف دکمه، فیلد، دسته یا عنصر دیگر را روشن می‌کند تا کاربر بدون حدس تعامل کند.
مشخص می‌کند هر فیلد چه داده‌ای می‌خواهد، خطا را کم می‌کند و برای صفحه‌خوان باید برنامه‌ای به ورودی متصل باشد.
به‌ندرت. بیشتر آیکون‌ها مبهم‌اند؛ ترکیب آیکون با متن ایمن‌تر است مگر آیکون‌های بسیار شناخته‌شده با نام دسترس‌پذیر قوی.
اقدام‌محور، مشخص و کوتاه است؛ به‌جای واژه‌های خنثی مثل ارسال، نتیجهٔ اقدام را می‌گوید مثل ارسال پیام یا ایجاد حساب.
برچسب نام‌گذاری و توضیح عناصر رابط است؛ پیوند الگوی پیمایش و مقصد کلیک‌پذیر است. ممکن است هم‌پوشانی متنی داشته باشند اما مسئلهٔ طراحی‌شان یکی نیست.