Дизайн-дайджест №11: полезные статьи08.11.2019 14:24

Какие дизайн-команды самые сильные, как правильно работать с фидбеком, и как редизайнили Google Chrome — все это в новом дизайн-дайджесте.

«Исследование: какие дизайн-команды в отечественных продуктовых компаниях самые сильные», vc.ru

На vc.ru опубликовали результаты исследования 2018 года и поделились предварительными итогами нового опроса.

В прошлогоднем опросе, созданном для внутренних задач Mail.ru, приняли участие 600 профессионалов. Получили такие результаты:

В этом году результаты исследования сделали открытыми, а сам опрос доработали. На данный момент пришло несколько сотен ответов:

Обучение в онлайн-университете: курс «UX-аналитика»

«Категоризация фидбека: как быстро определить главные боли клиентов», UX Feedback

Категоризация — один из важнейших элементов работы с фидбеком. В блоге UX Feedback поделились лайфхаками, как безболезненно обрабатывать большое количество отзывов.

По полочкам. Суть категоризации заключается в том, чтобы разбить большой файл на кластеры:

  • на основе ключевых слов определить родительские категории;
  • по типу проблем определить дочернии категории;
  • подвести статистику и работать с фидбеком точечно.

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


Примерный список категорий и ключевых слов для e-commerce-проекта

А что дальше? После обработки фидбека, можно отсортировать категории по количеству упоминаний, для понимания слабых мест на сайте:

Обучение в онлайн-университете: курс «Дизайн для начинающих»

«Как дизайнеру найти задачи», Дизайн Кабак

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

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

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

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

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

«Руководство по запуску первого сайта компании», Rusbase

На Rusbase поделились советами по запуска первого сайта компании, — это не сложно, нужно только следовать инструкции.

Поставьте цели

Подумайте, зачем вам нужен сайт:

  • для продаж;
  • для повышения узнаваемости бренда;
  • для того, чтобы дать посетителям важную информацию;
  • для того, чтобы рекламировать товар или услугу.

Главное — не взваливайте на сайт слишком много задач.

Создайте карту сайта

На большом листе бумаги или на доске нарисуйте карту сайта. Не создавайте сложную структуру, достаточно будет таких страниц:

  • Главная страница.
  • О нас.
  • Контакты.
  • Страница продуктов/услуг.
  • Блог.
  • Отзывы.
  • FAQ.
  • Страница для СМИ.
  • Политика конфиденциальности.
  • Условия.
  • Ошибка 404.

Выберите хостинг-провайдера

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

  • Squarespace.
  • Wordpress.
  • Wix.
  • GoDaddy.
  • Weebly.

Придумайте доменное имя

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

Займитесь копирайтингом

Несколько правил хорошего текста на сайте:

  • Объясняйте все простым языком.
  • Не используйте множество цветов для текста.
  • Разделяйте текст на блоки.
  • Не забывайте про иллюстрации.
  • Старайтесь писать без ошибок.

Продумайте UX-дизайн

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

«Холизм: дизайн-система Газпромбанка», /designer

Дизайнер интерфейсов Саша Окунев рассказал о дизайн-системе Газпромбанка, в разработке которой участвовал сам. Автор составлял списки нужных компонентов, писал гайдлайны, отрисовывал компоненты и организовывал инфраструктуру. Кстати, дизайн-система находится в свободном доступе.

О названии

Сначала собрали с команды дизайнеров разные варианты, среди которых были: «Deus», «Конструктор», «Титан», — важно было отразить монументальность системы. Руководитель команды предложил вариант «Холизм» (от греч. слова «цельный), который поддержало большинство.

О типографике

Основной шрифт меняли несколько раз: начинали с Roboto, тестировали Ubuntu, пробовали Geometria, а остановились на Proxima Nova, который хорош как кастомный шрифт для веба.

О градиенте

Основным цветом Газпромбанка был темно-синий, но была проблема — он не подходил для современных ярких интерфейсов. Решили подмешивать в синий цвет фиолетовый.

О правилах построения и сетке

