ivan's blog: posts tagged дизайн

Модальный интерфейс

Ivan Zviahin — Sun, 31 May 2020 08:45:23 +0000

Мой отец как-то звонит мне со словами: «Вань, у меня айфон опять не работает, приложения не запускаются». Я прихожу к нему и вижу на экране вот это:

Только там все трясётся ещё

Проблема в том, что интерфейс вошёл в модальный режим, а мой отец этого не понимает.

Или всем знакома ситуация, когда микроволновка не разогрела еду из-за режима «разморозки». Или машина, которая случайно поехала назад, передача задняя была включена:

Минск: с паркинга упал Mercedes ML Brabus, onliner.by

Интерфейс называется модальным если одно и то же действие может выполнять разные функции в зависимости от режима. Чаще всего модальный интерфейс — это плохо. Он приводит к ошибкам и разочарованиям. Но как не использовать такой интерфейс?

В книге «Пользовательский интерфейс» Ильи Бирмана я подсмотрел и вынес для себя два самых главных правила на мой взгляд: первый — стараться не использовать режимы, второй — использовать «квазирежимы». Теперь чуть подробнее об этом.

Без режимов

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

Или пример с видео и фото на iPhone. Люди частенько путают режим и случайно снимают на видео или наоборот из-за того, что кнопка одна, а режимов много. В книге Ильи есть пример, где сразу выведены две кнопки: для фото и для видео в одном экране. И кажется, что это лучше.

Квазирежимы

Джеф Раскин называет такое состояние интерфейса, в котором пользователь его удерживает физически. Квазирежим невозможно не заметить. Например, встроенный Google maps на сайте блокирует зум по скролу, чтобы небыло случайных зумов. Зум работает в квазирежиме с зажатой клавишей ⌘.

Cайт Crossfit Martell

Программа для видеозвонков Zoom включает ваш микрофон, если вы удерживаете SPACE. Или при вводе текста вы можете вводить заглавные буквы с зажатым SHIFT. А вот CAPS LOCK плохой пример модального интерфейса, он приводит к ошибкам и разочарованиям. Избегайте модальный интерфейс.

Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме или RSS.

Самостоятельная проверка интерфейса

Ivan Zviahin — Sat, 23 May 2020 17:38:25 +0000

на русском · in english

Перед каждым экраном интерфейса я задаю себе вопросы:

А есть ли в этом случае у человека какая-то привычка? Есть ли в мире какие-то привычные паттерны такого интерфейса? Могу ли я сделать максимально приближённый интерфейс к этой привычке?
Не заставляю ли я делать что-то пользователя, что может сделать компьютер? Например, поле сразу в фокусе.
Не потерял ли я данные, которые дал мне пользователь?
Убрал ли я все лишнее с этого экрана? Есть ли возможность соединить какую-то функциональность? Могу ли я добавить какую-то полезность?
Я стараюсь представить, что я не видел ничего до попадания на конкретный экран. А понятно ли мне на этом экране всё, с учётом всего вышесказанного?
Сделал ли я всё, чтобы не использовать модальный интерфейс? Могу ли я показать все функции сразу? Могу ли я использовать квазирежим? Хорошо ли я продумал навигацию стеков?
Легко ли мне попасть в каждый элемент? Показал ли я области клика?
Подумал ли я об обратной связи каждого действия? Она должна быть быстрой, постоянной и ненавязчивой. Местами эмоциональный, где то нужно. Подготовил ли я анимацию важных элементов интерфейса? Нужна ли тактильная обратная связь и звуковая?
А действительно ли мой интерфейс находится в границах ментальной модели пользователя? Могу ли я снизить сопротивление, если выхожу за границы этой модели?
Систематизирован ли мой интерфейс? Могу ли я что-то переиспользовать? Соответствуют ли все элементы дизайн-системе?
Выглядит ли мой интерфейс просто, понятно и красиво? Не потерял ли я простоту, пытаясь объяснить что это за экран?
Не забыл ли я про даркмод?
Не забыл ли я про планшеты? Про маленькие смартфоны?
Не забыл ли я учесть, как будет выглядеть интерфейс с увеличенным шрифтом?
Описал ли я все крайние состояния? Сколько строк текста? Как позиционировать картинки и так далее. Как выглядит экран без данных?
Нет ли лишних лоудеров? В идеале не должно быть лоудеров вообще. Нужны ли скелетоны?
Если есть пуши, то не забыл ли я показать куда они ведут?
Обсудил ли я синтаксис с редактором?
Добавил ли я вишенку на торт? Сделал ли я что-то мелкое, но важное, что удивит пользователя?

