Upd. Пока нашли

Я руковожу группой интерфейсных дизайнеров в Positive Technologies и ищу в нашу команду двух человек, чтобы делать корпоративные B2B-приложения.

Чем мы занимаемся

Мы делаем корпоративные продукты для специалистов по информационной безопасности («ибэшников»). Вы, возможно, про нас не слышали, но в России нет ни одного ибэшника, который бы нас не знал. Некоторые наши продукты хорошие, некоторые — отличные; наш WAF попадал в магический квадрант Гартнера (это круто), наша SIEM-система — лидер российского рынка SIEM.

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

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

Многие продакт-оунеры хотят всего этого, они на нашей стороне.

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

Задачи, которыми придется заниматься

Разбирать сложные системы и создавать для них элегантные решения.

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

Создавать интерфейсы B2B-продуктов: длинные формы, панели администрирования, конструкторы алгоритмов; определять внешний вид дашбордов, графиков, отчетов.

При необходимости — создавать прототипы, тестировать их на пользователях или на команде разработки.

Если захотите — принимать участие в обновлении look and feel нашего ui kit. Мы делаем ему фейслифтинг и обновляем лейауты страниц.

Наш дизайнер

Имеет опыт проектирования интерфейсов CRM-систем, систем документооборота, промышленных или других подобных систем.

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

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

Готов проверять свои гипотезы и макеты коридорным тестированием, анкетами, может провести юзабилити-тестирование.

Обладает вкусом и чувством эстетики. Считает, что удобство, эффективность и красота могут сочетаться в одном продукте.

О команде

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

Работаем в Скетче, возможно будем переезжать на Фигму, пробуем ее.

Есть свой ui kit, своя база ui-компонентов на Angular и некоторое количество гайдлайнов и паттернов использования.

Фронтендеры и бэкендеры, которые не говорят «ой, это невозможно».

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

Если вам интересно и вы узнали себя хотя бы наполовину, напишите о себе:
mozornin@ptsecurity.com или в телеграм: @mikeozornin

Коллекция необычного интерфейсного синтаксиса

В интерфейсах есть определенный интерфейсный синтаксис для кнопок, ссылок, радиокнопок и прочего.

Но есть Яндекс-драйв, который в своих обновлениях пишет не всегда по нему. Да что уж говорить, почти никогда по нему:

Правильно, конечно, не «Кашкай», а «Кашкать»

Мои фавориты — «Ох» и «Так-так-так».

Upd. Добавлены 20 янв 2020:

