Это уже второй подобный праздник, который ваш покорный слуга проводит вместе с вами. Уже сегодня неоднократно будут подняты бокалы за моё здоровье, богатство и прочее-прочее-прочее.

Поднимите и вы за меня — приглашаю вас разделить мою радость.

PS: открытки, стихи и прочие произведения искусства только приветствуются :)
PPS: я же, в свою очередь, поздравляю вас с наступающим Новым Годом и хочу пожелать, чтобы всё самое лучшее в предыдущих годах — в следующем году было для вас самым худшим! А также, чтобы все желания офигели от ваших возможностей :)

В этот день совершенно тихонько сменилась главная страница (страница отправки заявки уехала по постоянному адресу, а на её место пришла страница рецензий). На её месте появилась рецензия. И о чудо — читатели сами нашли рецензию и в работу вступило сарафанное радио.

Как оказалось — волновался я совершенно напрасно! Все читатели были в восторге от первой рецензии. Уже появилось несколько фидбеков от блоггеров и благодарность от человека, которого мы рецензировали. Поразмыслив я решил всё-таки понемногу открыть карты и пригласить в Ценз всех желающих. Именно поэтому вы читаете эту заметку. В добавок — я клятвенно обещал, что освещу личности цензоров ровно через месяц. Ну что же. Придется открыть своё инкогнито и секретные личности других цензоров. Ведь я обещал, что это будут известные и уважаемые деятели в области юзабилити — и я своё слово сдержал.

Цензоры

	Ярослав Бирзул Совладелец небольшой компании Paralab, которая специализируется на графическом дизайне. В частности, на брендинге и юзабилити. Работаю в этой сфере с 2005 года и, как мне кажется, довольно успешно. Специализируюсь на визуализации интерфейсов, проектировании и прототипировании. Работаю над аудитом и созданием механики интерфейсов и его взаимодействием с Персонажами. Очень интересуюсь инженерной психологией и граничащими с ней науками. Часто работаю вместе с крупными юзабилити-компаниями. Член ассоциации юзабилистов RusCHI. Поддерживаю дружеские отношения со многими из коллег. Компания: Paralab GmbH Блог: О юзабилити веб интерфейсов Портфолио Твиттер: DezmASter МойКруг
	Александр Сергеев Алекс — основатель и совладелец известной в СНГ компании HumanoIT Group. А также создатель блога Guicci.ru и его основной автор. Профессия Алекса — специалист по инженерной психологии, юзабилити. Специализируется на проектировании механики и прототипировании больших (и не очень) сайтов, при этом делает это очень хорошо. Мы часто работаем вместе над большими (и, опять же, не очень) проектами. Член ассоциации юзабилистов RusCHI. Поддерживаем очень теплые, дружеские отношения несмотря на то, что находимся в разных странах. Компания: HumanoIT Group Блог: Guicci Портфолио МойКруг
	Юрий Ветров Юра — основатель и совладелец UI Modeling, хорошо известной в наших кругах компании. Также его можно знать по личному блогу jvetrau.com. Юра профессиональный аналитик и не менее профессиональный юзабилист. Специализируется на анализе, проектировании и прототипировании. Вместе, к сожалению, не работали (думаю, что мы еще успеем это исправить), но знакомы довольно давно и имеем теплые отношения. Компания: UI Modeling Блог: Проектирование интерфейсов Портфолио Твиттер: Jvetrau МойКруг
	Алишер Якупов Большинство посетителей Ценза и моего сайта явно знакомы с сайтом Хабрахабр и деятельностью компании Футурико. Так вот, раньше Алишер был проектировщиком и дизайнером в этой компании. Сейчас он заслуженный юзабилист, имел свой популярный блог alisher.info, но с недавнего времени полностью перешел в твиттер. Работает в компании Яндекс над улучшением проекта МойКруг. Специализируется на визуальной составляющей интерфейсов и проектировании взаимодействия. После его прихода МойКруг становится явно лучше, и это еще не конец. По крайней мере, я на это надеюсь, что становится. Знакомы относительно недавно, но поддерживаем очень хорошие отношения. Компания: Яндекс Твиттер: Alisher МойКруг
	Роман Настенко Рома — «чистокровный» фрилансер, т.е. работает исключительно на заказ других компаний и над собственными проектами. Приобрел неплохую известность благодаря блогу Перфектомания и скандалу на Хабрахабре (IgrOK). Работает в сфере юзабилити относительно недавно, но за это время успел проанализировать более пятидесяти проектов на коммерческой основе. Специализируется, в большинстве своём, на аналитике, проектировании и прототипировании. Работали (и сейчас работаем) вместе над несколькими проектами и поддерживаем с ним хорошие отношения. Компания: Perfectomania Блог: Блог — Перфектомания Рекомендации Твиттер: igrOK МойКруг
	Николай Шахматов По-большому счету, Николай — мой бывший учитель. Именно он наставлял меня в процессе работы на путь истинный. Да и сейчас иногда наставляет в некоторых моментах, в которых я теряюсь. Хоть его основная специальность и не связана с юзабилити, он JavaScript-программист, но в удобстве сайтов он разбирается и ориентируется очень хорошо — дает дельные замечания, а главное — советы. Именно за способность кратко и четко сформулировать свои мысли я его очень уважаю. В юзабилити специализируется на визуальной составляющей интерфейсов. Вместе работали над многими проектами (личными в том числе), в частности, над Lampochek.net. Знакомы давно и тесно, поддерживаем дружеские отношения. Компания: Scartel Твиттер: theOnlyBoy LinkedIN
	Ярослав Патрикеев Ярослав также «чистокровный» фрилансер и работает по заказу. Очень хороший специалист в области типографики и проектирования. Также немало знает о шрифтовой работе и юзабилити в целом. Часто друг друга консультируем по разнообразным профессиональным вопросам, но вместе над общими проектами пока не работали. Познакомились с ним благодаря моему сайту и поддерживаем теплые отношения. Блог: Дизайн и типографика Твиттер: yaroslavpat МойКруг

