Главная » Администрирование сайта » Управление шаблонами » Юзабельность: Форма входа

Юзабельность: Форма входа

08.02.2010 в 08:50
Автор: magnum

Вот пример формы входа :

Код:

Code
<?if($PAGE_ID$="login")?><div style="width:230px;"><?endif?>
<table style="width:100%;border:0px;">
<?if($ERROR$)?><tr><td width="100%"><center>$ERROR$</center><br/></td></tr><?endif?>
<tr>
<td style="width:20%;padding-right:2px;text-align:right;">Логин:</td>
<td style="width:60%;padding-left:2px;padding-right:5px;"><input class="loginField" type="text" name="user" size="20" maxlength="50"/></td>
<td style="width:20%;padding-left:3px;"><noindex><a href="/index/3-1" class="logl">Новый</a></noindex></td>
</tr></table>
<table style="width:100%;border:0px;"><tr><tr>
<td style="width:20%;padding-right:2px;text-align:right;">Пароль:</td>
<td style="width:60%;padding-left:2px;padding-right:5px;"><input class="loginField" type="password" name="password" size="20" maxlength="15"/></td>
<td style="width:20%;padding-left:3px;"><noindex><a href="$REMINDER_LINK$" class="logl">Забыл</a></noindex></td>
</tr></table>
<table style="width:100%;border:0px;padding-top:1px;"><tr><td style="width:20%;"></td>
<td style="width:30%;"><input style="height:22px;width:56px;color:#545454;font-family:Tahoma;padding-bottom:2px;" name="sbm" type="submit" value="Войти"/></td>
<td style="width:50%;text-align:center;font-size:10px;">Поддерживаем unet</td></tr></table>
<?if($PAGE_ID$="login")?></div><?endif?>

В css:

Code
.loginField{padding-left:3px;width:100%;padding-top:2px;font-size:10px;font-family:Tahoma;border:1px solid#CFCFCF;height:14px;background:#F3F3F3;}

Основные правила юзабельности формы входа:

1. Форма входа должна находиться на первом экране.
2. Не желательно выводить поля в линию т.к. пользователи привыкли вводить именно в такую форму.
3. Часто кнопка входа лучше смотриться, когда она совпадает с размером поля. Ну это уже кому как нравиться.
4. Поля для логина и пароля должны быть одного размера.
5. Ссылки должны быть около каждого у полей (смотри рисунок выше).

Вот еще пример хорошей формы входа:

Удачи Вам в написании юзабельного дизайна.

форма входа, css, вход, авторизация


Рейтинг: 5  (помогла ли Вам эта инструкция: да / нет)          Просмотров: 7675          Комментариев: 0

Похожие инструкции