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

ФОРУМ Игромания и киномания – сообщество пользователей игрового портала Igromen.Do.Am.
Форум - это место, где можно обсудить игровые новости и обновления, задать вопросы, разместить объявления и сообщения, дать объявления о предоставляемых вами услугах, поделиться полезной информацией и способами, вступить в команду портала (на должности модератора, журналиста), а также найти себе друзей и товарищей для общения и совместного времяпровождения в играх.
Все действия (общение и размещение информации) регламентируются правилами форума.

ТОП-5 по сообщениям

Димон

754

ТОП-5 по репутации

754

Страница 1 из 1
1

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

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

01.11.2012 в 04:06

Димон

Администраторы

/.s/a/38/496767602.png

Менеджер проекта

Статус:

Online

Регистрация:

07.10.2012

Сообщения:

754

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

Код:

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. Ссылки должны быть около каждого у полей (смотри рисунок выше).

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

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

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

Страница 1 из 1
1

О портале Igromen.Do.Am

Контакты

В помощь пользователям