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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пресса

  1. tut.by. «Маскот-2019». Голосуйте — и получите шанс выиграть крутые призы
  2. tut.by. Премия онлайн. В Беларуси выбрали автомобиль года
  3. Комсомольская правда. Голосуй за самый лучший автомобиль! Стартовал «МАСКОТ-2019»
  4. Комсомольская правда. От крутых до бюджетных: белорусы назвали лучшие автомобили
  5. marketing.by. Стартовала премия, где можно проголосовать за лучший автомобиль
  6. marketing.by. Автопремия «МАСКОТ-2019»: можно проголосовать и выиграть крутые призы
  7. marketing.by. От крутых до бюджетных: беларусы назвали лучшие автомобили
  8. Радио Мир. В Беларуси выбрали машины, где лучше всего звучит радио «МИР»
  9. City dog. Тут начали голосование за любимое авто минчан. Можно получить приз
  10. City dog. Белорусы составили топ лучших автомобилей. Ваш в списке?
  11. grodnonews.by. От кроссовера до пикапа. Белорусы составили топ лучших авто 2019 года
  12. minsknews.by. От кроссовера до пикапа. Белорусы составили топ лучших авто 2019 года
  13. foerch.by. Выбран автомобиль года в Беларуси
  14. profi-forex.org. В Беларуси выбрали лучший автомобиль года
  15. profi-forex.org. Кто получил престижную автопремию «Маскот»?
  16. finanso.net. В Беларуси состоялось вручение престижной автопремии «Маскот»
  17. Рамблер Авто. В Беларуси выбрали машины, где лучше всего звучит радио «МИР»
  18. Skoda. ŠKODA KODIAQ — автомобиль года по мнению экспертов.
  19. Volkswagen. Volkswagen одержал 4 победы
  20. Атлант-М. Автомобили холдинга «Атлант-М» завоевали 14 наград
  21. BAA. ŠKODA KODIAQ — автомобиль года по мнению экспертов
  22. KIA. KIA Ceed и KIA Rio X-Line признаны победителями автомобильной премии
  23. av.by. «МАСКОТ-2019»: старт дан! Голосуйте за самый лучший автомобиль
  24. av.by. «Маскот-2019». Выберите машину — получите бонус
  25. av.by. «Маскот-2019». Последний день, чтобы получить шанс выиграть призы от Huawei
  26. av.by. «В этом году будет еще лучше». Чего эксперты ждут от автопремии «Маскот-2019»
  27. av.by. «Маскот-2019». Белорусы определят лучший автомобиль прошлого года
  28. av.by. «Маскот-2019». Церемония награждения пройдет в новом формате
  29. av.by. «Маскот-2019». Церемония награждения состоялась!
  30. av.by. От крутых до бюджетных: белорусы назвали лучшие автомобили

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

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

Микросессии

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

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

Уведомления

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

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

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

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

Виджеты

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

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

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

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

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

Выводы

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

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

Планы на 2020 год

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

Фокус в 2020 хочу направить на следующие направления:

  • мобильный дизайн,
  • дизайн-менеджмент,
  • фронтенд,
  • пользовательский опыт.

Прочитать

  1. «Envisioning Information» Edward Tufte
  2. «The Handbook of Design Management» Rachel Cooper, Sabine Junginger, Thomas Lockwood
  3. «Бизнес с нуля» Эрика Риса
  4. «Дизайн привычных вещей» Дональда Нормана
  5. «О продакт менеджменте» Интеркома
  6. «Сильнейшие» Патти МакКорд

Сходить

  1. Фестиваль дизайна и цифрового искусства OFFF Moscow 2020 Перенесли на 2021 :-(

Поучиться

  1. «Как руководить дизайнерами» Костя Горский Очень круто. Обязательно к изучению.
  2. «Быстрая анимация иллюстрации в After Effects» Константин Новиков
  3. «Как организовать команду» Ольга Герасименко Максимально полезным оказалась последняя лекция. Написал даже конспект на эту тему семь фаз формирования команды.
  4. «Дизайн своей карьеры» Дмитрий Карпов Хороший быстрый интенсив нацеленный на новых людей в профессии.
  5. «UX: Поведенческое проектирование» Дмитрий Карпов
  6. «Здоровые настройки» Ольга Герасименко
  7. «Принципы Principle» Александр Токарев
  8. «Как победить конкурентов и инерцию выбора» Ивана Замесина
  9. «Мобилизация» Школы дизайна Яндекса
  10. «Управление проектами и продуктом» Школы менеджмента Яндекса
  11. Mobile Product
  12. User Research — Methods and Best Practices
  13. User Experience (UX): The Ultimate Guide to Usability and UX
  14. Beyond Usability: Learn the User Research Toolkit
  15. «Основы JavaScript» HTML Academy
  16. «Паттерны дизайн-менеджмента» Юрий Ветров

Сделать

  1. Работать над Wash.me
  2. Сделать три мобильных жизнеспособных проекта
  3. Сделать что-то, где я сам попрактикуюсь с JavaScript
  4. Собрать крепкую дизайн-команду
  5. Систематизировать процесс работы над задачами
  6. Довести до завершения «Радиоэмоции»
  7. Составить планы на 2021

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

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

Сценарии поиска информации

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

Поиск известного

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

Поиск неизвестного

Человек не знает что, хочет. В этом случае ему нужно помочь определить подходящий вариант по потребностям. Если опять взять, например, сайт по поиску объявлений о продаже авто, то это может быть: тип кузова, ценовой диапазон, количество мест и так далее.

Поиск увиденного

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


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

2019   поиск информации   пользовательский интерфейс
Ранее Ctrl + ↓