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

В последние несколько лет проектирование интерфейсов начало приобретать немалую популярность. Отечественные компании, чей бизнес так или иначе связан с компьютерами и интернетом стали понимать, что просто «дизайна» в том понимании, в каком он употребляется у нас уже недостаточно, нужно не только красиво, но и удобно. В результате мы видим немалое количество вакансий с такими словами в описании, как 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 дизайнера хорошо описывает фраза, найденная в одной из просмотренных мной вакансий: «разыскиваем крутого логика с художественным вкусом».

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

Проектировщик — Принципы — Контур.Гайды

Здесь описан портрет проектировщика интерфейсов продуктовой команды Контура.

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

Про другие роли в наших продуктовых командах можно почитать в заметке на VC.ru

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

Как именно мы видим развитие проектировщика, и где проводим границы между джуном, мидлом и сеньором — описано в нашей модели компетенций.

Соль

Главный приоритет работы проектировщика в Контуре — продукт, а не макеты. Если в макетах всё хорошо, а в продукте всё плохо, работа проектировщика не выполнена. Хороший проектировщик часто заходит в сервис, смотрит, как работают старые и новые функции, следит за порядком и заводит баги.

Проектировщик интерфейсов и его прототипы являются важным коммуникационным инструментом для команды. Команде должно быть комфортно общаться с проектировщиком и удобно работать с его прототипами.

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

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

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

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

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

Использует сценарный подход: за каждой кнопкой, экраном, разделом в системе проектировщик видит сценарии работы реальных пользователей. Вопрос «Какой сценарий?» должен предшествовать любым изменениям в продукте.

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

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

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

Работа над задачей

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

1. Обсудить задачу с командой:

• Установить всех «заказчиков».
• Понять критерии успешного решения задачи, какими метриками их можно установить.

• Отвечать на поступающие вопросы.
• Если в процессе разработки решение поменялось — незамедлительно вносить правки в прототип.

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

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

Во время обсуждения дизайна записывает все комментарии. Самое подходящее место — прямо в макете. Невыполненное обещание «всё запомнить» демотивирует команду и снижает доверие к дизайнеру: зачем что-то говорить, если твои идеи будут просто забыты.

Если не понятно, что делать дальше, это повод встретиться и поговорить, а не сидеть и думать одному.

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

Если программист говорит: «Это нельзя сделать», проектировщик спрашивает: «Почему?». Нередко отвечая на этот вопрос, программист вдруг находит решение.

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

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

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

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

Прототип

Детализация прототипа должна соответствовать текущей степени понимания задачи:

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

Финальный прототип содержит:

• окончательный графический дизайн для разрешения, с которым работает большая часть пользователей, как правило это 1280;
• финальные интерфейсные тексты и рыбу, максимально приближенную к реальному контенту; не должно быть:
• мата, неприличных названий, пошлых шуток и пр.;
• названий реальных организаций, их данных;
• задублированных строк в списках и таблицах;
• текстов вроде «Заголовок» и «Длинное название компании».
• все состояния страниц и контролов:
• состояние «без данных», которое увидит пользователь войдя на страницу в первый раз;
• прелоадеры и загрузчики;
• дизайн интерактивного элемента при наведении и в момент нажатия;
• кликабельные области элементов, если они больше видимых;
• работа с помощью клавиатуры.
• логику работы валидации, сообщения об ошибках;
• анонс новых возможностей в сервисе, чтобы пользователи о них узнали;
• комментарии для верстальщика и разработчиков:
• как тянется дизайн;
• описание анимации, а лучше специальный прототип;
• Marketch или Measure.

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

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

Хороший проектировщик не применяет дизайнерские «хаки», которые делают прототип симпатичнее, но в реальном сервисе работать не будут либо вообще отвалятся на стадии разработки. Например:

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

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

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

• промежуточные варианты отделены от финальных;
• артборды расположены последовательно;
• повторяющиеся элементы переведены в символы.

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

Проектировщик думает про микровзаимодейcтвия. Если требуется показать, как что-то должно работать в динамике, проектировщик делает анимированный прототип или дает верстальщику подробные инструкции.

Матчасть

Прочитал и осознал основные книги:

• Алан Купер «Психбольница в руках пациентов»
• Влад Головач «Дизайн пользовательского интерфейса»
• Дональд Норман «Дизайн привычных вещей»
• Джеф Раскин «Интерфейс: новые направления в проектировании компьютерных систем»
• Джейсон Фрайд, Дэвид Хайнемайер Хенссон «Rework. Бизнес без предрассудков»
• Эрик Рис «Бизнес с нуля. Метод Lean Startup для быстрого тестирования идей и выбора бизнес-модели»
• Максим Ильяхов, Людмила Сарычева «Пиши, сокращай. Как создавать сильный текст»
• Артем Горбунов «Типографика и верстка»
• Илья Бирман «Пользовательский интерфейс»
• Роберт Брингхерст «Основы стиля в типографике»

Влад Головач разочаровался в своей первой книге и просит не ставить на нее ссылки.

