26 октября 2018

UX-митапы Noveo: на пути к совершенному UI

Внутренние митапы уже давно стали неотъемлемой частью рабочих процессов Noveo, позволяя эффективно делиться знаниями и наработками внутри команды, какой бы большой и/или распределенной она ни была. Мы уже рассказывали о том, как проходят эти встречи у Android-разработчиков и QA-специалистов, а сегодня попросили поделиться впечатлениями о командных митапах Дарью, руководителя отдела UX-аналитики и дизайна.

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

Noveo UX analytics meetup

Первый митап был посвящен основным UI-элементам на трех платформах — Web, iOS и Android — и их поведению. Акцент в докладе был сделан на навигации: именно хорошая навигация позволяет пользователю понимать, где именно он находится, и с легкостью передвигаться по платформе, поэтому важно, чтобы она была единой и логичной.

Noveo UX analytics meetup navigation

На примере одного из своих проектов Настя рассказала, как именно отличаются элементы навигации на разных платформах.

Noveo UX analytics meetup navigation on different platforms

Больше примеров хорошей навигации можно найти на портале ui-patterns.com.

Мы также успели обсудить и такой элемент, как поля ввода. Здесь важно с самого начала определить цель поля ввода и тип вводимых данных. Подсказывать пользователю можно с помощью Placeholders и Labels. При этом если Placeholders — это вспомогательный прием, то без Labels обойтись не получится. Можно совмещать эти приемы или  использовать Floating labels: по клику на поле ввода placeholder становится label. Отличное решение с небольшой анимацией и занимает меньше места, чем классический label.

Noveo UX analytics meetup entry fields

Второй митап был посвящен подаче информации в пользовательском интерфейсе. В практику работы нашего отдела входят регулярное повышение квалификации специалистов на дополнительных курсах с последующим расшариванием полученных знаний на всю команду; Настя прошла в Москве курс “Пользовательский интерфейс и представление информации” от дизайн-бюро Артёма Горбунова и поделилась с нами основными моментами, дополнив их примерами из собственной практики.

Noveo UX analytics meetup

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

Noveo UX analytics meetup
Чекбокс “Привязать сессию к IP” порой непонятен даже программистам (epn.bz/ru/cashback)

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

Noveo UX analytics meetup

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

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

Этот принцип применим не только к оформлению интерфейса, но и к бизнес-логике, используемым UI-паттернам, всем правилам внутри системы.

Разобрав основные принципы проектирования “интерфейса для людей”, Настя предложила вместе проанализировать несколько платформ на соответствие этим принципам. Среди них был прототип формы регистрации от нашего junior-аналитика Даши, так что только что полученные знания тут же пошли в дело :)

Noveo UX analytics meetup
Прототип ДО анализа на митапе
Noveo UX analytics meetup
Прототип ПОСЛЕ анализа на митапе

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

Noveo UX analytics meetup

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

Вот такая продуктивная у нас получилась UX-осень — а ведь она еще в самом разгаре! Мы готовим новые митапы и обязательно расскажем вам и о них тоже.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Читайте в нашем блоге

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: