Сообщество дизайнеров больше не говорит о необходимости доказывать ценность дизайна. Дизайнеры уже доказали, что он может стать основой успеха бизнеса. Но по пути они кое-что потеряли.
Дизайнеры отошли от неэффективного и непрактичного дизайна. Они приняли межфункциональные отношения и тесно сотрудничают со всеми коллегами в компании. Теперь они четко понимают, что важно и кто их клиенты. Они проектируют системы, а не пункты назначения. И вместо того, чтобы в первую очередь думать об интерфейсах, они думают о стратегии продукта. Они проектируют для бизнес-результатов.
Но при этом, легко забыть о том, что дизайнеры являются экспертами в области интерактивного дизайна.
Когда мы узнали об этой проблеме в нашей команде дизайнеров, мы заложили основы хорошего интерактивного дизайна. Они напоминают нам о важных вещах, о которых иногда забывают.
Это ни в коем случае не исчерпывающий список, и, поскольку он состоит из наших принципов проектирования продуктов, он не может быть универсальным для любой компании. Это принципы, которые важны для Intercom. Но, надеюсь, они также могут послужить вам напоминанием и, возможно, даже заставить задуматься о том, какие основы дизайна взаимодействия важны для вас.
1. Везде одинаково показывайте объекты
Intercom довольно сложная программа. Мы можем упростить ее для наших клиентов, сделав основные объекты системы (например, разговоры, пользователей, сообщения и т. д.) везде одинаковыми и легко распознаваемыми. Распознать легче, чем вспомнить.
✅ Делайте
По умолчанию показывайте объект везде одинаково. Если у вас есть веские основания внести изменения, сделайте его знакомым и подумайте, нужно ли отображать объект иначе в другом месте продукта.
❌ Не делайте
Не проводите локальные оптимизации, которые не учитывают или не соответствуют другим контекстам. Не создавайте несколько разных вариаций одного и того же объекта.
Спросите
- Как этот объект отображается в другом месте продукта?
- Можем ли мы повторно использовать один и тот же компонент?
- Если нет, как мы можем заставить его казаться знакомым?
- Нужно ли обновлять его в другом месте продукта?
2. Установите иерархию в интерфейсе
Установив четкую визуальную иерархию, мы можем помочь пользователям понять, как работает продукт, каковы взаимоотношения между его различными частями, что важно, а что нет.
✅ Делайте
Используйте пространство, типографику, группировку и отступы для четкой передачи иерархии и отношений между различными частями интерфейса.
❌ Не делайте
Не стирайте границы между различными уровнями иерархии, должны быть различимые группы. Не создавайте слишком много подуровней.
Спросите
- Содержится ли контент в четких, различимых группах?
- Достаточно ли пространства между этими группами?
- Сгруппирована ли связанная информация?
- Правильные ли стили текста используются для создания информационной иерархии?
3. Создайте визуальный ритм и баланс
Сделайте ваш интерфейс легко сканируемым, чтобы помочь пользователям быстро его понять. Делая его эстетически приятным, вы можете улучшить ощущение его удобства.
✅ Делайте
Укрепите наиболее важную часть вашего интерфейса, используйте различные стили и макеты, чтобы сбалансировать дизайн и упростить сканирование. Используйте систему сеток и обратите особое внимание на выравнивание.
❌ Не делайте
Не выкладывайте все просто в плоский список. Не используйте длинные строки.
Спросите
- Легко ли сканировать дизайн и узнать, какая его часть самая важная?
- Он кажется визуально сбалансированным?
- Выровнен ли интерфейс по сетке?
4. Используйте общепринятые паттерны и взаимодействия
Мы можем помочь нашим клиентам более эффективно осваивать и использовать Intercom, ограничивая количество паттернов взаимодействия, которые им необходимо выучить.
✅ Делайте
Используйте существующие паттерны своей дизайн-системы. Пользуйтесь общими паттернами дизайна взаимодействий, а не хитроумными оптимизациями на заказ. Следуйте стандартным принципам дизайна взаимодействия.
❌ Не делайте
Не вводите разные варианты существующих паттернов дизайн-системы. Не создавайте кастомные паттерны, если существует установленный отраслевой стандарт. Не злоупотребляйте существующим паттерном.
Спросите
- Может ли здесь использоваться существующий паттерн дизайн-системы?
- Если нет, то как выглядит паттерн отраслевого стандарта для данного случая?
- Если вы считаете, что вам нужен новый паттерн, обсудили ли вы это с другими дизайнерами? Можно ли переделать этот паттерн под дизайн-систему для использования другими дизайнерами?
- Существуют ли явные аффордансы, как можно взаимодействовать с этим паттерном?
- Есть ли четкий фидбек, когда пользователи взаимодействуют с ним?
5. Используйте прогрессивное раскрытие
Используя прогрессивное раскрытие информации, мы можем упростить Intercom для большинства пользователей, а также обеспечить большую гибкость для продвинутых клиентов.
✅ Делайте
Начните с простых значений по умолчанию и постепенно увеличивайте гибкость. Оптимизируйте приложение для наиболее распространенного варианта использования.
❌ Не делайте
Не демонстрируйте полную гибкость сразу. Не ставьте под угрозу наиболее распространенный вариант использования ради крайних случаев.
Спросите
- Каков наиболее распространенный вариант использования?
- Какими должны быть значения по умолчанию, чтобы большинству людей не приходилось их менять?
- Как мы можем постепенно раскрывать информацию?
- Не компрометируем ли наиболее распространенный вариант использования ради крайнего варианта?
6. Будьте ясны и лаконичны
Язык – это ключ к тому, чтобы помочь нашим клиентам понять, как работает Intercom. Тем не менее, слишком много текстового контента может оказать обратный эффект, и пользователи будут просто просматривают страницу, не читая ее. Следовательно, пользователи не достигают своей цели.
✅ Делайте
Будьте ясны и лаконичны, а при необходимости постепенно раскрывайте дополнительную информацию, используя подсказки и ссылки. Используйте иллюстрации, чтобы объяснить идеи.
❌ Не делайте
Старайтесь не использовать длинные подробные описания для пояснения принципов работы. Вместо этого подумайте о том, что усложняет приложение, и устраните основную проблему. Не попадите в распространенную ловушку, когда текст написан технически правильно, но сложно для понимания.
Спросите
- Легко ли просмотреть и понять, что это такое, не читая весь контент от начала до конца?
- Что если вам придется сократить половину контента? Вы сможете сделать это без потери смысла?
- Понятно ли предлагаемое преимущество?
- Понятно ли пользователю, что нужно делать?
- Будет ли это понятно тем, кто вообще не знаком с продуктом?
- Что мы можем проиллюстрировать визуально, а не объяснять текстом?
7. Учитывайте отзывчивость и скорость
Производительность – это особенность, которую нужно тщательно продумать. При игнорировании или неправильном управлении она порождает плохой пользовательский опыт и неопределенность.
✅ Делайте
Предоставляйте пользователям мгновенную обратную связь при взаимодействии с продуктом и задайте ожидания в отношении времени обработки запроса.
❌ Не делайте
Не забывайте о состояниях загрузки.
Спросите
- Что происходит сразу после взаимодействия с интерфейсом?
- Понятно ли, что система получила команду и в данный момент действие обрабатывается?
- Понятно ли, когда обработка будет завершена?
8. Направляйте пользователей к тому, что они должны делать дальше
Обычно мы начинаем с проектирования безошибочного сценария по умолчанию (happy path), но большинство клиентов без четкого руководства могут вообще не использовать его.
✅Делайте
Поясните, что пользователям следует делать дальше, и упростите это. В частности, учтите пустые состояния, сообщения об ошибках и конечные состояния.
❌ Не делайте
Не создавайте тупиков, где пользователи должны сами выяснять, что делать дальше.
Спросите
- Что произойдет, если у вас не будет данных для отображения?
- Что происходит в случае ошибки?
- Понятно ли, что пользователь должен делать дальше?
9. Помните о доступности
Хотя мы еще не установили стандарты доступности, есть вещи, которые вы можете сделать, чтобы сделать ваш дизайн более доступным.
✅ Делайте
Используйте существующие компоненты дизайн-системы, поскольку они сделаны доступными. Используйте стили текста и размеры, которые легко читаются. Добавьте достаточный цветовой контраст. Не используйте только один цвет, чтобы передать значение.
❌ Не делайте
Не вводите новые цвета или стили текста, не обсудив это с командой, занимающейся дизайн-системой. Избегайте добавления пользовательских компонентов, потому что они могут не обладать доступностью.
Спросите
- Есть ли существующий компонент системы дизайна, цвет или стиль текста, который вы можете использовать?
- Достаточно ли читабелен текст?
- Достаточно ли контраста?
- Используется ли что-то кроме цвета для передачи значения?
Сосредоточьтесь на своей основной деятельности
Несмотря на то, что за последние годы продуктовый дизайн, как дисциплина сильно развился, важно, не забывать о приоритетах нашей основной деятельности. Повышенное внимание к потребностям клиентов и бизнеса не должно быть оправданием плохого дизайна взаимодействия. Подобные основы дизайна помогают установить фундамент для качества дизайна взаимодействия, помогают избежать вопиющих ошибок и, в конечном счете, выступают в качестве основы для создания превосходного, ориентированного на пользователя программного обеспечения.
Перевод статьи Gustavs Cirulis
Найновіші коментарі (0)