طراحی سایت

اصول طراحی رابط کاربری

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

درس ۶ از ۱۲
مقدماتی
رایگان، بدون ثبت نام

چهار ستونی که یک رابط را نگه می دارند

سه ستون اول عدد دارند و می شود سنجیدشان. ستون چهارم عدد ندارد و از همه راحت تر چک می شود.

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

سلسله مراتب

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

چه چیزی اصلا دیده شود. دست کم ۴.۵ به ۱ برای متن معمولی، طبق WCAG.
فاصله

چه چیزی به چه چیزی مربوط است. برچسب به فیلد خودش نزدیک تر از فیلد بعدی.
ثبات

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

رعایت هر چهار ستون تضمین نمی کند صفحه کار کند. متن روی دکمه هم باید درست باشد و این چهار اصل درباره متن حرفی نمی زنند.

آخرین بررسی: ۱۴ شهریور ۱۴۰۵ فکت ها و نام ابزارهای این درس در همین تاریخ با منابعشان بازبینی شده اند.

کار یک رابط کاربری اصلا چیست؟

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

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

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

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

خلاقیت و ثبات، و اینکه کدام صفحه کدام را می خواهد

هیچ کدام بد نیستند. اشتباه، گذاشتن هر کدام در صفحه ای است که آن یکی را می خواهد.

جای خلاقیت

عکاسی و تصویرسازی اختصاصی
لحن نوشتار و اسم بخش ها
صفحه درباره ما و نمونه کارها
جزئیاتی که کسی برای انجام کار به آنها نیاز ندارد

جای ثبات

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

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

چشم اول کجا می افتد؟

جایی که شما تعیین کرده اید، اگر تعیین کرده باشید. سلسله مراتب یعنی همین: با اندازه، وزن، جای قرار گرفتن و رنگ تصمیم می گیرید چه چیزی اول دیده شود و چه چیزی بعد. چهار ابزار دارید و لازم نیست هر چهار تا را با هم به کار ببرید؛ معمولا دو تا کافی است و استفاده از هر چهار تا برای یک عنصر، آن را داد می زند نه برجسته.

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

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

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

کنتراست و فاصله: دو چیزی که بیشترین شکایت را می سازند

کنتراست عدد دارد و همین بحث را تمام می کند. استاندارد WCAG می گوید نسبت کنتراست متن با پس زمینه اش باید دست کم ۴.۵ به ۱ باشد، و برای متن درشت ۳ به ۱ کافی است. خاکستری روشن روی سفید که در نمونه کارهای طراحی زیبا به نظر می رسد، معمولا از این عدد رد نمی شود و روی نمایشگر ارزان یا زیر آفتاب اصلا خوانده نمی شود.

اندازه هم عدد دارد. معیار دیگری از همان استاندارد می گوید هدف های اشاره گر باید دست کم ۲۴ در ۲۴ پیکسل CSS باشند، مگر آنکه فاصله کافی دورشان باشد. آیکن های شبکه اجتماعی در فوتر و دکمه بستن یک پاپ آپ، دو جای همیشگی رد شدن این قاعده اند.

فاصله اما عدد استاندارد ندارد؛ قاعده دارد. چشم چیزهایی را که به هم نزدیک ترند یک گروه می بیند، پس فاصله برچسب تا فیلد باید کمتر از فاصله آن فیلد تا فیلد بعدی باشد. اگر برعکس باشد، فرم شما به نظر می رسد که برچسب هر فیلد را زیرش نوشته، و کاربر یک بار اشتباه پر می کند تا بفهمد.

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

فارسی: راست چین، عدد، و متن لاتین وسط جمله

راست چین کردن یعنی آینه کردن کل چیدمان، نه فقط راست کردن متن. منو، آیکن فلش، نوار پیشرفت، ترتیب دکمه های تایید و انصراف، همه باید بچرخند. راه درستش هم این نیست که یک فایل CSS دوم برای راست چین بنویسید: از واحدهای منطقی استفاده کنید. margin-inline-start به جای margin-left، padding-inline-end به جای padding-right، و text-align: start به جای right. مرورگر جهت را از صفت dir روی تگ html می خواند و بقیه اش خودکار است.

عدد جای دومی است که فارسی فرق می کند. عددهای فارسی ۰۱۲۳۴۵۶۷۸۹ اند و در متن فارسی همان ها درست اند، ولی دو چیز را باید حواستان باشد. اول اینکه فونت باید واقعا آنها را داشته باشد، وگرنه مرورگر از یک فونت دیگر قرض می گیرد و عددها یکهو شکل و ارتفاعشان با بقیه جمله فرق می کند. دوم، و مهم تر، اینکه هیچ اعتبارسنجی استانداردی آنها را رقم نمی شناسد.

این دومی گیر واقعی است و در فرم ها خودش را نشان می دهد. در جاوااسکریپت الگوی \d فقط ارقام ۰ تا ۹ لاتین را می گیرد و در PHP هم [0-9] همین طور. پس اگر کاربری شماره تلفنش را با صفحه کلید فارسی وارد کند و شما با replace(/\D/g, "") پاکش کنید، رشته کاملا خالی می شود و فرم می گوید شماره نامعتبر است؛ در حالی که کاربر شماره درست را وارد کرده. راه حل یک خط است: قبل از اعتبارسنجی ارقام فارسی و عربی را به لاتین تبدیل کنید. هر جا در رابط فارسی ورودی عددی دارید، این تبدیل باید اولین کاری باشد که انجام می شود.

و سوم، متن لاتین وسط جمله فارسی. اسم برند، نام فایل و آدرس، وقتی داخل یک جمله راست چین می نشینند، ممکن است نقطه و پرانتز کنارشان جابه جا دیده شود. اگر یک قطعه لاتین را داخل <span dir="ltr"> بگذارید، مرورگر مرزهایش را درست تشخیص می دهد. برای یک کلمه معمولا لازم نیست؛ برای یک آدرس کامل یا یک دستور، لازم است.

چیزهایی که فقط در رابط فارسی خراب می شوند

چک لیست رابط فارسیراست چین

این ها را چک کنید

ورودی عددی، ارقام فارسی را قبل از اعتبارسنجی تبدیل می کند
فونت واقعا ارقام فارسی را دارد
آیکن فلش و نوار پیشرفت هم آینه شده اند
آدرس و دستور لاتین داخل span با dir ltr
ترتیب دکمه تایید و انصراف با جهت صفحه خوانده می شود

این ها را نکنید

نوشتن یک فایل CSS دوم فقط برای راست چین
استفاده از margin-left و padding-right در چیدمان
جدا کردن ارقام لاتین و فارسی در یک جدول
کوچک کردن فونت فارسی به اندازه فونت لاتین

هیچ کدام از این ها را ابزار خودکار پیدا نمی کند. صفحه را به کسی بدهید که فارسی می خواند و بگویید یک فرم را پر کند.

چرا برای صفحه فروش، ثبات از خلاقیت مهم تر است؟

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

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

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

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

مسیر سریع با هوش مصنوعی

یک کار هست که مدل های چندوجهی در آن واقعا خوب اند و بیشتر آدم ها امتحانش نکرده اند: نقد اسکرین شات. یک عکس از صفحه تان بدهید و بخواهید نه نظر بدهد، بلکه بگوید چشمش به چه ترتیبی روی صفحه حرکت کرده. جواب معمولا با ترتیبی که شما در نظر داشتید فرق دارد، و همان اختلاف، گزارش سلسله مراتب شماست. این کار قضاوت می خواهد، پس اینجا یک مدل قوی بگذارید نه یک مدل ارزان؛ انتخاب فعلی ما در <a class="text-link" href="/ai/">بخش هوش مصنوعی</a> هست.

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

نسخه آماده کپی

این اسکرین شات یک صفحه {نوع صفحه: فرود / محصول / فرم} است. کاری که کاربر باید انجام دهد این است: {هدف}.

به این ترتیب جواب بده و از صفت پرهیز کن:
۱) به ترتیب بگو نگاهت روی چه عناصری و با چه ترتیبی رفت. حداکثر شش مورد.
۲) بگو کدام عنصر به نظرت عمل اصلی صفحه است و از روی چه نشانه ای این را فهمیدی.
۳) هر جا دو عنصر با شدت یکسان کنار هم اند و رقیب همدیگرند، نامشان را بنویس.
۴) هر جا فاصله ها گروه بندی را اشتباه نشان می دهند، نامشان را بنویس.
۵) هر جا مشکوکی که کنتراست کافی نیست، فقط بگو کجا را باید اندازه بگیرم. عدد نساز.