Но она нам так нравится, что мы набрались наглости и всё-таки рекомендуем ее к прочтению.

Знает и понимает:

Дизайнерские правила не обязательно соблюдать, но обязательно понимать. © Илья Бирман

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

Использует стандартные контролы и паттерны из Контур.Гайдов. Без необходимости не придумывает свои контролы. Но когда стандартный контрол не работает — изобретает свой, «продает» его команде и доводит до качественной реализации. Не придумать уникальный контрол там, где он действительно нужен — так же плохо, как не использовать стандартные контролы там, где они работают.

Читал гайды других разработчиков, обращается к ним по необходимости:

Тексты

Слова в дизайне продукта не менее важны, чем пиксели. © Костя Горский

Весь текст в интерфейсе — зона ответственности проектировщика. Даже если какой-то текст написал другой человек, проектировщик должен контролировать качество.

Основные интерфейсные тексты проектировщик пишет сам: названия кнопок, сообщения об ошибках, всплывающие подсказки и контекстную справку.

Дизайн и верстка

Хороший вкус

Имеет чувство прекрасного, отличает плохое от хорошего.

Композиция

В макетах легко считывается иерархия объектов: важное заметнее неважного, элементы сгруппированы, аккуратно выровнены, отступы и размеры объектов осмысленные, подчиняются правилам.

Знает следующие понятия:

Цвет

Знает устройство цветовой модели RGB.

Понимает что такое контрастность, насыщенность.

Знает особенности цветопередачи плохих мониторов.

Может подобрать цветовые сочетания для нового продукта.

Типографика

Делает аккуратную типографику в интерфейсах.

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

Знает типографскую терминологию:

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

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

Графический дизайн

Может подобрать и встроить иллюстрацию.

Может нарисовать набор иконок.

Может разработать дизайн сервиса с нуля.

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

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

Мы не используем слово «юзер». Совсем.

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

Знает портрет своего пользователя.

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

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

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

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

Регулярно присутствует на юзабилити-тестированиях, использует другие возможности пообщаться с пользователями вживую.

Регулярно слушает записи разговоров техподдержки.

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

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

Веб-технологии

Понимает устройство и ограничения веб-сервисов:

• Различия и область применения графических форматов: JPEG PNG GIF SVG.
• Масштабирование веб-страниц и шрифтов.
• Ограничения старых браузеров.
• Как работает URL.
• Клиент-серверная архитектура и типы передачи данных в вебе:
• Синхронная передача данных с перезагрузкой страниц (GET/POST).
• Асинхронная передача данных.
• Одностраничные приложения.

Знает основы верстки HTML/CSS.

Может открыть веб-инспектор и что-то быстро поменять-прикинуть.

Знает основы JavaScript.

Умеет пользоваться библиотеками и фреймворками: JQuery, GreenSock, Bootstrap.

Может сверстать интерактивный прототип своими руками.

Создает SVG-анимации.

Прототипирует в верстке.

Статистика

Просит фиксировать ключевые события, чтобы оценить использование функциональности, посчитать конверсию.

Умеет пользоваться Яндекс.Метрикой и/или Гугл.Аналитикой и/или внутренними системами и делать на основании них выводы:

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

Может сам настроить отчеты в Яндекс.Метрике, Гугл.Аналитике.

Может написать SQL-запрос к базе.

Знает системы мобильной аналитики.

Самоорганизация

Не прокрастинирует: не тратит рабочее время на Фейсбук, Твиттер, бесполезные чатики и т.п.

Правильно оценивает задачи, соблюдает сроки, если не успевает — предупреждает заранее.

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

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

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

Инструментарий

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

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

Знает Figma или Sketch, и умеет быстро в них работать: использует символы, шорткаты и плагины.

В Контуре не проектируют в редакторах, которые устарели или плохо подходят для дизайна интерфейсов: Photoshop, Illustrator, InDesign и пр.

Знает Invision, умеет быстро собирать интерактивный прототип для презентации или юзабилити-тестирования.

Умеет делать прототипы анимации интерфейсов.

Знает Photoshop, Illustrator, может подготовить спрайт для верстальщика или подправить макет за отсутствующим дизайнером.

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

Когда есть только молоток — всё вокруг превращается в гвозди.

Саморазвитие и передача опыта

Читает книги, статьи, блоги, в курсе дизайнерских трендов, следит за развитием отрасли.

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

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

Стремится перенять профессиональный опыт и знания у «старших» коллег. Распространяет свои знания среди команды и других дизайнеров.

Имеет широкий кругозор, интересуется современными технологиями, историей искусства и культуры.

Наблюдает за тем, как люди работают с интерфейсами. Накапливает и структурирует эти знания.

Стремится заниматься задачами, которые его развивают.

Обучает стажеров и начинающих проектировщиков.

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

Является экспертом в чем-то: все знают, если есть вопрос в этой области — это к нему.

Имеет личный проект или ведет блог.

Участвует в развитии гайдлайнов Контура.

Взаимодействие в команде

