<?xml version="1.0" encoding="utf-8"?> 
<rss version="2.0"
  xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd"
  xmlns:atom="http://www.w3.org/2005/Atom">

<channel>

<title>ivan's blog: posts tagged пользовательский интерфейс</title>
<link>https://www.ivanzviahin.by/blog/tags/polzovatelskiy-interfeys/</link>
<description>It is my diary. I’m ivan zviahin, an designer, manager, car enthusiast.</description>
<author>Ivan Zviahin</author>
<language>en</language>
<generator>E2 (v3849; Aegea)</generator>

<itunes:owner>
<itunes:name>Ivan Zviahin</itunes:name>
<itunes:email>ivanzviahin@gmail.com</itunes:email>
</itunes:owner>
<itunes:subtitle>It is my diary. I’m ivan zviahin, an designer, manager, car enthusiast.</itunes:subtitle>
<itunes:image href="https://www.ivanzviahin.by/blog/user/userpic-square@2x.jpg?1711411913" />
<itunes:explicit>no</itunes:explicit>

<item>
<title>Коридорные тесты</title>
<guid isPermaLink="false">175</guid>
<link>https://www.ivanzviahin.by/blog/all/koridornye-testy/</link>
<pubDate>Mon, 20 Dec 2021 22:07:27 +0000</pubDate>
<author>Ivan Zviahin</author>
<comments>https://www.ivanzviahin.by/blog/all/koridornye-testy/</comments>
<description>
&lt;p&gt;на русском · &lt;a href="https://ivanzviahin.by/blog/drafts/corridor-tests/"&gt;in english&lt;/a&gt;&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/david-travis-WC6MJ0kRzGw-unsplash-2.jpg" width="2560" height="1295" alt="" /&gt;
&lt;/div&gt;
&lt;h2&gt;Для чего нужны эти ваши тесты&lt;/h2&gt;
&lt;p&gt;Так, на этом этапе у вас уже есть прототипы и сформулированные гипотезы. Теперь осталось потрясти этот мешочек и убедиться, что все работает так, как задумывалось. А точнее проверить интерфейс, иконки, подписи, акценты и так далее.&lt;/p&gt;
&lt;h2&gt;Это просто, расскажу тезисно&lt;/h2&gt;
&lt;p&gt;Гипотезы у нас уже сформулированы, поэтому просто выписываем их. Формулируем задания для пользователей, обязательно письменно.&lt;/p&gt;
&lt;p&gt;Готовим кликабельны прототип, если он нужен. Фиксируем «створы ворот», другими словами конверсионные отметки интерфейса. Например: открытие формы, успешное заполнение, отправка и так далее.&lt;/p&gt;
&lt;p&gt;Ищем участников для тестирования. Проводим тестирование и помечаем всё самое важное. Делаем выводы, анализируем их. Иии бинго, 100% процентов вы измените своё отношение к своим идеальным прототипам.&lt;/p&gt;
&lt;h2&gt;1 шаг. Определить гипотезы&lt;/h2&gt;
&lt;p&gt;Гипотезы — это предположения, которые мы собираемся проверить в ходе исследования. Её лучше формулировать по шаблону: «Если мы сделаем (сама идея), то он сможет положительно повлиять на (критерий успеха), так как (почему это идея хорошая)».&lt;/p&gt;
&lt;h2&gt;2 шаг. Выбрать метод тестирования&lt;/h2&gt;
&lt;p&gt;Все методологии тестирования делятся на немодерируемые и модерируемые по степени самостоятельности выполнения задания респондентами, а также по месту нахождения респондента и интервьюера в момент прохождения тестирования.&lt;/p&gt;
&lt;p&gt;&lt;b&gt;Первый клик.&lt;/b&gt; Участник исследования переходит по ссылке и получает очень простое задание. Например: «Куда бы вы нажали, чтобы найти информацию о лизинговых программах?», «Выберите лизинг для покупки выбранного автомобиля». Фиксируется только первый клик. Если большинство респондентов нажмут «не туда», это сигнализирует о том, что на экране есть юзабилити-проблемы.&lt;/p&gt;
&lt;p&gt;&lt;b&gt;Бок-о-бок.&lt;/b&gt; Суть метода заключается в сравнении двух вариантов и выбора одного по принципу лучшей видимости или узнаваемости целевого объекта. Респондентам предлагается сравнить две картинки интерфейса или выбрать в определенный элемент на двух вариантах изображения. Например: «Найдите и выберите способ оплаты A1», «Какой из вариантов баннера более узнаваем для материала “Машины в лизинг на авэ”».&lt;/p&gt;
&lt;p&gt;&lt;b&gt;На проходимость.&lt;/b&gt; Метод более всего приближен к модерируемому тестированию. Он предполагает присутствие интервьюера рядом с респондентом в момент проведения теста. Мы выбираем конверсионные точки и даём задание респонденту, которое, предположительно, должно его повести по нужному вам пути. В итоге фиксируются факты прохождения точек и делаются пометки о трудностях, возникших у пользователя.&lt;/p&gt;
&lt;p&gt;&lt;b&gt;Модерируемое тестирование.&lt;/b&gt; При такой проверке пользователь выполняет поставленные задачи в отношении продукта или услуги, в то время как исследователь или модератор наблюдает за ним в режиме реального времени. Каждый из вышеперечисленных методов может быть модерируемым. Достоверность результатов и глубина получаемых инсайтов в ходе такого тестирования считается лучшей, чем при применении методов без модерации.&lt;/p&gt;
&lt;h2&gt;3 шаг. Выбор респондентов&lt;/h2&gt;
&lt;p&gt;Для тестировнаия желательны представители целевой аудитории, сталкивающиеся в реальной жизни с задачами, которые описаны в заданиях тестирования. Однако, коридорный тест делает поблажки в этом вопросе, и респондентами могу стать абсолютно все прямые или косвенные пользователи интернета.&lt;/p&gt;
&lt;p&gt;От пяти до восьми респондентов достаточно, чтобы выявить самые грубые проблемы интерфейса. Если все респонденты сталкиваются с одной и той же трудностью — это повод остановить тестирование, внести правки в прототип и начать тестирование новой версии.&lt;/p&gt;
&lt;p&gt;Если ресурсы и время на работу над сайтом сильно ограничены, руководствуемся принципом: «лучше меньше, чем ничего». Три респондента лучше, чем ни одного. Коридорный тест, не привязанный к целевым респондентам, лучше чем никакого.&lt;/p&gt;
&lt;h2&gt;4 шаг. Формирование задания&lt;/h2&gt;
&lt;p&gt;Качество результатов и их объективность напрямую зависит от формулировки вопросов и заданий в тестировании. Чек-лист для формулировки задания:&lt;/p&gt;
&lt;ol start="1"&gt;
&lt;li&gt;Трактуется однозначно.&lt;/li&gt;
&lt;li&gt;Озвучено в полном объёме.&lt;/li&gt;
&lt;li&gt;Релевантно опыту респондента.&lt;/li&gt;
&lt;li&gt;Возможно выполнить без подсказок. &lt;/li&gt;
&lt;/ol&gt;
&lt;h2&gt;5 шаг. Подготовка прототипа&lt;/h2&gt;
&lt;p&gt;Тестовый прототип может быть:&lt;/p&gt;
&lt;ol start="1"&gt;
&lt;li&gt;Интерактивный кликабельный прототип.&lt;/li&gt;
&lt;li&gt;Тестовая версия или работающий сайт.&lt;/li&gt;
&lt;li&gt;Просто картинка.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Чек-лист для проверки прототипа:&lt;/p&gt;
&lt;ol start="1"&gt;
&lt;li&gt;Сценарии, заложенные в задании, выполняются.&lt;/li&gt;
&lt;li&gt;Предусмотрены разные варианты выполнения сценария.&lt;/li&gt;
&lt;li&gt;Тексты, цифры и визуальный контент похожи на настоящие.&lt;/li&gt;
&lt;li&gt;Нет ошибок и опечаток в текстах и цифрах.&lt;/li&gt;
&lt;li&gt;Нет подсказок.&lt;/li&gt;
&lt;li&gt;Заложена возможность быстро вернуться к началу сценария.&lt;/li&gt;
&lt;/ol&gt;
&lt;h2&gt;6 шаг. Процесс тестирования&lt;/h2&gt;
&lt;p&gt;Правильно проведённое тестирование будет менее стрессовым для респондента, будет более простым в модерировании и, следовательно, даст более релевантные результаты. Проще говоря — заткнись, слушай респондента и не мешай ему ничего не понимать.&lt;/p&gt;
&lt;p&gt;Большую часть времени в ходе тестирования говорит респондент. Модератор говорит только в случае крайней необходимости. Любое вмешательство модератора влияет на ход эксперимента и искажает данные.&lt;/p&gt;
&lt;p&gt;Если респондент перестал «мыслить вслух» – напомнить ему об этом: «Итак… Так, вы думаете, что... Что вы видите здесь? Скажите мне, что случилось».&lt;/p&gt;
&lt;p&gt;Вопросы часто заставляют респондента занимать оборонительную позицию. Можно заменить вопросы побудительными фразами типа: «Расскажите мне немного об этом... Опишите более подробно... Поделитесь своими ощущениями... Давайте поговорим об этом... Помогите мне понять...».&lt;/p&gt;
&lt;p&gt;В каких случаях помогать:&lt;/p&gt;
&lt;ol start="1"&gt;
&lt;li&gt;Респондент должен чувствовать, что вы подбадриваете его, а не продукт.&lt;/li&gt;
&lt;li&gt;Если респондент испробовал несколько способов действий и просит о помощи.&lt;/li&gt;
&lt;li&gt;Респондент думает, что задание выполнено, но это не так.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Как это делать:&lt;/p&gt;
&lt;ol start="1"&gt;
&lt;li&gt;Сфокусировать на задании, напомнить цель задания.&lt;/li&gt;
&lt;li&gt;Сделать общий намек: «Вспомните, как вы начали выполнять задание», «Вы уже видели это».&lt;/li&gt;
&lt;li&gt;Сказать прямо, что делать дальше.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Важно зафиксировать моменты, где респондент столкнулся с трудностями. После тестирования задаем респонденту несколько вопросов. Вам необязательно следовать прямым рекомендациям по изменению сайта, которые респондент выскажет в ходе беседы. Выводы и рекомендации обычно делаем из наблюдения за поведением, а не из беседы.&lt;/p&gt;
&lt;h2&gt;7 шаг. Фиксирование результатов и выводы&lt;/h2&gt;
&lt;p&gt;Еще на этапе формулирования гипотез рекомендуем создать таблицу, содержащую декомпозированные гипотезы и задания для тестирования с содержанием шагов пользователя или отбитыми конверсионными точками.&lt;/p&gt;
&lt;p&gt;После каждой встречи фиксируйте в таблице результат тестирования: подтвердилась ли гипотеза, справился ли респондент с заданием без ошибок. Также вносим туда инсайты и прочие пометки, описывающие поведения пользователя на том или ином шаге задания.&lt;/p&gt;
&lt;p&gt;На основе этого документа делаем выводы о подтверждении или неподтверждении гипотез, а также формулируем новые, если это нужно.&lt;/p&gt;
&lt;h2&gt;Таблица для фиксирования результатов&lt;/h2&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/Screenshot-2021-12-21-at-00.57.17-3.jpg" width="2560" height="569" alt="" /&gt;
&lt;div class="e2-text-caption"&gt;&lt;a href="https://docs.google.com/spreadsheets/d/1jUvKw8LC8IRR54LL9nPpM__AIBPysdwt8xXmK4RDAR4/edit?usp=sharing"&gt;Шаблон таблицы в Google Docs&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
</description>
</item>

