^[1]

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

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

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

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

^[3]

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

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

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

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

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

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

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

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

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

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

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

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

Купить книгу на Ozon.ru ^[3]

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

Здравствуйте, уважаемые читатели.
Это четвертая, завершающая серию «Интерфейс видеоплеера» статья, которая посвящена работой над ошибками, допущенными в предыдущей статье «Интерфейс видеоплеера: Дизайн ^[8]».
Некоторые ошибки были допущены специально, на некоторые меня навели замечательные комментаторы.

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

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

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

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

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

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

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

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

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

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

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

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

^[9]

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

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

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

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

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

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

Поехали.

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

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

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

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

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

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

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

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

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

Внешность

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

^[14]

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

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

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

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

^[15]

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

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

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

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