دربرنامه نویسی برای هر خط کدی که نوشته میشه باید منطقی وجود داشته باشه. اگه منطق رو مناسب بهت منتقل نکنن یا کلا منطقی در کار نباشه به نمونه های جالبی میرسیم که یک نمونه جالب امروز دیدم و خالی از لطف نیست که باهم بررسی کنیم:
این نمونه یکی از صفحاتی بود که خیلی اتفاقی امروز باز کردم و یک وب سایت بزرگ در کشور هستش.
در زمان ثبت نام در این وب سایت ما با صفحه زیر روبرو میشیم:
در نگاه اول ظاهر صفحه بسیار شیک و زیباست:
اما...
ما اگر همینجوری یک کلیک روی ایجاد حساب کاربری کنیم چه میشه؟ با این پیغام روبرو میشیم
چشم میزنیم. و دنگ دومی پیداش میشه!!!
اینم چشم.
ااااااااااا....
و باز دوباره؟ چرااااا؟ نه واقعا چرا؟؟؟
عیب نداره یادشون رفته اون آلرت ها رو حذف کنن.بیایم تیک قوانین رو بزنیم و نوع ثبت نام رو هم مشخص کنیم.
حالا دوباره روی کلید "ایجاد یک حساب کاربری" میزنیم و....
بعله اینجوریاس....قطار کلماته که سمت من کاربر سرازیر میشه.
طراحی وب سایت یک اصولی داره که هیچکدومشون توی چنین وب سایتی لحاظ نشده. بریم یکم دقیق تر به ماجرا نگاه کنیم.
همونجور که در نگاه اول دیدیم صفحه ظاهر شیک و خوبی داشت. اما جلوتر که رفتیم فاز طراح وبش مشخص نبود.
اول اینکه آقا تکلیف ما رو مشخص کن میخوای Alert نشون بدی؟ میخوای Toast نشون بدی یا validation summery؟ کدومش؟
وقتی داری validation summery میذاری پس اون زیر فیلدها دوباره نشون دادن چیه؟ وات د فاز؟!!
ماجرای آفتاب پرست بودن وب سایت اینجا مطرح میشه که وب سایتی به اون شکل و شمایل خوشگل یهو گلبهی میشه!!(با تشکر از همکار عزیز در تشخیص رنگ?)
ببینید گلهبی شدن وب سایت برای اینکه به مخاطب نشون بدی کجاها رو پر کن خوبه اما نه تا این حد. بالا که قطار هشدارها ردیف شده زیر همه ی فیلدها هم که نوشته شده بعدم بیای قرمز کنی؟ چه خبره؟؟ چی میخوای آخه؟
تمام بک گراند input ها که قرمز شده مشکلی که بوجود میاره اینه که من مخاطب دیگه اون هشدارهای قرمز زیر input ها رو درست نمیبینم. بهتر بود دورشون قرمز بشه تا خودشون. رنگ قرمزیم که انتخاب شده برای بک گراند یجورایی با پس زمینه ست شده کلا دیده نمیشه دیگه.
یکی از نکات اساسی که توی طراحی دیده نمیشه ماجرای لیبل هاست که با placeholder سرو تهش رو هم اوردن. مثلا میخواستن که فضای کمتری بگیره اما این بخش رو دقت نکردن که پشتیبان سایت بیچاره میشه.چرا؟ فرض کنین مثلا به چنین حالتی بود
میتونین بگین فیلد اول چیه؟ شماره پلاک ماشینه؟! لیبلی نداره که مشخص باشه؟ میتونیم بگیم خب کنارش زده نام خانوادگی پس حتما قبلی اسم بوده دیگه. اوکی قبول اما اینو چی میگین؟
روبرویی زده تلفن ثابت اما قبلی چیه؟ آدرسه؟ که نوشته شده تهرا؟ آیکن که شبیه تلگرامه احتمالا آیدی تلگرام میخواد. اما ماجرا این نیست این فیلد کدشهرستانه!!! توی عکس اولی میتونین ببینید چیه. پس لازمه که لیبل باشه کنار input ها.
ماجرای بعدی ایکن هاست. همونطور که نمونه ای رو بالا دیدیم آیکن تلگرام برای کدشهرستان قرار داده شده.یا برای کدملی از آیکن کارت اعتباری استفاده شده!!!!
کنار آدرس پستی آیکن صفحه کلید هستش که هرکسی در دنیای مجازی میدونه چنین ایکنی رو که میبینه وقتی روش کلیک میشه براش صفحه کلید مجازی باز میشه اما اینجا آیکن آدرسه!!
و کد پستی که باز آیکن تلگرامه. میشد یک نامه باشه اما نامه رو کجا گذاشتن؟ اینجا
اینجا همه چی در همه?
یه چیزیم اون وقت هست که دیده نمیشه گفتم اونم ببینید.
زیر "لطفا کدپستی را وارد کنید" یه چیزی نوشته شده شما میتونید بخونین؟?
از اینها که بگذریم میرسیم به دو دکمه بالای صفحه:
این دوتا دکمه اصلا با بقیه فرم ها مچ نیستن. چه شکل ظاهری و چه شیوه انتخاب کردنشون. یه نقطه ی کوچولو وسط این دکمه قرار گرفته که نشون بده مثلا این انتخاب شده!!!
فاجعه اینجاست:
حاجیییییییی چی داری میگی؟ کجایی حرف میزنی اصا؟ مرضی الطرفین یعنی چی؟!!!!
من البته میذارمش پای اینکه کسی که نوشته زبونش میگرفته و چنین متنی رو گفته چون توی دکمه هم نوشته "ایجاد یک حساب کابری" ?
ولی خدایی چه پاراگراف سنگینی. فارسی سخت نوشته شده.
و اما در مقابل این داریم:
نه به مرضی الطرفینت نه به این پسرخاله شدنت!
معمولا روال اینجوری هست که وب سایت نباید مخاطب خطاب کنه کاربرش رو و حس یکی بودن باید ایجاد کنه با کاربر که کاربر بهتر ارتباط برقرار کنه باهاش. توی یکی از نمونه ها همون قوانینش بود که نشونتون دادم.
بخش بعدی بخش معرف هستش که نوشته:
میشد فقط نوشت معرف. یجوری خودشو از کاربر نمیدونه این وب سایته و برتر میبینه. اینجا هم نمونه ی دیگه ای:
کم مونده فحشم بده?
اینا یه بخش کوچکی بودن از یک صفحه وب سایتی که امروز اتفاقی دیدم.
نکاتی داشتین خوشحال میشم بشنوم.
پ ن: طراح وب سایت از دوستان خوبمه و دشمنی و دوشواری نداریم با هم. فقط دوست داشتم بترکونمش?
پ ن 2: متاسفانه نمیشد آدرس بدم که برین ببینید ولی توی یکی از عکس ها تابلوهه کجاست این وب سایته!