Я могу сказать, что Цензу предстоит еще очень много работы. Нужно запрограммировать визуально-текстовое отображение рецензии, чтобы избежать текстового полотна — как это, увы, сделано сейчас. У кого будет свободное время ближе к новому году и желание помочь добрым делом — велкам. Торжественно клянемся холить и лелеять. Если же таковых не найдется то придется немного подождать. Всё-таки эта часть Ценза очень затратна по деньгам, времени и труду.

Я также знаю, что нам еще нужно работать (вылизывать, вычесывать, напильником допиливать, динамитом рушить) некоторые моменты самого сервиса. Вывод рецензии, к примеру, правила и условия сервиса, другие моменты.

На данный момент мы имеем большой кусок пластелина, из которого, с вашей помощью, через несколько рецензий мы вместе вылепим красивого орла. Присылайте заявки (интересные сайты обязательно попадут в Ценз), пишите фидбеки здесь и в своих блогах. Знайте — мы всё читаем и прислушиваемся к мнению читателей.

В общем — с почином нас, и в добрый путь. Надеюсь, что вы пожелаете нам того же.

PS: позравляю счастливчика CurlyBrace с рецензией на свой сайт http://www.webmakerslounge.com/.

Хотелось бы сразу предупредить: суть статьи будет исключительно теоретической, но на практических примерах. Речь пойдет о некой эфемерной, но вполне себе важной составляющей каждого сайта, которую не каждый человек замечает, если она реализована хорошо.

Однако если эта эфемерность реализована плохо — держите стулья, господа, ураган пришел.

Для начала стоит выяснить, что же подразумевается под словосочетанием «область реагирования». То, что не эрогенные зоны — мы уже выяснили, но ведь нужно и честь знать.

Область реагирования — это область в интерфейсе, которая в ответ на какое-либо действие пользователя предлагает ему какой-либо результат.

Довольно размыто, не так ли?

Попробуем уточнить. Для улучшения понимания взгляните на иллюстрацию ниже.

Думаю, что всем известно одно известное правило: «ничего не должно происходить без действия пользователя». Верно и обратное: «любое важное действие пользователя, должно вызывать реакцию интерфейса».

Это правило выведено именно для того, чтобы интерфейс не мог напугать человека. Ведь если интерфейс никак не реагирует на рабочие действия пользователя — этот самый пользователь подумает, что интерфейс системы сломан. Или он решит, что допустил ошибку во время работы с сайтом. А ведь этот путь ведет к потере клиента, что, скажем, для интернет-магазина весьма критично.

Всё в интерфейсе должно реагировать только благодаря пользователю, но без него должно тихонечко молчать, и не выпендриваться. В общем — правило «сферического коня в вакууме» тут не работает. К сожалению.

С теорией, я надеюсь, немного прояснили. Поэтому теперь стоит пройтись по примерам областей реагирования, чтобы закрепить еще и практикой.

1. Логотип. Встречается данный тип областей реагирования наиболее часто, т.к. количество этих самых логотипов стремится приблизиться к количеству сайтов и интерфейсов. Чаще всего областью реагирования логотипа является прямоугольник, отрезанный и сверстанный точно по краям логотипа.Это не очень хорошо, т.к. при небольших логотипах приходится целиться. Поэтому рекомендую к этому прямоугольнику прибавить по 5-10 пикселей с каждой стороны, и тогда всё будет в самый раз. И логотип не большой (это здорово), и область реагирования не заставляет пользователей получать снайперскую профессию.
   
2. Меню. Не менее важный элемент, чем логотип. А для навигации и удобства путешествия по сайту так и более важный. Очень часто меню состоит из графики и текста, но реагирует только текст, что меня всегда ужасно раздражало. Если меню подчеркнуто графически, то и реагировать должен не только текст, но весь графически-текстовый блок. И тогда всё будет замечательно.Если же меню целиком текстовое — реагировать должен текст, но область реагирования стоит делать несколько больше, чем область текста ограниченная html.
   
3. Текстовые ссылки. В отношении ссылок нужно на время обуздать свое желание «всюду немного увеличить область реагирования». Текстовые ссылки на то и текстовые, что находятся внутри большого массива информации.И делать область реагирования, которая будет наложена уже не только на ссылку — плохой тон. Поэтому текстовая ссылка, которая написана непосредственно в тексте, должна иметь область реагирования, обозначенную сугубо начертанием текста и не более.
   
4. Вкладки. Также очень часто встречающаяся деталь интерфейса. В последнее время в вкладки стало модно прятать не самую полезную информацию с целью экономии места, и для того, чтобы пользователь не отвлекался от главного — контента.Лучше всего областью реагирования вкладок делать не маленький кусочек очерченный текстом, а весь размер вкладки по ширине и высоте. Тогда пользователь уж точно не промахнется, и будет вам благодарен.
   
5. Поля ввода текста. В этом случае мы опять должны ненадолго отдохнуть от «мании увеличивания областей», т.к. лучшей областью реагированию поля является оно само. При этом, я подчеркиваю, что делать поле в каком-то не стандартном виде с кучей эффектов, градиентов и т.п. мишуры — глупо.JavaScript тоже не всесилен, и уж точно не кросс-браузерен (да, есть специальные фреймворки, но результат того не стоит. Поверьте).
   
6. Чекбокс и радиобаттон. Тут стоит рассмотреть два случая употребления чекбоксов и отметкок. Первый: если они расположены «одни, совсем одни», то область реагирования стоит увеличить на 3-4 пикселя. Т.к. сами эти элементы довольно малы — увеличение области позволит избежать превращения пользователя в снайпера, особенно на больших разрешениях экрана.Второй: если они расположены рядом с текстом, который относится непосредственно к ним. Например часто встречается фраза: «вы соглашаетесь с правилами, и вашу душу заберет дьявол». В таком случае областью лучше всего делать сам чекбокс и текст рядом с ним. Не буду повторяться про снайперов.
   
7. Кнопка. И опять нас поджидают два кардинально разных случая. Первый: если вид кнопки отличается от внешнего вида кнопок из операционной системы (графическая кнопка), тогда область стоит увеличить на 3-4 пикселя.Если же кнопка имеет вполне себе стандартный вид, и реализована стандартным образом — тогда область реагирования увеличивать не стоит, потому, как тут вступает в действие сила привычки.
   