UPD. После твиттер-шторма (https://twitter.com/mikeozornin/status/1222615775837671427) мне несколько людей прислали картинок в коллекцию.

Александр Сарычев:

Лида Овчинникова:

Дизайнер из Казани Руслан Фатихов instagram.com/fuzlan.

Все эти и будущие картинки в коллекции в Скраппе: scrapp.me/@mike.ozornin/tags/серия: синтаксис яндекс-драйва

Я старался скриншотить все, что попадалось, но если у вас есть ещё, пришлите пожалуйста? Или вдруг прочитает кто из Яндекс-драйва, пришлите в коллекцию? mike.ozornin@gmail.com.

Присылайте вместе с исходником файла его превью в виде картинки или пдф-файла.

Аналитики рисуют схемы в Visio и собирают майндмэпы в Mindjet’е, проектный менеджер ведет диаграмму Ганта в MS Project, дизайнеры делают макеты в Скетче. У каждого своя программа.

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

Но если послать письмом или выложить в вики только исходник Visio, Mindjet’а или Скетча, то адресату будет неудобно:

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

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

Добавляю картинку или пдф-файл

Позаботьтесь об удобстве собеседника. Именно забота, а не всякие «looking forward to your reply» — основа всякой этой самой переписки.

Зачем писать в начале письма +mozornin и прочие заклинания

Этот пост актуален для тех, кто работает в больших компаниях (100+ человек) и у кого много длинной переписки в почте. Если коллег у вас двое-трое, то пост вряд ли будет полезным.

В чем проблема

Революция слака до меня ещё не дошла, у меня всё ещё много рабочей почты, — на работе это основной способ коммуникации.

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

Понять кто когда кого добавил — невозможно

Возникают вечные вопросы:

• А Вася тут есть? О, есть, — отлично, а давно? Кто и когда его добавил?
• Алярм! В переписке представитель клиента, сколько он уже с нами? Какой баклан его добавил?
• Так, а почему Алена не отвечает? Как её нет? Куда она пропала, была же?

Решение

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

Решение: писать +mozornin, если добавляем его к переписке, и −mozornin, если убираем

Это добавление полезно всем:

• участникам — строка +mozornin явно говорит: изменился список участников, будьте внимательны
• добавляемому — в этот момент ему расскажут, что от него хотят

Правило простое и очевидное, вот как его применять:

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

Предлагаю всем, кому показалось полезно, начать применять прием

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

Upd: Игорь в комментариях справедливо напомнил, что Джимейл это умеет. Вот как выглядит:

Зал славы

Предлагаю записать те компании, кто молодец и пишет так:

1. Яндекс

Если вы в компании, студии или бюро используете, напишите любым удобным способом, я вас добавлю.

TL;DR: Используйте в почте минимум форматирования, оно всё сломается

О чем речь

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

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

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

— Бдыщь!

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

Почему так происходит

Все это происходит из-за разных почтовых программ. Даже если упростить всё до ситуации, что письма отправляются только внутри одной компании, у которой почтовый сервер Microsoft Exchange и на всех компьютерах с Microsoft Windows установлен Microsoft Outlook, то будет как-то так:

Это я написал только почтовые программы, которыми сами хотя бы раз пользовался. Представьте, как на самом деле?

Ещё стоит учитывать, что Outlook для виндоуза, мака, браузера, андроида и айфона — это пять разных программ, которые показывают письма по-своему.

Что делать

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

Вот шпаргалка:

Вот ещё Илью Бирмана почитайте: Вёрстка неформатированного текста

Коротко: не посылайте ссылок без комментариев

Не знаю как у вас, но у меня дофига чатов по работе (да и не только по работе). И вот такое вот очень раздражает:

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

Проблема 1: непонятно, что по ссылке

По урлу не всегда понятно, что там. Хорошо, если урлы говорящие и можно хотя бы примерно понять, что там:

Проблема 2: ссылка без комментария часто опасна

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

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

Чтобы собеседники не думали, что вас взломали, добавляйте комментарий.

Проблема 3: непонятно, зачем это смотреть

Даже если человек ткнет в ссылку, неясно, что хотел сказать автор. Вот, например, как меняется ссылка в зависимости от комментария.

mikeozornin.ru/blog/all/share-and-shame

• Ребята, прочитайте, пожалуйста. С понедельника за неправильные ссылки начисляется −5 баллов в карму.
• Игорян, смотри. Вот ведь бывают фрики, лучше бы делом занялись.
• Помнишь, я тебе говорил про говношаринг? Вот что я имел ввиду.
• FYI: Я пост даже не читал, но там что-то про этикет, вдруг тебе в подборку подойдет.

artlebedev.ru/laws-of-the-future

• Зацени какая красота.
• И это называют дизайном. Да я так тоже за сто тысяч смогу.
• Смотри, брутализм может выглядеть не уродски. Давай попробуем вернуться в проекте ХХХ к варианту с брутализмом?
• Посмотри на проект внимательно, с виду полное отсутствие дизайна, а на самом деле со всеми дизайн-правилами все хорошо. Изучи, пожалуйста, проект, разбери на запчасти и примеры, примеры микроверстки сохрани на общую доску пинтереста.

Проблема 4: шарят, не читая

Часто к ссылке без комментария добавляется то, что посылающий ссылку статью не читал. В итоге получается такой диалог:
— ux.pub/podborka-sketch-plaginov-dlya-navedeniya-poryadka-v-vashem-dizajne/
— О, какие посоветуешь оттуда?
— Не знаю, я не смотрел
— ¯\_(ツ)_/¯

Чтобы такого не было, я всегда явно пишу, если ссылку не читал.

На что ещё обратить внимание

Если не знаете, что написать в комментарии к ссылке, то так и напишите: «Я детально не вчитывался, но мне показалось, что тебе может быть интересно».

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

Саму ссылку и комментарий лучше послать двумя разными сообщениями. Вашему собеседнику так будет удобней скопировать ссылку. Из отдельного сообщения её получить обычно проще, чем вырезать из сообщения.

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

Иногда бывают и проблемы. Например, вот так выглядит телеграм-канал Сергея Бутрия. Я уже боюсь его открывать.

И не стоит забывать главное правило вот таких умных, как я:

Каналы в телеграме — это хорошо, но при плохом самочувствии лучше обратиться ко врачу

Расскажу об одном простом принципе в информационном дизайне и дизайне вообще

ТАСС сделало интерактивный рассказ про дирижабль «Италия»:

Не собираясь оценивать их рассказ, я расскажу об одном моменте рассказа.

На странице есть схема устройства дирижабля:

Все детали скрыты за красными точечками, нужно навести мышку, чтобы узнать что это за деталь. Чтобы посетители справились, пришлось даже сделать мини-онбординг (↑ справка). Я бы предположил, что он не очень помогает.

Но даже те, кто по каким-то причинам знают, что делать, будут мучиться: навел — прочитал — навел — забыл, что только что было — навел — прочитал. Это неудобно, желание изучать схему почти сразу пропадает.

Лучше сразу всё подписать:

Особенно глупо точки смотрятся на этой фотографии:

Чтобы не заставлять читателя страдать, есть простое правило:

Если можно не прятать, лучше не прятать.

Когда будете подписывать схемы и скриншоты почитайте на что обращать внимание: Как подписывать скриншоты

Расскажу об одной особенности автозаполнения браузеров, которая мешает сделать форму входа

О чем речь

Допустим, у нас есть некоторая форма входа, что-нибудь такое:

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

Получится что-то такое:

Большинство сервисов в интернете делает именно так. Я пособирал немного форм входа из разных сервисов. Вот:

Копилка: эти и другие формы входа (21 картинка)

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

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

Специальный джаваскрипт-код проверяет значения обоих полей, и если в обоих что-то вписано — включает кнопку входа.

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

Кажется, что теперь все хорошо:

В чем проблема

Но здесь суровая реальность вмешивается в дизайн. Если в Хроме сработает автозаполнение, то поля будут заполнены (хром подсветит автозаполненные поля желтым), но кнопка будет заблокирована:

WTF? Что происходит?

Это сработала система безопасности в Хроме. Если включено автоматическое заполнение полей, то Хром заполняет поля, но доступа к их значениям через джаваскрипт не будет. Доступ к значениям полей будет заблокирован до тех пор, пока пользователь явно не повзаимодействует со страницей, например, не кликнет куда-нибудь мышкой. Так они защищаются от кражи данных на плохо сделанных сайтах, где есть XSS-уязвимости.

Вот задача в баг-трекере Хрома: bugs.chromium.org/p/chromium/issues/detail?id=163072.

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

Как можно выкрутиться

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

1. Отлавливать автозаполнение поля

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

Большинство способов определения ходят вокруг обработки CSS-свойств поля. Подборка решений есть, например, здесь: stackoverflow.com/questions/11708092/detecting-browser-autofill

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

2. Дать нажать, но не показывать две красных надписи

Второй способ — не блокировать кнопку, но при этом не показывать два красных сообщения «Дорогой пользователь, нам жаль, что вы не способны справиться с заполнением двух полей». Можно обойтись с отправкой пустой формы более изящно. Например, можно потрясти формой входа, как это делает Цеплин (http://app.zeplin.io).

3. Поменять дизайн так, чтобы защита Хрома отключалась

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

Например, на сайте Студии Лебедева вход находится во всплывающем окне, поэтому к тому моменту, как появится форма входа Хром отключит все защиты и автозаполнение не помешает.

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

Вот такие пироги.

Хочу написать про одну редакторскую штуку в посте отвечать туда же — правило переписки

В чем проблема

Написать пост о банальном непросто. Тем более такой небольшой: вся суть поста укладывается в заголовок: Куда написали, туда и отвечай. Добавить больше нечего. Но писать пост из одного заголовка — какая-то шляпа. Даже с объяснениями о том, почему же так важно отвечать туда же, мои потуги на пост не тянули. Чего-то не хватало.

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

В чем магия

Таблица работает на том же принципе, что и шутка эмоции Чака Норриса:

С первой секунды ясно, что все картинки одинаковые, можно даже и не пытаться ничего сравнивать. Но читатель все равно сравнивает картинки. Сила формата.

Аналогично действует и таблица. Напомню её:

Каждая строка говорила одну и ту же мысль: Отвечать нужно туда, куда нужно, и не нужно отвечать туда, куда не нужно. Прочитал одну строку — понял всю таблицу.

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

Плюс таблица немного мемобразующая, может поэтому именно таблицу запостил Максим Ильяхов в телеграм-канале про деловую переписку (t.me/ya_vas_uslyshal/321).

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