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

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

Дизайнер делает красивый интерфейс, в котором вы размечаете области, при взаимодействии с которыми должно что-то происходить. Обычно это просто «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

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

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

В статье расписаны этапы исследования и даны советы, например, как мотивировать участников.

https://lpgenerator.ru/blog/2016/06/21/dnevnikovyj-metod-v-izuchenii-polzovatelskogo-opyta/

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

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

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

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

https://vc.ru/39701-chto-nuzhno-uchest-v-razrabotke-specialnoy-navigacii-po-saytam-dlya-lyudey-s-ogranicheniyami-zreniya-i-drugih-vozmozhnostey

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

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

Если ищете сотрудников, присылайте ссылки на вакансии: @zGrav.

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

Хороший пример кейса в портфолио аналитика-проектировщика:
— Описание предметной области и проблемы;
— Анализ потребности и целевой аудитории с помощью форума;
— Выделение ключевых сценариев;
— Создание в Axure детализированного прототипа с реальным контентом.

Закладывать в прототип реальные данные о билетах и ценах (880 строк) и показывать билеты, которые действительно соответствуют пользовательскому запросу, — это слишком. Но если такая задача у вас всё-таки появится, акшура для неё подойдёт.

https://designpub.ru/9763be9bc739

Грейс Но написала о перетаскивании (drag and drop) на примере интерфейсов VMware.

Где используется:
— Изменение порядка и уровня вложенности элементов дерева;
— Изменение порядка колонок в таблице данных;
— Изменение порядка рядов в таблице данных;
— Перемещение элементов между древовидным меню и таблицей данных;
— Упорядочивание и объединение карточек.

Если элемент можно перетаскивать, надо проработать:
1. Состояние покоя;
2. Состояние перетаскивания;
3. Обозначение исходного местоположения элемента — где он был до начала перетаскивания и куда вернётся, если пользователь не найдёт для него подходящее место приземления;
4. Обозначение места приземления — новое место, в котором элемент окажется после завершения перетаскивания.

В состоянии покоя:
— Специальным маркером обозначить возможность перетаскивания. Особенно важно так делать, если не все элементы можно перетащить;
— При наведении на элемент менять курсор, например, на руку.

В состоянии перетаскивания:
— Стилистически выделять элемент. Например, с помощью тени приподнимать его над соседними. В Трелло перетаскиваемые карточки слегка наклоняются;
— Менять курсор, например, на сжатую руку.

Исходное местоположение можно показывать полупрозрачным экземпляром перетаскиваемого элемента. Его может не быть, если создаётся эффект естественного движения, когда все элементы вокруг сдвигаются и уступают место перетаскиваемому (пример — упорядочивание вкладок в Хроме или Сафари).

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

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

#drag_and_drop

Ольга Шаврина написала о поисках работы UX-дизайнером в Барселоне.

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

— Описание вакансии на испанском не означает, что компания не рассматривает англоговорящих соискателей. Возможно, просто затупил HR-специалист. Не игнорируйте такие вакансии;
— Чем компания привлекательней, тем меньше в тексте вакансии диких требований и больше собственных ценностей и видения;
— На указанный уровень специалиста можно не смотреть. На наличие или отсутствие в названии слов Senior или Lead — тоже;
— На фото в Линкедине принято улыбаться;
— Список навыков очень важен. В Линкедине есть статистика ключевых навыков для разных должностей, можно подсмотреть и добавить себе;
— Чаще всего небольшие компании и стартапы не помогают с визой. Если у вас есть право на пребывание и работу в стране, много раз напишите об этом;
— Креативное анимированное портфолио с нестандартной сеткой — ад для HRов. Для UI-дизайнера лучше всего Dribbble или Behance. Если улучшил важные бизнес-показатели, надо вынести это в заголовок;
— Не ждите, что найдёте вакансию мечты, отправите резюме, и вас пригласят работать. Поиск работы — воронка. Ваши отклики — лишь её 1-й уровень. Откликайтесь на все вакансии, которые удовлетворяют вашим критериям.

#career