Новые выпуски передачи Walking head: с основателем «Проектората» Егором Камелевым и проектировщиком из Redmadrobot и членом «Гильдии вольных проектировщиков» Евгением Игнашовым.

Егор Камелев

4.1. youtube.com/watch?v=3WBMr1E46Vs
— Как стал работать проектировщиком;
— Как перешёл на фриланс;
— Зачем основал «Проекторат»;
— Чем «Проекторат» является сейчас;
— О передаче накопленного опыта и знаний;
— Об изменении мировоззрения.

4.2. youtube.com/watch?v=hqwNDftdv2c
— Куда может развиваться проектировщик-фрилансер: проектирование в чужой компании, создание собственной, смена вида деятельности;
— Об опыте формирования своей команды, почему отказался от такой конфигурации;
— Почему свой продукт лучше своего агентства.

4.3. youtube.com/watch?v=AbFLHSDc9Yc
— Почему советы начинающим давать отчасти бессмысленно;
— О том, что зарабатывать больше, — некорректная цель;
— О целеполагании: выборе направления для развития, обучении на клиентских проектах;
— О навыках, которые нужны, чтобы хорошо зарабатывать в любом деле;
— Как учиться проектированию (исключительно практика), как обеспечить себе хороший старт;
— Как устроиться на работу;
— Помогут ли курсы по дизайну и проектированию найти работу.

Евгений Игнашов

5.1. youtube.com/watch?v=GusCmUn5O4c
— Реально ли зарабатывать проектированием, вообще не занимаясь дизайном UI;
— Как находить клиентов (напрямую и через студии);
— Как пришёл к профессии проектировщика, а затем UX / UI-дизайнера, как стал арт-директором в красноярской студии «Чипса»;
— О комплексном предложении услуг проектировщика: проектирование, дизайн, написание ТЗ, авторский надзор;
— О типах проектов и ценах.

5.2. youtube.com/watch?v=r8uM-r1WIj0
— О взаимодействии проектировщика с аналитиком;
— Проектной работе в Redmadrobot;
— Жизни на корпоративной квартире роботов;
— Нюансах оформления отношений с заказчиками.

5.3. youtube.com/watch?v=9p1wIv8hUss
— Что лучше, быть UX / UI-дизайнером или специализироваться;
— Про отличия продуктового менеджера от продуктового дизайнера;
— Про взаимодействие с ПО (product owner);
— Про А/Б-тесты как способ договориться.

5.4. youtube.com/watch?v=pYLv_cGZO_I
— Про фишки при продаже услуг проектировщика;
— На что обратить внимание и чему учиться, чтобы быстрее стать продуктовым дизайнером;
— Как понравиться клиенту за счёт грамотного подхода к проектированию;
— Стоить ли отказываться от Акшуры и переходить на Скетч и Фигму.

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

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

Эрик предлагает размещать текст плейсхолдера между подписью к полю и самим полем. Такое решение:
— Связывает визуальную и структурную иерархию: сначала указано, для чего нужно поле ввода, потом данные, которые нужно знать, чтобы его правильно заполнить, и в конце сама пустая графа;
— Будет переведено вместе со всей страницей;
— Не воспринимается как заранее введённые данные;
— Легко разобрать даже в условиях плохой видимости;
— Не исчезнет, как только пользователь начнёт заполнять графу;
— Может включать в себя семантические теги и быть стилизовано с помощью CSS.

https://vc.ru/design/46752-nuzhen-li-saytu-vspomogatelnyy-tekst-v-polyah-vvoda

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

1. Метрики вовлечения пользователей:
— Количество сеансов на пользователя (Sessions per user);
— Продолжительность сессии для когорты (Session duration for a cohort), с течением времени;
— Количество ключевых действий пользователя за сеанс (Key user actions per session). Таким действием может быть лайк.