<item>
<title>Самостоятельная проверка интерфейса</title>
<guid isPermaLink="false">145</guid>
<link>https://www.ivanzviahin.by/blog/all/check-list-to-verify-the-interface/</link>
<pubDate>Sat, 23 May 2020 17:38:25 +0000</pubDate>
<author>Ivan Zviahin</author>
<comments>https://www.ivanzviahin.by/blog/all/check-list-to-verify-the-interface/</comments>
<description>
&lt;p&gt;на русском · &lt;a href="https://ivanzviahin.by/blog/drafts/self-checking-the-interface/"&gt;in english&lt;/a&gt;&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/checklist.png" width="1590" height="628" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;Перед каждым экраном интерфейса я задаю себе вопросы:&lt;/p&gt;
&lt;ol start="1"&gt;
&lt;li&gt;А есть ли в этом случае у человека какая-то привычка? Есть ли в мире какие-то привычные паттерны такого интерфейса? Могу ли я сделать максимально приближённый интерфейс к этой привычке?&lt;/li&gt;
&lt;li&gt;Не заставляю ли я делать что-то пользователя, что может сделать компьютер? Например, поле сразу в фокусе.&lt;/li&gt;
&lt;li&gt;Не потерял ли я данные, которые дал мне пользователь?&lt;/li&gt;
&lt;li&gt;Убрал ли я все лишнее с этого экрана? Есть ли возможность соединить какую-то функциональность? Могу ли я добавить какую-то полезность?&lt;/li&gt;
&lt;li&gt;Я стараюсь представить, что я не видел ничего до попадания на конкретный экран. А понятно ли мне на этом экране всё, с учётом всего вышесказанного?&lt;/li&gt;
&lt;li&gt;Сделал ли я всё, чтобы не использовать модальный интерфейс? Могу ли я показать все функции сразу? Могу ли я использовать квазирежим? Хорошо ли я продумал навигацию стеков?&lt;/li&gt;
&lt;li&gt;Легко ли мне попасть в каждый элемент? Показал ли я области клика?&lt;/li&gt;
&lt;li&gt;Подумал ли я об обратной связи каждого действия? Она должна быть быстрой, постоянной и ненавязчивой. Местами эмоциональный, где то нужно. Подготовил ли я анимацию важных элементов интерфейса? Нужна ли тактильная обратная связь и звуковая?&lt;/li&gt;
&lt;li&gt;А действительно ли мой интерфейс находится в границах ментальной модели пользователя? Могу ли я снизить сопротивление, если выхожу за границы этой модели?&lt;/li&gt;
&lt;li&gt;Систематизирован ли мой интерфейс? Могу ли я что-то переиспользовать? Соответствуют ли все элементы дизайн-системе?&lt;/li&gt;
&lt;li&gt;Выглядит ли мой интерфейс просто, понятно и &lt;a href="https://ivanzviahin.by/blog/all/krasota/"&gt;красиво?&lt;/a&gt; Не потерял ли я простоту, пытаясь объяснить что это за экран?&lt;/li&gt;
&lt;li&gt;Не забыл ли я про даркмод?&lt;/li&gt;
&lt;li&gt;Не забыл ли я про планшеты? Про маленькие смартфоны?&lt;/li&gt;
&lt;li&gt;Не забыл ли я учесть, как будет выглядеть интерфейс с увеличенным шрифтом?&lt;/li&gt;
&lt;li&gt;Описал ли я все крайние состояния? Сколько строк текста? Как позиционировать картинки и так далее. Как выглядит экран без данных?&lt;/li&gt;
&lt;li&gt;Нет ли лишних лоудеров? В идеале не должно быть лоудеров вообще. Нужны ли скелетоны?&lt;/li&gt;
&lt;li&gt;Если есть пуши, то не забыл ли я показать куда они ведут?&lt;/li&gt;
&lt;li&gt;Обсудил ли я синтаксис с редактором?&lt;/li&gt;
&lt;li&gt;Добавил ли я вишенку на торт? Сделал ли я что-то мелкое, но важное, что удивит пользователя?&lt;/li&gt;
&lt;/ol&gt;
</description>
</item>

<item>
<title>Cайт «Маскот»</title>
<guid isPermaLink="false">142</guid>
<link>https://www.ivanzviahin.by/blog/all/massot-3/</link>
<pubDate>Wed, 29 Apr 2020 12:00:47 +0000</pubDate>
<author>Ivan Zviahin</author>
<comments>https://www.ivanzviahin.by/blog/all/massot-3/</comments>
<description>
&lt;p&gt;Версия сайта: &lt;a href="https://ivanzviahin.by/blog/all/mascot-2/"&gt;первая&lt;/a&gt; · вторая&lt;/p&gt;
&lt;p&gt;«Маскот» — это автомобильная премия в Беларуси. Сайт премии решает множество задач. Нужно как-то познакомить с условиями будущих участников премии и дать возможность подать заявку на участие. Упомянуть всех партнёров. Рассказать про номинации, методику и познакомить с экспертным советом. А ещё дать возможность проголосовать потребителям за автомобили, которые попадут в отборочный тур. При этом провести розыгрыш призов среди участников голосования, чтобы они не ленились голосовать.&lt;/p&gt;
&lt;p&gt;Плюс в этом году мы захотели сделать более крутую идентификацию бренда. Избавиться от ярких акцентов, ведь мы премия, а не детский сад. Сделать навигацию, чтобы проще было решать конкретные задачи.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/-c----copy-2.jpg" width="1921" height="12320" alt="" /&gt;
&lt;/div&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/file.gif" width="1500" height="700" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;С новым логотипом нам помогла дизайн-студия &lt;a href="https://right.by"&gt;«Райт»&lt;/a&gt; и вместе у нас получилось:&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;«Айдентика, для Автомобильной премии «Маскот». Это ему ветер в лицо, это у него слезятся глаза, это он несется навстречу... А вместе с ним и мы. В основе дизайн-решения – шрифтовая композиция. Буква А в названии прекрасно анимируется: мы как бы видим летящую навстречу разделительной полосой дорогу глазами нашего маскота-талисмана. Для справки: маскот – термин автомобильный, обозначающий эмблему на радиаторе или капоте автомобиля.»&lt;br /&gt;
&lt;i&gt;Алексей Шклянко, арт-директор в «Райт»&lt;/i&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;Участники премии&lt;/h2&gt;
&lt;p&gt;Все участники премии — это автодилеры. А предмет оценки — новые автомобили. Поэтому на сайте нужно было выстроить журнал всех автомобилей, которые продавались в 2019 году:&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/-copy.jpg" width="1921" height="6446" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;При каждой новой загрузке страницы мы собираем журнал машин заново, чтобы никто не обиделся на публикацию без фотографии. Конечно же, хочется посмотреть все картинки автомобилей. Для этого мы сделали листалку машин в рамках каждой номинации:&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/-copy-2.jpg" width="1921" height="1333" alt="" /&gt;
&lt;/div&gt;
&lt;h2&gt;Информационные партнёры&lt;/h2&gt;
&lt;p&gt;Одна из задач, рассказать про информационных партнёров. Чтобы не прятать их в конце страницы, мы аккуратно подмешали их в ленту журнала автомобилей и в конце каждой страницы.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/-copy-3_1.jpg" width="1921" height="1424" alt="" /&gt;
&lt;/div&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/-copy-4.jpg" width="1921" height="1392" alt="" /&gt;
&lt;/div&gt;
&lt;h2&gt;Методика определения победителя&lt;/h2&gt;
&lt;p&gt;Четыре мощных этапа. Итого, в каждой номинации будет два победителя: по мнению народа и по мнению экспертов. Или один, если мнение экспертов и народа совпадёт.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/-2-copy-2.jpg" width="1921" height="4033" alt="" /&gt;
&lt;/div&gt;
&lt;h2&gt;Розыгрыш призов&lt;/h2&gt;
&lt;p&gt;Для привлечения потребителей, которые участвовали в голосовании отборочного этапа, мы закатили розыгрыш призов:&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/--copy-2.jpg" width="1921" height="3241" alt="" /&gt;
&lt;/div&gt;
&lt;h2&gt;Голосование потребителей&lt;/h2&gt;
&lt;p&gt;Для того, чтобы определить 5 финалистов в каждой номинации, мы запустили голосовалку отборочного этапа прямо на сайте:&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/-5.1.jpg" width="1921" height="1280" alt="" /&gt;
&lt;/div&gt;
&lt;h2&gt;Анонс победителей&lt;/h2&gt;
&lt;p&gt;Помимо масштабного онлайн мероприятия, мы сделали анонс победителей на сайте. При наведении курсором на фотографию она увеличивается почти на весь экран.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/-5.1-copy.jpg" width="1921" height="1466" alt="" /&gt;
&lt;/div&gt;
&lt;h2&gt;Мобильные устройства&lt;/h2&gt;
&lt;p&gt;Всё это дело, конечно же, работает на мобильных устройствах:&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/-5.1-copy-2.jpg" width="1656" height="1164" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;Для сайта собрано около 50 экранов и состояний. Посмотрите сами: &lt;a href="https://mascot.by"&gt;mascot.by&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Версия сайта: &lt;a href="https://ivanzviahin.by/blog/all/mascot-2/"&gt;первая&lt;/a&gt; · вторая&lt;/p&gt;
&lt;h2&gt;Пресса&lt;/h2&gt;
&lt;ol start="1"&gt;
&lt;li&gt;tut.by. &lt;a href="https://news.tut.by/society/674822.html"&gt;«Маскот-2019». Голосуйте — и получите шанс выиграть крутые призы&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;tut.by. &lt;a href="https://news.tut.by/press/681480.html"&gt;Премия онлайн. В Беларуси выбрали автомобиль года&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Комсомольская правда. &lt;a href="https://www.kp.by/daily/27098.7/4171042/"&gt;Голосуй за самый лучший автомобиль! Стартовал «МАСКОТ-2019»&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Комсомольская правда. &lt;a href="https://www.kp.by/daily/27121/4204009/"&gt;От крутых до бюджетных: белорусы назвали лучшие автомобили&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;marketing.by. &lt;a href="https://marketing.by/novosti-rynka/startovala-premiya-maskot-2019-gde-mozhno-progolosovat-za-luchshiy-avtomobil/"&gt;Стартовала премия, где можно проголосовать за лучший автомобиль&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;marketing.by. &lt;a href="https://marketing.by/novosti-rynka/avtopremiya-maskot-2019-mozhno-progolosovat-i-vyigrat-krutye-prizy/"&gt;Автопремия «МАСКОТ-2019»: можно проголосовать и выиграть крутые призы&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;marketing.by. &lt;a href="https://marketing.by/novosti-rynka/ot-krutykh-do-byudzhetnykh-belarusy-nazvali-luchshie-avtomobili-v-ramkakh-premii-maskot/"&gt;От крутых до бюджетных: беларусы назвали лучшие автомобили&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Радио Мир. &lt;a href="https://mir24.tv/news/16406587/avtozvuk-goda-v-belarusi-vybrali-mashiny-gde-luchshe-vsego-zvuchit-radio-mir"&gt;В Беларуси выбрали машины, где лучше всего звучит радио «МИР»&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;City dog. &lt;a href="https://citydog.by/post/zaden-mascot-vote/"&gt;Тут начали голосование за любимое авто минчан. Можно получить приз&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;City dog. &lt;a href="https://citydog.by/post/zaden-avto-mascot/"&gt;Белорусы составили топ лучших автомобилей. Ваш в списке?&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;grodnonews.by. &lt;a href="https://grodnonews.by/news/transport/ot_krossovera_do_pikapa_belorusy_sostavili_top_luchshikh_avto_2019_goda.html"&gt;От кроссовера до пикапа. Белорусы составили топ лучших авто 2019 года&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;minsknews.by. &lt;a href="https://minsknews.by/ot-krossovera-do-pikapa-belorusy-sostavili-top-luchshih-avto-2019-goda/"&gt;От кроссовера до пикапа. Белорусы составили топ лучших авто 2019 года&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;foerch.by. &lt;a href="https://foerch.by/news/vybran-avtomobil-goda-v-belarusi/"&gt;Выбран автомобиль года в Беларуси&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;profi-forex.org. &lt;a href="http://www.profi-forex.org/auto/entry1008317981.html"&gt;В Беларуси выбрали лучший автомобиль года&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;profi-forex.org. &lt;a href="http://www.profi-forex.by/news/entry5000041741.html"&gt;Кто получил престижную автопремию “Маскот”?&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;finanso.net. &lt;a href="http://www.finanso.net/world/25180-v-belarusi-sostoyalos-vruchenie-prestizhnoy-avtopremii-maskot.html"&gt;В Беларуси состоялось вручение престижной автопремии “Маскот”&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Рамблер Авто. &lt;a href="https://auto.rambler.ru/roadaccidents/44041162-avtozvuk-goda-v-belarusi-vybrali-mashiny-gde-luchshe-vsego-zvuchit-radio-mir/"&gt;В Беларуси выбрали машины, где лучше всего звучит радио «МИР»&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Skoda. &lt;a href="https://www.skoda-auto.by/news/news-detail/maskot"&gt;ŠKODA KODIAQ – автомобиль года по мнению экспертов.&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Volkswagen. &lt;a href="https://www.volkswagen.by/news/2020/aprel/podvedeny-itogi-avtomobilnoy-premii--maskot-2019---volkswagen-oderzhal-4-pobedy/"&gt;Volkswagen одержал 4 победы&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Атлант-М. &lt;a href="https://atlantm.by/news/avtomobili-kholdinga-atlant-m-zavoevali-14-nagrad-avtopremii-maskot-2019/?fbclid=IwAR2OmLQW6nPQa7j2bHq_lac6dLFLgdxtRpmOhVMTQi2biTY3k0fEzo-zFPI"&gt;Автомобили холдинга «Атлант-М» завоевали 14 наград&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;BAA. &lt;a href="https://auto-baa.by/news/skoda-21042020"&gt;ŠKODA KODIAQ – автомобиль года по мнению экспертов&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;KIA. &lt;a href="https://www.kia.by/about/news/~showNews/kia_ceed_i_kia_x-line_priznany_pobeditelyami_avtomobilnoy_premii_maskot-2019"&gt;KIA Ceed и KIA Rio X-Line признаны победителями автомобильной премии&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;av.by. &lt;a href="https://av.by/news/index.php?event=View&amp;news_id=45616"&gt;«МАСКОТ-2019»: старт дан! Голосуйте за самый лучший автомобиль&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;av.by. &lt;a href="https://av.by/news/index.php?event=View&amp;news_id=45660"&gt;«Маскот-2019». Выберите машину — получите бонус&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;av.by. &lt;a href="https://av.by/news/index.php?event=View&amp;news_id=45688"&gt;«Маскот-2019». Последний день, чтобы получить шанс выиграть призы от Huawei&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;av.by. &lt;a href="https://av.by/news/index.php?event=View&amp;news_id=45754"&gt;«В этом году будет еще лучше». Чего эксперты ждут от автопремии «Маскот-2019»&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;av.by. &lt;a href="https://av.by/news/index.php?event=View&amp;news_id=45792"&gt;«Маскот-2019». Белорусы определят лучший автомобиль прошлого года&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;av.by. &lt;a href="https://av.by/news/index.php?event=View&amp;news_id=45833"&gt;«Маскот-2019». Церемония награждения пройдет в новом формате&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;av.by. &lt;a href="https://av.by/news/index.php?event=View&amp;news_id=45911"&gt;«Маскот-2019». Церемония награждения состоялась!&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;av.by. &lt;a href="https://av.by/news/index.php?event=View&amp;news_id=45932"&gt;От крутых до бюджетных: белорусы назвали лучшие автомобили&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;hr /&gt;
&lt;p&gt;Чтобы не пропустить новую заметку — подпишитесь на мой &lt;a href="https://t.me/ivanzviahin"&gt;канал в Телеграме&lt;/a&gt; или &lt;a href="http://ivanzviahin.by/blog/rss/"&gt;RSS&lt;/a&gt;.&lt;/p&gt;
</description>
</item>

<item>
<title>Микросессии</title>
<guid isPermaLink="false">127</guid>
<link>https://www.ivanzviahin.by/blog/all/microsessions/</link>
<pubDate>Wed, 08 Jan 2020 15:55:58 +0000</pubDate>
<author>Ivan Zviahin</author>
<comments>https://www.ivanzviahin.by/blog/all/microsessions/</comments>
<description>
&lt;p&gt;Немного интересного про микросессии в мобильных приложениях. Это такие сессии, которые длятся не более 15 секунд. Есть много мобильных задач, которые мы выполняем каждый день. Это какие-то простые задачи, которые мы выполняем за несколько десятков секунд. Например, установка будильника или просмотр календаря на день.&lt;/p&gt;
&lt;p&gt;Конечно же, приложение нужно спроектировать как-то так, чтобы &lt;a href="https://ivanzviahin.by/blog/all/urovenprorabotki/"&gt;магистральные сценарии&lt;/a&gt; были легко доступны. Но вы можете пойти ещё дальше и позволить людям выполнять их не заходя в приложение. Вот 4 способа, которые я подсмотрел.&lt;/p&gt;
&lt;h2&gt;Уведомления&lt;/h2&gt;
&lt;p&gt;Уведомления — это самый популярный способ, которым приложения сегодня поддерживают микросессии. Уведомления дают по крайней мере одну точку входа в приложение, нажатие на уведомление открывает приложение. Но во многих случаях их функция заключается в том, чтобы информировать человека о состоянии дел. Когда уведомление разработано правильно, пользователи часто могут получить всю необходимую им информацию из текста уведомления и могут не нуждаться в запуске полного приложения.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/Artboard_2.jpg" width="1979" height="1334" alt="" /&gt;
&lt;div class="e2-text-caption"&gt;Яндекс Такси рассказывает, что жёлтый Хендай Солярис с номером ТУ54177 ждёт вас&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;В некоторых случаях можно поддержать основные действия, которые применяются к элементу уведомления в самом уведомлении. Это дает пользователю возможность выполнить задачу, не запуская приложение. Например, для новостной статьи подходящим действием может быть сохранение ее для дальнейшего чтения, тогда как для уведомления по электронной почте может быть полезно удалить сообщение, а для календаря, например, вот такие:&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/Artboard_3.jpg" width="1979" height="1334" alt="" /&gt;
&lt;div class="e2-text-caption"&gt;Календарь предлагает дополнительные действия с событием&lt;/div&gt;
&lt;/div&gt;
&lt;h2&gt;Виджеты&lt;/h2&gt;
&lt;p&gt;Виджеты — это сжатые представления приложения, которые обычно представляют один фрагмент данных, представляющий состояние приложения. Они идеально подходят для отслеживания часто меняющейся информации. Например, погоды или списка новых новостей новостного портала. Как правило, они доступны с главного экрана телефона, если пользователь решает добавить соответствующий виджет на экран.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/ios13-iphone-xs-widget-social-card.jpg" width="1200" height="630" alt="" /&gt;
&lt;/div&gt;
&lt;h2&gt;Быстрые действия&lt;/h2&gt;
&lt;p&gt;Последние версии iOS и Android поддерживают доступ к действиям в приложении непосредственно с рабочего стола, с помощью длинного нажатия. Быстрые действия избавляют пользователей от необходимости запускать приложение и находить внутри него точку входа для задачи, которую они хотят выполнить. Быстрые действия не должны включать только задачи, которые могут быть микросессионны — вместо этого они должны ссылаться на задачи, которые важны для ваших пользователей.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/Artboard_4.jpg" width="2232" height="1614" alt="" /&gt;
&lt;/div&gt;
&lt;h2&gt;Интеллектуальные помощники&lt;/h2&gt;
&lt;p&gt;И приложения для iOS, и для Android могут использовать интеллектуальных помощников, чтобы позволить пользователям быстро взаимодействовать с приложением с помощью голоса. Это отличный способ для решения задач человека без входа в приложение.&lt;/p&gt;
&lt;h2&gt;Выводы&lt;/h2&gt;
&lt;p&gt;Если на изменение дизайна или инновации потребуется много денег, но это принесет пользу лишь нескольким вашим пользователям — это путь в пропасть. ROI, вероятно, слишком низок. Но, в отличие от других инновационных разработок, поддержку микросессий легко реализовать.&lt;/p&gt;
</description>
</item>

<item>
<title>Сценарии поиска информации</title>
<guid isPermaLink="false">128</guid>
<link>https://www.ivanzviahin.by/blog/all/search-scenery/</link>
<pubDate>Sat, 30 Nov 2019 16:36:07 +0000</pubDate>
<author>Ivan Zviahin</author>
<comments>https://www.ivanzviahin.by/blog/all/search-scenery/</comments>
<description>
&lt;p&gt;Для себя я недавно выяснил одну интересную штуку. Если продукт решает проблему поиска чего-то, то скорее всего есть три сценария поиска информации для человека. Первый, человек чётко знает, что ищет. Второй, человек не знает, что хочет и пытается понять что ему нужно. Третий, человек видел где-то что-то и пытается это найти.&lt;/p&gt;
&lt;h2&gt;Поиск известного&lt;/h2&gt;
&lt;p&gt;В этом случае человек знает, что ищет. Дайте ему легко ввести свой запрос, чтобы максимально быстро получить ответ. Это может быть голосовой интерфейс, текстовый поиск или быстрые ссылки. Как пример, покажу фрагмент сайта по поиску объявлений о продаже авто:&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/Screen-Shot-2019-11-26-at-20.04.33.png" width="1850" height="1070" alt="" /&gt;
&lt;/div&gt;
&lt;h2&gt;Поиск неизвестного&lt;/h2&gt;
&lt;p&gt;Человек не знает что, хочет. В этом случае ему нужно помочь определить подходящий вариант по потребностям. Если опять взять, например, сайт по поиску объявлений о продаже авто, то это может быть: тип кузова, ценовой диапазон, количество мест и так далее.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/Screen-Shot-2019-11-26-at-19.50.50.png" width="1834" height="826" alt="" /&gt;
&lt;/div&gt;
&lt;h2&gt;Поиск увиденного&lt;/h2&gt;
&lt;p&gt;В этом случае человек ищет то, что когда-то видел, но не может вспомнить что это. Тут важно как-то показать ему что есть на сайте визуально и дать возможность последовательно убрать лишнее и легко вернуться на шаг назад.&lt;/p&gt;
&lt;hr /&gt;
&lt;p&gt;Чтобы не пропустить новую заметку — подпишитесь на мой &lt;a href="https://t.me/ivanzviahin"&gt;канал в Телеграме&lt;/a&gt; или &lt;a href="http://ivanzviahin.by/blog/rss/"&gt;RSS&lt;/a&gt;.&lt;/p&gt;
</description>
</item>

<item>
<title>Макетная актуальность</title>
<guid isPermaLink="false">125</guid>
<link>https://www.ivanzviahin.by/blog/all/maket/</link>
<pubDate>Tue, 29 Oct 2019 16:02:18 +0000</pubDate>
<author>Ivan Zviahin</author>
<comments>https://www.ivanzviahin.by/blog/all/maket/</comments>
<description>
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/1547750932_maxresdefault.jpg" width="1280" height="720" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;Проектируя что-то новое на основании старого, дизайнеру необходимо куда-то обращаться за информацией. Например, как это работает, а как выглядит этот модуль, как себя поведет система?&lt;/p&gt;
&lt;p&gt;У нас в команде есть 5 источников таких знаний:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;требования в Jira,&lt;/li&gt;
&lt;li&gt;макеты в Zeplin,&lt;/li&gt;
&lt;li&gt;статическая вёрстка,&lt;/li&gt;
&lt;li&gt;cтейджинг,&lt;/li&gt;
&lt;li&gt;голова дизайнера.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Итак, разложим каждый по характеристикам: лёгкость поиска, читаемость, близость к правде, видимость деталей.&lt;/p&gt;
&lt;h2&gt;Требования в Jira&lt;/h2&gt;
&lt;p&gt;Когда продукт большой, найти нужные знания бывает невозможно, а если и возможно, то это долго и неудобно.  Текст и блок-схемы воспринимаются намного хуже, чем картинки. Читаемость таких знаний низкая. Как правило, многие визуальные детали есть только в макетах и не описаны в требованиях.&lt;/p&gt;
&lt;h2&gt;Макеты в Zeplin&lt;/h2&gt;
&lt;p&gt;Макеты легко найти, но тяжело поддерживать. У них понятная структура, нейминг и есть превьюшки. Они близки к правде и показывают почти все состояния элементов интерфейса и детали сценариев.&lt;/p&gt;
&lt;h2&gt;Статическая вёрстка&lt;/h2&gt;
&lt;p&gt;К ним простой доступ по домену. Есть структура как у макетов, но не настолько детальная. Они близки к правде, так как они и есть правда. Как правило, верстка не показывают все состояния элементов интерфейса и детали сценариев.&lt;/p&gt;
&lt;h2&gt;Стейджинг&lt;/h2&gt;
&lt;p&gt;К ним простой доступ по домену. Он имеет горизонтальную структуру и порой, чтобы увидеть какой-то экран, нужно сделать много действий, взаимодействовать с админкой или с чем-то ещё. Он самый правдивый из всех, но все детали сценариев и состояния элементов интерфейса трудно воспроизвести.&lt;/p&gt;
&lt;h2&gt;Голова дизайнера&lt;/h2&gt;
&lt;p&gt;К сожалению в свою голову всё не помещается, а чужая часто недоступна. Дизайнер скорее всего хорошо знает структуру, детали и состояния, но это не точно. Он легко может ошибиться или забыть.&lt;/p&gt;
&lt;h2&gt;Вывод&lt;/h2&gt;
&lt;div class="e2-text-table"&gt;
&lt;table cellpadding="0" cellspacing="0" border="0"&gt;
&lt;tr&gt;
&lt;td style="text-align: center"&gt;&lt;/td&gt;
&lt;td&gt;Требования&lt;/td&gt;
&lt;td&gt;Макеты&lt;/td&gt;
&lt;td&gt;Вёрстка&lt;/td&gt;
&lt;td&gt;Стейджинг&lt;/td&gt;
&lt;td&gt;Голова&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Лёгкость поиска&lt;/td&gt;
&lt;td&gt;−&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;−&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Читаемость&lt;/td&gt;
&lt;td&gt;−&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;−&lt;/td&gt;
&lt;td&gt;−&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Правдивость&lt;/td&gt;
&lt;td&gt;+/−&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+/−&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Видимость деталей&lt;/td&gt;
&lt;td&gt;−&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;−&lt;/td&gt;
&lt;td&gt;−&lt;/td&gt;
&lt;td&gt;−&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;b&gt;Итого&lt;/b&gt;&lt;/td&gt;
&lt;td&gt;&lt;b&gt;−3&lt;/b&gt;&lt;/td&gt;
&lt;td&gt;&lt;b&gt;4&lt;/b&gt;&lt;/td&gt;
&lt;td&gt;&lt;b&gt;3&lt;/b&gt;&lt;/td&gt;
&lt;td&gt;&lt;b&gt;0&lt;/b&gt;&lt;/td&gt;
&lt;td&gt;&lt;b&gt;−3&lt;/b&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/div&gt;
&lt;p&gt;Вот и решайте теперь, стоит держать макеты актуальными или нет.&lt;/p&gt;
&lt;hr /&gt;
&lt;p&gt;Чтобы не пропустить новую заметку — подпишитесь на мой &lt;a href="https://t.me/ivanzviahin"&gt;канал в Телеграме&lt;/a&gt; или &lt;a href="http://ivanzviahin.by/blog/rss/"&gt;RSS&lt;/a&gt;.&lt;/p&gt;
</description>
</item>

<item>
<title>Радиоэмоции 1.0</title>
<guid isPermaLink="false">109</guid>
<link>https://www.ivanzviahin.by/blog/all/radioemodji/</link>
<pubDate>Thu, 23 May 2019 09:05:08 +0000</pubDate>
<author>Ivan Zviahin</author>
<comments>https://www.ivanzviahin.by/blog/all/radioemodji/</comments>
<description>
&lt;p&gt;Радиоэмоции — это плагин, который поможет узнать что думают о вашем контенте пользователи. Семь эмоций в наборе, любой текст на кнопках.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/Artboard_1.jpg" width="1512" height="168" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;Пользователи оставляют свои эмоции, плагин считает их и выводит количество:&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/1-emo.jpg" width="2378" height="1731" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;Счётчики подключаются к базе данных владельца сайта, авторизация работает по технологии Browser Fingerprint. Количество, текст и изображения эмоций можно менять.&lt;/p&gt;
&lt;p&gt;Дизайн и идея — я, программист — Ольга Мохова.&lt;/p&gt;
&lt;hr /&gt;
&lt;p&gt;Плагин бесплатный для всех: &lt;a href="https://radioemoji.intuition.team"&gt;radioemoji.intuition.team&lt;/a&gt;&lt;/p&gt;
&lt;hr /&gt;
&lt;p&gt;Чтобы не пропустить новую заметку — подпишитесь на мой &lt;a href="https://t.me/ivanzviahin"&gt;канал в Телеграме&lt;/a&gt; или &lt;a href="http://ivanzviahin.by/blog/rss/"&gt;RSS&lt;/a&gt;.&lt;/p&gt;
</description>
</item>

<item>
<title>Cайт «Маскот»</title>
<guid isPermaLink="false">108</guid>
<link>https://www.ivanzviahin.by/blog/all/mascot-2/</link>
<pubDate>Mon, 13 May 2019 20:06:58 +0000</pubDate>
<author>Ivan Zviahin</author>
<comments>https://www.ivanzviahin.by/blog/all/mascot-2/</comments>
<description>
&lt;p&gt;Версия сайта: первая · &lt;a href="https://ivanzviahin.by/blog/all/massot-3/"&gt;вторая&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;«Маскот» — это автомобильная премия в Беларуси. Сайт премии решает множество задач. Нужно как-то познакомить с условиями будущих участников премии и дать возможность подать заявку на участие. Упомянуть всех партнёров. Рассказать про номинации, методику и познакомить с экспертным советом. А ещё дать возможность проголосовать потребителям за автомобили, которые попадут в отборочный тур. При этом провести розыгрыш призов среди участников голосования, чтобы они не ленились голосовать.&lt;/p&gt;
&lt;h2&gt;Участники премии&lt;/h2&gt;
&lt;p&gt;Все участники премии — это автодилеры. А предмет оценки — новые автомобили. Поэтому на сайте нужно было выстроить журнал всех автомобилей, которые продавались в 2018 году:&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/preview_1.jpg" width="1408" height="6769" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;При каждой новой загрузке страницы, мы собираем журнал машин заново, чтобы никто не обиделся на публикацию без фотографии. Конечно же, хочется посмотреть все картинки автомобилей. Для этого мы сделали листалку машин в рамках каждой номинации:&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/preview-fotorama.jpg" width="1408" height="1022" alt="" /&gt;
&lt;/div&gt;
&lt;h2&gt;Информационные партнеры&lt;/h2&gt;
&lt;p&gt;Одна из задач, рассказать про информационных партнёров. Чтобы не прятать их в конце страницы, мы аккуратно подмешали их в ленту журнала автомобилей:&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/preview-partners_1.jpg" width="1408" height="4105" alt="" /&gt;
&lt;/div&gt;
&lt;h2&gt;Методика определения победителя&lt;/h2&gt;
&lt;p&gt;Первый этап — отборочный: онлайн голосование потребителей прямо у нас на сайте. Отбор пяти самых лучших авто для второго и третьего этапов. Подробнее про это расскажу позже.&lt;/p&gt;
&lt;p&gt;Второй — определение победителя в каждой номинации потребителями, благодаря закрытой суперголосовалке по всей Беларуси. А точнее, исследовательская компания провела онлайн-интервью с тысячей белорусов. Выборка учитывала регион, возраст, пол и образование участников. Из пяти финалистов первого этапа определился объективный победитель в каждой номинации.&lt;/p&gt;
&lt;p&gt;Третий — определение победителя экспертным советом. Все шесть экспертов выстроились в ряд. Один из них уже мелькал в ленте журнала автомобилей выше с яркой цитатой.&lt;/p&gt;
&lt;p&gt;Итого, в каждой номинации будет два победителя: по мнению народа и по мнению экспертов. Или один, если мнение экспертов и народа совпадёт.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/preview-method.jpg" width="1408" height="2211" alt="" /&gt;
&lt;/div&gt;
&lt;h2&gt;Розыгрыш призов&lt;/h2&gt;
&lt;p&gt;Для привлечения потребителей, которые участвовали в голосовании отборочного этапа, мы закатили розыгрыш призов:&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/preview-presents.jpg" width="1408" height="2668" alt="" /&gt;
&lt;/div&gt;
&lt;h2&gt;Голосование потребителей&lt;/h2&gt;
&lt;p&gt;Для того, чтобы определить 5 финалистов в каждой номинации, мы запустили голосовалку отборочного этапа прямо на сайте. Верификация номера телефона:&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/preview-golosovanie-1.jpg" width="1408" height="1003" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;Само голосование. Чтобы избежать сравнения автомобилей между собой и повысить объективность голосования, мы показываем только один автомобиль на экране. Так сказать, эффект «Тиндера».&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/preview-golosovanie-2.jpg" width="1408" height="1003" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;Личные данные участника:&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/preview-golosovanie-3.jpg" width="1408" height="1003" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;Благодарность за участие в виде промокода на автомобильные товары в онлайн-гипермаркете:&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/preview-golosovanie-4.jpg" width="1408" height="1003" alt="" /&gt;
&lt;/div&gt;
&lt;h2&gt;Анонс победителей&lt;/h2&gt;
&lt;p&gt;Помимо масштабного офлайн мероприятия, мы сделали анонс победителей на сайте:&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/preview-winners.jpg" width="1408" height="15558" alt="" /&gt;
&lt;/div&gt;
&lt;h2&gt;Мобильные устройства&lt;/h2&gt;
&lt;p&gt;Все это дело, конечно же, работает на мобильных устройствах:&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/mob.jpg" width="2560" height="2548.8574537541" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;Для сайта собрано около 50 экранов и состояний. В жизни есть ещё трёхмерный логотип и переливающиеся кнопки: &lt;a href="https://mascot.by"&gt;mascot.by&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Версия сайта: первая · &lt;a href="https://ivanzviahin.by/blog/all/massot-3/"&gt;вторая&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;Пресса&lt;/h2&gt;
&lt;ol start="1"&gt;
&lt;li&gt;Marketing.by &lt;a href="http://marketing.by/sobytiya/v-minske-nazvali-luchshie-avtomobilnye-marki-po-versii-ekspertov-i-potrebiteley/"&gt;В Минске назвали лучшие автомобильные марки&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Realt.by &lt;a href="https://realt.by/news/article/24622/"&gt;Знай лучших. В Беларуси выбрали автомобиль года&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Домкрат &lt;a href="http://www.domkrat.by/news/progolosuy-za-lyubimye-avto-v-avtomobilnoy-premii-maskot-2018/"&gt;Проголосуйте за любимые авто&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;av.by &lt;a href="https://av.by/news/index.php?event=View&amp;news_id=44289"&gt;Знай лучших. В Беларуси выбрали автомобиль года&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Belretail.by &lt;a href="https://belretail.by/news/nazvanyi-luchshie-avtomobilnyie-marki-v-belarusi-itogi-premii-maskot"&gt;Итоги премии «МАСКОТ 2018»&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Tut.by &lt;a href="https://news.tut.by/culture/636173.html"&gt;Знай лучших. В Беларуси выбрали автомобиль года&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;av.by &lt;a href="https://av.by/news/index.php?event=View&amp;news_id=44078"&gt;Голосуем за лучший автомобиль года в Беларуси&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Marketing.by &lt;a href="http://marketing.by/novosti-rynka/av-by-provodit-avtomobilnuyu-premiyu-maskot-2018-dlya-uluchsheniya-kachestva-industrii-v-strane/"&gt;av.by проводит автомобильную премию для улучшения качества индустрии&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Volkswagen &lt;a href="https://www.volkswagen.by/news/2019/aprel/maskot-2018/"&gt;Подведены итоги автомобильной премии&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Skoda &lt;a href="https://www.skoda-auto.by/news/news-detail/mackot"&gt;Skoda Kodiaq и Skoda Octavia – победители премии&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Радио Мир &lt;a href="https://radiomir.by/news/ekonomika/item/29042-nazvany-avtomobili-s-luchshim-shtatnym-avtozvukom-po-versii-radio-mir"&gt;Названы автомобили с лучшим штатным автозвуком&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;hr /&gt;
&lt;p&gt;Чтобы не пропустить новую заметку — подпишитесь на мой &lt;a href="https://t.me/ivanzviahin"&gt;канал в Телеграме&lt;/a&gt; или &lt;a href="http://ivanzviahin.by/blog/rss/"&gt;RSS&lt;/a&gt;.&lt;/p&gt;
</description>
</item>

<item>
<title>Когнитивное сопротивление</title>
<guid isPermaLink="false">28</guid>
<link>https://www.ivanzviahin.by/blog/all/cognitive-resistance/</link>
<pubDate>Sun, 30 Dec 2018 14:59:39 +0000</pubDate>
<author>Ivan Zviahin</author>
<comments>https://www.ivanzviahin.by/blog/all/cognitive-resistance/</comments>
<description>
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/Mr-Bean-s-holiday-mr-bean-28500295-1366-738.jpg" width="1366" height="738" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;Пора бы точно разобраться в определении. Может кому-то тоже будет полезно. Попробую пересказать на мамином языке.&lt;/p&gt;
&lt;p&gt;Так вот, когнитивное сопротивление — это сопротивление, с которым сталкивается человеческий разум, когда ему нужно разобраться в сложной системе правил, которые зависят ещё и от контекста использования продукта. Купер уверяет, что все современные информационные продукты имеют высокое когнитивное сопротивление.&lt;/p&gt;
&lt;h2&gt;Высокое&lt;/h2&gt;
&lt;p&gt;Это когда пользователь смотрит на интерфейс и понятия не имеет что произойдет, когда начнется взаимодействие между продуктом и пользователем. Например, крутилка в стиральной машине. В одном режиме она регулирует температуру, а в другом — количество оборотов. Человек без объяснения или предыдущего опыта работы с таким интерфейсом не разберется в нём.&lt;/p&gt;
&lt;h2&gt;Нормальное&lt;/h2&gt;
&lt;p&gt;Другой пример, классическая гиперссылка. У нее есть два параметра понятности. Подчёркивание и цвет. Сразу ясно, что нажав на нее, мы перейдем на другую страницу. И даже больше, текст может точно описать на какую именно.&lt;/p&gt;
&lt;h2&gt;Низкое&lt;/h2&gt;
&lt;p&gt;Столовая ложка. Сразу понятно, что с ней можно сделать.&lt;/p&gt;
</description>
</item>

