Блог

Об иконках

Иконки экономят место и выглядят свежо. Иконки — это быстрый ответ на сложные вопросы:

  • Как сделать красивее?
  • Как нам это забрендировать?
  • Как сделать веселее?

Мы любим иконки. Пока не начинаем в них путаться.

Иконки бывают разные: на продуктах, в архитектуре, в компьютерах, в списках, на кнопках, для веба и приложений, для iOS и Android. Иконки на панелях инструментов, подписанные и неподписанные, стилизованные и стандартизованные, цветные и монохромные, в иконочных шрифтах, файлах PNG или SVG…

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

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

Читать далее Об иконках

Скидка на Sketch

Update от 13 февраля 2017: способ больше не работает.

Предыстория

Я собрался купить Sketch. На странице оформления заказа увидел поле для ввода промокода и решил проинвестировать немного времени в поиск скидки. При сегодняшнем курсе доллара даже 20-процентная скидка — это больше 2000 рублей. Хватит хорошенько сходить в бар или купить в «Проекторате» курс про адаптивные прототипы (и ещё останется).

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

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

Читать далее Скидка на Sketch

Особенности работы с Проекторатом

За счёт чего мы выдерживаем сроки в проектировании и при этом не рискуем промахнуться с оценками?
 
Есть договор. В договоре прописаны функциональные требования к проектируемой системе. Также в договоре стоит конкретная дата, когда мы показываем релизную версию прототипа, удовлетворяющую всем функциональным требованиям. Если мы эту дату нарушим, мы вернём предоплату и предоставим исходники работ. Эта дата не может сдвинуться вперёд из-за появляющихся новых хотелок клиента или из-за проволочек в согласованиях промежуточных результатов. Технически мы могли бы вообще не общаться с клиентом с начала работ и до этой даты. Сказали «релизная версия будет 25 апреля» — показали релизную версию 25 апреля. Тут всё понятно.
 
Но также в договоре сказано: «Мы вернём предоплату в том случае, если результат работы Заказчику не понравится». Что делать с таким заявлением?
А делать следующее. Мы работаем не со всеми клиентами, а только с теми, кто, во-первых, самостоятельно принимает наш результат и озвучивает свои решения, во-вторых, может позволить себе потратить личные часы в период работы над релизной версией. Мы так и говорим: «К 25 апреля будет готова релизная версия, но от вас потребуется 15 часов вашего персонального времени. Давайте для вашего удобства примерно раскидаем их по календарю». Это отсекает компании, где задача ставится сверху и выполняется через менеджеров. Также это сразу отсекает клиентов, которые физически не могут посвятить столько своего времени на этап проектирования. А нам без него никак! Чтобы выполнить пункт договора, озвученный в начале абзаца, мы не будем играть в угадайку, мы будем общаться с клиентом в процессе работы и вместе с ним придём к нужному ему результату.
 
Третий момент. После релизной версии мы не ограничиваем клиентов количеством итераций с правками в прототип. Единственное условие: эти правки должны быть в рамках существующих функциональных требований. Это даёт нашим заказчикам уверенность в том, что не придётся платить дополнительные деньги, если результат нашей работы окажется субъективно не тем, что хотелось получить. Знаете, сколько клиентов злоупотребляли этим нашим предложением? Ноль! Работа выстроена таким образом, что уже к релизной дате 90% вопросов закрыты, т.к. заказчик вовлечён в процесс и короткими итерациями корректирует курс нашего корабля именно к той цели, которая сделает его довольным. В среднем мы демонстрируем промежуточные результаты каждые 1,5 дня (от 1 до 3 дней). Каждая демонстрация занимает не больше часа времени и хорошо регламентирована. Показали то, что есть, получили обратную связь, обсудили, ушли работать. И никаких переписок! Никаких цепочек из 45 fwd и re! Комментарии фиксируются проектировщиком во время переговоров по Скайпу и показываются клиенту уже в отработанном виде.
 
Вот и весь секрет. Важно понимать: не все соглашаются на такие условия работы. Они не удобны занятым клиентам, которые поручили разработку того или иного проекта своим менеджерам. Со своей стороны мы нередко отказываемся работать со студиями в качестве субподрядчиков, потому что зачастую не сможем общаться напрямую с клиентом, а значит окажемся в ситуации бесконечных правок, которая загонит нас в минуса.
 
Мы хорошо знаем свою целевую аудиторию и стараемся сделать так, чтобы клиенты в итоге становились нашими партнёрами.
 
За всё время работы Проектората предоплату мы возвращали всего один раз. Это был пункт «если результат работы Заказчику не понравится». В этом случае исходники остаются у нас.
 
А теперь давайте ещё раз ответим на вопрос, поставленный в заголовке:
— Разбиваем работы на «до релиза» и «после релиза»;
— Отвечаем деньгами за срок «до релиза»;
— Снимаем ограничение по количеству правок, настраивая клиента на сотрудничество и доверие, а не на классическую борьбу клиентов и исполнителей;
— Отвечаем деньгами за удовлетворённость клиента результатом, выстраивая процесс совместного движения к результату, а не доказывания того, что мы эксперты и нас надо слушать.

Что такое шнафтели и с чем их едят?

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

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

