Поговорим о модульности

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

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

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

Плюсы модульного проектирования:
😎 Модульность помогает соблюдать единообразие в дизайне продукта. Макеты строятся из модулей с заготовленными внутренними и внешними отступами и правилами верстки.

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

😎 Модульный дизайн экономит время. Дизайнерам достаточно спроектировать модули и написать правила использования, а потом быстро собрать нужный макет.

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

Ниже подробнее о некоторых👇

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

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

Рассказываем, какие специалисты в области дизайна существуют и как их различать🛠

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

Ценность для бизнеса:
Графический дизайнер воплощает идеи и бизнес-требования в визуальные решения, которые передают нужные сообщения для потребителей.

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

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

📌UX/UI-дизайнер
Что делает: проектирует интерфейсы. UX (user experience) — скелет продукта: архитектура, проработанные сценарии и пользовательские пути. UI (user interface ) — внешний вид интерфейса: кнопки, цвета, типографика, анимация.

Ценность для бизнеса:
UX/UI-дизайнер проделывает большой объем работы: собирает информацию от бизнеса, изучает ЦА будущего продукта и составляет её портрет, проводит аудит конкурентов. Основная задача — предоставить пользователю удобный и доступный продукт, в том числе с помощью исследований. UX/UI-дизайнер также отвечает за визуальную часть интерфейса: цветовая палитра, сетка, UI-кит, типографика. UX/UI-дизайнер берет во внимание те показатели, которые важны для бизнеса: конверсия, стоимость привлечения одного клиента, средний доход с пользователя и отток клиентов.

📌CX-дизайнер
Что делает: CX (Customer experience) — опыт, который формируется у клиента при его взаимодействии с компанией, предоставленными ей продуктами и услугами. CX-дизайнер улучшает опыт этот взаимодействия на всех точках соприкосновения.

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

📌Продуктовый дизайнер
Что делает: формирует концепцию цифрового продукта и определяет, как с ее помощью решить проблемы потребителя. Продуктовый дизайнер вместе с менеджментом ведет продуктовую команду к воплощению стратегии, учитывая ограничения и потребности рынка и технологий. Такой специалист постоянно «варится» внутри отрасли и имеет глубокое понимание аудитории, целей и задач бизнеса.

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

📌Дизайнер 3D-графики
Что делает: 3D-дизайнер — специалист по трехмерной графике, который моделирует, визуализирует и анимирует объемные реалистичные объекты разной сложности. 3D-графика используется в интерфейсах, промышленности, рекламе, телевидении, интернет-маркетинге и других отраслях. Дизайнер 3D-графики умеет изобразить несуществующий объект так, что вы никогда не усомнитесь в его реальности.

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

📌Fullstack-дизайнер
Что делает: владеет компетенциями фронтенд-разработчика и дизайнера. Он способен с нуля создать цифровой продукт: не только спроектировать структуру сайта или приложения, определить дизайн элементов, но и самостоятельно построить его архитектуру и пользовательский интерфейс.

Ценность для бизнеса:
Комплексный взгляд на продукт — главное преимущество fullstack-дизайнера для бизнеса. Они не выполняют все работы, связанные с созданием продукта, но хорошо знают технологии всех этапов, что помогает им оптимизировать рабочие процессы. Знание технологий разработки и дизайна позволяет предвидеть ограничения, которые накладываются на продукт.

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

📌Motion-дизайнер
Что делает: анимирует иллюстрации и графику. Его задача — оживить графическую идею, привлечь и удерживать внимание к продукту.

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

📌Дизайнер дополненной реальности
Что делает: вписывает 3D-модели в реальность. Эти 3D-модели не просто существуют, а привязаны к объектам реального мира: улица, лицо, тело, земля, здание... Работает это так: человек заходит в Интернет-магазин, чтобы заказать обувь, и открывает камеру на смартфоне. Далее на экране появляются 3D-модели кроссовок, которые пользователь может виртуально примерить, наводя камеру на ноги.

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

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

Привет🙂 Сегодня поговорим про типографику, но для начала небольшой #test 🙂

Устроить себе небольшую проверку по знанию базовых моментов или нюансов в типографике — это отлично. Решили еще поделиться с вами некоторыми рекомендациями💡

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

На что обратить внимание при работе с текстом для мобильных приложений или адаптивной верстки🔽

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

📌Используйте достаточно крупный шрифт основного текста (от 14 до 17 пунктов) для комфортного чтения без необходимости увеличивать текст. Помните, что размер подбирается индивидуально под каждый выбранный шрифт, потому что один и тот же кегль у разных шрифтов будет иметь разную высоту.

📌Избегайте слишком тонких начертаний шрифтов — Thin, ExtraLight, Light. Они трудно различимы на мобильных устройствах.

📌Поддерживайте хорошую контрастность между текстом и фоном. Общие рекомендуемые значения контрастности: для основного текста не менее, чем 7:1 и 4,5:1 для заголовков или крупного текста. Чтобы проверить контрастность, воспользуйтесь онлайн-сервисами, например, Webaim.

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

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

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

📌Используйте выравнивание по левому краю для основного текста. Ровный край делает текст аккуратнее и проще для чтения. Для оформления небольших объемов текста в 2–3 строки можно использовать выравнивание по центру.

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

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

Источники:
— Простые правила мобильной типографики
— Справочное руководство по типографике в мобильном веб‑дизайне
— Contrast Checker
— Самый полный гайд по контрастности в интерфейсах
— Мобильная типографика
— 15 лучших практик по типографике в мобильном дизайне
— Webaim

Казалось бы, CPM-система должна повышать эффективность работы, а не тратить лишнее время пользователей👀

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

Эвристики Якоба Нильсена

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

Эвристика представляет собой рекомендацию, правило или суждение эксперта, которое принято считать верным. Эвристики Якоба Нильсена — не единственный набор таких правил. Свои эвристики есть у Дональда Нормана, Бена Шнейдермана, Вайншенка и Баркера, а также Иэна Коннелла. Но все они повествуют примерно об одном и том же.

Вот что писал Якоб Нильсен:

«Первоначально я разработал принципы для эвристической оценки в сотрудничестве с Рольфом Молихом в 1990 году. Четыре года спустя уточнил эвристики на основе факторного анализа 249 проблем юзабилити, чтобы вывести набор эвристик с максимальной объяснительной силой, в результате чего появился этот пересмотренный набор эвристик.

В 2020 году мы обновили эту статью, добавив дополнительные пояснения, примеры и ссылки. Хотя мы немного изменили язык определений, сами 10 эвристик остаются актуальными и неизменными с 1994 года. Если что-то остается верным на протяжении 26 лет, это, скорее всего, будет применимо и к будущим поколениям пользовательских интерфейсов».

Первая из десяти эвристик — видимость состояния системы (Visibility of System Status). Она касается гораздо большего, чем просто дизайн пользовательского интерфейса. По сути, речь идет об общении и прозрачности, которые имеют решающее значение для многих аспектов жизни. Люди стремятся к предсказуемости и контролю. Как правило, больший объем информации приводит к более эффективному принятию решений.

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

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

Видимость состояния системы — один из основных принципов удобного пользовательского опыта. Эвристика поощряет открытое и непрерывное общение с людьми или устройствами.

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

Источники:
— Jacob Nielsen. How I Developed the 10 Usability Heuristics [2024’s update]
— Jacob Nielsen. 10 Usability Heuristics for User Interface Design
— Aurora Harley. Visibility of System Status
— Nielsen’s Heuristic Evaluation: Limitations in Principles and Practice

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

📍Меню-гамбургер
Меню-гамбургер, или навигационное меню — распространенный значок с 3 горизонтальными линиями. Пользователь нажимает на значок, и открывается меню. За счет этого меню-гамбургер экономит место на экране.

Преимущества:
— Упрощает компоновку экрана
— Обеспечивает прямой доступ к навигации
— Идеально подходит для вторичного доступа
— Легко распознать

📍Плавающая навигационная кнопка
Плавающая навигационная кнопка или FAB — это значок круглой формы, который не отображается в пользовательских интерфейсах. Часто это касается контента для продвижения основного действия в мобильном приложении. Как и меню-гамбургер, FAB занимает мало места на экране телефона. Однако иногда, когда кнопку добавляют на все страницы, это может отвлекать пользователей. В таких случаях содержимое страницы может остаться незамеченным.

Преимущества:
— Занимает мало места
— Легко распознать

📍 Навигация на основе жестов

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

Преимущества:
— Более быстрая, естественная и эргономичная схема навигации
— Простая в использовании
— Используется уникальный шаблон дизайна пользовательского интерфейса
— Улучшает пользовательский опыт

📍Подменю навигации
Этот тип шаблона навигации обеспечивает несколько уровней иерархии в приложении. Один из лучших примеров — приложение Амазон.

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

Преимущества:
— Простой в использовании
— Упорядочивает содержимое приложения
— Помогает легко перемещаться между страницами
— Легко распознать

📍Полноэкранная навигация

Полноэкранный навигационный шаблон занимает все пространство экрана навигации. Ключевые особенности:
— Простота. У каждой страницы – простая навигационная структура, которая обеспечивает удобство работы пользователя.
— Наглядность. Структура полноэкранного навигационного меню понятна и не требует пояснений.
— Согласованность. Пользователи должны понимать, где они находятся и как быстро вернуться к страницам приложения, которые смотрели ранее.
— Ориентация на пользователя. Хорошо продуманное навигационное меню имеет одинаковый дизайн для всех страниц приложения без исключений.

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

📍Навигация по вкладкам

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

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

Преимущества:
— Легко распознать
— Улучшает пользовательский опыт

📍Навигация по боковой панели

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

Преимущества:
— Позволяет включать различные пункты меню
— Все элементы заметны
— Поддерживает настраиваемую навигацию
— Простой в использовании
— Занимает мало места на экране

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

Источники:
— Mobile App Navigation| Patterns and Examples.
— Mobile Navigation Guide: Basic Patterns & Examples
— Basic Mobile Navigation Patterns
— Navigation guides users through different parts of your app.