Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Левитас: Почему Ваш бизнес-сайт не работает?" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Февраль 2003   →
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28

Автор

Александр Левитас

Статистика

6.650 подписчиков
-3 за неделю

• Выпуски
• Статистика

←   Все выпуски   →

Юзабилити в Интернет: принципы успешного веб-дизайна

Информационный Канал Subscribe.Ru

---

MAXiMaster Юзабилити в Интернет: принципы успешного веб-дизайна Количество подписчиков: 3347 Автор: Максим Корниенко mail@maximaster.ru MAXiMaster.ru - web-дизайн, Internet-маркетинг, экспертиза юзабилити, креатив, реклама Если Вам понравился этот выпуск, пожалуйста, перешлите копию этого письма Вашим друзьям или коллегам, которые имеют свой сайт или занимаются его созданием и заинтересованы в повышении его удобства и простоты использования. Выпуск 10: Стратегия и тактика гиперссылок. Часть II Всем здравствуйте! Отдельно приветствую недавно подписавшихся и уведомляю о том, что на данный момент мы изучаем принципы разработки информационного наполнения сайтов. Начало этому циклу положил выпуск "Гипертекст как принципиально иной носитель информации", рекомендую взглянуть на него, чтобы быть в курсе А сегодня в меню — вторая часть рассуждений на тему "Стратегия и тактика гиперссылок" Начну сразу с ключевого утвержедния выпуска: Пользователю должно быть всегда понятно, какую информацию он получит, перейдя по той или иной ссылке Я даже не буду пытаться это доказывать, поскольку сделать это невозможно, не сказав банальности вроде того, что, "если пользователь не знает, что за ссылкой, он по ней не щелкнет, если не щелкнет, ты вы теряете покупателя" и т. д. Как добиться "понятности" ссылки? Общая рекомендация заключается в том, чтобы всегда смотреть на ссылку глазами посетителя, который в первый раз оказался на вашем сайте. А еще лучше — позвать к монитору человека, который не связан с разработкой этого сайта, и вместе с ним пощелкать по ссылкам, спрашивая его о том, что он каждый раз ожидает увидеть. Ниже я расскажу о наиболее характерных ошибках, которые допускают разработчики, заключая текст в теги <a></a> 1. Ссылка "Щелкните здесь" Я каждый раз вздрагиваю, когда вижу на страницах текст вроде такого: "Для того, чтобы узнать о дополнительных услугах, предоставляемых нашей компанией, щелкните здесь". Что же здесь не так? Во-первых, не все пользователи могут "щелкнуть". Например, в текстовом браузере под UNIX, которым пользуется наш системный администратор, такая надпись смотрится более чем странно. Во-вторых, ссылки сильно отличаются от остального текста, и поэтому именно на них прежде всего обращает внимание посетитель. Слова "щелкните здесь" абсолютно не информативны. Другое дело, если бы были выделены слова "дополнительные услуги". И, наконец, многие поисковые системы при определении релевантности страницы большое внимание уделяют тексту внешних ссылок на нее, а фраза "щелкните здесь" вряд ли относится к содержимому страницы, на которую ведет эта ссылка. Уверен, что вы уже догадались, как лучше формулировать подобные ссылки. Надо просто написать: "Дополнительные услуги, предоставляемые нашей компанией." 2. Скажите "нет" ссылке "назад" Очень часто бывает: ищешь что-то в Интернете через поисковик, видишь подходящее описание, переходишь по ссылке и на появившейся странице в самом верху видишь ссылку "назад". Мне всегда хочется спросить "А куда назад? На поисковик?" Откуда берутся такие ссылки? Все очень просто. Предположим, на сайте в разделе "офисная мебель" есть подраздел "компьютерные столы", где есть описания стола с тумбой, стола с подставкой для CD и стола на колесиках. Разработчик на странице "компьютерные столы" сделал 3 ссылки на описания этих столов, и на каждой странице описания сделал ссылки "назад", ведущие на страницу с тремя ссылками. Логично? Для разработчика — да, для меня — нет. Как лучше организовать навигацию в этам случае? Варианта 2: или заменить ссылку "назад" на "все виды компьютерных столов", или на странице сделать панель навигации, где перечислить все виды столов, выделив тот вид, на странице-описании которого мы сейчас находимся. Понятно, что первый способ подходит, когда список элементов очень большой, и меню навигации было бы слишком раздутым. При нескольких элементах лучше, конечно, использовать второй способ. 3. Чем плохи ссылки "следующий", "предыдущий" Очень часто этими ссылками пользуются, когда публикуют какой-то связанный текст, разбивая его на несколько страниц (например, по главам). Тут действуют все соображения, изложенные в предыдущих пунктах. А проблемы эти решаются довольно легко — надо в названии ссылок использовать осмысленный текст, который даст пользователю представление о том, что он будет читать, перейдя по ссылке. Например, писать "Предыдущая глава: Как выбрать волнистого попугайчика", "Следующая глава: как выбрать вашему попугайчику подружку" и т. д. Список таких примеров можно продолжать до бесконечности, но я думаю, что идею вы уже уловили, а это главное Кстати, небольшой совет в копилку. Не забывайте использовать атрибут "title" у ссылок. Это очень удобный способ увеличить понятность ссылки. (Для тех, кто не знает, поясню, что если вы напишите <a href="page.htm" title="Описание ссылки">ссылка</a>, то при наведении курсора на текст ссылки через пару секунд появится всплывающая подсказка с описанием ссылки.) На сегодня это все, в следующем выпуске я отвечаю на вопрос о релативных и абсолютных ссылках.   Всего доброго, Максим Корниенко MAXiMaster.ru - организация деятельности Вашей компании в сети Интернет, автоматизация бизнесс-процессов [ архив выпусков ] [ задать вопрос* ] * Письма и присланные материалы могут быть опубликованы. Если вы не хотите гласности, то укажите это в теле или заголовке письма РЕКЛАМА В РАССЫЛКЕ У Вас есть продукция или услуги, интересные на рынке информационных технологий? Вы хотите, чтобы о Вас узнали более 3,000 веб-дизайнеров, специалистов по Интернет-маркетингу и руководителей веб-студий? Если да, то разместите рекламу в этой рассылке, и Вы будете приятно удивлены эффектом, который получите! Цены символические. По вопросам размещения рекламы обращайтесь на mail@maximaster.ru ВЛАДЕЛЬЦАМ РАССЫЛОК Если у Вас есть рассылка по тематике, близкой к нашей (веб-дизайн, продвижение Интернет-ресурсов и т. д.), и Вы заинтересованы в обмене ссылками, пишите на mail@maximaster.ru Пожалуйста, укажите в письме следующую информацию: Название и краткое описание Вашей рассылки Способы подписки Периодичность выхода рассылки URL Вашего сайта (если есть) Количество подписчиков УСЛОВИЯ РЕПУБЛИКАЦИИ Вы можете размещать выпуски этой рассылки на Вашем сайте, новостном письме, электронной книге и т. д. при условии размещения следующей подписи в конце текста: Автор: Максим Корниенко http://MAXiMaster.ru - комплексная организация деятельности Вашей компании в сети Интернет. ЧТОБЫ ПОДПИСАТЬСЯ Если кто-то переслал Вам это письмо и Вы хотите подписаться на рассылку, воспользуйтесь формой подписки на странице http://maximaster.ru/usability.shtml © 2003 MAXiMaster.ru, Максим Корниенко

