Здравствуйте, уважаемые читатели.
Мы тут вплотную занялись выловом багов верстки, детской болезни каждой новой темы для Wordpress. Поэтому необходима ваша посильная помощь: если вы видели хоть самый маленький глюк — обязательно напишите сюда в комментарии, или же прямо на почту my@birzool.com.

Обязательно указывайте:
На какой странице:
Браузер (с версией):
ОС:
Скриншот (желательно):

Большое спасибо за вашу помощь.

PS: а еще у меня в самом разгаре переезд, поэтому в ближайшую неделю статей не будет.

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

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

Список проблемных мест и их решения:

1. Приподняв панель управления над нижним краем видео, я панелью визуально занял больше места, чем необходимо.
Решение: привязываем панель к нижнему краю видео и немного уменьшаем её размеры.

2. Панель управления содержит несколько эффектов и лишних границ.
Решение: убираем всё, кроме легкого эффекта объема на управляющих кнопках.

3. Голубой цвет подсветки кнопок отвлекает внимание.
Решение: делаем его голубым исключительно при наведении. В обычном состоянии работаем с градациями серого цвета.

4. Бегунок на полосе проигрывания.
Решение: убираем, он лишний и визуально тяготит интерфейс. Вместо него делаем четкие границы проигранного и загруженного индикаторов.

5. Цифры проигранного времени слишком малы.
Решение: увеличиваем до общей высоты элементов.

6. При переходе из прототипа в дизайн пропала кнопка остановки загрузки видео.
Решение: добавляем её.

7. Иконки разного стиля и размера.
Решение: приводим их в порядок: унифицируем стиль и размер.

8. Отступы между элементами разные:
Решение: унифицируем отступы.

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

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

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

PPS: Следующей статьей станет рецензия на второе издание книги Стива Круга «Не заставляйте меня думать».

Как вы помните, в прошлой статье «Интерфейс видеоплеера: Прототип» я создавал грубый набросок дизайна будущего проигрывателя и продумывал его механику на основе плюсов и минусов уже существующих плееров от YouTube, Vimeo и RuTube.

Именно на основе данных полученных из предыдущих статей я и буду вести работу над дизайном.

Поехали.

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

Цветовая гамма

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

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

Элементы управления

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

Я решил применить первый вариант, поскольку он лишен недостатков второго — размер видео не уменьшается, и перед пользователем не маячит лишняя динамика.

Поскольку полосы с функциями будут показываться поверх видео, необходимо делать их небольшими, но не слишком. Я решил, что 40 пикселей для верхней полосы и 50 для нижней — вполне достаточно. Для сравнения — это больше, чем в YouTube и RuTube, но меньше Vimeo.

Поскольку минимальная высота видео составляет 360 пикселей, то 90 на время отобранных под функции пикселей не сильно отвлекут пользователя от просмотра.

Внешность

Основные элементы управления стоит рисовать слегка объемными, имитируя кнопки, для того, чтобы пользователь интуитивно знал, что на них можно (и нужно) нажимать.

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

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

• Проигрывание: треугольник, направленный в правую сторону.
• Пауза: две вертикальные линии.
• Остановка загрузки: квадрат.
• Заглушить и вернуть звук: обычный и зачеркнутый динамик.
• Уровень громкости: звуковые волны рядом с динамиком.
• Полноэкранный режим: квадрат с направленными в разные стороны стрелками.
• HD: закругленный прямоугольник с надписью HD полужирным курсивом.
• Код для установки на сайт: .
• Получение прямой ссылки: звенья цепи, устоявшаяся ассоциация со ссылкой.

Зная все эти данные, потратив от одного до нескольких часов (я потратил 3) мы получаем дизайн полностью отвечающий моментам перечисленным выше.

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

Лично мне получившийся результат по душе. А вам?

PS: Следующей статьей в рамках серии станет «Интерфейс видеоплеера: Работа над ошибками». Её выход планируется в четверг, 24-го Июня.

PPS: ошибки обязательно будут: некоторые я допустил намеренно, но будут и моменты, которые я упустил. Поэтому очень важна обратная связь от вас. Буду благодарен за конкретные комментарии.

Как вы помните, в записи «Интерфейс видеоплеера: Анализ» я анализировал последние версии проигрывателей от YouTube, Vimeo и RuTube и для каждого из них составил списки плюсов и минусов с функциональной точки зрения.

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

Поехали.

В первую очередь, необходимо определится со стандартными размерами видеоплеера, который будет создаваться и соотношением сторон в видео. Будет ли это 4:3 или 16:10?
Для того, чтобы определится в этом моменте я пошел в ближайший российский агрегатор цен на товары (это был Яндекс.Маркет) и выбрал там видеокамеры. Как можно убедиться, широкоформатное соотношение сторон поддерживают 400 моделей из 497 на рынке, что сразу склоняет чашу весов на сторону соотношения 16:10.