Участвует в командных встречах: ежедневные скрамы, презентации, ретроспективы.

Не участвует в бесполезных встречах. Если понимает, что на встрече он не нужен, встает и уходит.

Хороший проектировщик делает так, что проектирует и генерирует интерфейсные идеи вся команда. Любой участник команды понимает: если он подойдет к проектировщику со своей идеей, его услышат и адекватно отреагируют. Плохой проектировщик узурпирует работу над интерфейсом, обижается, когда кто-то кроме него «лезет в дизайн».

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

Проектировщик правильно воспринимает критику в адрес своей работы: не бросается сразу всё переделывать, но с правильными замечаниями соглашается.

Умеет обосновывать свои решения, когда нужно настаивает на них.

Для обсуждения дизайна предпочитает личное общение, а не переписку в почте или чате.

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

Команда доверяет своему проектировщику, ей нравится интерфейс ее продукта.

Команда считает своего проектировщика лучшим в Контуре.

Развитие продукта

Проектировщик чувствует ответственность за продукт. Знает бизнес-цели продукта и дизайном помогает их достигать.

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

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

Принимает участие в формировании планов по развитию продукта.

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

Этика

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

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

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

Нельзя работать на конкурентов или участвовать в проектах, наносящих вред Контуру.

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

Нельзя выполнять сторонние проекты, находясь в офисе Контура.

Полезные советы проектировщикам интерфейсов / Хабр

Уделяйте достаточное внимание шаблонам

Люди тратят большое количество времени, используя различные интерфейсы (Facebook, Google, Windows, Mac OS и т.д.). В них уже могут быть представлены решения проблем, с которыми вы сталкиваетесь при проектировании. Поэтому не стоит изобретать колесо. Используя привычные шаблоны интерфейсов вы поможете пользователям почувствовать себя как дома.

CoTweet имеет привычный по почтовым клиентам шаблон.

Правильно обращайтесь с текстом

Главным средством передачи информации был и остается текст и ему следует уделять особое внимание.

• Для устройств вывода с небольшим ppi, например для компьютерных мониторов, предпочтительно использовать рубленый шрифт. Шрифты с засечками, особенно при малых размерах, выглядят размыто.
• Не используйте текст, набранный заглавными буквами. Самый лучший вариант для восприятия — когда первая буква прописная.
• Не выравнивайте текст по ширине (justified). Это затрудняет восприятие из-за пробелов различной длины.
• Согласно исследованиям (pdf, eng) скорость чтения горизонтального текста наиболее быстрая, в сравнении с другими направлениями. Поэтому не стоит использовать, например, меню с вертикальными надписями.

Подробнее о тексте в статье: “Text Treatment and the User Interface”(eng)

Размещайте важную информацию в левой части

Люди, выросшие в культуре где язык пишется и читается слева направо — с детства обучены, что начинать читать и писать нужно с левой части страницы. Это может быть причиной того, почему многие пользователи больше уделяют внимания левой части веб-страницы — 69% времени, согласно исследованию Нильсена (eng).

Из этого следует, что:

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

Меньше — лучше

Хороший дизайн интерфейсов — который не замечаешь. Он не содержит лишних, ненужных элементов, не отвлекает. Все лаконично, четко и понятно. Когда вы в следующий раз будете думать о добавлении новой детали в ваш интерфейс, спросите себя: “Действительно ли это необходимо пользователю?” или “Зачем пользователю эта красивая анимированная картинка?”. Напротив, нужно сокращать количество элементов интерфейса без уменьшения возможностей продукта.

Google — классический пример минималистичного пользовательского интерфейса

Не используйте одиночные контекстные слова, такие как “продолжить”

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

Правильное использование контекстного слова “продолжить” в CS-Cart

Оптимизируйте скорость реакции, предупреждайте о задержках

В исследованиях, проведенных еще в конце 60-х годов, ученые выяснили восприятие пользователями времени (Miller, 1968):

• До 0,1 секунды пользователи воспринимают отклик системы как моментальный.
• До 1 секунды пользователи чувствуют, что система реагирует.
• До 10 секунд пользователи замечают, что система работает медленно, и отвлекаются, однако способны сохранять некоторое внимание к приложению. Здесь нужно использовать индикатор хода работы.
• После 10 секунд внимание пользователя полностью рассеивается. Он уходит за чашкой кофе или переключается на другое приложение. В таком случае следует четко обозначать состояние и ход процесса и оставшееся время до завершения. Так же необходим механизм отмены.

Статья Якоба Нильсена на тему отклика (eng)

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

P.S. Будет приятно увидеть в комментариях ваши советы проектировщикам интерфейсов.

Какое образование нужно проектировщику интерфейсов? / Хабр

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

По своему роду деятельности мне тоже пришлось столкнуться с проектированием интерфейса какой-либо web-страницы и построения грамотной связи страниц между собой. Я сам разработчик и человек с техническим образованием, но отучившийся 10 лет в гуманитарной школе и обладающий довольно большим багажом гуманитарных знаний. Так вот, я столкнулся с проблемой, что тех знаний, которыми я обладаю абсолютно недостаточно для проектирования хорошего интерфейса.
Я не говорю о том, мои знания для этого были бесполезны, скорее наоборот — видно, что грамотный и продуманный интерфейс требовал четкой логики. Например, для обработки всех действий пользователя, обнаружения, а в некоторых случаях и исправления его ошибок. Это как раз очень перекликается с дисциплиной «Теория информации», который читали нам на четвертом курсе. Видно, что во многих случаях достаточно просто следовать здравому смыслу и что чаще всего не стоит придумывать велосипед, а взять за основу решения, к которым пользователи уже привыкли.
Но дальше начинается темный лес. Причем, темный лес начинается и для дизайнера. Понятно, что дизайнеры часто обладают определенным набором знаний и совместимости цветов и отношении людей к красоте, что позволит посетителям вашего сайта (или пользователей программы) чуть лучше относиться к продукту в лучшем случае или хотя бы не даст сразу покинуть сайт из-за того, что цветовая гамма вызывает у них отвращение. Но тем не менее, это капля в море интерфейсных задач, темный лес все же наступает.
И этот темный лес называется психология. Именно эта наука берет на себя львиную долю задач, связанных с проектированием интрефейсов. На самом деле в этом, конечно, нет ничего удивительного, ведь понятно, что интерфейс — это некое связующее звено между человеком и компьютером, понятно и то, что человек — сильно более сложная система, поэтому основная нагрузка ложится на именно психологию. Эта наука изучает такие, бесспорно, важные темы, как правильная организация экранного пространства (этим занимается микроэргономика), понимание как человек воспринимает информацию, сколько информации необходимо давать человеку на странице, как сделать так, чтобы человек быстрее освоился на сайте или в программе (этим занимается когнитивная психология — психология познания). В конце концов, такая на наш взгляд интуитивная вещь, которая хоть пока и не может быть четко формализована, но тем не менее тоже имеет свои законы — сделать так, чтобы пользователю было интересно. Если мы говорим, например, о социальных сетях, то этим занимается социальная психология. На мой взгляд без понимания основ этих дисциплин проектирование интерфейсов больше похоже на гадание на кофейной гуще.
Конечно, тяжело осознавать, что после высшего образование и как тогда казалось путевки в жизнь необходимо еще что-то изучать, притом изучать нормально, а не спустя рукава, но похоже это неотъемлемая часть сегодняшнего мира, где одного высшего образование далеко не всегда достаточно. Да и если мы вспомним великие открытия и изобретения, то очень многие из них сделаны именно на стыке наук, а стык наук не почувствовать, если смотришь на него только с одного края. Так что я для себя решил, что в ближайшее время возьмусь за изучение этой, конечно же сложной, но интересной науки — психологии.

практическое руководство. Часть 1 / Блог компании Pechkin.com / Хабр

В первой части перевода речь пойдет о том, что такое UX, чем юзабилити отличается от визуального/графического дизайна, и что нужно сделать, начиная работать над интерфейсом продукта – будь то почтовая рассылка, веб-приложение или оффлайн-услуга. Это – хороший материал для тех, кто приступает к освоению данной области, и хочет разобраться, «как тут все устроено».

Введение в проектирование UX

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

В чем причина?

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

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

Проектирование UX – это не только увлекательное, но и просто хорошее дело.  

Раскрываем тайны проектирования UX

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

Что такое проектирование юзабилити?

Официальное определение пользовательского опыта это:

«Восприятие, возникающие у человека при использовании и/или предполагаемом использовании продукта, системы или при получении услуги» (ISO 9241-210:2010, подраздел 2.15).

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

Визуальный дизайн – это то, как продукт выглядит, а юзабилити – то, как он воспринимается. Но это еще не всё. Юзабилити включает в себя все аспекты взаимодействия пользователя с компанией – от обслуживания клиентов до качества продукции. Имейте в виду, что многие UX-дизайнеры используют термины «продукт» и «услуга», как взаимозаменяемые.

Википедия определяет проектирование UX как:

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

Каждый раз, когда вы взаимодействуете с продуктом, программным обеспечением или каким-либо объектом, вы воспринимаете его как пользователь. А значит, ключевая задача проектирования UX заключается в том, чтобы сделать этот опыт настолько успешным, насколько это возможно. Юзабилист должен, помимо прочего, быть тем «клеем», на котором держится вся команда, передавая проекты разработчикам, которые затем претворят их в жизнь.

Конечной целью проектирования UX является не только удовлетворение запросов пользователя. Процесс проектирования направлен на то, чтобы помочь продукту достигнуть поставленных бизнес-целей и сделать так, чтобы эти цели совпали с целями пользователя. Из чего вытекает следующий вопрос:

Для чего мы занимаемся проектированием интерфейсов?

Проектирование интерфейсов дает компании два главных преимущества:

1. Оно положительно влияет на восприятие продукта пользователем.
2. Успешный пользовательский опыт повышает уровень принятия продукта.

Таковы основные цели проектирования интерфейсов:

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

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

