{ "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:\/\/kirillbelyaev.com\/ru\/blog\/?go=tags\/kurs\/", "feed_url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=tags%2Fkurs%2Fjson%2F", "icon": "https:\/\/kirillbelyaev.com\/ru\/blog\/user\/userpic@2x.jpg?1662385101", "author": { "name": "Кирилл Беляев", "url": "https:\/\/kirillbelyaev.com\/ru\/blog\/", "avatar": "https:\/\/kirillbelyaev.com\/ru\/blog\/user\/userpic@2x.jpg?1662385101" }, "items": [ { "id": "509", "url": "https:\/\/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:\/\/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:\/\/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:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/ui-handout@2x.jpg", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/ui-checklist@2x.jpg", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/grid-with-no-gutters-example@2x.png", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/chelyabinsk-trams-diagram-ilyabirman@2x.jpg", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/2007b.gif", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/ui-table@2x.jpg", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/ui-data@2x.jpg", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/ui-form@2x.jpg", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/pizza-home@2x.jpg", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/pizza-pepperoni@2x.jpg", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/pizza-mix@2x.jpg", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/pizza-cart@2x.jpg", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/pizza-done@2x.jpg" ] } } ], "_e2_version": 3572, "_e2_ua_string": "E2 (v3572; Aegea)" }