Блог Кирилла Беляева

о дизайнерском росте, подаче информации, интерфейсах, ведении проектов и жизненной среде.

Работаю дизайнером в Лаборатории данных. Работал в Дизайн‑бюро Артёма Горбунова и соосновал дизайн-группу «Кипо». Веду Твитер, Фейсбук, Инстаграм и ЖЖ.

Видео выходного дня: будущее данных

Тут исследуют, насколько чувствительны бывают личные данные. Задают аудитории разные вопросы и группируют ответы. Через серию вопросов ведущий говорит: «Только один фанат Джастина Бибера в синем в аудитории...»

Данные эффектно обрабатываются и визуализируются на лету.

23 сентября   видео

Надпись, как интерфейс

Надпись тоже бывает интерфейсом. На фото — капельная кофеварка, она готовит 1-1,5 литра фильтрового кофе. После приготовления, кофеварка подогревает кофейник, потому что сложно выпить литр кофе за раз. Чтобы аппарат не перегревался при подогреве и не вынуждал человека следить за температурой, в большинстве кофеварок есть автовыключение. Но не на всех есть надписи. Об функции написано в инструкции, но человек мог её не читать, потому что это 20-я кофеварка в его жизни, но у первых 19 не было автовыключения, или забыть, потому что люди что угодно забывают. Надпись тут работает, как обратная связь, постоянно показывает перманентное состояние системы.

22 сентября   интерфейс   промдизайн

Простое правило для прогулок с ребёнком

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

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

До какого возраста правило актуально пока не знаю.

19 сентября   привет малыш   рюкзак

Видео выходного дня: как стать сильным

Шесть историй из лекции Жени Арутюнова:

Принять ответственность:

Делать, как говорят:

Первое место:

Задавать вопросы:

Знать свой метод:

Играть на той стороне:

Научиться говорить «нет»:

Синхронизировать:

16 сентября   видео

Разбор приложения с задачами по математике для умственного счёта

Лет 5-6 назад, я узнал о приложении «Въ умѣ», которое советую, как тренировку для мозга.

Это набор из 1001 задачи для умственного счёта, которые составил Сергей Рачинский. Впервые задачи вышли в виде книги «1001 задача для умственного счёта. Пособие для учителей сельских школ» в 1891 году. Эти задачи решали крестьянские дети начальной и средней школы. При жизни автора книга переиздавалась три раза и стала известна по всей России.

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

Счёт в уме требует неслабой концентрации и тренирует её. Заметил, что 5 лет назад фокусировался лучше и решал быстрее. Сейчас часто сбиваюсь, забываю значения из условия задачи и отвлекаюсь.

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

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

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

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

У приложения только горизонтальная ориентация и клавиатура на всю длину экрана, из-за этого неудобно вводить ответы одной рукой, а на телефонах с диагональю больше 4,5 дюймов — невозможно. Основной сценарий у приложения такой: прочитал задачу, решил, ввёл. Для первых двух действий держать телефон двумя руками не нужно, а для третьего из-за горизонтальной ориентации — обязательно. Чтобы помногу раз не опускать и поднимать вторую руку, телефон проще держать двумя руками. А такой хват явно избыточный для этого приложения.

В разделе «О приложении» — бардак с вёрсткой:

В списке задачи разбиты по 70 на экран — не самое удобное число, чтобы на него делить, когда хочешь добраться к 495 задаче.

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

Отдельная проблема — кнопка «ѣ». Понять, что за ней невозможно. А там живёт встроенная покупка:

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

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

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

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

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

Рассказ о приложении уместил на один экран с прокруткой:

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

Собрал всё это в 2-минутный ролик:

Если хотите, чтобы помог с этим или другим приложением, пишите на почту kirill@kipo.name. Если интересны детали, задавайте вопросы (лучше тоже на почту).

P. S. Разбор визуализаций пока на паузе, вместо них планирую писать разборы похожие на этот.

26 августа   видео   типографика

Баннеры о новых станциях метро в Берлине

В Берлине строят три новые станции на ветке «U5». Из-за этого на Музейном остове куча всего перекопано, ходить и любоваться не удобно.

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

Медведь одобряет новый маршрут:

Как изменится движение в центре, тут пацифист:

О новом маршруте с востока на запад. Тут один раз встречаются целующиеся геи:

Показывают рендеры будущих станций. Тут же имена архитекторов:

Об особенностях строительства:

Рассказывают о технологии прокладывания туннелей:

Видео на немецком, если интересны подробности:

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

И о достопримечательностях вокруг станции «Музейный остров»:

У проекта есть отдельный сайт — projekt-u5.de.

Ещё свежее о Берлине:

23 августа   Берлин   метро   стройка

Хороший стаканчик для кофе с собой

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

На фото 2012 года я умудряюсь пить из такой конструкции. Если бы радиусы не совпадали, я уранил бы нижний или помял бы, стараясь удержать. Итог один — пролитый кофе.

Второе ценное свойство — термоизоляция. С этим помогают рефления. Фотографии со мной нет, вот интернетная:

21 августа   кофе   стакан
20 августа   видео   культура

«А что можно было?» с улиц Берлина

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

Начну с фотографии станции «Банхофштрассе». Для меня это самая центральная станция, как «Невский проспект» в Петербурге. Показываю её, чтобы появился контекст.

В целом Берлин гораздо зеленее всех постсоветских городов, которые посетил. Ближе к этому:

Можно сделать парковку посередине проезжего моста. И обойтись одной разметкой:

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

Можно свободнее высказываться прямо на главных улицах:

Можно построить дом и покрасить, как два, чтобы разбить монотонность:

Можно построить красивое современное здание за спиной готической церкви:

Детская площадка погашенных цветов:

Не крашенная вовсе площадка, тут ещё балконы разрешают делать интересными:

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

Напольная навигация с металлическими элементами для износостойкости (верстать нужно в разы лучше):

Артемий Лебедев писал, что лучше привлекать внимание не к знаку, а к пешеходам на переходе, и приводил примеры. В Берлине переход с подсветкой такой:

И на последок — классное название отеля. Весело можно не только кафешки и бары называть.

Ещё свежее о Берлине:

Ctrl + ↓ Ранее