Первое, о чём думает юзабилист – это то, как объединить цели пользователя с целями бизнеса. Например, если целью пользователя является покупка продукта, то компания должна сделать эту покупку полезной, удобной и приятной.

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

Если целью пользователя является получение информации, то компания должна предоставить достоверные данные, внушая тем самым доверие покупателю, а персонал должен вежливо отвечать на задаваемые по телефону вопросы. Довольный клиент, получивший всю интересующую его информацию, вернется, а разочарованный – нет.

1. Если цель клиента достигнута (т.е он легко и быстро нашел то, что искал), то у него остается приятное впечатление от вашего продукта.
2. Если у клиента осталось хорошее впечатление, то он с большей вероятностью совершит покупку или порекомендует продукт своим друзьям.
3. Когда клиент возвращается на сайт, покупает ваш продукт или рассказывает о нем друзьям, объем продаж и уровень конверсии растут.

Краткая история UX

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

Термин «Проектирование UX» был введен в употребление в 1995 году Дональдом Норманом (Don Norman), который в то время занимал пост вице-президента группы разработки продвинутых технологий в Apple. Он сказал:

«Я изобрел этот термин поскольку считал, что «интерфейс для человека» (human Interface) и «юзабилити» были слишком узкими терминами. Я хотел задействовать все аспекты пользовательского опыта взаимодействия с системой, в частности с промышленный дизайн продукта, его графику, интерфейс и физический контакт».

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

Что такое юзабилити?

Юзабилити – это простота использования и освоения объекта, созданного человеком.
Это понятие напрямую связано с причинами, по которым мы занимаемся проектированием интерфейсов – поскольку юзабилити положительно влияет на пользовательский опыт. Чем проще освоить и использовать продукт, тем лучший опыт получает пользователь. Но продукт должен быть не только удобным в использовании – он должен решать проблему клиента. И в большинстве случаев работа юзабилиста состоит в том, чтобы выяснить, что нужно пользователям.

Как проектировщик интерфейсов видит мир

Изучая основные принципы проектирования UX, вы можете «залезть в голову проектировщика интерфейсов» и увидеть мир его глазами.

Художник и юзабилист Эллисон Хаус (Allison House) так рассказывает о своем подходе к работе:

«Когда я занимаюсь проектированием UX, я повторяю мантру: «Мысли шире, расставляй приоритеты, смотри глубже. Изучи обстановку, определи, что важно, и начинай решать задачи в порядке очередности».

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

Необходимые для юзабилиста качества

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

Любознательность – желание узнать, почему люди поступают тем или иным образом.

Ясность выражения – способность объяснить сложные понятия в доступной форме для тех, кто не знаком или мало знаком с данной областью.

Проектировщик прототипов в лаборатории RED компании Manulife Аль Рушдан Тарик (Ali Rushdan Tariq) объясняет так:

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

Процесс проектирования UX

Исследование пользовательской аудитории

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

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

Нейт Болт (Nate Bolt), основатель лаборатории по исследованию пользовательского опыта Ethnio, делится советом:

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

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

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

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

Питер Мерхольц (Peter Merholz), юзабилист и менеджер по продукту компании PeterMe.com, дал такой совет, чтобы лучше понимать пользователей:

«Не путайте сам процесс с результатом – знать такие элементы проектирования UX, как персоны (персонажи), «потоки» (flows) и макеты UI важно, но этого не достаточно для формирования успешного пользовательского опыта. Более важен образ мышления – вы должны смотреть на мир глазами пользователей и делать всё возможное, чтобы ваша работа имела для них смысл».

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

«Исследование не имеет смысла, если оно не проводится должным образом. Переход от изучения результатов исследования к проектированию – это наиболее важная часть работы юзабилиста», – Гарри Бригналл (Harry Brignull), специалист по проектированию UX в 90percentofeverything.com.

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

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

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

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

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

Вот, что сказал автор методологии Lean UX Джефф Готелф (Jeff Gothelf) об исследовании пользовательской аудитории:

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

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

Мы начинаем процесс проектирования UX с исследования пользовательской аудитории, поскольку в противном случае наша работа будет основываться лишь на собственном опыте и предположениях. А это помешает добиться объективности, ведь наше мнение может отличаться от мнения клиентов. Исследование пользовательской аудитории предоставляет нам данные, необходимые для создания продукта. Без этих данных мы не можем приступить к работе.

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

По мнению Нила Тернера (Neil Turner), автора блога UxfortheMasses, хорошая основа – ключ к успешному проектированию:

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

Что включает в себя исследование пользовательской аудитории

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

Интервью

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

Онлайн-опросы

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

Создание персон

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

Использование персон эффективно, если они:

• По-настоящему отражают мотивы, цели и потребности реальных людей
• Дают ясную картину об ожиданиях пользователей
• Показывают, как пользователи взаимодействуют с сайтом
• Представляют подавляющее большинство пользователей сайта

Питер Морвилль (Peter Morville), известный как основоположник Информационной Архитектуры, дал совет касательно создания персон:

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

