Кто о чём, а Алан Купер — о персонах, а именно, почему этот инструмент работает не у всех.

— Он написал о персонах в книге «Психбольница в руках пациентов», которую адресовал менеджерам, а не дизайнерам;
— Он не писал её как практическое руководство;
— Персоны удалялись от изначальной идеи, опираясь на мнения людей, которые ничего в них не понимали;
— В компании Алана проводили полевые исследования, а затем создавали персоны, чтобы понимать и отображать цели, мотивацию и желаемые результаты реальных пользователей. И строго ограничивали количество персон ради фокуса;
— В Майкрософте персонами инженеры, запертые в башнях из слоновой кости, защищали придуманные ими функции. Персон у них были сотни — по одной для каждой функции;
— Двое дизайнеров из этой компании опубликовали о персонах влиятельную книгу, которая способствовала удалению от изначальной идеи;
— Привлекательность персон отчасти заключена в том, насколько легко создавать «персоны», не делая этого на самом деле;
— Иногда дизайнеры доходят до правильного понимания персон и пишут в своих блогах: «[Что-то, что не является персонами, но я буду называть это персонами] действительно ужасны. Но [персоны под каким-то новым названием] — намного лучше!»;
— Есть хорошие источники информации о персонах. Они написаны бывшими работниками компании Cooper.

https://www.uprock.ru/articles/v-zashchitu-person

Оливер Микингс поделился советами по дизайну лендингов. Отдельные не самые затасканные рекомендации:

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

https://habr.com/ru/company/timeweb/blog/557658/

Мэтт Оуэнс из бруклинской студии Athletics (с очень знакомым лого) рассказал, что понял за 30 лет дизайна.

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

https://ux.pub/moi-9-printsipov-dizayna-na-osnove-30-letnego-opyta-v-industrii/

Юля Кондратьева написала, какие реферальные программы работают лучше: с бонусом для себя или для друга.

Тестировали предложение, в котором пользователь и приглашённый друг получали 70% скидку на следующий заказ. 1-й группе показывали текст с акцентом на скидку для себя, 2-й — для себя и друга, 3-й — для друга. У контрольной группы текст был без акцента.

Альтруистическая формулировка (для друга):
— Повысила вероятность отправки реферальной ссылки друзьям на 60% по сравнению с контрольной группой;
— Увеличивала вероятность покупки друга. Возможно, в этом случае пользователи лучше выбирали, кому отправить приглашение.

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

https://habr.com/ru/post/558584/

Кристина Шеровай проиллюстрировала 10 эвристик Якоба Нильсена интерфейсами Revolut. Например:

5. Предотвращение ошибок. Чтобы снизить их количество из-за плохой фотографии паспорта, на экране загрузки фото есть подсказка: «Убедитесь, что на фото паспорт, текст можно прочитать, он не размыт и не бликует».

6. Распознавание вместо необходимости вспоминать. Revolut отображает баланс конкретного счёта на экране отправки денег, его не надо помнить. В процессе перевода не надо запоминать отправляемую сумму (или сканировать экран в её поисках) — она отображается прямо на кнопке, запускающей перевод.

Полезно иногда вспоминать об этих эвристиках.

#heuristic

Артур Харитонов написал о триггерах рассылки для интернет-магазинов.

1. Если пользователь бросил корзину, потому что отвлёкся, его может вернуть письмо с напоминанием о корзине. Если он ушёл, потому что сомневается в выборе, эффективнее письмо с подборкой альтернативных товаров. То же самое с товарами, оставшимися в избранном;
2. Если пользователь просматривал товары и покинул сайт, можно прислать персональную подборку из истории просмотров. По таким триггерам 60−70% открытий и 10−12% кликов;
3. Если пользователь заказал товары, которые нужны постоянно, например, кофейные зёрна, со временем можно предложить ему скидку на новую упаковку.

https://vc.ru/marketing/245528

Максим Шток написал вводную статью об AR-дизайне со множеством ссылок для дальнейшего изучения.

AR-контент делают:
— Для смартфонов: маски, виртуальная одежда и обувь, навигационные указатели, игры;
— Носимых устройств вроде Hololens и Magic Leap: на текущем этапе развития в основном для узких задач корпоративных клиентов;
— Не носимых устройств: проекции на лобовое стекло автомобиля, вертолёта или корабля.

