استفاده از متن در وایرفریم‌ها

طراحی کاربردی و دقیق تر وایرفریم با رعایت اصول استفاده از متون در وایرفریم

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

بلاک‌های متنی

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

متن موقتی

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

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

متن واقعی همراه با تعداد کاراکتر

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

همچنین ابزار Balsamiq این امکان رو می‌ده که تعداد کاراکترهای واقعی رو ببینید؛ اگر فضای متن محدود باشه، این ویژگی باعث می‌شه نویسنده‌ها و توسعه‌دهنده‌ها دقیق‌تر محتوا رو تنظیم و هماهنگ کنن.

شکست خطوط متن

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

تیترها: از کوتاه‌سازی (Truncation) و سه‌نقطه (…) استفاده کنید و مطمئن باشید کاربر با هاور کردن یا تولتیپ می‌تونه متن کامل رو ببینه. برای تیترهای کوتاه‌شده حداقل ۴ کاراکتر غیرکوتاه‌شده لازم دارید.
بلاک‌های متنی: از کوتاه‌سازی و دکمه «نمایش بیشتر» استفاده کنید تا کاربر بتونه ادامه‌ی محتوا رو در پایین صفحه یا صفحه‌ی جدید ببینه.
نکته حرفه‌ای: این روش برای بردکرام (Breadcrumb)، صفحه‌بندی و لینک‌های طولانی هم کاربردی‌ه.

بومی‌سازی

اگه محصول شما قراره جهانی بشه، باید فرآیند بومی‌سازی (ترجمه و تطبیق محتوا با فرهنگ و سبک هر کشور) انجام بشه. وایرفریم‌ها این امکان رو می‌دن که از همون ابتدا مشکلات احتمالی بومی‌سازی رو بشناسید و حل کنید.

چیدمان: اگر محصول برای کشورهایی با زبان راست‌به‌چپ طراحی می‌شه، همین رو در وایرفریم نشون بدید. در غیر این صورت کاربرانی که الگوی دیداری F یا Z ندارن تجربه‌ی خوبی نخواهند داشت.
فضا: بعضی زبان‌ها مثل آلمانی یا روسی نسبت به انگلیسی فضای بیشتری نیاز دارن.
فرمت‌ها: هر کشور قوانین متفاوتی برای نوشتن تاریخ، ارز، شماره تلفن و… داره. مثلاً آمریکایی‌ها از فرمت MM-DD-YYYY استفاده می‌کنن، اروپایی‌ها DD-MM-YYYY و در چین YYYY-MM-DD رایجه.

سناریوهای لبه

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

متن خطا: خطاها همیشه اتفاق می‌افتن؛ باید نشون بدید پیام خطا یا اعتبارسنجی هر فیلد کجا ظاهر می‌شه.
تفاوت تعداد کاراکتر: بازه‌های مختلفی مثل بلاک‌های خالی، تعداد کم متن یا متن‌های خیلی طولانی رو در نظر بگیرید.
دسترس‌پذیری: مطمئن بشید محصول شما برای همه قابل استفاده‌ست و در وایرفریم‌ها برای تصاویر، لینک‌ها و دکمه‌ها متن جایگزین (alt text) مشخص شده.

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

مشاهده دوره جامع طراحی محصول

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

0 دیدگاه

در بحث‌‌ پیرامون این مقاله شرکت کنید!

دیدگاهتان را بنویسید