После того, как было выбрано соотношение сторон, необходимо было решить какие размеры плеера считать стандартными. В стане игроков видеорынка радует единогласие — ширина плеера 640 пикселей, а высота динамически подстраивается под ширину. Т.к. для создания прототипа с высотой всё же нужно определиться, то я предположил, что в плеере будет проигрываться сферическое видео в вакууме, и поставил высоту в 360 пикселей.

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

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

YouTube и RuTube (для всех) показывает функции всегда, однако Vimeo, который ориентирован на творческих людей и гиков показывает функции при наведении курсора на видео.

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

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

Проверочный список:

Плюсы:

• Удобная прокрутка видео.
• Возможность вручную выбирать время начала загрузки ролика.
• Интуитивные иконки-визуалы.
• Изменение громкости в один клик.
• Погашение громкости в один клик.
• Возможность включения HD-разрешения для видео, не переходя на сайт.
• Возможность получить ссылку на нужный момент в видео.
• Быстрое получение html-кода для вставки ролика, не заходя на сайт.
• Идентичность интерфейса на сервисе видео-хостинга и на других сайтах.
• Возможность остановить загрузку видео.
• Переключение режима времени ролика между «прошедшим и оставшимся».

Минусы:

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

Список вы видите перед собой, однако на некоторых моментах я бы хотел остановиться чуть более подробно.

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

Для просмотра прототипа в действии кликните на изображении выше или по этой ссылке.

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

Продолжение следует.

PS: следующей статьей в рамках цикла станет «Интерфейс видеоплеера: Дизайн». Её выход планируется в четверг, 10 Июня.

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

Задачи

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. Избавится от черного цвета, который хоть и недурно подчеркивает цветность видео, но сильно забирает на себя внимание, что отвлекает от содержания ролика. Поэтому я сменил черный цвет на нейтрально серый, смешав цвета плеера САЛ и компании 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. Вынести самые популярные действия с роликом с сайта в плеер.

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

Теперь детальнее:

1. Регулирование звука без лишних кликов сразу подразумевает под собой то, что решение, которое используется в RuTube, откидываем, и нам нужно удобно совместить варианты в плеерах YouTube и Vimeo. Индикатор должен отображаться нарастающей волной полосок. Это настолько стандартно, что незачем сбивать людей своими инновационными решениями.

2. Т.е. иконки погашения звука в Vimeo нет, мы добавляем и её.

3. Симпатичная иконка в Vimeo. В RuTube и YouTube хромает её отображение. Поэтому мы просто доработаем вариант Vimeo – исходящие в 4 стороны луча.

4. Совмещаем кнопку «проигрывать» и «пауза». Т.к. кнопка «проигрывать» не может использоваться во время проигрывания ролика, и «пауза» не может использоваться во время паузы.

5. См. пункт 4.

6. Отсутствием простейшей надписи «загрузка» грешит YouTube, и RuTube. В Vimeo довольно симпатичный и оригинальный индикатор.

7. Тут у всех плееров всё хорошо – все совместили статус бар процесса загрузки, и времени проигрывания. Следовательно, будем перенимать их опыт. Процесс загрузки отображается полупрозрачной полосой, а процесс проигрывания более четкой. Чем быстрее у пользователя интернет – тем красивее пробегает полоса загрузки.

8. В нашем случае это «Мне нравится», «Добавить в сайт», «Коды ролика», «Похожие ролики». К пунктам Vimeo добавил «Похожие ролики», т.к. в YouTube, и RuTube, эта функция в наличии, и я ей регулярно пользуюсь. Я вынесу эти действия на панель, которая выдвигается при приближении курсора к верхнему краю плеера. При бездействии эта панель просто задвигается обратно.

К элементам управления сразу относится пару замечаний:

1. Они должны как-либо реагировать на наведение курсора.
2. Желательно они должны как-либо реагировать на нажатие.

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

При наведении на регулятор звука уровень звучания ездит за курсором мышки.

После разворота во весь экран пиктограмма «во весь экран» превращается в пиктограмму «свернуть». Для этого нам просто нужно сжать края ближе к друг-другу. При наведении просто менять эти две пиктограммы.

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

Если кому-то захочется, чтобы этот прототип перестал им быть, и кому-то потребуется рабочий вариант плеера – обращайтесь в контакты, обсудим варианты использования моего «.PSD» исходника.

Тем временем

1. Миша Квакин учредил акцию по раздаче ценных призов в виде красивых RSS иконок.

