طراحی رابط کاربری راستچین: پنج اصل کاربردی
پنج اصل ساده برای طراحی سایت و اپ فارسی راستچین: جهت چیدمان، آیکنهای جهتدار، عدد و تاریخ، فرمها و نوشتن پیام خطای قابل فهم.
نوشتهٔ تیم محصولهانت · ۳ فروردین ۱۴۰۵
راستچین کردن یک سایت فقط این نیست که dir را روی rtl بگذاری. کاربر فارسیزبان از راست شروع به خواندن میکند و انتظار دارد چیدمان، آیکنها، فرمها و حتی پیامها با همین جهت جور باشند. اگر نباشند، کاربر گیج میشود و شاید صفحه را ببندد.
در این نوشته پنج اصل ساده را مرور میکنیم که به تو کمک میکند سایت یا اپ فارسیات طبیعیتر به نظر برسد.
۱. چیدمان را از راست شروع کن
در صفحه راستچین، نقطه شروع خواندن گوشه بالا و راست است. پس لوگو و عنوان اصلی معمولاً آنجا یا وسط بالا قرار میگیرند و منو از راست به چپ چیده میشود.
دکمههای «بعدی» و «قبلی» هم باید با این جهت هماهنگ باشند. در رابط راستچین، رفتن به جلو یعنی حرکت به سمت چپ. پس فلش «بعدی» رو به چپ است و فلش «بازگشت» رو به راست.
برای اینکه این کار راحتتر شود، در CSS از ویژگیهای منطقی استفاده کن. مثلاً بهجای margin-left از margin-inline-start استفاده کن. این ویژگیها خودشان با جهت صفحه تنظیم میشوند و اگر روزی نسخه چپچین هم ساختی، لازم نیست همهچیز را از نو بنویسی.
۲. بدان کدام آیکنها باید برعکس شوند
قاعده کلی ساده است: آیکنهایی که جهت حرکت یا ترتیب را نشان میدهند، در راستچین برعکس میشوند. آیکنهایی که یک شیء واقعی را نشان میدهند، معمولاً نه.
فلشهای قبلی و بعدی، آیکن بازگشت، جداکننده مسیر صفحهها (breadcrumb) و آیکنهای واگرد و ازنو معمولاً باید برعکس شوند. نوار پیشرفت هم در راستچین از راست پر میشود.
در مقابل، آیکنهایی مثل ساعت، دوربین، قفل، سطل زباله، ستاره و قلب را برعکس نکن. ساعت برعکسشده دیگر ساعت درستی نیست.
بعد از راستچین کردن، یک بار همه آیکنهای صفحه را مرور کن و از خودت بپرس: آیا این آیکن هنوز همان معنایی را میرساند که میخواهم؟
۳. عدد و تاریخ را درست نشان بده
عددها حتی در متن فارسی از چپ به راست نوشته میشوند. اگر عدد را با حروف انگلیسی یا علامتها در یک خط ترکیب کنی، ممکن است ترتیب نمایش به هم بریزد. پس متنهایی مثل قیمت، شماره تلفن و کد را در مرورگر واقعی تست کن.
برای قیمت، واحد را بعد از عدد بنویس، مثل «۱۲۰ هزار تومان»، و هزارگان را جدا کن تا عدد راحت خوانده شود.
کاربر ایرانی معمولاً انتظار تاریخ شمسی دارد. اگر محصولت به تاریخ میلادی هم نیاز دارد، هر دو را نشان بده یا امکان انتخاب بگذار. درباره این موضوع در /blog/jalali-vs-gregorian-product-guide مفصلتر نوشتهایم.
یک نکته مهم: اگر عددها را فارسی نشان میدهی، در فیلدهای ورودی هم عدد فارسی را قبول کن. کاربری که با کیبورد فارسی «۱۲۳۴» تایپ میکند و پیام «فقط عدد وارد کنید» میگیرد، حق دارد کلافه شود. عددهای فارسی و عربی را پشت صحنه به انگلیسی تبدیل کن.
۴. فرمها را ساده و قابل پیشبینی بساز
در فرم راستچین، برچسب هر فیلد در سمت راست یا بالای آن قرار میگیرد. اگر دو فیلد در یک ردیف داری، مثل «نام» و «نام خانوادگی»، فیلدی که اول باید پر شود سمت راست بنشیند. ترتیب حرکت با کلید Tab هم باید با همین ترتیب جور باشد.
درباره جای دکمه اصلی و دکمه انصراف، تیمها روشهای متفاوتی دارند. مهمترین نکته این است که در کل محصول یک قاعده داشته باشی و همهجا رعایتش کنی. دکمه اصلی را هم با رنگ یا وزن متفاوت مشخص کن تا جایش مهم نباشد.
برای شماره موبایل، کاربر ایرانی معمولاً شماره را با ۰۹ شروع میکند. اگر سیستم تو به قالب +98 نیاز دارد، تبدیل را خودت انجام بده و از کاربر نخواه قالب خاصی را حدس بزند. فیلدهایی مثل ایمیل، آدرس سایت و شماره را هم چپچین نشان بده تا خواندنشان راحت باشد.
۵. پیام خطا را طوری بنویس که کاربر بداند چه کند
پیام خطای خوب سه چیز را میگوید: چه شد، چرا شد و حالا کاربر چه کار کند.
«خطای ۴۰۳» یا «ورودی نامعتبر» به کاربر کمکی نمیکند. بهجای «شماره نامعتبر» بنویس: «شماره موبایل باید با ۰۹ شروع شود و ۱۱ رقم باشد.» بهجای «خطا در ارتباط با سرور» بنویس: «اتصال برقرار نشد. لطفاً دوباره امتحان کن.»
پیام خطا را کنار همان فیلدی نشان بده که مشکل دارد، نه فقط بالای فرم. لحن را هم با مخاطبت هماهنگ کن. برای یک اپ عمومی لحن صمیمی خوب است. برای یک ابزار سازمانی، «شما» مناسبتر است. در هر دو حالت جمله را با راهحل تمام کن، نه با سرزنش.
جمعبندی
این پنج اصل سادهاند، اما کمتر محصولی همه را رعایت میکند. بهترین راه برای پیدا کردن مشکلها این است که از یک کاربر فارسیزبان که فنی نیست بخواهی با محصولت کار کند و بلند فکر کند. چند دقیقه تماشای این کار، مشکلهای زیادی را نشانت میدهد.
اگر محصول فارسی ساختهای، میتوانی آن را رایگان در /submit ثبت کنی.