В этой статье рассказывается, какую роль дизайн интерфейсов играет в условиях современного рынка. А также, что отличает хороший интерфейс от плохого (UI = user interface, то есть, интерфейс пользователя ). Также мы взглянем на парочку новых моделей UI дизайна, включая Google Fuchsia и Fluent Design от Microsoft .
Роль UI дизайна сегодня?
Современные дизайнеры разрабатывают пользовательские интерфейсы для приложений, работающих в определенной операционной системе. Поэтому многие параметры интерфейса неподконтрольны разработчикам. Например, если дизайнер разрабатывает интерфейс для Android-приложения , он не знает о размере и разрешении экрана пользовательского устройства. А также о том, как пользователь настроил уведомления для этого приложения, установлены ли другие программы, влияющие на цветовой профиль экрана.
Творчество разработчиков пользовательских интерфейсов ограничено определенным устройством и операционной системой. Их работа часто должна соответствовать рекомендациям производителя операционной системы (Google для Android, Apple для iOS ). Apple публикует, что можно, а чего нельзя для пользовательского интерфейса, а также подробный список рекомендаций для UI . У Google также есть собственные стандарты материального дизайна .
Из-за этих ограничений внимание современных дизайнеров пользовательского интерфейса сосредоточено на мелких деталях. Например, на том, как расположены окна, удобна ли для пользователя навигация по приложению или сайту. Из-за нехватки времени пользователю некогда разбираться со сложным, громоздким и медленным интерфейсом.
Вот некоторые особенности пользовательских интерфейсов нашего времени
Многие элементы пользовательского интерфейса мы воспринимаем как приглашения к взаимодействию с приложением или устройством:
Поле для ввода текста и курсор предлагают пользователю ввести текст, а кнопка «Подтвердить » - кликнуть или коснуться ее, чтобы продолжить:
Переключатель, представленный здесь в виде ползунка, приглашает пользователя включить или отключить опцию:
Иконка приглашает пользователя кликнуть по ней, чтобы запустить приложение или функцию:
При нажатии по кнопке-гамбургеру…
…появляется меню, которое приглашает пользователя выбрать дополнительные варианты:
Ползунок приглашает пользователя коснуться/кликнуть и перетащить его, чтобы изменить настройки, например, яркость экрана:
Выпадающее меню предлагает пользователю выбрать нужный вариант из списка.
Это лишь некоторые примеры элементов дизайна интерфейсов приложений . Но все они объединены идеей повысить эффективность взаимодействия с пользователем.
Интерфейс: хороший, плохой и ужасный
Хороший дизайн пользовательского интерфейса не заключается лишь в том, чтобы прелестно выглядеть. Дизайн UI может иметь успех, и не будучи очень красивым.
Давайте взглянем на некоторые образцы хорошего и плохого дизайна пользовательского интерфейса. Затем посмотрим на ужасный, что тоже важно.
Хороший пользовательский интерфейс
Разработан с учетом глубокого понимания пользователя, его потребностей и того, как он будет перемещаться по приложению или сайту. Поэтому мы и говорим, что дизайн UI является одним из аспектов UX-дизайна (UX = User eXperience , опыт взаимодействия ).
Хороший интерфейс - максимально простой, и в то же время такой, что у пользователя под рукой есть все необходимое. Навигация недолгая и неглубокая (без под-под-под-разделов и меню ), требует минимального количества шагов для выполнения задачи, а опции, доступные для выбора в каждом окне, понятны:
В этом приложении интерфейс предлагает пользователю три варианта: поиск закусочных, использующий текущее местоположение, поиск «вручную» по почтовому индексу и кнопку-гамбургер для просмотра дополнительных вариантов.
Плохой интерфейс
У такого дизайна интерфейса сайта на первом месте не потребности пользователя, а значимость приложения или разработчика. Признаки плохого UI включают в себя значки, слишком маленькие для того, чтобы попасть в них при нажатии пальцем.
В таком интерфейсе очень много мелкого текста, который трудно читать. Кроме этого, плохому интерфейсу присуще использование жаргона (в том числе профессионального ) вместо понятного языка. Например, написано: «Плохие данные ». А нужно - «Неверные логин и пароль ». К плохому интерфейсу также можно отнести применение назойливых диалоговых окон вместо панели уведомлений:
В приведенном выше примере видно, что диалоговое окно фонового приложения прерывает работу активного приложения и настоятельно требует ответа, не давая пользователю продолжать. Если человек в это время набирает текст и не смотрит на экран, то запросто может потерять несохраненные данные. Видно, что кнопки маленькие, и в них трудно попасть пальцем. А сообщение «Неизвестная ошибка » вообще не имеет смысла, так как не дает пользователю возможность изучить или устранить причину ее возникновения.
Ужасный интерфейс
Некоторые успешные проекты и дизайны интерфейсов , на первый взгляд, разрушают представления дизайнеров о том, что простота должна быть на первом месте. Рассмотрим в качестве примера сайт Amazon , имеющий, слегка напряженный вид:
Но успех компании Amazon , наоборот, доказывает эффективность их UI . Почему? Один из секретов кроется в том, что внешний вид страницы улучшался постепенно, и поэтому не заставлял пользователей приспосабливаться к резким изменениям интерфейса. Посетителям сайта это удобно.
Я, как давний пользователь Amazon , особо и не замечал изменений во внешнем виде или способе взаимодействия. Но вот как выглядел Amazon 10 лет назад:
Что ожидает дизайн пользовательского интерфейса в будущем?
Скорее всего, наиболее кардинальные изменения, будут связаны с разработкой голосовых интерфейсов. Эта функция уже есть во всех основных операционных системах, но пока еще нельзя сказать, что люди регулярно пользуется ей на своих телефонах и компьютерах.
Появляются новые подходы к дизайну интерфейсов , но, похоже, что визуальный интерфейс все же будет основным способом взаимодействия пользователя с устройствами. Но есть большой простор для инноваций, а также оптимизации старых интерфейсов. Неудивительно, что такие крупные игроки как Microsoft и Google инвестируют значительные ресурсы в эксперименты с новой эстетикой пользовательского интерфейса и моделями взаимодействия.
В последние месяцы все чаще слышно о «Fluent Design» от Microsoft . Говорят, он нацелен на интеграцию большей визуальной глубины и движения. То же самое касается экспериментальной операционной системы от Google с кодовым названием «Fuchsia» , в которой разработчики пытаются обойтись без рабочих столов и иконок.
В этой статье я привожу примеры основных принципов или концепций, которыми руководствуюсь при проектировании десктопных интерфейсов. Не планирую выступать новатором или поучителем, но с радостью поделюсь набором установок, который помогает мне в работе.
Кстати, если вы используете Figma , я рекомендую обратить внимания на наши готовые дизайн-системы . Они помогают фрилансерам завершать больше заказов в месяц, программистам позволяют создавать красивые приложения самостоятельно, а тимлиды «пробегают» спринты быстрее, используя готовые дизайн-системы для командной работы.А усли у вас серьезный проект, то наша команда готова развернуть дизайн-систему внутри организации на базе наших наработок и подогнать под конкретные задачи, используя Figma. Web / desktop, так и любой мобайл. С React / React Native мы тоже знакомы. Пишите в Т: @kamushken
Акценты и приоритеты
Каждый раз, проектируя интерфейс я задаю себе или клиенту вопрос: “Какая информация сейчас важна для конечного пользователя? Как мы распределим его внимание в конкретном случае?” Для этого в нашем вооружении есть цвет и его оттенки, размер шрифта, его интенсивность. В совокупности, правильно используя эти инструменты, мы “оставляем послание” пользователю, ведём его по нужному нам пути, концентрируя его внимание на самом важном.Хороший пример, когда дизайнер дал пользователю понимание, что важно видеть отправителя, затем тему, а уже потом содержание или его @ник в системе:
Плохой пример, где дизайнер “утверждает”: важнее всего - аватарки, а с остальным как-нибудь разберётесь:
Отступы и их пропорциональность
Современный дизайн лёгок, прост и “насыщен воздухом”. Он наполнен дыханием. И не самую последнюю роль в формировании этих ощущений играют отступы. Значительные отступы помогают упростить подачу материала. Но они должны быть подчинены некоторой закономерности и пропорциональности. Я определяю для себя N пикселей в качестве базисного отступа, когда начинаю новый проект. Затем я использую 2N, 3N и так далее пропорциональность для создания визуального баланса, если где-то требуется бОльший отступ.Хороший пример, когда дизайнер более менее соблюдает пропорциональность отступов:
Плохой пример, когда отступы практически базируются на генераторе случайных чисел:
Текст кнопки всегда первичнее иконки
Не забывайте, что именно текст является определяющим фактором того, какое ожидание или реакция предварительно сформируется у пользователя при виде кнопки. И лишь изображение иконки вторичным образом дополняет смысл. Изображение колокольчика с надписью “notifications” даёт нам некоторое представление о назначении этого функциона до того, как мы сделали клик. Аналогичный колокольчик без подписи в другом приложении приведёт нас к будильнику, хотя мы скорее всего будем ожидать появление экрана с уведомлениями. Я советую всегда наделять надпись бОльшим “весом” нежели иконки. Их я вообще считаю надувательством. Многие современные интерфейсы вполне способны обходиться и без них. Просто это было бы слишком скучно!В целом хорошо:
Но можно сделать лучше:
Тоже выглядит неплохо:
И тут есть, где улучшить:
Не пытайтесь быть слишком понятными
Не все проектируемые интерфейсы обязаны быть интуитивно понятными. Существует множество сложных систем, с которыми мы обучались (!) взаимодействовать какое-то время. Возможно сейчас они кажутся нам простыми, но мы не отдаём отчёт, что были исследователями-первооткрывателями первые минуты, часы или более. И коль мы продолжаем работу внутри некоторой изначально сложной системы, видимо ничего не препятствовало нашему пути первых исследований. Скорее всего, дизайнер сделал свою работу настолько хорошо, что мы без труда освоили новую среду. Яркий пример из жизни: попытайтесь на миг представить, что вы не знаете значение математического знака “равно”. Согласитесь, эти две чёрточки - одна над другой, они совсем не кажутся интуитивно понятными. Просто когда-то в школе учитель математики обучил нас этому. Я призываю не пытаться быть понятнее, чем это требуется на минимально необходимом уровне.В этом примере дизайнер был чрезмерно понятен с кнопкой закрытия:
А в этом примере дизайнер оказался чрезмерно понятен с возможностью добавления:
Перемещение курсора забирает силы
Мы не должны обязывать пользователя тянуться в другую часть экрана, чтобы получить расширенный функционал. Если пользователь работает со списком, то кнопка создания нового элемента должна быть поблизости. Или если мы порождаем новый попап кликом по кнопке слева внизу, то абсурдно заставлять пользователя тянуть курсор по диагонали направо вверх, чтобы окно закрыть.Хороший пример, когда дизайнер предлагает закрыть попап в той же области, которая вызвала его порождение:
Плохой пример, когда дизайнер отдаляет функционал добавления элемента в список от самого списка:
Взаимосвязи расположений или единая плоскость
Это очередной приём балансировки интерфейса. Подобие сетки, если хотите. Например, вы используете трёхколонник. Находятся ли его заголовки в одной плоскости по оси X? Или расположение иконок с кнопками. Можно ли провести мнимую ось Y и обнаружить, что и те и другие аккуратно прилегают к ней? Если ответы утвердительны, дела идут хорошо. Это обусловлено тем, что зрительно человеку легче воспринимать табличный вид из-за структурированности данных. И мы при разработке интерфейса должны располагать элементы с некоторой табличной логикой.Плохой пример с несостыковками:
Хороший пример с гармонией и соответствием:
Цвет имеет смысл
Избитое напоследок. Красное - тревога, зелёный - всё хорошо. Испокон веков для человека самое лучше восприятие текстовой информации, это чёрным по белому. Если вы используете много цветов без аргументации, вы создаёте хаос. Если вы окрашиваете элементы по смыслу, вы создаёте еще больше порядка.Пример хаоса: (172 votes зеленым означает ли позитивное состояние? если, да то 280 visitors оранжевым - означает негативное по логике? отнюдь! дизайнер цветом лишь разделил цифры между собой)
Пример создания порядка и обоснование цвета (я просто добавил графики поверх чужого творчества)
Хороший пример незлоупотребления цветами:
В качестве эпилога....
Выражаю благодарность членам сообщества dribbble, за неформальное согласие предоставить свои работы для данного обзора. Хочу напомнить, что вышеизложенные принципы в дизайне интерфейса являются основными для меня. Я всегда держу их в уме при проектировании интерфейсов. Определитесь на чьей вы стороне… Вы хотите создавать интерфейсы для дизайнеров и работать на лайки (пример - 98% работ с behance) или вы стремитесь решать проблемы пользователя (dribbble)? Кстати, по-моему отличный пример того, как закрытость сообщества позволяет сохранять фокусировку на главном предназначении интерфейсов!В итоге всё же решил не выбрасывать проделанную работу, т. к. эта статья служит своего рода чек-листом, по которому стоит пройтись перед тем, как начать разрабатывать новый интерфейс, и поглядывать в него непосредственно по ходу процесса дизайна пользовательских интерфейсов.
«Дизайн — это больше, чем просто компоновка, упорядочивание или даже редактирование. Это привнесение ценности и добавление смысла, просвещение, упрощение, разъяснение , модификация, облагораживание, преувеличение, убеждение или даже развлечение» — Пол Ренд, книга «Дизайн: форма и хаос».
- Интерфейсы созданы для обеспечения взаимодействия
Интерфейсы существуют, чтобы обеспечить взаимодействие между людьми и нашим миром. Они могут помочь прояснить, осветить, включить и показать взаимоотношения, объединяют нас, разделяют, управляют нашими ожиданиями и предоставляют доступ к услугам. Процесс проектирования интерфейса это не искусство, а сами интерфейсы не монументы. Интерфейсы выполняют некоторую работу и их эффективность может быть измерена. И, однако, они не утилитарны. Лучшие интерфейсы могут вдохновлять, пробуждать, мистифицировать и усиливать наше взаимодействие с миром. - Задача № 1 — обеспечить ясность
Ясность — это и первая и самая важная задача интерфейса. Чтобы быть эффективными, используя интерфейс, который вы создали, люди должны быть способны распознать что он собой представляет, осознать то, зачем они используют его, понять с чем интерфейс помогает взаимодействовать, предсказать, что произойдёт, когда они станут использовать его, и затем успешно взаимодействовать с ним. В то время, как при знакомстве с интерфейсом есть место некоторой загадке и отложенной выгоде от его использования, не должно быть места для путаницы. Ясность внушает доверие и помогает дальнейшему использованию. Сотня простых и понятных экранов предпочтительнее одного запутанного. - Удерживайте внимание любой ценой
Мы живём в мире, полном отвлекающих факторов. Трудно даже ненадолго погрузиться в чтение без того, чтобы что-то нас не отвлекло и не перетянуло на себя внимание. Внимание же бесценно. Не отвлекайте пользователя мусором в боковой колонке своего приложения, помните, для чего экран нужен в первую очередь. Если кто-то читает, то позвольте ему закончить прежде чем показывать рекламу (конечно, если без этого никак). Цените внимание и тогда не только ваши пользователи станут счастливее, но и вы выгодаете от этого. Когда взаимодействие является основной целью, внимание становится необходимым условием. Удерживайте его любой ценой. - Дайте пользователям контроль в их руки
Люди ощущают себя комфортно, когда они чувствуют контроль над собой и окружением. Бездумное ПО уводит их в сторону от комфорта, вовлекает в незапланированные взаимодействия, путает навигацией и непредвиденными результатами. Предоставьте пользователям контроль: показывайте системный статус, описывайте причинно-следственную связь (если вы сделаете это, получите то) и давайте им понять, что их ждёт на каждом шаге. Не переживайте, что это будет им очевидно, потому что почти всегда это совсем неочевидно. - Лучшие манипуляции — прямые
Лучший интерфейс это тот, которого нет. Например, когда мы непосредственно управляем физическим объектом в нашем мире. Но т. к. это не всегда возможно, и многие объекты не физические, а информационные, мы делаем интерфейсы, которые помогают нам взаимодействовать с ними. Легко оступиться и добавить больше, чем необходимо в интерфейс: откарамеленные кнопки, градиенты и блеск, графику, опции, настройки, окна, вложения, и другой хлам. В итоге мы манипулируем элементами интерфейса, а не тем, что на самом деле важно. Вместо этого, стремитесь к идее прямого управления. Интерфейс должен быть незаметным и распознавать самые обычные человеческие жесты. В идеале, интерфейс должен быть настолько незаметным, чтобы у пользователя сложилось впечатление, что он непосредственно управляет объектом, находящимся в его фокусе.
Добавлено: см. принцип Интерфейс — зло . - Одно основное действие на экран
Каждый экран, который мы проектируем, должен быть предназначен лишь для одного важного действия пользователя. Это упрощает обучение, использование пользователями, и облегчает доработку и поддержку разработчиками при необходимости. Экраны, в которые заложены два и более целевых действий, быстро приводят к путанице. Как статья, которая должна содержать один чёткий тезис, так и каждый экран должен предлагать одно действие, наполняющее его смыслом. - Оставьте вторичные действия на втором плане
Экраны с одним основным целевым действие могут иметь множество дополнительных действий, но они должны остаться вторичными! Ваша статья существует не для того, чтобы её можно было расшарить в твитере. Она существует, потому что люди могут прочитать и понять её. Делайте вес вторичных целевых действий визуально легче или показывайте их после того, как основное будет выполнено. - Сделайте следующий шаг естественным
Лишь немногие действия являются заключительными, так что хорошенько проработайте для каждого действия следующий шаг. Предвидьте, каким будет следующее действие и спроектируйте его заранее. Так же, как и в обычном разговоре, предложите возможность для следующего слова. Не оставляйте человека висеть в небытии только потому, что они сделали то, что вы хотели, чтобы они сделали. Дайте им сделать следующий естественный шаг который поможет дальше достигнуть их цели. - Внешний вид следует из поведения (или «функция определяет форму»)
Людям больше всего удобно с теми объектами, которые ведут себя так, как они ожидают. Другие люди, животные, вещи, программы. Когда кто-то или что-то ведёт себя в соответствии с нашими ожиданиями мы чувствуем будто у нас с ними хорошие отношения. Именно поэтому спроектированные элементы должны выглядеть соответственно своему поведению. На практике это означает, что кто-то должен быть в состоянии предсказать как элемент интерфейса себя поведёт просто взглянув на него. Если он выглядит как кнопка, то он и должен действовать как кнопка. Не заигрывайте с основами взаимодействия. Оставьте свою креативность для вопросов другого уровня. - Последовательность имеет значение
Следуя предыдущему принципу, элемент не должен выглядеть подобно другому, если только их поведение не взаимосвязано. Элементы с одинаковым поведением должны выглядеть одинаково. Так же важно для различающихся элементов выглядеть непохожими (и непоследовательными). В стремлении быть последовательными новички дизайнеры часто неявно выделяют важные различия, используя те же самые визуальные трактовки, в то время как визуальные различия являются целесообразными. - Сильная визуальная иерархия работает лучше
Сильная визуальная иерархия достигается когда на экране наблюдается чёткий порядок последовательности визуальных элементов. То есть, когда пользователи каждый раз просматривают подобные блоки в одинаковом порядке. Слабая визуальная иерархия даёт мало подсказок о том, где взгляду можно отдохнуть и, в итоге, создаёт суматоху и выглядит запутанной. Трудно поддерживать сильную визуальную иерархию, потому что визуальный вес относителен: когда всё выделено, то не выделено ничего. Если требуется добавить один визуально тяжёлый элемент на экран, то может понадобиться снизить акцент со всех элементов для сохранения иерархии. Большинство людей не замечают её, но это один из самых простых путей усилить или ослабить дизайн. - Продуманная организация снижает когнитивную нагрузку
Как сказал Джон Маеда в своей книге «Простота», продуманная организация элементов на экране может сделать большое малым. Она помогает людям проще и быстрее понять интерфейс, если вы показали взаимосвязи контента в дизайне. Группируя подобные элементы, можно показать связь элементов с помощью взаимного расположения и ориентации. С помощью продуманной организации контента вы уменьшаете когнитивную нагрузку на пользователя, которому не нужно задумываться о том, как элементы соотносятся между собой, потому что вы уже сделали это за них. Не заставляйте пользователя думать. Вместо этого помогите ему и покажите связи на экране с помощью дизайна. - Подсвечивайте, но не указывайте
Цвет физических предметов изменяется при изменении освещения. В яркий солнечный день мы видим дерево совсем не так, как на закате. Как в физическом мире где цвет относителен, в интерфейсе он так же не должен жёстко определять что-либо. Он может помочь подсветить, использоваться для акцента, но не должен быть единственным отличием элементов. Для длительного чтения используйте светлые или приглушённые цвета, оставляя яркие цвета для акцентирования. Конечно же, можно использовать яркие цвета и для фоновой заливки, только убедитесь, что это подходит вашей аудитории. - Прогрессивное раскрытие
На каждом экране покажите только то, что необходимо. Если людям необходимо сделать выбор, покажите им достаточно информации, чтобы они могли сделать его, затем погрузите их в детали уже на последующем экране. Избегайте тенденции чересчур разъяснить и вывалить всё разом. Когда возможно, отложите принятие решения на нескольких экранах последовательно раскрывая информацию по мере необходимости. Это обеспечит более ясное взаимодействие с интерфейсом. - Помогайте людям по ходу
В идеальном интерфейсе не требуется помощь, потому что интерфейс легок в изучении и удобен в использовании. В реальном же, помощь встроена и контекстна. Доступна только в нужных местах, когда необходима, и скрыта от взора всё остальное время. Предлагая идти в раздел помощи, чтобы найти ответ на вопрос, вы возлагаете ответственность на пользователей знать то, что им нужно искать, и как формулировать запрос. Вместо этого встраивайте помощь там, где она может понадобиться. Просто убедитесь, что она не стоит на пути пользователей, которые уже знают как пользоваться интерфейсом. - Решающий момент: нулевое состояние
Первый опыт использования интерфейса решающий, но при этом дизайнеры часто упускают его из виду. Для того, чтобы образом помочь пользователям освоиться, правильно будет спроектировать нулевое состояние, т. е. состояние, когда ещё ничего не происходило. Это состояние не должно быть пустым экраном. Оно должно обеспечить направление и содержать указание для быстрого начала работы. Большая часть затруднений возникает на самом первом шаге. Но как только люди понимают правила игры, у них повышаются шансы на успех. - Текущие проблемы являются наиболее важными
Люди обычно ищут решение своих актуальных проблем, а не потенциальных, тех, что возникнут в будущем. Таким образом, нужно противостоять созданию интерфейсов для гипотетических проблем. Нужно изучать текущую ситуацию и проектировать решение существующих проблем. Это может быть не так интересно, как витать в облаках и строить воздушные замки, но если люди действительно будут пользоваться вашим интерфейсом, то это принесёт больше пользы. - Отличный дизайн незаметен
Любопытное свойство отличного дизайна заключается в том, что он остаётся незаметным пользователям. Одна из причин этого в том, что если дизайн удачен, то пользователи могут сконцентрироваться на их задачах, а не интерфейсе. Когда они завершают свои задачи, они получают удовлетворение, а не рефлексируют над ситуацией. Для дизайнера это может быть жестоким открытием, т. к. мы в этом случае он получает меньше похвалы, когда дизайн оказывается действительно хорош. Но хорошие дизайнеры довольствуются тем, что их дизайном активно пользуются, и знают, что счастливые пользователи обычно молчат. - Развивайте навыки в других дизайнерских дисциплинах
Визуальный и графический дизайн, типографика, копирайтинг, информационная архитектура и визуализация — все эти дисциплины являются частью дизайна интерфейсов. Они могут быть лишь затронуты вскользь или по ним можно специализироваться. Не участвуйте в дебатах и не смотрите свысока на другие дисциплины: возьмите от всех них те аспекты, что помогут развиваться дальше в вашей работе. Попробуйте взять что-то из, казалось бы, не связанных дисциплин: издательского дела, программирования, переплёта книг, скейтбординга, пожаротушения, каратэ. - Интерфейсы существуют, чтобы их использовали
Как и в других направлениях дизайна, дизайн интерфейсов успешен тогда, когда люди используют результат вашего труда. Как в случае красивого стула, на котором невозможно комфортно сидеть, дизайн интерфейса терпит неудачу, когда люди предпочитают не пользоваться им. Таким образом, дизайн интерфейсов это и создание продукта и среды его использования. Недостаточно когда интерфейс тешит эго дизайнера — им должны пользоваться!
Дизайнер интерфейсов — это специалист, создающий удобный интерфейс для той или иной площадки, предугадывая действия ее посетителей. Он обеспечивает простую, понятную и приятную навигацию сайта, в результате чего потенциальный клиент не запутается в лабиринте ссылочной массы и страниц. Профессия подходит тем, кого интересует психология, рисование и информатика (см. выбор профессии по интересу к школьным предметам).
Это относительно новая профессия, которая обретает все большую популярность. Специалист, работающий в этой области, должен отличаться прекрасными аналитическими способностями, ведь именно он создает приятные, удобные и работоспособные интерфейсы для ПО, сайтов, приложений, техники, разнообразного оборудования.
Краткое описание
Представитель этой профессии не создает сайты, нет, он создает удобный интерфейс для той или иной площадки, предугадывая действия ее посетителей. Он обеспечивает простую, понятную и приятную навигацию сайта, в результате чего потенциальный клиент не запутается в лабиринте ссылочной массы и страниц.
Специалист должен понимать требования потенциальных клиентов и просчитывать их действия и даже ошибки, максимально облегчая работу с тем или иным продуктом. Именно он определяет, как будет располагаться меню, какие кнопочки будет нажимать пользователь, чтобы перейти на ту или иную страницу, как будет выглядеть курсор и решает многие другие задачи, поставленные заказчиком.
Особенности профессии
Потенциальный работодатель выдвигает к специалисту множество требований, поэтому дизайнер должен уметь выполнять следующие задачи:
- предугадывать действия целевой аудитории;
- заниматься написанием пользовательских сценариев;
- иметь минимальные навыки, которые помогут ему рисовать промо-материалы и страницы;
- уметь отличить хороший и продающий дизайн от плохого;
- уметь тестировать готовый дизайн сайта и исправлять некоторые ошибки в нем;
- анализировать рынок;
- заниматься созданием инфографики и презентаций;
- знание технологий создания сайта (сбор и анализ требований, прототипирование, правки и т. д.).
- верстка и многое другое.
Эта специальность пока не слишком известна, ведь чаще всего дизайн интерфейсов возлагают на плечи профессионального программиста и графического дизайнера. Профессию «дизайнер интерфейсов» в высших учебных заведениях вы не найдете, поэтому специальность могут освоить лишь программисты, веб-дизайнеры, 3-D аниматоры и другие люди, которые имеют IT-образование.
Плюсы и минусы профессии
Плюсы
- Высокая заработная плата.
- Возможность работать удаленно.
- Рынок интернет-торговли находится в стадии развития, поэтому работу найти легко.
- Можно совмещать ее с другими видами деятельности, получая дополнительную прибыль.
- Есть хорошие перспективы карьерного роста.
- Недорогое обучение, много бюджетных мест для поступления на смежные специальности (графический дизайнер и другие).
Минусы
- Профессия не слишком известная, поэтому на специалиста могут взвалить обязанности по созданию дизайна сайта, его усовершенствованию и даже наполнению.
- Нет фиксированной заработной платы.
- Всегда нужно подставиться под требования заказчиков, которые могут быть достаточно капризными.
- Сложности с официальным трудоустройством, чаще всего эти специалисты либо трудятся программистами, либо работают фрилансерами.
- Нужно вкладывать собственные средства в ПО, хорошую технику.
Важные личные качества
- Отличные аналитические способности.
- Не конфликтность.
- Склонность к монотонной и малоподвижной работе.
- Знание иностранных языков и языков программирования.
- Хорошо развитый художественный вкус.
- Умение рисовать, используя современные программы.
- Знание основ маркетинга, дизайна и программирования.
Обучение на Дизайнера интерфейсов
Если вы хотите в будущем работать дизайнером интерфейсов, то обязательно должны получить специальность, которая напрямую связана со сферой IT-технологий:
- веб-дизайн;
- компьютерная графика и дизайн;
- информационный дизайн и другие.
Для поступления необходимо сдавать экзамен по русскому языку и математике, а также информатике, литературе. Заметим, что сюда может добавиться творческий конкурс, но его проходят лишь те студенты, которые выбирают дизайнерское направление. Если вы поступаете на факультет, который связан с программированием, то в приоритете физика и информатика. Количество экзаменов и вид творческого конкурса (рисунок, экспозиция или живопись) зависит от высшего учебного заведения, в которое вы поступаете.
Школа «Тэглайн» (онлайн-курсы)
В течение 16 недель ученики будут получать знания о веб-дизайне, визуальной составляющей продукта, этапах проекта и его презентации, смогут создать идеальное портфолио и пройти практику в лучших агентствах РФ. Занятия проводятся в формате онлайн-семинаров, поэтому можно обучаться профессии в любое время, но не менее 5 часов в неделю. Участники познают теорию и выполняют домашние задания, которые будут проверять преподаватели школы.
Школа Projector (г. Киев, форма обучения — вечерняя)
Курс состоит из 27 занятий, каждое из которых длится 2 часа. Группы состоят не более чем из 14 студентов, поэтому у учеников есть время узнать о теории и испытать полученные знания на практике. Курс будет полезен для начинающих и опытных веб-дизайнеров и программистов!
Место работы
Дизайнер, специализирующийся на создании интерфейсов, сможет найти работу в таких компаниях:
- агентства, занимающиеся разработкой мобильных приложений;
- студии, которые создают игры, интернет-магазины, целевые страницы;
- работа на частных лиц, которые уже имеют свой сайт и хотят его усовершенствовать;
- штатный IT-специалист на предприятиях, в муниципальных учреждениях и других компаниях этого уровня.
Чаще всего эти специалисты занимаются фрилансом, ища работу на досках объявлений и специализированых сайтах.
Оплата труда
Зарплата на 11.03.2019
Россия 30000—100000 ₽
Москва 60000—170000 ₽
Ставка за работу дизайнера интерфейсов зависит от его опыта и профессиональных навыков.
Карьера
Изначально такой специалист должен научиться создавать сайты, исправлять ошибки, уделяя много внимания изучению теории. Он может рассчитывать на карьерный рост, но только при условии солидного опыта работы. Этот специалист может занять должность арт-директора, начальника отдела или же стать ведущим дизайнером компании.
Профессиональные знания
Специалист должен уметь работать с разными инструментами, ведь именно с их помощью он достигает поставленных целей:
- безупречное знание usability;
- знание языков программирования;
- умение работать с графическими редакторами.
Профессия очень перспективная, всего через 5-7 лет специалисты в этой сфере будут еще больше востребованы на рынке труда.
Несмотря на обилие учебных материалов, начинающих специалистов год за годом заботит один и тот же вопрос: как сделать первые шаги в дизайне.
Получив множество вопросов от молодых дизайнеров, я решил написать материал, который бы мечтал прочитать на старте своей карьеры. Он основан на личном опыте и уроках, полученных в общении с успешными дизайнерами из больших студий и продуктовых команд.
В первой части, я расскажу о базовых навыках хорошего дизайнера, а во второй, о том, как их использовать для построения карьеры.
Фундамент дизайнера
В любой сфере есть ряд базовых навыков, без которых в профессии делать нечего. Лишь обретя эти навыки можно расчитывать на повышение в должности и доходе.Фокус, цели и задачи
Каждый дизайнер должен знать, для каких целей создается интерфейс и какие задачи он должен решать.Сайт авиакомпании существует для людей, цель которых переместиться из одного города в другой, а его задача - помочь найти рейс, соотвествующий их потребностям.
Цели и задачи - это не одно и тоже. У вас может быть цель хорошо провести вечер, а задача - выбрать между кино, рестораном и футболом.
Дизайнер должен всегда в голове держать цели пользователей, а на практике решать их задачи. Наверняка, вы сейчас работаете или начинаете работать над каким-либо проектом. Подумайте, какие у него цели и какие задачи он должен решать.
Задач у сервиса может быть много и некоторые будут друг с другом конфликтовать, поэтому вам нужно выбрать одну основную и сделать ее выполнение максимально удобным, при этом не пожертвовав остальными.
Как бы это работало, если бы это было просто?
Я регулярно задаю себе этот вопрос, встречая новую задачу. Он помогает мне отвлечься от существующих шаблонов и придумать решение, соответсвующее текущей задаче.На старте карьеры я, как и многие, первым делом бежал на дизайнерские ресурсы в поисках “вдохновения” и пытался найти решение, которое можно применить к моей задаче. Хотя на самом деле, я не искал вдохновение, а лишь пытался поменьше напрягать свой мозг.
Скопировать чужое решение заманчиво, но не нужно забывать, что любой паттерн может хорошо работать в одном случае и абсолютно не работать в другом. Да и кем вы станете, лишь подражая чужим работам? Ведь хорошего дизайнера всегда отличает умение мыслить.
Полезно перенимать чужой опыт, просматривая концепты и работающие сервисы, но при столкновении с новой задачей не нужно забывать включать голову.
Эстетика интерфейса
Я люблю Medium за хорошую типографику и удобство написания статей, хотя на других ресурсах мои статьи порой набирают в два-три раза больше просмотров. Но дело ведь не только в красоте.Хороший визуал облегчает чтение и избавляет от необходимости менять масштаб страницы. Хороший визуал делает акценты на важных элементах, что приятно в социальных сетях и критически важно в сервисах для бизнеса.
Instagram не просто так изменил свой интерфейс с черно-синего на белый. Его целью было сделать акцент на контенте, который генерируют пользователи.
Переодически мы слышим об ошибках, которые совершают люди из-за сложного интерфейса. Конечно, поставить случайно лайк - не проблема, а вот ошибка при управлении самолетом или атомной станцией может привести к трагедии.
Самый простой способ улучшить визуальные навыки - перенимать чужой опыт, копируя интерфейсы и читая толковые материалы. Мне в свое время очень помогли дизайн-гайдлайны Google.
Еще одна очень важная вещь - взгляд со стороны. Я всегда работал в стартапах, где был одним дизайнером, что давало мне большую свободу действий, но лишало обратной связи опытных коллег.
Большинство дизайнеров начинают свою карьеру дома, поэтому единственным способом получить обратную связь для них является завязать отношения с опытным дизайнером и периодически просить у него комментарий по поводу своих работ.
Что ему нужно?
Хороший дизайнер думает сценариями, а не экранами.Сценарий - это последовательность действий, которые нужно совершить пользователю чтобы выполнить определенную задачу. Например, выбрать оптимальный рейс. Сценарий может решаться в рамках одного экрана, а может содержать их сколько угодно. Задача дизайнера - не сократить количество экранов, а сделать выполнение задачи пользователя более удобным, интуитивным.
Иногда задача требует пошаговой логики, где каждый шаг - это отдельная страница, как при сложной регистрации. Некоторые задачи удобнее решать в рамках одного экрана (пример: создание публикации в соцсетях).
Сценарии лежат в основе проектирования любого интерфейса, поэтому любой дизайн должен начинаться с них.
Системность в дизайне
Все компании, которых хоть немного заботит дизайн, приходят к идее, что перерисовывать одни и те же компоненты и расставлять их новым способом - довольно глупая затея. Поэтому все начали создавать единую систему компонентов, а чуть позже и логику их размещения.Спустя еще какое-то время, дизайнеры объединились с разработчиками, связав свои элементы в макетах со сверстанными компонентами на фронте. Благодаря этому, дизайнеру все меньше приходится рисовать и все больше использовать свои два главных инструмента: мозг и фронтенд-разработчика.
Разработчиков нужно уважать и хотя бы логически понимать суть их работы. Без этого сложно будет найти общий язык и создать отличный продукт.
Имея готовый набор необходимых элементов и стилей, вы сможете больше думать о решении проблем пользователей и меньше о рисовании.
Даже хорошую идею легко убить
Помню, как в начале карьеры, презентуя дизайн-решение, меня было легко смутить, задав простой вопрос, например, почему какой-то элемент именно такой. Тогда я пытался аргументированно ответить на вопрос из-за чего возникал бессмысленный диалог, который влиял на восприятие всей работы.Лишь с опытом я понял, что вопросы, не касающиеся основной темы нужно игнорировать. Например, сказав: “Это лишь детали, поэтому давайте обсудим основные вещи, которые влияют на бизнес, а в конце вернемся к вашему вопросу”. Как ни странно, этот ответ избавляет вас от бесполезной беседы и представляет в виде профессионала, который заботится о бизнесе клиента, а не своем эго.
Для того чтобы ваши дизайн-решения принимались, необходимо связывать их с аналитикой, которую вы провели прежде чем придти к этому решению. Показав, что ваше решение стало итогом серьезной аналитической работы, в рамках которой вы изучили конкурентов и протестировали несколько решений, с вами сложно будет не согласиться.
Книги для дизайнеров
Меня периодически спрашивают, какие книги помогли мне стать в дизайне лучше.Никакие.
Лишь регулярная практика и понимание бизнеса помогли мне приносить компании большую пользу и повысить свою ценность на рынке.
Куда устроиться
Есть три популярных варианта: студия, продукт или стартап.Студия хорошо подходит для новичков, так как вокруг тебя полно дизайнеров у которых можно чему-либо научиться. Здесь выше темп, так как есть четкие сроки начала и окончания проекта. Из-за того, что стоимость проекта привязана к человеко-часам, в студиях зарабатывают, в основном, меньше, чем в продукте.
В продукте более спокойный ритм, так как прибыль компании напрямую не зависит от работы дизайнера. Зачастую, дизайн-команда занимается функционалом, который появится в будущем, поэтому для них качество чаще всего важнее скорости. Особенно для проектов, которыми пользуются миллионы.
В стартапах вклад каждого сотрудника чрезвычайно важен, так как команды небольшие и зачастую отдел дизайна состоит лишь из одного человека, поэтому идти туда лучше полностью уверенным в своих силах.
Всю свою карьеру, не считая фриланса, я работал в стартапах, где был единственным дизайнером. Минус этой работы в том, что рядом нет наставника, поэтому я много занимался самообразованием и анализом своей работы. Плюс в том, что ты можешь максимально влиять на итоговый продукт, работая вместе основателями.
Генерация удачи
[очень важная часть]Многие ограничивают свое представление о мире профессиональными навыками, хотя они являются лишь необходимым минимумом. Вы можете быть отличным дизайнером, но какой в этом толк, если о вас никто не знает (ни клиенты, не сообщество)?
Некоторым везет и их карьера выстраивается благоприятным образом, но не потому что они с рождения счастливцы, а лишь потому, что они неосознанно выполняли действия, которые повышают шансы на успех.
Среди этих действий есть активные и пассивные.
Среди пассивных - это наличие резюме, портфолио и аккуратных профилей в соцсетях. Эти вещи повышают вероятность того, что вас могут случайно заметить и предложить интересный проект.
Активные действия - отклики на чужие вакансии, публикации статей и кейсов, общение с профессионалами из разных сфер, прямые письма работодателям и создание своего сообщества. Благодаря этому, вы не ждете пока вас найдут, а своими силами повышаете вероятность перспективного предложения.
Я знаю одного дизайнера из региона, который вел таблицу с ведущими профессионалами из нашей отрасли и по приезду в Москву встречался с ними. Благодаря этому, ему удалось получить хорошее предложение о работе и спустя полтора года сменить одну топовую студию на другую, заняв место партнера.
Популярный ныне вариант - пройти курс от известной компании или поучаствовать в конкурсе.
Павел Шумаков, выиграв Russian Design Cup получил предложение от ВКонтакте, а чуть позже перебрался в лондонский офис Badoo. Некоторые ребята, пройдя курс от Skillbox получили предложение о работе в AIC.
Давно известный вариант - сделать фейковый проект, вложив в него все силы и качественно опубликовать его в портфолио. Самый известный пример - редизайн Google News Георгия Квасникова, который принес ему ряд предложений от крупных компаний.
Ну и последнее.
Важно понимать, что за ширмой любого бренда находятся адекватные люди, которые готовы в любое время рассмотреть амбициозного кандидата. Ваша задача - лишь правильно себя преподнести. Грамотное письмо на общий ящик и аккуратное портфолио - это порой все, что нужно.
Одна из самых главных вещей, которую я понял за свою карьеру - это умение идти вперед, несмотря на неудачи. Ошибок не избежать, поэтому нужно нормально к ним относится.Это элементарная логика:
Успеха добиваются не те, кто не совершает ошибок, а те, кто несмотря на них идет вперед.Мой путь, который я описал в большой истории “Становление дизайнера”, содержал ряд неудач, которые могли стоить мне работы, но даже на старте карьеры интуиция подсказывала, что переживания никому не помогут и единственный способ чего-то добиться - просто идти вперед.
Поэтому не переживайте, столкнувшись с проблемами на новой работе. Все через это проходили, включая Стив Джобса, который за первые 15 лет своей карьеры совершил ряд дорогостоящих ошибок, из-за которых в конце 90-х многие его считали неудачником. И лишь высокомерная уверенность в своем предназначении, позволила ему идти вперед и спустя десятилетие стать иконой отрасли.
Будьте открытыми, налаживайте отношения с коллегами, интересуйтесь опытом других и когда вам выпадает шанс, берите на себя инициативу.
Неизбежный исход
Возможно, начинающим специалистам еще рано читать про исход, но один дизайнер написала мне, что не хочет просто “двигать пиксели”, а стремиться учавствовать в создании продукта. Обычно дизайнеры приходят к этим мыслям спустя несколько лет, устав делать однотипные сервисы для заказчиков.Самым логичным вариантом роста является позиция арт-директора, которая заключается в том, что вы навсегда закрываете графический редактор и выполняете лишь интеллектуальную работу, корректируя направление других дизайнеров.
Другой вариант - перейти в продуктовую компанию, где вместе с коллегами у вас будет возможность работать над улучшением одного продукта.
Неплохой вариант - присоединиться к стартапу и отвечать за дизайн всего проекта. В случае успеха, вы начнете набирать и обучать других дизайнеров, формируя отдел.
Возможно, кто-то из вас захочет перейти на позицию продукт-менеджера и отвечать за коммуникацию между командами и стратегию развития проекта.
Ну и самый амбициозный вариант - основать свой проект. Хороший дизайнер понимает, как работает маркетинг и разработка, что нужно людям и умеет это использовать.
Совершить переход с позиции дизайнера не так сложно. Вместо того, чтобы ждать когда вас повысят, начните брать на себя новые обязанности самостоятельно.
Я применяю этот принцип довольно давно и как показывает опыт, при наличии адекватных коллег ваша инициатива будет отмечена.
Ключ ко всему
Молодой дизайнер задал мне вопрос:Лучше продолжить самообразование или поскорее устроиться на работу?
Всегда и во всем, практика – лучший способ изучить какую-либо дисциплину, а если она совмещается с адекватной обратной связью, то ничего лучше вы найти не сможете.Поэтому, если вы хотите чего-то добиться в дизайне, то как можно раньше приступайте к работе и очень хорошо, если рядом с вами будет опытные коллеги. Если таковых нет, то делайте проекты самостоятельно и ищите обратную связь среди дизайнеров в социальных сетях.
На старте карьеры делайте фокус на качество, а не количество проектов. Не нужно искать новую работу в поисках лучшей жизни. Сначала научитесь делать ее хорошо.
И не забывайте, что дизайн-навыки – лишь половина успеха. Помимо них, вам нужно уметь общаться с людьми, понимать принципы работы бизнеса и проявлять активность в поиске интересных предложений.
Работайте упорно каждый день и не забывайте, что любой успех требует времени.
Терпение и упорство – ключ ко всему.
Сделайте эту неделю прорывной.