2. Аня Галкина опубликовала небольшой обзор посещения радио-ведущих.

3. Сергей Чаботько осветил способ улучшение выдачи в Google.

4. Футуриус рассказывает детально о RSS.

5. Тёмма пишет о Хабрахабре.

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

Что я подразумеваю под «подсказками»? Не много, ни мало – подсказки. Для того, чтобы их использовать, писать, читать , совершенно не обязательно быть мастеровитым суфлером, оратором, и т.д., и т.п.

Эта статья будет разделена на несколько логических частей – для дизайнеров, для разработчиков и для обычных пользователей, которые считают подсказки откровенным трешем и «нафигаонотамнужно?» элементами. Причем считают они так до того, как ошибутся в вводе данных.
Вот только, когда (реальный случай!) подсказки были убраны с формы регистрации, и освободилось немного свободного пространства, под названием whitespace, на сайте очень сильно уменьшилась конвертеризация пользователей анонимных в их зарегистрированных собратьев. Почему? Это и постараемся сегодня выяснить.

Нафигаонотамнужно?

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

Какая наша задача?

Задач несколько, и они разношерстны по результату.

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

Что получим?

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

Тем временем

1. Юра Гугнин размышляет о бизнесе и его системе.

2. Сергей Чаботько освещает новости Байнета.

3. Футуриус пробует себя в роли небезызвестного Дарвина.

4. Миша Квакин пишет о рейтингах и своём отношении к ним.

На все эти вопросы есть один прекрасный ответ — да, такое случается, причем не так редко, как хотелось бы разработчикам сервисов — примерно 0,5-3% по моим скромным прикидкам: тут уже зависит от «ЧеловекоПонятностности ссылок» (ЧПУ) — чем менее понятна ссылка — тем больше вероятность случайной ошибки от вездесущего человеческого фактора. Где проще ошибится, тут (site.ru/?userid=38174&sessid=1238712390721) или тут (site.ru/users/DezmASter/)

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

Знаете, что значат такие загадочные цифры как 404, 403, 500, 501, 502 (я перечислил наиболее часто-встречаемые ошибки, весь же список можно посмотреть по этому адресу)? Это замечательно, я тоже (тихонько гордимся).

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

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

Задача

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

Инструменты

Вантуз, фонарик, резиновые перчатки.

Наш верный, и непотопляемый Adobe Photoshop, Axure, и толика разумного подхода. Причем Axure можно привлекать по желанию, лично я вполне обойдусь одним лишь photoshop.

Исполнение

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

В качестве подопытного кролика я приведу в пример сайт одного известного на Украине WebMoney обменника, который в скором времени обзаведется новым дизайном. Но у этого нового дизайна пока нет дизайна страниц ошибок — стоит это исправить.

Т.к. сам новый дизайн довольно яркий, и цветной, я специально выделил страницу ошибки полным отсутствием цветастости — она лишь отвлекает от сути, и привлекает внимание — «раз сайт потерял цвет, значит я что-то сделал не так» — таков примерный ход мыслей пользователя. И он в целом прав — страница ошибок не выдается если пользователь все сделал правильно.

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

Для «знающих, но забывших» под загадочным индексом 404 подпишем значение ошибки.

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

1. Пользователь ошибся в наборе адреса.
2. Пользователь перешел со страницы поисковика на УЖЕ не существующую страницу.
3. Пользователь перешел по битой ссылке.
4. У пользователя произошла ошибка в ДНК.

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

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

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

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

Выводы

Страницу ошибок нужно проектировать отдельно от всего проекта, учитывая лишь общие тенденции дизайна оного. Нужно сразу уведомить пользователей о том, куда он попал, и что с этим делать — также оставить узнаваемый индекс ошибки (в нашем случае 404), разьяснить значение этого индекса (можно на отдельной странице, но ссылку оставить стоит — как я и сделал). Также нужно оставить логотип, который используется на сайте, чтобы пользователь не потерялся, и не вздумал мигом закрыть страницу. Для ошибок стоит применять красный (кровавый) цвет ради психологических ассоциация «плохо-хорошо». Также стоит добавить и форму комментирования, чтобы человек не чувствовал безнадежность ситуации, а разработчики получили ценные мысли по улучшению.

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

Идею для сей заметки мне подсказал Футуриус, за что ему низкий поклон.

Кстати — кому нужна иконка «внимание!» (треугольник) — дарю. 256x256px, PNG24

Тем временем

1. Миша Квакин пишет инструкцию для спаммеров в комментариях.

2. Юра Гугнин ищет рекламную площадку, и не может найти.

3. Сергей Чаботько размышляет о насущном — что писать, если ничего в голову не приходит?