Различают разные масштабы применения:
— Table scale: объекты на столе, виртуальные рабочие пространства и виджеты;
— Room scale: объекты в комнате, например, Studio Mode в приложении Ikea Place;
— World scale: объекты в окружающей среде вроде уличной навигации и стрит-арта.

Профессия разработчика для AR только зарождается, стандартов UX/UI ещё нет, надо много исследовать: сложность восприятия разной информации, в том числе под разными углами зрения. Быстрее всего адаптируются UX/UI-, моушн-, гейм-дизайнеры и специалисты по 3D-моделированию.

Рынок AR-гарнитур растёт на 73,8% в год.

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

https://designpub.ru/f62056a8108e

Александр Радал написал о способах снизить когнитивную нагрузку пользователей.

— Уменьшайте количество вариантов, из которых надо выбирать. Так не только проще выбрать, но и выбранный вариант будет радовать пользователя больше (он меньше сомневается, что не проглядел вариант получше);
— Не стоит уменьшать количество пунктов меню до ±7 просто ради числа. Большой список лучше, чем поиски нужного пункта во вложенных меню (с неконкретными названиями типа «Прочее»);
— Если пользователь ошибся, дайте простой способ вернуться к предыдущему состоянию или исправить ошибки;
— Управляйте пользовательским вниманием визуальными подсказками вроде стрелок и изображений людей, смотрящих на важные элементы страницы;
— Используйте знакомые шаблоны и условности: единая цветовая палитра во всём продукте, знакомые паттерны взаимодействия (например, хлебные крошки), знакомые иконки и символы (например, корзина для удаления файлов);
— Общайтесь с будущими пользователями продукта;
— Раскрывайте информацию постепенно: сначала важную, затем второстепенную.

#cognitive_load

В «Атвинте» написали о хорошем UX (с примерами).

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

https://vc.ru/design/251212

Пейдж Лаубхаймер из Nielsen Norman Group написал о левосторонних вертикальных меню на десктопных версиях сайтов.

Преимущества:
— Нет искусственного ограничения на количество пунктов, как в горизонтальном меню. В меню есть место для конкретных и понятно названных категорий, что упрощает навигацию;
— Есть место, чтобы добавлять новые пункты;
— Вертикальное меню проще сканировать (если его пункты выровнены по левому краю), плюс, пользователь, читающий слева направо, начинает с него сканирование страницы;
— Проще перенести в мобильную версию сайта.

Недостатки:
— Занимает больше места, сложно использовать на небольших экранах;
— Не все пункты могут быть видны на первом экране.

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

https://www.uprock.ru/articles/levostoronnyaya-vertikalnaya-navigaciya-v-desktopnoy-versii-sayta-masshtabiruemost-otzyvchivost-i-prostota-prosmotra

Дэвид Холл написал об интерфейсном тексте. Например:

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

Активный и пассивный залоги:
— Старайтесь использовать активный залог. Он описывает, как человек или объект что-то делает. «Сергей танцует»;
— Используйте его, когда хотите подчеркнуть, кто или что делает какие-то действия. «Такси подъехало»;
— Пассивный залог используйте в тех редких случаях, когда действие или состояние важнее объекта, к которому оно относится. «Корзина переполнена, задача выполнена».

https://vk.com/@sobakapavlovaltd-interfeisnye-teksty-kak-dizaineru-nachat-pisat-gramotnee

Андрей Шапиро рассказал о журнале проектировщика.

— Инструмент помогает структурировать проектирование, не размывать фокус и получить на выходе подробное описание проекта;
— Проектировщик может отвлекаться от цели и забывать важную информацию, переставать следить за проектом в целом и его границами;
— Системы становятся настолько сложными, что их невозможно моделировать в голове. Обычно разработкой занимаются команды специалистов;
— Решение сложной задачи похоже на бесконечный цикл попыток построить и проверить модель, сформировать другую модель, чтобы скомпрометировать предыдущую, а потом заново переосмыслить исходную задачу;
— Надо записывать в единый реестр всё, что появляется в ходе размышления. Но записи не должны быть быть хронологическими;
— Этапы работы с журналом: 1) Запись новых мыслей, 2) Формулировка и категоризация, 3) Проектирование и проверка решений, 4) Перенос знаний в хранилище и чистка журнала;
— Вести журнал можно в программах, позволяющих группировать записи с помощью разнообразных иерархий: раскрывающиеся списки иерархий, дерево страниц или списков. Notion подойдёт;
— О категориях журнала важно договориться в начале проекта. Возможные варианты: 1) Ситуация, сценарий, 2) Проблема, нежелательный эффект, 3) Задача, 4) Идея, 5) Противоречие, 6) Критерий готовности / успешности, 7) Договоренность, 8) Цель.

