Кирилл Беляев: заметки с тегом инфодизайн

Направление ветра в погоде Эпл-вотч

Кирилл Беляев — Thu, 28 Mar 2019 09:45:47 +0300

Виджет на домашнем экране Эпл-вотч показывает направление ветра треугольничком. Мой мини-опрос показал, что визуальное решение не однозначно:

На виджете ветер дует с юга, что однозначно выясняется в приложении «Погода»:

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

Курс Ильи Бирмана «Пользовательский интерфейс и представление информации»

Кирилл Беляев — Fri, 05 May 2017 14:41:03 +0300

В 2013...2014 я 9 месяцев стажировался в бюро, поэтому сверхоткрытий от курса не ждал. Сходил, чтобы понять, чем курс полезен для лабораторной команды и вспомнить всё. Оказалось, что базу знаю нормально, несмотря на практические ошибки.

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

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

1-й день, пользовательский интерфейс

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

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

О грубой и нежной обратной связи:

Отступление:

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

Cпросил Илью, как оформлять ссылки в веб-приложениях, которые выглядят и работают, как десктопные программы. Правило простое: подчёркивание — свойство гипертекста. В почтовом клиенте ссылки в тексте подчёркнуты. И в мобильном приложении подчёркивание в тексте будут выглядеть привычно.

Классно, когда Ильи рассказывает истории. Одна из них — мнемоника для теней от кнопок. Тени должны падать строго вниз, поэтому Рома Воронежский шутил: «Солнце никогда не заходит над Яндексом».

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

2-й день, представление информации

В основе дня — Тафти.

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

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

Схема вышла в 2008 году:

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

История к тому, что если убрать лишнее и вылезут проблемы, нужно не возвращать лишнее, а думать дальше и чинить проблемы, которые скрывались за мусором. А принципы, которым учат на курсе работают.

Среди тем был «Многомерный мир на плоском носителе». Илья там показывал крутящуюся девушку. Это редкая тема, которую я не понял, как применить.

3-й день, практические занятия

Здорово, что на курсе половина времени — практика. Переделывали таблицу, график и форму. Сила в том, что нет контекста — не нужно думать о целом продукте, просто механическая чистка.

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

Таблицы я успел две. 1-я с исходными данными, 2-я с пересчётом в тонны и м³:

А график наоборот: понял только, что нужна таблица, но сделать нормально не успел:

В форме хак. Всю нужную информацию о машине содержит ВИН-номер, поэтому лишние поля убираются, если научить систему парсить ВИН:

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

4-й день, презентация и разбор домашнего задания

Задание сделал за полдня. Выложил работу последним, потому что затупил. Не делайте так, на последних не остаётся сил. Задание было таким:

Сайт для заказа пиццы. Имеется семь разных видов пицц. У некоторых можно выбирать начинку. Можно заказать доставку домой, а можно в офис.

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

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

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

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

Рига — Вена — Будапешт — Краков — Рига

Кирилл Беляев — Sun, 01 Feb 2015 10:42:22 +0300

С 1 по 10 мая 2014 мы с Полиной путешествовали на машине по Европе. Поделюсь опытом и советами. Публикую цены, так как в Европе они растут медленнее российских (не удивлюсь, если в 2015 всё стоит столько же). Маршрут, перегоны и время, которое они заняли, нагляднее показать картинкой:

Маршрут и время

Планировали так, чтобы в день проезжать не более 700 км. Навигатора у нас не было. Его заменили хороший штурман и карта. Пользовались офлайн-картами Мепс-ми на айпаде и айфонах. Сейчас приложение умеет строить маршруты само, но хуже Гугла, который предлагает несколько вариантов, знает о платных дорогах и крупных ремонтах.

Если строите маршрут в Гугл-карте, умножайте расчётное время примерно на 1,1. Если едете в горы без опыта «горного» вождения, умножайте на 1,3-1,4. Перегон через Карпаты занял на час больше расчётного времени.

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

Скорость движения

Скоростные режимы в разных странах разные и по-разному категоризированы, и иногда меняются. Например, в Польше 5 типов дорог, у каждого своя скорость для двух групп транспортных средств. Плюс движение в городе зависит от времени: с 23 до 5 разрешено на час быстрее. Знать ограничения для не вашей группы транспортных средств полезно: грузовикам запрещено движение выше 80 км/ч, даже там, где легковушке разрешено 140. Это знание повышает адекватность водителя. Поэтому повторю совет, прочитанный во время подготовки к поездке: фотографируйте на телефон информационные стенды со скоростными режимами при въезде в страну . Скорость в пограничной зоне невысокая, машин немного — сфотографировать легко.

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

Большие перегоны утомляют. Помогали смены ландшафта, типа дорог и скорости, с которой по ним разрешено ездить. Повезло, что маршрут проходил и по 8-полосным автобанам, и по маленьким дорогам через «уездные» городки. Банально помогала музыка, беседы и «хрустяшки». Музыки лучше побольше и разной, чтобы не надоела и под любое настроение. «Хрустяшки» лучше такие, чтобы долго жевать, стимулируя приток крови к мозгу. У нас были нарезанная кубиками морковь, сушёное манго и орехи. Кофе на «заправках» тоже брали. Кстати, в Польше он неоправданно горький.

Платные дороги

Как правило, у платных дорог есть бесплатная альтернатива. Кроме отрезка «Вена — Будапешт», строили маршрут, исключая платные дороги, потому что экономия времени была не существенной, а пейзажи «уездных» дорог приятнее коридора шумозащитных экранов на автобанах. От Вены до Будапешта бесплатная дорога дольше на треть. Пропускных пунктов со шлагбаумами на дорогах в этих странах нет, только знаки висят. Чтобы ездить по платным дорогам Австрии, покупают (например, на заправках) специальные наклейки — виньетки. Их клеят на лобовое стекло. При въезде в Венгрию пробивают чек и вносят номера в базу. Оплачивается использование всех дорог в стране на определённый срок. Один проезд обойдётся как недельное пользование. В сумме проезд составил 21,5 €. Пишут, что в Австрии виньетки сканируются камерами.

Чистка стёкол

На большинстве заправок в Европе можно самостоятельно и бесплатно помыть стёкла и фары. Ведёрки с чистящим средством и щётки часто стоят у топливных колонок. Обычно их не замечают. Для нас сработал эффект «обезьянка видит — обезьянка делает»: увидев, как стекло чистит сосед, я сделал то же самое.

Ночлег

Ночевали в комнатах, которые находили на Эирбинби. Выбирали с хорошими отзывами и без залога. До этого снимали квартиры полностью, поэтому волновались, что что-нибудь пойдёт не так. На деле всё было отлично: мы познакомились с интересными людьми и сэкономили.

В Вене жили у немцев Фолькера и Юли — хозяев послушного и доброго джека-рассела. Ребята перебрались в Вену из Мюнхена. Отмечали, что жить в Вене комфортнее и дешевле, и что местные недолюбливают немцев, потому что те конкурируют за рабочие места. Юля говорила по-русски, так как родилась в Казахстане, куда её семью депортировали с Поволжья.

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

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

Парковки

В центре крупных городов Европы парковки платные. Заранее уточняли у хозяев, где удобнее парковковаться. Везде, кроме Кракова, селились на границе с центром, там жильё дешевле и парковки обычно бесплатные. Как ни готовились, но в Будапеште за 5 дней до нашего прибытия изменились зоны платных парковок. Нашли бесплатную перехватывающую парковку (P+R).

Таблички с названиями рек

Кирилл Беляев — Fri, 23 Nov 2012 01:25:48 +0300

Самые понятные и стильные таблички для обозначения рек — в Латвии (видели лучше — пишите). Вместо пояснения «р.» или «река» и перевода «riv.» или «river» латыши подчёркивают название реки линией волн:

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

Эстонцы, к примеру, пишут «KUURA jõgi» — «река Куура». Догадаться можно, но не очень удобно:

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

Обозначения каналов латыши вносят в название и подчёркивают волнами:

В этом есть смысл, если слово «канал» является частью названия, как «Канал Грибоедова», в остальных случаях — тип водоёма не важен. Такие таблички служат ориентирами при навигации (на карте и в навигаторе ищут название), и предупреждениями о приближении к опасному участку.

Информационный дизайн в берлинском метро

Кирилл Беляев — Mon, 12 Mar 2012 16:37:37 +0300

Эта заметка про «находоки» столицы Германии. Пробудем здесь пару месяцев и надеемся собрать и опубликовать побольше интересного.

Отечественным носителям даже и не снились такие шедевры рекламной инфографики: сразу видно где, что и по чём дают плюс цепляющее оформление:

Вторая идея тоже из метро: на карте города (с нанесённым слоем схемы метрополитена) местоположение смотрящего отмечено очень удобным способом:

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

А за счёт прозрачности кольца не теряется информация. И последний плюс — экономия. Карты все одинаковые только кольцо из самоклеящейся плёнки наклееной в разные места: