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

дизайн

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

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

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

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

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

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

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

Без режимов

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

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

Квазирежимы

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

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


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

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

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

В жизни:


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

Ранее Ctrl + ↓