Тестирование пользователей

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

В своем высказывании юзабилист и специалист по вопросам стратегии из Берлина Хани Рицк (HanyRizk) подчёркивает важность исследования пользовательской аудитории в процессе проектирования UX:

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

Процессы в проектировании UX: Дизайн

Юзабилити в дизайне

Как однажды сказал Стив Джобс:

«Дизайн — это не то, как продукт выглядит и воспринимается. Дизайн — это то, как он работает».

Когда речь идет о дизайне продукта, эту истину, которую так точно сформулировал Стив Джобс, часто забывают. Любой узнает продукцию компании Apple по её изящному и уникальному виду. Дизайн айфонов и макбуков настолько удачный, что технические компании всего мира пытаются его скопировать.

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

Безусловно, эстетические свойства продукта усиливают его привлекательность. Однако, занимаясь проектированием UX, вы быстро придёте к выводу, что если продукт не работает должным образом, то его внешний вид мало волнует пользователя. При этом не стоит забывать, что конечный успех продукта зависит не только он вашего дизайна, но и от его воплощения разработчиками, а также от управления проектом. Это ещё один ключевой навык, необходимый для юзабилиста – умение работать в команде. Подробнее об этом мы поговорим в последнем разделе.

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

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

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

Дэн Сэффер (Dan Saffer), специалист по дизайну взаимодействия и писатель, поделился другим советом. Он сказал:

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

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

Продолжение следует…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

–

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

–

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

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

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

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

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

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

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

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

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

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

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

Итоги

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

Алексей А.

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

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

Вконтакте

Facebook

Twitter

Google+

Загрузка…

Процессный подход к проектированию интерфейсов / Хабр

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

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

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

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

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

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

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

Вдумчивый подход гласит нам о том, что для начала нужно поставить цель.

Цель магазина – получение прибыли. Причем она состоит не просто в обеспечении продаж. Это оплаченные продажи и удовлетворенный клиент (так как он генерирует нам хвост из других продаж и других клиентов).

********

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

********

Запишем.

Цели:

1. Оплаченная продажа.

2. Довольный клиент.

Что у нас есть на входе:

1. Товары. Даже не просто товары, а товары, которые мы знаем, где купить, где хранить и как доставить.

2. Потенциальные клиенты. И мы должны превратить их даже не просто в реальных, а в довольных клиентов.

Пройдемся еще чуть-чуть по определениям.

Довольный клиент – это тот, кто купит у нас еще раз. Как максимум – будет нас рекомендовать, как минимум – не будет писать про нас негативных отзывов.

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

****** маленькая ремарка*******

Как из потенциального клиента сделать довольного? Удовольствие – соответствие ожиданиям. Важно, запомните, ожиданиям. Это субъективное состояние! Если он ожидал купить Запорожец а получил Волгу – он будет счастлив. Если он ожидал купить Бентли, а получил Волгу – он будет разочарован.

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

Всегда думайте, чего может ожидать ваш клиент. Ваш, а не чей-то другой.

Я надеюсь, немного пояснил опасность подхода “мы сделаем шикарный самый удобный сайт а дальше как пойдет”. Не пойдет. Может быть хуже чем если бы ваш сайт был убог и неказист. И будет именно из-за того, что витриной вы завышаете ожидания, не предоставляя адекватного содержания. Итог этому один – разочарование клиента, недовольство.

***********************

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

Процесс функционирования интернет-магазина в общем случае выглядит так:

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

Теперь перейдем к озвученной проблеме.

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

Нужно информировать клиента о товарах.

Скорее всего, товаров много, их наличие отражено в системе учета. Что нужно предоставить покупателю?

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

—Цена (нет ни одного нормального аргумента, чтобы не указывать цены на сайте)

—Доступность (оно вообще, на складе есть?)

—Информация для перехода к сделке. Хоть телефон, хоть форму обратной связи, хоть корзину – зависит только от вашей бизнес-модели.

—Добавьте сюда любые пункты, если считаете что они важны и без них никуда.

Про администратора не забыли?

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

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

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

Дальше у нас собственно, покупка.

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

Итак, у нас есть чудо-кнопка “купить”, клиент на нее жмет и к нему волшебным образом прилетает коробка, которую он так ждет.

Нет? Почему?

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

Исходя из логики вещей, единственная универсальная информация без которой нельзя обойтись в принципе – это контактные данные. Как минимум e-mail, или профиль в социальной сети, или все что угодно, что позволит связаться с покупателем. Если заставить его указывать еще что-то, то пока он вводит кучу цифр кредитки – он может ведь и передумать! Нам этого не нужно, поэтому требуем контакты и ничего более.

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

Давайте посмотрим, что же дальше?

Дальше нас ждет оформление заказа.

Оформление – это очень проблемная часть. Почему? Потому что клиенты норовят связываться с магазином всеми удобными ИМ способами и всячески персонализировать отношение к себе. Не дай бог если при этом они попадают на разных менеджеров. Пиши-пропало.

Простой пример номер раз:

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

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

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

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

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

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

