Проектирование интерфейса: Проектирование графического интерфейса пользователя / Хабр

Проектирование графического интерфейса пользователя / Хабр

Введение

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

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

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

Общие принципы

• Интерфейс должен быть интуитивно понятным. Таким, чтобы пользователю не требовалось объяснять как им пользоваться.
• Для упрощения процесса изучения необходима справка. Буквально — графическая подсказка, объясняющая значение того или иного ЭИ. Полное руководство должно быть частью интерфейса, доступной в любой момент.
• Возвращайте пользователя в то место, где он закончил работу в прошлый раз. Зачем нажимать все заново?
• Чаще всего, пользователи в интерфейсе сначала ищут сущность(существительное), а затем действие(глагол) к ней. Следуйте правилу «существительное -> глагол». Например, шрифт -> изменить.
• Чем быстрее человек увидит результат — тем лучше. Пример — «живой» поиск, когда варианты, в процессе набора поискового запроса. Основной принцип: программа должна взаимодействовать с пользователем на основе наименьшей значимой единицы ввода.
• Используйте квазирежимы. Например, ввод заглавных букв с зажатой клавишей shift — это квазирежим. С включенным capslock — режим. Основное отличие в том, что человек может забыть в каком режиме он находится, а в квазирежиме(с зажатой доп. клавишей) это сделать гораздо сложнее.
• Следует с осторожностью предоставлять пользователю возможность, по установке личных настроек. Представьте, сколько времени потратит сотрудник настраивая Word, если его интерфейс был полностью переделан предыдущим.
• Чем больше пользователь работает с какой-то конкретной задачей, тем больше он на ней концентрируется и тем меньше перестает замечать подсказки и сообщения, выводимые программой. Чем более критической является задача, тем меньше вероятность того, что пользователь заметит предупреждения относительно тех или иных потенциально опасных действий.

Какие ЭИ создать?

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

Какой должен быть дизайн ЭИ?

На самом деле, дизайн ЭИ — тема отдельной статьи. Тут нужно учитывать все: начиная от цвета, формы, пропорций, заканчивая когнитивной психологией. Однако, несколько принципов все же стоит отметить:

• Цвет. Цвета делятся на теплые(желтый, оранжевый, красный), холодные(синий, зеленый), нейтральные(серый). Обычно для ЭИ используют теплые цвета. Это как раз связано с психологией восприятия. Стоит отметить, что мнение о цвете — очень субъективно и может меняться даже от настроения пользователя.
• Форма. В большинстве случаев — прямоугольник со скругленными углами. Или круг. Полностью прямоугольные ЭИ, лично мне нравятся меньше. Возможно из-за своей «остроты». Опять же, форма как и цвет достаточно субъективна.
• Основные ЭИ(часто используемые) должны быть выделены. Например размером или цветом.
• Иконки в программе должны быть очевидными. Если нет — подписывайте. Ведь, по сути дела, вместо того чтобы объяснять, пиктограммы зачастую сами требуют для себя объяснений.
• Старайтесь не делать слишком маленькие элементы — по ним очень трудно попасть.

Как правильно расположить ЭИ на экране?

• Есть утверждение, что визуальная привлекательность основана на пропорциях. Помните известное число 1.62? Это так называемый принцип Золотого сечения. Суть в том, что весь отрезок относится к большей его части так, как большая часть, относится к меньшей. Например, общая ширина сайта 900px, делим 900 на 1.62, получаем ~555px, это ширина блока с контентом. Теперь от 900 отнимаем 555 и получаем 345px. Это ширина меньшей части:
• Перед расположением, ЭИ следует упорядочить(сгруппировать) по значимости. Т.е. определить, какие наиболее важны, а какие — менее.
• Обычно(но не обязательно), элементы размещаются в следующей градации: слева направо, сверху вниз. Слева в верху самые значимые элементы, справа внизу — менее. Это связано с порядком чтения текста. В случае с сенсорными экранами, самые важные элементы, располагаются в области действия больших пальцев рук.
• Необходимо учитывать привычки пользователя. Например, если в Windows кнопка закрыть находится в правом верхнем углу, то программе аналогичную кнопку необходимо расположить там же. Т.е. интерфейс должен иметь как можно больше аналогий, с известными пользователю вещами.
• Размещайте ЭИ поближе там, где большую часть времени находится курсор пользователя. Что бы ему не пришлось перемещать курсор, например, от одного конца экрана к другому.
• Соблюдайте пропорции
• Элемент интерфейса можно считать видимым, если он либо в данный момент доступен для органов восприятия человека, либо он был настолько недавно воспринят, что еще не успел выйти из кратковременной памяти. Для нормальной работы интерфейса, должны быть видимы только необходимые вещи — те, что идентифицируют части работающих систем, и те, что отображают способ, которым пользователь может взаимодействовать с устройством.
• Делайте отступы между ЭИ равными или кратными друг-другу.