<item>
<title>Концепт приложения Яндекс.Дом</title>
<guid isPermaLink="false">13</guid>
<link>https://www.ivanzviahin.by/blog/all/yandex-home/</link>
<pubDate>Fri, 27 Jul 2018 15:35:38 +0000</pubDate>
<author>Ivan Zviahin</author>
<comments>https://www.ivanzviahin.by/blog/all/yandex-home/</comments>
<description>
&lt;p&gt;В начале 2016 года я делал задание для школы дизайнеров Яндекса. Нужно было представить, что Яндекс разрабатывает свою систему «умного дома». И предложить концепт мобильного приложения.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/jetblack_v2.jpg" width="1918" height="1080" alt="" /&gt;
&lt;/div&gt;
&lt;h2&gt;Задача&lt;/h2&gt;
&lt;p&gt;Улучшить взаимодействие между человеком и домом. Создать надёжный, комфортный и безопасный сценарий использования.&lt;/p&gt;
&lt;h2&gt;Решение&lt;/h2&gt;
&lt;ol start="1"&gt;
&lt;li&gt;Разработать комфортное приложение для двух аудиторий: для «быстрых» людей и для изучающих.&lt;/li&gt;
&lt;li&gt;Дать возможность пользователю показать статусность и сэкономить.&lt;/li&gt;
&lt;li&gt;Закрыть ежедневные потребности и вопрос безопасности.&lt;/li&gt;
&lt;li&gt;Сохранить визуальный язык Яндекса 2016 года.&lt;/li&gt;
&lt;li&gt;Дополнить приложение другими полезными сервисами Яндекса.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Я подошёл к заданию реально и за основу взял «однушку» с небольшим количеством «умных» предметов.&lt;/p&gt;
&lt;p&gt;Нарисовал схему квартиры:&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/shema.jpg" width="2560" height="1428.91966759" alt="" /&gt;
&lt;/div&gt;
&lt;div class="e2-text-table"&gt;
&lt;table cellpadding="0" cellspacing="0" border="0"&gt;
&lt;tr&gt;
&lt;td&gt;&lt;b&gt;Кухня&lt;/b&gt;&lt;/td&gt;
&lt;td&gt;&lt;b&gt;Спальня&lt;/b&gt;&lt;/td&gt;
&lt;td&gt;&lt;b&gt;Прихожая&lt;/b&gt;&lt;/td&gt;
&lt;td&gt;&lt;b&gt;Ванная&lt;/b&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Свет&lt;/td&gt;
&lt;td&gt;Свет&lt;/td&gt;
&lt;td&gt;Свет&lt;/td&gt;
&lt;td&gt;Свет&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Тёплый пол&lt;/td&gt;
&lt;td&gt;Музыка&lt;/td&gt;
&lt;td&gt;Тёплый пол&lt;/td&gt;
&lt;td&gt;Тёплый пол&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Шторы&lt;/td&gt;
&lt;td&gt;Шторы&lt;/td&gt;
&lt;td&gt;Сигнализация&lt;/td&gt;
&lt;td&gt;Кондиционер&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Кондиционер&lt;/td&gt;
&lt;td&gt;Кондиционер&lt;/td&gt;
&lt;td&gt;Кондиционер&lt;/td&gt;
&lt;td style="text-align: center"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/div&gt;
&lt;p&gt;Далее рассматривал систему только в рамках этой квартиры и данных «умных предметов».&lt;/p&gt;
&lt;h2&gt;Полезное приложение&lt;/h2&gt;
&lt;p&gt;Человеку интересен результат, который строится на потребностях. В каждой из потребностей накидал решений.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/5-2.jpg" width="2560" height="1412.9468599034" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;На этих потребностях и решениях основывался далее.&lt;/p&gt;
&lt;h2&gt;Достижение результата в первом экране&lt;/h2&gt;
&lt;p&gt;На этом экране пользователь запускает сценарии, видит активные предметы и, самое главное, — управляет домом. Добавляет, удаляет и изменяет сценарии. Имеет доступ к избранным предметам. Настраивает дом.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/result.jpg" width="2560" height="1582.9951690821" alt="" /&gt;
&lt;/div&gt;
&lt;h2&gt;Быстрое переключение между домами&lt;/h2&gt;
&lt;p&gt;Дома переключаются самостоятельно с помощью геолокации или вручную. Есть возможность добавить новый дом или офис.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/home.jpg" width="2560" height="1582.9951690821" alt="" /&gt;
&lt;/div&gt;
&lt;h2&gt;Умные предметы и функции&lt;/h2&gt;
&lt;p&gt;Вызываю скорую, пожарных и милицию с помощью одного тапа. Дом отправляет все необходимые данные для этих служб. Оплачиваю страховку, коммунальные расходы через Яндекс.Деньги, вызываю Яндекс.Такси и анализирую ежемесячные расходы. Могу в одном экране посмотреть все статусы предметов в доме и изменить их.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/subjects.jpg" width="2560" height="1582.9951690821" alt="" /&gt;
&lt;/div&gt;
&lt;h2&gt;Комнаты&lt;/h2&gt;
&lt;p&gt;Эти экраны отвечают за управление предметами в отдельных комнатах. Предмет можно добавить, настроить или удалить.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/komnaty.jpg" width="2560" height="1448.9955780164" alt="" /&gt;
&lt;/div&gt;
&lt;h2&gt;Музыка&lt;/h2&gt;
&lt;p&gt;Здесь включаю любимую музыку. Запускаю её из Яндекс.Радио, Яндекс.Музыки или медиатеки смартфона. Устанавливаю будильник. Отправляю любимые треки друзьям в мессенджеры и социальные сети.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/music.jpg" width="2560" height="1582.9951690821" alt="" /&gt;
&lt;/div&gt;
&lt;h2&gt;Кондиционер&lt;/h2&gt;
&lt;p&gt;Тут управляю температурой в комнате или во всей квартире. Приложение подсказывает сколько градусов на улице по данным Яндекс.Погода, чтобы я правильно выбрал температуру в доме.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/condition.jpg" width="2560" height="1582.9951690821" alt="" /&gt;
&lt;/div&gt;
&lt;h2&gt;Новые предметы&lt;/h2&gt;
&lt;p&gt;Нахожу предмет, добавляю его в комнату. Если нужной комнаты нет, создаю новую. Добавляю предмет во вкладку «Избранное», если пользуюсь им часто.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/new-subject.jpg" width="2560" height="1582.9951690821" alt="" /&gt;
&lt;/div&gt;
&lt;h2&gt;Забота&lt;/h2&gt;
&lt;p&gt;Если вы забыли выключить «Тёплый пол», не беда. Дом напомнит вам о нём и предложит выключить его за вас. Сгорела лампочка? Поменяйте её, заказав новую в Яндекс.Маркете. Вам не нужно помнить об оплате коммунальных услуг и страховки. Теперь это забота вашего дома.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/zabota.jpg" width="2560" height="1530.1934623082" alt="" /&gt;
&lt;/div&gt;
&lt;h2&gt;Настройка&lt;/h2&gt;
&lt;p&gt;Дайте права доступа другим членам семьи. Настройте уведомления, голосовое управление, виджет и геолокацию. Определите что делать дому, если телефон сел. Выберите язык. Определитесь с единицами измерения: цельсий или фаренгейт? Включите код доступа. Настройте интерфейс для людей с ограниченными возможностями.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/settings.jpg" width="2560" height="1530.1934623082" alt="" /&gt;
&lt;/div&gt;
&lt;h2&gt;Иконка из семьи иконок компании&lt;/h2&gt;
&lt;p&gt;Собрал основные сервисы Яндекса, которыми пользуюсь сам. Нарисовал иконку для Яндекс.Дома, которая по стилю похожа на остальные иконки сервисов Яндекса. Теперь она гармонично смотрится в этой семье. В странах СНГ большинство людей живут в квартирах, поэтому иконка частного дома не подходит. Дом с квартирами напоминает пульт. Спрятал первую букву компании «Y» в иконке.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://www.ivanzviahin.by/blog/pictures/icon.jpg" width="2560" height="1582.9951690821" alt="" /&gt;
&lt;/div&gt;
&lt;hr /&gt;
&lt;p&gt;Чтобы не пропустить новую заметку — подпишитесь на мой &lt;a href="https://t.me/ivanzviahin"&gt;канал в Телеграме&lt;/a&gt; или &lt;a href="http://ivanzviahin.by/blog/rss/"&gt;RSS&lt;/a&gt;.&lt;/p&gt;
</description>
</item>


</channel>
</rss>