Рассказ о том, что нервные клетки не восстанавливаются, — шнафтель. Дефибриллятором можно запустить остановившееся сердце? Шнафтель! Мобильный телефон зарядится в микроволновке? Шнафтель, да ещё какой! Кипрского Деда Мороза зовут Василий? Шнафтель!

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

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

Чем отличаются модальные окна от pop-up’ов

Давайте немного разъясним про модальные окна и pop-up’ы.
 
1. Модальное окно — это окно, которое блокирует работу пользователя с родительским приложением до тех пор, пока это окно не закроют. К этой категории относятся современные лайтбоксы (например, просмотр фоток в фб или вк) и древние модальные окна, вызываемые командами alert, prompt и confirm, которые мы чаще всего называем алертами. Проблема алертов в том, что они перекрывают возможность работы не только с текущей вкладкой, но и со всем браузером до тех пор, пока их не закроешь.
 
2. Pop-up — всплывающее окно. Раньше, когда вкладок в браузерах не было, некоторые страницы открывались в новых окнах. Чаще всего этим злоупотребляли создатели баннеров. Кликнешь по какому-нибудь элементу и у тебя весь рабочий стол в окнах разного размера. А ещё были злостные варианты открытия pop-up’а за границей экрана, чтобы усложнить задачу по его поиску и закрытию. Соответственно, такие окна делились на pop-up’ы, которые появлялись поверх других окон и pop-under’ы, которые, соответственно открывались под другими окнами. Сейчас с pop-up’ами борются сами браузеры и мы их встречаем всё меньше.
 
Пока писал, прям испытал ностальгические чувства.

Семь советов проектировщику на фрилансе

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

— Чтобы повысить качество своей услуги, отстроиться от конкурентов и увеличить поток входящих заказов, стоит однажды самому оказаться на месте заказчика и посмотреть его глазами на то безобразие, которое творится на нашем рынке. Попробуйте заказать себе корпоративный сайт или блог и прочувствовать на себе мысль: «А зачем мне проектировщик? Здесь и так всё понятно!»;

— Не надо сравнивать себя с профессионалами, работающими в Яндексах, Контактах, Авито и прочих гигантах. Также не надо сравнивать себя с основателями и руководителями студий. К ним никогда не придут те клиенты, с которыми вы работаете на фрилансе. У вас своя доля рынка, у неё свои потребности. Большие люди, перечисленные выше, эти потребности удовлетворять не будут. Хотите быть программистом за 500 000 в месяц в команде Контакта? Вперёд на должность помощника левой руки джуниора и стройте карьеру. Хотите зарабатывать столько же на фрилансе? Начинайте работать над персональным брендом и сервисом;

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

— В проектировании на фрилансе сервис и прозрачное ценообразование приносит больше прибыли, чем качество интерфейсов (которое само по себе субъективно на этом этапе);

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

— Упакуйте свою услугу таким образом, чтобы она была понятна вашей целевой аудитории. «UX-проектирование» и «Юзабилити аудита» — это настолько абстрактные процессы, что даже наши коллеги по-разному представляют себе их результаты. Продавайте более понятные и конкретные «Прототипы мобильных приложений» или «Рекомендации по исправлению ошибок на сайтах»;

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

О неумении называть сроки

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

Строго: время и ожидаемый результат. «В 14:00 опубликую новую версию прототипа», «макеты будут на вашей почте в 17:45, в среду», «в полдень я свяжусь с вами для уточняющих вопросов».

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

Почему опытные проектировщики превращаются в хороших менеджеров

protomanager

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

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

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

2. «Схожесть системы с реальным миром. Система должна общаться с пользователем на понятном ему языке. Использование слов, фраз и понятий, знакомых пользователю в реальном мире, намного предпочтительнее, чем использование специализированных терминов».
В процессе работы я редко использую термины «UX», «cjm», «источники трафика», «интерактивность». Разве что при работе с теми людьми, которые живут и работают в IT. Вместо этого я говорю «удобство использования», «то, как люди будут пользоваться проектом», «как посетители попадут на ваш проект» и «как будут двигаться блоки на страницах». Я стараюсь избегать абстракций и любое обсуждение провожу в рамках разговора о конкретном пользователе конкретной части интерфейса продукта.

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

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

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

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

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

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

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

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

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

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

Автор — Егор Камелев, собственник Проектората.

Список эвристик взят с Прожектора Rokee.

О количестве итераций с правками на этапе проектирования

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

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

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

Чтобы эта заметка не казалась оторванной от реальности, обратим внимание на две важные вещи:

1. Речь идёт о попроектной оценке, а не о почасовой;
2. Это правило сработает только с прямыми клиентами. На субподряде между проектировщиком и клиентом может оказаться менеджер, который не будет заинтересован в результате так же, как клиент. Когда мы работали с компаниями-партнёрами, зачастую у нас вообще не было прямого доступа к клиенту. В таких условиях, разумеется, нельзя работать по принципу бесконечных итераций, потому что они и правда могут стать бесконечными.

Распродажа электронных книг для проектировщиков

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

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

Опытные проектировщики и наши постоянные читатели знают, кого качать. Для всех остальных — контрольный список: Алан Купер, Билл Скотт и Тереза Нейл, Джесс Гарретт, Джеф Раскин, Джоэл Спольски, Дмитрий Кирсанов, Расс Унгер и Кэролайн Чендлер, Стив Круг, Якоб Нильсен.