Как ЭИ должны себя вести?

• Пользователи привыкают. Например, при удалении файла, появляется окно с подтверждением: «Да» или «Нет». Со временем, пользователь перестает читать предупреждение и по привычке нажимает «Да». Поэтому диалоговое окно, которое было призвано обеспечить безопасность, абсолютно не выполняет своей роли. Следовательно, необходимо дать пользователю возможность отменять, сделанные им действия.
• Если вы даете пользователю информацию, которую он должен куда-то ввести или как-то обработать, то информация должна оставаться на экране до того момента, пока человек ее не обработает. Иначе он может просто забыть.
• Избегайте двусмысленности. Например, на фонарике есть одна кнопка. По нажатию фонарик включается, нажали еще раз — выключился. Если в фонарике перегорела лампочка, то при нажатии на кнопку не понятно, включаем мы его или нет. Поэтому, вместо одной кнопки выключателя, лучше использовать переключатель(например, checkbox с двумя позициями: «вкл.» и «выкл.»). За исключением случаев, когда состояние задачи, очевидно.
  
  Такой переключатель напрямую отражает состояние ЭИ
• Делайте монотонные интерфейсы. Монотонный интерфейс — это интерфейс, в котором какое-то действие, можно сделать только одним способом. Такой подход обеспечит быструю привыкаемость к программе и автоматизацию действий.
• Не стоит делать адаптивные интерфейсы, которые изменяются со временем. Так как для выполнения какой-то задачи, лучше изучать только один интерфейс, а не несколько. Пример — стартовая страница браузера Chrome.
• Если задержки в процессе выполнения программы неизбежны или действие производимое пользователем очень значимо, важно, чтобы в интерфейсе была предусмотрена сообщающая о них обратная связь. Например, можно использовать индикатор хода выполнения задачи (status bar).
• ЭИ должны отвечать. Если пользователь произвел клик, то ЭИ должен как-то отозваться, чтобы человек понял, что клик произошел.

В заключении

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

Литература

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

как сделать так, чтобы UI не лишил вас прибыли — Дизайн на vc.ru

В ноябре 2018 года студия «Лайв Тайпинг» рассказывала читателям vc.ru, из чего складывается стоимость мобильного приложения. Эта статья посвящена одному из слагаемых: пользовательскому интерфейсу.

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

Пользовательский интерфейс, или UI (User Interface) — это внешний вид продукта, способ общения между пользователем и программой. А ещё интерфейс влияет на то, будет ли продукт приносить деньги и пользоваться уважением и любовью аудитории.

Доказывать важность дизайна как магнита для пользователей удобно на примере соцсетей с миллионами пользователей. Резонансным случаем в рунете стал редизайн «Кинопоиска». 96% негативных отзывов на него говорят сами за себя: владельцы сайта, компания «Яндекс», сделала это без оглядки на мнение пользователей.

Когда плиточный дизайн — не лучшая идея Источник: tjournal.ru

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

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

Редизайн «Живого журнала» в 2014 году тоже не впечатлял. Его хорошенько почистили от лишних элементов, но в целом он не вызвал восторгов: типографика, модульная сетка, адаптив — всё выглядело сырым и неудобным.

Главная страница в 2014 году. Вернуться к старой версии (как и во времена былого величия «Живого журнала») нет никакой возможности

Вы хотите повторить судьбу «Живого журнала» и «Кинопоиска»? Не думаем, поэтому мы и написали эту статью. Вам как клиенту будет полезно знать, как именно создаётся дизайн сайтов и приложений, из каких этапов состоит работа и что вы должны получить. Чувство контроля над этими этапами приблизит ваш проект к успеху.

Итак, разберём особенности разработки пользовательского интерфейса пошагово.

Проектирование

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

Вложить время и деньги в проектирование — это вложить время и деньги в понимание того, что получится на выходе.

Рекомендации по проектированию пользовательских интерфейсов (по книге Раскина «Интерфейс»). Часть 1

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

1. Особенности человеческого восприятия

1.1. Локус внимания

В любой момент времени человек может сосредоточить свое внимание только на одном предмете. Это может быть какой-то объект реального мира (например, лист бумаги) определенная область экрана или окна, а может и какой-нибудь процесс «в уме» (например, когда человек обдумывает свои действия или что-то рассчитывает). Предмет, на котором сосредоточено внимание человека, будем называть локусом его внимания. С локусом внимания связано как минимум две особенности человеческого восприятия.

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

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

1.2. Формирование привычек

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

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

1.3. Промлема модальности

Существенным препятствием для формирования у пользователя привычек при работе с интерфейсом является наличие в интерфейсе нескольких режимов. Режимы — это состояния интерфейса, в которых один и тот же жест пользователя интерпретируется по-разному. Жестом может являться набор слова, нажатия определенного сочетания клавиш (например, Ctrl-S) или кнопки мыши, даже движение мышью и т.п. Модальность является также серьезным источником ошибок при взаимодействии с программой. Даже изменение состояния объекта (например, с включенного на отключенное), выполняемое одним и тем же жестом, является модальным, поскольку для выполнения желаемого действия («включить», «отключить») необходимо знать и держать в локусе внимания текущее состояние объекта. Как было сказано в подразделе 1.1, если внимание человека сосредоточено на чем-то другом, то информация о состояниянии объекта может быть проигнорирована, что повлечет за собой ошибки.

К счастью, модальности интерфейса не возникает в двух случаях.

1. В случае, если контекст, в котором выполняется жест, находится в локусе внимания пользователя. Например, нажатие клавиши Backspace при наборе текста можно было бы считать модальным, поскольку результат этого жеста зависит от того, какая буква находится перед курсором. Однако, данная буква находится в локусе внимания, поскольку именно ее пользователь хочет удалить при нажатии Backspace. Клавиша Caps Lock, напротив, во многих случаях является модальной, т.к. сохраняет свой эффект — изменение регистра букв — и после того, как локус внимания пользователя сместился с набора нужного слова в верхнем регистре на другие операции.

2. Если при выполнении жеста дополнительно удерживается какая-либо клавиша или несколько (например, Ctrl или Ctrl + Alt). Фактически, такой жест воспринимается как новый, поэтому не конфликтует с другими. Раскин называет подобную модификацию «квазирежимом».

2. Принципы построения интерфейсов

2.1. Отсутствие модальности

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

2.2. Сохранность пользовательских данных

Назначением большинства программ в конечном итоге является (должно являться) упрощение работы, выполняемой человеком. Пользовательские данные — это результат работы человека. Если этот результат будет утерян, работу придется выполнять снова, что нельзя назвать упрощением. Поэтому любая программа должна обеспечивать сохранность данных пользователя, будь то простое текстовое сообщение, 3D-модель или научная статья. О важности данных может судить только сам пользователь, но никак не программа, с которой он взаимодействует. Путей для обеспечения сохранности данных может быть много: это и автоматическое сохранение любых изменений, и обратимость операций, и создание резервного архива (backup).

2.3. Формирование команд по принципу «объект -> действие»

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

1. Сначала указать объект, а затем действие, которое необходимо совершить с этим объектом (модель «объект-действие»).

2. Сначала указать действие, а затем объект, к которому следует применить это действие (модель «действие-объект»).
Предпочтительной является первая модель — «объект-действие». Во-первых, она исключает многие модальные ошибки, поскольку переключение действия обычно сопровождается переключением режимов работы. Во-вторых, она проще для восприятия человеком, поскольку, как правило, локус внимания пользователя уже находится на объекте, когда возникает необходимость выполнить какое-то действие с этим объектом.
Использование второй модели — «действие-объект» — тоже допустимо, но только в тех случаях, когда ее применение достаточно аргументировано.

2.4. Монотонность

