Дизайнер интерфейсов. Роль в продуктовой команде и возможности для роста
Дизайнер интерфейсов — это специалист, создающий для цифровых продуктов удобный интерфейс (часть программного обеспечения (ПО), предназначенную для взаимодействия с пользователем). Он обеспечивает посетителю простоту достижения его цели – то, что сейчас принято называть интуитивно понятным интерфейсом: это когда любой потенциальный клиент без труда разберется на сервисе по поиску работы, как отправить резюме, а в мобильном приложении – как за два клика заказать пиццу.
Дизайн интерфейсов – это про представление информации с учетом ее природы, особенностей цифрового носителя, принципов восприятия и решаемой задачи. Дизайн интерфейсов также призван сэкономить время инженеров, так как еще на фазе прототип понятно, как все должно работать. Это значит, что новая функция раньше окажется на живом у клиентов и сделает платформу, экосистему, инфраструктуру крепче и сильнее конкурентов.
Это относительно новая профессия, которая обретает все большую популярность.
Специалист, работающий в этой области, должен отличаться прекрасными аналитическими способностями, ведь именно он создает приятные, удобные и работоспособные интерфейсы для ПО, сайтов, приложений, техники, разнообразного оборудования.
Дизайнер интерфейсов создает видимое пользователям «лицо» ПО цифрового продукта, продумывает пути посетителей и какие действия они могут совершить на каждом шагу.
Специалист должен понимать требования потенциальных клиентов и просчитывать их действия и даже ошибки, максимально облегчая работу с тем или иным продуктом. Именно он определяет, как будет располагаться меню, какие кнопочки будет нажимать пользователь, чтобы перейти на ту или иную страницу, как будет выглядеть курсор, и решает многие другие задачи, поставленные заказчиком.
Дизайнер интерфейсов помогает создать новый продукт, реализовать новый сценарий и поддерживает развитие уже раскрученных приложений (прорабатывает новые сценарии). А еще он может благодаря аналитике найти точки для улучшения полезного сценария в продукте и предложить прототип.
Особенности профессии
Дизайнер интерфейсов вникает в результаты исследований, механику бизнес-модели, анализирует сценарии поведения, прототипирует варианты, чтобы разработать понятный и полезный интерфейс. Он прорабатывает детали того, как пользователь будет взаимодействовать с продуктом. В основные обязанности дизайнера интерфейсов обычно входит:
- Погружение в задачу и анализ ТЗ
- Применение дизайн-системы компании для сборки интерфейса
- Создание прототипов решения задачи
- Подготовка к разработке
- Сопровождение проекта на фазе реализации
- Анализ результатов совместно с разработчиками
- Изучение пути пользователя и расчет алгоритмов его действий;
- Анализ дизайна с целью отличить хороший и продающий дизайн от плохого;
- Тестирование готового дизайна сайта и исправление некоторых ошибок в нем;
- Анализ рынка;
- Создание инфографики и презентаций;
- Сбор и анализ требований, прототипирование, правки (для этого нужны знания технологий создания цифрового продукта).
- Верстка.
Основные этапы работы в дизайне интерфейса
Чтобы создать интерфейс, который будет комплексно решать задачи пользователя, дизайнеру нужно получить данные от других специалистов. Как правило, дизайнер интерфейсов работает в тесном взаимодействии с менеджером проекта, аналитиками данных и разработчиками.
Менеджер проекта передает дизайнеру хорошо проработанное технической задание – сама дизайн-система уже собрана. Вся неопределенность в проекте уже снята. Дизайнеру интерфейсов необходимо изучить сценарий поведения пользователей, чтобы создать понятный и полезный интерфейс.
Первый шаг — это всегда понять задачу. Если в продуктовой компании четко поставлена работа по продакт-менеджменту, то продакт-менеджер уже расчертил вектор развития продукта, вместе с аналитиками маркетологами разобрал сильные и слабые стороны игроков и четко знает, какой интерфейс нужен, а какой нет.
От дизайнера на этом этапе требуется вникнуть в бизнес-цели, изучить собранный контекст исследований и не потерять детали.
Второй шаг – концептуальное прототипирование. Дизайнер использует стандартные инструменты, к примеру Figma или InVision Studio. В нее закладываются эскизы и готовые компоненты, настраиваются микроанимации и уже получается продукт как живой. Дальше этот продукт отправляется участникам команды и собирается обратная связь.
Третий шаг – проектирование экранов и состояний. Когда концепт утвержден, в программе Figma прорабатываются все экраны и состояния со всеми нюансами навигации, используются компоненты существующей дизайн системы и дополняются необходимыми новыми компонентами.
Четвертый шаг – подготовка прототипа к разработке. Это самая простая работа, потому что некоторые дизайнерские программы делают все автоматически. Дизайнеру необходимо поддерживать дизайн-систему в актуальном состоянии (новые компоненты, их состояния, примеры работы в контексте) и применять принципы по организации дизайн-проекта. На этом этапе важен небольшой свод правил по поддержке дизайн-системы.
Пятый шаг – тестирование. В продуктовых командах развита культуру тестирования на пользователях. В специализированных программах можно протестировать прототипы, собрать обратную связь и передать продукт в разработку. Далее разработчики и аналитики выполняют работу по запуску и постановке задач на корректировку.
Дизайнер интерфейсов помогает команде разработчиков делать интерфейс удобнее для пользователей. Чтобы определить, что такое «удобнее» для самих себя, коллег-разработчиков и пользователей, они используют принципы проектирования:
- Скорость доступа к элементам интерфейса;
- Экономия внимания;
- Информативность;
- Находимость;
- Привычки;
- Сложность разработки.
Какими знаниями, личными качествами и навыками обладает дизайнер интерфейсов: профиль роли.
Эта специальность пока не слишком известна, ведь чаще всего дизайн интерфейсов возлагают на плечи профессионального программиста и графического дизайнера.
Soft Skills, необходимые для дизайнера интерфейса
- Клиентоцентричность
- Аналитическое и системное мышление
- Эмоциональный и социальный интеллект
- Креативность
- Развитые коммуникативные навыки
- Командная работа над проектом и делегирование
- Критическое мышление и сбор обратной связи от коллег и заказчиков
- Инструментальная гибкость
- Нацеленность на результат
- Аккуратность, тщательность и внимание к деталям
- Развитый художественный вкус, умение рисовать.
Hard Skills, необходимые для дизайнера интерфейса
- Развитие организационной культуры – знание и применение технологий формирования и развития организационной культуры;
- Инструменты управления – применение профессиональных методов управления процессами, проектами, продуктами в процессе цифровой трансформации
- Управление данными – знание и применение методов и технологий сбора, структурирования, анализа данных для построения новых организационных и управленческих моделей, продуктов и сервисов.
- Погружение в предметную область для генерации перспективных идей в процессе работы над продуктами.
- Проектирование интерфейсов и UX-дизайн.
- Инструменты организации пространства и влияния на восприятие: модуль, типографика, цвет, композиция, образы, знаки, сторителлинг в диджитал;
- Бренд-дизайн – понимании стратегии развития продукта для быстрого принятия решения на уровне интерфейса;
Профессиональные знания специализированных программ:
Дизайнер интерфейсов должен уметь работать с разными инструментами, ведь именно с их помощью он достигает поставленных целей:
- знание основ языков программирования;
- умение работать с графическими редакторами;
- знание специализированных программ: Figma, Principle, ProtoPie, InVision Studio, InVision Inspect и другие.
- Customer Journey map (CJM, карта путешествия потребителя) — визуализация истории взаимодействия потребителя с вашим продуктом через разные каналы в определенный период времени.
- отчеты от аналитиков из систем аналитики (Google Firebase, Amplitude, OWOX BI, Google Analitycs 360)
- BPMN-диаграммы.
Карьера дизайнера интерфейсов.
Изначально дизайнер интерфейсов должен научиться создавать сайты, исправлять ошибки, уделяя много внимания изучению теории. Он может рассчитывать на карьерный рост, но только при условии солидного опыта работы. Этот специалист может занять должность арт-директора, начальника отдела или же стать ведущим дизайнером компании.
Дизайн интерфейсов – это работа для перфекционистов: здесь можно всю жизнь посвятить полировке функциональных элементов (кнопок, меню, ссылок) и микроанимаций, совершенствованию интерфейса продукта и опыта взаимодействия. Как правило, дизайнер интерфейсов – это стартовая позиция в продуктовой команде.
С точки зрения творческой составляющей, для ребят, которые хотят быть заметными, творить разнообразные выразительные системы, делать новые выделяющиеся на международном рынке решения, жечь креативом и наглядными результатами, здесь конечно пространство для роста резко ограничено.
При наличии определенного опыта можно развиваться в бренд-дизайне и вырасти до UI-дизайнера или заняться исследованиями, аналитикой и уйти в продуктовый дизайн (UX-дизайнер).
UI-дизайнер чаще работает в международном диджитал-агентстве и на фрилансе. Основа работы UI-дизайнера – это творчество в диджитал пространстве. Ему нравится делать новое на вкус, цвет, по ощущениям, отгружать ценность по всем фронтам заметным способом, помогать прорабатывать видение и поднимать бренды в диджитал. Работать с множеством разнообразных клиентов поднимать новые уникальные продукты, которые выделятся из толпы. Это идеальная работа для творческих ребят, увлекающихся экспериментами, конструированием и рисунком. Ребята жаждут открытий и новых ощущений. Их зажигает создание концептов, прототипов будущих продуктов. Именно такие ребята сподвигают общество к переменам, осмыслению и пересмотру взглядов. К ним приходят за свежим уникальным решением. Из таких разнообразных трофеев он и собирает портфолио.
К нему часто приходят, когда программировать еще даже не начали. В продуктовых компаниях таких ребят по пальцам пересчитать, в отличие от дизайнеров интерфейсов, которых много.
UX-дизайнер (CX/UX-исследователь) –это инженер-маркетолог, который исследует опыт пользователей: изучает аналитику, продумывает связи между элементами интерфейса и их расположение, составляет технические задания для редакторов. И на основе исследования разрабатывает наиболее эффективный прототип. Чтобы работать UX-дизайнером в полном объеме требуются определенные навыки. В отличие от дизайнера интерфейсов он больше исследует, предлагает концепции, работает над воплощением, затем вместе с аналитиками корректирует курс. Продуктовый дизайнер выдает больше смелых решений проблем в жизни клиентов, а не просто работает над интерфейсом по готовому ТЗ. Он исследует настоящую жизнь клиентов и находит способы как сделать ее лучше.
Дизайнеру интерфейсов лучше начать лучше с продуктовой команды, особенно если практики в дизайне в иллюстрации и веб-дизайне немного.
Со временем можно погрузиться в UX-дизайн. Если преобладает творческое начало и развит художественный вкус, то лучше начинать с работы в агентстве.
Самое главное – начать собирать портфолио как можно раньше. Портфолио и навыки – это основа продвижения дизайнера интерфейсов по профессиональной и карьерной лестнице. Как правило, уже в течение года набирается внушительное портфолио работ и складывается понимание куда развиваться дальше.
Наталья Карташева,
Эксперт центра
Дизайн интерфейса для промышленного контроллера / Хабр
Привет! Меня зовут Георгий, я дизайнер.
Пока мы все сидим по домам, я решил поделиться опытом в разработке дизайна интерфейсов для промышленной автоматизации.Так сложилось, что дизайном приложений и сайтами занимается большое количество профессионалов. А вот хороших специализированных интерфейсов, предназначенных для управления инженерными системами не так уж много.
Почему-то принято считать, что в этой отрасли дизайн не нужен, а если инженер не может разобраться в системе, то это, скорее, говорит о его квалификации, а не о том, что интерфейс может быть плохо продуман, информация подается хаотичным набором, в котором невозможно быстро ориентироваться, что, в свою очередь ведет к переутомлению и ошибкам пользователя.
Для начала расскажу, как я сделал интерфейс пульта управления системой вентиляции для ПО компании Segnetics. Проект мы начали с изучения пользователя и среды эксплуатации. Подробно изучили и смоделировали, как и где будет использоваться наша панель. Часто это полутемные технические помещения, расположение на щитах или установках. Поняв это, стали искать аналоги и способы решения схожих задач. Мы перебрали много интерфейсов: медицинские приборы, автомобили, управление системами производства и т.д. Решили, что нам нравится стиль интерфейсов современных авиационных приборов, главное достоинство которых состоит в том, что летчик должен максимально быстро считывать только важную информацию, очищенную от визуального шума. Этот принцип мы заложили в основу всего будущего интерфейса и перешли к прототипированию.
Утвердив компоновку перешли к эскизному поиску. Мы перебрали большое количество вариантов эскизов и стилей. Примерно поняли, что хотим, решили попробовать более детальную проработку, но небольшого фрагмента. Флэт? Скевоморфизм? Может быть взять стиль чертежной графики?
Постепенно находим тот образ, который нас устраивает и начинаем проработку. Основной экран, с которым будет взаимодействовать оператор — мнемосхема. На ней должны быть отображены важные параметры притока и вытяжки, статусы и состояния устройств в системе. Кое-какие приемы подсматриваем в авиаприборах, собираем мнемосхему, смотрим ее в максимальной нагрузке, и как она будет выглядеть 90% времени работы.
Утверждаем общий стиль и переходим к проработке остальных экранов. Наиболее интересен экран задачи установок. Мы перебрали несколько вариантов — пикер мобильного телефона, ввод числа с клавиатуры и т.д. И решили, что круто сделать сенсорный диммер для грубого задавания числа, и кнопки +\- для более точного.
Тут я бы хотел сказать большое спасибо программистам Segnetics, которые заставили плавно крутиться колесо настройки и приятно отыгрывать во время его остановки. Оно, правда, получилось очень кайфовым.
Прорабатываем все экраны и анимируем устройства, состояния. Аварии, заморозки, обрывы ремня, то как надувается и сдувается «лифчик» фильтра, во время запуска и остановки системы. Как наполняются прогресс-бары.
Следующим этапом мы адаптировали интерфейс панели управления для использования в другом контроллере. Добавили функцию создания расписания, изменили основной экран, так как данный контроллер может управлять только конкретной установкой, в то время как панель поддерживает управление несколькими системами.
Заказчиком следующего проекта стала Московская сеть моек самообслуживания Cooga.
У меня есть друг программист, который ведет отличные курсы обучения программированию для инженеров вот тут (plc-edu.pro), он обратился ко мне с вопросом.
“Гог, я тут делаю программу для моек самообслуживания. Заказчик хочет, чтобы все выглядело профессионально и круто. Можешь нам помочь в этом?”
Мне, как дизайнеру, предстояло сформировать логику взаимодействия пользователей разного уровня с интерфейсом. Понять, какие данные должны видеть все юзеры, а к чему нужен доступ только через пароль. Как выстроить логику задачи настроек так, чтобы она была интуитивно понятна и не требовала многостраничного мануала?
Для начала я составил список ролей и важных для них действий по шагам. Что нужно сделать, чтобы реализовать тот или иной сценарий.
В результате у нас получился интерактивный прототип в Фигме, на котором отображались все основные функции и действия. На этом прототипе я провел несколько тестов, чтобы проверить дизайн-гипотезу и логику
Как выглядит интерфейс в итоге, ничуть не менее важно (хотя многие считают по-другому) чем то, как работает сервис. Внешний вид формирует впечатление от сервиса. Создает настроение.
Строит эмоциональную связь между человеком устройством. Именно дизайн делает кайфовым пользование сервисом. Если вы хотите строить долгие отношения с вашим клиентом, обратите на это внимание. Нарисовав все иконки, кнопочки и их состояния, переходим к программированию.
Тут хочется отдельно рассказать о том, как Фигма облегчает жизнь. Первый свой интерфейс вентиляции я рисовал в Иллюстраторе. Мне приходилось нарезать в ПНГ сотни элементов и их состояний, сохранять множество папок. Делать попиксельную разметку положения элементов на экране. К счастью, сегодня это все не нужно. Добавляем программиста в рабочий файл Фигмы и он уже на стадии прототипа может смотреть, какие механики будут применяться и давать свою оценку возможности.
Еще один небольшой проект — выставочный интерфейс эмуляции работы контроллера теплового насоса для компании Thermex.
Не буду повторяться, путь тот же самый — от целей пользования и прототип к окончательному наведению красоты.
Проект был выполнен за 2 недели от подписания договора до финального Ок от клиента.
Параллельно с проектами для автоматизации я работал над интерфейсами медицинских систем. Приложение для врачей приемного отделения, приложение для участковых врачей, которые ходят по домам. Интерфейс регистратуры и дизайн системы назначения лекарственных препаратов. Если интересно, расскажу в следующий раз.
Открыт для сотрудничества и буду признателен за конструктивную критику!
Основы информационной архитектуры | Usability.gov
Информационная архитектура (IA) ориентирована на организацию, структурирование и маркировку контента эффективным и устойчивым способом. Цель состоит в том, чтобы помочь пользователям найти информацию и выполнить задачи. Для этого вам нужно понять, как части соединяются вместе, чтобы создать большую картину, как элементы соотносятся друг с другом внутри системы.
Почему важна хорошо продуманная ИА
По словам Питера Морвилля, цель вашей ИА — помочь пользователям понять, где они находятся, что они нашли, что вокруг и чего ожидать.
В результате ваш IA информирует стратегию контента, определяя выбор слов, а также информирует о дизайне пользовательского интерфейса и дизайне взаимодействия, играя роль в процессах создания каркасов и прототипов.
Что вам нужно знать
Чтобы добиться успеха, вам необходимо разностороннее понимание отраслевых стандартов для создания, хранения, доступа и представления информации. Лу Розенфельд и Питер Морвиль в своей книге Information Architecture for the World Wide Web отмечают, что основные компоненты IA:
- Организация Схемы и структуры : Как вы классифицируете и структурируете информацию
- Системы маркировки : Как вы представляете информацию
- Навигационные системы : Как пользователи просматривают или перемещаются по информации
- Поисковые системы : Как пользователи ищут информацию
Для создания этих информационных систем необходимо понимать взаимозависимый характер пользователей, контента и контекста.
Розенфельд и Морвилл назвали это «информационной экологией» и визуализировали в виде диаграммы Венна. Каждый круг относится к:
- Контекст : бизнес-цели, финансирование, политика, культура, технология, ресурсы, ограничения
- Контент : цели контента, типы документов и данных, объем, существующая структура, управление и право собственности
- Пользователи : аудитория, задачи, потребности, поведение при поиске информации, опыт
IA Sub-Specialities
Поскольку область IA сложна и при работе с большими информационными системами задача становится более масштабной, иногда специалисты выбирают специализированную нишу в рамках дисциплины. Некоторые примеры подспециальностей IA включают сосредоточение внимания на поисковых схемах, метаданных, таксономии и т. д.
Каталожные номера
- Элементы взаимодействия с пользователем: ориентированный на пользователя дизайн для Интернета и не только (2-е издание) Джесси Джеймс Гарретт
- Информационная архитектура для всемирной паутины: проектирование крупномасштабных веб-сайтов Питер Морвиль и Луи Розенфельд
- Информационная архитектура, Руководство по веб-стилю, 3-е издание.
- Концепции информационной архитектуры
- Компоненты, используемые в информационной архитектуре
- Информационная архитектура 3.0
- Понимание информационной архитектуры
Что такое дизайн пользовательского интерфейса (UI)?
Вот вся литература по UX по User Interface (UI) Design от Interaction Design Foundation, собранные в одном месте:
10 отличных сайтов с шаблонами дизайна пользовательского интерфейса
Вы ведь не хотите потратить всю свою жизнь на переделку колеса, не так ли? Нет, мы тоже. Если вы ищете дизайн
- 1,4 тыс. акций
- 2 года назад
Система сеток: создание надежного макета проекта
Теперь, когда мы увидели некоторые сетки в работе в статье о правиле третей, давайте рассмотрим их более подробно.
В качестве конц.
- 1,2 тыс. акций
- 2 года назад
Адаптивный и адаптивный дизайн
Различия между отзывчивым и адаптивным подходами к дизайну выявляют важные возможности для нас, как для веб-разработчиков, так и для разработчиков приложений.
- 1,2 тыс. акций
- 2 года назад
Повторение, узор и ритм
Давайте рассмотрим три предмета, которые на первый взгляд могут показаться вам невероятно простыми и не требующими пояснений. Хоуев
- 1,2 тыс. акций
- 2 года назад
9 бесплатных инструментов для создания каркасов
Вайрфреймы помогают быстро придумывать и тестировать свои идеи.
