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

Хороший пользовательский интерфейс учитывает человеческие слабости, перекладывает работу на машину, минимизирует ошибки и раздражение пользователя. Но как создавать понятные интерфейсы, почему важно знать о «проектировании пользовательского опыта» и какие знания необходимо усвоить в первую очередь, чтобы создавать программы, которые смогут говорить на языке человека? Об этом мы поговорили с Андреем Балканским, старшим преподавателем кафедры графических технологий Университета ИТМО. Накануне он прошел обучение на курсе «Пользовательский интерфейс и представление информации» в дизайн-бюро Артема Горбунова в Москве. Вел занятия один из известных российских дизайнеров, создатель популярной типографской раскладки, разработчик движка «Эгея» для блогов Илья Бирман.

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

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

Одни из лучших примеров — карты или приложения Google, iPhone или калькулятор кредитов на сайтах крупных банков — демонстрируют универсальные принципы дизайна интерфейсов, которые не зависят от стандартов операционной системы, среды или устройства, подчеркивают создатели курса «Пользовательский интерфейс и представление информации», который преподается в Дизайн-бюро Артема Горбунова.

Курс проводит российский дизайнер, создатель популярной типографской раскладки, разработчик движка «Эгея» для блогов Илья Бирман. Четырехдневный интенсив посвящен принципам эффективного взаимодействия человека с графическим интерфейсом — особенностям восприятия человеком информации, формированию пользовательских привычек, синтаксису элементов интерфейса, информативности текста и верстки. Одним из слушателей курса стал и Андрей Балканский, старший преподаватель кафедры графических технологий Университета ИТМО.

Андрей Балканский
Андрей Балканский

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

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

Помним о целевой аудитории и продумываем пользовательский сценарий

Как представить данные — текст, изображение либо графики — так, чтобы они были понятны и рядовому пользователю любого онлайн-магазина, и пилоту, который управляет боингом? Казалось бы, в этой задаче очень мало того, что обычно связывают с работой дизайнера. Но именно дизайнер интерфейсов, а также специалисты, которых называют user experience designer (или смежным понятием — interaction designer) и занимаются тем, что от и до продумывают структуру какого-либо продукта.

Коворкинг дизайн-бюро Артема Горбунова. Источник: социальные сети
Коворкинг дизайн-бюро Артема Горбунова. Источник: социальные сети

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

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

Синтаксис интерфейса: почему это важно?

Еще одна проблема, с которой сталкиваются преимущественно дизайнеры русскоязычных интерфейсов, — сложности грамматики русского языка. При этом их зачастую не учитывают даже крупные разработчики. Простой пример: наверняка в Facebook вы нередко наблюдали обновления от друзей вроде «Вчера был в гостях у Иван Иванов», тогда как тот же «ВКонтакте» давно научился склонять имена и фамилии по правилам русского языка, рассказывает Андрей Балканский.

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

Источник: bureau.ru
Источник: bureau.ru

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

Не только теория

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

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

Где еще учат дизайну интерфейсов?

Образование в области проектирования интерфейсов дается, в частности, в Университете ИТМО, где с 2015 года на кафедре графических технологий факультета компьютерных технологий и управления вуза реализуется магистерская программа «Дизайн человеко-компьютерных систем».

Студенты кафедры регулярно участвуют в краткосрочных стажировках за рубежом. Одним из партнеров кафедры является Таллинский университет. А августе прошлого года в городе Дубровник (Хорватия) прошла Летняя школа, организованная Таллинским университетом совместно с Кипрским технологическим университетом, в которой также принимали участие преподаватели кафедры. А в этом году в рамках летней школы в Эстонии прошли обучение магистранты кафедры графических технологий Университета ИТМО Анна Филиппова и Анна Ксенофонтова, по итогам занятий разработавшие действующие прототипы устройств, которые контролируют осанку человека.

Лаборатория юзабилити в Университете ИТМО
Лаборатория юзабилити в Университете ИТМО

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

«На мой взгляд, специалисту, который занимается дизайном интерфейсов, во-первых, необходимо уметь мыслить задачами: что бы он ни разрабатывал, прежде всего ему нужно понять задачу, контекст и аудиторию. Такая парадигма мышления поможет дизайнеру интерфейсов развиваться в разных областях. Дизайнер должен мыслить не как оформитель, а как стратег, который делает нечто, что решает задачу человека. Безусловно, эти знания не отменяют эстетику. Дизайнер интерфейсов также должен знать историю искусств, историю развития технологий, а также основы психологии, самые базовые вещи. Хотя в сознании тех же ребят, которые только приходят на бакалавриат, не устоялась связь между психологией и дизайнером в массовом представлении — этаким арт-хипстером. В магистратуре чуть проще. Ребята уже столкнулись с проектной деятельностью и прекрасно понимают: чтобы делать что-то для людей, мы должны хорошо их знать», — резюмирует он.

Редакция новостного портала
Архив по годам:
Пресс-служба