Блог

Что нужно изучить, чтобы стать проектировщиком интерфейсов?

Два популярных вопроса покупателей наших курсов по прототипированию звучат так:

1. Насколько востребована профессия проектировщика? Насколько это перспективное направление?
2. Ваш курс был про использование инструментов. А что нужно пройти, чтобы научиться проектированию? UX-курсы?

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

Ответ на второй вопрос уже сложнее и отражает моё персональное мнение. Но я попробую обосновать свою позицию.

Сначала лирическое отступление номер один. Профессия эта сравнительно молодая и похожа на растущее ветвистое дерево, где каждая веточка отвечает за своё направление. Есть толстые ветки профессий вроде UX, UI, аналитиков, AB-тестировщиков, маркетологов и других. Есть такие же толстые ветки с тематиками: сайты, мобильные приложения, интерфейсы терминалов и прочие. Из толстых ветвей растут более тонкие веточки вроде «AB-тестировщик мобильных приложений на яблочной платформе» или «UI-дизайнер и верстальщик тем для вордпресса». Это дерево живое: оно находится в фазе быстрого роста. Каждый год появляются новые технологии, направления и методы работы. Точно так же какие-то из них исчезают, словно опадающие с дерева листья.

А теперь лирическое отступление номер два. Интернет появился в 1982 году. Чуть больше 30 лет назад. И если говорить о веб-интерфейсах, то нужно понимать, что все современные методологии их проектирования, родились в течение этого времени. И придумали их практики в рамках своих процессов разработки. И у каждого такого практика с его методологией — своя история, свои условия и факторы. Кто-то делал проекты на заказ за деньги, кто-то делал что-то для себя, при этом не обладая финансовыми ресурсами, кто-то же, наоборот, ни в чём себе не отказывал в плане финансов и сразу обладал большой командой. Большинство авторов методик и книг, на имена которых мы ссылаемся в работе, живут и здравствуют и продолжают заниматься профессиональной деятельностью, так же, как и мы с вами. Знать и понимать их методы — правильно и хорошо. Брать их за основу своей профессиональной деятельности — ошибка.

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

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

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

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

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

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

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

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

SEO-оптимизация. Как проекты индексируются поисковыми системами, как происходит поисковая выдача, что такое мета-данные и прочие базовые штуки.

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

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

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

Ценообразование и процесс работы над адаптивными прототипами в Проекторате

Во-первых, мы не закладываем стоимость адаптивного прототипа в первоначальную оценку. То есть, сначала делаем прототип под определённое разрешение (какое именно — зависит от преобладающей аудитории (или потенциальной аудитории) тех или иных устройств). Сейчас это разрешение чаще всего — 1024 или 1200 пикселей по ширине. Метод mobile first использовался нами лишь однажды. Когда речь идёт о сложных проектах, стоимость прототипа может измениться в процессе работы, т.к. на лету появляются новые функциональные требования, поэтому неразумно включать в этот этап и оценку адаптивки.

Во-вторых, стоимость адаптивного прототипа будет зависеть от сложности интерфейсов. И речь идёт не о количестве страниц, а об их функциональной насыщенности. От 10% от стоимости проекта до 30%. За каждое дополнительное разрешение.

В-третьих, цена будет зависеть от количества брейкпойнтов, то есть от количества разных внешних видов для разных разрешений. Сейчас чаще всего они таковы: 320 (телефон в портретной ориентации), 480 (телефон в горизонтальной ориентации), 768 (планшет в портретной ориентации), ну а планшеты в горизонтальной ориентации уже входят в первоначальный прототип.

Итого, прототипирование адаптивки составит дополнительные 10—90% от стоимости первоначального прототипа.

Откуда берутся эти проценты?

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

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

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

По срокам: мы берём за основу процентную стоимость работы над адаптивкой и превращаем её в процентные сроки. То есть, от 10% до 90% от времени работы над основной версией будут затрачены на адаптивный прототип.

О переговорах и переписках

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

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

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

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

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

Я: Настя, с тех пор, как вы написали мне первое сообщение, я так и не понял, представляете ли вы официально Epic Skills или являетесь их студентом.
Настя: Все, кто работает в Эпике — это бывшие студенты какого-либо курса) Я училась на курсе веб-дизайна

То есть, мне стоило спросить: «Настя, вы сотрудник Эпика?» Потому что ответа на свой вопрос я так и не получил. А человек старался, отвечал.