2. Бизнес-метрики:
— Пожизненная ценность клиента (Customer Lifetime Value). LTV — чистая прибыль, которую вы получите от клиента, прежде чем он перестанет платить;
— Стоимость привлечения клиента (Customer acquisition cost). Для SaaS-стартапов отношение LTV и CAC должно быть 3 и выше;
— Какую сумму платит вам каждый месяц рядовой клиент (Average revenue per account);
— Ежемесячный повторяющийся доход (Monthly recurring revenue) — доход компании в месяц;
— Отток клиентов (Customer churn) — % от платящих пользователей, который вы теряете каждый месяц (по когортам и общий);
— Отток доходов (Revenue churn) — % дохода, который компания теряет в месяц из-за оттока или возвратов на прошлый тариф. Меньше обращайте внимания на Customer churn и больше следите за Revenue churn. У SaaS-стартапов Customer churn должен быть ниже 2%, а Revenue churn — отрицательным;
— Удержание клиентов (Retention rate).

3. Служба поддержки:
— Количество входящих тикетов. Если вы выпустили обновление, и количество тикетов подскочило, возможно что-то пошло не так;
— Индекс потребительской лояльности (Net promoter score) — готовность клиента рекомендовать ваш продукт. Не делайте высокий NPS самоцелью. Мета-анализ от Keiningham не нашёл подтверждений, что NPS отражает способность компании к росту. Лучше обратитесь к клиентам и соберите у них обратную связь.

https://ux-journal.ru/kak-vybrat-pravilnye-metriki-dlya-produkta.html

Егор Горохов написал, как дизайнеры студии Kelnik передают верстальщикам информацию о вертикальных отступах.

Отступы разделены по уровням. 1-й уровень — самый маленький отступ. Например, между заголовком h4 и параграфом или иллюстрацией и подписью. Отступ 2-го уровня отбивает два таких блока. И так далее.

Уровень блока показан цветом.

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

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

По оценке фронтендеров, время на работу с отступами сокращается на 90%. Фронтендер тратит 5−10 минут на заведение настроек в SASS и больше не переживает об отступах. Ему не нужно ничего замерять линейками, он своими глазами видит (цветовое кодирование), какой отступ у блока.

https://designpub.ru/82cad46dd34f

Если в вашей команде нет специалиста по написанию микротекста (интерфейсного текста), вам могут пригодиться рекомендации Райана Кордела.

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

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

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

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

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

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

http://telegraf.design/6-pravil-mikrorajtinga-dlya-produktovyh-kompanij-bez-ux-kopirajtera/

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

Применимо к любой специальности:

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

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

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

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

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

6. Научитесь говорить нет. Не соглашайтесь помогать, если вопрошающий точно не знает, что ему нужно. Или если это отвлекает вас от действительно важной задачи.

Применимо к UX-дизайнерам:

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

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

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

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

11. Договоритесь о терминах с участниками команды.

https://ux.pub/10-veshhej-kotorye-ya-xotel-by-znat-do-togo-kak-stal-ux-dizajnerom/

Артемий Лебедев, Илья Михайлов и Артём Горбунов для альманаха «100 лет дизайна» вспоминают веб-дизайн 1995−2000 годов.

— Сайт как свиток и как книга с оглавлением;
— Резиновые сайты;
— Влияние технических ограничений;
— Особенности дизайнеров того времени: тогда — стремление пройти по верхней грани технологических возможностей, сейчас — стремление добиться решения задачи (выразительности послания) как можно меньшими средствами, в том числе нулевым интерфейсом;
— Баланс пользы продукта для бизнеса и для потребителя;
— Чем вдохновлялись в то время;
— Как веб повлиял на окружающий мир: ожидание интерактивности от окружающих объектов, взаимодействие жестами (свайп, пинч);
— Будущее дизайна.

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

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

https://www.youtube.com/watch?v=OB59qDfIiQs

Егор Камелев написал, зачем нужны функциональные спецификации.

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

Зачем нужна:
1. Донести до разработчиков информацию, которую невозможно отобразить в интерактивном прототипе;
2. Чтобы стать частью договора на разработку;
3. Помогает восстановить информацию по «замороженным» на длительное время проектам;
4. Во время её написания проектировщик проделывает двойную проверку интерактивного прототипа, находит ошибки и несостыковки и вносит правки.