درباره زیبایی، سلیقه و رنگ برند هیچ نظری نده.

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

هوش مصنوعی در این کار

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

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

Claude برای نقد اسکرین شات و نوشتن حالت های فراموش شده یک کامپوننت خوب جواب می دهد. ایران در هیچ کدام از دو فهرست کشورهای پشتیبانی شده انتروپیک نیست؛ این را از صفحه خود انتروپیک خوانده ایم.
Gemini تصویر را خوب می خواند و برای بررسی یک صفحه فارسی مناسب است، چون خود فارسی را هم می فهمد. صفحه خود گوگل می گوید اپ وب جمنای در بیش از دویست و سی کشور و منطقه کار می کند و ایران در آن فهرست نیست.
ChatGPT رایج ترین انتخاب و برای نقد اسکرین شات قابل قبول. درباره دسترسی و قیمتش اینجا ادعایی نمی کنیم: صفحه کشورهای پشتیبانی شده OpenAI به سرور ما پاسخ ۴۰۳ می دهد و ما ادعایی نمی نویسیم که پشتش چیزی نباشد.

کجا نتیجه معکوس می دهد

دو خطر، و اولی از آنچه به نظر می رسد جدی تر است. مدل ها روی همان چند سال طرح های پرتکرار آموزش دیده اند، پس وقتی از یکی بخواهید یک کارت یا یک صفحه فرود بسازد، خروجی چیزی است که چشم آموزش دیده فورا می شناسد. این حرف ما است و ادعای علمی نیست، ولی نیم تجربه اش را می شود روی همین سایت دید: در قواعد نوشتاری خودمان دو الگو را به اسم اثر انگشت طرح های تولیدشده ممنوع کرده ایم، نوار رنگی روی یک لبه کارت و کپسول ۹۹ پیکسلی، و برای اولی یک grep نگهبان داریم که هر بار اجرا می شود. یعنی مسئله آنقدر واقعی بوده که مجبور شدیم برایش قاعده بنویسیم.
خطر دوم فنی تر است: مدل چیزی را که اندازه نگرفته قضاوت می کند و با اطمینان می گوید. نسبت کنتراست از روی تصویر حساب کردنی نیست، و راهنمای Easy Checks خود W3C هم می گوید بررسی خودکار جای بررسی انسانی را نمی گیرد. موضع ما: از مدل بخواهید بگوید کجا را نگاه کنید، نه اینکه به جای شما قضاوت کند. برای اینکه بدانید هر ابزار از ایران چطور قابل پرداخت است، راهنمای خرید را ببینید.

منبع ها: W3C: Understanding SC 1.4.3 Contrast (Minimum) W3C WAI: Easy Checks Anthropic: supported countries Google: where Gemini Apps are available

حد این توصیه

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

از تجربه خود ما

ثبات را می شود شمرد و ما همین کار را روی سایت خودمان کرده ایم. در فایل main.css قالب rgb.ir یک بلوک کوتاه وجود دارد که شعاع گوشه همه شکل های سایت را در چهار عدد جمع می کند: دکمه معمولی پانزده، دکمه بزرگ هفده، چیپ دوازده و برچسب وضعیت نه. کل سایت از همین چهار عدد استفاده می کند. کنارش، همه سی و یک قالب صفحه سایت یک کامپوننت هدر مشترک را صدا می زنند و هیچ صفحه ای هدر خودش را از نو استایل نمی دهد؛ برای همین است که صفحه هاست و صفحه سئو با اینکه محتوایشان هیچ ربطی به هم ندارد، از یک خانواده به نظر می رسند. و یک تصمیم که کمتر جایی می بینید: نوار رنگی روی یک لبه کارت در قواعد این سایت ممنوع است، چون آن را نشان طرح های تولیدشده می دانیم؛ برای همین یک grep نگهبان داریم که موارد مجاز را می شمارد و هر عدد بیشتر یعنی کسی یک نوار تازه اضافه کرده. ثبات اینجا سلیقه نیست، نوشته شده و چک می شود.

سوال هایی که واقعا پرسیده می شوند

فرق UI و UX چیست؟

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

برای سایت فارسی چه فونتی انتخاب کنیم؟

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

یک سایت به چند رنگ احتیاج دارد؟

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