UX Notes
24.8K subscribers
59 photos
3 videos
1 file
1.17K links
В соцсетях: vk.com/ux_notes и fb.com/uxnotes
Чат читателей: @uxnoteschat
О карьере в UX-дизайне и вакансии: @uxwork

Рекламодателям: uxnotes.ru/ads · В перечне РКН: gosuslugi.ru/snet/67a9a56970de7b4d761a81ae

Est. 2016 · Автор: @zGrav
Download Telegram
Ещё одно интервью с Павлом Грозяном, на этот раз в текстовом формате.

Как искал работу в Сан-Франциско. Как устроился в 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
Илья Бирман на нескольких примерах объяснил принцип «дай нажать».

Например, пользователь должен указать хотя бы 1 способ уведомления из 4. Если он выключает 3 чекбокса, нельзя блокировать оставшийся 4-й включённый чекбокс. Надо дать возможность выключить и его тоже. При этом система может автоматически включить один из трёх ранее выключенных чекбоксов.

Или при выборе даты: «Чтобы не дать пользователю ввести несуществующую дату, некоторые разработчики убирают из поля дня несуществующие дни. То есть если выбран месяц июнь, то дня «31» просто не будет в выпадайке. Но что, если у меня день рождения 31 августа? Я хочу ткнуть в 31, а потом выбрать август. Дай нажать!»

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

https://ilyabirman.ru/meanwhile/all/let-me-click/
👍1
Павел Шерер написал об использовании состояния потока для увеличения времени пребывания пользователя на сайте или в мобильном приложении.

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

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

https://zen.yandex.ru/media/id/5a8249f94826772d3da82e8c/5afe67059b403c5bc1dd4651
Прототип — чёрно-белый кликабельный чертёж будущего сайта. Это план, который помогает понять, что есть на странице, зачем оно, там ли вообще находится и как работает.

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

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

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

https://blog.sibirix.ru/2018/10/23/proto-design/
Если думаете, как составить хорошее описание дизайнерского проекта, есть старый, но всё ещё полезный совет Максима Ильяхова.

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

https://bureau.ru/bb/soviet/20130929/
Игорь Штанг поделился приёмом вёрстки таблиц и списков.

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

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

Исключение — компактная, плотная верстка (список писем в Gmail, песен в iTunes). Если элементы стоят близко друг к другу, сдвигать разделитель необязательно.

https://nobelfaik.livejournal.com/175918.html
Артём Горбунов в интервью для VC рассказал:

— О переходе в дизайн и первом проекте в «Студии Артемия Лебедева»;
— Уходе из студии, запуске собственного бюро, первых клиентах и кризисе;
— Знакомстве с ключевыми сотрудниками бюро;
— Появлении инфостиля;
— Критериях, по которым можно вычислить шарлатанов в инфобизнесе;
— Внутренней кухне: по каким принципам живут сотрудники бюро, какими сервисами пользуются для работы и общения и почему у них каждый день — суббота;
— Своём рабочем дне, а также о том, почему у взрослого человека не существует свободного времени.

«В итоге я пригласил [Илью Синельникова] и стал готовить к работе менеджера проектов. Он всему научился, но за полгода не успел продать ни одного проекта и свалил. А через пару лет я написал ему: «Давай сделаем курс по переговорам», и он вернулся уже в другом качестве».

Почему у вас получилось развить собственную студию, в отличие от многих бывших сотрудников «Студии Лебедева»?

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

О причине кризиса:

«В [договоре] есть такая фраза: „Согласование результатов не включено в срок проекта“. Она всегда казалась мне спасительной, потому что самая страшная часть проекта для дизайнера — это правочки, которых может быть хрен знает сколько. И пусть за них отвечает сам клиент, а не мы.

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

https://vc.ru/design/50603
👍1
В последнее время программы (например, Sketch) и операционные системы (macOS Mojave) обзаводятся тёмными темами интерфейса. Мария Новикова написала об использовании тёмного фона.

Лучше использовать его, когда:
— Предполагается, что с интерфейсом будут работать в полумраке;
— Надо спрятать элементы интерфейса, чтобы они не отвлекали от просмотра контента или работы с ним (как в Фотошопе);
— Надо облегчить сканирование контента, помочь с первого взгляда выделить самое главное (графики в Salesforce).

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

