5 заметок с тегом

av.by

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

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

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

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

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

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

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

Макеты в Zeplin

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

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

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

Стейджинг

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

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

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

Вывод

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

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


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

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

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

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

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

Магистральные сценарии

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

Промежуточные сценарии

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

Сценарии исключения

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

Как определить сценарии, если это неочевидно

Тут мы придумали простую систему. Берем три метрики: количество пользователей, частота встречи сценария, серьезность. И оцениваем каждую либо 0, либо 1. Как правило, магистральные сценарии получают оценку 3, промежуточные 2, а исключения 1 или 0.

Что делать, если и на первые два уровня уже нет ресурсов

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

Вывод

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пресса

  1. Marketing.by В Минске назвали лучшие автомобильные марки
  2. Realt.by Знай лучших. В Беларуси выбрали автомобиль года
  3. Домкрат Проголосуйте за любимые авто
  4. av.by Знай лучших. В Беларуси выбрали автомобиль года
  5. Belretail.by Итоги премии «МАСКОТ 2018»
  6. Tut.by Знай лучших. В Беларуси выбрали автомобиль года
  7. av.by Голосуем за лучший автомобиль года в Беларуси
  8. Marketing.by av.by проводит автомобильную премию для улучшения качества индустрии
  9. Volkswagen Подведены итоги автомобильной премии
  10. Skoda Skoda Kodiaq и Skoda Octavia — победители премии
  11. Радио Мир Названы автомобили с лучшим штатным автозвуком

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

Принципы дизайнера

Пускай тут будет эта картинка. Придумайте сами почему

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

Дизайнер инициативный

Банально, но важно. Я всегда про это забываю. Никто не запланирует мою неделю лучше меня. Никто не заставляет и не напоминает мне про задачи. Никто не разжёвывает требования к задаче. Никто не расскажет о технических ограничениях в подробностях сам. Желательно, чтобы дизайнер был инициативным, буквально, во всём. Ну или стремился к этому.

Действует как предприниматель

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

Выкидывает бумажки в урну

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

Держит фокус

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

Открытый

Не держит в себе и не умалчивает. Говорит, если чувствует, что его виденье помогает достигнуть цель в нужные сроки.

Ответственный

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

Сохраняет ясную голову, контролирует гнев

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

Оценивает айсберг полностью

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

Сначала ищет «идеальный мир»

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

После делает просто и прямо сейчас

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

Эмпанирует

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


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

Печать для компании av.by

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

Задача

Помочь документам компании av.by визуально выделиться среди стопки других.

Решение

Чтобы выделиться среди других документов, решили сделать печать, которую сложно не заметить. В основном печати выглядят все одинаково: множество линий и старомодный шрифт. Мы использовали минимум линий. Сделали печать в виде буквы «а», чтобы поддержать новый стиль. Использовали фирменный шрифт и выделили главное. С первого апреля 2018 года печать будет красоваться на всех документах компании.

Про печать написали на vc.ru


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

2018   av.by   печать