Так вот, господа. Обводите этот день в календаре, ибо сегодня, 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. Приступаем к самой блочной разметке.

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

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

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

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

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

Если поправки небольшие, и их немного - до 30-40, то это уже очень хорошо - значит наше время потрачено не зря.

Грубо говоря, после этого идет оттачивание всех блоков, и контента внутри него - описывать тут особо нечего. Могу лишь привести пример, чтобы вы наглядно увидели разницу между первым вариантом разметки и её логическим завершением. Между оригиналом и итоговым макетом произошло около 100 правок, и 6 версий. Не всегда крупных, но от этого не менее важных.

Выводы:

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

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

PS: в качестве примера я использовал этапы проектирования интерфейса для проекта iFolk. Ожидайте на днях анонсирования. Пока же можете оставить свой e-mail для того, чтобы мы могли отправить туда кучу спама о виагре.

PPS: приношу свои извинения за то, что в последнее время нечасто публикуюсь. Вышеуказанный www.ifolk.ru забирает на себя ну о-о-очень много внимания.

PPPS: рад сообщить, что количество rss-подписчиков перевалило за 1200 :)

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

1. Миша Квакин решил сделать для своего блога систему инвайтов.
2. Юра Гугнин наконец-то предоставил нам новую заметку :)
3. Футуриус написал о UMBEL.
4. Сергей Чаботько рассказывает о деньгах в байнете.
5. Юра Ветров разжевал о проектировании в Agile-процессе.
6. Егор Чернев пишет об онлайн планировщике помещений.

Да, речь сегодня пойдет о простоте. Грубо говоря – это продолжение к нашумевшей статье о Белом пространстве, так как без него простота быстро становится примитивностью.

Немного слов

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

Также некоторые товарищи могут возразить мне тем, что у всех разные вкусы, и фломастеры все едят тоже разные.

Я могу понять, когда не спорят о вкусах в дизайне. Вот где действительно разные вкусовые характеристики, и спорить – бесполезно. Но откровенный треш не любит никто. Это тоже самое, если бы вам сказал человек, который любит есть людей, о том, что «на вкус и цвет товарищей нет». Вы с ним согласитесь? Очень в этом сомневаюсь. Просто — так не принято. Мягко говоря.

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

Как отличить простоту от примитивности

1. Пренебрежение шрифтами. У примитивного дизайна есть одна великолепная черта, о которой можно писать отдельную статью (ждите анонсов). Многие дизайнеры не видят разницу между шрифтами заголовочными, и текстовыми. Путая их местами – получают кашу. А потом жалуются на то, что их детище обозвали примитивным.
   
2. Мешанина стилей. Люди часто не могут сходу оценить тот факт, что стили у сайта в результате получились разные, и смешивать ходы из 2.0 сайта, с дизайном сайта корпоративного, а где-то даже и промо – плохой тон. Скажем – зачастую люди мешают модные, скругленные, мак поля с иконкой внутри, и aqua-кнопки из Vista.
   
3. Незнание или лень в применении основных правил хорошего тона (гештальт-принципы) — закона близости, подобия и закона симметрии. Догадываюсь, что все их знают, многие помнят, а применяют на деле – единицы. То же правило близости постоянно применяется в дизайне блогов: информация, относящаяся к статье (кол-во комментариев, дата написания, автор) должна быть в непосредственной близости возле заголовка, тогда глаз людей воспринимает их как единое целое, что от нас и требовалось.
   
4. Неумение распоряжаться пустым, белым, пространством. Т.е. его может быть нереально много, но только не там где оно действительно требуется. В частности – в дизайне блогов, между двумя статьями. Очень часто повторяемая ошибка — в отсутствии нормального расстояния между текстом анонса, и заголовком следующей заметки.
5. Кнопки и контролы. Зачастую – нестандартные контролы, которые имеют отличный внешний вид от контролов операционной системы, и производят на сайте лишний визуальный шум. Кроме тех ситуаций, когда нарисованные контролы выглядят явно лучше системных. Люди любят менять вид кнопок, и высоту текстовых полей. Особенно неприемлемо второе.
   
6. Плохо разделены пункты меню. Смотрите примеры, тут можно понятно объяснить только визуально.
7. Игнорирование принципа слепой зоны. Многие проекты не выстрелили из-за того, что создатели не учли принцип слепой зоны для глаза. Такие ситуации происходят, если всё визуальное внимание на себя забирает какой-то элемент дизайна, или визуальные шумы. Поэтому глаз не бросается в слепую зону, и не воспринимает информацию оттуда. Решением стоит считать избавление от назойливого элемента в непосредственной близости от важной информации. Либо – убрать важную информацию из слепой зоны.
   
8. Отсутствие небольших визуалов. Даже минималистичный дизайн не обходится без небольших иконок-визуалов. Сделано это не просто так, а для улучшения разделения и восприятия информации. В простом дизайне нет большого массива информации, следовательно, нет и визуалов. В примитивном же скидывают огромные тексты, которые трудно воспринимать без линий-разделителей, визуалов, и белого пространства.
9. Игнорирование сетки. В примитивном дизайне халатно относятся к столь важному моменту, как модульная сетка сайта. Т.е. элементы не выровнены относительно друг друга, поэтому воспринимаются как алкоголики в разброде и шатании. Эта ошибка – одна из самых популярных по частоте. Достаточно поставить жесткие рамки, и выровнять в красивую сетку все элементы, и даже самый примитивный дизайн приобретает большое преимущество перед другими.
   
