هر تعامل چهار لحظه دارد
در این بخش، trigger تا feedback را نه بهعنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی میکنیم.
در جلسه نقد معمولاً کسی میگوید «یک چیزی اینجا کم است». این جمله اغلب به معنای نیاز به عنصر تازه نیست. شاید فاصله، وزن، نامگذاری یا ترتیب محتوا نتوانسته رابطه اجزا را توضیح دهد. پیش از افزودن هر چیز، بهتر است همان چیزهای موجود را از نظر نقش، ریتم و رفتار دوباره ببینیم. در موضوع «هر تعامل چهار لحظه دارد»، بهتر است از خود trigger تا feedback شروع کنیم. این زاویه تصمیم را از پسند شخصی جدا میکند و به نقشی که باید در تجربه صفحه داشته باشد برمیگرداند؛ جایی که میتوان درباره نتیجه حرف زد، نه فقط درباره زیبا یا نازیبا بودن.
نکته مهم این است که کاربر زبان فایل طراحی را نمیشناسد. او نام توکن، گرید یا کامپوننت را نمیبیند؛ فقط احساس میکند پیدا کردن پاسخ آسان است یا نه. بنابراین جزئیات فنی زمانی ارزش دارند که به تجربهای قابل مشاهده تبدیل شوند: مکث کمتر، انتخاب روشنتر و مسیر بازیابی قابل فهمتر. برای trigger تا feedback، نمونه را با متن کوتاه و بلند، حالت عادی و خطا، و دو اندازه کاملاً متفاوت بررسی کنید. تفاوتها را یادداشت کنید و فقط قاعدهای را وارد سیستم کنید که دلیلش در خروجی قابل دیدن باشد.
در عمل، این بخش با یک بار نگاهکردن تمام نمیشود. طراح، نویسنده و توسعهدهنده هرکدام لبه متفاوتی را میبینند. کنار هم گذاشتن این نگاهها باعث میشود هر تعامل چهار لحظه دارد نه یک تزئین جدا، بلکه بخشی از ساختار قابل نگهداری سایت باشد. هیچ نسخهای برای همیشه نهایی نیست. محتوا رشد میکند، دستگاهها تغییر میکنند و کاربران رفتارهایی نشان میدهند که در اتاق طراحی پیشبینی نشده بود. یک سیستم سالم امکان اصلاح میدهد، بدون آنکه هر تغییر کوچک هویت و ساختار کل سایت را از نو بسازد.
این صحنه، رابطه اجزای اصلی در بازخورد و رفتار رابط را بهصورت یک ساختار واحد نشان میدهد.
hover نباید تنها نشانه قابلیت کلیک باشد
در این بخش، ماوس و لمس را نه بهعنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی میکنیم.
طراحی وب در تصویر ثابت بسیار بخشنده است. همه منابع حاضرند، متنها کاملاند و هیچکس با انگشت خیس، اینترنت کند یا نور شدید صفحه را نمیبیند. محصول واقعی اینطور رفتار نمیکند. برای همین هر تصمیم بصری باید یک بار در زمان، یک بار در عرض و یک بار در زمینه استفاده واقعی بازبینی شود. در موضوع «hover نباید تنها نشانه قابلیت کلیک باشد»، بهتر است از خود ماوس و لمس شروع کنیم. این زاویه تصمیم را از پسند شخصی جدا میکند و به نقشی که باید در تجربه صفحه داشته باشد برمیگرداند؛ جایی که میتوان درباره نتیجه حرف زد، نه فقط درباره زیبا یا نازیبا بودن.
میتوان تصمیم را با یک پرسش ساده محک زد: اگر این عنصر حذف یا تغییر کند، فهم کاربر دقیقاً چه چیزی را از دست میدهد؟ پاسخ روشن، وجود عنصر را توجیه میکند. پاسخ مبهم معمولاً نشانه آن است که داریم با تزئین، نبود اولویت یا کمبود محتوا را پنهان میکنیم. برای ماوس و لمس، نمونه را با متن کوتاه و بلند، حالت عادی و خطا، و دو اندازه کاملاً متفاوت بررسی کنید. تفاوتها را یادداشت کنید و فقط قاعدهای را وارد سیستم کنید که دلیلش در خروجی قابل دیدن باشد.
در عمل، این بخش با یک بار نگاهکردن تمام نمیشود. طراح، نویسنده و توسعهدهنده هرکدام لبه متفاوتی را میبینند. کنار هم گذاشتن این نگاهها باعث میشود hover نباید تنها نشانه قابلیت کلیک باشد نه یک تزئین جدا، بلکه بخشی از ساختار قابل نگهداری سایت باشد. خروجی خوب قرار نیست در هر صفحه خودش را معرفی کند. وقتی قواعد درستاند، کاربر فقط احساس میکند صفحه آرام، روشن و قابل اعتماد است. طراح اما باید بداند این آرامش نتیجه مجموعهای از انتخابهای آگاهانه است: چه چیزی دیده شود، چه چیزی عقب بماند و چه زمانی رابط پاسخ بدهد.
- نقش ماوس و لمس را پیش از شکل آن تعریف کنید
- نمونه را با محتوای واقعی فارسی بسنجید
- رفتار موبایل و حالتهای غیرایدهآل را جدا ببینید
focus visible بخشی از شخصیت رابط است
در این بخش، کیبورد و دسترسی را نه بهعنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی میکنیم.
بعضی انتخابها در ابتدا کوچکاند اما در صد صفحه تکثیر میشوند. یک اندازه تیتر، یک فاصله اشتباه یا یک الگوی کارت بیدلیل، بهتدریج به لحن کل سایت تبدیل میشود. حرفهایبودن یعنی همین تصمیمهای کوچک را پیش از تکثیر ببینیم و برایشان قاعدهای روشن بسازیم. در موضوع «focus visible بخشی از شخصیت رابط است»، بهتر است از خود کیبورد و دسترسی شروع کنیم. این زاویه تصمیم را از پسند شخصی جدا میکند و به نقشی که باید در تجربه صفحه داشته باشد برمیگرداند؛ جایی که میتوان درباره نتیجه حرف زد، نه فقط درباره زیبا یا نازیبا بودن.
نکته مهم این است که کاربر زبان فایل طراحی را نمیشناسد. او نام توکن، گرید یا کامپوننت را نمیبیند؛ فقط احساس میکند پیدا کردن پاسخ آسان است یا نه. بنابراین جزئیات فنی زمانی ارزش دارند که به تجربهای قابل مشاهده تبدیل شوند: مکث کمتر، انتخاب روشنتر و مسیر بازیابی قابل فهمتر. برای کیبورد و دسترسی، نمونه را با متن کوتاه و بلند، حالت عادی و خطا، و دو اندازه کاملاً متفاوت بررسی کنید. تفاوتها را یادداشت کنید و فقط قاعدهای را وارد سیستم کنید که دلیلش در خروجی قابل دیدن باشد.
در عمل، این بخش با یک بار نگاهکردن تمام نمیشود. طراح، نویسنده و توسعهدهنده هرکدام لبه متفاوتی را میبینند. کنار هم گذاشتن این نگاهها باعث میشود focus visible بخشی از شخصیت رابط است نه یک تزئین جدا، بلکه بخشی از ساختار قابل نگهداری سایت باشد. در پایان، کیفیت را با مقایسه قبل و بعد از یک تصمیم بسنجید، نه با تعداد جزئیات اضافهشده. اگر مسیر کوتاهتر، محتوا خواناتر و حالتهای واقعی قابل پیشبینیتر شدهاند، طراحی کار خودش را انجام داده. باقی چیزها باید در خدمت همین نتیجه بمانند.
نمای دوم از فرم کلی فاصله میگیرد و روی اتصال تصمیمهای ریز به تجربه نهایی تمرکز میکند.
دکمه پس از کلیک باید وضعیت تازه بگیرد
در این بخش، pending state را نه بهعنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی میکنیم.
بیایید این بخش را با یک صحنه آشنا شروع کنیم. صفحه روی مانیتور کامل به نظر میرسد، اما وقتی نگاه از بالا تا پایین حرکت میکند، معلوم نیست کدام تصمیم واقعاً مهمتر است. در چنین لحظهای مشکل کمبود زیبایی نیست؛ مشکل این است که طراحی هنوز ترتیب دیدن و فهمیدن را مشخص نکرده. راهحل از افزودن یک افکت تازه نمیآید، از روشنکردن مسئولیت هر لایه میآید. در موضوع «دکمه پس از کلیک باید وضعیت تازه بگیرد»، بهتر است از خود pending state شروع کنیم. این زاویه تصمیم را از پسند شخصی جدا میکند و به نقشی که باید در تجربه صفحه داشته باشد برمیگرداند؛ جایی که میتوان درباره نتیجه حرف زد، نه فقط درباره زیبا یا نازیبا بودن.
میتوان تصمیم را با یک پرسش ساده محک زد: اگر این عنصر حذف یا تغییر کند، فهم کاربر دقیقاً چه چیزی را از دست میدهد؟ پاسخ روشن، وجود عنصر را توجیه میکند. پاسخ مبهم معمولاً نشانه آن است که داریم با تزئین، نبود اولویت یا کمبود محتوا را پنهان میکنیم. برای pending state، نمونه را با متن کوتاه و بلند، حالت عادی و خطا، و دو اندازه کاملاً متفاوت بررسی کنید. تفاوتها را یادداشت کنید و فقط قاعدهای را وارد سیستم کنید که دلیلش در خروجی قابل دیدن باشد.
در عمل، این بخش با یک بار نگاهکردن تمام نمیشود. طراح، نویسنده و توسعهدهنده هرکدام لبه متفاوتی را میبینند. کنار هم گذاشتن این نگاهها باعث میشود دکمه پس از کلیک باید وضعیت تازه بگیرد نه یک تزئین جدا، بلکه بخشی از ساختار قابل نگهداری سایت باشد. هیچ نسخهای برای همیشه نهایی نیست. محتوا رشد میکند، دستگاهها تغییر میکنند و کاربران رفتارهایی نشان میدهند که در اتاق طراحی پیشبینی نشده بود. یک سیستم سالم امکان اصلاح میدهد، بدون آنکه هر تغییر کوچک هویت و ساختار کل سایت را از نو بسازد.
- نقش pending state را پیش از شکل آن تعریف کنید
- نمونه را با محتوای واقعی فارسی بسنجید
- رفتار موبایل و حالتهای غیرایدهآل را جدا ببینید
خطای فرم را نزدیک تصمیم نشان دهید
در این بخش، validation را نه بهعنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی میکنیم.
در جلسه نقد معمولاً کسی میگوید «یک چیزی اینجا کم است». این جمله اغلب به معنای نیاز به عنصر تازه نیست. شاید فاصله، وزن، نامگذاری یا ترتیب محتوا نتوانسته رابطه اجزا را توضیح دهد. پیش از افزودن هر چیز، بهتر است همان چیزهای موجود را از نظر نقش، ریتم و رفتار دوباره ببینیم. در موضوع «خطای فرم را نزدیک تصمیم نشان دهید»، بهتر است از خود validation شروع کنیم. این زاویه تصمیم را از پسند شخصی جدا میکند و به نقشی که باید در تجربه صفحه داشته باشد برمیگرداند؛ جایی که میتوان درباره نتیجه حرف زد، نه فقط درباره زیبا یا نازیبا بودن.
نکته مهم این است که کاربر زبان فایل طراحی را نمیشناسد. او نام توکن، گرید یا کامپوننت را نمیبیند؛ فقط احساس میکند پیدا کردن پاسخ آسان است یا نه. بنابراین جزئیات فنی زمانی ارزش دارند که به تجربهای قابل مشاهده تبدیل شوند: مکث کمتر، انتخاب روشنتر و مسیر بازیابی قابل فهمتر. برای validation، نمونه را با متن کوتاه و بلند، حالت عادی و خطا، و دو اندازه کاملاً متفاوت بررسی کنید. تفاوتها را یادداشت کنید و فقط قاعدهای را وارد سیستم کنید که دلیلش در خروجی قابل دیدن باشد.
در عمل، این بخش با یک بار نگاهکردن تمام نمیشود. طراح، نویسنده و توسعهدهنده هرکدام لبه متفاوتی را میبینند. کنار هم گذاشتن این نگاهها باعث میشود خطای فرم را نزدیک تصمیم نشان دهید نه یک تزئین جدا، بلکه بخشی از ساختار قابل نگهداری سایت باشد. خروجی خوب قرار نیست در هر صفحه خودش را معرفی کند. وقتی قواعد درستاند، کاربر فقط احساس میکند صفحه آرام، روشن و قابل اعتماد است. طراح اما باید بداند این آرامش نتیجه مجموعهای از انتخابهای آگاهانه است: چه چیزی دیده شود، چه چیزی عقب بماند و چه زمانی رابط پاسخ بدهد.
موفقیت را صادقانه و کوتاه تأیید کنید
در این بخش، success feedback را نه بهعنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی میکنیم.
طراحی وب در تصویر ثابت بسیار بخشنده است. همه منابع حاضرند، متنها کاملاند و هیچکس با انگشت خیس، اینترنت کند یا نور شدید صفحه را نمیبیند. محصول واقعی اینطور رفتار نمیکند. برای همین هر تصمیم بصری باید یک بار در زمان، یک بار در عرض و یک بار در زمینه استفاده واقعی بازبینی شود. در موضوع «موفقیت را صادقانه و کوتاه تأیید کنید»، بهتر است از خود success feedback شروع کنیم. این زاویه تصمیم را از پسند شخصی جدا میکند و به نقشی که باید در تجربه صفحه داشته باشد برمیگرداند؛ جایی که میتوان درباره نتیجه حرف زد، نه فقط درباره زیبا یا نازیبا بودن.
میتوان تصمیم را با یک پرسش ساده محک زد: اگر این عنصر حذف یا تغییر کند، فهم کاربر دقیقاً چه چیزی را از دست میدهد؟ پاسخ روشن، وجود عنصر را توجیه میکند. پاسخ مبهم معمولاً نشانه آن است که داریم با تزئین، نبود اولویت یا کمبود محتوا را پنهان میکنیم. برای success feedback، نمونه را با متن کوتاه و بلند، حالت عادی و خطا، و دو اندازه کاملاً متفاوت بررسی کنید. تفاوتها را یادداشت کنید و فقط قاعدهای را وارد سیستم کنید که دلیلش در خروجی قابل دیدن باشد.
در عمل، این بخش با یک بار نگاهکردن تمام نمیشود. طراح، نویسنده و توسعهدهنده هرکدام لبه متفاوتی را میبینند. کنار هم گذاشتن این نگاهها باعث میشود موفقیت را صادقانه و کوتاه تأیید کنید نه یک تزئین جدا، بلکه بخشی از ساختار قابل نگهداری سایت باشد. در پایان، کیفیت را با مقایسه قبل و بعد از یک تصمیم بسنجید، نه با تعداد جزئیات اضافهشده. اگر مسیر کوتاهتر، محتوا خواناتر و حالتهای واقعی قابل پیشبینیتر شدهاند، طراحی کار خودش را انجام داده. باقی چیزها باید در خدمت همین نتیجه بمانند.
- نقش success feedback را پیش از شکل آن تعریف کنید
- نمونه را با محتوای واقعی فارسی بسنجید
- رفتار موبایل و حالتهای غیرایدهآل را جدا ببینید
حرکت جزئی باید سریع و قابل قطع باشد
در این بخش، motion detail را نه بهعنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی میکنیم.
بعضی انتخابها در ابتدا کوچکاند اما در صد صفحه تکثیر میشوند. یک اندازه تیتر، یک فاصله اشتباه یا یک الگوی کارت بیدلیل، بهتدریج به لحن کل سایت تبدیل میشود. حرفهایبودن یعنی همین تصمیمهای کوچک را پیش از تکثیر ببینیم و برایشان قاعدهای روشن بسازیم. در موضوع «حرکت جزئی باید سریع و قابل قطع باشد»، بهتر است از خود motion detail شروع کنیم. این زاویه تصمیم را از پسند شخصی جدا میکند و به نقشی که باید در تجربه صفحه داشته باشد برمیگرداند؛ جایی که میتوان درباره نتیجه حرف زد، نه فقط درباره زیبا یا نازیبا بودن.
نکته مهم این است که کاربر زبان فایل طراحی را نمیشناسد. او نام توکن، گرید یا کامپوننت را نمیبیند؛ فقط احساس میکند پیدا کردن پاسخ آسان است یا نه. بنابراین جزئیات فنی زمانی ارزش دارند که به تجربهای قابل مشاهده تبدیل شوند: مکث کمتر، انتخاب روشنتر و مسیر بازیابی قابل فهمتر. برای motion detail، نمونه را با متن کوتاه و بلند، حالت عادی و خطا، و دو اندازه کاملاً متفاوت بررسی کنید. تفاوتها را یادداشت کنید و فقط قاعدهای را وارد سیستم کنید که دلیلش در خروجی قابل دیدن باشد.
در عمل، این بخش با یک بار نگاهکردن تمام نمیشود. طراح، نویسنده و توسعهدهنده هرکدام لبه متفاوتی را میبینند. کنار هم گذاشتن این نگاهها باعث میشود حرکت جزئی باید سریع و قابل قطع باشد نه یک تزئین جدا، بلکه بخشی از ساختار قابل نگهداری سایت باشد. هیچ نسخهای برای همیشه نهایی نیست. محتوا رشد میکند، دستگاهها تغییر میکنند و کاربران رفتارهایی نشان میدهند که در اتاق طراحی پیشبینی نشده بود. یک سیستم سالم امکان اصلاح میدهد، بدون آنکه هر تغییر کوچک هویت و ساختار کل سایت را از نو بسازد.
حالتهای غیرایدهآل را اول طراحی کنید
در این بخش، empty و error را نه بهعنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی میکنیم.
بیایید این بخش را با یک صحنه آشنا شروع کنیم. صفحه روی مانیتور کامل به نظر میرسد، اما وقتی نگاه از بالا تا پایین حرکت میکند، معلوم نیست کدام تصمیم واقعاً مهمتر است. در چنین لحظهای مشکل کمبود زیبایی نیست؛ مشکل این است که طراحی هنوز ترتیب دیدن و فهمیدن را مشخص نکرده. راهحل از افزودن یک افکت تازه نمیآید، از روشنکردن مسئولیت هر لایه میآید. در موضوع «حالتهای غیرایدهآل را اول طراحی کنید»، بهتر است از خود empty و error شروع کنیم. این زاویه تصمیم را از پسند شخصی جدا میکند و به نقشی که باید در تجربه صفحه داشته باشد برمیگرداند؛ جایی که میتوان درباره نتیجه حرف زد، نه فقط درباره زیبا یا نازیبا بودن.
میتوان تصمیم را با یک پرسش ساده محک زد: اگر این عنصر حذف یا تغییر کند، فهم کاربر دقیقاً چه چیزی را از دست میدهد؟ پاسخ روشن، وجود عنصر را توجیه میکند. پاسخ مبهم معمولاً نشانه آن است که داریم با تزئین، نبود اولویت یا کمبود محتوا را پنهان میکنیم. برای empty و error، نمونه را با متن کوتاه و بلند، حالت عادی و خطا، و دو اندازه کاملاً متفاوت بررسی کنید. تفاوتها را یادداشت کنید و فقط قاعدهای را وارد سیستم کنید که دلیلش در خروجی قابل دیدن باشد.
در عمل، این بخش با یک بار نگاهکردن تمام نمیشود. طراح، نویسنده و توسعهدهنده هرکدام لبه متفاوتی را میبینند. کنار هم گذاشتن این نگاهها باعث میشود حالتهای غیرایدهآل را اول طراحی کنید نه یک تزئین جدا، بلکه بخشی از ساختار قابل نگهداری سایت باشد. خروجی خوب قرار نیست در هر صفحه خودش را معرفی کند. وقتی قواعد درستاند، کاربر فقط احساس میکند صفحه آرام، روشن و قابل اعتماد است. طراح اما باید بداند این آرامش نتیجه مجموعهای از انتخابهای آگاهانه است: چه چیزی دیده شود، چه چیزی عقب بماند و چه زمانی رابط پاسخ بدهد.
- نقش empty و error را پیش از شکل آن تعریف کنید
- نمونه را با محتوای واقعی فارسی بسنجید
- رفتار موبایل و حالتهای غیرایدهآل را جدا ببینید