Здравствуйте, уважаемые читатели.
Это четвертая, завершающая серию «Интерфейс видеоплеера» статья, которая посвящена работой над ошибками, допущенными в предыдущей статье «Интерфейс видеоплеера: Дизайн».
Некоторые ошибки были допущены специально, на некоторые меня навели замечательные комментаторы.
Я предполагал такой исход дела, он был необходим для того, чтобы показать полный цикл создания интерфейса, ведь утопично удобных интерфейсов существовать не может по определению. Поэтому задача дизайнера интерфейсов состоит как раз в том, чтобы сделать интерфейс максимально эффективным и приятным для большинства пользователей. Как новых, так и существующих. Однако это весьма трудно сделать за одну итерацию работы, поэтому эта статья и называется «Работа над ошибками.
Факт: ошибки были допущены, их необходимо проработать и исправить так, чтобы они перестали быть ошибками для большинства пользователей.
Чтобы сделать это, стоит составить список этих самых ошибок и для каждой из них продумать решения.
Список проблемных мест и их решения:
1. Приподняв панель управления над нижним краем видео, я панелью визуально занял больше места, чем необходимо.
Решение: привязываем панель к нижнему краю видео и немного уменьшаем её размеры.
2. Панель управления содержит несколько эффектов и лишних границ.
Решение: убираем всё, кроме легкого эффекта объема на управляющих кнопках.
3. Голубой цвет подсветки кнопок отвлекает внимание.
Решение: делаем его голубым исключительно при наведении. В обычном состоянии работаем с градациями серого цвета.
4. Бегунок на полосе проигрывания.
Решение: убираем, он лишний и визуально тяготит интерфейс. Вместо него делаем четкие границы проигранного и загруженного индикаторов.
5. Цифры проигранного времени слишком малы.
Решение: увеличиваем до общей высоты элементов.
6. При переходе из прототипа в дизайн пропала кнопка остановки загрузки видео.
Решение: добавляем её.
7. Иконки разного стиля и размера.
Решение: приводим их в порядок: унифицируем стиль и размер.
8. Отступы между элементами разные:
Решение: унифицируем отступы.
Уже после создания первой версии мне в голову пришло интересное решение всплывающей панели управления, которую я и хотел бы показать вам на оценку: всё окно обрамляется в небольшую рамку 5-7 пикселей, внизу же эта рамка более толстая — 30-40 пикселей, и используется как фон для элементов управления.
Так визуально панель управления кажется уже, чем, если бы она всплывала над видео в гордом одиночестве. При этом сами управляющие элементы довольно большие, довольно трудно пропахнуться.
Также такое решение позволяет быстро менять основные цвета дизайна, поскольку в нем минимум эффектов.
При этом и обрамление, и панель управления видео, как и задумывалось, можно выводить несколькими способами: постоянно под видео или же всплывая при наведении. Есть и гибридный вариант — выезжающая панель из под видео, но такой вариант вывода не самый удачный.
PS: это последняя статья из серии «Интерфейс видеоплеера». Скорее всего, у вас появятся еще мысли по его улучшению, поэтому я буду обновлять дизайн прямо здесь, в этой записи.
PPS: Следующей статьей станет рецензия на второе издание книги Стива Круга «Не заставляйте меня думать».