https://usabilitylab.ru/blog/svetlie-vs-temnie-interfeis/
Когда автомобильная промышленность начала развиваться, дизайнеры вдохновлялись приборными панелями самолетов. В какой-то момент люксовость автомобиля стала проявляться в том, чтобы напихать как можно больше кнопок на панель и сделать её максимально насыщенной.

Юрий Белканов написал о современных автомобильных интерфейсах.

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

Что можно сделать:
— Ускорить железо;
— Убрать всё с глаз долой и оповещать голосом;
— Аккуратно выводить на лобовое стекло то, что долго объяснять голосом;
— Для ключевых элементов оставить механические элементы управления;
— Цифровые панели можно подстраивать под контекст. В поездках по городу и за городом водителю нужны разные функции, зачем в пробках круиз-контроль? В Adobe Premiere набор окон меняется в зависимости от выбранного режима: Сборка, Редактирование, Цвет, Наложение эффектов.

https://blog.stereomarketing.ru/ux/in-car-ux-troubles/
Ольга Шаврина написала об опыте а/б-тестов с помощью Google Optimize.

— Работает в связке с Google Analytics;
— Позволяет тестировать: а) Цвета, размеры и всё, что настраивается в CSS; б) Контент; в) Порядок и отображение блоков;
— Может таргетировать эксперимент на аудиторию, выбранную по 11 параметрам: URL, категория устройства и так далее.

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

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

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

#ab_testing
Ольга Назина написала, какой должна быть обратная связь в текстовых полях с фильтром мата и другого запрещённого контента.

— Если в тексте есть ссылка, выводить сообщение об ошибке «Поле содержит ссылку»;
— Если в тексте — запрещённое слово, выводить «Поле содержит некорректное выражение»;
— При этом некорректные выражения надо выделять в тексте или перечислять в сообщении об ошибке. Фильтры могут ошибаться и принимать за мат нейтральные слова вроде «ребенок». В большом тексте сложно найти такое ложноматерное выражение.

Очевидные рекомендации, но, например, Wildberries так не умеет.

https://okiseleva.blogspot.com/2018/11/blog-post_8.html
Рэйчел Краузе написала про сториборды (storyboard — раскадровка) в UX-дизайне.

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

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

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

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

Сториборды часто используют для описания фрагмента путешествия пользователя (user journey).

Когда стоит использовать сториборды:

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

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

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

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

https://vc.ru/design/51480
Евгений Шкляр написал, как работает антифрод-машина Яндекса и как она улучшает пользовательский опыт.

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

«Если где-то есть незащищенный аккаунт с деньгами, его взломают. Поэтому много где в интернете продают бонусные карточки крупных торговых сетей с балансом в несколько тысяч рублей за сумму раза в 3−4 меньше. Это реальные аккаунты в программах лояльности, за которыми недосмотрели владельцы».

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

https://habr.com/company/yamoney/blog/416341/
Дизайнеры SteelKiwi написали о различиях приложений для iOS и Android (Material Design).

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

В стандартных элементах управления, например, выбор даты в iOS делается с помощью барабана, а в Android — календаря.

В стиле кнопок:
— Текст на кнопках в Android обычно имеет верхний регистр. В iOS чаще встречается верхний регистр первой буквы каждого слова;
— Основная кнопка (call to action) в iOS располагается в центре панели вкладок.

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

https://vc.ru/design/50643
Команда «Тильды» написала очень хороший вводный материал о UI-китах, фреймворках, гайдлайнах платформ и корпоративных дизайн-системах.

— Что такое UI-кит (с примерами), кто применяет, какие обычно элементы в него входят, какие бывают состояния, зачем использовать, где взять готовые киты.
— Что такое фреймворки и чем они отличаются от UI-китов. Из чего состоит Bootstrap, и как с ним работать.
— Что такое гайдлайны платформ, подробнее про Material Design от Google и Human Interface Guidelines от Apple, ссылки для более глубокого изучения.
— Что такое корпоративные дизайн-системы, чем они отличаются от UI-китов и фреймворков и зачем разрабатываются, ссылки на примеры.

https://tilda.education/courses/web-design/designsystem/
Илья Сидоренко написал, как сохранить интерес к дизайнерской работе.

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

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

https://designpub.ru/love-design-8ec77e3701f2