Рекрутёр Дейв Фельдман рассказал, каким должно быть портфолио.

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

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

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

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

https://designpub.ru/7a05a381474c

Чем отличаются иконки «палец вверх», «сердце», «закладка» и «звезда», и что каждая значит по мнению большинства пользователей?

Вспомнил примеры использования этих метафор в интерфейсах и поделился своим мнением.

1. Они подходят, чтобы выделить объект в неком позитивном ключе:
— Мне нравится, что здесь написано;
— Это может мне пригодиться.

2. Выбор конкретной метафоры зависит от общей функциональности продукта и его тематики.

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

https://vandergrav.ru/thumb-up-heart-bookmark-star/

Евген Ешану рассказал об основных ошибках продуктовых дизайнеров.

1. Непонимание, как люди будут использовать продукт в реальной жизни.
2. Убеждённость в их логичности.
3. Вываливание на пользователя лишней информации. Ожидание, что он прочитает весь предложенный текст.
4. Инновации ради инноваций.
5. Изменение привычных паттернов взаимодействия при редизайне.
6. Неспособность спрашивать, зачем делается продукт, какая задача таким образом решается и другие важные вопросы.
7. Нежелание писать о продукте просто, для людей.
8. Добавление большого количества не ключевых возможностей.
9. Бездумная реализация пользовательских пожеланий.
10. Привлечение многих людей к созданию продукта. Огромная команда не способствуют оригинальности.
11. Убеждённость, что пользователь при взаимодействии с продуктом будет сосредоточен и сможет уделить ему достаточно времени.
12. Добавление на дорожную карту функций вместо бизнес-проблем, которые надо решить.
13. Отсутствие пользовательского тестирования.
14. Ожидание от пользователя машинной точности при работе с интерфейсом.
15. Моментальный переход к решению заявленной проблемы вместо попытки разобраться, правильная ли это проблема.
16. Непонимание того, что человеческое мышление быстро не меняется. Что было трудным для пользователя 20 лет назад, продолжает быть трудным сегодня.

«В реальности никто не протянет вам проблему в красивой и аккуратной упаковке. Её придётся обнаружить самому. Было бы слишком легко видеть только поверхностные изъяны и не копать глубже, чтобы решить настоящие проблемы», — Дон Норман.

https://vc.ru/design/55464

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

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

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

https://sherer.pro/blog/dizajn-dannyh-chast-1-chto-i-zachem/

Михаил Греков написал, как сделать удобнее таблицы, с помощью которых пользователи управляют данными (CRM, ERP и прочие системы).

В первой статье разбирается просмотр данных.

1. Рабочая таблица должна занимать максимум места на экране. Как вариант — опция «на весь экран».
2. Объединяйте данные. Если есть данные о фамилии, имени и отчестве, их целесообразно вывести в один столбец ФИО. Должность или роль в системе тоже можно присоединить к ФИО.
3. Бесконечная прокрутка и кнопка «Показать ещё» не подходят для отображения строк таблицы. Делайте постраничную навигацию. Это удобно и для коллективной работы с таблицей.
4. Показывайте по умолчанию больше строк на одной странице: 50, 100, 500.
5. Используйте цветовые индикаторы. Красить строку целиком стоит только при отклонении от нормы.
6. При наличии цветовых индикаторов полезно отображать легенду цветов.
7. Храните пользовательские настройки вида, не сбрасывайте их после окончания сеанса.
8. Связанные сущности (название организации может быть связано с карточкой организации) полезно делать ссылками на соответствующие карточки. Но если таких сущностей в строке много, выделите только полезные в работе.
9. Строка должна подсвечиваться при наведении курсора. Должна быть возможность выделить строку кликом на неё.
10. Нет ничего страшного при появлении горизонтальной прокрутки.
11. В некоторых случаях полезно маркировать просмотренные записи.
12. Должна быть настройка отображения столбцов с системными свойствами (ID, дата создания, автор, дата изменения).
13. Переход к просмотру записи удобно сделать по двойному клику.
14. Иногда удобен режим предпросмотра, когда по клику открывается не вся запись, а сводка по ней, как в Google Drive.

«Строка в таблице часто является прелюдией к просмотру полной информации по записи. На моей практике в 99% рабочих таблиц модальный режим просмотра уступал просмотру записи на отдельной странице».

https://designpub.ru/5ea60df37f12

Записи докладов с секции «Дизайн» конференции Dump-2018:

1. Сергей Абдульманов — Чем конкретно отличается понятный текст для интерфейса
youtube.com/watch?v=XrhxisJN_zQ

2. Александр Бурт — Колорпикеры
youtube.com/watch?v=xRlekzkuz4I

3. Александра Ермоленко — Проектирование дизайн-системы Рамблера
youtube.com/watch?v=ZxmcIpmenoY

4. Андрей Шапиро — Дизайнер в гостях у программиста и дата-сайентиста
youtube.com/watch?v=Nb99VQYBIRQ

5. Рушана Каюмова и Сергей Соловьев — Отказать в один клик
youtube.com/watch?v=oJ9nzjxapqA

6. Григорий Родионов — Проектирование интерфейсов в VR & AR. Практический опыт
youtube.com/watch?v=zZsrtal_KVA

7. Дмитрий Чернов — Обучение в дизайне. Как быть в тренде и стать специалистом, адекватным рынку
youtube.com/watch?v=HGMOZ7aCMH8

8. Антон Якубов-Цариков — Путь дизайнера
youtube.com/watch?v=Fo3l20K1ZeE

9. Дмитрий Трофимов — Как я женился на карте Екатеринбурга
youtube.com/watch?v=EkReIShwP9k

Все видео конференции в одном месте: https://habr.com/ru/company/it_people/blog/415527/

Кейт Моран с Ким Флаэрти из Nielsen Norman Group написали про ментальные модели.

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

«Одна из участниц исследования планировала отпуск. По её мнению, авиакомпании следят за поведением пользователя. Если он несколько раз ищет одну и ту же информацию, авиакомпании повышают цену на билет, потому что „они знают, что вы хотите его купить“.

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

https://vc.ru/design/56471

И ещё хороший материал по теме, который я публиковал ранее: «Ментальные модели в проектировании продукта».

https://www.cossa.ru/trends/142341/

Лакшми Мани написала о таком когнитивном искажении как гиперболическое дисконтирование (hyperbolic discounting).

Оно проявляется в склонности людей предпочитать пусть меньшие но мгновенные вознаграждения большим но получаемым некоторое время спустя. Большинство выберет 100 долларов сейчас, а не 120 через неделю.

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

Как снизить его влияние на наш выбор:
— Посочувствуйте себе в будущем. Если вы весь день собираетесь смотреть Netflix, а накопившиеся дела сделать завтра, представьте, в каком огне вы окажетесь завтра.
— Возьмите на себя обязательства заранее. Настройте автоматический перевод части дохода на сберегательный счёт. Подпишитесь на доставку здоровой еды.
— Разбивайте большие цели на посильные для выполнения задачи. Так вы сможете получать вознаграждения после выполнения каждой маленькой задачи, а не только в самом конце после достижения цели.

https://newochem.ru/psixologiya/giperbolicheskoe-diskontirovanie-pochemu-my-chasto-prinimaem-nevernye-resheniya/

Дмитрий Макаров написал, чем UX-писатель отличается от копирайтера.

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

https://sobakapav.ru/articles/ux-writer-difference

Саша Бизиков сделал первый видеовыпуск своего подкаста.

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

А вот отрывок про дизайн-школы:

«Отучившись в Британке 1,5 года и свалившись с истощением, ушла в свободное плавание. Сказала, что больше не вернусь в эту шарашкину контору, буду пить, есть, спать и гулять. Потом денег на Британку уже не было. Я решила продолжить образование и пошла в „Национальный институт дизайна“ в Москве. Он более чем оправдывает своё название, это полное дно. Может быть, сейчас что-то поменялось, я на это надеюсь, но сильно вряд ли».

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

Тема инклюзивности — доступности услуг и продуктов для слабовидящих, слабослышащих и других людей с особенностями — мало обсуждается в России.

Сегодня в 17:00 эксперт Сбербанка по инклюзивности Валерия Курмак поделится своими знаниями в подкасте «Нормально делай, нормально будет».

http://radio.mediametrics.ru/normalno_delaj/61086

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

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

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

Скиннер — наиболее яркий бихевиорист. Представители этого направления психологии считали, что поведение человека зависит от стимула и вознаграждения. Они изучали то, что можно непосредственно наблюдать — реакцию человека на окружение. И считали, что для контроля за поведением достаточно создать правильную „камеру“».

https://vandergrav.ru/the-scientists-who-make-apps-addictive/

Михаил Нозик рассказал о контрасте в вёрстке.

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

Легко можно смотреть на скорости 1,25.

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

Наташа Гермогентова написала о работе UX-редактора в «Яндекс-деньгах».

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

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

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

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

«Нам долгое время казалось, что для технических ошибок есть отличный заголовок „Что-то пошло не так“. Подходит для любых кейсов, указывает на факт ошибки, при этом в нём ни капли роботизированности. Но время и фидбэк показали: людей очень раздражает, когда „что-то идёт не так“. Что, спрашивают они, что именно?»

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