10. Наличие необязательных, иногда даже вредных, графических элементов. Очень часто дизайнеры любят использовать всякие штучки-дрючки в дизайне, и это отталкивает их от минимализма и красивой простоты еще дальше. Ведь не должно быть ничего лишнего, и всё должно быть на своём месте. Пример: разные узоры, свирлы, мышки, клавиатуры и т.п.

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

Положительные примеры простых сайтов:

• Jevix.
• Free-lance.ru.
• GUI.ru.
• Юра Ветров.
• InterFace Architect.

Тем временем

1. Миша Квакин хватает Дональда Трампа за бороду.

2. Сергей Чаботько пишет о поисковом маркетинге.

3. Футуриус размышляет о твиттере 3.0.

4. Егор Чернев рассказывает о дизайне рабочего места.

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

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

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

Итак: вот, что получилось в прошлый раз:

Что с ним стоит сделать?

1. Избавится от черного цвета, который хоть и недурно подчеркивает цветность видео, но сильно забирает на себя внимание, что отвлекает от содержания ролика. Поэтому я сменил черный цвет на нейтрально серый, смешав цвета плеера САЛ и компании Apple. Гибрид получился аскетичным, и симпатичным. И что немаловажно – больше не отвлекает внимание от содержания.

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

3. Добавить кое-какие метаданные. Например, длину ролика, процент потоковой загрузки, и время проигрывания. Я постарался эти данные оставить в одной плоскости, но разделить визуально – ведь процент, и время несколько разные вещи.

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

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

Как ни странно – в процессе тестирования оказалось, что ползунок является едва ли не самой важной частью интерфейсов видеоплееров, что меня сильно удивило.

5. Сделать интуитивную полосу проигрывания. Теперь проигранное время выделено красиво гармонирующей синей полоской, а загруженное время – красивой серой. При этом у меня возник спор с Ромой Горшковым по поводу контрастности серой полоски по отношению к фону плеера.

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

6. Сделать хороший прелоадер. Отсутствием оного грешат множество видеоплееров, что совсем не является их плюсом. Благодаря идее товарища Алишера (привет!), я решил сделать его в виде старого ленточного круга с сменяющимися цифрами от 10 до 1, но только на современный лад.

Теперь десятками процентов являются цифры, а точные определяются процессом заполнения полоски снаружи. Описал довольно сумбурно, лучше посмотрите на рисунок – так гораздо яснее.

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

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

О механике

1. Я бы хотел пояснить механику регулирования звука. В результате тестирования на себе, и на подопытных «кроликах» я понял, что наиболее важным является избавления юзверя от лишних кликов, но в то же время, чтобы регулирование было вполне интуитивным.

Как это сделано в этом прототипе? Уровень звука подсвечивается при наведении, и при клике на наведенную полоску – устанавливается. Если пояснение неясно – смотрите на картинку.

2. При движении ползунка время проигрывания двигается, а процент – загрузки нет. Можно передвинуть ползунок на незагруженную область, и загрузка начнется с места ползунка, и прекратится предыдущая. Похожая механика используется в плеере YouTube. При движении ползунок становится полупрозрачным.

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

4. Я не считаю, что отказ от рамок плеера позволяет ему более хорошо вписаться в дизайн сайта. Серый цвет нейтральный, и внимание не привлекает – вписывается в любой дизайн, в отличии от черного. Зато рамки помогают «не сбежать» взгляду с видео. Часто, смотря видео без рамок, мой взгляд непроизвольно перемещается за пределы ролика, и я пропускаю моменты видео, тем самым дезориентируясь в нем.

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

6. Кнопка «Во весь экран» при наведении расширяет свои границы, что в разы повышает наглядность.

7. Пример реакции кнопок на наведение:

8. Забрать код, или разместить этот плеер на сайте можно во время паузы, или после проигрывания ролика.

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

PS: Внутри плеера используется видео из игры StarCraft 2.

Тем временем

1. Миша Квакин пишет о возможном появлении публичных блогов читателей внутри своего.

2. Сергей Чаботько меняет людей на деньги.

3. Футуриус публично и яростно ненавидит спам. Видимо О.Н.И. уже добрались и до него.

4. Юра Ветров размышляет о жизненном цикле интерфейса.

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

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

В качестве подопытных кроликов я возьму плеер самого популярного сервиса – YouTube, самого красивого – Vimeo, и самого быстрого – RuTube.

Затрагивать в переделке я буду несколько тем – эстетику, удобство внутреннего функционала, устройство навигации внутри видеоролика.

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

YouTube
Все на месте, но мне не нравится дизайн. На мой взгляд, слишком уж просто, и некрасиво. И если, скажем, в GoogleTalk простота красивая, то тут уж никак не подходит под это определение.

Vimeo
Красив, но местами плеер неудобен. Нет иконки быстрого погашения звука, да и само отображение звука реализовано не интуитивно. Неопытным пользователям может вздуматься, что это индикатор батареи, которой на самом деле не существует (ложки не существует, ага).

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

Итак, что нам нужно вместить в плеер:

1. Удобное регулирование звука без лишних кликов.
2. Иконку мгновенного погашения звука.
3. Интуитивную иконку для разворачивания во весь экран.
4. Кнопку «проигрывать».
5. Кнопку «пауза».
6. Нормальный индикатор загрузки «Идет загрузка».
7. Интуитивный статус-бар процесса загрузки ролика. Интуитивно отобразить отображение временной полоски.
8. Вынести самые популярные действия с роликом с сайта в плеер.<