https://vk.com/@projectorat-pochemu-neobhodimo-pisat-funkcionalnye-specifikacii

Команда Readymag подготовила материал о сетках: какие бывают и чем они полезны дизайнерам и пользователям (читателям).

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

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

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

Обложки дисков британской группы The XX, а также сольников Джейми Смита, одного из членов коллектива, — пример концептуальной серии, построенной на одном приеме и простейшей сетке. Первый студийный альбом The XX — это высеченное отверстие в виде креста (или буквы X) в полностью черном внешнем конверте пластинки, в котором виден полностью белый внутренний конверт.

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

Второй альбом и все релизы, связанные с ним, имеют белый внешний конверт. Конструкция «креста» может рассматриваться как сетка этого макета.

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

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

https://almanac-rus.readymag.com/grid/

Ещё одно интервью с Павлом Грозяном, на этот раз в текстовом формате.

Как искал работу в Сан-Франциско. Как устроился в Zero (после интервью сделал скетчи решений, которые они обсуждали, видеопрезентацию и лендинг) и договорился о зарплате большей, чем собирались платить основатели. Чем хороша работа в стартапе на ранних стадиях. Интересно про систему опционов (как я понял, это типовая схема). Чем отличается жизнь работника технологичной компании в Сан-Франциско (трудоголизм, расизм, наркомания, закрытые вечеринки и сексуальные девиации).

«Я рассматривал много вариантов, но подавался только туда, куда мне могли сделать интро (возможность пообщаться с потенциальными коллегами). Не видел смысла тратить время на "холодные" заявки.

Дошел до оффера из Uber Eats, но понял, что это не то место, где бы я хотел работать. "У нас все отлично, только ты должен быть, как акула. Если ты плывешь медленно, тебя начинают есть сзади. А если ты плывешь слишком быстро, то тебя менеджер сожрет", — так сказал мне один из сотрудников Uber. Это было до известного скандала.

У меня местный друг решил открывать в Украине офис разработки. И вот он рассказывает, как нанимает сотрудников и предлагает долю в компании и зарплату, а ему говорят — нет, не интересно, давай только деньги. Так это же отлично для фаундера! Инвесторы его спрашивают: "Сколько у тебя сотрудников в доле?" Ноль! Они были в приятном шоке, больше бабок владельцам и инвесторам».

https://dou.ua/lenta/interviews/grozian/

Джим Росс написал, как давать рекомендации по улучшению UX.

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

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

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

Рекомендации должны быть:
— Понятными, лаконичными (разбейте на подпункты) и в должной мере конкретными (иногда имеет смысл обозначить общее направление решения);
— Правдоподобными (рекомендация естественно исходит из исследования);
— Авторитетными;
— Требующими конкретных действий (что сделать, в каком направлении подумать, что дополнительно исследовать);
— Осуществимыми (но это не значит, что максимально простыми в реализации);
— Гибкими;
— Ранжированными по силе воздействия на пользователей.

https://medium.com/grifer163/bcf959e6a4c7

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

Леонид Фейгин и Дмитрий Перишков: «Этим календарём мы гордимся. Он сделан так, что визуальный дизайн практически незаметен, но в нём заложен классный дизайн смысла.

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

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

https://www.youtube.com/watch?v=DTBhvB3EOpU

Рохан Мишра написал про универсальный (инклюзивный) дизайн — создание продуктов и сред, которые доступны людям независимо от их возраста, инвалидности и факторов вроде сломанной руки, беременности и т.п.

На примере двери:
— Размещение дверной ручки не слишком высоко для ребёнка и не слишком низко для взрослого;
— Автоматическое открытие — лучше открытия двери с помощью ручки;
— Ширина — достаточно большая для людей на инвалидных колясках.

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

https://ux.pub/principy-universalnogo-dizajna-v-povsednevno-ispolzuemyx-produktax/

Я рассказал о функциональных спецификациях к интерфейсу: зачем нужны и как их писать.

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

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

https://www.youtube.com/watch?v=XaRymaGcPXM