Chulakov Design

Заметки про аналитику, проектирование и дизайн систем. Без воды, копипаста и ссылок на трендовые новости.

Chulakov Design
Дизайн
Подписаться
Эффективный онбордингЧастый кейс:

Эффективный онбординг

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

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

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

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

Не перегружайте пользователя информациейМало кому нравится читать длинные инструкции, а тем более смотреть видео, когда знакомишься с продуктом. Лучше показывать информацию поэтапно в процессе использования приложения, а для первых экранов оставить только 2-3 преимущества, так как больше пользователь все равно не запомнит.

Сделайте онбординг частью продуктаВозможно, пользователь не запомнил одну из функций или посчитал ее неактуальной. А может, интерфейс дополнился новыми инструментами. В любом случае, если онбординг встречается только при первом входе и длится всего пару минут, то вряд ли он принесет большую пользу. В обучении важна стабильность
- чем чаще повторяешь, тем лучше усваиваешь. Чтобы минимизировать потерю аудитории, сделайте процесс обучения постоянным, например, как это делает Figma: после обновления пользователя встречает онбординг и рассказывает о нововведениях. Так компания не только адаптирует новичка, но и повышает ценность самого продукта.

Chulakov Design

Chulakov Design
Дизайн
Подписаться
Советы по работе с иконками Умение рисовать иконки важный навык в работе дизайнера.

Чтобы они были хорошими, нужно соблюдать определенные правила.


1. Единый стиль. Если вы делаете иконки для конкретного проекта, придерживайтесь единообразия: толщина линий, размер скруглений и цветовая гамма должны соответствовать друг другу. Также если в одной иконке есть разрыв линий, он должен быть везде.


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


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


4. Использование сетки. У иконок должны быть охранные поля, также их следует вписывать в простую форму: круг или квадрат. Так они будут пропорциональны друг другу.


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


6. Экспорт иконок. Переведите все контуры в кривые и объедините фигуры. Для дальнейшего использования в интерфейсе, иконка должна быть в формате SVG. Нелишним будет оставить исходный файл, чтобы иконку можно было легко отредактировать.

Chulakov Design

Chulakov Design
Дизайн
Подписаться
Подарок для дизайнера ко Дню космонавтики 🎁

60 лет назад наша страна совершила огромный прорыв
- отправила человека на околоземную орбиту. Команда Студии предлагает отметить эту важную дату творческим конкурсом для дизайнеров.

Как поучаствовать?


1. Создайте апгрейд логотипа Студии на тему «День космонавтики». Работа может быть выполнена в любом стиле, в 2D- или 3D-формате.


2. Отправьте работу на почту space2021@chulakov.ru до 11 апреля включительно. Формат: png, jpeg, mp
4.Соотношение сторон: 1:
1.В письме укажите свои контакты
- юзернейм в Telegram и Instagram.

Какие призы?

Номинация «Выбор зрителей»: 12 месяцев PlayStation Plus / 3 месяца Xbox Game Pass Ultimate / 12 месяцев EA Play Steam.Номинация «Выбор арт-директора»: консультация и разбор портфолио с руководителем рекламного юнита Студии. Номинация «Выбор Chulakov Team»: карьерная консультация и разбор резюме от HR-отдела.

Какие условия?

Быть подписанным на нас в Instagram и Telegram
- Chulakov Team.

Итоги
- 12 апреля.

Ждем ваши улетные работы!

Chulakov Design
Дизайн
Подписаться
Геймификация в интерфейсах

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

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

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

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

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

Chulakov Design

Chulakov Design
Дизайн
Подписаться
Переломный момент

С 15 марта The California Consumer Privacy Act (Закон Калифорнии о защите прав потребителей) запрещает компаниям использовать темные паттерны. Об этом сообщает Insider.

Подробнее про каждый паттерн вы сможете прочитать на сайте Dark Patterns.

Что это означает для дизайнеров и индустрии?

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

Уважайте ваших пользователей, заботьтесь о них и будьте честны с ними.

Chulakov Design

