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

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

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

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

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

Итак, книгу я взял фундаментальную, не новую. Написал её Стив Круг — очень заслуженный аналитик из США. Его послужной список — работа с такими гигантами как Apple, AOL и, в свое время, Netscape.

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

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

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

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

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

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

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

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

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

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

Купить книгу на Ozon.ru

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 Июня.

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

Например: Если это плеер в социальной сети, то стоит оценивать по количеству людей, поделившимися этим роликом в интернете или этой самой сети.

Во-вторых — скорость работы. Скорость оценить проще, если нужные инструменты встроены в плеер.

В-третьих — обучаемость и сохранение знаний после перерыва. Критерий тоже довольно субъективен и замерить его можно только в тепличных условиях, в лаборатории, однако всё-таки можно. Хотя это и займет немало времени.

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

Поехали.

YouTube

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

Плюсы:

• Возможность переключения разрешения видео.
• Изменение громкости в один клик.
• Можно погасить громкость в один клик.
• Наконец-то иконка разворота во весь экран интуитивна.
• Удобная прокрутка видео.
• Можно получить код ролика в контекстном меню по правой кнопке мыши или после проигрывания.
• Можно вручную указать время загрузки ролика.

Минусы:

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

Vimeo

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

Плюсы:

• Возможность переключения в режим HD.
• Изменение громкости в один клик.
• Иконка разворота во весь экран интуитивна.
• Удобная прокрутка видео.
• Возможность получить код ролика не заходя на сайт Vimeo.
• Во время проигрывания интерфейс тактично исчезает.
• Самые важные элементы управления с подходящим размером.
• Интерфейс идентичен на сайте Vimeo и других сайтах.

Минусы:

• Чтобы смотреть видео в режиме HD обязательно нужно перейти на сайт.
• Нельзя перемотать на нужное время до тех пор, пока видео не загрузилось до этого момента.

RuTube

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

Плюсы:

• Можно вручную указать время загрузки ролика.
• Можно заглушить громкость в одно нажатие.
• Можно менять громкость в один клик.
• Можно передать ссылку на нужный момент в видео.
• Можно остановить загрузку ролика.
• Переключатель режима времени ролика — «прошедшее \ оставшееся»

Минусы:

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

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

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

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

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

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

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

Первая запись на тему создания интерфейса для видео-плеера (хочу завершить эту тему) выйдет в четверг, 20 мая и будет называться «Интерфейс видеоплеера: Анализ».

Хочу порадовать вас хорошей новостью — мы, совместно с Фаридом Рафиковым (более известным в сети под ником Formazon) запустили сайт-проект посвященный вдохновению во всех его проявлениях и назвали его InspireMe, что, в переводе с английского, означает Вдохнови Меня.

А дело было так:
Мы с Фаридом решили, что пора и на родных просторах создать неиссякаемый ежедневный источник вдохновения. Впереди вас ждет масса полезных статей, встречи и интервью с известными дизайнерами и иллюстраторами, поток вдохновения и открытий. Сайт открыт вот уже 5 дней, так что скорее подкидывайте огонь в топку, подписивайтесь на обновления (через rss и по почте), добавляйте ru_inspire в твиттере и ЖЖ.

Будем рады вашим комментариям, замечаниям и предложениям по улучшению. Пишите нам на editors@inspireme.ru

— добавляйте в закладки.

PS: у меня уже написано 3 статьи, но я не могу их опубликовать без нового дизайна. Потерпите, пожалуйста. Как только, так сразу.

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

Причин, почему я пропал на этот год сразу несколько, как водится:

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

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

Что же ждет вас в новом году?

1. Новый дизайн. Он уже нарисован, сверстан (спасибо WebMolot-у) и прямо сейчас натягивается уважаемым Сергеем Клейменовым на движок. Скоро вы сможете пощупать его в работе (думаю, на текущей неделе).
2. Новые статьи. Как я уже говорил — я несколько расширил свой кругозор, немного улучшил свои письменные навыки и готов продолжить писать новые статьи. Также планирую переписывать старые статьи, т.к. слишком многое я за этот год пересмотрел и с некоторыми моментами уже не согласен. Так бывает.
3. Множество новых возможностей на этом сайте. Здесь появятся перечень книг, которые я рекомендую дизайнерам интерфейсов, полезные высказывания, повышающие мотивацию в работе, последние события в сообществе ux-специалистов: новые статьи, встречи, конференции. И еще много эволюционных изменений уже существующих функций.
4. Интересный проект. Совместно с Валей Голевым мы запустим одну полезную веб-утилиту, которая призвана сэкономить ваше рабочее время. Будет еще кое-что интересное, я объявлю конкретную информацию позже.

Оставайтесь на связи, дальше всё будет.
Искренне ваш.

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

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

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