Привычки могут формироваться у человека лишь в том случае, если каждое действие можно выполнить всегда одним и тем же образом. Интерфейс можно назвать монотонным, когда каждое элементарное действие в нем можно выполнить ровно одним способом (т.е. жестом). Часто для одного и того же действия предусматривается несколько способов выполнения: через меню, сочетанием клавиш, щелчком мыши и т.п. Однако подобная практика затрудняет формирование привычек, поскольку пользователь должен каждый раз выбирать, каким способом выполнить действие. И лишь когда он станет выполнять действие всегда только одним способом, т.е. сам сведет немонотонный интерфейс к монотонному, у него появится возможность формировать привычку для выполнения этого действия. Если сразу спроектировать интерфейс так, чтобы он был монотонным, то это сократит время обучения пользователя. Исключение, вероятно, может составлять случай, когда проектируется интерфейс для пользователей с разными устройствами. Например, часть пользователей пользуется настольным ПК с клавиатурой и мышью, а часть — планшетным ПК с сенсорным экраном. Однако и в этом случае стоит подумать о других альтернативах, например, нахождении способа взаимодействия, который будет применим на разных устройствах, или разработке разных версий интерфейса для разных устройств. Иначе есть риск создать интерфейс, который не будет устраивать ни ту, ни другую группу пользователей.

2.5. Видимость

Интерфейс программы должен своевременно информировать пользователя о:
1) текущем состоянии системы и смене состояния в результате действий пользователя;
2) способах управления и воздействия на систему.

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

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

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

2.6. Состоятельность

Элемент управления является не только видимым, но и состоятельным, если по одному его виду пользователь может определить, как именно с ним взаимодействовать: кнопки — нажимать, полосы прокрутки — перемещать, и т.п. Таким образом, принцип состоятельности дополняет принцип видимости.

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

Памятка UX / UI дизайнеру. 19 принципов построения интерфейсов

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

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

• Принцип KISS. От англ. «keep it short and simple». Интерфейс должен быть простой и понятный, задачи должны решаться минимальным числом действий, все должно быть понятно и очевидно.
• Не заставляйте думать. Нужно избегать сложных действий, которые заставляют пользователей думать.
• Убираем очевидное. Не стоит показывать очевидные элементы интерфейса, нужно сосредоточиться только на действительно необходимых вещах.
• Соотношение сигнал / шум. В каждом интерфейсе есть важные элементы (сигналы) и маловажные или даже бессмысленные для определенной части системы (шум), естественно, нужно концентрироваться на сигналах и избегать шума.
• Проверенное лучше модного. Не стоит цепляться за моду и делать что-то только потому, что так делают другие, лучше отдать предпочтение проверенным элементам интерфейса.
• Привычные элементы управления. В любом современном интерфейсе есть много элементов управления, будет лучше использовать привычные элементы и визуальные образы.
• Люди не читают, люди просматривают. Пользователи не любят читать большие массивы текстов, не заставляйте их это делать.
• Принцип умного заимствования. Не стоит изобретать велосипед для стандартных вещей.
• Кошелек Миллера. В одном функциональном блоке не может быть больше 5-7 элементов, иначе пользователь не сможет удерживать информацию в кратковременной памяти.
• Принцип группировки. Информацию на странице желательно разбивать на логические блоки (группы), так пользователю легче ориентироваться.
• Интуитивная понятность. Понимание лучше запоминания.
• Все полезное на виду. Все важные элементы интерфейса должны быть на виду и соответствующим образом выделены.
• Принцип 3х кликов. Должно быть не более 3х кликов для перехода из одного раздела в другой. Это же правило применимо к главной странице: любая важная информация должна быть доступна не более чем в 3 клика.
• Однородность. В больших проектах часто встречается однородный функционал в разных частях сайта (например, комментарии), он не должен отличаться. Это же касается и стиля.
• Способы решения задачи. Пользователям нужно предлагать способы решения их задач с помощью интерфейса, и эти способы должны быть очевидны.
• Принцип мостовых перил. Этот принцип еще называют «защита от дурака», пользователей нужно защищать от случайных действий.
• Правильный копирайтинг. Проектирование интерфейса – это во многом копирайтинг, важна каждая буква, особенно заголовки.
• Принцип единства. Настройки и элементы управления нужно стараться не прятать в отдельные разделы, а дать возможность управлять из одного места, если это уместно.
• Тренды. Стоит учитывать современные тенденции, чтобы интерфейс не устарел еще до выхода проекта, но подходить к этому вдумчиво.

P.S. Чтобы получать наши новые статьи раньше других или просто не пропустить новые публикации — подписывайтесь на нас в Facebook, VK, Twitter

P.P.S. Совсем скоро в нашей бизнес-школе Digitov стартует курс: Проектирование серьезных сайтов. Подписывайтесь на курс сейчас и сможете купить его со скидкой.

Оригинал статьи тут: http://seclgroup.ru/article-user-interface-architecture-principles.html

