Как писать сообщения об ошибках

Как писать сообщения об ошибках

Есть простой шаблон:
В заголовок — что призошло
Основным текстом — причина и что делать дальше
Кнопкой — действия
Код ошибки, если необходим

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

Если пользователь отправлял письмо, а оно не отправилось, то так и пишем: Письмо не отправлено

Хорошо:
✅ Не удалось загрузить сообщения
✅ Фотографии не отправлены
✅ Платёж не прошел

Плохо:
❌ Что-то пошло не так
❌ Ошибка!
❌ Память не может быть read

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

✅Хорошо для простого человека:
Не удалось сохранить документ. Документ слишком большой. Уменьшите размер документа до 800 символов или разбейте на части.
Разбить на 3 части
Закрыть

✅Хорошо для профессионала.
Не удалось сохранить документ. Размера файла подкачки не хватает для сохранения. Увеличьте размер файла подкачки до 1 ГБ или уменьшите размер вашего документа до 800 символов.
Увеличить файл подкачки
Разбить на 3 части
Закрыть

❌ Плохо:
Не писать причину
Писать профессиональным языком для непрофессионалов

Если причина неизвестна, то можно так и писать: Ошибка произошла по неизвестной причине. Помогите нам разобраться, отправьте отчёт.

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

✅Хорошо
Вы ввели неверный пароль слишком часто. Чтобы восстановить пароль, обратитесь в службу поддержки.
Позвонить в службу поддержки
Написать в службу поддержки
Закрыть

❌Плохо:
Вы ввели неверный пароль слишком часто. Чтобы восстановить пароль, обратитесь в службу поддержки.
Закрыть

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

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

Синхронизация с заказчиком

И вот мы провели ряд исследований — и что же это значит? Как передать свои идеи заказчику? Как синхронизироваться?

Есть три отличных метода, как на ранних стадиях показать заказчику то, что его ждет на выходе (ну а нашем случае самим понять куда мы движемся)

Вот эти три метода:
-пресс релиз
-идеальный день пользователя
-design challenge

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

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

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

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

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

Нет ничего хуже редакторских правок без объяснений.

Лучше всегда рассказывать, что вы там натворили в макетах (или где вы там работаете). Устно или письменно на полях — без разницы. Вот почему это в ваших же интересах:

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

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

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

Короче, объяснения — часть товара, который продаёт редактор.

Меня тут спрашивают, зачем нужны шпаргалки, о которых я написал постом выше

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

Например, вы знаете основы JS, но всё чаще встречаете в примерах непонятный новый синтаксис — ES6. Вы можете прочитать про него длинную статью (например: http://babeljs.io/learn-es2015/), но, скорее всего, сразу всё забудете. Тут вам и придёт на помощь шпаргалка https://devhints.io/es6

Или вы установили себе модный редактор кода Visual Studio Code, но не знаете ни одного хоткея в нём. Вот шпаргалка с ними: https://devhints.io/vscode

Или вы решили научиться верстать флексбоксами, но постоянно забываете синтаксис. Шпаргалка вам его быстро напомнит: https://devhints.io/css-flexbox

Текстовые поля для Google

Как ребята из команды Material Design пересобрали текстовые поля для Google.
Огромное исследование и куча инсайтов.

Почему поля

Казалось бы, текстовое поле, что думать то? Но не все так просто.

Текстовое поле - один из самых популярных элементов интерфейса. Форма обратной связи, заявки, обязательная информация и т.д. Конверсии, конверсии и еще раз конверсии.

Команда Material Design провели исследование текстовых полей и выяснили, что куча народа, видя поле с чертой и плейсхолдером (серым текстом подсказкой внутри) не понимали, что оно кликабкльное. Как следствие отваливались и не заполняли формы.

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

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

Процесс

Исследование проходило в два этапа:

- сперва участникам оценивали разные варианты дизайна
- потом тюнинг конкретных элементов

Участникам предлагалось взаимодействовать с различными вариантами текстовых полей. Собирались прототипы и задавались уточняющие вопросы. Задействовали 600 человек.

Выводы

Результаты двух исследований показали, что следующие элементы текстовых полей имеют наибольшую ценность:

- Закрытые текстовые поля с прямоугольной формой, лучше, чем те, которые имели подчеркивание в виде линии
- Рамка текстового поля должна быть с полупрозрачной заливкой и нижней линией или без заливки, но с непрозрачной чертой.
- Цветовой контраст линий текстового поля с фоном соответствовал минимальным коэффициентам контрастности 3: 1.
- Текст метки должен быть помещен в пределы рамки текстового поля.
- Текстовые поля должны иметь закругленные углы

После того, как работа была проведена Google обновил у себя все текстовые формы.
Под постом бвдет гифка До и После апдейта.

Корректура в конце

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

Сейчас в меня полетят помидоры от магов корректорской гильдии, но я должен об этом сказать. Орфография переоценена. Да, ошибки снижают доверие и обидно оскорбляют русский язык и Розенталя лично. Но разве «тся или ться» — это главное в жизни?

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

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

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