نحوه طراحی فرم های وب جذاب (و الهام بخش برای شروع)

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

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

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

بنابراین، طراحان باید از چه تکنیک‌ها، اجزا و سبک‌هایی برای ایجاد فرم‌ها استفاده کنند؟ من اینجا هستم تا به اشتراک بگذارم 🙂

قبل از زیبایی شناسی

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

این در مورد لیست کردن فیلدهای فرمی نیست که باید طراحی کنید. این در مورد خواندن خلاصه و کشف دقیق سفری است که بیننده برای رسیدن به هدف شرکت باید طی کند.

در اینجا چند نکته وجود دارد که باید قبل از پرداختن به زیبایی شناسی به آنها فکر کنید.

کامپوننت ها را با HTML و CSS تشکیل دهید

ظاهر پیش فرض عناصر فرم HTML همانطور که در ویندوز 7 در مرورگر فایرفاکس دیده می شود.

 

به خاطر داشته باشید که طراحی شما به نوعی HTML/CSS و احتمالاً جاوا اسکریپت تبدیل خواهد شد. با HTML، چند مؤلفه فرم موجود است:

 

• فیلدهای ورودی متن
• مناطق متن بزرگتر
• دکمه های رادیویی
• چک باکس ها
• لیست ها

دکمه ها: برای ارسال فرم یا انجام سایر اقدامات

چند مؤلفه دیگر مانند بارگذاری فایل و فیلدهای رمز عبور وجود دارد که در HTML 5 معرفی شده‌اند. برخی از این عناصر از طریق CSS امکان‌پذیر نیستند یا از این جنبه بسیار محدود هستند: به‌ویژه فهرست‌های کشویی، چک باکس‌ها، دکمه های رادیویی و فیلدهای آپلود فایل. ظاهر آنها در یک صفحه وب توسط سیستم عامل و مرورگر تعیین می شود.

با این وجود، این نوع عناصر نباید محدود شوند، حداقل با جاوا اسکریپت.

کامپوننت ها را با جاوا اسکریپت تشکیل دهید

عناصر فرم به سبک HTML/CSS هر روز بیشتر با ابزارک های جاوا اسکریپت جایگزین می شوند که آزادی خلاقانه را امکان پذیر می کند.

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

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

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

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

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

 

• چه چیزی برای مشتری مهم تر است: سبک یا سادگی؟
• آیا استفاده از عناصر غیر سیستمی قابلیت استفاده را در این مورد خاص کاهش می دهد یا می افزاید؟

فرمی ایجاد کنید که انگار در حال گفتگو هستید

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

درست مانند هر مکالمه خوب، ما باید تلاش بیشتری برای پرسیدن سوالات متفکرانه داشته باشیم. همچنین باید فراخوان‌هایی را که معمولاً با دکمه‌های ارسال انجام می‌شوند، برجسته کند.

انواع فرم ها و سبک های مختلف

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

فرم های 1 صفحه ای

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

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

فرم های مرحله به مرحله

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

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

فرم های صفحه اصلی

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

فرم های پاورقی

پاورقی ها – بخش به ظاهر بی اهمیت – اخیراً توجه بیشتری را به خود جلب کرده اند. آنها به داستانی برای خودشان تبدیل می شوند و مکان بسیار خوبی برای درخواست ایمیل هستند.

اینکه بتوانید یک فوتر پیچیده را چاشنی کنید عالی است! در این مثال، کل پاورقی شامل call to actions و همچنین فرم تماس است.

فرم های تماس با ما

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

جستجو در فرم ها

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

اشکال استعاره بصری

در این شکل، استعاره بصری ثبت مورد است.

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

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

جلوه های شگفت انگیز شکل می گیرد

یک افکت غافلگیرکننده می‌تواند برای بیننده سرگرمی ایجاد کند… مطمئن می‌شود که او همچنان توجه دارد. 😉

هنگام طراحی «اشتراک در فید Rss Burgasmic»، از یک افکت کوچک استفاده کردم. وقتی ماوس روی همبرگر سیاه و سفید حرکت می‌کند، همراه با دکمه ارسال تغییر رنگ می‌دهد – ساده و سرگرم‌کننده!

فرم های مبتنی بر تصویر

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

تمرکز اصلی این است که سبک فرم را با بقیه سایت هماهنگ نگه دارید و البته گفتگو را دوستانه و سرگرم کننده نگه دارید.

نتیجه

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

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

شما خوشحال خواهید شد که بدانید: تعداد راه حل ها نامحدود است.

چه نوع فرم های وب برای شما جالب است؟ لطفا در نظرات به اشتراک بگذارید!