https://habr.com/ru/company/yamoney/blog/439186/

Евгений Яровой и Илья Федоренко рассказали, как заказчик может испортить отношения с дизайнером (2-й выпуск рубрики «Референт»).

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

2. Постановка задачи «сделать красивый сайт». Красота — составляющая результата, но не самоцель.

3. Изменение задачи в процессе работы, завуалированное под «я вам объяснял, а вы не поняли», «я представлял себе это иначе». Это может случиться после этапа аналитики, когда клиент осознаёт, что ему нужно немного не то, о чём он договорился с дизайнером изначально. Дизайнер придерживается изначальной постановки задачи, клиент тянет в сторону своих новых ожиданий.

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

5. Посыл «мы знаем, как надо». Даже если клиент пришёл с готовым прототипом, дизайнер должен понять логику работы продукта, почему выбраны те или иные решения.

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

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

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

Михаил Греков написал о добавлении и поиске данных в таблицах, с которыми работают.

Как помочь пользователю добавлять данные быстрее:

1. Добавить в продукт горячие клавиши. Они не должны перебивать горячие клавиши среды. Хорошо, если они совпадают с горячими клавишами из других продуктов пользователя.

2. Если данные достаточно однородны, пригодится возможность создать копию или создать на основе. В первом случае в ключевое поле добавится текст «Копия». Во втором — отобразится форма, в которую уже введены данные из основной записи.

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

4. Дать возможность одновременно добавить вторую запись, не закрывая форму добавления первой.

5. Дать возможность не возвращаться к таблице после добавления первой записи, а сразу добавить вторую. Например, с помощью кнопки «Сохранить и добавить новую».

6. Учитывать параметры поиска при добавлении записи. Если пользователь искал проект «Сайт города С» для исполнителя «Иванов», эти параметры могут быть заполнены в форме добавления нового проекта. Как в Jira.

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

Поиск:

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

2. Иногда пользователю для работы требуется всего несколько полей из расширенного поиска. Можно вынести их на панель основного поиска или дать пользователю настроить поля для основного поиска.

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

4. Расширенный поиск нужен не всем: руководителям и тем, кто ищет информацию по запросам извне (колцентры, секретари). Расширенный поиск хорош в связке с сохранёнными поисковыми запросами.

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

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

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

8. Должна быть возможность отключить фильтр одним нажатием.

9. При выборе параметров поиска из раскрывающегося списка бывает полезен множественный выбор и возможность выбрать и снять все варианты из списка. Например, так можно найти записи всех цветов кроме жёлтого.

https://designpub.ru/ed9675d3136e

Алита Джойс написала о всплывающих подсказках (tooltips).

Всплывающая подсказка — это краткое сообщение, которое отображается при наведении курсора на элемент интерфейса (или фокусировке на нём с помощью клавиатуры).

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

2. Подсказка должна быть краткой.

3. Подсказка должна быть полезной. Если на кнопке написано «Add new line», в подсказке к ней нет смысла писать «Add new line».

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

5. Чтобы было ясно, с каким элементом связана подсказка, у неё должна быть стрелка, указывающая на этот элемент.

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

7. У иконок без подписей должны быть всплывающие подсказки.

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

https://ux.pub/rukovodstvo-po-vsplyvayushhim-podskazkam-tooltips/

Игорь Васильев написал о проектировании страниц-заглушек.

Пользователь видит пустой экран, когда:

1. Что-то сломалось. Надо продумать все причины ошибок (нет связи, завис сервер, сбой в работе модуля и так далее) и для каждой подготовить текст о том, что могло произойти и что делать пользователю.

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

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

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

Общие рекомендации:
1. Предложите действие: наполнить страницу, посмотреть аналоги, сообщить о проблеме.
2. Добавьте иллюстрацию, чтобы разрядить обстановку.
3. Будьте краткими.
4. Текст сообщения начинайте с цели: «Чтобы найти любимые места, перейдите в список ресторанов».
5. Говорите по-человечески: пишите «На сегодня ещё нет планов» вместо «13.02.2019 ничего нет».
6. Добавьте немного юмора или жаргона, если продукт нацелен на узкую аудиторию.
7. Язык должен соответствовать платформе. В мобильном приложении — tap, в десктопном — click.

https://vc.ru/design/58918

В «Сибириксе» написали о Турбостраницах Яндекса и технологии Accelerated Mobile Pages, которую поддерживает Гугл. Это отдельные версии страниц, которые моментально открываются из результатов поиска.

Плюсы: быстрая загрузка, высокие позиции в поиске, место в «карусели» в гугловом поиске.

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

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

https://blog.sibirix.ru/2019/02/19/amp-pages/