https://xraizor.medium.com/c785d752b9ec

Евгений Честнов написал о своём опыте дизайна систем диспетчеризации.

Одно дело показать 3д-графикой насосы, клапаны, фильтры и заслонки, другое дело — сложное технологическое оборудование. Найти подходящие картинки ультрафиолетовых ламп и фильтров очистки крайне сложно, не говоря уже о флотаторах, жироловках и обезвоживателях. Поэтому от 3д со временем отказались.

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

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

https://habr.com/ru/post/560046/

Вадим Мазин поделился рекомендациями для мобильных версий интернет-магазинов.

— Всё чаще навигация, поиск и корзина в мобильных версиях интернет-магазинов перемещаются к нижней границе экрана;
— Если люди редко покупают товары магазина (например, электроинструменты) и обычно изучают характеристики и отзывы, от кнопки «Купить» в каталоге можно отказаться;
— Пользователю легче решиться на покупку, если есть отзывы. Хорошие магазины выстраивают системы получения обратной связи от клиентов;
— Если важен внешний вид товара, отзывы с фото круто увеличивают конверсию;
— Надо объяснять, почему клиент видит конкретную персональную подборку. Если по интересам он относится к группе «Монтажники», то подборку можно назвать «Выбор монтажников».

https://surf.ru/5-pravil-khoroshiegho-mobilnogho-maghazina/

Дмитрий Ваницкий написал о дизайнерском развитии.

— Рост уровня (джун, мидл, синьор, лид) показывает развитие, если он происходит внутри одной компании. Если уровень меняется с переходом в другую компанию, развития здесь может и не быть;
— Уровень значит, что у вас есть определённое количество очков ценности, но они могут распределяться по навыкам в разных комбинациях;
— Изучите компанию мечты, определите её фокус и адаптируйте систему навыков под неё, добавив нужные и убрав ненужные;
— В Epam посмотрели, какие задачи решали дизайнеры за последние полгода. Выяснилось, что навыки Motion Design, 3D Modeling, Space and Time Design использовались редко;
— В итоге выделили 7 кластеров навыков: Discovery, Research, UX Design, Visual Design, Design Ops, Teamwork and Collaboration и Interpersonal. В каждом по 3−4 навыка, внутри которых ещё по 4−5 сабнавыков;
— Уровни навыков: знаю, понимаю (применяю знания на практике, но под присмотром), могу (без присмотра), учу (обладаю передовыми знаниями по теме, могу обучать).

Также Дмитрий поделился таблицей со списком навыков и сабнавыков и пошаговым алгоритмом прокачки.

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

https://medium.com/design-spot/cbde24ed2004

Мэтью Стендедж написал о применении неактивных кнопок [English].

Иногда лучше позволить пользователю ошибиться и получить подходящую обратную связь, чем не дать ему ошибиться.

Например, есть форма с обязательными полями и кнопка отправки формы, которая остаётся неактивной, пока пользователь не заполнит форму.

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

#form #button

Руни Госвами написала, как в Lyft упорядочили использование сегментированных контролов.

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

В Apple определяют Segmented Control как линейный набор из двух или более сегментов, которые работают как взаимоисключающие кнопки. Часто его используют для переключения различных представлений (например, отображение карты в формате схемы, снимков со спутника или гибридном).

В Material Design для навигации есть табы, а сегментированные Toggle Buttons используют для группировки кнопок и не относят к контролам выбора (среди которых только чекбоксы, радиокнопки и переключатели). Кнопки могут не быть взаимоисключающими.

