Есть ли такая профессия проектировщик интерфейсов

Опубликовано: 18.09.2024

Специалист по юзабилити (usability) - чем занимается, перспективы профессии

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

Общее описание

Специалист по юзабилити (usability) — это одна из самых редких и востребованных на данный момент бизнесом профессий. Такие специалисты занимаются проектированием и исследованием пользовательских интерфейсов. Александр Павлович, руководитель департамента дизайна продуктов ОАО «ВымпелКом» (ТМ «Билайн») рассказывает: «В течение короткого промежутка времени такой специалист должен проанализировать цели и задачи клиента, предложить свое видение выполнения поставленных задач, предъявить макет интерфейсной среды, в которой пользователь будет адресовать свои запросы системе и, получив от неё обратную связь, продолжать свой путь к намеченной цели. Разрабатывая новый (или улучшая уже существующий) интерактив (то есть взаимодействие) клиента и системы, специалист по юзабилити должен учесть все связанные с данной задачей факторы: технические ограничения системы, моторные и ментальные ограничения человека, фактор времени, бюджет и прочее. Скорректировав интерактив, он должен его подробно описать и согласовать с остальными участниками проекта».



На сегодня есть два направления этой профессии:

    • юзабилити-исследования,
    • юзабилити-дизайн (проектирование).

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

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

Смежные карьеры
Некоторые приходят в эту профессию из психологии, другие из проектирования (например, из ИТ или разработки веб-сайтов), часть специалистов переходят из маркетинговых исследований. Схожие названия данной должности, встречающиеся на сегодняшнем рынке, это HCI-специалисты, дизайнеры пользовательских интерфейсов, Human Factor специалисты.

Варвара Агапонова, консультант по подбору персонала в сфере ИТ и телекоммуникаций, АНКОР в Санкт-Петербурге, рассказывает: «Позиция специалиста по юзабилити существует во многих крупных разработческих компаниях, студиях веб-дизайна. Такой специалист является одним из неотъемлемых участников проектов по созданию информационных систем, наравне с разработчиками, тестировщиками, системными аналитиками.

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

«В „ВымпелКоме“ профессии учат, — рассказывает Александр Павлович. — Где-то год требуется, чтобы понять фундаментальные теоретические основы и начать применять их эффективно на практике в уже реальных проектах. „ВымпелКом“ — очень сложная организация, и если у вас получится эффективно проектировать интерфейсы в сложных условиях, то в остальных компаниях в рамках этой профессии вам будет работать значительно проще и легче. Специалисты, прошедшие школу нашей компании, очень высоко ценятся на внешнем рынке».

Функциональные обязанности
В функциональные обязанности такого специалиста входит:

Навыки/Личные качества
Что касается навыков и умений, которыми должен обладать претендент на данную вакансию, можно выделить следующие

    • знание и понимание принципов юзабилити, умение их применять;
    • знание последних тенденций в области дизайна и юзабилити сайта;
    • знание особенностей дизайна веб-страниц и оптимизации графики;
    • знание базовых стандартов и методик тестирования интерфейсов;
    • владение графическими пакетами: Adobe Photoshop, Adobe illustrator и др.;
    • владение средствами быстрого прототипирования;
    • понимание всех этапов создания интернет-проектов;
    • владение любым современным ПО по проектированию и документированию пользовательских интерфейсов ( Axure, MS Visio, MS Word, Adobe InDesign, Sparx EA и др);
    • опыт взаимодействия с веб-разработчиками по составлению документации и требований к интерфейсам;
    • желательно понимание концепции User Centered Design и знания JavaScript и верстки.

Для специалиста по юзабилити очень важно уметь встать на позицию обыкновенного «юзера», который будет пользоваться или уже пользуется продуктом/проектом. Он должен понять, насколько данный продукт в такой форме удобен (под удобством понимается эффективность решения задач клиентом при минимизации его усилий). Также очень важно уметь аргументированно объяснить и согласовать свой подход/свое видение внутри рабочей группы.

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

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

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

Плюсы и минусы

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

Из минусов Александр Павлович отмечает следуюущее: «К сожалению, в России пока очень мало организаций (вне сферы ИТ и Телекома), в которых соответствующие функции действуют на фундаментальной основе. Обычно это носит случайный характер. Даже если в компанию и берут юзабилити-специалиста, часто не знают, чем он точно должен и чем не должен заниматься, не знают, как его связать с остальными бизнес-процессами. И, соответственно, начинают ему поручать то, что он имеет право не уметь делать — например, определять бизнес-цели продукта (то есть по сути выполнять функции специалиста по маркетингу) или делать визуальный дизайн (то есть рисовать и становиться уже оформителем)».

Оплата труда
Александр Павлович рассказывает: «Раньше (пару лет назад) минимальная стоимость такого специалиста была в районе 45 000-50 000 рублей, сейчас же заработная плата начинается от 60 000-70 000 рублей (даже для начинающего «стажера»). Такая цена связана с большим дефицитом опытных специалистов, многих из которых рынок знает буквально по именам. Из-за этого сегодня очень распространен найм сотрудников через профессиональные связи и знакомства в юзабилити-сообществах. Средняя заработная плана на сегодняшний день — около 100 000 рублей, но у некоторых профессионалов уровень дохода может доходить до 150 000-200 000 рублей. На стоимость специалиста влияет количество сделанных проектов, его известность в бизнес-среде (которая зависит от его энергичности и профессиональной активности, например, количества докладов, сделанных на различных профильных мероприятиях и пр.».

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

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

1. Текстовая иерархия

UI-дизайнер работает над текстовой иерархией. Например, делает заголовки заметнее, чем обычный текст. Это экономит время: пользователь может пройти текст по диагонали и понять структуру, остановиться там, где ему нужно, а не читать всё от начала до конца.


2. Цвет и форма

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


3. Сетки

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


Навыки хорошего дизайнера интерфейсов

1. Насмотренность

UI-дизайнер накапливает визуальный опыт, «банк идей» в голове. Он любопытный и внимательный к деталям, умеет их анализировать. На одну задачу у него есть разные варианты решений.

Насмотренность значительно расширяет горизонты и сокращает творческие муки при работе с любым проектом.

2. Развитое чувство стиля и целостность дизайна

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

3. Типографика

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

4. Передача уникальности, эмоций продукта

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

5. Владение современными инструментами

Самые базовые и необходимые графические программы:

    ; ;
  • Adobe Illustrator; .

Инструменты для создания прототипов:

  • Figma;
  • InVision; ; .

6. Презентация своей работы

Весомый плюс для UI-дизайнера — хороший навык презентации работы, чтобы всё было просто и понятно, заказчик или партнёр вовлекался и погружался в решение. Такой soft skill повышает ценность специалиста на рынке.

Самостоятельное освоение профессии UI-дизайнера — довольно интересный, но длительный процесс. Сложно самому быстро и глубоко разобраться в необходимых программах, наработать навыки и начать понимать пользователя. Гораздо проще и эффективнее пройти онлайн-курсы, где удобный формат обучения и понятный структурированный материал, а эксперты помогают с любыми вопросами. Именно так будет, если пойти учиться на UX/UI-дизайнера в Skillbox.

Где работать UI-дизайнеру

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

Есть несколько вариантов, где может работать UI-дизайнер.

1. Продуктовая компания

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

2. Аутсорсинговые компании

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

Разнообразие проектов — хорошая возможность «набить руку» и найти направление, которое наиболее интересно.

3. Фриланс

Главное отличие — UI-дизайнер выбирает только те проекты, которые ему интересны. Здесь заработок напрямую зависит от продуктивности, репутации и «мягких навыков».

Сколько получают UI-дизайнеры

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

У UI-дизайнеров есть стандартная градация:

  • Junior — начинающий специалист с минимальным опытом или без него;
  • Middle — опытный специалист со стажем от трёх лет;
  • Senior — высококлассный специалист с большим опытом работы, иногда его называют старшим дизайнером продукта.

По данным hh.ru на начало июля 2020 года, зарплата UI-дизайнеров колеблется от 30 до 250 000 рублей.

  • Джуниору предлагают 30–40 тысяч рублей.
  • Мидлу — от 90 до 150 тысяч.
  • Синьору готовы платить от 150 000 рублей и выше; есть вакансии и от 250 тысяч.

Важно: стаж не гарантирует обладание необходимыми навыками. Можно несколько лет выполнять одну и ту же работу и так и не стать высококлассным специалистом. А можно прокачивать скилы, браться за серьёзные задачи и через короткое время с нуля достичь уровня Middle.

Профессия юзабилити-специалист: подробное описание

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

Общие сведения о профессии

Адаптированный на русский язык термин «юзабилити» происходит от английского слова usability. Если перевести его дословно, то получится – простота и удобство пользования, уровень комфорта от использования. В данном случае речь идет об удобстве использования программ и сайтов, а usability-специалиста еще могут называть проектировщиком интерфейсов, UI/UX дизайнером. Хотя это не совсем корректно, но при поиске работы вакансии нужно искать по всем этим вариантам, что существенно увеличит шансы на успешное трудоустройство.

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

Еще больше предложений по обучению работе с юзабилити сайтов вы найдете здесь: дизайн интерфейсов и UX/UI

Профессия юзабилити-специалист

Чтобы понять, почему профессия юзабилити-специалиста становится все более востребованной, следует зайти на Internet Live Stats и посмотреть на общее число сайтов. К моменту написания этого материала их количество приблизилось к отметке 1.78 млрд.! При такой огромной конкуренции сайтам уже мало просто привлечь трафик, они еще должны удержать посетителя и конвертировать его визит в свою прибыль. Если ранее пользователи были готовы тратить какое-то время на поиск нужной информации на сайте, то сейчас они с большей вероятностью уйдут с площадки, если встретят любые – даже самые малейшие затруднения.

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

Функциональные обязанности usability-специалиста

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

Алгоритм действий специалиста по улучшению интерфейсов

Список функциональных обязанностей выглядит так:

  1. Анализ GUI (graphical user interface) – на русском ГИП (графический интерфейс пользователя).
  2. Знакомство с проектными документами, анализ пожеланий клиента по поводу пользовательского интерфейса.
  3. Составление портрета целевой аудитории (ЦА) и изучение ее рекомендаций по интерфейсу. Для этого анализируют отзывы, смотрят, как ведут себя посетители на сайте, например, через вебвизор Яндекса.
  4. Разработка стратегии пользовательского поведения на сайте.
  5. Создание сценариев, по которым проведут тесты разрабатываемого GUI.
  6. Набор группы для проведения тестов.
  7. Тестирования с фиксацией выявленных сложностей и их классификацией.
  8. Детальный анализ всех результатов проведенных тестов.
  9. Подготовка рекомендаций по улучшению GUI.
  10. Внесение необходимых изменений.

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

-50% на все курсы Skillbox


Уникальное предложение — -50% на ВСЕ курсы Skillbox. Получите современную онлайн-профессию, раскройте свой потенциал.

Активировать скидку →

Какими качествами должен обладать usability-специалист

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

  1. Математический склад ума.
  2. Аналитические способности.
  3. Усидчивость.
  4. Коммуникабельность.
  5. Внимание к деталям.
  6. Способность к самоорганизации.

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

Навыки usability-специалиста

Что должен знать и уметь проектировщик интерфейсов

  1. Уметь использовать основные принципы usability.
  2. Знать общепринятые технологии и стандарты для проведения тестов.
  3. Следить за трендами в сфере usability и веб-дизайна.
  4. Уметь работать с популярными редакторами растровой и векторной графики: Photoshop и Illustrator.
  5. Знать популярные программы для проектирования интерфейсов пользователя: Axure, Sparx EA, InDesign и MS Visio.
  6. Уметь быстро создать рабочий прототип для тестов.
  7. Владеть основами верстки и JavaScript.
  8. Понимать HCD (Human Centered Design) и UCD (User Centered Design).
  9. Владеть английским на достаточном уровне для чтения нужной литературы.

Преимущества и недостатки

К однозначным преимуществам относят:

  1. Профессия востребованная.
  2. Зарплаты высокие.
  3. Рабочий процесс нескучный.
  4. В рамках профессии есть куда расти.

Среди недостатков выделяются:

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

Сколько зарабатывает юзабилити-специалист

Диапазон зарплат по России составляет от 20 до 80 тыс. рублей, а для Москвы – от 40 до 150 тыс. руб. Вакансий на популярных сайтах с предложениями о работе немного, но они всегда есть, да и часть работодателей предлагают удаленный формат сотрудничества. Поэтому без работы нормальный специалист точно не останется.

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

Вакансии юзабилити-специалиста

На rabota.yandex.ru можно видеть следующие вакансии, демонстрирующие общий тренд – зарплата оговаривается на собеседовании и сразу не указывается:

Вакансии юзабилити-специалиста2

Однако даже без указания ЗП видно, что условия работы очень достойные. Вот описание вакансии для сотрудника без опыта:

Вакансии для сотрудника без опыта

Как стать юзабилити-специалистом

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

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

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

Ответ на второй вопрос уже сложнее и отражает моё персональное мнение. Но я попробую обосновать свою позицию.

Сначала лирическое отступление номер один. Профессия эта сравнительно молодая и похожа на растущее ветвистое дерево, где каждая веточка отвечает за своё направление. Есть толстые ветки профессий вроде UX, UI, аналитиков, AB-тестировщиков, маркетологов и других. Есть такие же толстые ветки с тематиками: сайты, мобильные приложения, интерфейсы терминалов и прочие. Из толстых ветвей растут более тонкие веточки вроде «AB-тестировщик мобильных приложений на яблочной платформе» или «UI-дизайнер и верстальщик тем для вордпресса». Это дерево живое: оно находится в фазе быстрого роста. Каждый год появляются новые технологии, направления и методы работы. Точно так же какие-то из них исчезают, словно опадающие с дерева листья.

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

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

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

Вернёмся к проектированию. Сможет ли выпускник школы, прошедший один из курсов по проектированию интерфейсов, стать проектировщиком? Конечно, сможет. Он сможет делать интерактивные прототипы в специализированном софте, которые могут неплохо выглядеть и работать. Так же, как и изучив Autocad и прочитав несколько книг по архитектуре, он сможет сделать небольшой проект, который будет хорошо выглядеть и с высокой вероятностью сможет быть продан. Очевидно, что в случае с таким горе-архитектором, проблемы возникли бы на этапе реализации (я уже не говорю про эксплуатацию) здания или сооружения, после чего подрядчики отказались бы строить такой проект, т.к. цена ошибки — человеческие жизни. Проектировщик же интерфейсов ничем не рискует в большинстве случаев. Я сейчас говорю про сайты и приложения, а не про интерфейсы самолётов или тех же самых атомных электростанций.

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

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

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

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

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

SEO-оптимизация. Как проекты индексируются поисковыми системами, как происходит поисковая выдача, что такое мета-данные и прочие базовые штуки.

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

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

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

Здесь описан портрет проектировщика интерфейсов продуктовой команды Контура.

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

Про другие роли в наших продуктовых командах можно почитать в заметке на VC.ru

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

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

Главный приоритет работы проектировщика в Контуре — продукт, а не макеты. Если в макетах всё хорошо, а в продукте всё плохо, работа проектировщика не выполнена. Хороший проектировщик часто заходит в сервис, смотрит, как работают старые и новые функции, следит за порядком и заводит баги.

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

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

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

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

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

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

Использует сценарный подход: за каждой кнопкой, экраном, разделом в системе проектировщик видит сценарии работы реальных пользователей. Вопрос «Какой сценарий?» должен предшествовать любым изменениям в продукте.

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

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

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

Работа над задачей

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

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

Во время обсуждения дизайна записывает все комментарии. Самое подходящее место — прямо в макете. Невыполненное обещание «всё запомнить» демотивирует команду и снижает доверие к дизайнеру: зачем что-то говорить, если твои идеи будут просто забыты.

Если не понятно, что делать дальше, это повод встретиться и поговорить, а не сидеть и думать одному.

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

Если программист говорит: «Это нельзя сделать», проектировщик спрашивает: «Почему?». Нередко отвечая на этот вопрос, программист вдруг находит решение.

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

Не подписывает в прототипе каждое расстояние и размер. Вместо этого учит верстальщика самостоятельно подмечать детали, и делать «как на картинке».

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

Прототип

  • высокая степень неопределенности, только начали думать над большой непонятной штукой — стикеры для записи идей и приоритизации;
  • если поняли что делать и надо представить это в виде интерфейса — набросок на бумаге/доске;
  • если интерфейсное решение есть и можно делать следующий шаг — прототип в Figma или Sketch;
  • провели юзабилити-тестирование — можно делать финальный прототип, добавлять дизайн.
  • Ширина макета подогнана для красивого отображения.
  • Текст и иллюстрации не похожи на реальные и подобраны специально к данной странице.
  • В тексте расставлены переносы или неразрывные пробелы, которых в жизни не будет.
  • Общие для всех страниц элементы скорректированы, чтобы сделать конкретный макет симпатичнее.

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

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

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

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

Матчасть

  • Алан Купер «Психбольница в руках пациентов»
  • Влад Головач «Дизайн пользовательского интерфейса»
  • Дональд Норман «Дизайн привычных вещей»
  • Джеф Раскин «Интерфейс: новые направления в проектировании компьютерных систем»
  • Джейсон Фрайд, Дэвид Хайнемайер Хенссон «Rework. Бизнес без предрассудков»
  • Эрик Рис «Бизнес с нуля. Метод Lean Startup для быстрого тестирования идей и выбора бизнес-модели»
  • Максим Ильяхов, Людмила Сарычева «Пиши, сокращай. Как создавать сильный текст»
  • Артем Горбунов «Типографика и верстка»
  • Илья Бирман «Пользовательский интерфейс»
  • Роберт Брингхерст «Основы стиля в типографике»

Влад Головач разочаровался в своей первой книге и просит не ставить на нее ссылки.

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

  • Ключевые слова: юзабилити, UI, UX, когнитивное сопротивление, когнитивный диссонанс, аффорданс, ментальная модель, эвристики, эмпатия.
  • Свойства хорошего интерфейса:
    • Незаметность
    • Информативность
    • Простота ментальной модели
    • Высокая скорость работы или такое ее восприятие
    • Мгновенная обратная связь
    • Легкость обучения
    • Предостережение от ошибок
    • Формирование привычек

    Дизайнерские правила не обязательно соблюдать, но обязательно понимать. © Илья Бирман

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

    Знает руководство по фирменному стилю Контура и использует его в своей работе.

    Использует стандартные контролы и паттерны из Контур.Гайдов. Без необходимости не придумывает свои контролы. Но когда стандартный контрол не работает — изобретает свой, «продает» его команде и доводит до качественной реализации. Не придумать уникальный контрол там, где он действительно нужен — так же плохо, как не использовать стандартные контролы там, где они работают.

    Тексты

    Слова в дизайне продукта не менее важны, чем пиксели. © Костя Горский

    Весь текст в интерфейсе — зона ответственности проектировщика. Даже если какой-то текст написал другой человек, проектировщик должен контролировать качество.

    Основные интерфейсные тексты проектировщик пишет сам: названия кнопок, сообщения об ошибках, всплывающие подсказки и контекстную справку.

    Интерфейсные тексты емкие и понятные, соответствуют инфостилю и нашему гайдлайну по текстам.

    Дизайн и верстка

    Хороший вкус

    Имеет чувство прекрасного, отличает плохое от хорошего.

    Композиция

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

    • оптический центр и гравитация
    • негативное пространство
    • динамика, равновесие, взаимодействие объектов, соотношения масс
    • визуальные маршруты
    • модульные сетки

    Знает устройство цветовой модели RGB.

    Понимает что такое контрастность, насыщенность.

    Знает особенности цветопередачи плохих мониторов.

    Может подобрать цветовые сочетания для нового продукта.

    Типографика

    Делает аккуратную типографику в интерфейсах.

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

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

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

    Графический дизайн

    Может подобрать и встроить иллюстрацию.

    Может нарисовать набор иконок.

    Может разработать дизайн сервиса с нуля.

    Пользователи и предметная область

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

    Мы не используем слово «юзер». Совсем.

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

    Знает портрет своего пользователя.

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

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

    Понимает основы профессии пользователя: термины, задачи, законодательство.

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

    Регулярно присутствует на юзабилити-тестированиях, использует другие возможности пообщаться с пользователями вживую.

    Регулярно слушает записи разговоров техподдержки.

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

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

    Веб-технологии

    • Различия и область применения графических форматов: JPEG PNG GIF SVG.
    • Масштабирование веб-страниц и шрифтов.
    • Ограничения старых браузеров.
    • Как работает URL.
    • Клиент-серверная архитектура и типы передачи данных в вебе:
      • Синхронная передача данных с перезагрузкой страниц (GET/POST).
      • Асинхронная передача данных.
      • Одностраничные приложения.

      Знает основы верстки HTML/CSS.

      Может открыть веб-инспектор и что-то быстро поменять-прикинуть.

      Знает основы JavaScript.

      Умеет пользоваться библиотеками и фреймворками: JQuery, GreenSock, Bootstrap.

      Может сверстать интерактивный прототип своими руками.

      Прототипирует в верстке.

      Статистика

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

      • Браузер, разрешение экрана, операционная система.
      • Посмотреть статистику использования.
      • Пути переходов по сайту и системе.
      • Тепловые карты.
      • Записи веб-визора.

      Может сам настроить отчеты в Яндекс.Метрике, Гугл.Аналитике.

      Может написать SQL-запрос к базе.

      Знает системы мобильной аналитики.

      Самоорганизация

      Не прокрастинирует: не тратит рабочее время на Фейсбук, Твиттер, бесполезные чатики и т.п.

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

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

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

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

      Инструментарий

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

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

      Знает Figma или Sketch, и умеет быстро в них работать: использует символы, шорткаты и плагины.

      В Контуре не проектируют в редакторах, которые устарели или плохо подходят для дизайна интерфейсов: Photoshop, Illustrator, InDesign и пр.

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

      Умеет делать прототипы анимации интерфейсов.

      Быстро осваивает новые инструменты. Выбирает подходящий инструмент для задачи, а не подгоняет решение под возможности одного освоенного инструмента.

      Когда есть только молоток — всё вокруг превращается в гвозди.

      Саморазвитие и передача опыта

      Читает книги, статьи, блоги, в курсе дизайнерских трендов, следит за развитием отрасли.

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

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

      Стремится перенять профессиональный опыт и знания у «старших» коллег. Распространяет свои знания среди команды и других дизайнеров.

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

      Наблюдает за тем, как люди работают с интерфейсами. Накапливает и структурирует эти знания.

      Стремится заниматься задачами, которые его развивают.

      Обучает стажеров и начинающих проектировщиков.

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

      Является экспертом в чем-то: все знают, если есть вопрос в этой области — это к нему.

      Имеет личный проект или ведет блог.

      Участвует в развитии гайдлайнов Контура.

      Взаимодействие в команде

      Участвует в командных встречах: ежедневные скрамы, презентации, ретроспективы.

      Не участвует в бесполезных встречах. Если понимает, что на встрече он не нужен, встает и уходит.

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

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

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

      Умеет обосновывать свои решения, когда нужно настаивает на них.

      Для обсуждения дизайна предпочитает личное общение, а не переписку в почте или чате.

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

      Команда доверяет своему проектировщику, ей нравится интерфейс ее продукта.

      Команда считает своего проектировщика лучшим в Контуре.

      Развитие продукта

      Проектировщик чувствует ответственность за продукт. Знает бизнес-цели продукта и дизайном помогает их достигать.

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

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

      Принимает участие в формировании планов по развитию продукта.

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

      Этика

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

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

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

      Нельзя работать на конкурентов или участвовать в проектах, наносящих вред Контуру.

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

      Читайте также: