Михаил Греков написал об управлении табличными данными и их экспорте.

1. Действия с одной записью:
— Основное действие можно выполнять двойным кликом на строку, а полный список действий показывать по нажатию правой кнопки мыши. Не годится для тач-интерфейсов. Пример: веб-версия Google Drive.
— Можно показывать кнопку основного действия, а дополнительные прятать в кебаб-меню. Если поставить кебаб в начале строки, пользователь сразу его заметит при любом количестве столбцов. Пример: панель управления сайтом на Битриксе.
— Кнопки действий можно показывать при наведении курсора на строку. Минусы: строки мигают, кнопки закрывают часть информации, не годится для тач-интерфейсов. Пример: Gmail.

2. Действия с несколькими выделенными записями:
— Список действий можно показывать над таблицей (всегда или когда выбраны записи). Пример: Wordpress.
— Список действий для всех выделенных записей можно показывать по нажатию правой кнопки мыши. Минус: пользователю надо как-то рассказать об этом приёме.
— Выделенные записи можно перетаскивать на нужные действия. Минус: экзотика и для пользователей, и для разработчиков. Пример: Яндекс-почта.

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

4. При выборе нескольких записей удобны:
— Выбор интервала. Пользователь выбирает 1-ю строку, зажимает Shift и выбирает последнюю строку в интервале. Пример: Gmail.
— Выбор всех строк. Важно, чтобы пользователь понимал, выбраны вообще все записи или все записи на текущей странице.

5. Редактирование данных непосредственно в строке:
— Полезно, когда выводятся часто сменяемые свойства (приоритет, статус, ответственный менеджер).
— Удобно, если при изменении данных не надо вводить причину изменения и т.п.
— Требует подсказки: какие данные можно изменить в строке, как перейти к редактированию, как сохранить изменения. Понятнее всего — иконка карандаша для изменения и галка для сохранения.

6. Пользовательский экспорт данных (данные экспортируются для работы с ними в другой системе или передачи другому человеку):
— Для такого экспорта не годится формат CSV.
— XLS-файл надо готовить для дальнейшей работы с ним: соблюдать ширины столбцов, форматы данных, выделение шапки и т.п.
— Файл надо называть осмысленно с указанием даты и времени экспорта.
— Дату и время экспорта желательно продублировать перед таблицей на случай отправки её на печать.

https://designpub.ru/110fe6de533f

Илья Рудерман создал памятку с рекомендациями по оформлению текста для дизайнеров и редакторов.

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

Документ 2014 года не теряет актуальности:
— Отдельными слайдами: https://www.dropbox.com/s/d12ffcil0ttm06a/ria-rules.pdf
— В виде плаката: https://www.dropbox.com/s/hj0l185ji3kyxc5/ria-rules-poster.pdf

Забавная картинка о том, как называть разные иконки меню.

Иногда бывает полезно уточнить, о каком меню говорит собеседник. Например, в верхней части интерфейса Gmail есть и бургер, и бенто, и кебаб-меню.

Ваня Соловьёв написал о подходе к мотивированию и развитию дизайнеров в DocDoc.

Продуктовый дизайнер может находиться на одном из 9 уровней с определёнными:
1. Ролью и обязанностями.
2. Скилами и требованиями. Каждый новый уровень включает скилы предыдущих.
3. Условиями перехода на новый уровень.
4. Книгами для прочтения (теоретическая база).

Дизайнер получает баллы за достижение поставленных метрик. Задача с метрикой «сделать имиджевую страницу» может оцениваться 1–2 балла, т.к. её сложно измерить в деньгах. А задача «достигнуть конверсии в заявку 12%» — в 4–5 баллов.

Подать заявку на повышение уровня можно 2 раза в год. Дизайнер проводит встречу с участием HR-директора, продуктового директора и директора по дизайну, где выступает с презентацией своего прогресса.

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

https://designpub.ru/8f0cdd5612ea

В компании «СКБ Контур» описали портрет продуктового проектировщика интерфейсов.

— Кто это.
— Идеальный процесс работы над задачей.
— Требования к прототипам и работе с ними.
— Матчасть: какие книги надо прочесть и принципы понять.
— Должен ли прорабатывать интерфейсный текст (спойлер: это его зона ответственности).
— Знания и навыки в дизайне и вёрстке, исследовании пользователей, веб-технологиях и статистике.
— Инструментарий (Sketch или Figma для интерфейсов).
— Требования по самоорганизации, саморазвитию и передаче опыта.
— Взаимодействие в команде.
— Развитие продукта.
— Этика.

Пример нескольких высокоуровневых характеристик проектировщика:

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

Интересное из раздела «Этика»:

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

https://guides.kontur.ru/principles/uidesigner/

Алексей Бородкин рассказал о методике создания текста для цифровых продуктов.

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

Если на старте ничего нет, готовят контентное задание, включающее ответы на вопросы:
— Что мы хотим сказать пользователю;
— Где и в каком контексте;
— Как мы это рассказываем (логическое ударение, стиль, голос);
— Ценные указания для копирайтера (например, «здесь хорошо бы перечислить 4 преимущества продукта»).

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

Когда проект готов, составляют контентный гайд, похожий на контентное задание. Он нужен, чтобы будущие копирайтеры ничего не испортили.

https://medium.com/советы-по-проектированию-интерфейсов/18e27c85e066

Конспект ещё одного доклада с прошедшего UX-марафона — Марина Степанова рассказала, как писать текст для тех, кто не читает.

Пользователь не читает интерфейсный текст, когда:
1. Пользователь — ребёнок.
2. Текст на незнакомом языке.
3. Нет времени что-либо прочитать (за рулём).

Как написать:
1. Убедитесь, что текст помогает достичь цели.
2. Сократите объём (даже если получается слишком сухо).
3. Говорите с пользователем на одном языке (общайтесь с представителями вашей аудитории, тестируйте текст).
4. Не путайте разные символы (ее → её).

Также в конспекте: как оформить, как не убить мотивацию к чтению, как обойтись без текста.

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

Когда пользователь получает порцию текста, он ожидает, что быстро всё прочитает и будет свободен. С каждой новой порцией мотивация падает (сколько там ещё?). Сформируйте ожидание — заранее предупредите о будущем количестве порций, например, с помощью прогресс-бара. Неизвестность пугает больше, чем количество».

https://vandergrav.ru/writing-for-users-who-dont-read/

Наталья Хродская написала о работе с сетками в вебе.

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

Сначала дизайнер определяет структуру макета и уже потом создаёт под неё сетку.

Виды сеток:
1. Блочная или манускриптная — стандартизированный прямоугольник, который содержит контент. Например, страница книги или статья блога;
2. Колоночная — имеет в своей структуре колонки;
3. Модульная — имеет как вертикальное членение, так и горизонтальное. Модуль — блок размером с заданное количество столбцов и строк;
4. Иерархическая — интуитивное размещение блоков с фокусом на пропорциях и визуальном весе элементов.

Также в статье:
— Что такое базовая сетка. Преимущества 8-пиксельной базовой сетки;
— Понятия hard и soft сеток;
— Вертикальный ритм и разделение макета на строки;
— Преимущества 12-колоночной сетки и работа с ней в адаптивном дизайне.

Сетка должна помогать в дизайне. Не надо всё беспрекословно по ней выравнивать. Если какой-то блок никак не помещается в сетку, его можно не подстраивать.

https://medium.com/design-spot/410cfc1df74d

Инесса Шилло написала о профессиональном выгорании дизайнера.

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

Предпосылки к выгоранию в дизайнерской работе:
1. Работа под NDA.
2. Ощущение, что вы — чьи-то руки. Например, когда артдиректор (или в запущенном случае — клиент) говорит, как делать.
3. Работа над чужими концепциями. Опять же, когда артдиректор задаёт идею, а дизайнер её прорабатывает.
4. Проекты в стол.
5. Переработки.
6. Мысль о несерьёзности работы. Когда студия дизайна кажется менее серьёзным бизнесом, чем завод или заправка.
7. Финансовый потолок. Чтобы каждый год удваивать или утраивать доход, надо становиться управленцем в виде артдиректора или создавать своё агентство.
8. Отчуждённость труда. Ваш дизайн — деталь для машины, которая состоит из кучи других деталей и на которой зарабатывает другой человек (заказчик).

Если перечисленное выше есть в вашей работе, будьте внимательны.

