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

пользовательский интерфейс

Позднее Ctrl + ↑

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

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

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

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

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

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

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

Макеты в Zeplin

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

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

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

Стейджинг

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

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

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

Вывод

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

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


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

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

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

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

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

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


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


Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме или 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.

2019   av.by   mascot   автомобили в Беларуси   автомобильная премия   дизайн   маскот   пользовательский интерфейс   сайт   сделал

План победы на 2019

План победы: 2017 · 2018 · 2019 · 2020

В этом году мне интересны вот такие темы: информационный дизайн, общение, проверка идей, работоспособные системы, дизайн интерфейса.

Прочитать

  1. «Спроси маму» Роба Фитцпатрика Шикарная книга.
  2. «Об интерфейсе» Алана Купера
  3. «Envisioning Information» Edward Tufte
  4. «Искусство управленческой борьбы» Владимира Тарасова
  5. «Extreme Ownership: How U.S. Navy SEALs Lead and Win» Jocko Willink, Leif Babin
  6. «Пользовательский интерфейс» Ильи Бирмана
  7. Дополнительно: перечитать «Найти идею. Введение в ТРИЗ — теорию решения изобретательских задач» Генриха Альтшуллера

2019 год оказался слабоват на книги. Я прочитал только одну, а на остальные времени не нашлось. Думаю, что я поменяю формат и сделаю отдельную заметку с книгами которые прочитал и которые хочу прочитать.

Сходить

  1. Design Prosmotr 2019
  2. Mail.ru meetup 2019

Ещё раз убедился, что все эти митапы не приносят ничего полезного, кроме нетворкинга.

Поучиться

  1. «Дизайн-библиотека» bang bang education
  2. «Продуктовый дизайн» Британская высшая школа дизайна Не вышло, не успел записаться, упустил набор.
  3. «Пользовательский интерфейс и представление информации» Ильи Бирмана А тут времени не хватило.

Посмотреть

  1. «Введение в продуктовую работу» Школы дизайна Яндекса
  2. «Как составить план на год» Busy Podcast
  3. «Способы проверки решений» Школы дизайна Яндекса
  4. «Мобилизация 2017» Школы дизайна Яндекса Очень крутые лекции, их стоит пересматривать каждые два года.
  5. «Управление проектами и продуктом» Школы менеджмента Яндекса
  6. «Беседы» bang bang education
  7. WWDC

Сделать

  1. Три жизнеспособных проекта Сделал. Первый — радиоэмоции. Второй — Автомобильная премия «Маскот». Третий — советчик Wash.me.
  2. Проверку какой-то идеи Сделал. Но не вывез этот проект один. Я сделал советчик Wash.me в Телеграме для Минска. Это такой бот, который сам советует помыть машину в хорошую погоду. Проект сдулся к концу года, но я планирую его довести до ума в следующем году.
  3. Рубрикатор для главной страницы своего сайта
  4. Перевод своего сайта на английский язык Перевёл. Вот он.
  5. Публикацию на английском языке про процесс работы над схемой метро Минска Пытался сделать публикацию на всяких англоязычных журналах, но ничего не вышло. Поэтому опубликовал у себя.
  6. Плакат «33 правила Кэмпа» Сделал плакат.
  7. Рассказ про мобильное приложение, которое сделал в 2018 Приложение для «Совести»
  8. План победы на 2020 План

Арбайтен!


План победы: 2017 · 2018 · 2019 · 2020

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

План победы на 2018

План победы: 2017 · 2018 · 2019 · 2020

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

Прочитать

  1. «Об интерфейсе» Алана Купера
    Книгу я нашёл, спасибо Саше Иванову. Но не прочитал. Книга переезжает в 2019 год.
  2. «Дневник дизайнера-маньяка» Яны Франк
    Тоже не прочитал. Возможно этой книге не найдется место в списке на 2019 год, посмотрим.
  3. «Психбольница в руках пациентов» Алана Купера · Когнитивное сопротивление
    Читаю эту книгу сейчас. Книга крутая для всех, кто как-то связан с проектированием. Рекомендую!
  4. «С помощью дизайна» Ральфа Каплана
    Прочитал. Книга хорошая.
  5. «Модульные системы в графическом дизайне» Йозефа Мюллера‑Брокмана
    Книга есть, а прочитать не успел. Андрей, спасибо за подарок!
  6. «Нет» Джим Кэмп 33 правила Кэмпа
    Отличная книга, всем переговорщикам рекомендую. Скоро ещё будет плакат, я обещал.

Итого. Три книги из шести. В 2018 году много времени заняла школа дизайнеров Бюро, поэтому в чтении запланированной литературы такой вот пробел. Стало понятно теперь точно, что читаю я очень мало и медленно. В 2019 году в план беру только 5 книг.

Посмотреть

  1. «Хьюстон, у нас все хорошо» Людвига Быстроновского
  2. «Дизайн дизайнера» Людвига Быстроновского · Написал список книг для дизайнера
  3. «Что такое хорошо» Сергея Кулинковича
  4. «Мобилизация 2017» Школы Яндекса
  5. «О полезном действии» Артем Горбунов

Лекции все крутые, рекомендую. Посмотрел всё, только «Мобилизацию 2017» не осилил полностью. Посмотрел только 4 лекции. Перенесу ее в 2019 год.

Пойти на курсы

  1. Вторая и третья ступень «Школы дизайнеров» Бюро · Дипломный проект
    Фух, школу закончил. Это было круто. Мы с командой успешно защитили дипломный проект, даже очень. Заняли первое место с маленьким отрывом от коллег, что было очень неожиданно лично для меня. Школа помогла собрать знания в кучу и расставить их по полкам. Теперь я чувствую себя увереннее, но это пока не точно :-) А ещё третья ступень позволила в живую познакомиться с преподавателями. Прям в живую они совсем другие. Оказывается, они добрые и веселые. Многие говорят, что школа уже не та... Всё это фигня, если вы хотите прокачать дизайн на любом уровне, идите, не пожалеете.
  2. UX design от AIC
    Не успел. Возможно перейдет в список на 2019 год.
  3. Что-то попробовать из курсов Bang Bang Education
    Тоже не успел. Точно перейдет в список на 2019 год.

Сделать

  1. Дописать процесс работы над схемой метро Минска · часть 1 · часть 2 · часть 3 · часть 4
    Дописал. Сходите почитать, там есть много интересного.
  2. Рассказать про тестовое задание в «Школу мобильного дизайна» Яндекса · Концепт приложения Яндекс.Дом
  3. Сделать проект связанный с навигацией в городе · Таблички для фитнес-клуба
  4. Запустить рубрику в блоге «Мильчин говорит»
    Запустил и сразу закрыл. Как-то она не зашла и нет на нее времени. Но теперь есть рубрика Песня недели. Там я фо фан перевожу песни с английского языка на русский. Это мне помогает качать язык и собирать клевые песни и клипы.
  5. Сделать мобильное приложение
    Сделал, но пока не могу ничего про это рассказывать. Расскажу уже в 2019 году.
  6. План победы дизайнера на 2019 год · План победы дизайнера на 2019 год

Ещё сделал клёвую печать для av.by. И два интересных проекта. Но про это я уже расскажу в 2019.


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

Ранее Ctrl + ↓