Cайт «Маскот»

Ivan Zviahin — Wed, 29 Apr 2020 12:00:47 +0000

Версия сайта: первая · вторая

«Маскот» — это автомобильная премия в Беларуси. Сайт премии решает множество задач. Нужно как-то познакомить с условиями будущих участников премии и дать возможность подать заявку на участие. Упомянуть всех партнёров. Рассказать про номинации, методику и познакомить с экспертным советом. А ещё дать возможность проголосовать потребителям за автомобили, которые попадут в отборочный тур. При этом провести розыгрыш призов среди участников голосования, чтобы они не ленились голосовать.

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

С новым логотипом нам помогла дизайн-студия «Райт» и вместе у нас получилось:

«Айдентика, для Автомобильной премии «Маскот». Это ему ветер в лицо, это у него слезятся глаза, это он несется навстречу... А вместе с ним и мы. В основе дизайн-решения – шрифтовая композиция. Буква А в названии прекрасно анимируется: мы как бы видим летящую навстречу разделительной полосой дорогу глазами нашего маскота-талисмана. Для справки: маскот – термин автомобильный, обозначающий эмблему на радиаторе или капоте автомобиля.»
Алексей Шклянко, арт-директор в «Райт»

Участники премии

Все участники премии — это автодилеры. А предмет оценки — новые автомобили. Поэтому на сайте нужно было выстроить журнал всех автомобилей, которые продавались в 2019 году:

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

Информационные партнёры

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

Методика определения победителя

Четыре мощных этапа. Итого, в каждой номинации будет два победителя: по мнению народа и по мнению экспертов. Или один, если мнение экспертов и народа совпадёт.

Розыгрыш призов

Для привлечения потребителей, которые участвовали в голосовании отборочного этапа, мы закатили розыгрыш призов:

Голосование потребителей

Для того, чтобы определить 5 финалистов в каждой номинации, мы запустили голосовалку отборочного этапа прямо на сайте:

Анонс победителей

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

Мобильные устройства

Всё это дело, конечно же, работает на мобильных устройствах:

Для сайта собрано около 50 экранов и состояний. Посмотрите сами: mascot.by

Версия сайта: первая · вторая

Пресса

Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме или RSS.

Тихий режим в iPhone

Ivan Zviahin — Sun, 12 Apr 2020 20:27:04 +0000

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

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

Кажется, что так лучше. А вы замечали такое?

Вот скриншот как было раньше, этой проблемы нет.

Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме или RSS.

Семейное положение

Ivan Zviahin — Sat, 29 Feb 2020 21:10:53 +0000

Давайте представим задачку, в которой нам нужно сделать выбор семейного положения в форме и мы не умеем определять пол по всяким там... параметрам. На входе есть пункты:

женат или замужем
холост или не замужем
разведен или разведена
без ответа.

Оказывается, что можно намного проще и короче:

в браке
не был в браке
уже не в браке
без ответа.

В жизни:

Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме или RSS.

Микросессии

Ivan Zviahin — Wed, 08 Jan 2020 15:55:58 +0000

Немного интересного про микросессии в мобильных приложениях. Это такие сессии, которые длятся не более 15 секунд. Есть много мобильных задач, которые мы выполняем каждый день. Это какие-то простые задачи, которые мы выполняем за несколько десятков секунд. Например, установка будильника или просмотр календаря на день.

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

Уведомления

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

Яндекс Такси рассказывает, что жёлтый Хендай Солярис с номером ТУ54177 ждёт вас

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

Календарь предлагает дополнительные действия с событием

Виджеты

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

Быстрые действия

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

Интеллектуальные помощники

И приложения для iOS, и для Android могут использовать интеллектуальных помощников, чтобы позволить пользователям быстро взаимодействовать с приложением с помощью голоса. Это отличный способ для решения задач человека без входа в приложение.

Выводы

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

Макетная актуальность

Ivan Zviahin — Tue, 29 Oct 2019 16:02:18 +0000

Проектируя что-то новое на основании старого, дизайнеру необходимо куда-то обращаться за информацией. Например, как это работает, а как выглядит этот модуль, как себя поведет система?

У нас в команде есть 5 источников таких знаний:

требования в Jira,
макеты в Zeplin,
статическая вёрстка,
cтейджинг,
голова дизайнера.

Итак, разложим каждый по характеристикам: лёгкость поиска, читаемость, близость к правде, видимость деталей.

Требования в Jira

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

Макеты в Zeplin

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

Статическая вёрстка

К ним простой доступ по домену. Есть структура как у макетов, но не настолько детальная. Они близки к правде, так как они и есть правда. Как правило, верстка не показывают все состояния элементов интерфейса и детали сценариев.

Стейджинг

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

Голова дизайнера

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

Вывод

	Требования	Макеты	Вёрстка	Стейджинг	Голова
Лёгкость поиска	−	+	+	+	−
Читаемость	−	+	+	−	−
Правдивость	+/−	+	+	+	+/−
Видимость деталей	−	+	−	−	−
Итого	−3	4	3	0	−3

Вот и решайте теперь, стоит держать макеты актуальными или нет.

Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме или RSS.

Уровень проработки

Ivan Zviahin — Tue, 24 Sep 2019 17:22:15 +0000

на русском · in english

Я бы хотел рассказать о решении одной важной проблемы в продуктовой команде. Проблема — мы делаем задачи слишком долго. Одна из причин — слишком глубокий уровень проработки каждой. Как бы времени у нас совсем нет, а функциональность урезать нельзя. Остается только снизить уровень проработки. Мы решили понижать его не для всех задач, а только для некоторых.

Пользовательские сценарии в любом продукте можно разделить на три уровня. Уровень первый — сценарии, которыми люди пользуются чуть ли не каждый день. Мы такие сценарии назвали магистральными. Второй — важные, но нужные не часто. Эти сценарии назвали промежуточными. Третий — скорее исключения, это как раз те сценарии про которые обычно совсем забывают.

Уровень 1

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

Уровень 2

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

Уровень 3

А вот эти сценарии самые популярные обычно у программистов. Есть четкое ощущение, что ими можно пренебречь в проектировании. Это не значит, что про них можно просто забыть и все. Их нужно обрабатывать, но делать это — максимально грубо. Например, представьте, вы открываете одну страницу в двух вкладках браузера и в одной из них делаете какое-то действие, которое меняет статус чего-то. А потом идёте в другую и делаете это же действие, как должна повести себя система? От способности обрабатывать исключения зависит лишь качество кода, а вот успех продукта находится в первую двух уровнях.

Вывод

Никому не нужен магазин с идеально продуманным сценарием добавления товара в «Избранное» в двух вкладках браузера, когда поиск товаров работает плохо и непонятно.

Общение в команде

Ivan Zviahin — Sat, 01 Jun 2019 14:55:18 +0000

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

Общая цель и миссия

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

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

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

«Программисты думают только о себе, а не о пользователях»

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

Общее решение

Самая большая ошибка, это пойти сразу рисовать макеты. Рисовать их неделю. Две. А потом бежать с этими макетами к разработчикам (вокруг макетов лучи нимба), а они в итоге говорят, что есть решение проще или еще хуже:

«Это сделать невозможно!»

Есть такой принцип: «Выкидывай бумажки в урну». Дизайнер делает дешевые прототипы и маленькие итерации в макетах, чтобы легче отказываться от своих решений. Если они не работают, конечно же. Решение на салфетке с ними проще. Кучу нюансов всплавает на уровне макетов, но основную концепцию лучше рисовать на салфетке.

Беда в команде, если программист и дизайнер не разговаривают. Следом за салфеткой, следует этап общения и обсуждения. У программистов есть много хороших идей и шикарное представление технических ограничений. Тогда и разработчик никогда не скажет:

«Ничего не знаю, так было в макете!»

Вообщем, решение должно быть общим, больше общения и будет всем хорошо.

Общая точка успеха

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

«У вас концепция постоянно меняется, достали»

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

Равенство

Уважайте друг друга. Дизайнер является полноценным членом команды разработки. Разработчики — тоже дизайнеры. У вас без друг друга врядли что-то хорошее получится, уважайте профессию друг друга. Учитесь слушать и слышать, договариваться. Это чтобы не было таких фраз в вашу сторону:

«А почему у меня не спросили?»

Беда в том проекте, где дизайнер руководит разработчиками или наоборот. Это равные позиции в команде. Иначе дизайнер становится визуализатором, а программист говнокодером. А так быть не должно.

Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме или RSS.

Радиоэмоции 1.0

Ivan Zviahin — Thu, 23 May 2019 09:05:08 +0000

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

Пользователи оставляют свои эмоции, плагин считает их и выводит количество:

Счётчики подключаются к базе данных владельца сайта, авторизация работает по технологии Browser Fingerprint. Количество, текст и изображения эмоций можно менять.

Дизайн и идея — я, программист — Ольга Мохова.

Плагин бесплатный для всех: radioemoji.intuition.team

Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме или RSS.

Cайт «Маскот»

Ivan Zviahin — Mon, 13 May 2019 20:06:58 +0000

Версия сайта: первая · вторая

Участники премии

Все участники премии — это автодилеры. А предмет оценки — новые автомобили. Поэтому на сайте нужно было выстроить журнал всех автомобилей, которые продавались в 2018 году:

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

Информационные партнеры

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

Методика определения победителя

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

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

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

Итого, в каждой номинации будет два победителя: по мнению народа и по мнению экспертов. Или один, если мнение экспертов и народа совпадёт.

Розыгрыш призов

Голосование потребителей

Для того, чтобы определить 5 финалистов в каждой номинации, мы запустили голосовалку отборочного этапа прямо на сайте. Верификация номера телефона:

Само голосование. Чтобы избежать сравнения автомобилей между собой и повысить объективность голосования, мы показываем только один автомобиль на экране. Так сказать, эффект «Тиндера».

Личные данные участника:

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

Анонс победителей

Помимо масштабного офлайн мероприятия, мы сделали анонс победителей на сайте:

Мобильные устройства

Все это дело, конечно же, работает на мобильных устройствах:

Для сайта собрано около 50 экранов и состояний. В жизни есть ещё трёхмерный логотип и переливающиеся кнопки: mascot.by

Версия сайта: первая · вторая

Пресса

Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме или RSS.

Когнитивное сопротивление

Ivan Zviahin — Sun, 30 Dec 2018 14:59:39 +0000

Пора бы точно разобраться в определении. Может кому-то тоже будет полезно. Попробую пересказать на мамином языке.

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

Высокое

Это когда пользователь смотрит на интерфейс и понятия не имеет что произойдет, когда начнется взаимодействие между продуктом и пользователем. Например, крутилка в стиральной машине. В одном режиме она регулирует температуру, а в другом — количество оборотов. Человек без объяснения или предыдущего опыта работы с таким интерфейсом не разберется в нём.

Нормальное

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

Низкое

Столовая ложка. Сразу понятно, что с ней можно сделать.

Навигация для Sportfamily

Ivan Zviahin — Fri, 31 Aug 2018 18:14:00 +0000

на русском · in english

Проблема и решение

Фитнес клуб открылся в бизнес-центре «Спектр» в Минске два года назад. Первые посетители не сразу могли найти вход и блуждали вокруг, ругались. Поэтому мы с Егором Селютиным нарисовали и повесили таблички.

Табличка должна ответить на несколько вопросов. Чья это табличка? Так, а куда идти? Как долго? К ответам на эти вопросы мы отнеслись, как к элементам системы. С помощью которых, без особого труда, можно составить табличку для любой локации.

Расположение

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

Визуальный язык

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

Материалы

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

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

Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме или RSS.

Концепт приложения Яндекс.Дом

Ivan Zviahin — Fri, 27 Jul 2018 15:35:38 +0000

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

Задача

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

Решение

Разработать комфортное приложение для двух аудиторий: для «быстрых» людей и для изучающих.
Дать возможность пользователю показать статусность и сэкономить.
Закрыть ежедневные потребности и вопрос безопасности.
Сохранить визуальный язык Яндекса 2016 года.
Дополнить приложение другими полезными сервисами Яндекса.

Я подошёл к заданию реально и за основу взял «однушку» с небольшим количеством «умных» предметов.

Нарисовал схему квартиры:

Кухня	Спальня	Прихожая	Ванная
Свет	Свет	Свет	Свет
Тёплый пол	Музыка	Тёплый пол	Тёплый пол
Шторы	Шторы	Сигнализация	Кондиционер
Кондиционер	Кондиционер	Кондиционер

Далее рассматривал систему только в рамках этой квартиры и данных «умных предметов».

Полезное приложение

Человеку интересен результат, который строится на потребностях. В каждой из потребностей накидал решений.

На этих потребностях и решениях основывался далее.

Достижение результата в первом экране

