Pull to refresh

Дизайн ПИ: Учимся на ошибках других

Reading time 6 min
Views 1.9K
image

Вкратце о цикле статей


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

Предисловие к циклу


Задумывались ли вы когда-либо о том, почему одни программные продукты, обладающие неплохой (если не сказать больше) функциональностью и качеством не пользуются успехом, а другие наоборот — нарасхват? Причиной этого парадокса часто является простой факт — чаще всего так происходит потому, что первые программные продукты проигрывают вторым в качестве пользовательского интерфейса и юзабилити. Наиболее яркий пример — браузер Google Chrome и все остальные браузеры. С момента его рождения прошло не так уж много времени — это самый «молодой» из всех браузеров — но это не мешает ему уже сейчас прочно удерживать третью строчку «парада браузеров» и уверенно теснить с «почетного» второго места детище Mozilla Foundation. Этот успех объяснить очень просто — с момента выхода браузер был нацелен на максимальную простоту в использовании, минимум настроек (хотя сейчас их количество уверенно растет) и максимальную дружелюбность к пользователю. Ну и конечно же инженеры корпорации Google долго исследовали рынок браузеров с целью понять что же именно не хватает пользователям других браузеров в плане юзабилити и пользовательского интерфейса — и браузер «выстрелил». Он продолжает уверенно переманивать пользователей, становясь версия от версии все стабильнее, красивее и юзабельнее.

С насмешкой отвечал ЖуЖу, — Я вам рекламу покажу!


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

image

Цифрами обозначены проблемные области. Давайте проанализируем их и выпишем в список. Итак, по порядку:

1) Элемент управления, ведущий себя подобно навигационной цепочке («Хлебные крошки»), по сути ею не является, поскольку практически в любом режиме дописывает в начало цепочки лишь одну ссылку, ведущую всегда на главную страницу. Тем более непонятно присутствие этого вырожденного случая навигационной цепочки, если в режиме создания новой записи доступно главное меню (пункт «Новая запись» находится в меню «Журнал»):
image

1') Дублирование информации. Смысл использования этого элемента оформления вообще неясен.

2) Нарушение целостности восприятия, нарушение сценариев использования сайта, дублирование действий. Появление таких элементов управления в подобных местах (создание новой записи) вообще недопустимо. Они дезориентируют пользователя и, в целом, создают риск изменения текущего рабочего контекста пользователя. Хочешь написать запись под другим пользователем? Выполни типичный сценарий — Выход из системы -> Вход под другим пользователем -> Новая запись. Вполне возможно, что здесь имела место небольшая денонормализация пользовательского интерфейса со стороны разработчиков ЖЖ, которые хотели облегчить жизнь пользователям с несколькими аккаунтами. Даже если создание новой записи под другим пользователем из под текущего не меняет глобальный рабочий контекст (не приводит к фактической смене пользователя) — это все равно неверное решение. Поскольку решив эту задачу денормализации разработчики получили на выходе «расползшийся» пользовательский интерфейс с дублирующимися действиями и сценариями.

3) Велосипед с квадратными колесами. На сегодняшний момент существует неисчеслимое множество реализаций элементов управления Выбор даты и Выбор времени для Web. Кстати говоря, при нажатии на ссылку изменить этот элемент меняет вид:
image
А если пользователю нужно выбрать другую дату и при этом посмотреть на какой день недели она выпадает? В общем — без комментариев.

4) Выпадающий из контекста блок ссылок. Усугубляет положение то, что почти все действия в блоке ссылок, кроме Создать опрос меняют текущий контекст пользователя. Последнее действие стоит обсудить подробнее. По сути это вообще другой режим редактирования. И этот режим доступен из режима создания новой записи и ниоткуда больше (поправьте меня если это не так). Это просто мощнейший удар по юзабилити — для того, чтобы создать опрос, нужно сначала создать новую запись.

5) Непонятные отступы для встроенного редактора. Редактор встроен в рабочую область с непонятными отступами, которые нарушают целостность восприятия и портят внешний вид. Помимо этого они являются причиной того, что действия Отменить и Повторить в панели инструментов редактора сообщения «уехали» на следующую строку:
image
Вызывает вопросы также экспандер слева от панели инструментов. Зачем он? Свернутая панель инструментов много места не сэкономит и этот элемент вносит только визуальный шум.

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

7) Выпадающие из контекста данной панели кнопки. Данные кнопки логично было бы сгруппировать с кнопкой Отправить, поскольку они входят в группу действий над записью (постом).

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

Закатав рукава...


Можно ли исправить эту форму? Конечно, можно — ведь то, что сломал один, может исправить другой. Итак, поможем ребятам из ЖЖ сделать этот мир чуточку лучше. Вот как могла бы выглядеть форма создания новой записи:

image

Достоинства данного решения:

1) Исправлен элемент управления Выбор даты/времени. Он заменен на более удобный и привычный пользователям элемент управления.
2) Элемент управления Внеочередная дата стал доступен не только в режиме редактирования даты. Очень плохо скрывать от пользователей элементы управления. Они всегда должны быть видны но могут быть недоступны. Причем желательно как-то пояснить пользователю, почему именно он не имеет доступ к заблокированному элементу управления.
3) Элементы управления Настроение, Где вы сейчас, Музыка сгруппированы более логично — в заголовок, рядом с другими основными параметрами поста.
4) Убран из заголовка ненужный пункт От имени, поскольку он создает угрозу изменения пользовательского контекста.
5) Более удобный редактор редактирования меток. Следует заметить что я ничего не придумывал — я лишь взял этот редактор из другой формы — формы редактирования меток.
6) Элементы управления записью Проверить правописание, Предварительный просмотр и Отправить сгруппированы в одну панель, что выглядит более логичным, чем в исходном варианте. Действие Проверить правописание оформлено в виде ссылки, чтобы не нагружать слишком визуальный ряд действий, и еще потому, что это скорее вспомогательное и необязательное действие, имеющее вес гораздо меньший чем два остальных действия.
7) Встроенный редактор выглядит более привлекательно за счет того, что все кнопки инструментов поместились на одной панели и убран экспандер, который служил лишь источником визуального шума.
8) Форма стала чуть меньше по высоте и за счет этого теперь прекрасно помещается на экране монитора с разрешением 1280х1024. При желании ее можно уменьшить так, чтобы она помещалась целиком на мониторе с разрешенем 1440х900 — за счет уменьшения высоты редактора и панели в которой расположен редактор меток.
9) Немного улучшен пользовательский интерфейс.

Недостатки данного решения:

1) Спорное выравнивание элемента управления Музыка. Очень приветствуется, если кто-то сможет предложить более красивое решение. Я сделал так лишь потому, что старался избежать пустот в заголовке. Я считаю что этот заголовок — как раз тот случай, когда не работает правило «не стоит боятся пустых мест»
2) Не удалось понизить плотность подачи информации — форма все еще выглядит как каша. Просто теперь она выглядить как немного упорядоченая каша :)

Послесловие


Не бойтесь экспериментировать с дизайном, цветом и содержанием. Если вы чувствуете что вы сделали что-то не соответствущее вашим ожиданиям — не ленитесь переделать, улучшить. Двигайтесь итерационно — никогда не пытайтесь быть на шаг впереди себя самого. Все равно понимание того, как нужно сделать лучше (или того, что стоит остановиться на достигнутом, потому что уже сроки поджимают) приходит от осознания несовершенности текущего шага.
Tags:
Hubs:
+69
Comments 128
Comments Comments 128

Articles