https://designpub.ru/588259b30142

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

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

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

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

https://designpub.ru/a3ea75f4a129

Графдизайнер Мэрилин Во написала, как фриланс превратить в бизнес.

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

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

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

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

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

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

4. Упакуйте предложение: опишите процесс, итоговые артефакты, насколько вы готовы менять это по желанию клиентов.

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

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

7. Систематизируйте процессы, готовьте чеклисты.

https://spark.ru/startup/redaktsiya-spark-ru/blog/47689/

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

1. Возможность в форме заказа ввести номер телефона в любом формате, даже буквами. С телефоном разберётся менеджер, а если не разберётся или телефон не указан, связаться с клиентом можно по почте.

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

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

4. В письме «Восстановление пароля» можно написать номер телефона для связи. Возможно, клиенту не нужен личный кабинет (и пароль от него), чтобы решить свою задачу.

5. Не стоит с помощью КЛАДРа приводить адрес к нормализованной форме во время ввода. Лучше использовать его для подсказки, когда улицы с таким названием есть в разных районах города или с таким названием есть и проезд, и переулок.

6. Если вам нужно знать ближайшее к адресу доставки метро, не спрашивайте пользователя, а берите его по API у Яндекс-карт.

7. Если пользователь ввёл в поле поиска n символов и получил несколько подсказок для поисковых запросов, а затем ввёл ещё один символ и не получил ни одной подсказки, возможно, произошла опечатка. В этом случае стоит показывать старые подсказки, актуальные для n символов.

https://habr.com/ru/company/mosigra/blog/256601/

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

В экспериментальных мастерских студенты работали под присмотром мастеров — передовых деятелей дизайна или искусства. Гропиус пригласил преподавать Пауля Клее и Василия Кандинского, занятия в мастерской по металлу вели венгерский авангардист Ласло Мохой-Надь и известный дизайнер Марианна Брандт. Гюнта Штольц была преподавателем текстильного отделения.

Баухаус существовал всего 14 лет во время Веймарской республики в Германии. Вооружённая полиция в апреле 1933 года разгромила здание, и школа была закрыта.

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

Адил Сиддики написал, как улучшить опыт мобильных платежей.

1. Не размещайте подписи к полям в плейсхолдерах.
2. Если пользователь должен заполнить поле, автоматически перемещайте фокус на это поле.
3. Если в поле надо вводить только цифры, отображайте цифровую клавиатуру.
4. Как только пользователь заполнил поле, перемещайте фокус на следующее.
5. Размещайте кнопку платежа на видном месте. Стоит учесть, что при заполнении полей формы клавиатура может закрывать часть экрана.
6. Добавьте иконки безопасности и надписи вроде «100% Secure».
7. Если поле заполнено некорректно, показывайте сообщение об ошибке сразу после его заполнения.
8. После того как пользователь нажимает «Заплатить», моментально давайте обратную связь: блокируйте кнопку от дальнейших нажатий и показывайте на ней сообщение об обработке запроса или показывайте следующий экран.
9. Если платёж не прошёл, чётко сообщите об этом и дайте возможность повторить платёж или обратиться за помощью.
10. Пишите на кнопке платежа, что произойдёт после нажатия: «Pay $100», «Save card & pay $100».
11. Если платёж прошёл, наглядно сообщите об этом. И только потом показывайте остальные детали.
12. Дайте пользователю возможность быстро очистить поле.

— Перевод: https://ux.pub/rekomendatsii-dlya-uluchsheniya-opyta-tsifrovyh-platezhey/
— Картинки с примерами лучше смотреть в оригинальной статье: http://adilsiddiqui.in/x/designing-for-digital-payments

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

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

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

«На большом кегле [заголовок акции] не влезет ну вообще никак. Если сделать верхнюю оранжевую панель резиновой и позволить ему в большом кегле занимать несколько строк, то верхний блок отъест половину экрана даже на больших айфонах, а про 4S вообще можно будет не вспоминать. Это не дело.

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

Так, а можно ж опять полностью убрать картинки и всё место занять заголовком».

https://habr.com/ru/company/dodopizzaio/blog/452226/

Лиза Мария Мартин предложила шаблон для аудита структуры сайта, который может пригодиться при редизайне или поиске проблем текущей структуры.

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

Указанные выше типы элементов закодированы цветом.

По каждой странице отображаются:
— ID;
— URL;
— Название пункта меню или текст ссылки;
— Заголовок страницы, который видит пользователь;
— Заголовок страницы, указанный в метаданных;
— Наименование раздела;
— Примечания.

#audit

Ралука Будиу из Nielsen Norman Group написала, как сделать удобный чат с клиентами.

Кнопка чата:
1. Размещайте ссылку на чат на странице «Контакты» и на странице товара. Иногда покупателям нужна дополнительная информация о товаре.
2. Не оставляйте плавающую кнопку единственным способом открыть чат.
3. Эта кнопка должна выделяться и располагаться в правом нижнем углу экрана.
4. Пишите, что кнопка открывает чат. Если написать «Задать вопрос», пользователь может проигнорировать её, решив, что кнопка открывает форму обратной связи.

Сам чат:
5. Если клиент пишет со смартфона, ожидание должно быть минимальным, так как ему сложнее заниматься чем-то ещё параллельно.
6. Сообщайте пользователю, через какое время он получит ответ.
7. Отображайте надпись, что оператор пишет сообщение, но не показывайте её слишком долго. Если подготовка ответа затянется, напишите клиенту, что оператор ещё работает над вопросом.
8. Визуально разделяйте сообщения от разных участников чата. Например, свои сообщения, ответы оператора и автоматические ответы.
9. Предусмотрите проблемы с подключением к сети. Если пользователь возобновляет прерванную сессию, прогресс работы над его вопросом должен сохраниться. Можно заранее спросить у клиента номер телефона для продолжения диалога в офлайне.
10. Не заставляйте клиента повторять то, что он уже сообщил ранее.
11. Оператор может переходить к конкретике сразу и писать «Привет! Чем могу помочь?» вместо «Привет! Как дела?». Совет актуален для стран, где не вежливо сразу говорить о деле.
12. Предупреждайте, если с пользователем будет общаться бот.
13. Оператор не должен злоупотреблять шаблонными ответами. Люди любят живое и не слишком формальное общение.
14. Ответы на типовые вопросы должны появляться максимально быстро.
15. Не отправляйте клиента читать те или иные страницы сайта. Уточняйте, чего он хочет, и давайте конкретные ответы. Если пользователь решился на чат, возможно, найденные на сайте ответы его не удовлетворили.

Полезные возможности чата:
16. Загрузка в чат документов.
17. Сохранение всего диалога в отдельный файл.

https://vc.ru/design/69554

Анна Кочеткова рассказала, как писать хороший интерфейсный текст с примерами из банковской сферы.

Продумывайте контент на этапе проектирования, так как он может повлиять на дизайн.

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

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

В 1997 году Якоб Нильсен тестировал текст про достопримечательности Небраски:
— Из базового варианта убрали лишние подробности и цифры, читаемость выросла на 58%.
— Текст не трогали, но достопримечательности собрали в ненумерованный список, +47%.
— В базовом варианте сложные слова заменили простыми, +27%.
— Объединение этих вариантов дало увеличение читаемости на 120% (в 2,2 раза).

В статье много примеров понятных и простых формулировок для банковской сферы.

https://medium.com/nancypong/6d66fa378a1f

60% необходимых знаний вы получаете за первые 40% срока, запланированного для проекта, к этому моменту проект выполнен на 25%. Начальство или заказчик может сказать следующее: «Вы потратили 40% времени, а сделали 25% проекта. Дело плохо».

При итеративной разработке важно в самом начале накопить знания. Чтобы объяснить полезность этой работы, можно взять список рисков, составленный в самом начале: малоизученные технологии, интеграции со сторонними системами и всё то, что может принести проблемы в процессе разработки. И показать, как эти риски были уменьшены или устранены.

Из книги Джо Мараско «IT-проекты: фронтовые очерки». Джо — один из руководителей компании Rational Software, где придумали UML.

Илья Бирман написал про иконки «ленточка» (закладка), «сердечко», «поднятый большой палец» и «звёздочка».

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

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

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

Звёздочка — это джокер. Она может значить что угодно и работать как угодно.

Смысл этих символов и наши ожидания от них меняются с развитием популярных продуктов».

https://bureau.ru/soviet/20190611/