На этом экране пользователь запускает сценарии, видит активные предметы и, самое главное, — управляет домом. Добавляет, удаляет и изменяет сценарии. Имеет доступ к избранным предметам. Настраивает дом.

Быстрое переключение между домами

Дома переключаются самостоятельно с помощью геолокации или вручную. Есть возможность добавить новый дом или офис.

Умные предметы и функции

Вызываю скорую, пожарных и милицию с помощью одного тапа. Дом отправляет все необходимые данные для этих служб. Оплачиваю страховку, коммунальные расходы через Яндекс.Деньги, вызываю Яндекс.Такси и анализирую ежемесячные расходы. Могу в одном экране посмотреть все статусы предметов в доме и изменить их.

Комнаты

Эти экраны отвечают за управление предметами в отдельных комнатах. Предмет можно добавить, настроить или удалить.

Музыка

Здесь включаю любимую музыку. Запускаю её из Яндекс.Радио, Яндекс.Музыки или медиатеки смартфона. Устанавливаю будильник. Отправляю любимые треки друзьям в мессенджеры и социальные сети.

Кондиционер

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

Новые предметы

Нахожу предмет, добавляю его в комнату. Если нужной комнаты нет, создаю новую. Добавляю предмет во вкладку «Избранное», если пользуюсь им часто.

Забота

Если вы забыли выключить «Тёплый пол», не беда. Дом напомнит вам о нём и предложит выключить его за вас. Сгорела лампочка? Поменяйте её, заказав новую в Яндекс.Маркете. Вам не нужно помнить об оплате коммунальных услуг и страховки. Теперь это забота вашего дома.

Настройка

Дайте права доступа другим членам семьи. Настройте уведомления, голосовое управление, виджет и геолокацию. Определите что делать дому, если телефон сел. Выберите язык. Определитесь с единицами измерения: цельсий или фаренгейт? Включите код доступа. Настройте интерфейс для людей с ограниченными возможностями.

Иконка из семьи иконок компании

Собрал основные сервисы Яндекса, которыми пользуюсь сам. Нарисовал иконку для Яндекс.Дома, которая по стилю похожа на остальные иконки сервисов Яндекса. Теперь она гармонично смотрится в этой семье. В странах СНГ большинство людей живут в квартирах, поэтому иконка частного дома не подходит. Дом с квартирами напоминает пульт. Спрятал первую букву компании «Y» в иконке.

Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме или RSS.

Cайт Crossfit Martell

Ivan Zviahin — Mon, 18 Jun 2018 19:52:56 +0000

на русском · in english

Новый сайт мальтийского зала Crossfit Martell решает две задачи: рассказывает о кроссфите начинающим атлетам из Мальты, убеждает местных и приезжих записаться на занятие.

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

Если у читателя возникнут дополнительные вопросы, кнопка Contact Trainer всегда под рукой. Она открывает модальное окно с мессенджерами, почтой и телефоном.

Сайт полностью адаптирован под мобильные устройства.

Я нарисовал страницы сайта. Саша Файзулин общался с клиентом и обрабатывал фото. Наташа Никонова и Алина Мишуренко писали текст. Максим Ильяхов артдиректил проект. Саша Иванов сверстал всё задуманное.

crossfitmartell.com

Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме или RSS.

Эмпатия

Ivan Zviahin — Thu, 21 Sep 2017 09:49:16 +0000

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

В жизни

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

В общении

Стив Джобс. Он выходил на презентации в одежде, в которой ходит любой человек каждый день. Таким видом Стив как бы говорит:

Хэй, ребята, я свой! Я такой же, как вы.

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

В дизайне

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

Я слышал, что в Студии Лебедева перед тем, как разработать упаковку для кетчупа, они купили все виды упаковок в супермаркете. Дизайнер должен попробовать пожить с продуктом про который готовит презентацию или проектирует конкурента. Побыть на месте потребителя. После создания, собрать отзывы и улучшать. Так дизайнер становится ближе к пользователям, продукт становится лучше, у пользователя появляется эмпатия к продукту.

Дизайнеры операционной системы Windows пытались вызвать эмпатию у пользователей к операционной системы путем названия иконок. Например, «Мой компьютер». Ведь его можно было назвать просто «Компьютер». Но ведь он же мой, он уже стал роднее, возникает эмпатия. Я не сторонник так называть иконки, но в этом что-то есть.

Какие примеры эмпатии наблюдали вы?
Чтобы не пропустить новую заметку, вы можете подписаться на канал в Телеграме.