Автор:
Никита Семенов (Facebook, VK, LinkedIn)
CEO
Компания «SECL GROUP» / «Internet Sales Technologies»

Проектирование интерфейсов как оно есть: без купюр

Проектирование интерфейсов как оно есть. Процесс, особенности и нюансы.

Уже больше года я работаю в команде Tele2, где занимаюсь интерфейсами. У меня есть свой продукт, программа лояльности “Больше”: web версия и теперь уже отдельный блок в приложении Мой Tele2. Основная работа связана с интеграциями и разработкой различного функционала: от системы управления контента (CMS, читай административная панель), до эксклюзивных партнерств и механик.

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

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

Проектирование интерфейсов: это основа

Давайте представим себе скелет рыбы. Они все разные, ну пусть будет такой.

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

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

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

Кто занимается проектированием

Есть соблазн сказать, что вот же, есть ux/ui дизайнеры, обратился к ним за помощью, а потом получай результат. Но тут не так все просто. Ключ в информации и понимании полного контекста задач. Ты, как продакт, видишь (должен видеть) всю картину в целом, от задач пользователей до бизнес требований, от ближайших фич до стратегии развития всего продукта. Чем плотнее ты работаешь с дизайнером, тем более полным будет решение при проектировании.

В крупных компаниях, где разные продукты тесно связаны друг с другом, необходимо учитывать полную картину взаимодействия. Для этих целей используются общие встречи по проектированию (у нас в Tele2 они называются дизайн-сессиями). На таких встречах присутствует вся команда: отряд продактов по разным направлениям и дизайнеры.

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

Откуда начинается проектирование

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

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

Во-вторых они могут быть неясно сформулированы. “Хотим, чтобы фильтры в каталоге были более понятные” или “Сделайте корзину более заметной”. Что с этим делать? Помогать заказчикам переформулировать задачи. Конкретизировать их до конкретных ценностей, а лучше метрик:

“Хотим, чтобы фильтры в каталоге были более понятные” – “Хотим увеличить CTR фильтров ”

“Сделайте корзину более заметной” – “Необходимо увеличить кол-во заказов с корзины”

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

Задачи вытащили, идем дальше

Благо теперь у вас есть задача, а это, скажу я вам, уже 50% успеха (правда, просто поверьте). Переходим непосредственно к проектированию. Относительно недавно на работе с товарищем завязалась беседа, по-поводу того, как ставить задачи дизайнерам и оказалось, что существует принципиально два разных подхода:

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

Каждый подход по-своему хорош, но и не лишен недостатков.

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

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

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

Не забудь про сценарии

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

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

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

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

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

–

Если вам жалко кота Тома в мультфильме “Том и Джери” и вы хотите знать, когда появятся материалы в блоге, то подписывайтесь на наш telegram канал! Кстати, в канале есть материалы, которые не выходят на сайте, так что заглянуть точно стоит 😉 Продолжаем читать…

–

Проверка решения

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

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

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

Пользователь проголосовал, значит делаем

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

Теперь и пользователь счастлив и вы, потому что метрики, на которые вы закладывались с решением, растут. У фильтров повысился CTR, а через корзину кол-во заказов увеличилось на 10%. Проектирование интерфейсов выполнено на славу.

Принципы хорошего интерфейса

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

• Ясность и понятность. Пользователю не нужна инструкция, чтобы решить свою задачу через интерфейс.
• Ничего лишнего, только необходимые для решения задачи элементы интерфейса.
• Фокусировка. Есть основные элементы интерфейса, есть дополнительные, расставьте четкие визуальные акценты для решения задачи пользователя.
• Привычки против моды. Отдавайте предпочтение уже знакомым пользователю элементам интерфейса, нежели создавайте “шедевры”, которыми не будут пользоваться.
• Группировка. Объединяйте информацию в смысловые блоки, ну заставляйте пользователя вчитываться в каждую букву, чтобы понять суть.
• Единообразие. Если в одном разделе сайта кнопки выглядят определенным образом, то и в других частях, они должны выглядеть также.
• Эволюция. Интерфейсы не стоят на месте, они должны развиваться, иначе пользователь быстро потеряет к ним интерес. Следите за трендами и старайтесь идти в ногу со временем.

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

Итоги

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

Алексей А.

---

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

---

Ахахаххаха, просто божественный ролик про фанатов футбола, которые пропускают ключевые моменты матча во время разных ситуаций. Эта игра актеров и сама идея просто великолепны, браво Heineken, браво режиссеры!