Вот ещё:
Я: Да, я думаю, кто-то сможет провести такое занятие. Может быть, я сам.
Настя: Большое спасибо, что согласились.

Тут правильно было бы написать «Я подумаю и сообщу о своём решении позже». Моя формулировка оказалась слишком сложной для понимания.

А вот примеры вопросов, на которые ответить было бы возможно, только задав встречные вопросы:

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

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

«Друзья, я к вам за помощью. Столкнулся с острой потребностью потестировать прототип, сделанный в Axure. Помогите избрать самый лучший способ. Есть ли в самом Axure инструмент тестирования?»
Любой тест чего угодно проводится с какой-то целью. Можно протестировать медную ложку. Тест на содержание в ложке меди будет отличаться от теста на плавучесть ложки.

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

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

Чтобы качественно оказать услугу своему клиенту, нужно хоть раз оказаться на его месте

Пара слов о сервисе. Мы, покупая или используя бесплатно те или иные товары и услуги, сталкиваемся с определёнными неудобствами, которые нам хотелось бы исправить. Девушкам иногда сложно открыть крепко закрученную бутылку воды, мы ненавидим очереди, мы пачкаем одежду о пороги большинства автомобилей, нам не нравится, что в банках мы сначала ставим подпись о получении денег, а затем уже получаем деньги. Со временем эти неудобства превращаются в прекрасные маркетинговые ходы со стороны провайдеров. «Мы сделали легкооткручиваемую крышку». «Мы ввели электронные очереди и два дополнительных окна». И так далее.
У покупателей услуг проектирования есть свой список неудобств, с которыми они сталкиваются, заказывая эту услугу. И среди читающих этот текст список смогут назвать в основном те, кто выступал в роли таких покупателей. А проектировщикам многие пункты неведомы по естественным причинам. Чтобы с ними столкнуться, нужно взять свой проект (даже самый маленький подойдёт: лэндинг, портфолио или бложик) и обратиться к профессионалам за проектированием и дизайном.
Можем попробовать перечислить некоторые из таких неудобств в глазах клиента.
— Исполнитель просит заполнить типовой бриф до начала неведомой работы или прислать ТЗ;
— Исполнитель запрашивает информацию, относящуюся к коммерческой тайне;
— Исполнитель сразу спрашивает, какой у вас бюджет на проектирование;
— Непонятно, что получится в результате, а также какой простор для комментариев будет в процессе;
— Исполнитель очень хорошо аргументирует все свои решения, но они вам не нравятся. Однако ваше мнение за экспертное не считают и переходят в поле «ладно, мы сделаем, как вы сказали, но и ответственность за это решение мы с себя снимаем».

Как оценивать проекты: по часам или под ключ?

Почасовая или попроектная оценка при работе на фрилансе? Поделюсь своим опытом. Сразу оговорюсь, что я UX-дизайнер в чистом виде. То есть, со шрифтами не играюсь и Фотошопом не пользуюсь.
В своё время уйдя на вольные хлеба я назначил стоимость своего часа для клиентов. 1 000 рублей. Это было больше, чем в среднем по рынку, но в целом со мной не отказывались работать, ибо сарафанное радио. В портфолио было около сотни прототипов. Особенно интересовались студии. Всё было прозначно и красиво. Проблема всплыла через десяток проектов. Берём, например, прототип интернет-магазина или тематической социалки, которые появлялись, как грибы, лет пять назад. Когда ты их сделал уже несколько штук, каждый следующий проект не занимает много времени. Это раз. Не содержит в себе большинства граблей, ибо они собраны в прошлом. Это два. И получалось, что прототип интернет-магазина я делал в течение десяти-пятнадцати часов. Сюда входили и переговоры, и пара итераций с комментариями. Итого: 10-15к за работу, которую легко можно было бы продать под ключ за 50-70к. Увеличение стоимости часа до 4−5 тысяч рублей приводило к тому, что с тобой отказывались работать, ибо цена превышает среднерыночную в разы. Резюме по часам:

— За почасовую оплату лучше учиться на клиентах, ибо точность оценки рисков и объёмов работ увеличится только с увеличением работ в портфолио;
— На практике, делая работу за 10-15 часов многие спокойно называют 20-30 часов просто потому, что работа реально выглядит на эти 40-50 тысяч. Причём, тут до абсурда доходит. У меня были случаи, когда я платил дизайнеру по часам так, словно он работал по 15 часов в сутки в течение трёх дней. Было понятно, что на работу уходило гораздо меньше;
— Когда вы называете свою цену за час, её всегда будут сравнивать со средней ценой по рынку. И даже если вы очень хороши в своём деле, без рекомендаций с вами никто работать не будет, если речь идёт о стоимости 5+ тысяч рублей в час.

Теперь про попроектную оценку. Я перешёл на неё, как только понял, что меньше 3к в час с моими опытом и скоростью работы запрашивать не стоит. Теперь интересное. По типовым проектам на рынке тоже есть своя средняя стоимость. У фрилансеров одна, у студий другая, чуть побольше. Если у проектировщика не хватает опыта и паттернов, он будет называть среднюю стоимость по рынку, браться за эту работу и, собирая шишки и затягивая процесс из-за потока комментариев, приближать стоимость своего часа к той самой тысяче рублей. А если это уже десятый подобный проект, то он, наоборот сделает 50-тысячный проект сильно быстрее, чем за 10 часов, используя наработки и предвосхищая комментарии, таким образом приближая стоимость своего часа к отметке 5+ тысяч рублей. И вот вторые, которые опытные, даже могут позволить себе немного демпинговать, называя 40 вместо 50 и при этом за час зарабатывая в несколько раз больше, чем те, которые называют 50-60. Резюме по попроектной оценке:

— Нужен определённый опыт, чтобы не ошибаться в объёмах работ и потенциальных итерациях с комментариями (под опытом подразумевается именно похожий проект, сделанный и выпущенный в прошлом);
— Нужен доступ к клиенту. Работая на субподряде и общаясь только с менеджером проекта, вы не получите ответов на некоторые вопросы, влияющие на ценообразование. Редкие исключения есть. В качестве примеров могу привести Анну Третьякову из Елегиона или Елену Божек из московской компании Айпартнер;
— Из приятного: предоплата. Вы получаете часть денег перед началом работы. При работе по часам обычно платят по факту;
— Работая по рекомендациям, вы можете называть стоимости работ выше среднерыночных, что увеличивает стоимость вашего часа ещё больше. Сюда же, наверное, стоит добавить, что пользоваться ИП (или любой другой формой собственности), работая с ценниками больше 50к, удобнее и белее и пушистее.

Важность проверки результатов собственного труда

В числе немногочисленных требований к нашим соискателям (если называть вещи своими именами, то к нашим потенциальным партнёрам) находится привычка проверять результаты своего труда. Мы все много раз встречались со смешными опечатками в макетах дизайнера, косяках в вёрстке, которые можно было бы отловить и исправить, просто внимательно посмотрев на то, что получилось, неработающий код, который исправляется за минуту, однако, портящий впечатление от всей работы и стопорящий процесс ещё на рабочий день. Это происходит по двум причинам, истекающим друг из друга. Работа делается в последний момент и работа не проверяется. А ведь проверка работы — это постановка себя на место того человека, который будет её принимать.
То есть для проектировщика — это вообще показатель его компетентности. Тут каждая мелочь должна рассматриваться глазами гипотетического будущего пользователя системы. Где-то может спасти специально обученный тестировщик, но зачем, если можно найти специалистов, которые внимательно относятся к тому, что делают?

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

Как проектируется постраничная навигация

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

Что написать клиенту при первом письменном контакте

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

Где Проекторат берёт клиентов на проектирование?

Часто спрашивают, где мы берём клиентов. Причём спрашивают и фрилансеры, и собственники студий. Конечно: интересно же!
Тут логичен встречный вопрос: «Каких клиентов?» Потому что их много и они разные. Есть стартаперы. Есть корпоративный сегмент, где задачи на разработку генеральные спускают сверху-вниз своим менеджерам. Есть уже давно работающие проекты, которым требуется рефакторинг. Клиенты, в проектах которых мы являемся соучредителями. Государство. Список можно продолжать и продолжать.

Естественно, в зависимости от типа клиента будет выстраиваться понимание о том, где его искать и какую методологию использовать в работе. За госпроектами идём в тендеры, за стартаперами — на тусовки, корпоративный сегмент собираем с помощью директа и своего красивого сайта с румяным портфолио. А рефакторинг придёт сам по сарафанному радио.

И именно последний тип клиентов преобладает в Проекторате.

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

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

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

Резюме: сарафанное радио (где-то 70%). Один довольный клиент превращается в нескольких потенциальных довольных клиентов.

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

Как сделать горизонтальное выпадающее меню в Axure 7

Делаем горизонтальное выпадающее меню, как на Яндекс.Маркете.

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

Secured By miniOrange