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

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

Видео.

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

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

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

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

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

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

In English.

Никита Ларионов выложил конспект лекций с курса Игоря Штанга «Типографика и вёрстка», который недавно прошёл в Волгограде. Например:

Одинаковое содержание в одинаковых модулях выглядит скучно. Чтобы интересно расположить его в рамках готового пространства есть 7 приёмов.

1. Заполнять модули не до конца. Оставьте некоторые модули пустыми, обтравите фотографии.

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

3. Заполнить элементами разных классов или разного качества. Вставьте в каталог товаров ссылку на статью или цитату из отзыва.

4. Предусмотреть область, которая будет выглядет по-другому. Сетка одна, но модули объединяются по-разному.

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

6. Добавить новый слой. Подчеркните особенную динамику и направление. Например, текст стоит с чётким ритмом, а картинки летают как хотят.

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

http://vonoiral.com/all/kurs-igorya-shtanga-tipografika-i-vyorstka-v-volgograde/

Иван Величко рассказал о финансах дизайн-бюро «Щука»:

Формат оплаты:
— Почасовая оплата только с Pure. Такая модель не интересна, так как размер прибыли зафиксирован и может только уменьшиться, если сотрудник напортачил;
— Остальным клиентам предлагаются фиксированные бюджет и время;
— Сколько часов дизайнеры потратят на проект, прикидывает арт-директор.

Как считают часы:
— Для западных заказчиков час работы стоит 60 евро, для российских — 3000 рублей;
— Повышение стоимости не привело к уменьшению количества заказов;
— Сотрудники работают максимум 6 часов в день;
— Они склонны занижать потраченное время, боясь показаться неэффективными.

Общие показатели:
— В штате 14 сотрудников;
— В 2017 году выручка составила 25 млн рублей;
— За счёт повышения стоимости и более точной оценки проектов во 2-м полугодии удалось получить 2 млн прибыли;
— Плановая норма прибыли — 20%. Хотят поднять до 30% за счёт снижения транзакционных издержек и более чёткой постановки задач;
— На счетах есть финансовая подушка около 4 млн рублей (в районе двухмесячного оборота).

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

https://incrussia.ru/fly/kejs-byuro-shhuka-kak-otsenit-rabotu-dizajnera-vo-vremeni-i-vyjti-iz-ubytkov/

Адам Ватан и Стив Шёгер предложили 7 простых приёмов, с помощью которых можно улучшить дизайн.

1. Использовать для создания иерархии цвет и толщину, а не размер текста.

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

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

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

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

6. Добавлять акценты с помощью цветной границы блока.

7. Не забывать про иерархию, раскрашивая кнопки в семантически подходящие цвета.

In English.

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

Про интерактивные макеты:

Дизайнер делает красивый интерфейс, в котором вы размечаете области, при взаимодействии с которыми должно что-то происходить. Обычно это просто «on click» или «on move».

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

Есть небольшой нюанс: надо постоянно напоминать, что это прототип. Потому что такой прототип уж слишком похож на реальность.

https://habrahabr.ru/company/netologyru/blog/334694/

Ребята из студии дизайна Евгения Ярового записали 2-й выпуск передачи про дизайн, в котором обсудили:
— Плюсы и минусы использования визуальных референсов в работе. Почему Лебедев не прав, когда называет их поиск тупостью;
— Победителей конкурса «Золотой сайт» и нюансы его проведения: в жюри были сотрудники компаний, чьи работы участвовали в конкурсе, и они ставили высокие оценки своим и топили конкурентов;
— Как работать с клиентскими правками.

https://www.youtube.com/watch?v=oGlxDpd-mMM

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

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

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

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

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

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

Убедитесь, что подсказки можно пропустить.

Задействуйте пустые экраны: показывайте образец будущего содержимого или популярный контент.

https://habrahabr.ru/company/netologyru/blog/328902/

Екатерина Гордеева написала, чем отличается проектирование профессиональных интерфейсов.

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

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

https://medium.com/sobaka/f1efeafb923b

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

Дмитрий Ваницкий написал, как он с коллегами изменил процесс адаптации в отделе дизайна (80 человек).

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

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

Ретроспективные интервью с теми, кто работает в компании меньше года, дополнили список и скорректировали актуальность проблем.

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

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

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

Адаптация в отделе дизайна длится 5 дней:
1. Введение в роли и дизайн-процесс в целом.
2. Исследование.
3. Прототипирование.
4. Визуальный дизайн.
5. Тестирование и презентация.

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

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

https://designpub.ru/3725cd70b32f

Юрий Ветров, который с 2012 года строит в Mail.Ru Group дизайн-систему Paradigm, прочитал почти все книги о дизайн-системах и выбрал те, что показывают правильные точки зрения:

1. Кристофер Александер — Язык шаблонов. Города. Здания. Строительство (1977);
2. Nathan Curtis — Modular Web Design (2009);
3. Anna Debenham — A Pocket Guide to Front-End Style Guides (2013);
4. Brad Frost — Atomic Design (2017);
5. InVision — Design Systems Handbook (2017).

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

https://jvetrau.com/designsystems-books/

Сергей Сурганов из Notion взял интервью у Павла Грозяна, дизайнера в финтех-стартапе Zero.

Поговорили про банковские сервисы, жизнь в Сан-Франциско, зарплаты в стартапах, продукты MacPaw вроде Clean My Drive, как стать дизайнером (делать проекты, а не забивать голову книжками, следить за работой хороших дизайнеров).

«В среднем в стартапах платят $120−140 тысяч в год. $100 тысяч — это очень маленькие деньги. Однокомнатная квартира в Сан-Франциско стоит около $3000 в месяц, это половина всех денег после уплаты налогов. И ещё где-то половину от того, что осталось, ты тратишь на еду».

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

Видео.

Игорь Штанг написал и показал на примерах, когда можно опускать знаки препинания.

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

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

Копия статьи на Awdee.

Появились записи докладов с ProfsoUX 2018:

1. Проектирование скорости. Сделать данные мотокросса полезными (Кевин Ричардсон): vimeo.com/267044938
2. Дизайн-система «Paradigm» (Юрий Ветров): vimeo.com/267044813
3. Проектируем привычки (Брайан Пэган): vimeo.com/267044765
4. Фетишизм и удовлетворение потребностей: как влюбить в свой продукт (Тамара Кулинкович): vimeo.com/267044807
5. Каждый дашборд — это отчет, но не каждый отчет — это дашборд (Алексей Колоколов): vimeo.com/267044930
6. Локализация интерфейсов на иностранные языки. Основные принципы и нюансы (Федор Кондратович): vimeo.com/267044732
7. UX of Decentralized Blockchain Applications (Hester Bruikman-Pagán и Андрей Миронов): vimeo.com/267044912
8. Нейрофизиологические исследования при разработке игр (Ксения Стернина): vimeo.com/267044935
9. UX БЛА. Истории про интерфейсы для беспилотников (Алексей Гапонов): vimeo.com/267044699
10. Выбор инструмента для сборки прототипа. Как найти свой (Аният Курбанова): vimeo.com/267044750

Ещё 19 — на сайте конференции: 2018.profsoux.ru/speakers

Павел Шерер написал о плюсах и минусах сложных интерактивных прототипов в Axure.

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

Такие прототипы нужны не всегда, их дольше делать и сложнее править. Но есть и плюсы:

1. Можно пройти по сценарию и увидеть все связанные с ним состояния системы. Например, авторизоваться и увидеть меню для авторизованных пользователей.

2. Можно провести пользовательское тестирование, в том числе количественное.

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

https://zen.yandex.ru/media/id/5a8249f94826772d3da82e8c/superprototip-v-axure-maksimum-interaktivnosti-5b03fe7100b3dd0f6c18863a

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

Принципы создания:

1. Имя юзерфлоу должно описывать цель, которую пользователь достигнет, выполнив определённые шаги.

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

3. Юзерфлоу должен показывать завершённую задачу и ограничиваться одной задачей или целью пользователя.

http://sketchapp.me/rukovodstvo-po-perexodu-ot-chto-za-xren-ya-vizhu-k-chetkomu-yuzerflou/

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

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

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

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

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

https://usabilitylab.ru/blog/proektirovanie-crm-sistemyi-dlya-tinkoff-banka-vzaimodejstvie-dvux-komand-na-slozhnom-proekte/

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

Внимание пользователей в ленте привлекают 3 области (порядок индивидуален):
— Аватар друга, группы или страницы, которые поделились публикацией;
— Лица (если есть) в превью статьи;
— Заголовок статьи.

Рядом с заголовком будет кнопка «About this article», анимировано сжимающаяся до «i».

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

http://sketchapp.me/proektirovanie-novyx-sposobov-dobavleniya-konteksta-v-novosti-ot-komandy-facebook/

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

Один товар относится к разным категориям и доступен по нескольким адресам. Лучшее решение — вынести адреса товаров в отдельную директорию. Если все категории располагаются в /catalog/, то товары размещайте в /products/, /goods/, /items/. Это поможет поисковикам понять, какая страница относится именно к товару. А вас избавит от необходимости придумывать сложные решения, чтобы сохранить в URL вложенность товара в категорию.

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

https://vc.ru/39432-kak-pravilno-strukturirovat-internet-magazin-s-tochki-zreniya-seo

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

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

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

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

https://medium.com/sobaka/e6a63a6da236