Кнопочная навигация
Автор: Ярослав Бирзул \ Опубликовано 01 октября 2007 года в категории Полезные заметки \
Доброго времени суток, уважаемые господа и дамы, пожалуй начнем. О чем, собственно, эта запись?
Не много не мало — а о том, как все же предпочтительно расположить навигационные кнопки на вашем сайте. Предпочтительность определяется многими факторами, о которых я и хочу поговорить.
Итак еще раз — все мы часто видим кнопки на сайтах или программах . Каждый божий день пользователь ПК давит виртуальных микробов курсором своей мышки на разнообразных кнопках. Другой вопрос — задумывались ли вы — как же всё таки правильно (с разнообразных точек зрения) использовать данный элемент навигации.
Этап первый. Лингвистический.
Так уж повелось, что пишу я для читателей, которые находятся в евразии, поэтому нужды объяснять как мы читаем не вижу. Хотя думаю стоит напомнить. Читаем мы с лева на право. При этом сверху вниз. Итак — краткий экскурс для особо задорных и умных мы прошли, а теперь приступим.
Так уж повелось издавна, что направление «право» — автоматически преобразуется для нашего мозга в слово «следующий». Вспомните как вы читали книгу. Чтобы перейти на следующую страницу — куда вы смотрите? Вот-вот.
Аналогии я думаю ясны, а для тех кто не понял — поясню. Не стоит кнопки, которые приводят к следующему этапу в вашей программе, вашем сайте — ставить слева (напомню - не стоит). Разумеется если же вы не садист, и не хотите, чтобы у посетителей слетели остатки сознания.
Этап второй. Психологический.
Мне страшно об этом подумать, но я пишу о психологии… Брр… Простите, но без неё в создании хорошего интерфейса к сожалению не обойтись.
Давайте посмотрим — в чем же психология повлияла на то — как и куда ставить разнообразные кнопки. Для того, чтобы понять мою мысль — достаточно выйти на улицу и взглянуть на указатели. Вышли вы на тротуар, и видите ряд деревьев и столбов. По какую сторону они находятся? Верно — по правую. На чем висят указатели улиц, магазинов и т.п.? Правильно — на столбах. А теперь представьте, что бы было, если бы указатели улиц находились через дорогу — слева от вас? Неудобно, не правда ли?
К чему я веду? К тому — что изначально нам на подсознательном уровне заложена некая предустановка (язык не поворачивается назвать это «программой»), что важные элементы в навигации располагаются именно там — где им и место — справа от нас.
Этап третий. Исторический.
Это самая короткая заметка из всех трех. Она довольно проста и понятна. За всю историю интерфейсостроения (боже мой!) я не встречал удачной «навигации наоборот». Исключение составит разве что Хабрахабр. Но данное исключение лишь подтверждает правило.
Примеры.Дабы не быть голословным — я покажу примеры. Удачные, красивые, и не очень. Контраста ради.
1. Далеко в путь не убежал. Взглянул на страницу редактирования этой записи. Скриншот ниже. (прекрасный пример)
2. Следующий этап я заметил, когда вырезал из браузера предыдущую картинку. Это Adobe Photoshop. (хороший пример)
3. Третий этап ознаменовался, когда я взглянул на то, с помощью чего я пишу эти строки — это браузер. В моем случае это Safari от Apple. (хороший пример, но неявный некоторым. Пиптик справа - кнопка “отправки”)
4. И напоследок — пресловутая навигация Хабрахабра по страницам. От неё кипит мозг и дрожат руки. Смотрите ниже. (неоднозначный пример - вроде бы и удобно, но в то же время довольно непривычно)
Вывод заметки
Элементы навигации предполагающие переход на следующий этап - находятся справа





