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

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

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

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

Чтобы не прогадать, можно вообще не прикидываться другом и всегда держаться нейтрально, как Apple Music.

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

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

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

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

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

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

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

https://vc.ru/design/80772

HTML-разметка — это просто текст, который делит страницу на смысловые (и не очень) блоки

Когда браузер получает HTML-документ, он на его основе создаёт древовидную структуру блоков, вложенных друг в друга. Каждый объект при этом называется узлом.

Потом к узлам применяются CSS-стили и получается та страница, которую мы видим в браузере.

К любому из узлов можно обратиться через JS как к объекту, чтобы узнать и изменить их свойства или содержимое, создать новые узлы или удалить старые. Структура этих объектов и называется DOM — Document Object Model. Она нужна для того, чтобы вы могли динамически менять содержимое документа после его загрузки в браузер.

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

Визуализация данных

Визуализация данных не самая простая штука. Бывает потеряны часы времени в поиске подходящего формата. "Bubble Chart", "Bar Chart", а может быть "Scatterplot"?

Коллеги собрали большинство примеров вместе и показали правильное использование графиков и диаграмм. Кратко так:

  • столбики (Bar Chart). Используют для сравнения нескольких наборов данных. Горизонтальные столбцы обычно используют, когда нужно сравнить большое количество показателей или визуально выделить явное превосходство одного из них. А вертикальные столбцы хорошо иллюстрируют, как менялись показатели в разные периоды, например, ежегодная прибыль компании за несколько лет
  • точечная диаграмма (Scatterplot). Помогает найти взаимосвязь между двумя показателями. Например, с его помощью можно узнать, как меняется коэффициент конверсии в зависимости от размера скидки на товар.
  • пузырьковая диаграмма (Bubble Chart). Позволяет сравнить два параметра по третьему. Возьмем коэффициент конверсии и размер скидки. Добавим к ним доход (за который отвечает размер круга) и получим примерно такую диаграмму. Глядя на этот график, можно заметить, что самая высокая конверсия у товаров со скидкой 30%, однако больше всего дохода приносят товары без скидки и товары со скидкой 5% (см. пример ниже).

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

UX

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

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

Если продолжать тему про любимые занятия, то в первом семестре Антон в начале каждого занятия давал нам прокачку, после которой я теперь не боюсь сталкиваться с поиском быстрого и креативного решения любой проблемы. В этих прокачках нужно было очень быстро, за 10-15 минут, придумать, нарисовать и сделать бумажный прототип конкретной задачи. Например, придумать приложение по разделению счета в баре, по поиску собутыльника, приложение для знакомства в общественном транспорте, для настройки фортепиано и т.д. Круто, когда через 5 занятий до тебя наконец доходит алгоритм по которому нужно действовать, и ты начинаешь играться этими кейсами в своё удовольствие, но это уже отдельная история.
___________

Так вот, закончили мы исследовать наш продукт и настало время для конкретных действий. За блок UX нам было необходимо:

⁃определиться с парадигмой навигации (гамбургер меню, либо таббар);
⁃найти основную работу на которую пользователи нанимают наше приложение, воспользовавшись фреймворком JTBD;
⁃составить карту экранов;
⁃составить информационную архитектуру;
⁃нарисовать вайрфреймы экранов и собрать из них прототип;
⁃протестировать прототип;
⁃подготовить отчет по тестированию и внести правки.

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

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

Проблема в том, что главный ограничитель наших требований — мы сами. Довольно сложно не уйти в частности и вовремя остановиться, расставив ограничения самим себе.

Например, в нашем приложении есть карточка заказа — как, без реальных бизнес метрик, определить какая информация важна, а какая нет? Нужен просто адрес или подробная карта? Как подать информацию об авторе объявления? Что из этого важнее и должно располагаться выше?

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

Так и остается — выдумывать ограничения самим, а отсюда соблазн сделать так как красиво, как лучше всего ляжет на макет.

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

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

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

Подводя итог — на блоке UX каждая команда сначала придумывает бизнес ограничения, а потом героически их преодолевает.

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

Шрифт «просто существует»

Шрифт «просто существует»

Ещё несколько лет назад мне казалось, что шрифт «просто существует».

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

Можно трактовать это как невежество или же отсутствие тонкой разрешающей способности.

Пару лет назад я стал интересоваться вопросом сильнее и встретил свой день рождения в кампусе Барбанеля на форкурсе Жени Юкечева.

Там впервые открыл Глифс и спроектировал(!) — точнее реконструировал — часть латинской кассы одного наборного шрифта.

Испытал «вау».

Из-за высокого порога входа в профессию шрифтовых дизайнеров кратно меньше графических, продуктовых и прочих.

Оттого особенно ценно, когда они делятся своим процессом без присущего многим снобизма.

Начиная с сообщения ниже — в лучшем духе твиттер-тредов — Александр Черепанов рассказывает о создании шрифта для Рокетбанка.

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