96. Выравнивание в таблице и 404fest 2018

В этом выпуске: записи докладов с 404fest 2018, статьи о портфолио, формах, с которыми пользователи работают постоянно, тёмных паттернах, промышленном дизайне, выравнивании данных в таблице, как стать дизайнером лучшей в мире студии.

Лучшие доклады с 404fest 2018

Опубликованы записи лучших докладов с 404fest 2018:

  1. Антон Шеин, арт-директор, Яндекс Поиск — Мечтать вредно;
  2. Евгений Кот, frontend teamlead, Wrike — Flutter против мобильной Инквизиции;
  3. Михаил Танский, дизайнер и cо-основатель, Хантфлоу — Дорогой UX: экономим на всём. Несколько историй про интерфейс и бабло;
  4. Денис Пушкин, head of product marketing, Skyeng — Как заработать миллиард;
  5. Владимир Маринович, ex-CEO GetTaxi, основатель бизнес-школы Вверх — Типология отмазок и способы борьбы с ними;
  6. Сергей Котырев, директор, 1C-UMI — Мой путь предпринимателя и менеджера. Период зрелости;
  7. Евгений Казначеев, head of product, Ecwid — Как сделать тайм-менеджмент, если ты ленивая безвольная скотина;
  8. Александр Ковальский, design director, CreativePeople — Дизайн-прокачка: как мы качаем дизайнеров в агентстве;
  9. Самвел Аветисян, ex-главный маркетолог Тинькофф, основатель АрхИдея — Тренды потребления в эпоху перепостмодернизма;
  10. Евгений Романовский, руководитель проектов, Собака Павлова — Добро пожаловать в мир сложных интерфейсов.

Все видео вместе в альбоме ВК и посте на Хабре (с описаниями).

(Самая популярная ссылка в этой подборке, если судить по количеству лайков в ВК.)

Дизайнерские портфолио

Влияние технологических компаний на дизайнерские портфолио — краткий перевод-пересказ статьи «The Death of Design Portfolios». 5 минут английского текста → 2 минуты русского.

Формы, с которыми работают постоянно

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

Компоновка:

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

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

Редактирование и просмотр:

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

Автосохранение:

  • Если можете, делайте автосохранение, но только для всех форм системы сразу;
  • Сохраняйте данные при переходе от поля к полю и при бездействии пользователя в течение 3−5 секунд. Он может долго заполнять некоторые большие поля;
  • Регулярно сообщайте пользователю, что данные сохранены;
  • Если можете, сохраняйте версии документов. Если это сложно, дайте пользователю возможность найти прежние данные для конкретного поля;
  • Если автосохранения нет, не делайте короткие рабочие сессии и предупреждайте пользователя при закрытии несохранённой формы.

Поля:

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

Подсказки к полям:

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

Автоформатирование:

  • Отделяйте пробелами разряды чисел;
  • Разделяйте номера документов так, как они выводятся в конкретном документе, чтобы проще было сверять;
  • Принимайте за разделитель дробного числа и запятую, и точку;
  • Если в поле с номером телефона предустановлено +7 или код страны находится в отдельном поле, учтите, что пользователь может скопировать имеющийся номер телефона и вставить его целиком.

Черновики:

  • Если есть обязательные поля, должна быть возможность сохранить форму в любой момент. Пусть создаётся черновик;
  • Отделяйте черновики от рабочих данных, дайте возможность найти черновики по статусу.

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

Изображения и файлы:

  • Автоматически обрабатывайте картинки так, чтобы они подходили под требования (сжатие, кадрирование, изменение формата), не грузите пользователя некритичными требованиями к загружаемым картинкам;
  • Дайте возможность загрузить файл перетаскиванием, вставить из буфера обмена;
  • Поддерживайте загрузку сразу нескольких файлов.

Типы тёмных паттернов

Дизайнер Лили написала о 12 типах тёмных паттернов:

  1. Завлечь и переключить. У пользователя нет уведомлений, но Фейсбук показывает, что они есть, когда тот не залогинен;
  2. Заставить испытывать вину или стыд. 2 кнопки: «Скачать буклет о здоровом питании» и «Нет, спасибо, мне плевать на своё здоровье»;
  3. Замаскировать рекламный баннер. На баннере может быть изображено содержимое или элементы навигации, которые ожидает увидеть пользователь;
  4. Затруднять отмену подписки. Когда заканчивается подписка, деньги списываются с привязанной карты с минимальным уведомлением или вовсе без него;
  5. Собирать контакты друзей и спамить им от вашего лица. Как LinkedIn;
  6. Отвлекать внимание. Если не снять флаги с малозаметных чекбоксов при обновлении Скайпа, можно сделать Bing поиском по умолчанию, а MSN — домашней страницей;
  7. Затруднять сравнение цен. Например, одни и те же яблоки в упаковках и на развес;
  8. Получать пользовательских данных больше, чем требует задача. Мессенджер Фейсбука получает доступ к контактам в телефоне не только для того, чтобы вы добавили их в Мессенджере;
  9. Упрощать пользователям желательные (для вас) действия и затруднять нежелательные. Попробуйте удалить свой профиль на Фейсбуке;
  10. Формулировки с подвохом. Кажется, что ставя флаг вы отказываетесь от рассылки, а на самом деле наоборот на неё соглашаетесь.

Запрещено в Великобритании:

  1. Скрывать полную стоимость. На последнем шаге оформления стоимость заказа немного увеличивается: появляется информация о доставке или дополнительном сборе;
  2. Добавлять в корзину товар или услугу по умолчанию. Например, страховка при покупке билетов на самолёт.

Дизайн «Симкомата X»

Илья Александров написал о дизайне предсерийного прототипа «Симкомата Х»:

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

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

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

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

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

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

Выравнивание данных в таблице

Михаил Озорнин написал о выравнивании данных в таблице. Это не пересказ Мильчина, правила основаны на опыте Михаила:

  1. По умолчанию всё выравнивайте по левому краю. Затем меняйте выравнивание нетекстовых данных;
  2. Числа — по правому краю. Числами считаем то, что имеет смысл сравнивать друг с другом. Инвентарные номера, индексы, номера паспортов, IP-адреса — не считаем числами;
  3. Диапазоны — по разделителю. Примеры пар чисел, написанных через разделитель: 1…15, 1—15, 1 / 15, 1 из 15. Разделитель становится для них осью;
  4. Значки — по центру. Значки — это отдельные символы (плюс, минус), пиктограммы, эмодзи. Если в такой колонке оказывается текст вроде «нет данных», его выравнивайте тоже по центру;
  5. Для чисел используйте моноширинные шрифты. Так числа вроде 1113 и 3800 будут совпадать по разрядам. В некоторых шрифтах есть и пропорциональные цифры, и моноширинные, но их надо специально включать.

Подписчики обсудили и дополнили рекомендации.

Стать дизайнером в лучшей студии

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

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

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

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

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

4. Обращайтесь в студии, в которых мечтаете работать. Многие из них готовы к удалённому сотрудничеству.

Подписчики обсудили эти советы.

Конструкция «топ-N»

Иногда авторы используют конструкцию «топ-N», чтобы обозначить конкретное место в том или ином рейтинге. То есть не рейтинг в целом («Топ-100 дизайн-студий России») или значимый сегмент этого рейтинга («Топ-10 дизайн-студий России»), а своё конкретное место в нём.

  • «Мы входим в топ-26 в рейтинге дизайн-студий» → «Мы занимаем 26-е место в рейтинге дизайн-студий»;
  • «Статья заняла топ-1 место в Яндексе» → «Статья заняла 1-е место в Яндексе».

(Заметка из моего личного телеграм-канала «Френч-пресс».)