Простой пример номер три:

Переписка заводится в CRM, но ответы оператора попадают клиенту на почту с адреса no_reply@. Многие отвечают на него как ни в чем не бывало, приходя в ярость от того, что их ответы уходят в никуда. Спрашивается, что мешает поставить тикет-систему которая бы разбирала входящие обращения по адресу письма?

Итого:

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

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

Далее, доставка.

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

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

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

Произвели доставку. Можно вздохнуть с облегчением!

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

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

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

Вы мне можете сказать – я все это знаю, но это не мое дело. Я простой проектировщик юзабилити, а вовсе не бизнес-аналитик или кто-там еще должен всем этим заниматься.

А теперь вспомним, кто такой проектировщик юзабилити. Это человек, делающий использование сервиса удобным. Не просто удобным по расположению кнопочек, а удобным во всех смыслах. Так что мыслите шире и старайтесь разбираться не только в том, как, но и зачем.

И, наверное, в этом и заключается кардинальное различие между “дизайном интерфейсов” и “юзабилити”.

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

• Всегда понимайте откуда пришел пользователь.
• Что ему нужно?
• Как он этого добьется?
• Что будет в результате? (куда он перейдет)
• Помните про внутреннюю кухню.

Делайте удобнее!

Основы проектирования пользовательского интерфейса | Usability.gov

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

Выбор элементов интерфейса

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

Элементы интерфейса включают, но не ограничиваются:

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

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

Лучшие практики для проектирования интерфейса

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

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

Список литературы

,

20 наиболее важных принципов дизайна пользовательского интерфейса для UI Designer

Дизайн пользовательского интерфейса

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

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

В этой статье я поделюсь 20 наиболее важными принципами дизайна пользовательского интерфейса.

Принцип 1: Четкость

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

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

Принцип 2: Дизайн, ориентированный на пользователя

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

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

Принцип 3: KISS (Будь простым и глупым)

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

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

Принцип 4: Последовательность

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

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

Принцип 5: Сильная визуальная иерархия

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

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

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

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

Вторичная информация всегда должна оставаться вторичной.

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

Третья информация не требует особого внимания

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

У нас есть больше золотых советов и примеров для создания визуальной иерархии в дизайне веб-сайтов.

Принцип 6: Сделайте интерфейс читабельным

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

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

Принцип 7: Цвет имеет значение

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

Разумно используйте цвет в дизайне пользовательского интерфейса. Цвет может отражать индивидуальность бренда и даже влиять на решение о покупке. Хорошо продуманная цветовая схема — это половина успеха эффективного и красивого интерфейса.

Принцип 8. Сделайте свой контент доступным для сканирования

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

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

Принцип 9: Обратите внимание на детали

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

Принцип 10: Ответьте пользователю

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

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

Принцип 11: Включение эффективного пользовательского ввода

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

Принцип 12: Безопасность — это все

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

Принцип 13: Повышение эффективности

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

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

Принцип 14. Будьте дружелюбны к людям

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

Принцип 15: Направленные сигналы

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

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

Принцип 16: обратная связь

Один из самых простых способов общения с пользователем — предоставить своевременную и контекстно-зависимую обратную связь. С другой стороны, отсутствие обратной связи вызывает беспокойство.

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

Принцип 17: Взаимодействие

Пользователь всегда ожидает взаимодействия с цифровым миром через интерфейс. Интерфейс никогда не должен нарушать связи между людьми и машинами.

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

Принцип 18: Хорошо организованная планировка

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

Хороший макет снижает когнитивную нагрузку (усилия, которые пользователи должны тратить на взаимодействие с вашим пользовательским интерфейсом).Есть 9 идей макета веб-сайта вы можете организовать все элементы на своем веб-сайте или в веб-приложениях.

Принцип 19: Подчеркните важные элементы

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

Принцип 20: Полное соблюдение принципов проектирования

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

5 примеров хорошего дизайна пользовательского интерфейса

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

Микия Кобаяши

Микия Кобаяши — студия японского дизайнера мебели. Его веб-сайт представляет собой портфолио, в котором представлена ​​мебель.

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

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

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

Средний

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

На домашней странице

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

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

Клипфолио

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

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

Tinker Часы

Tinker Watches — это интернет-магазин часов. Взаимодействия и переходы потрясающие, и они могут наладить связи с пользователем.

Макияж

Makeup.com — это сайт о макияже. Опция поиска может помочь пользователю найти то, что он хочет.

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

Хороший дизайн пользовательского интерфейса требует много работы, и вот некоторые часто задаваемые вопросы о дизайне пользовательского интерфейса:

1. Что такое хороший дизайн пользовательского интерфейса?

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

2. Требуется ли кодирование для дизайна пользовательского интерфейса?

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

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

У дизайнеров и разработчиков разные задачи, которые нужно решать в команде.Пусть разработчики сделают техническую работу.

3. Какое программное обеспечение для проектирования пользовательского интерфейса самое лучшее?

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

Инструмент проектирования передачи обслуживания — iDoc

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