---

---

http://subscribe.ru/ E-mail: ask@subscribe.ru

Отписаться Убрать рекламу

---

В избранное

{#template MAIN} <div id="loginForm" style="display:none;" class="subscriberu_popup"> <div class="popup_register"> {#include js_tmpl_auth_reg_tab} {#if $P.login_register_tab == 1} <form class="authentication-form" method="post" action="/MEMBERLOGIN_authen_cred"> <dl class="rg_block_options"> <dt id="js_tap_panel_auth"> <h1>Войти на сайт</h1> {* {#include js_tmpl_auth_reg_button} *} {#include js_tmpl_auth_reg_action} <hr class="logreg_line noPhones"> <div class="logreg_descr noPhones"><p>{#include js_tmpl_auth_reg_descr} </p></div> <div class="logreg_advice noPhones"> Если вы еще не с нами, то начните с <a href="#" onclick="rgNav('js_tab_reg');return false;" class="dashed" data-func="registr">регистрации</a> </div> <br><br> <a class="dashed auth-enter" href="/manage/author/"><b>Вход для авторов</b></a> </dt> </dl> </form> {#/if} {#if $P.login_register_tab == 2} <div class="rg_block_options"> <div id="js_tap_panel_auth"> <h1>Регистрация</h1> <div class="social_reg"> {* <div class="rg_description">{#include js_tmpl_soc_auth_reg_descr}</div> *} {#include js_tmpl_auth_reg_soc} <div class="rg_soc_auth_agree">{#include js_tmpl_auth_reg_agree}</div> </div> <div class="subscribe_reg"> {* <div class="rg_description"> #include js_tmpl_auth_reg_descr </div> *} {#include js_tmpl_auth_reg_action} </div> {* {#include js_tmpl_auth_reg_button} *} <div class="clr"> </div> <hr class="logreg_line noPhones"> <div class="logreg_descr noPhones">{#include js_tmpl_auth_reg_descr} {#include js_tmpl_soc_auth_reg_descr} </div> </div> </div> {#/if} </div> {* <div class="gray_bg register_shadow"></div> *} </div> {#/template MAIN} {#template js_tmpl_auth_reg_tab} <ul class="rg_nav"> <li id="js_tab_auth" class="{#if $P.login_register_tab == 1} rg_active_nav {#/if} rg_first_nav"><a onclick="rgNav('js_tab_auth');return false;" href="">Вход на сайт</a></li> <li id="js_tab_reg" class="{#if $P.login_register_tab == 2} rg_active_nav {#/if}"><a onclick="rgNav('js_tab_reg');return false;" href="">Регистрация </a></li> </ul> <span onclick="hidebo();" class="rg_closed"> </span> {#/template js_tmpl_auth_reg_tab} {#template js_tmpl_auth_reg_action} {#if $P.login_register_tab == 1} {#include js_tmpl_auth_reg_soc} {#/if} <div class="rg_forms"> <input type="hidden" id="login_register_destination" value="{$P.login_register_destination}"/> {#if $P.login_register_tab == 1} <div class="rg_for_input"> <span class="rg_text_inner">E-mail или код подписчика</span> <input id="credential_0" class="js_keydown_selector rg_input_text" data-js_submit="no" data-js_next_input_name="credential_1" name="" type="text" /> </div> <div class="rg_for_input"> <span class="rg_text_inner">Пароль</span> <input id="credential_1" class="js_keydown_selector rg_input_text" data-js_submit="yes" data-js_action="js_loginFormBut" name="" type="password" onkeyup="showAttention(this,!!window.event.shiftKey)" /> <span class="pswd_attention" id="attention_pswd"> <span class="icon_attention"></span> <span class="pswd_attention-text" id="attention-text_pswd1">Русская раскладка клавиатуры!</span> <span class="pswd_attention-text" id="attention-text_pswd2">У вас включен Caps Lock!</span> <span class="pswd_attention-text" id="attention-text_pswd3">У вас включен Caps Lock и русская раскладка клавиатуры!</span> </span> </div> <div class="rg_for_input input-alien"> <span class="chk noPhones"><input id="chk_alien" name="" type="checkbox" /></span><label for="chk_alien" class="noPhones"> Чужой компьютер</label> <a class="forgot_pass" href="/member/totalrecall">Забыли пароль?</a> </div> <div class="rg_for_input"> <em id="auth_msg" class="reg_error"></em> <input id="lf_typeauthid" value="email" type="hidden"> <input type="submit" class="button button-red logreg_submit" id="js_loginFormBut" value="Войти"> <!--</a>--> <div class="loading loading-cover" style="display: none;"><div class="loader"></div></div> </div> {#/if} {#if $P.login_register_tab == 2} <div class="rg_for_input"> <span class="rg_text_inner">E-mail</span> <input id="arfemail" class="js_keydown_selector rg_input_text" name="" type="text" data-js_submit="yes" data-js_action="js_regFormBut"/> </div> <div class="rg_for_input rg_set_lineh rg_for_input_wide"> <label class="js_tap_panel_checkbox"> <span class="chk"><input name="" id='js_tap_panel_checkbox_terms' type="checkbox" data-js_submit="yes" /></span> Я ознакомился и согласен с <a class="link_txd logreg_accLink" href="/faq/vereinbarung.html">условиями сервиса Subscribe.ru</a> </label> <br /> <label class="js_tap_panel_checkbox"> <span class="chk"><input name="" id='js_tap_panel_checkbox_personal' type="checkbox" data-js_submit="yes" /></span> Нажимая на кнопку "Готово!", я даю <a class="link_txd logreg_accLink" href="/faq/persverordnung.html">согласие на обработку персональных данных</a> </label> </div> {* <div style="float: left;position: absolute;left: 11em;"> <img src="http://www.kupivip.ru/images/vip/logo.png?1604" style="width: 86px; vertical-align: middle;display: block;"> </div> <div class="rg_for_input rg_set_lineh"> <label class="js_tap_panel_checkbox"><input name="" id="js_tap_panel_checkbox_kupivip" type="checkbox" data-js_submit="yes"> Я хочу получать новости о скидках на одежду</label> </div> *} <div class="rg_for_input"> <em id="reg_msg" class="reg_error rg_for_input_wide"></em> <em id="reg_msg2" class="reg_error rg_for_input_wide"></em> <input id="rf_typeauthid" value="email" type="hidden"> <a class="button button-red logreg_submit" id="js_regFormBut" href="#">Готово!</a> <div class="loading loading-cover" style="display: none;"><div class="loader"></div></div> </div> {#/if} </div> {#/template js_tmpl_auth_reg_action} {#template js_tmpl_auth_reg_agree} <div class="rg_for_input rg_set_lineh rg_for_input_wide"> <label class="js_tap_panel_checkbox"> <span class="chk"><input name="" id='js_tap_panel_checkbox_terms_reg' type="checkbox" data-js_submit="yes" /></span> Я ознакомился и согласен с <a class="link_txd logreg_accLink" href="/faq/vereinbarung.html">условиями сервиса Subscribe.ru</a></label> <em id="reg_msg_soc" class="reg_error rg_for_input_wide"></em> </div> {#/template js_tmpl_auth_reg_agree} {#template js_tmpl_auth_reg_button} <div class="rg_butons_socials"> {#if $P.login_register_tab == 1} <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="auth_email" href="#"><span><i></i>Email</span></a> <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="auth_openid" href="#"><span><i></i>OpenID</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="auth_vkontakte" href="#"><span><i></i>Вконтакте</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="auth_mailru" href="#"><span><i></i>Mail.Ru</span></a> {#/if} {#if $P.login_register_tab == 2} <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="reg_email" href="#"><span><i></i>Email</span></a> <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="reg_openid" href="#"><span><i></i>OpenID</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="reg_vkontakte" href="#"><span><i></i>Вконтакте</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="reg_mailru" href="#"><span><i></i>Mail.Ru</span></a> {#/if} </div> {#/template js_tmpl_auth_reg_button} {#template js_tmpl_auth_reg_descr} {#if $P.login_register_tab == 1} Для оформления подписки на выбранную рассылку, работы с интересующей вас группой или доступа в нужный вам раздел, просим авторизоваться на Subscribe.ru {#/if} {#if $P.login_register_tab == 2} Для регистрации укажите ваш e-mail адрес. Адрес должен быть действующим, на него сразу после регистрации будет отправлено письмо с инструкциями и кодом подтверждения. {#/if} {#/template js_tmpl_auth_reg_descr} {#template js_tmpl_soc_auth_reg_descr} Или зарегистрируйтесь через социальную сеть. {#/template js_tmpl_soc_auth_reg_descr} {#template js_tmpl_auth_reg_soc} <div class="rg_soc"> {#if $P.login_register_tab == 1} <a onclick="return _checkSocConfirm(event)" href="https://oauth.vk.com/authorize?client_id=3954260&scope=wall,offline,photos,groups,video,audio,email&redirect_uri={location.protocol+'//'+location.host}/member/login/vk/&response_type=code&v=5.15" class="login_register_vk_button"> <span class="login_register_vk_icon"></span> </a> {#/if} {#if $P.login_register_tab == 2} <a onclick="return _checkSocConfirm(event)" href="https://oauth.vk.com/authorize?client_id=3954260&scope=wall,offline,photos,groups,video,audio,email&redirect_uri={location.protocol+'//'+location.host}/member/join/vk&response_type=code&v=5.15" class="login_register_vk_button"> <span class="login_register_vk_icon"></span> </a> {#/if} </div> {#/template js_tmpl_auth_reg_soc}

{#template MAIN} <div id="loginForm" style="display:none;" class="subscriberu_popup"> <div class="popup_register"> {#include js_tmpl_auth_reg_tab} <dl class="rg_block_options"> <dt id="js_tap_panel_auth"> <p class="rg_description">{#include js_tmpl_auth_reg_descr}</p> <div class="clr"> </div> {#include js_tmpl_auth_reg_action} <div class="clr"> </div> </dt> </dl> </div> <!-- <div class="gray_bg register_shadow"></div> --> </div> {#/template MAIN} {#template js_tmpl_auth_reg_tab} <ul class="rg_nav"> <li id="js_tab_reg" class="rg_active_nav rg_first_nav"><a href="" onclick="return false;" >Регистрация</a></li> </ul> <span onclick="hidebo();" class="rg_closed"> </span> {#/template js_tmpl_auth_reg_tab} {#template js_tmpl_auth_reg_descr} <strong>Пожалуйста, подтвердите ваш адрес.</strong><br><br>Вам отправлено письмо для подтверждения вашего адреса {$P.register_confirm_mail}.<br>Для подтверждения адреса перейдите по ссылке из этого письма. {#/template js_tmpl_auth_reg_descr} {#template js_tmpl_auth_reg_action} <div class="rg_forms confirm_code_from_letter"> <div class="rg_for_input"> <span class="rg_inp_descr" style="width:15em;">Или введите код из письма:</span> <input type="text" value="" id="confirm_code" name="" data-js_submit="yes" data-js_action="js_confirmFormBut" class="js_keydown_selector rg_input_text_conf" > </div> <div class="rg_for_input"><label>Не пришло письмо? <b>Пожалуйста, проверьте папку Спам</b><br /> (папку для нежелательной почты).</label><br />  <a href="" onclick="ajax_recall_code();return false" >Вышлите мне письмо еще раз!</a></div> <div class="rg_for_input"> <em class="reg_error" id="confirm_msg"></em> <a href="#" class="button button-red" id="js_confirmFormBut">Готово</a> <div class="loading loading-cover" style="display: none;"><div class="loader"></div></div> <br> </div> </div> {#/template js_tmpl_auth_reg_action}