Аудит выявил 14 разных сегментированных контролов в 10 продуктах Lyft. Они различались стилистически и семантически (для навигации и выбора). Компонент дизайн-системы оказался невостребованным из-за недостаточной гибкости.

— Добавили стилей: текст, иконка, текст с дополнительной информацией, когда работа с компонентом — основное действие;
— Показали, как новый компонент работает на существующих экранах;
— Для фильтрации и навигации решили использовать табы;
— Нарисовали схему принятия решения, когда какой контрол использовать (очень полезно);
— Сегментированный контрол решили использовать, когда вариантов для выбора от 2 до 5, они однородны и состоят из 1−2 слов.

https://ux.pub/kak-my-uluchshili-segmentirovannye-elementy-upravleniya-segmented-control/

Кроме эвристик Якоба Нильсена при создании дизайна можно ориентироваться и на принципы хорошего дизайна Дитера Рамса.

Эрик Дрейк поразмышлял о самом сложном для понимания принципе, о котором Рамс сказал так:

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

Честный дизайн:
— Новая штаб-квартира Vitsoe;
— Кассетная дека Braun C301. Сразу понятны её возможности;
— Раздел пользовательских настроек Google Now. Позволяет управлять работой алгоритмов.

Нечестный:
— Манипуляции антивируса McAfee, направляющие пользователя к продлению лицензии;
— Бесполезные уведомления от приложения Restaurant 2, которые нужны только для привлечения внимания.

#heuristic

Роман Шамин написал, что может сделать дизайнер, чтобы обеспечить 80% доступности экранных интерфейсов. Например:

— Почти всегда полезно иметь раздельные текстовые стили: Paragraph — покрупнее, со свободным интерлиньяжем, для набора текста и чтения; UI — помельче, с плотным интерлиньяжем, для интерфейсных элементов;
— Помните, что Contrast Ratio считается относительно фона, и когда вы помещаете текст на цветную плашку, контрастность снижается;
— Чтобы отделить менее важный текст от основного, вместо сильного изменения цвета или размера комбинируйте умеренное изменение цвета и размера. Также можно использовать курсивное или сжатое (Condensed) начертание;
— Дополняйте выделение элементов в ряду подобных чем-то кроме цвета: начертанием шрифта, контрастным графическим элементом, пиктограммой;
— Применяйте принцип «тексту — собственный этаж». Он может в любой момент занять больше места, чем было в макете, потому что пользователь увеличил шрифт в настройках ОС. Или из-за изменения текста и локализации;
— По возможности откажитесь от усечения текста многоточием или фейдом;
— Передавая разработчикам макеты с нетекстовыми контролами, указывайте, какой глагол экранная читалка должна прочитать незрячим людям для каждой пиктограммы.

https://teletype.in/@romanshamin/a11y-for-designers

Анна Кейли из Nielsen Norman Group написала о листбоксах и раскрывающихся списках: из чего состоят, как работают, когда их лучше использовать.

— Листбокс состоит из контейнера, списка вариантов для выбора, текстовой подписи. Пользователь может выбрать один или несколько вариантов, нажимая на них. Если вариантов много и размер листбокса небольшой, в контейнере может быть прокрутка;
— Типы: 1) С выбором одного варианта; 2) С выбором нескольких вариантов через нажатие Control или Command; 3) С чекбоксами; 4) С двумя контейнерами;
— Вариант с чекбоксами часто встречается в фильтрах интернет-магазинов;
— Вариант с двумя контейнерами иногда можно встретить, например, при настройке состава и порядка столбцов в таблице. Пользователи могут переносить элементы списка из одного контейнера в другой и менять их порядок;
— Листбоксы и раскрывающиеся списки используют, когда места мало, а вариантов для выбора больше 5;
— Листбоксы хорошо подходят для отдельных задач (см. выше) и если надо обратить внимание пользователя на основные варианты для выбора;
— С ними проще взаимодействовать, чем с раскрывающимися списками: часть вариантов можно выбрать сразу, остальные — после прокрутки контейнера. При прокрутке длинного и узкого раскрывающегося списка пользователь может случайно сдвинуть курсор в сторону и закрыть список;
— Минусы: они непривычны пользователям и занимают больше места, чем раскрывающиеся списки.

https://school.usabilitylab.ru/ulblog_8_2368/