Интерфейсы без шелухи

@dangry Нравится 2

Заметки о продуктоводстве, здравом смысле и разработке софта // antonz.ru
Гео и язык канала
Россия, Русский
Категория
Технологии


Гео канала
Россия
Язык канала
Русский
Категория
Технологии
Добавлен в индекс
22.05.2017 17:17
реклама
Необходимо Монетизировать свой Канал?
Начните уже Сейчас с Tagio.Pro!
SearcheeBot
Ваш гид в мире Telegram-каналов
TGStat Bot
Бот для получения статистики каналов не выходя из Telegram
13 330
подписчиков
~0
охват 1 публикации
~233
дневной охват
N/A
постов в день
N/A
ERR %
7.47
индекс цитирования
Репосты и упоминания канала
41 упоминаний канала
12 упоминаний публикаций
44 репостов
UX Notes
de’talks
Рациональные числа
Инжиниринг Данных
Reveal the Data
Инжиниринг Данных
Чартомойка
Блог Шмакова
Дата-сторителлинг
data будни
Spark in me
SETTERS
Banana Analyst
Reveal the Data
Result.Business
Actionless
Блог Шмакова
BotShare
Reveal the Data
HFLabs — о данных
Рекламка
DIY : Customer Service 🦄
Опять эта Макеева
сам выходи из себя
UX Notes
Клан Боевых Бобров
aic.brave.designers
FEDOR BORSHEV
Ethea
UX Notes
Levan Jamelashvili
Почитать о дизайне
Digital
itateam
Product Ruslan
Digital October
Буквешная
DIY : Customer Service 🦄
Каналы, которые цитирует @dangry
Life Happens
SQLite на практике
Oh My Py
Oh My Py
Design & Productivity
Ponchik News
Grumpy Website
Текст в тесте
No Flame No Game
Канал Саши Бизикова
Post.Scriptum
Последние публикации
Удалённые
С упоминаниями
Репосты
🚸 Отображение ошибок в интерфейсе

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

1) Вид ошибки (ошибка клиента, не прошла валидация, ошибка сервера, сетевая проблема)
2) Контекст (ввод данных, выполнение команды, переход)

Для каждой ситуации «контекст + вид ошибки» Настя выбрала определенный текст ошибки и способ отображения.

Например:

— Ввод данных + не прошла валидация → показываем ошибку рядом с конкретным полем
— Выполнение команды + сетевая проблема → баннер «связь с сервером прервана»

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

P.S. Эту статью Настя прислала в ответ на предложение для авторов. Если вы написали классную статью, присылайте тоже.
Читать полностью
А помните, в 2017 году мы придумывали, как телеграму упорядочить бардак в каналах (еще до появления папок)?

Интересно было перечитать сейчас и сравнить с итоговой реализацией. Дуров пошел по варианту Категории или теги, так что вы были правы (такой вариант предложили 40% участников).
👀 Если вы написали отличную статью, о которой никто не знает

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

Поэтому провожу эксперимент! Готов опубликовать ссылку на вашу статью, если она мне понравится. Бесплатно. Знаменитостью это вас не сделает, но статью точно увидит больше людей.

Все условия
Читать полностью
✍️ Хватит делать «удобные» визуальные редакторы

Я пишу много заметок. Больше, наверно, пишут только коммерческие авторы и госушные специалисты по технической документации (мои соболезнования последним).

Пишу обычно в markdown, а там, где его не хватает — добавляю html. Понятно, что большинство людей маркдаун (а тем более хтмл) не знают и знать не хотят. Видимо, по этой причине платформы с user-generated контентом делают «удобные» редакторы.

Есть только одна проблема. Все эти редакторы (ну почти все) — неудобное, глючное говно. Простите за резкость, но уж как есть.

Медиум, ноушн, виси.ру, хабр — ваши редакторы просто катастрофа. Последние два — особенно. Лучше обычная textarea, чем то, что вы сделали.

У меня есть решение, немного радикальное. Если не умеете делать нормальные редакторы — не делайте. Посмотрите на телеграм, он обходится примитивным набором инструментов:

— поставить ссылку
— жирный / курсив / моноширинный
— markdown для знающих

Всё. И ничего, люди пишут на многотысячные аудитории.

Конечно, сложную техническую статью с такими возможностями не напишешь. Но если у вас люди пишут сложные статьи — дайте им сложные, но мощные инструменты (md, html, latex).

Не делайте визуальные редакторы. Вы не умеете их делать.
Читать полностью
Мастер логотипа
🎨 Заставить использовать логотип в хорошем качестве

Есть такая проблема у популярных сервисов — их лого часто ставят на других сайтах в черти каком виде. Происходит это обычно так:

1) Маркетолог заходит на главную страницу
2) Видит логотип в левом верхнем углу
3) Сохраняет как картинку
4) И в таком виде использует

Это еще не самый плохой вариант. Некоторые на шаге (3) используют инструмент «ножницы», вырезая логотип с мясом и кусками окружающей действительности ツ

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

Сервис Sentry (админка для сбора ошибок и мониторинга веб-сервисов) придумал неординарное решение. Если человек тыкает правой кнопкой мыши по логотипу, его перебрасывает на специальную страницу (см. картинку к заметке). Там можно скачать логотип, выбрав подходящий стиль, фон и размер.

С одной стороны, творческий подход, и наверняка отлавливает часть сценариев. С другой — перехватывать клики мыши довольно сомнительно 🤔
Читать полностью
Больше вы не являетесь ツ
​​🔑 Вы являетесь дизайнеру в страшном сне

Интернет-банк Тинькова при входе встречает многозначительной надписью (см. первый скрин):

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

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

1. Формулируем по-человечески

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

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

Вы — клиент Тинькофф Банка. Введите пароль, чтобы войти.

2. Убираем лишнее

Зачем писать человеку, что он клиент? Я и так это знаю, потому и пытаюсь войти в интернет-банк. Убираем.

Вы — клиент Тинькофф Банка. Введите пароль, чтобы войти.

Введите пароль, чтобы войти.

3. Убираем очевидное

На этой же форме огроменное поле ПАРОЛЬ и кнопка ВОЙТИ. Спорим, человек догадается, чего от него хотят?

Введите пароль, чтобы войти.

Ø

Что осталось — в следующем сообщении.

P.S. Если дизайнеру ну совсем никак без подзаголовка, я бы написал Осталось ввести пароль.
Читать полностью
🙈 Признать проблему

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

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

Но я хочу обратить внимание вот на что.

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

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

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

Признав проблему, можно оценить ее влияние, варианты решения и их стоимость. И потом уже думать — будете исправлять или нет.

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

Но важно честно сказать себе, что да, это действительно проблема. А не закрывать глаза и убеждать всех вокруг, что ее не существует.
Читать полностью
Что делать с письмами по заказу?
Опрос
  • Все отлично, оставить как есть
  • Прислать 4 чека одним письмом
  • Объединить все письма в одно
  • Свой вариант в комментариях
859 голосов
🤔 Мини-задачка: письма о заказе

Представьте ситуацию. Вы работаете в крупном маркетплейсе. Люди делают на маркетплейсе заказы, он доставляет. А по факту доставки одного заказа присылает шесть писем (см. скриншот):

— Заказ доставлен
— Электронный чек по 1-й части заказа
— Электронный чек по 2-й части заказа
— Электронный чек по 3-й части заказа
— Электронный чек по 4-й части заказа
— Вы довольны доставкой?

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

Некоторые покупатели почему-то недовольны таким количеством писем и жалуются в саппорт.

Ваши коллеги разводят руками — в заказе было 4 части, значит должно быть четыре чека. Потом, надо же уведомить о доставке, а то вдруг человек не в курсе. И уточнить, всем ли покупатель доволен (мы же клиентоориентированная компания). Вот и получается шесть писем. Ничего не поделаешь.

А вы что думаете? Опрос следует.
Читать полностью
🏘️ Почтовые адреса в интерфейсе

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

Вот что я об этом думаю (1–3 обязательно, 4–6 по необходимости и возможности):

1. Спрашивать адрес одним полем

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