Сергей Чаботько
Миша Квакин
Футуриус
Точка с запятой;
Guicci
Просто Tyomma
Юрий Дибров
WebMolot
Чернев
Юрий Ветров
Идеальная регистрация | О юзабилити веб интерфейсов пишет нам 24 ноября, 2007 в 3:53
[...] над тем, что написать. Выбирал между продолжением для кнопочной навигации, написанной ранее, рецензией на навигацию одного [...]
Идеальные формы | О юзабилити веб интерфейсов пишет нам 29 ноября, 2007 в 1:07
[...] что элементы интерфейса приводящие к следующему шагу должны находится справа, следовательно кнопку мы тоже должны поместить туда, [...]
Функциональность кнопок | О юзабилити веб интерфейсов пишет нам 8 декабря, 2007 в 4:49
[...] - там ей самое место, если судить по моих словам о кнопочной навигации. Я считаю, что если кнопка располагается справа от [...]
GriZone пишет нам 8 декабря, 2007 в 6:50
С чего у вас начинается навигация по файлам и каталогам на своем компютере? у меня с иконки “мой компютер” в ЛЕВОМ верхнем углу монитора.
Недавно у знакомых увидел - вернее не увидел этого значка на своем “привычном месте”, она оказалась в левом верхнем углу, ноя долго искал его … о_О спросил почему так? Ответили: мы решили сломать стереотипы - у всех значек справа а у нас слева…
Ярослав Бирзул пишет нам 8 декабря, 2007 в 9:21
Странно… у меня тоже слева значек. А работа с файлами у меня обычно начинается с (Windows - Компьютер) это в Висте. Так быстрее, чем переключатся на рабочий стол и заходить оттуда.
Paxa пишет нам 28 декабря, 2007 в 12:23
несогласен с пунктом 4. Мне кажется это отличной реализацией идеи. не нужно думать над номерами страниц, когда в голове толькочто прочитаный текст. Насчет сафари: в других браузерах её нет ( ые не всчет ) она и не требуется. а если ктото в сафари её обнаружил то молодец :)
я когда разрабатываю интерфейсы, чаще думаю об удобстве постоянного использования а не о об обучение интерфейсам
Ярослав Патрикеев пишет нам 28 декабря, 2007 в 8:53
Ярик, статья приятная, хоть и небольшая. Тебе, как мне кажется, стоит задуматься над тем, что в статье есть вступление, основная часть и заключение. Ты попятался их сделать, но до конца не удалось.
А еще, поработай над орфографией. Точнее, над пунктуацией. Приятно видеть, что ты ставишь тире, но ты с ним явно перебарщиваешь — ставишь его не там! Будь внимательнее, это важная часть дизайнерского этикета.
А ваще клево — у нас всего год разницы, но ты опережаешь меня на голову… Ты большой молодец.
Ярослав Бирзул пишет нам 28 декабря, 2007 в 9:07
Ярослав, это не статья, это блоггерская заметка.
Да, я знаю что у меня пунктуация хромает. Работаю над этим.
Антон Сотков пишет нам 12 января, 2008 в 11:22
«Пиптик справа - кнопка “отправки”» — посмотрите внимательнее, это всего лишь стандартная для системы о том, что ширину полей можно изменять, и никакой клик по «пиптику» не заставит браузер отправиться на страницу, адрес которой вы написали. Только клавиша «Return».
Ярослав Бирзул пишет нам 12 января, 2008 в 12:33
Антон, MacOS X 10.4 Safari 3 - кнопка отправки :) может у меня что-то не так? )
«Точка с запятой». Блог дизайнера и копирайтера. Идея для бизнеса: «Радио-джам» пишет нам 8 марта, 2008 в 9:19
[...] СНГ-шным блоггерам желаю остаться на родине и не ехать в [...]
zencd пишет нам 21 марта, 2008 в 7:07
Хабрахабр, этот «прекрасный пример» сдулся — кнопки уже слева ;-))
(( http://habrahabr.ru/topic/add/ ))
Ярослав Бирзул пишет нам 21 марта, 2008 в 4:47
А причем тут “Добавление топика”? Речь шла о навигации по страницам внизу.
zencd пишет нам 21 марта, 2008 в 7:00
Сорри, перепутал первый (вордпрессовый) скриншот с формой созданий топика на Хабре. Но всё равно - на Х кнопки слева! :-)