{ "version": "https:\/\/jsonfeed.org\/version\/1", "title": "Кирилл Беляев: заметки с тегом инфодизайн", "_rss_description": "о подаче информации, айдентике, интерфейсах и жизненной среде", "_rss_language": "ru", "_itunes_email": "", "_itunes_categories_xml": "", "_itunes_image": "", "_itunes_explicit": "", "home_page_url": "https:\/\/www.kirillbelyaev.com\/ru\/blog\/?go=tags\/infodizayn\/", "feed_url": "https:\/\/www.kirillbelyaev.com\/ru\/blog\/?go=tags%2Finfodizayn%2Fjson%2F", "icon": "https:\/\/www.kirillbelyaev.com\/ru\/blog\/user\/userpic@2x.jpg?1662385101", "author": { "name": "Кирилл Беляев", "url": "https:\/\/www.kirillbelyaev.com\/ru\/blog\/", "avatar": "https:\/\/www.kirillbelyaev.com\/ru\/blog\/user\/userpic@2x.jpg?1662385101" }, "items": [ { "id": "727", "url": "https:\/\/www.kirillbelyaev.com\/ru\/blog\/?go=all\/wind-direction-on-apple-watch\/", "title": "Направление ветра в погоде Эпл-вотч", "content_html": "

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

\n $\"\"$ \n<\/div>\n

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

\n $\"\"$ \n<\/div>\n

У меня нет хорошего объяснения, почему решение такое неоднозначное. Возможно, дизайнер ожидал лучшей подготовки пользователей. А, возможно, рисовал «South wind» не думая, что у него есть направление.<\/p>\n", "date_published": "2019-03-28T09:45:47+03:00", "date_modified": "2019-03-28T10:22:50+03:00", "image": "https:\/\/www.kirillbelyaev.com\/ru\/blog\/pictures\/wind-widget-and-poll@2x.png", "_date_published_rfc2822": "Thu, 28 Mar 2019 09:45:47 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "727", "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/www.kirillbelyaev.com\/ru\/blog\/pictures\/wind-widget-and-poll@2x.png", "https:\/\/www.kirillbelyaev.com\/ru\/blog\/pictures\/watch-os-wind-screen@2x.png" ] } }, { "id": "509", "url": "https:\/\/www.kirillbelyaev.com\/ru\/blog\/?go=all\/course-ui\/", "title": "Курс Ильи Бирмана «Пользовательский интерфейс и представление информации»", "content_html": "

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

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

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

1-й день, пользовательский интерфейс<\/h2>\n
Интерфейс — это правила взаимодействия. Пользовательский интерфейс — правила взаимодействия человека с машиной. Ещё есть АПИ — правила для двух машин, и скрипты — правила для двух людей: оператора поддержки и пользователя.<\/p>\n
Пользовательские данные бесконечно ценны. К ним относится и выбор, который делал пользователь. Раньше не думал так о выборе. Просто представлял, как мешает, когда система не помнит, что выбрано или сама меняет выбор по неочевидным правилам.<\/p>\n
О грубой и нежной обратной связи:<\/p>\n
\n $\"\"$ \n<\/div>\n
Отступление:<\/p>\n
\n
Вообще, обратная связь важнее другого для интерфейса. Если она непрерывная нежная наглядная и последовательная, то пользователь научится пользоваться даже самым сложным интерфейсом. Это похоже на то, как человек осваивает окружающий мир. Пробуя взаимодействовать с деревом, мы получаем от него обратную связь: твёрдое, но мягче камня, защищает от дождя, некоторые дают плоды...<\/p>\n<\/blockquote>\n
Cпросил Илью, как оформлять ссылки в веб-приложениях, которые выглядят и работают, как десктопные программы. Правило простое: подчёркивание — свойство гипертекста. В почтовом клиенте ссылки в тексте подчёркнуты. И в мобильном приложении подчёркивание в тексте будут выглядеть привычно.<\/p>\n
Классно, когда Ильи рассказывает истории. Одна из них — мнемоника для теней от кнопок. Тени должны падать строго вниз, поэтому Рома Воронежский шутил: «Солнце никогда не заходит над Яндексом».<\/p>\n
Тем, кому помогают чек-листы, советую скопировать темы курса. Можно на два-три разбить, чтобы не проверять печатные таблицы на закон Фиттса. Особенно интерфейсные темы полезно проверять чек-листом, чтобы не забыть какую-нибудь взаимосвязь и скрытую логику:<\/p>\n
\n $\"\"$ \n<\/div>\n
2-й день, представление информации<\/h2>\n
В основе дня — Тафти.<\/p>\n
Для меня стал важным рассказ о вёрстке колонок. В 2014 я читал заметку, но ещё не дорос до простейшего совета: оставить только левые границы колонок, а справа давать необходимые отступы<\/a>. Сейчас пошло на ура.<\/p>\n
\n $\"\"$ \n<\/div>\n
Понравился рассказ, как Илья отправлял Артёму свою первую схему челябинских троллейбусов и трамваев. Тогда Артём ещё работал в студии. Он предложил Илье убрать промежутки между параллельными линиями. Илья убрал и написал, что теперь линии плохо различимы и отступы нужно вернуть. Артём ответил, что вместо отступов, цвета подбирают так, чтобы те хорошо различались.<\/p>\n
Схема<\/a> вышла в 2008 году:<\/p>\n
\n $\"\"$ \n<\/div>\n
Когда Илья начинал, остановки были толстыми с белой обводку. Артём предложил убрать обводку, как лишний элемент. Илья убрал и написал, что теперь остановки теряются. Тогда Артём предложил сделать линии остановок сильно тоньше. В этот момент рассказа Илья округляет глаза, показывая первую реакцию на это предложение: «их же и так не видно! Окей, попробую,» — приходит позже. Тонкие остановки стали заметнее. Илья опять удивился и пошёл узнавать у Артёма, как так. В ответе был совет изучить тему информационных слоёв.<\/p>\n
История к тому, что если убрать лишнее и вылезут проблемы, нужно не возвращать лишнее, а думать дальше и чинить проблемы, которые скрывались за мусором. А принципы, которым учат на курсе работают.<\/p>\n
Среди тем был «Многомерный мир на плоском носителе». Илья там показывал крутящуюся девушку. Это редкая тема, которую я не понял, как применить.<\/p>\n
\n $\"\"$ \n<\/div>\n
3-й день, практические занятия<\/h2>\n
Здорово, что на курсе половина времени — практика. Переделывали таблицу, график и форму. Сила в том, что нет контекста — не нужно думать о целом продукте, просто механическая чистка.<\/p>\n
Когда разбирали результаты, убедился, что понимание матчасти помогает делать хороший дизайн. Все, кто гуглил, сделали лучше.<\/p>\n
Таблицы я успел две. 1-я с исходными данными, 2-я с пересчётом в тонны и м³:<\/p>\n
\n $\"\"$ \n<\/div>\n
А график наоборот: понял только, что нужна таблица, но сделать нормально не успел:<\/p>\n
\n $\"\"$ \n<\/div>\n
В форме хак. Всю нужную информацию о машине содержит ВИН-номер, поэтому лишние поля убираются, если научить систему парсить ВИН:<\/p>\n
\n $\"\"$ \n<\/div>\n
Кнопка у меня неочевидная. Поэтому Илья научил делать кнопки однозначно неактивными. Полупрозрачной стоит делать не всю кнопку, а только текст. Потом можно их ещё дополнительно погасить, но это уже по вкусу.<\/p>\n
4-й день, презентация и разбор домашнего задания<\/h2>\n
Задание сделал за полдня. Выложил работу последним, потому что затупил. Не делайте так, на последних не остаётся сил. Задание было таким: <\/p>\n
\n
Сайт для заказа пиццы. Имеется семь разных видов пицц. У некоторых можно выбирать начинку. Можно заказать доставку домой, а можно в офис.<\/p>\n<\/blockquote>\n
Если можно добавлять ингредиенты, значит, можно самому собрать пиццу — так появился конструктор. А поскольку на сайте всего 7 сортов в меню, я добавил на главной ссылки на другие пиццерии. Конечно, это будет работать, только если другие пиццерии будут платить за такие ссылки.<\/p>\n
\n $\"\"$ \n<\/div>\n
Фишка ингредиентов в том, что они бывают двойными — просто появляется чекбокс. Пиццы, которые собрал пользователь, сайт помнит и предлагает назвать, чтобы быстрее находить и заказывать в будущем.<\/p>\n
\n
\n $\"\"$ \n $\"\"$ \n<\/div>\n<\/div>\n
Сайт помнит адреса и подсвечивает их разными цветами, чтобы у пользователя был шанс заметить, что адрес не тот. Главная ошибка, которую нашёл Илья — заказ на разные адреса. Да, это тупня, которая усложняет сценарий, а значит будут ошибаться чаще. А нужно это раз в сто лет. Всегда можно отправить заказ, а потом второй.<\/p>\n
\n $\"\"$ \n<\/div>\n
\n $\"\"$ \n<\/div>\n
Рекомендую курс всем, кто работает за компьютером :-) Никакой базы для курса не нужно. Разработчикам полезно понимать, что им приносит дизайнер и за какие ошибки его пинать. Опытным дизайнерам полезно сверить часы, систематизировать знания, возможно, узнают новое.<\/p>\n", "date_published": "2017-05-05T14:41:03+03:00", "date_modified": "2017-05-05T17:53:25+03:00", "image": "https:\/\/www.kirillbelyaev.com\/ru\/blog\/pictures\/ui-handout@2x.jpg", "_date_published_rfc2822": "Fri, 05 May 2017 14:41:03 +0300", "_rss_guid_is_permalink": "true", "_rss_guid": "https:\/\/www.kirillbelyaev.com\/ru\/blog\/?go=all\/course-ui\/", "_e2_data": { "is_favourite": false, "links_required": [ "system\/library\/jquery\/jquery.js", "system\/library\/fotorama\/fotorama.css", "system\/library\/fotorama\/fotorama.js" ], "og_images": [ "https:\/\/www.kirillbelyaev.com\/ru\/blog\/pictures\/ui-handout@2x.jpg", "https:\/\/www.kirillbelyaev.com\/ru\/blog\/pictures\/ui-checklist@2x.jpg", "https:\/\/www.kirillbelyaev.com\/ru\/blog\/pictures\/grid-with-no-gutters-example@2x.png", "https:\/\/www.kirillbelyaev.com\/ru\/blog\/pictures\/chelyabinsk-trams-diagram-ilyabirman@2x.jpg", "https:\/\/www.kirillbelyaev.com\/ru\/blog\/pictures\/2007b.gif", "https:\/\/www.kirillbelyaev.com\/ru\/blog\/pictures\/ui-table@2x.jpg", "https:\/\/www.kirillbelyaev.com\/ru\/blog\/pictures\/ui-data@2x.jpg", "https:\/\/www.kirillbelyaev.com\/ru\/blog\/pictures\/ui-form@2x.jpg", "https:\/\/www.kirillbelyaev.com\/ru\/blog\/pictures\/pizza-home@2x.jpg", "https:\/\/www.kirillbelyaev.com\/ru\/blog\/pictures\/pizza-pepperoni@2x.jpg", "https:\/\/www.kirillbelyaev.com\/ru\/blog\/pictures\/pizza-mix@2x.jpg", "https:\/\/www.kirillbelyaev.com\/ru\/blog\/pictures\/pizza-cart@2x.jpg", "https:\/\/www.kirillbelyaev.com\/ru\/blog\/pictures\/pizza-done@2x.jpg" ] } }, { "id": "387", "url": "https:\/\/www.kirillbelyaev.com\/ru\/blog\/?go=all\/riga-vienna-budapest-krakow-riga\/", "title": "Рига — Вена — Будапешт — Краков — Рига", "content_html": "
С 1 по 10 мая 2014 мы с Полиной<\/a> путешествовали на машине по Европе. Поделюсь опытом и советами. Публикую цены, так как в Европе они растут медленнее российских (не удивлюсь, если в 2015 всё стоит столько же). Маршрут, перегоны и время, которое они заняли, нагляднее показать картинкой:<\/p>\n
$\"\"$ <\/p>\n<\/div>
Маршрут и время<\/h2>\n
Планировали так, чтобы в день проезжать не более 700 км. Навигатора у нас не было. Его заменили хороший штурман и карта. Пользовались офлайн-картами Мепс-ми<\/a> на айпаде и айфонах. Сейчас приложение умеет строить маршруты само, но хуже Гугла, который предлагает несколько вариантов, знает о платных дорогах и крупных ремонтах.<\/p>\n
Если строите маршрут в Гугл-карте, умножайте расчётное время примерно на 1,1. Если едете в горы без опыта «горного» вождения, умножайте на 1,3-1,4. Перегон через Карпаты занял на час больше расчётного времени.<\/p>\n
На выезд из города советую тоже заложить дополнительные полчаса или час. Даже из небольшого Кракова выбирались в пробках. Пробки встречали ближе к выездам. Порадовала только Вена, в которой движение организовано так, что в шесть вечера мы спокойно проехали на противоположный конец города через центр.<\/p>\n
Скорость движения<\/h2>\n
Скоростные режимы в разных странах разные и по-разному категоризированы, и иногда меняются. Например, в Польше 5 типов дорог, у каждого своя скорость для двух групп транспортных средств. Плюс движение в городе зависит от времени: с 23 до 5 разрешено на час быстрее. Знать ограничения для не вашей группы транспортных средств полезно: грузовикам запрещено движение выше 80 км\/ч, даже там, где легковушке разрешено 140. Это знание повышает адекватность водителя. Поэтому повторю совет, прочитанный во время подготовки к поездке: фотографируйте на телефон информационные стенды со скоростными режимами при въезде в страну . Скорость в пограничной зоне невысокая, машин немного — сфотографировать легко.<\/p>\n
Утомление в пути<\/h2>\n
Большие перегоны утомляют. Помогали смены ландшафта, типа дорог и скорости, с которой по ним разрешено ездить. Повезло, что маршрут проходил и по 8-полосным автобанам, и по маленьким дорогам через «уездные» городки. Банально помогала музыка, беседы и «хрустяшки». Музыки лучше побольше и разной, чтобы не надоела и под любое настроение. «Хрустяшки» лучше такие, чтобы долго жевать, стимулируя приток крови к мозгу. У нас были нарезанная кубиками морковь, сушёное манго и орехи. Кофе на «заправках» тоже брали. Кстати, в Польше он неоправданно горький.<\/p>\n
Платные дороги<\/h2>\n
Как правило, у платных дорог есть бесплатная альтернатива. Кроме отрезка «Вена — Будапешт», строили маршрут, исключая платные дороги, потому что экономия времени была не существенной, а пейзажи «уездных» дорог приятнее коридора шумозащитных экранов на автобанах. От Вены до Будапешта бесплатная дорога дольше на треть. Пропускных пунктов со шлагбаумами на дорогах в этих странах нет, только знаки висят. Чтобы ездить по платным дорогам Австрии, покупают (например, на заправках) специальные наклейки — виньетки. Их клеят на лобовое стекло. При въезде в Венгрию пробивают чек и вносят номера в базу. Оплачивается использование всех дорог в стране на определённый срок. Один проезд обойдётся как недельное пользование. В сумме проезд составил 21,5 €. Пишут, что в Австрии виньетки сканируются камерами.<\/p>\n
Чистка стёкол<\/h2>\n
На большинстве заправок в Европе можно самостоятельно и бесплатно помыть стёкла и фары. Ведёрки с чистящим средством и щётки часто стоят у топливных колонок. Обычно их не замечают. Для нас сработал эффект «обезьянка видит — обезьянка делает»: увидев, как стекло чистит сосед, я сделал то же самое.<\/p>\n
Ночлег<\/h2>\n
Ночевали в комнатах, которые находили на Эирбинби<\/a>. Выбирали с хорошими отзывами и без залога. До этого снимали квартиры полностью, поэтому волновались, что что-нибудь пойдёт не так. На деле всё было отлично: мы познакомились с интересными людьми и сэкономили.<\/p>\n
В Вене жили у немцев Фолькера и Юли — хозяев послушного и доброго джека-рассела. Ребята перебрались в Вену из Мюнхена. Отмечали, что жить в Вене комфортнее и дешевле, и что местные недолюбливают немцев, потому что те конкурируют за рабочие места. Юля говорила по-русски, так как родилась в Казахстане, куда её семью депортировали с Поволжья.<\/p>\n
В Будапеште остановились у пожилой пары. Ехать к старичкам было страшно, на практике получилось хорошо. Аттила и Татьяна рассказывали, как работали в том же Казахстане во времена Союза, и какой вкусный бешбармак готовили соседи. Татьяна — единственная иностранка в моей жизни, которая говорила по-русски без акцента. Она могла забыть или перепутать слово, но произношение было поразительно чистым. Квартира в Будапеште была очень советской: лакированные серванты, хрустальные люстры и ковры на стенах. Нас советский антураж не напрягал, скорее, вызывал любопытство.<\/p>\n
Хозяин квартиры в Кракове Славомир предложил одолжить местные злотые и гроши для оплаты парковки, до тех пор пока мы не разменяем валюту, что оказалось очень удобно.<\/p>\n
Парковки<\/h2>\n
В центре крупных городов Европы парковки платные. Заранее уточняли у хозяев, где удобнее парковковаться. Везде, кроме Кракова, селились на границе с центром, там жильё дешевле и парковки обычно бесплатные. Как ни готовились, но в Будапеште за 5 дней до нашего прибытия изменились зоны платных парковок. Нашли бесплатную перехватывающую парковку (P+R).<\/p>\n", "date_published": "2015-02-01T10:42:22+03:00", "date_modified": "2016-08-30T11:57:34+03:00", "_date_published_rfc2822": "Sun, 01 Feb 2015 10:42:22 +0300", "_rss_guid_is_permalink": "true", "_rss_guid": "https:\/\/www.kirillbelyaev.com\/ru\/blog\/?go=all\/riga-vienna-budapest-krakow-riga\/", "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [] } }, { "id": "258", "url": "https:\/\/www.kirillbelyaev.com\/ru\/blog\/?go=2012\/11\/23\/1\/", "title": "Таблички с названиями рек", "content_html": "
Самые понятные и стильные таблички для обозначения рек — в Латвии (видели лучше — пишите). Вместо пояснения «р.» или «река» и перевода «riv.» или «river» латыши подчёркивают название реки линией волн:

$\"\"$

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

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

$\"\"$

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

$\"\"$

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

$\"\"$

В этом есть смысл, если слово «канал» является частью названия, как «Канал Грибоедова», в остальных случаях — тип водоёма не важен. Такие таблички служат ориентирами при навигации (на карте и в навигаторе ищут название), и предупреждениями о приближении к опасному участку.<\/div>", "date_published": "2012-11-23T01:25:48+03:00", "date_modified": "2016-08-30T12:03:19+03:00", "_date_published_rfc2822": "Fri, 23 Nov 2012 01:25:48 +0300", "_rss_guid_is_permalink": "true", "_rss_guid": "https:\/\/www.kirillbelyaev.com\/ru\/blog\/?go=2012\/11\/23\/1\/", "_e2_data": { "is_favourite": false, "links_required": null, "og_images": [] } }, { "id": "177", "url": "https:\/\/www.kirillbelyaev.com\/ru\/blog\/?go=2012\/03\/12\/2\/", "title": "Информационный дизайн в берлинском метро", "content_html": "
Эта заметка про «находоки» столицы Германии. Пробудем здесь пару месяцев и надеемся собрать и опубликовать побольше интересного.<\/i>

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

$\"\"$ $\"\"$

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

$\"\"$

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

$\"\"$

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

$\"\"$ <\/div>", "date_published": "2012-03-12T16:37:37+03:00", "date_modified": "2016-08-30T12:17:25+03:00", "_date_published_rfc2822": "Mon, 12 Mar 2012 16:37:37 +0300", "_rss_guid_is_permalink": "true", "_rss_guid": "https:\/\/www.kirillbelyaev.com\/ru\/blog\/?go=2012\/03\/12\/2\/", "_e2_data": { "is_favourite": false, "links_required": null, "og_images": [] } } ], "_e2_version": 3572, "_e2_ua_string": "E2 (v3572; Aegea)" }