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

дизайн

Много или мало? Непонятные интерфейсы в жизни

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

Для меня, «интерфейс» тождественен слову «незаметность». Когда ты его не замечаешь, и получаешь результат — интерфейс работает отлично. Когда разобрался на интуиции — высший пилотаж.

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

Например, массажное кресло, вот такое:

Там настройки:
Подогрев (это легко)
Интенсивность давления
Сила давления
Скорость вращения роликов

Я хочу выбрать интенсивность.
В моём понимании L, M, и S — это long/medium/small. Разве это подходит к интенсивности? Или L — это low? Тогда S — Speedy (или Super)?

Сила давления и скорости вращения роликов: 1, 2, 3. Один — это начальный уровень, или максимальный?
Вот когда мне пережало ноги, я понял что к чему. Обучение через боль, как старые карающие турникеты в метро:)

Или, крутилка датчика дождя в машине:

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

Три капли, это датчик срабатывает на сильный дождь? Или показана интенсивность?
Я до сих пор не понял, как это работает. По моим наблюдениям — в режиме как на картинке срабатывает на мелкий дождь.

В защиту скажу, что крутилка заднего дворника (справа) выполнена отлично. Прерывистая линия машет дворником прерывисто, длинная линия — сплошняком.

А вина всему — двойные ассоциации. Продуктовому дизайнеру стоит избегать в своих работах таких двояких смыслов.
Простые на вид интерфейс — результат огромного умственного труда. Сделать сложно — легче:)

А какие примеры непонятных интерфейсов есть у вас?

2017   UX   дизайн   наблюдения

Свидетельство ТС размером с кредитку? Техпаспорт 2.0.

Рассказ о том, почему я порезал техпаспорт автомобиля!
Ссылка на проект на сайте nikitabel.ru

Что за техпаспорт и зачем он нужен?

Свидетельство ТС — это паспорт транспортного средства: автомобиля, мотоцикла, мопеда, etc. В народ называется «техпаспортом». Техпаспорт дублирует информацию из ПТС — паспорта транспортного средства и помогает водителю доказать, что он не украл этот автомобиль:)

Как сейчас выглядит Свидетельство?

Это листок чуть меньше формата А5, который складывают пополам и ламинируют.

Свидетельство ТС

Формат документа пришёл с советской эпохи, когда были картонные «книжки».

Советский техпаспорт

Почему нужен редизайн техпаспорта?

Я нашел как минимум три причины.

Мнется в кармане

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

«Креатив» и «бюрократия»

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

Пример заполнения. Три размера шрифта, два разных начертания.

Нет унификации

До весны 2011 года водительские удостоверения были размером как техпаспорт. На момент написания заметки водительские права = кредитка = визитка. Почему же техпаспорт остался старого образца?

А что в заграницах?

В Украине
В Нидерландах

Техпаспорт 2.0

Что нового?

  • Изменился размер. Он совпадает по размерам с кредитками и правами.
  • Все строки сгруппированы по смыслу, их стало проще воспринимать.
  • Размеры шрифтов унифицированы.
  • Заголовок «Свидетельство о регистрации» дублировался на французском, в то время как остальной документ — на транслите. Теперь заголовок на родном языке лорда Гордона Байрона:-)
  • «Регистрационный знак» в народе называют «номерным». Написал именно так.
  • Так же я использовал альтернативный формат номеров, который придумали в Студии Лебедева. Подробнее у них на сайте. https://www.artlebedev.ru/licence-plates/
  • Максимальная масса и масса без нагрузки объединены в один пункт.
  • Убрал отчество в английском варианте.
  • Заменил пункт «Республика, край, область» на «Субьект РФ». Интересный момент: в этой строке у москвичей я видел и прочерк, и «г. Москва». «Субъект РФ» исключает эту путаницу.
  • Добавил штрихкод, по которому считывают информацию о серии, сроке действия и выдаче, дате рождения и другие параметры. Такая практика уже успешно внедрена на правах.

Фотографии, как это выглядит в жизни:

Что вы об этом думаете? Напишите в комментариях!

Post Scriptum

«Техпаспорт 2.0» — некоммерческая инициатива. В этом проекте я показываю, что госдокументы могут быть визуально привлекательными и практичными.

Если вы хотите помочь продвинуть инициативу в жизнь, или позвать в проект — напишите на почту.

Спасибо, дорогой читатель!

2017   авто   дизайн

Жизнь с квадратным экраном

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

Вот приложение Яндекс.Транспорт пытается рассказать о себе:

А вот ты хотел арендовать автомобиль:

«Тебе не стоит это читать, лучше поделись статьей в одноклассниках»:

Пора делать сайт:

В итоге:

Квадратный экран закаляет дух.

2017   UX   дизайн   наблюдения

Делаем логотип Рутрекеру

Крупнейший русскоязычный BitTorrent-трекер Рутрекер ищет новый логотип.
Основной критерий — чтобы люди узнавали «старый добрый» Рутрекер. Вызов принят!

Решая задачу, я сохранил преемственность логотипа, максимально сохранив стилистику и узнаваемость.
В оформлении рутрекера и подпроектов — три основных цвета. Их я и использовал в качестве основы, подобрал самые приятные оттенки. Ничего лишнего.

А что думаете об этом вы? Пишите в комментарии!

2017   дизайн   логотип   рутрекер

Милка — интересное дизайн-решение или элегантный способ обойти кризис?

Продуктовые производители как только не выкручиваются, чтобы сохранять прибыль на уровне.
Примеров много: гречка по 900 грамм, молоко по 950 мл. Из моих любимых — «Тоблерон»:

Он потерял 10% веса, а визуально — все 50%. Не очень удачный визуальный ход.

А «Милка» сделала шоколад с крекером. Вот такой:

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

Считаем?

По цене плитка с печеньем дороже обычной: 120 ₽/87 г против 100 ₽/ 90 г. А обычная стограммовая уже не продаётся.
На упаковке указан вес печенья — 25% от общей массы. Остаётся 75% шоколада.

Сколько стоит чистый шоколад?

Разделив и умножив, мы получаем 185 ₽ и 110 ₽ за плитку с печеньем и без.
68% разницы. Неплохо.
А визуально ничего не изменилось. «Тоблерон» подкуривает в стороне.

Сделал инфографику для тех, кто не любит считать кто любит картинки.

Итог

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

Просто визитки

Сделал визитки для мастерской по ремонту. Скоро приедут из типографии.
Нужен дизайн для бизнеса  — пишите мне.

2016   визитки   дизайн

Логотипы для юбилея Астраханской губернии

В Астрахани с дизайном непростые отношения. Знаю это не по наслышке, родной город всё-таки. Именно поэтому не смог отказаться, когда мне предложили сделать логотип для юбилея Астраханской губернии (ей исполняется 300 лет).
Получил сообщение в вк, обсудили, и начал работу.

Концепция

Чтобы сделать хороший логотип, нужно найти узнаваемый образ, который вызывает чёткие ассоциации у общественности.
Провожу опрос: «Какие у тебя ассоциации с Астраханью?».
Ответы:
— Ну, арбузы там, вобла.
— Рыбалка в дельте, ещё лотосы растут.
— Помидоры, арбузы. Кстати, когда ты мне привезёшь, обещал же! (и правда).
— О, у вас там море есть, Каспий.
— Дельта Волги, и много рыбы.
— Это там где Белое Море? Архангельск же, да?
Архангельск?

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

Спасибо всем, кто помогал и не мешал.
Дата создания: 7 октября 2016 года.

P.S.: Этот проект делаю не я один, а в порядке конкурса, поэтому конкуренты коллеги не дремлют, и предлагают решения.
О результате обязательно сообщу в заметке!

UPD 13 окт. 2016 г. Работа не попала в финал. И это тоже результат. С нетерпением жду финалиста.
UPD 2 ноя. 2016 г. Лого — победитель. А что вы думаете по этому поводу?

2016   Астрахань   дизайн   логотип

Делаю Русификатор — для уставших от брифингов, инсайтов и стори-теллингов.

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

Почему это произошло?

Закрытый коллектив — как банка с малосольными огурцами, попадая в неё, ты тоже становишься солёным. Стратег Себастьян говорит тебе заюзать кейс Адвентума, и ты его понимаешь. Использовать сленг в коллективе — нормально, и если помогает решить задачу, то я обеими руками «за». Но не тогда, когда ты общаешься с клиентом.

Говорите на языке клиента

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

Русификатор помогает почистить «зашоренную» речь

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

Русификатор принесет пользу и заказчикам, и исполнителям, да и просто пытливым умом ребятам.

Главная страница Русификатора

Русификатор — открытый проект.
Если тебе интересна идея Русификатора; ты умеешь ХТМЛ/ЦСС; связать с базой данных, чтобы наполнялось и работало; если разбираешься в рекламе или знаешь таких ребят — пиши на почту и в комментарии.