طراحی فرم ورود به سایت جذاب و مدرن با html و CSS

از دیدگاه کاربران، تجربه ورود به وب‌سایت یا برنامه به اندازه سایر ویژگی‌ها مهم است. طراحی صفحات ثبت نام و لاگین در بین طراحان UX کار ساده ای تلقی می شود و گاهی اوقات توجه زیادی به این امر نمی کنند. بدون شک، این یک فرآیند ساده است، با این حال، نادیده گرفتن این جزئیات کوچک می تواند تجربه کلی برنامه شما را از بین ببرد. این مقاله نکاتی مهم به همراه آموزش طراحی فرم ورود به سایت را با استفاده از کدهای html و Css را به شما نشان می دهد.

 

اهمیت طراحی صفحه ثبت نام و ورود

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

 

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

 

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

 

در زیر لیستی از بهترین روش‌ها وجود دارد که به شما کمک می‌کند یک طراحی ساده و کارآمد برای فرم ورود به سایت خود طراحی کنید.

 

۱. اجازه ثبت نام با حساب های رسانه های اجتماعی – ثبت نام با یک کلیک

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

 

از آنجایی که استفاده از یک حساب کاربری موجود برای ورود به برنامه نیازی به ایجاد یک حساب کاربری جدید از سوی کاربران ندارد، همچنین فرآیند تنظیم رمز عبور جدید و به خاطر سپردن آن را هر بار که برای استفاده از برنامه بازمی‌گردند حذف می‌کند.

 

ثبت نام برای یک برنامه با استفاده از حساب های رسانه های اجتماعی خارجی یک تجربه ساده است. به کاربران گزینه هایی برای ورود به برنامه خود با استفاده از حساب های رسانه های اجتماعی خود ارائه دهید.

 

۲. درخواست تایید رمز عبور نکنید

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

 

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

 

یک راه حل بهتر که سریع و کارآمد است، ارائه گزینه Show Password با قسمت Password است. کاربران می توانند روی گزینه کلیک کنند، رمز عبوری که وارد می کنند را ببینند و از این رو در صورت نیاز اصلاحات فوری را انجام دهند.

 

۳. امکان جابجایی بین ورود به سیستم و ثبت نام

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

 

زمانی که کاربر در حال حاضر در صفحه ثبت نام است تغییر به صفحه ورود به سیستم بسیار رایج است.

 

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

 

۴. به جای نام کاربری از ایمیل استفاده کنید

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

 

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

 

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

 

۵. فرآیند ثبت نام را تقسیم کنید

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

 

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

 

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

 

۶. امکان بازیابی آسان رمز عبور را فراهم کنید

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

 

ارائه گزینه Forgot Password فقط به همراه دکمه Login به کاربران کمک می کند تا آن را به راحتی پیدا کنند.

 

۷. با ارائه گزینه یادآوری من، ورود به سیستم را آسان تر کنید

ارائه یک گزینه صریح مرا به خاطر بسپار به کاربران کمک می کند تا در مراجعات بعدی نیازی به وارد کردن ایمیل و پسورد برای ورود به سایت نداشته باشند.

 

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

 

موارد بالا از مهم ترین نکات طراحی فرم ورود به سایت هستند که می توانند تجربه کاربری شما را بهتر نمایند. در ادامه این مقاله ما به آموزش ساخت یک فرم ورود به سایت با ظاهرهای جذاب خواهیم پرداخت .

 

آموزش طراحی فرم ورود به سایت جذاب

فرم ما ، چیزی شبیه به فیلم زیر خواهد بود.

 

 

در ابتدا کدهای HTml را در فایل index.html خود درج می کنیم.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page | GEEK.WITH.ME</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="login-box">
<h2>Login</h2>
<form>
<div class="user-box">
<input type="text" name="username" required>
<label>Username</label>
</div>
<div class="user-box">
<input type="password" name="password" required>
<label>Password</label>
</div>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
Submit
</a>
</form>
</div>
</body>
</html>

سپس کدهای CSS را در فایل Style.Css وارد می کنیم :

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
font-family: sans-serif;
background: linear-gradient(#141e30, #243b55);
user-select: none;
}
.login-box {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
padding: 40px;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, .5);
box-sizing: border-box;
box-shadow: 0 15px 25px rgba(0, 0, 0, .6);
border-radius: 10px;
}
@media screen and (max-width : 540px) {
.login-box {
width: 100%;
border-radius: 0;
}
}
.login-box h2 {
margin: 0 0 30px;
padding: 0;
color: #fff;
text-align: center;
}
.login-box .user-box {
position: relative;
}
.login-box .user-box input {
width: 100%;
padding: 10px 0;
font-size: 16px;
color: #fff;
margin-bottom: 30px;
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
}
.login-box .user-box label {
position: absolute;
top: 0;
left: 0;
padding: 10px 0;
font-size: 16px;
color: #fff;
pointer-events: none;
transition: .3s;
}
.login-box .user-box input:focus~label,
.login-box .user-box input:valid~label {
top: -20px;
left: 0;
color: #03e9f4;
font-size: 12px;
}
.login-box form a {
position: relative;
display: inline-block;
padding: 10px 20px;
color: #03e9f4;
font-size: 16px;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
transition: .5s;
margin-top: 40px;
letter-spacing: 4px
}
.login-box a:hover {
background: #03e9f4;
color: #fff;
border-radius: 5px;
box-shadow: 0 0 5px #03e9f4,
۰ ۰ 25px #03e9f4,
۰ ۰ 50px #03e9f4,
۰ ۰ 100px #03e9f4;
}
.login-box a span {
position: absolute;
display: block;
}
.login-box a span:nth-child(1) {
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #03e9f4);
animation: btn-anim1 1s linear infinite;
}
@keyframes btn-anim1 {
۰% {
left: -100%;
}
۵۰%,
۱۰۰% {
left: 100%;
}
}
.login-box a span:nth-child(2) {
top: -100%;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg, transparent, #03e9f4);
animation: btn-anim2 1s linear infinite;
animation-delay: .25s
}
@keyframes btn-anim2 {
۰% {
top: -100%;
}
۵۰%,
۱۰۰% {
top: 100%;
}
}
.login-box a span:nth-child(3) {
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background: linear-gradient(270deg, transparent, #03e9f4);
animation: btn-anim3 1s linear infinite;
animation-delay: .5s
}
@keyframes btn-anim3 {
۰% {
right: -100%;
}
۵۰%,
۱۰۰% {
right: 100%;
}
}
.login-box a span:nth-child(4) {
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg, transparent, #03e9f4);
animation: btn-anim4 1s linear infinite;
animation-delay: .75s
}
@keyframes btn-anim4 {
۰% {
bottom: -100%;
}
۵۰%,
۱۰۰% {
bottom: 100%;
}
}

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

 

• مطالب مرتبط : آموزش طراحی صفحه ۴۰۴ انیمیشنی اختصاصی

 

نتیجه

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