8. Форма выбора файла. Её частенько можно видеть на файловых хостингах, специализированных сервисах по хранению файлов, а также на любом форуме, в который нужно загрузить свою аватару и фотографию. Зачастую выбор файла происходит не только при нажатии на кнопку «Обзор», но и при нажатии на поле.Это не очень хорошо, т.к. ограничивает свободу действий пользователей. Разумеется, он обидится, т.к. это решение не даст ему возможности вручную отредактировать путь до файла. Я знаю, что это встречается не часто, но всё-же случается, поэтому лучше избежать негативных эмоций.
   

Теперь, когда мы определились с определением и закрепили это знание практическими примерами стоит рассмотреть также и предполагаемые реакции на некоторые из главных действий. Например: «при наведении», «при нажатии».

Реакции

1. Логотип. Этому элементу положено быть сугубо статическим в большинстве случаев. Это значит, что реагировать на наведение мышки он не должен, но начертание курсора (рука) обязательно должно появлятся. При нажатии в большинстве случаев стоит перенаправлять пользователя на главную страницу сайта.В обратных случаях дизайнеру стоит действовать по собственному усмотрению, т.к. если бы я расписывал все гипотетические ситуации — об этом можно было бы написать очень большую неинтересную книгу.
2. Меню. Чаще всего лучше делать не статичное меню. Обычно в нем находится до десяти пунктов, а это превышает наш внутримозговой «буфер обмена», который может разделить до 7 пунктов к ряду. Следовательно — при наведении пункт должен быть подсвечен.Если меню графическое — то подсвечиваться должна графика. Если текстовое — то текст, и, по желанию, простая подсветка фона. Как должно действовать меню при нажатии, я думаю, объяснять нет нужды.
3. Текстовые ссылки. Обязательно должны реагировать на наведение. Когда я вижу ссылку, которая не выдает никакой реакции мне сразу же приходит на ум аналогия с молчаливым флиртом: не понятно, что происходит и работает ли.Если ссылка подчеркнута (а она должна быть подчеркнута, если находится в тексте), то стоит менять сам цвет ссылки, не убирая подчеркивания. Однако само подчеркивание при наведении не критично, и зависит от дизайна и решения дизайнера.
4. Вкладки. Ситуация та же, что и с меню. Если количество вкладок привышает 7, то стоит задавать какую-либо реакцию при наведении. Чаще всего используется графическая «подсветка» пункта.Теперь, внимание: при нажатии содержимое вкладки стоит подгружать мгновенно (или, на худой конец, аяксом его, аяксом!), а не с перезагрузкой страницы, как это любят делать некоторые разработчики. Делается это для того, чтобы не обманывать ожидания пользователя, который привык к мгновенной загрузке вкладок в операционной системе.
5. Поля. При наведении лучше всего совсем немного увеличивать насыщенность цвета «окантовки» поля. При нажатии же нужно просто и без проблем давать пользователю ввести текст, и не мучать его эффектами, как это иногда любят делать некоторые дизайнеры.
6. Чекбокс и радиобаттон. Реакции при наведении уже должны быть заложены в операционную систему, которая эти элементы и прорисовывает, поэтому с этим проще. С реакцией при нажатии тоже нетрудно — оба этих элемента должны стать «отмеченными».
7. Кнопка. Никаких кардинальных сюрпризов. Если кнопка сделана графически, при наведении желательно менять её цвет, или подсвечивать любым другим образом.Если же кнопка сделана через стандартные html-средства, то и делать ничего не нужно — ваша ОС сделает всё за вас. Действия «При нажатии» описать весьма трудно, т.к. кнопки употребляются в кардинально разных случаях.
8. Форма выбора файла. Тут тоже всё довольно просто. Т.к. мы выяснили, что реагировать должна именно кнопка — она чаще всего сделана через стандартную форму выбора в html.Соответственно действия при наведении заложены в вашей операционной системе. А вот при нажатии обязательно должно открываться диалоговое окно выбора файла и ничего более.

В заключение хотелось бы попросить вас с ответственностью отнестись к хоть и эфемерному, но от этого не менее важному элементу каждого интерфейса. Зачастую, в простейших интерфейсах, именно области реагирования задают львиную долю удовольствия во время работы с интерфейсом.

Поэтому ей всё же стоит уделять некоторое внимание при разработке дизайна. С недавнего времени я в каждой новой работе делаю дополнительный слой, который подсвечивает области реагирования интерфейса, и это здорово облегчает общение с html-верстальщиками.

Тем временем

1. Миша Квакин освещает три диалога о рекламе в блогах.

2. Сергей Чаботько пишет о машине для СЕО оптимизации.

3. Юра Гугнин просит распространять полезную статью о финансовом кризисе. Господа, всё хорошо, успокойтесь.

4. Егор Чернев рассказывает об иллюстрациях к статьям.

Так вот, господа. Обводите этот день в календаре, ибо сегодня, 17 ноября, этот сервис успешно и с помпой стартовал.

На данный момент на сайте вы можете ознакомится с правилами, и условиями сервиса, почитать о нем несколько  слов и, собственно, самое важное - отправить заявку на рецензию.

Меня, как автора этого проекта, постоянно спрашивают мнения и совета по различным решениям в сфере веб интерфейсов, дизайна, юзабилити. Всем интересно:

— Удобна ли эта форма?

— Хороший ли дизайн у этого сайта? И если плохой, то «Почему?».

Так вот, Ценз — сервис, который облегчает задачу и мне, и людям, которым требуется мой совет. Он убивает двух зайцев сразу: мне дает возможность удобно, и публично аргументировать своё мнение касательно той или иной работы, а пользователям — быстро и просто получить мой ответ, или ответ другого цензора, в удобной графической-текстовой форме. И это круто.

Для того, чтобы отправить свою (или чужую) работу на ценз достаточно заполнить простую форму.

При этом вы должны понимать, что отправив свою работу не обязательно увидите её на этом сайте, ведь конкуренция большая, а автор, и цензоры явно не железные кабанчики.

Перед отправкой обязательно убедитесь в том, что ознакомлены с правилами сервиса (они совсем не скучные), и условия рецензирования (а эти даже веселые).

Имена цензоров (их будет 6, кроме меня) будут объявлены 17 декабря, во время начала публикации первых рецензий. Будьте уверены, что это будут достойные и уважаемые дизайнеры-юзабилисты, которых вы все знаете.

Перейти в ценз.

Ждем ваших заявок!

Здраво рассудив, что качество важнее количества я уменьшил скорость написания, и стал дольше обдумывать тексты. Статьи стали больше, обширнее, но появляться стали реже. Как оказалось, это был очень хороший шаг. Количество читателей, и комментариев возросло, а дискуссии стали еще более объемными и аргументироваными.

Никто и предположить не мог, что за год блог добьется таких успехов, соберет постоянную, очень большую аудиторию читателей. В большинстве своём она состоит из хороших, адекватных людей, которые знают, чего хотят, и умеют этого добиваться.

Весь год я работал над своей письменной грамотностью (были проблемы с орфографией и пунктуацией), шлифовал формат статей, которые публикуются на этом ресурсе, изменил дизайн, функционал. Для пущего удобства создал кросс-посты для популярных блоговых площадок: LiveJournal, Blog.ru, МойКруг.

Создал профайлы на Карте Блогов, TooDoo, которые, к сожалению, сейчас медленно чахнут.

После этого я создал аккаунт на твиттере, для общения с пользователями и знакомыми людьми, что опять дало толчок к развитию. Не верьте тем, кто говорит, что твиттер это пустая трата времени. Нет! На самом деле всё зависит от аудитории, которую вы отслеживаете. Чаще всего это дает возможность познакомиться с интересными людьми.

К счастью, это не конец развитию этого ресурса. Возможно, в скором времени дизайн обновится опять (не сильно, но концептуально). Можно назвать это шлифовкой некоторых моментов.

Также я бы хотел перечислить то, что появится здесь в обязательном порядке и в скором времени:

1. Ценз. Это небольшой, и относительно простой сервис по рецензированию дизайна. Суть заключается в кратком перечислении недостатков на картинке, и развернутое пояснение под картинкой. При этом в Цензе будут указаны не просто ошибки, но и детальное пояснение как их исправить. То есть сервис не сможет превратится в бяку. По сути, этот сайт будет отдельным продуктом, но в рамках блога. Правила и условия опубликуются заранее, чтобы желающие получить рецензию на свой дизайн могли отправить мне его ещё до открытия сервиса.
2. Проверочный лист юзабилити (юзабилити-чеклист). Отдельная страница, на которой будут перечислены все моменты, которые нужно учитывать перед сдачей макета клиенту. По сути, там будут перечислены основные ошибки дизайнеров, которые и влияют на пользовательское мнение. Пройдясь по этому списку, дизайнеры не допустят досадных ошибок в форматировании текста, расположении блоков, сетке.
3. Наконец появятся страницы ошибок (404, 403, и другие).
4. До неприличия увеличится количество кросс-постов на другие блоговые площадки. В частности на LiveInternet, BlogSpot, VOX, Mail.ru|Блоги, Я.ру, и другие. Всё ради удобства их посетителей.
5. Нормальная навигация по страницам, а не этот франкештейн от создателей WordPress.
6. Страница с личными друзьями, и людьми, которых я уважаю за профессиональность и отзывчивость. Страница будет создана по аналогии с друзьями-компаниями.

Теперь, как я и обещал, краткая статистика того, чего этот сайт (и я вместе с ним) добился за год.

Статистика

Количество читателей

1. RSS-подписчики — 1500+.
2. Количество комментариев — только что перевалило за 1400.
3. Посещаемость: 250-300 человек в день.
4. Костяк аудитории: 40% от общей суммы посетителей (1800 человек). Каждый день к ней аудитории приростает 4 человека.
5. Среднее время нахождения на сайте: 7 минут.
6. Каждый посетитель в среднем просматривает 8 страниц.

Местонахождение читателей

1. Россия — 62%
2. Украина — 19%
3. Беларусь — 6%
4. Израиль — 2%
5. Молдавия, Казахстан, США, Германия, Литва и Латвия имеют по 1%.

Браузеры

1. Firefox — 52%
2. Opera — 23%
3. Internet Explorer — 10% (IE6 — 3%)
4. Chrome — 7%
5. Safari — 6%

Операционные истемы

1. Windows — 92%
2. Mac — 5%
3. Linux —3%

Разрешение экрана (в пикселях)

1. 1280 на 1024 — 37%
2. 1280 на 800 — 16%
3. 1024 на 768 — 13%
4. 1680 на 1050 — 10%
5. 1440 на 900 — 9%

Откуда посетители

1. Прямой набор адреса — 42%
2. WebMolot — 19%
3. Егор Чернев — 9%
4. Perfectomania — 3%
5. Дизайн-фрик, фриланс, Артём Майнас имеют по 2%
6. Остальные, преимущественно пришли через поисковики.

В общем — принимаю поздравления :)

К сожалению, очень немногие люди пытаются сломать стереотипы, и продолжают творить нечто странное под видом навигации по страницам. Сегодня я постараюсь с вашей помощью решить эту ситуацию, чтобы сделать интернет лучше.

Задачи

1. Дать возможность в одно действие переключать страницу.
2. Удобный переход на последнюю и первую страницу.
3. Правильное переключение на следующую и предыдущую страницы.
4. Удобочитаемый вывод списка страниц.
5. Выделение активной страницы.
6. Сделать всё вышеперечисленное по возможности в простом и симпатичном виде.

Решение задач:

Перед началом решения вышесказанных задач нужно определиться с тем, что нам нужно улучшать. Для этого перейдем на сайты, у которых есть навигация по страницам, и этих страниц явно больше 100. Для того, чтобы их найти, достаточно перейти в google и набрать поисковый запрос вида «719 720 721». После этого выбираем наиболее интересные примеры и изучаем их.

Я выбрал в качестве примеров недоработанной навигации по страницам следующие сайты:

1. PhotoUA
Украинское агентство цифровой фотографии создано с целью предоставления цифрового новостного фото.

предоставлять пользователю удобную навигацию, так как страниц много, контента на страницах и того больше. Но, увы, этот сайт может представить только набор ошибок связанный с навигацией: невменяемые стрелочки, невозможность выбрать страницу, активная страница никак не выделяется, и др.