Вконтакте

Facebook

Twitter

Google+

Загрузка…

8 этапов процесса разработки интерфейса мобильного приложения

От переводчика: Роман Гапонов — сооснователь компании Django Stars, которая занимается разработкой веб- и мобильных приложений. Основываясь на личном опыте и опыте своей компании, Роман написал статью о процессе разработки пользовательского интерфейса. Изначально она была размещена на Medium, на английском языке. Перевод этой статьи публикуется нами на Хабре.

Немного приятного: в этой статье (а это уже второй материал о мобильной разработке, первый здесь) есть своеобразная пасхалка, которая позволяет получить скидку на курс Skillbox и агентства Agima по мобильной разработке. Это ребус, который при расшифровке даст слово или название решения из сферы разработки мобильных интерфейсов. Скидка за угаданный ребус — 10%. Ребусы есть и в других наших статьях из этой серии. Скидки суммируются, и если собрать их все, можно получить курс за смешную цену.

Создание концепции

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

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

Финтех-приложение. Много иконок, они не слишком крупные, но работать с ними удобно. Обилие разнообразных функций

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

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

Брейнсторминг и эскизы

Как только концепция проекта ясна, двигаемся к следующему этапу — брейнстормингу. Он нужен, чтобы превратить идею интерфейса в реальность. Мы в Django Stars берем ручку и лист бумаги — это быстрее, чем использование таких продвинутых инструментов, как Balsamiq Mockups, Sketch, Photoshop и InVision.

Диаграмма переходов

Создание эскиза дает нам структуру интерфейса. Но как пользователь должен взаимодействовать с ним? Здесь поможет User Flow Diagram. Она проиллюстрирует логику продукта, показав всевозможные способы взаимодействия с интерфейсом, дорожную карту этих взаимодействий и состояние интерфейса на каждом этапе.

Утверждение структуры и диаграммы переходов

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

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

Выбор стиля интерфейса

Когда клиент все утверждает — можно двигаться дальше. Что будем делать? Выберем стиль интерфейса. Есть множество вариантов: от минимализма и Metro до material design и скевоморфизма. На этом этапе мы просим клиентов прислать несколько ссылок на примеры стиля интерфейса, который им нравится, а также спрашиваем об их планах на ближайшее будущее продукта. Мы уделяем внимание текущим трендам, масштабированию интерфейса, определяем время, которое необходимо на разработку и внедрение дизайна.

Подтверждение стиля

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

Курсы по теме: Fullstack мобильный разработчик.

Курс создан силами Skillbox и Agima. 4-месячная программа обо всех инструментах, без которых невозможна разработка мобильных продуктов.

Прототипирование, дизайн и их демонстрация

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

Wireframe

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

Макет

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

Кликабельный прототип

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

Так. Пришло время ребуса, вы попали именно в то место, где можно найти скидку. Учитывайте, что английский здесь может мешаться с русским, и главное — не забывайте, что мы будем тщательно следить за комментариями и удалять из них подсказки и ответы! Промослово, зашифрованное в ребусе, следует назвать, когда с вами свяжется наш менеджер после того, как вы отправите заявку на курс. Скидки за разгаданные ребусы суммируются между собой (с учетом этой статьи есть четыре ребуса), но не со скидками на сайте. Слишком медлить не стоит — промо работает до 30 августа 2018 года.

Анимированные flow

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

Утверждение дизайна

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

В качестве вывода

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

Skillbox рекомендует

кто именно нужен компаниям / Хабр

В последние несколько лет проектирование интерфейсов начало приобретать немалую популярность. Отечественные компании, чей бизнес так или иначе связан с компьютерами и интернетом стали понимать, что просто «дизайна» в том понимании, в каком он употребляется у нас уже недостаточно, нужно не только красиво, но и удобно. В результате мы видим немалое количество вакансий с такими словами в описании, как UX, UI, UCD, usability и всё в таком духе.

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

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

Цель исследования

В ходе анализа я хотел понять:

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

Источники данных

Для анализа были взяты вакансии с сайта hh.ru, т.к. именно его я чаще всего просматривал. Сначала я собирался проанализировать 100 резюме, но просмотрев 30, понял, что данные уже часто повторяются и решил остановиться на 40.
Подобное исследование я делаю впервые и совсем не претендую на объективность и полноту, но надеюсь, что общее положение дел мне всё-таки удалось показать.

Вакансии для исследования

Я обращал внимание на такие заголовки:

• ux/ui-designer;
• проектировщик интерфейсов;
• юзабилити-специалист ;
• дизайнер-проектировщик;

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

Востребованность профессии

Поиск по словосочетанию «проектировщик интерфейсов» выдал мне 120 вакансий в России, из них я и выбрал первые 40. Среди них было много повторяющихся в разных городах, поэтому реальная цифра будет меньше.
Для сравнения, поиск по запросу «web-дизайнер» выдал мне 1027 результатов.

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

Распределение вакансий по городам России

Здесь никаких сюрпризов. С очень большим отрывом лидируют Москва и Санкт-Петербург. В регионах проектировщики нужны, но крайне редко. Причина на мой взгляд в том, что такие специалисты нужны в основном в продуктовые команды, разрабатывающие веб-сервисы, приложения, десктопные программы (подробнее об этом ниже). А эти команды сосредоточены в основном в Москве и Питере, отсюда и такая статистика.
Кстати, в региональных веб-студиях тоже есть проектировщики, но, насколько мне известно, это единичные случаи.

Уровень зарплаты

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

Уровень зарплаты проектировщика интерфейсов

Сферы деятельности

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

Распределение вакансий по сферам деятельности

Типы платформ

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

Распределение вакансий по типам платформ

Требования к кандидатам

Я не стал помещать сюда требования по опыту, поскольку оно присутствует почти в 100% вакансий. В большинстве случаев работодатель ориентируется на опыт работы в 2-3 года по профилю деятельности. Работников с небольшим или отсутствующим опытом приглашали всего на две вакансии.
Наличие портфолио так же интересует большинство работодателей. В отклике на вакансию просят предоставить от 3 до 10 примеров лучших работ. Многие работодатели говорят о необходимости выполнить тестовое задание, а в паре вакансий оно даже было описано.

Итак, из сорока вакансий большинство содержало следующие требования:

Требования к проектировщикам, описанные в большинстве вакансий

Как мы видим, фотошоп продолжает оставаться программой №1 для всего, что имеет отношение к визуализации. Из программ прототипирования чаще всего упоминают Axure, но в большинстве случаев это не жесткое требование и у вас есть право предложить замену. Я например, использую Fireworks, который у меня работает за обе вышеупомянутые программы.
Среди популярных требований находятся и те, которые сопутствуют основной работе проектировщика: знание методологий проектирования, умение общаться с людьми и “понимание юзабилити”.
Нередко встречается необходимость знать английский. В основном, это требование представительств международных компаний, либо работающих с иностранными заказчиками. А вообще, специфика нашей работы такова, что английский хотя бы на уровне чтения спец. литературы знать нужно.
Интересно также, что художественное образование оказалось предпочтительнее технического. По крайней мере, среди тех, кто это явно указал.

Обязанности

Теперь посмотрим, чем же предстоит заниматься проектировщику интерфейсов.
Понятное дело, проектированием интерфейсов, об этом прямо заявило большинство работодателей. Я не хочу тут поднимать рассуждение должен ли проектировщик уметь рисовать финальный дизайн, но вторая строчка диаграммы даёт нам ответ на этот вопрос. 27 работодателей из 40 хотят, чтобы проектировщик делал не только прототипы, wirefrmes, sketches и т.п., но и прорисовывал их окончательный вид. Причем, помимо дизайна интерфейсов и продумывания UX, проектировщик иногда должен уметь рисовать промо-страницы, баннеры, листовки, иконки и даже иллюстрации. Тем не менее, во многих компаниях проектировщик работает в паре с графическим дизайнером.

Основные обязанности проектировщика интерфейсов

Дополнительные требования

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

Дополнительные требования к проектировщику

Условия работы и разные заманухи

Уж не знаю, насколько определяющими в принятии предложения о работе являются теннисные столы, чаи, плюшки и молодой, сплоченный коллектив, но обо всём этом в it традиционно говорят очень многие. Отрадно, что часто пишут про “белое” трудоустройство и хорошую мед. страховку. Интересно, как дело обстоит на практике?
Зная нелюбовь it-шников рано просыпаться, многие готовы сдвигать рабочий день на час-три вперед.
Кто-то готов возить сотрудников на профильные конференции и раздавать книги, кто-то оплачивать спорт зал и обучать английскому, некоторые заманивают сотрудников макбуками, офисом класса «А» и бесплатным питанием.

Условия труда для проектировщика

Выводы

