Учебное пособие по рабочему процессу проектирования для разработчиков: своевременная разработка улучшенного пользовательского интерфейса/UX

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

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

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

Мой ответ: вовлекайте своих дизайнеров с первого дня и держите их вовлеченными в течение всего процесса разработки UI/UX. Обязательно установите четкие линии связи и последовательный обмен сообщениями между разработчиками и дизайнерами.

У вас есть все, что вам нужно?

Худшее, что может случиться при реализации любого пользовательского интерфейса, — это __отсутствие связи между дизайнером и разработчиком __ (если только это не один и тот же человек). Некоторые дизайнеры считают, что их работа выполнена, как только PSD-файл отправлен. Но это неправильно! Вы должны создать постоянный рабочий процесс связи, который длится после доставки PSD.

Во многих случаях требуется время, прежде чем дизайнеры увидят реальную реализацию дизайна UI/UX. К их удивлению, сборка часто полностью отличается от первоначальной подачи. (Это случалось со мной не раз. Я отправлял исходные файлы с полным описанием и прототипами взаимодействия, но когда я, наконец, увидел проект спустя несколько месяцев, у него был другой макет, другие цвета и никаких взаимодействий.)

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

Если у разработчика есть все, что ему нужно, это ускорит процесс. Чистого PSD недостаточно.

Что вам нужно, чтобы работать эффективно и качественно?

Это активы, которые разработчик должен ожидать от дизайнера, чтобы довести дизайн UI / UX до реализации:

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

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

• Прототипы взаимодействия . Времена «статических экранов» давно прошли. Использование интеллектуальных взаимодействий и анимации для сглаживания рабочего процесса и реализации UX-дизайна в настоящее время является обычной практикой. Но вы не можете просто сказать разработчику: «Это будет скользить слева». Дизайнер должен создать фактический прототип этого взаимодействия. Прототип должен включать такую ​​информацию, как скорость, скорость и т. д., и ожидается, что разработчик укажет каждое из этих значений.

• Соглашение об именовании . Запросите структуру именования файлов, чтобы все было организовано. Это облегчит вам обоим навигацию по файлам. (Никто не любит, когда что-то скрыто в фоновой папке.)

• Ресурсы HDPI - Мы живем в «тяжелые времена» с огромной плотностью экранов. Убедитесь, что дизайнер предоставит изображения во всех необходимых разрешениях, чтобы ваше приложение везде выглядело четким. Примечание: используйте как можно больше векторов; это вам очень поможет (svg).

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

Работа в процессе

Используйте своих дизайнеров в процессе разработки UI/UX. Не держите их в стороне, ожидая, что они просто «нажмут на пиксели». Дизайнер видит возможные нововведения еще до начала реализации. Чтобы воспользоваться этим, держите их в курсе. Предоставьте им доступ, чтобы увидеть и протестировать текущую работу. Я прекрасно понимаю, что никто не любит делиться незавершенными проектами. Но гораздо проще внести изменения в середине сборки, чем в конце. Это может сэкономить ваше время и предотвратить ненужную работу. Как только вы дадите дизайнеру возможность протестировать проект, попросите его составить список проблем и решений и предложить улучшения.

Что делать, если у разработчика появилась идея изменить внешний вид приложения? Обсудите это с дизайнером и никогда не позволяйте разработчику изменять дизайн без консультации с дизайнером. Этот рабочий процесс проектирования гарантирует, что сборка будет идти по плану. У великого дизайнера есть причина для каждого элемента на экране. Изъятие одной детали без понимания, зачем она там, может испортить впечатление от продукта.

UI/UX Дизайн Управление проектами

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

Какое бы решение вы ни использовали, обязательно выберите один рабочий процесс, который будет принят и последовательно использоваться всей командой. В нашей команде я пытался продвигать Basecamp, потому что это то, что я использовал, но наши разработчики внешнего интерфейса думали, что у него ограниченные возможности. Они уже использовали другое программное обеспечение для управления проектами для отслеживания ошибок, прогресса и т. д., такое как JIRA, GitHub и даже Evernote. Я понял, что отслеживание проектов и управление ими должно быть максимально простым, поэтому я перенес свой рабочий процесс проектирования пользовательского интерфейса в JIRA. Я хотел убедиться, что они понимают мой рабочий процесс и прогресс, но я не хотел, чтобы они чувствовали, что дизайн — это еще одна вещь, которой нужно управлять.

Вот несколько предложений по инструменту управления проектами:

• Basecamp — отслеживает ход выполнения задач, связанных с проектированием и разработкой, и позволяет легко экспортировать задачи. Он также имеет простой мобильный клиент.
• JIRA — полностью настраиваемая платформа, на которой вы можете легко настроить собственные доски для разных областей. Например, организуйте доски для отслеживания таких действий, как серверная часть, внешний интерфейс, дизайн и т. д. Я думаю, что мобильный клиент немного слаб, но это отличное решение для больших команд и включает функцию отслеживания ошибок.
• Электронная почта — отлично подходит для создания беседы или отправки изображений. Но будьте осторожны , если вы используете электронную почту для обратной связи. Вещи могут легко потеряться.

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

UX-дизайн и разработка объединяются

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

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

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

Обратная связь

Обратная связь от дизайнера имеет решающее значение, и она должна происходить как можно чаще. Это, вероятно, самая затратная по времени (и энергии) вещь, которую вы будете делать. Но вам нужно принять его, чтобы иметь возможность добиваться отличных результатов. Вот несколько рабочих советов по дизайну UX и UI о том, как сделать ваши отзывы идеальными.

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

• Будьте описательными — обратная связь должна быть точной. Вы не можете просто сказать «переместите эту кнопку вверх». Дизайнер должен указать, на сколько пикселей должна перемещаться кнопка, какие отступы следует использовать и т. д. Всегда включайте объяснение проблемы и подходящее решение для нее. Это займет много времени, но оно того стоит.

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

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

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

• Skype (Hangouts) — Voice — действительно мощный инструмент для обратной связи. Вы можете сразу задавать вопросы и отвечать на них. Но не забудьте сделать заметки и отправить последующее сообщение (электронное письмо) после звонка.

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

Вот некоторые из замечательных инструментов:

Аннотация обратной связи:

• https://redpen.io/
• http://collabshot.com/
• http://www.designdrop.io/

Инструменты совместной работы:

• http://www.invisionapp.com/
• https://basecamp.com/

Заключение

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

Разработчик и дизайнер могут создавать отличные вещи вместе, если они готовы работать в команде . Учитесь друг у друга и разрабатывайте учебные пособия, подобные этому!