2. EuroLine
Довольно известная грузинская авиакомпания EuroLine предоставляет перелеты в Европу и Азию.

К сожалению, болезнь навигации не обошла и такую крупную компанию: переключение на страницы сделаны неудобно, переход на первую и последнюю страницу вовсе отсутствует, а ссылки на следующие и предыдущие страницы сделан в виде двойных стрелочек. К счастью, активная страница выделена.

3. Пресс-КIT
Украинское независимое агенство, предлагающее широкий спектр информационных, рекламных услуг, и разнообразные возможности фото-службы.

Увы и ах. Опять информационное агенство, которое должно дать возможность быстро путешествовать по страницам сайта, но… не дает. Более или менее интуитивные, стрелочки не позволяют быстро выбрать нужную страницу. Прибавьте к этому слабое выделение текущей страницы и возможности пролистать все сразу.

4. Форум посвященный Гарри Поттеру.
Кому-то может показаться смешным то, что я выбрал в качестве примера этот сайт, но должен вас разочаровать: выбрал я его потому, что он имеет огромное количество страниц.

К сожалению, волшебные сайты не имеют иммунитета от болезни навигации и страдают большим количеством симптомов: не дают возможности интуитивно перейти на следующую\предыдущую страницу. Есть возможность перейти на нужный номер страницы, но, увы, очень корявая эта возможность.

5. Фишки.Нет
Аннотации за ненадобностью тут не будет. Все знают, что это за сайт и с чем его едят.

Этот сайт, по сути — кошмарный сон юзабилиста, но навигация по его страницам дает ему анти-фору еще больше. Судите сами: простой список из страниц. Более идиотского способа вывести почти 900 чисел найти сложно. При этом страницы расположены в шахматном порядке, что, по идее, должно было улучшить навигационные качества, но не улучшает. Активная страница выделяется, но банально теряется среди такого массива информации. Создатели сайта решили не делать ссылки на последнюю\первую страницы и на следующие\предыдущие. Видимо, посчитав их ненужными при возможности быстро (как им казалось) выбрать нужную пользователю страницу.

Итак, с проблемами мы разобрались. Теперь стоит перейти к решению поставленных нами задач.

Дать возможность в одно действие переключать страницу
Под этой фразой я понимаю функцию быстрого выбора нужной страницы в 3 клика и меньше. Т.е. если пользователю нужно найти 761-ю страницу, не нужно его гонять по 10 страниц за раз. Нужно просто дать ему эту страницу выбрать.

Решить эту ситуацию довольно просто: либо выпадающим списком с прокруткой (прокрутка для того, чтобы список был меньше чем 2000px при 1000 страницах), или же перемоткой списка движениями мыши. Тут всё зависит от личных предпочтений дизайнера. Лично я предпочитаю движения курсором. Что я подразумеваю под этим — смотрите на картинку сверху.

Удобный переход на последнюю и первую страницу.
Если пользователь забрел вглубь сайта и хочет вернуться на первую страницу из списка, нужно дать ему способ сделать это быстро. По статистике, это одна из самых часто используемых функций навигации. Единственное ограничение в данном случае состоит в том, чтобы называть вещи своими именами и писать слова «Первая» и «Последняя» словами.

При этом желательно эти ссылки выводить полярно: “Первая” справа, “Последняя”слева .

Также при создании этих ссылок учитывайте, что они не должны забирать внимание у ссылок «Следующая»/«Предыдущая» — ведь они самые важные в навигации по страницам.

Правильное переключение на следующую и предыдущую страницы
Самый важный пункт списка. По статистике, при наблюдении за пользователями, эти ссылки используют чаще всего. Именно поэтому они должны быть довольно большого размера (не огромного, но такого, чтобы пользователю не нужно было прицеливаться). Их не стоит представлять в виде одиночных стрелочек, как это любят делать создатели движков.

Лучше всего совместить с помощью типографического форматирования стрелочку (они есть почти во всех стандартных шрифтах Windows) и надпись. Т.е. вот так: ← Следующая | Предыдущая →

Удобочитаемый вывод списка страниц
Тут всё просто. Не стоит показывать массив из всех страниц сайта сразу. Пример сайта Фишки.Нет ясно показывает нам, что навигация по такому списку — не из легких. Лучше всего выводить 5-7 страниц, которые находятся по соседству.

У некоторых людей существуют трудности с восприятием списка, если в нем находится больше семи элементов, поэтому выводить более семи соседних страниц не стоит.

Выделение активной страницы

Принципы те же, что и для всех остальных ссылок. Чтобы человек быстро понял, где он находится, выделять активную страницу нужно также активно: полужирным начертанием, изменением цвета и, что немаловажно, стоит убирать ссылку с этой цифры. Ведь ссылаться на страницу, на который пользователь уже находится — плохой тон.

Сделать всё вышеперечисленное в простом и симпатичном виде
Под этой фразой я подразумеваю отсутствие сложных графических эффектов, которые отвлекают внимание пользователя, и сложностей программных — глюков. Симпатичность вида каждый определяет для себя сам, но общие принципы еще никто не отменял: каждый элемент должен быть вровень относительно других, иметь размеры пропорциональные своим функциями. Также стоит соблюдать строгую графическую сетку и отступы от элементов.

Результатом этого пункта у меня вышла вот такая вот навигация. Все написанные выше принципы в ней соблюдаются. Практическая реализация и способ решения в скором времени будут опубликованы в блоге Lampochek.Net, где я и еще один человек расскажем вам, как это всё делалось технически.

Немного новостей

1. Информация к прочтению была обновлена. Тем кто еще не читал — читать в обязательном порядке.
2. Была добавлена страница моих компаний-друзей. В скором времени ожидайте такую же, но с конкретными людьми.
3. Я в твиттере. Кто там есть — отслеживайте!

Тем временем

1. Миша Квакин продолжает продвигать свой новый проект — RuBurner.
2. Сергей Чаботько пишет о формах обратной связи для гос. контор.
3. Егор Чернев рассказывает о CSS3 библиотеке Peppy.
4. А также Егор рассказывает о программной реализации постраничной навигации.

Казалось бы – что тут может быть сложного: два поля, кнопка, пару ссылок и, возможно, чекбокс. Но всё не так просто как кажется на первый взгляд.

Существуют довольно жесткие рамки отображения формы входа, а также некоторые моменты, которые просто стоит учитывать, рисуя эту форму. Постараюсь их описать как можно подробнее:

1. Форма входа должна быть видна на первом экране браузера. Т.е. сразу при открытии сайта, без использования полосы прокрутки. При этом нужно учитывать минимальную высоту разрешения мониторов пользователей на момент создания дизайна, а также то, что браузер забирает на себя от 10 до 30% пространства.

2. Нежелательно выводить поля в линию. При выводе полей в столбец пользователь заполняет их практически на автомате – сказывается привычка. Если же выводить поля в линию – психологический паттерн не столь силен.

3. «Размер не имеет значения». Фраза, которая никак не относится к кнопке входа. Она не должна быть расчитана на снайперов. Учитывайте, что сейчас всё большее распространение приобретают мониторы с довольно большим разрешением, на которых маленькие кнопочки выглядят сущим мучением. Но в то, же время не переусердствуйте с размерами.

4. Зачастую кнопка входа лучше всего смотрится, если её ширина совпадает с шириной полей. Хотя это уже зависит напрямую от дизайнера, который и занимается проектировкой формы входа. Данный момент точно не является правилом. Скорее личным предпочтением автора.

5. Поля логина и пароля должны быть одного размера. Установлено, что при поиске формы входа пользователь «сканирует» глазами страницу в поисках двух одинаковых полей, которые находятся в непосредственной близости друг от друга. Поэтому крайне нежелательно располагать также какие-то другие поля ввода.

6. Если вы ограничены в месте – можно перенести надписи «Логин», «Пароль» внутри полей, которые исчезают при клике на них. У этого решения 2 минуса – иногда люди нажимают на поле, а потом отвлекаются. Поэтому пользователи могут быть сбиты с толку. Вторым минусом является то, что не у всех включен Javascript с помощью которого и достигается подобный эффект. Поэтому надписи лучше выводить отдельно от полей.

7. Размеры полей должны быть удобными как для ввода, так и для чтения. Стоит также учитывать отступы от краев поля до текста внутри него. Причем с запасом прочности – не все браузеры одинаково выводят текст внутри поля. Любимый верстателями Internet Explorer вообще любит отступы на завтрак кушать.

8. Ссылки на регистрацию и на восстановление пароля лучше всего выводить напротив каждого из полей соответственно. Т.е. «зарегистрировать» (или «новый») выводим напротив поля логина. А ссылку «забыли пароль?» напротив поля пароля. Всё просто, не так ли?

9. Форма авторизации не должна быть графически пресыщенной в целом. Градиенты внутри поля добавляют мороки не только верстателям, но и пользователям.

10. Выводить форму входа можно на любом месте сайта. Будь-то сверху, справа, слева. В результате тестирования оказалось, что пользователям абсолютно удобен вывод формы авторизации в любом месте на сайте с учетом пунктов 1 и 2 этого списка.

11. На кнопке входа может быть написано всё что угодно. Вплоть до «выход» т.к. пользователи очень редко обращают внимание на надпись. Поэтому и закцикливаться на этом не стоит.

12. Если вход на сайт производится без перезагрузки страницы (AJAX) обязательно нужно показывать то, что информация отправляется и обрабатывается. Лучше всего это достигается с помощью так называемого лоадера. Какой-нибудь зацикленной вертящейся, или бегающей фентифлюшкой. Это повелось уже с наших любимых операционных систем, поэтому не стоит изменять привычке.

13. После входа на сайт информацию о пользователе, ссылки на настройки и прочую информацию из личного профиля лучше всего выводить на месте формы входа т.к. пользователь будет искать её именно там. Особенно если она построена через AJAX.

Не забывайте также и общие положения о пустом пространстве между полями и кнопкой, отступы внутри полей, и снаружи.

PS: Друзья, настоятельно рекомендую тем, кто еще не читал небольшую информацию к прочтению обязательно её прочитать.

PPS: У вас есть твиттер? Тогда вы можете меня читать там же.

Тем временем

1. Миша Квакин пишет о жёлтеньких (именно таких) страницах интернета.

2. Егор Чернев обозревает видео плеер Panda.

3. Guicci ищут программиста в Минске.

4. Сергей Чаботько рассказывает о конкуренции в сфере контекстной рекламы.

А дело в том, что сегодня во всем мире празднуется День Блога (условия акции). Узнал я о нем от товарища Кеноби, для которого мой сайт является одним из примеров очень полезного блога. О чем это я? А дело в том, что по условию акции — нужно выбрать пять интересных для себя блогов. Причем, обязательно, не из своей области, и осветить их в аналогичной заметке.

Итак, моя пятерка будет освещатся ниже, поэтому слабонервным лучше принять викодину.