Mockplus iDoc — это инструмент, когда вам нужно передать дизайн. Он позволяет передавать ваши каркасы и визуальный дизайн из Photoshop, Adobe XD и Sketch вместе со всеми автоматически созданными ресурсами дизайна (фрагменты кода, спецификации, ресурсы, руководства по стилям) разработчикам.

Инструмент дизайна интерфейса — Sketch

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

Sketch — это векторный инструмент дизайна пользовательского интерфейса, который помогает создавать интерфейсы Hi-Fi. Вы можете повторно использовать свои дизайны с помощью мощных символов и создавать системы дизайна для поддержки всех ресурсов дизайна.

Инструмент для дизайна движения — AE

Моушн-дизайн — важная часть UI-дизайна. Эффекты движения могут выражать дизайн, как будто он живет в жизни, что может устанавливать связь между дизайном и пользователем. Adobe After Effects — часто используемый инструмент для дизайнеров, которые хотят создавать красивые динамические эффекты.

Каркас / прототипирование — Mockplus

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

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

4.Как мне стать UI-дизайнером?

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

,

12 инструментов для дизайна интерфейсов веб-сайтов в 2017 г.

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

Советы: Лучше использовать как можно больше бесплатных пробных версий инструментов, чем больше инструментов вы попробуете, тем меньше у вас останется выбора.

Figma — это инструмент для совместной работы в реальном времени для различных дизайнов. Он держит всех на одной странице и поддерживает Windows и MacOS. Более того, Figma имеет инструменты тестирования iOS и может напрямую импортировать файлы Sketch.

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

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

Разработан компанией MACROMEDIA, но сейчас компания приобретена Adobe. Dreamweaver — лучший веб-редактор для создания веб-страниц и управления веб-сайтами. DW — это первый профессиональный визуальный инструмент веб-разработки для веб-дизайнеров, с его помощью можно быстро создать потрясающую динамическую веб-страницу без ограничений платформ и браузеров.

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

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

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

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

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

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

Цель карандашного проекта — создать бесплатный и богатый ресурсами инструмент для создания диаграмм и прототипов графического интерфейса. Это простой в освоении инструмент для создания веб-интерфейсов для каждого дизайнера.

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

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

,

UI Design and Prototyping Tool

Interactive Stateful Elements

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

Скоро

Компоненты кода

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

Условные взаимодействия, переменные, выражения

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

Все начинается с идеи …

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

Присоединяйтесь бесплатно

Легко получайте доступ к библиотекам для iOS, Material Design и Bootstrap, а также к сотням значков, позволяющих работать быстрее.

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

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

Создавайте вещи быстро и последовательно и избавьте себя от рутинной работы. Обновите все компоненты сразу или отредактируйте каждый экземпляр отдельно.

Автоматически синхронизировать компоненты React.js с UXPin из вашего репозитория. Никогда не перерисовывайте свои выкройки заново.

Начните создание прототипа, импортировав существующую веб-страницу или любой ее фрагмент в UXPin.

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

Следите за тем, чтобы ваши дизайны соответствовали стандартам контрастности WCAG. Рассматривайте их как людей с одним из восьми различных типов дальтонизма.

Работайте со своей командой в режиме реального времени так же, как в Документах Google. В Windows, Mac или в браузере.

Прототипы, которые кажутся настоящими.

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

Присоединяйтесь бесплатно

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

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

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

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

Связывайте страницы и быстро создавайте восхитительные переходы между ними. Выбирайте из более чем десяти вариантов.

Быстро и легко просматривайте свои прототипы на мобильных устройствах. Доступно на iOS и Android. USB / Wi-Fi не требуется. Просто отсканируйте QR-код.

Используете Sketch? Импортируйте файлы Sketch в UXPin, чтобы продолжить с того места, где вы остановились.

Революционная технология, объединяющая дизайн и инженерию. Слияние позволяет импортировать и синхронизировать компоненты кода React.js из репозиториев Git с редактором UXPin.

Нет ничего проще для совместной работы.

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

Присоединяйтесь бесплатно

У каждого прототипа есть собственная ссылка для обмена, которая всегда актуальна. Вы даже можете защитить его паролем.

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

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

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

Упростите разработчикам проверку визуальных характеристик ваших компонентов, таких как меры расстояний, размеров и стилей.

Установите подробные инструкции или просто оставьте заметки. Затем прикрепите их к определенным элементам вашего прототипа.

Храните сводку всех цветов, шрифтов и ресурсов из каждого прототипа в одном месте. Руководство по стилю обновляется по мере вашего дизайна.

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

Масштабное проектирование систем.

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

Присоединяйтесь бесплатно

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

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

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

Сохраняйте руководящие принципы, активы и компоненты компании по дизайну. Посмотрите документацию и код. В одном месте.

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

Аккуратная приборная панель со всеми вашими рисунками.

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

Присоединяйтесь бесплатно

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

Сохраняйте свои проекты, извлекайте их по желанию и делайте их доступными для всех, кто в них участвует.

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

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

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

.