Проанализировав 40 вакансий, я заметил некоторую закономерность, разграничивающую вакансии по должностным обязаностям, требованиям и опыту. Рынку нужно два типа людей:
1. Проектировщик с навыками графического дизайна
Он знает наизусть Купера, Раскина и Нильсена, умеет вытягивать из людей информацию и превращает её в продукт, которым удобно пользоваться, что сможет подтвердить, проведя юзабилити-тестирование. Виртуозно владеет Axure и ему подобными, но и готов в фотошопе нарисовать макет на основе гайдов и готовых элементов.

2. Графический дизайнер с навыками проектирования
Для него каждый пиксель имеет значение. Он знает наизусть Ководство и советы Горбунова, тусует на Dribbble и Behance. Он рисует отличные кнопки и формочки, знает как сделать легкий и информационный дизайн, но в то же время понимает что значит удобно, а что нет и может предложить элегантное решение для интерфейсной проблемы.

А вообще, на мой взгляд, проектировщика или UX/UI дизайнера хорошо описывает фраза, найденная в одной из просмотренных мной вакансий: «разыскиваем крутого логика с художественным вкусом».

А чем у вас занимается проектировщик интерфейсов и кого вы ищете на эту должность?

Профессия UI-дизайнер: что делает дизайнер интерфейсов

Графические интерфейсы, которые вы видите на компьютере, планшете, телефоне или другом другом, созданном UI-дизайнерами (англ. User interface — пользовательский интерфейс) . Эти специалисты создают внешний вид любой программы, сайта или приложения. Они рисуют все элементы (кнопки, иконки, формы) в разных состояниях (например, до и после клика мышкой).

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

Разбираемся подробнее, какие задачи и цели преследует UI-дизайнер, когда работает над внешним видом любого ресурса.

Создание интерактивности (англ. Взаимодействие — взаимодействие) — главная задача UI-дизайнера.Допустим, вы нажимаете на кнопку и она изменяет состояние — показывает своим внешним видом, что ее функция (например, отправка сообщения) запущена. При клике у элемента может появиться тень или обводка, изменить цвет или размер. Эти и многие другие интерактивные изменения обеспечивают именно UI-дизайнер.

Пример, как кнопка реагирует на клик мыши

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

Допустим, мы хотим донести до клиента образы скорости, новаторства, устремлённости в будущее.Эту задачу можно решить даже без текста — только за счёт дизайна.

Дизайн сайта для инновационного скоростного велосипеда

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

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

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

UI-дизайнер решает, как интерфейс цифрового продукта будет выглядеть на разных носителях, — то есть адаптивность.

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

Адаптивный сайт подстраивается под разные экраны

Все элементы, нарисованные для каждого сценария взаимодействия и размера экрана, дизайнер складывает в UI-кит. Этот файл используется программистами, верстальщиками и другими дизайнерами.

Пример того, как выглядит UI-кит

Цель UI-дизайнера — сделать приятный, удобный, понятный интерфейс.Чтобы текст не слипался, иконки облегчали чтение, а кнопка была заметна (и находилась там, где удобно на ней нажимать).

.

стать Как UX-дизайнером — пошаговое руководство — Дизайн на vc.ru

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

LinkedIn включает UX-дизайн в список навыков, которые следует научиться в 2020 году.А в Google Trends за последние 5 лет интерес к запросу «UX-дизайн» в Европе, США, Канаде и Австралии удвоился и продолжает расти.

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

Но прежде, дам два совета перед стартом:

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

.

в чем разница — Дизайн на vc.ru

Ольга Сорока, Янина Ноэль

Фото Шарль Делувио

UI и UX — многие из вас уже слышали об этих понятиях.Но что же на самом деле оказывается за этим аббревиатурами на английском языке и так ли они просты, как кажутся?

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

В то же самое время эти оба элемента имеют решающее значение для конечного результата и не могут существовать друг без друга.В общих чертах, UX Design или User Experience Design — это аналитическая и техническая область разработки, в то время как UI-дизайн или Дизайн пользовательского интерфейса — то, что мы иногда ошибочно называем графическим дизайном. Хотя, на самом деле, все намного сложнее.

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

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

UX делает полезный полезный

Фото Шарль Делувио

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

Вы не замечаете результат работы UX дизайнера, пока все работает хорошо. Если при работе с продуктом вы начинаете задаваться вопросом «Что же делать дальше, чтобы решить мою задачу?», То вам попался плохой UX.

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

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

.