1. Tod`s Blod. Тод пишет довольно часто — через день. При этому умудряется писать интересно, содержательно, и выдержано касательно своей темы. Хотя иногда попадаются жемчужины вроде статьи о русском царе Павле первом.
2. Cinemma. Так как я довольно положительно отношусь к такому способу вдохновления как кино — этот блог стал для меня сущей находкой. Благодаря ему я не пропускаю выхода новых интересных фильмов. Именно через него получаю последние трейлеры, за что и благодарен создателю. Так держать.
3. Ольга Воропай. Человек с горящим в руках пером (ручкой, карандашем — нужное подчеркнуть). Это блестящий копирайтер, которого я заочно знаю благодаря сайту free-lance.ru, и с удовольствием почитываю ради того, чтобы радовать вас правильной речью в статьях.
4. Стамеска. Это блог о креативной. Но с небольшим отличием от аналогов — этот сайт интересно не только смотреть, но еще и читать. Крайне рекомендую всем, кого не оставляет идейная, красивая реклама, благодаря которой хочется что-то купить.
5. inPic. Это коллективный несовсемблог. Тут совершенно нет текста, зато есть множество идейных изображений. Можно провести параллели со Стамеской, но вы будете не правы. Далеко не все креативные и интересные картинки это реклама. И inPic помогает мне набираться хорошим настроением.

blogday2008

Ура!

PS: эта заметка попала в категорию «Немного слов», как и все остальные, которые совершенно не относятся к предмету юзабилити.

PPS: я специально не описывал очень популярные блоги, и блоги своих друзей, иначе весь замысел Дня Блогов пропадает. Не обижайтесь :)

Тем временем:

1. Миша Квакин диктует своим потенциальным работодателям условия потенциальной же работы.

2. Сергей Чаботько заговорил о… добре?!

3. Егор Чернев описывает способы создания псевдо-3д.

4. Юре Гугнину ну ОЧЕНЬ нужны талантливые маркетологи-продавцы

Далеко не у каждого человека есть возможность долго тестировать дорогую программу (дешевых среди нужных нам редакторов – нет, но есть пару бесплатных) после месячного, а то и полумесячного тестового периода. Взлом и прочее шулерство – не к лицу, и не по адресу.

Рассматривать я буду, конечно, далеко не все подходящие редакторы, но несколько хороших, а главное качественных – рассмотрю, а вы уже выбирайте сами, какой вам больше по душе.
Начать хотелось бы с исконно проектировочных программ – Axure Pro, и MS Expression Blend (не спешите плеваться – программа на высоте).
Итак, поехали.

Axure Pro

Очень мощная программа, которая позволяет не просто проектировать интерфейсы, но и сразу, же переводить их в html, или chm формат для пущего удобства (javascript также широко используется). Т.е. вы водите мышкой в редакторе, а на выходе получаете вполне себе работающий прототип интерфейса, который спланировали ранее. Программа не дешевле остальных участников тестирования, но имеет не меньше возможностей.

Прототипирование в этой программе - легкий процесс благодаря возможности создания диаграмм и простейших сценариев на подобии продуктов Microsoft – Visio и Outlook Express.
Работать с Axure лучше всего на небольших проектах, у которых в наличии большая и компактная функциональность. Также её можно использовать и для больших проектов, но это чревато долгим откликом программы на несильных компьютерах. Для больших же проектов аксурке банально не хватает возможностей: в частности – программирования, и создания баз данных, которые при создании полного прототипа (а не только блочной разметки) определенно нужны.

Конкретно для создания wireframes эта программа использует лишь малую часть своего обширного функционала, поэтому назвать Axure программой для создания блочной разметки – нельзя. Скорее она предназначена для визуализации уже спланированного на бумаге прототипа, но и исключать из списка её тоже нельзя – т.к. инструмент, очень мощный и полезный для юзабилистов.
Стоит Axure на данный момент $589.
Подробнее о работе в этой программе я напишу позже.

MS Expression Blend

Новая линейка графических редакторов от компании Microsoft – Expression определенно радует своей функциональностью и внешним видом. Что примечательно – Microsoft лишь выкупила готовый продукт у небольшой гонконгской компании Creature Housе (и самих Creature House тоже выкупила), а не создала конкурента как она обычно поступает в таких случаях. В нашем случае – хотелось бы осветить программу из комплекса MS Expression – Expression Blend. Эта программа предназначена конкретно для создания wireframes, и прототипирования, поэтому функционально – она определенно лучше Axure (для работы с блочной разметкой, конечно же).

Тут в наличии большая библиотека контролов – разнообразные кнопки, выпадающие списки, поля для ввода текста, radio-кнопки, чеклисты и прочие страшные слова. Удобная работа с wireframes с помощью множества слоев – также в наличии.
Эта программа также заточена под визуальное создание прототипа итогом которому будет html, xaml-анимация, и javascript файлы.
Есть удобные инструменты для работы с простейшими формами – элипсы, точки, линии, и многоугольники остаются неизменными.

Программа вплотную работает с технологией MS Silverlight (конкурент Adobe Flash) без нужды устанавливать MS Visio с его монстроподобным интерфейсом и прочая-прочая. Есть также встроенный JS-редактор.
Еще одним из преимуществ программы является XAML-анимация, которая позволяет экспортировать результаты визуальной работы в html без потери качества. Она же создает для прототипа анимацию кнопок, и других контролов. Каждый XAML-файл могут отредактировать С# или VB программисты вручную, что является определенным плюсом в совместной работе дизайнера и программиста.

Также удобна для работы с шрифтовыми интерфейсами, которые практически не используют графику – множество настроек, и функций помогут настоящим типографам сделать очередную дизайнерскую конфетку.
Программа подходит для проектирования не только веб интерфейсов, но и настольных (десткопных) приложений. Небольших приложений, правда, но…
Результатом работы может быть как статическая картинка, так и работающий html-прототип с silverlight и javascript.

Главным минусом программы является то, что дизайнерам, которые ничерта не смыслят в программировании на XML-подобных языках можно в эту программу даже не соваться, т.к. код редактировать приходится ну очень часто. Либо же им придется работать в тандеме с программистом, который знаком с этой программой и XML-языками. Именно так я и поступаю при предоставлении клиенту работающего прототипа.

Стоит данная программа $575, что довольно ощутимо даже в сравнении с стоимостью Adobe Photoshop CS3 ($1000).

MS Visio

Очень мощный программный комплекс для работы с визуализацией данных. Подойдет далеко не всем дизайнерам – не каждому нужны такие возможности в такой плотной упаковке. В интерфейсе легко можно запутаться. Работа также подобна визуальным редакторам выше, но существуют некоторые ощутимые проблемы. Одна из них – без знаний языка VB Script

туда можно даже не соваться. Я попробовал однажды, и не смог осилить ни монстрообразный интерфейс, ни способы работы с программистом в паре. Остановились мы на программе Expression Blend, как я об этом уже писал выше.

Из плюсов можно выделить:

1. Мощность функций. С помощью этой программы можно спроектировать практически любой сложности интерфейс, как для сайта, так и для десткопной программы.
2. Хороший визуальный редактор.
3. Хороший редактор программирования с подсветкой кода и всем-таким.

Из минусов же:

1. Ужасную производительность программы.
2. Запутанность интерфейса.
3. Сложность работы для простого дизайнера.

Стандартная версия стоит 350 долларов, за профессиональную же придется отдать 750 полновесных зеленых рублей.

Pencil Project

Pencil Project не является программой в полном смысле этого слова. Это расширение для браузера Mozilla Firefox (как 2й так и 3й версии). С помощью этого уникального дополнения можно свободно визуализировать интерфейсы, и проектировать блочную разметку. Самый большой плюс – это абсолютно бесплатно и под удобной лицензией – GPL 2. Также большим плюсом является кроссплатформенность – firefox создается под большинство популярных платформ – Windows, Mac, Linux.

Интерфейс программы радует своей лаконичностью, и при этом мощностью – тут и сетка, и удобное перетаскивание нужных элементов, редактирование текстов, библиотека паттернов и форм. Простенький визуальный редактор только плюс – не засоряет важное пространство в программе и подчеркивает только важные функции, которыми пользуется большинство дизайнеров. В общем и целом – если до этой программы я использовал для создания wireframes преимущественно photoshop (а для прототипирования – Expression Blend) то теперь с удовольствием использую Pencil Project вместо него.

В общем – простое, как отвертка, приложение, которое успешно справляется со всеми нужными действиями при создании wireframes. Крайне рекомендую пользователям Firefox.

Balsamiq Mockups

Довольно часто проектирование интерфейсов начинается на бумажке – на обычных листах, либо в блокноте. Balsamiq Mockups развивает эту идею. Программа очень простенькая – есть множество визуалов – кнопки, списки, полосы прокрутки и прочее (есть даже облако тегов), их перетягиваем на «поле брани».

По сути – спроектировать тут можно всё. И весь интерфейс будет в зарисовки на бумаге – неровные линии, шрифт. Шрифт, кстати, подобран ну очень удачно – легкочитаемый, кириллический, и в рукописном стиле.

Кому нужна скорость при разработке, недурный результат и простой функционал – тому нужно в обязательном порядке качать эту программу. Профессиональную лицензию я получил, написав в службу поддержки о том - кто я, и чем занимаюсь. На сайте написано, что любой блоггер, или журналист может запросить профессиональную лицензию по этому адресу бесплатно.  Остальным же придется заплатить 79 долларов.

Выводы

Для тех, кому не нужны жуткие навороты: прототипирование в html и прочая шелуха – тому лучше использовать Pencil Project, и Balsamiq Mockups. Я, лично, отдаю преимущество первому – т.к. он абсолютно бесплатен и работает на моем любимом браузере. В то же время Balsamiq Mockups очень удобна, если нужно создать wireframes быстро и со вкусом.
В случае же, если вам нужно еще и прототипирование, редактор кода, javascript и прочий функционал – рекомендую обратить внимание на продукт Expression Blend – красивый, функциональный интерфейс которого не оставит вас равнодушным.

Тем временем

1. Миша Квакин раскрепостился от оков постоянной работы и стал фрилансером.

2. Сергей Чаботько рассказывает о том, чему нужно следовать начинающим СЕО-шникам

3. Юра Гугнин написал о своей новой работе в роли маркетолога.

4. Футуриус пишет о МО технологии.

5. Егор Чернев пишет о закругленных блоках с помощью css.

Говорить о блочной разметке можно долго и нудно. Я же постараюсь максимально избавить вас от мазохизма при чтении этой статьи с помощью краткости и конкретики.

Для начала оговорюсь:

Блочная разметка - это  этап проектирования интерфейса сайта, нужный дизайнеру для утверждения расположения всех функциональных блоков с их примерным наполнением вместе со своими коллегами или заказчиками. Требуется это для последующей, более легкой, прорисовки дизайна. Зачастую wireframes используются во время презентации клиенту в бумажном виде.

Нужно помнить, что создавая блочную разметку, нашей задачей является не отрисовка дизайна, а наиболее правильное и целостное расположение всех функциональных блоков на сайте. Следовательно - на внешний вид наплюйте, но не забывайте следовать советам ниже.

Немного советов

1. Блочная разметка должна быть как можно более простой. Без всяческих назойливых эффектов, градиентов и прочего.

2. В распечатанном виде любой человек должен с легкостью увидеть, где начинается какой-либо отдельный функциональный блок, и где начинается собственно контент. Следовательно - внимательно следите за тем, чтобы блоки были контрастны по отношению друг к другу.

3. Если для того, чтобы разделить какие-либо блоки, или внутренние под-блоки цвета вам уже не хватает (довольно частый случай в моей практике) - смело используйте линии, немного градиентные плашки (но в градациях серого), и пустое пространство.

4. Делайте wireframes черно-белыми. Блоки в цветном варианте будет перебивать внимание людей друг у друга, что совершенно нежелательно. Также разные цвета создают разный эффект внимания - т.е. ярко-красный привлечет внимание к себе гораздо лучше, чем светло-желтый. Именно поэтому я использую только градации серого (начиная от чистого белого, и заканчивая воронным черным), где насыщенность зависит от предполагаемой важности того или иного блока на сайте.

5. Если уж решили сделать цветными - не делайте потом обесцвечивание. Так как даже совершенно разные цвета в цветном варианте могут в черно-белом свестись к одному и тому же оттенку серого.

6. Структурируйте контент. Делите блоки на под-блоки. Что я подразумеваю под этим? То, что нужно разделять контент даже внутри основных блоков. К примеру: не писать тексты сплошным полотном, не забывать о белом пространстве и абзацах. В общем - вспоминайте азы типографики и модульной сетки из полиграфии, они нужны даже для проектирования интерфейсов.

Этапы блочной разметки

1. В самом начале нужно знать, что будет на странице. Если не знаете - составьте полный перечень, включающий в себя самые мелкие детали. При этом деля все элементы на группы и подгруппы. Это понадобится в дальнейшем.
2. Выкидываем половину элементов за ненадобностью. Это всегда происходит, когда осознаешь предполагаемое количество информации на странице.
3. Приступаем к самой блочной разметке.

Сперва рисуются лишь основные блоки, без наполнения. Т.е. не без помощи плашек, линий, и белого пространства мы делим пустой лист на основные составляющие - шапку, контент, подвал, колонки, и прочее.

После этого переходим к более детальной разметке и делим эти основные блоки на составляющие. Допустим, шапку можно разделить на следующие под-блоки: поисковая форма, форма авторизации пользователя, логотип, графический элемент, и  меню.

Затем приступаем к отрисовке самой конкретики. То есть, наполняем эти блоки ну