Chulakov Design
Дизайн
Подписаться
Лучшее из CommunityFigma Community быстро развивается и наполняется полезным контентом.

Лучшее из Community

Figma Community быстро развивается и наполняется полезным контентом. Мы отобрали для вас самое лучшее, чем пользуемся сами иногда.

Material Design Icons
- все стили иконок в одном файле. Просто сделайте из них библиотеку и подключайте в любой проект. Ant Design System
- мощнейшая дизайн-система. Мы в основном используем ее как референс к организации дизайн-систем. Figma Charts Infographics UI kit
- тоже используем как референс для отображения данных. Все файлы Fluent от Microsoft
- опять же используем как референс, на основе которого создаем свой дизайн системы.Russian Banks Logo
- много работаем с банками, помогает не тратить время на поиски логотипа.

Chulakov Design

Chulakov Design
Дизайн
Подписаться
Гуманный дизайн

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

Вот несколько рекомендаций по разработке этических и гуманных интерфейсов.

Расширение возможностей


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


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


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


- Осведомляйте о времени использования продукта для поощрения более здоровых цифровых привычек.

Ограничения


- Используйте индикатор, чтобы информировать пользователей, когда они прочитали весь новый контент, чтобы помочь избавиться от бесконечной прокрутки.


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


- Автоматическое воспроизведение видео мешает пользователям делать сознательный выбор. Лучшей альтернативой является предоставление определенного промежутка времени между видео, чтобы пользователь успел принять решение о прекращении показа.

Уважение


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


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


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

Chulakov Design

Chulakov Design
Дизайн
Подписаться
4 метода дизайна, способных вызвать эмоции у пользователей


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


2. Передавайте эмоции с помощью анимации, привязанной к scroll-эффекту.Уникальность эмоций в том, что они вызваны задействованием человеческих чувств, таких как зрение или слух. С помощью подобного эффекта можно очень здорово рассказать историю или представить продукт.Самым показательным примером является сайт Applе, на котором страница каждого продукта
- это отдельная история про него. Или, например, сайт о жизни режиссера Стенли Кубрика.


3. Приятная микроанимация.Хорошо продуманные микровзаимодействия
- явный признак заботы о пользователе. Вот почему их так любят. Посетитель получает информацию о том, что ему делать и было ли его действие правильным и одобренным системой. Приложение или веб-сайт мгновенно обеспечивают визуальную обратную связь и учат пользователя работать с системой.Когда микровзаимодействия выполнены правильно, они могут вызвать положительные эмоции о вашем бренде и повлиять на действия пользователей.Очень много хороших примеров микровзаимодействий есть в Google Material.


4. Звук.Выходя за рамки взгляда, мы можем воздействовать на еще один орган чувств
- слух. Использование звуков
- довольно рискованная затея, так как большинство пользователей не готовы тут же начать слушать: кто-то едет в метро, у кого-то нет наушников, кто-то на совещании или просто любит тишину. Мы считаем идеальным решением мелкие и обоснованные вкрапления звуков в сайт. Например, как это делает компания Velux, которая производит слуховые окна. На главной странице, если проскроллить немного вниз, натыкаешься на интерактивный блок, в котором есть возможность приоткрыть окно. При этом насколько сильно оно открыто, настолько сильно мы слышим звуки природы за ним.

Chulakov Design

Chulakov Design
Дизайн
Подписаться
Что такое минимализм Простота не равно минимализм.

Они похожи, но не одинаковы. Минимализм живет на краю спектра, а простое
- нет.

Сравнение отношения сигнал/шум

По-настоящему минималистичный дизайн будет иметь максимально возможное соотношение между сигналом и шумом. Давайте разберемся с понятиями:
- сигнал
- это информация, которая передается;

- шум
- это любая посторонняя информация, которая ослабляет сигнал.

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

Когда вы сделаете это, то снизите нагрузку на пользователей и сфокусируете внимание на вашей информации.

Минимализм, доведенный до крайности, не идеален

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

Идеальный уровень минимализма
- тот, который сбалансирован эстетикой. Когда вы найдете правильный баланс, то сможете создать идеальный дизайн.

Chulakov Design

Chulakov Design
Дизайн
Подписаться
Заливка или обводка?

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

Характерные подсказки

Рассмотрим два примера:
- замочная скважина, без которой иконку замка легко принять за сумку;

- зубцы, без которых шестеренка стала бы похожа на пончик.

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

Контурные иконки

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

- сделать подсказку более выраженной.

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

Залитые иконки

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

Подводим итоги

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

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

Chulakov Design

Chulakov Design
Дизайн
Подписаться
Что по трендам дизайна на 2021 год?

Web

Ретро. Будем наблюдать, как дизайнеры сайтов возвращаются к стилям 70–80-x годов.Горизонтальный скролл. Просто потому, что можем.Наличие 3D. Это будет значительно повышать ваши шансы получить «Сайт дня» на Awwwards.Градиентные разблюренные пятна. Сильно оживляют дизайн и при этом заменяют собой изображения или иллюстрации.Табличность. И снова игра на ностальгии, но отсылка уже к 90-м годам.Стикеры. Имитация наклеек как способ сломать четвертую стену и представить, что кто-то вручную наклеил стикеры на сайт.

Mobile

Виджеты. Спасибо за это Apple.3D-иконки. Смотрите пункт
1.Стекломорфизм. Передаем привет Windows Vista 👋

Chulakov Design

Chulakov Design
Дизайн
Подписаться
Вместе с Tele2 мы разработали праздничный дизайн интерьера:

​​Как подготовить цифровой дом к празднику

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

Как появился цифровой дом? После начала пандемии коронавируса Tele2 обратился к нам с задачей: в короткие сроки создать проект, который поможет людям легче перенести самоизоляцию и с пользой провести это время. Мы сразу запустили производство и уже через 3 недели согласовали конечный вариант. ⠀

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

Больше новогодней атмосферы дома ищите в нашем кейсе. Ссылку на него оставили ниже.

Chulakov Design

Chulakov Design
Дизайн
Подписаться
Самообразование

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

Как придумать фейк?
- Взять уже известный бренд с не самым лучшим или устаревшим интерфейсом. Если вы вдруг решите выбрать компанию с хорошим продуктовым дизайном, то в силу отсутствия опыта ваша работа может получиться хуже, чем у оригинала.
- Поискать задание на популярных фриланс-биржах.
- Придумать нечто фантастическое. Это и весело, и полезно. Например, попробуйте сделать дизайн новостного сайта Daily Bugle, где работает тот самый Питер Паркер.

Что необходимо включить в описание такой работы:
- задачу, которую вы себе поставили;

- небольшой рассказ о самом бренде;

- пара слов о процессе дизайна и перечень выполненных работ;

- аналитика и полученные инсайты;

- демонстрация того, как созданные макеты решают поставленную задачу;

- упоминание дополнительных артефактов: персоны, CJM, навигационная архитектура или User Flow.

Chulakov Design

Chulakov Design
Дизайн
Подписаться
Прямой эфир Chulakov Talks Сегодня в 19:

00 мы обсудим 10 правил успешной стажировки дизайнера. В прямом эфире Chulakov Talks HR-директор Анна пообщается с Designer Junior+ Дмитрием, выпускником.

Задать свои вопросы вы сможете во время эфира.

Chulakov Design

Chulakov Design
Дизайн
Подписаться
Отдайте 1-й и 2-й уровень иерархии под категории Давайте поговорим про e-commerce.

Покупателей в интернет-магазинах упрощенно можно разделить на два типа:
- люди, которые знают, что им нужно, и ищут что-то конкретное;

- люди, которые не определились, и им нужно изучить ассортимент, прежде чем принимать решение о покупке.

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

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

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

Chulakov Design

Рейтинг авторов

  • "Записки Дизайнера" (про дизайн и только про него 157 157 157
  • (Не) только немецкий 157 157 157
  • #анямастерконтента 157 157 157
  • #Фудтех 157 157 157
  • 10 идей и трендов дня 157 157 157
Показать весь рейтинг
Загрузка ...