Сила комментария

Сила комментария

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

— На карточке клиента: за что предоставили скидку 20%
— На форме заказа: что в дверь звонить не надо
— В тикете техподдержки: ссылка на обсуждение в багтрекинге

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

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

Например, на «Дадате» мы используем систему защиты от сетевых атак. У нее есть интерфейс, где можно заблокировать конкретный IP-адрес. Указываешь IP, жмешь «добавить в черный список», злодей получает бан. Что может быть проще?

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

Но постойте, можно же сделать нормальные поля «сотрудник» и «причина блокировки»? Да, можно, но непонятно:

— точно ли нужны именно эти поля?
— действительно ли они нужны?

Добавлять поля просто «чтобы были» — так себе идея. А выяснить реальные сценарии как раз и поможет поле «комментарий». Потом, если что, можно заменить его на поля с конкретным назначением.

Комментарий — элемент хаоса. Но с ним система устойчивее.

Спрашивали про точки развития для дизайнера.

Спрашивали про точки развития для дизайнера.

Точек роста для дизайнера четыре:

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

— Творческое развитие. Создание индивидуальной творческой траектории независимости и автономной работы. Частный проект в котором дизайнер один на один со своей личной задачей. Создание личного проекта с осознанными и глубокими мотивами самореализации.

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

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

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

let el = document.querySelector(".someClass");
el.innerText // текстовое содержимое
el.innerHTML // HTML-разметка содержимого
el.outerHTML // полная HTML-разметка
el.offsetWidth // ширина, аналогично Height
el.offsetLeft // координата левого угла
// и так далее

Назначенные узлу стили можно узнать через свойство sytle:

el.style.color // цвет текста

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

getComputedStyle(el).color // цвет текста

Если захотите узнать более сложные свойства, то не забудьте преобразовать их названия в camelCase. Например: background-color → backgroundColor;

Подробнее в видео: https://youtu.be/kM8YAhsaHfE
И в примере с кодом: https://codepen.io/detepr/pres/mQqKZO

Умное отпиливание

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

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

Но отказ от одной конкретной идеи оказался очень показательный и лично для меня является мастер классом по обоснованию своих решений.

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

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

И мы были уверены, что так и надо. Пользователь ведь проведет в приложении больше времени, значит цель достигнута, так?

А вот и не совсем, мы были уверены в этом пока на одной из консультаций к нам не подошла Оля Сартакова…

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

Мы показали ей наш концепт с бесконечным скроллом, задали несколько вопросов. Она посмотрела на остальные макеты и… сломала мне голову!

Она за пять минут обосновала почему ТАК ДЕЛАТЬ НЕЛЬЗЯ, и сделала это так уверенно и обоснованно, что я был прямо таки поражен и захотел когда-нибудь научиться также.

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

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

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

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

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

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

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

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