Остановились на сетке 4 px. В качестве модульной сетки используем 12-колонник — он удобен для адаптивности.

Обучение в онлайн-университете: курс «Веб-дизайн с нуля до middle»

«Редизайн Google Chrome», vc.ru

На vc.ru перевели статью дизайнера из Google Ханны Ли, в которой она рассказала, как в компании провели редизайн пользовательского интерфейса Google Chrome.

Знакомьтесь, наша строка. Существует предположение, что все браузеры должны выглядеть так:

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

Короткая история строк. По мере того, как менялся интернет, менялись и требования к поисковой строке. Если изначально это был градиентный контур 0.5 dp, двойной тенью с непрозрачностью 22% и маленьким скруглением 1dp, то с появлением браузеров, мобильного интернета, поисковая строка сильно преобразилась.


Первый вариант поисковой строки

Поле с 2000 гранями. Chrome поддерживает более шести версий Android на 40 языках — включая те, которые не поддерживает Roboto Medium. Разработчики могут менять цвет панели инструментов практически на любой цвет, сохраняя при этом коэффициент контрастности для поддержки экосистемы веб-приложений.

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

95 оттенков серого. Chrome был создан более 10 лет назад. В результате многолетних исследований, по поводу того, какие цвета можно убрать или заменить, не нарушая стандарты доступности, был сделан вывод, что необходимый минимум цветов — восемь. Подобное исследование было проведено со 115 иконками:

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

Chrome постоянно балансирует между спецификациями Google (вход в систему), спецификациями Material Design (кнопки и иконки), собственным пользовательским интерфейсом (клавиатуры) и брендовыми элементами Chrome (автономная игра Dino). Нужно было найти масштабируемый способ выявить все различия.

Результатом стал первый в истории документ с изображениями Chrome:

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

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

«Поп-апы: 10 плохих трендов и их альтернативы», «Дизайн Кабак»

«Дизайн Кабак» перевел статью Анны Кэлей о том, почему всплывающие окна — это плохо, и как правильно работать с поп-апом.

Всплывающие окна разделяют по двум параметрам.

1. Взаимодействия пользователя с остальной частью страницы:

  • Модальные: содержимое на странице отключено, пока пользователь не будет явно взаимодействовать с поп-апом.
  • Немодальные: пользователи могут по-прежнему взаимодействовать с фоновым контентом, пока поп-ап тоже остается видимым.

2. Заметность фона:

  • Если фон затемнен, всплывающее окно называется «лайтбокс».
  • Фоновое содержимое не затемнено

Поп-ап тайминг: не показывать до взаимодействия или во время критических задач.

  • Не показывайте всплывающие окна до того, как пользователь ознакомился с основным контентом. Обычно в таком случае люди сразу уходят с сайта. Лучше дождаться, когда контент всплывающего окна будет релевантен.
  • Поп-ап, появляющийся сразу после входа, — не лучший вариант. Пользователь уже сосредоточен на дальнейших задачах, всплывающее окно отвлечет его. Вместо этого, можно использовать всплывающие подсказки, через какое-то время после входа.
  • Не просите указать почту до того, как пользователь ознакомится с контентом. Такой подход хоть и повышает кратковременные показатели, но раздражает пользователей, поэтому они предпочитают больше не работать с этим сайтом. Запрос email должен быть ненавязчивым и лучше всего будет предложить что-то взамен.
  • Слишком ранний запрос обратной связи грозит тем, что пользователь не оставит ее совсем. Любое прерывание пользователя во время выполнения задачи будет его раздражать.
  • Не показывайте несколько всплывающих окон одновременно — это непрофессионально.
  • Не вносите в поп-ап важную информацию — люди закрывают их, не читая.

Всплывающий контекст: не препятствуйте переходам и доступу к контенту

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

Всплывающий контент: не думайте, что всплывающее окно доставит нужное сообщение пользователю

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

Читать еще: «Как редизайн помог клиенту упростить продажи сложного аграрного софта: опыт компании Evergreen»

Хотите написать колонку для Нетологии? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии.

Полный текст статьи читайте на Нетология