2. Автоматически определять индекс

У нас не США, люди часто не помнят свой почтовый индекс. Сделайте доброе дело и подставьте его самостоятельно.

3. Разрешать вводить адрес вручную

Какой бы адресный справочник вы ни использовали, точно известно одно — жизнь все равно богаче. Запрещаете вводить неизвестные адреса → теряете часть заказов. Не делайте так.

4. Автоматически определять город

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

5. Показывать почтовое отделение

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

6. Определять ближайшее метро

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

Всё вместе и с картинками → https://dadata.ru/blog/basics/best-practises-address/
Читать полностью
​​Что должно быть в письме о заказе

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

Но не у всех это письмо полезно клиенту.

Плохо

Например, «Деликатеска» присылает жуткую простыню (см. картинку к посту).

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

У «Озона» нет простыни, но и даты доставки тоже нет. У «Яндекса» лучше, хотя акцент странный (см. скриншоты в полной версии заметки).

Лучше

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

Приняли заказ №12345, стоимость 5623 ₽, доставим в пятницу 16 июля с 10 до 14.

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

Приняли заказ на 5623 ₽, доставим в пятницу 16 июля с 10 до 14.

Добавьте телефон, чтобы человек не искал, как с вами связаться:

Приняли заказ на 5623 ₽, доставим в пятницу 16 июля с 10 до 14. 8 800 223-23-23

Если есть ограничения по оплате, тоже напишите:

Оплата только наличными, у курьера нет сдачи.

Заказ оплачен, вот чек.

Такой формат одинаково подходит для емейла и смс. В смс достаточно этим и ограничиться. В емейле можно дальше дать больше подробностей:

— список товаров;
— как изменить время или отменить заказ;
— особенности (курьер звонит за час, доставка до двери и тому подобное).

Адрес доставки имеет смысл указывать, если у человека их несколько. ФИО и адрес эл. почты — если заказ для другого человека.

Итого

— номер (если без него никак);
— стоимость,
— дата и время,
— контактный телефон,
— важные ограничения.

Приняли заказ № 12345, стоимость 5623 ₽, доставим в пятницу 16 июля с 10 до 14. Оплата только наличными. 8 800 223-23-23

Такое сообщение действительно пригодится.
Читать полностью
Как не надо вводить адрес в 2021 году

Заказывал сегодня карту ЮМани. Доставляют по почте, поэтому нужно указать адрес. И ввод адреса ребята организовали так, как давно уже никто не делает. Собрали все возможные грабли:

— весь ввод вручную, никакого автодополнения;
— индекс тоже вводишь вручную;
— два раза «Москва» (а в финальном адресе аж три раза).

В итоге прислали письмо:

> Карта приедет в почтовое отделение. То, которое ближе всего к вашему дому.

То есть и отделение даже по индексу не смогли определить. Полный провал.

Уверен, что вы знаете, как нормально вводить адреса. Но на всякий случай:

https://habr.com/ru/company/hflabs/blog/417235/
Читать полностью
🗃️ Как собрать данные из API без программирования

А я вам показывал, как парсить открытые API без программирования? Аккаунт на гитхабе + текстовый редактор + самая малость SQL = автоматически обновляемый датасет.

https://antonz.ru/github-actions-scraping/
А вот автоматическая озвучка в исполнении SpeechKit от Яндекса. Это уже очень хороший уровень.
Attached file
🎧 Озвучка текста на сайте

Возможно, вы встречали на новостных сайтах кнопку «Слушать», которая озвучивает содержимое новости.

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

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

ДемкаИсходники
Читать полностью
☘️ О продуктоводстве

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

О чем пишу:

— продукт и фичи
— B2B и кровавый энтерпрайз
— API и документация
— техподдержка
— разработка
— интерфейс
— люди

О чем не пишу:

— маркетинг
— метрики
— касдев
— гроус-хакинг
— эджайл
— что там еще модно у продактов в этом сезоне

Были бы мы в США — залил бы водой и написал книгу. А так получилась длинная, подробная статья ツ

https://antonz.ru/productology/
Читать полностью