Connect with us

Дизайн и прототипирование

Дизайнеры Ustwo переосмысли приборную панель автомобиля

Та же тщательность и забота, которую компании вкладывают в инжиниринг механики, кузова и интерьера, следует вкладывать и в создание экранов, на которые мы смотрим.

Леонид Боголюбов

Опубликовано

/

     
     

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

Неважно, ведете ли вы 15-летнюю развалюху или суперкар за миллион долларов. Скорее всего вы получаете всю жизненно важную информацию – о скорости, запасе топлива и т.п. вещах – от аналоговых указателей, которые не слишком отличаются от тех, что стояли в Форде Модели Т. Даже те машины, в которых используется цифровая панель управления, такие как Mercedes-Benz S-Class, и такие революционные автомобили, как Tesla Model S и автономная Audi A7, недалеко ушли от них, полагаясь на скевоморфизм в представлении устоявшегося и доставшегося им в наследство дизайна.

Это не всегда плохо. У автопроизводителей множество причин придерживаться того, что доказало свою состоятельность – аналоговые указатели прекрасно подходят для быстрой передачи информации с первого взгляда. «Но мы думаем, что пора изменить это», – говорит Тим Смит, дизайнер британской студии Ustwo, которая создала прекрасную игру Monument Valley. Смит, вместе по взаимодействиям Харша Варданом и руководителем продукта Дэвидом Мингеем, глубоко погрузились в концептуальный проект, описывающий то, как может выглядеть приборная панель будущего. Полностью их большой пост вы можете прочитать в блоге компании ( и даже создать собственный вариант, используя исходники Ustwo), но вот какие ключевые идеи почерпнули из него журналисты Wired.

Контекст меняет все

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

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

Еще один интересный пример, который приводит Ustwo – уменьшение размера шрифта на спидометре со временем. «Он должен быть там, когда вы первый раз ведете машину, но после 10 поездок вы привыкаете», – отмечает Вардан. Можно себе представить, что в некоторый момент времени можно будет вообще удалить «км/ч» с экрана.

Этим данным нужна визуализация

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

Понимание Ustwo спидометра чисто цифровое. Нет стрелки и шкалы, даже в скевоморфизме. «Если бы нам пришлось изобретать спидометр сейчас, не опираясь на предыдущий опыт со стрелочкой, указывающей на цифру в ряду, пришли бы мы к такому решению?», – спрашивает Смит. «Я не уверен». Вместо этого Ustwo переосмысливает скорость в виде динамической визуализации.

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

ferrarimph

В другом, для Mercedes-Benz S-Class, это как будто поднимающийся уровень воды.

mercedmph

Не полагаясь исключительно на цифры, Ustwo пользуется преимуществами цвета (спидометр начинает мигать красным, когда вы превышаете установленное ограничение скорости) и движения для передачи данных о том, что происходит.

Еще один прекрасный штрих – предупреждения, который разделяются на пассивные и активные по форме. Ustwo пассивные уведомления, вроде текстовых сообщений, выводит в кругах, в то время как более существенные предупреждения о пробках или школьниках, пересекающих дорогу, показывает в ромбах. С помощью таких маленьких деталей Ustwo надеется со временем когнитивную нагрузку, освободив водителей и дав им возможность сосредоточиться на дороге, а не на LCD-экране.

Перспектива — это ключ

Многие из предложений Ustwo нацелены на снижение когнитивной нагрузки за счет использования цвета и уменьшения визуализации. «Каждый пиксель должен выполнять свою работу», – объясняет Сит. – «Вы не можете сделать эффект металлического ободка, вы не можете сделать тень, сделать то или это, так как у всего должен быть смысл».

Менее очевидная идея студии изменять угол наклона экрана в зависимости от позиции водителя. Каждый сидит в машине по-своему. Некоторые сидят близко к панели, другие откинувшись. Таким образом, «один размер подходит всем» не имеет смысла для приборной панели. Мать Вердана, например, небольшого роста и у нее возникают проблемы с вождением семейной машины. «Она не может видеть циферблат, она вынуждена регулировать руль так, чтобы смотреть поверх него», – говорит он. Ustwo предлагает использовать ПО для отслеживания головы водителя для определения его положения и оптимизации размера шрифта и визуального угла наклона дисплея.

cinema

clustergrab1080

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

Юрий Ветров, руководитель отдела проектирования и дизайна интерфейсов Mail.ru Group:

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

Автопроизводители сильно отстают в плане реального и массового внедрения современных интерфейсов. Мы приближаемся к декаде эпохи мобильных приложений и агрессивного развития свежих подходов во взаимодействии, но в машинах все куда более печально. Одна из самых массовых и успешных платформ Ford Sync на рынке с 2007 года и уже к 2012 имела 5 миллионов установок. Другие компании также развивают свои решения – BMW iDrive, Cadillac CUE, Chevrolet MyLink, Fiat Blue & Me, Hyundai Blue Link, Jaguar Land Rover justDrive / InControl, Kia UVO, Mercedes mbrace, Toyota Entune / Lexus Enform, Volkswagen RNS. Изначально многие из них базировались на Windows Embedded, сейчас все популярнее QNX от RIM. Но все они на годы позади того, что мы видим в Android, iOS и даже Windows Phone в плане общего UX — понятность, взаимодействие, внешний вид. Да и проблемы в реализации дизайна отмечаются широко.

Обычно называют две причины. Во-первых, долгий производственный цикл — порядка семи лет для разработки новой платформы, а экономия на массовой закупке комплектующих заставляет долго использовать накопленные складские запасы (до сих пор полно моделей с резистивными сенсорными экранами). Во-вторых, безопасность — передвижение на машине связано с риском для жизни, все согласовывается многочисленной бюрократией крайне медленно и сторонние продукты подключаются в очень ограниченном виде. Поэтому вся эта красивая история про Android Auto и Apple CarPlay мало что значит — это работа только с одним компонентом, развлекательными и коммуникационными функциями. Считай, более модная версия подключения через bluetooth для громкой связи. Даже управление кондиционером невозможно, что уж говорить про главную приборную панель у руля.

Производители, конечно, стараются отрываться там, где у них всегда не было ограничений — концепты на автошоу. Там есть все — управление жестами и голосом, полная автономность, голография, использование носимых устройств для связки со стандартными инструментами управления, да и любые другие свежие тренды. Правда, в жизнь это почти не попадает и даже дорогущие спортивные машины вроде Ferrari и McLaren поражают убогостью интерфейса. Это примерно то же, что можно увидеть в Vertu — эффектное исполнение корпуса, внутри которого корявая оболочка Android.

Но последние пару лет ситуация начала меняться. Например, интересное решение для приборной панели скоро попадет в машины Audi. Ну и пример Tesla оказался заразительным (хотя зачастую это неуместный карго-культ — машина облеплена сенсорными экранами без понимания их роли). Возможно, компании накопили опыт и собрали толковые команды — раньше им не требовалась экспертиза по UX программных интерфейсов. Например, Ferrari наняла Эдди Кью из Apple.

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

ui

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

Студия в первую занялась исследованием того, что делают водители в разных ситуациях, вместо того, чтобы наворачивать около-киношные эффекты — впечатляющие, но мало что меняющие по сути использования машины. Dribbble и Behance полны таких бесполезных поделок. У ustwo мощный послужной список (екатеринбургской компании Кнопка посчастливилось поработать с ними) и очень вдумчивый подход — они смотрят на проблему со всех сторон (эстетика, эргономика, когнитивное восприятие, безопасность, законодательные ограничения и т.п.).

Результат достаточно необычен — он не вызывает вау-эффекта на первый взгляд, зато вдумчиво прорабатывает основные контексты вождения авто. Такие вещи нужно пробовать в реальном использовании и в кейсе есть прототип, который можно пощупать. Решение ортогонально тому, что можно видеть в 99,9% случаев — оно пытается ответить на вопросы водителя и сориентировать его, не опираясь на классические решения. Это достаточно рискованно — сформировавшиеся привычки миллионов людей менять не так просто. Пример стандартной раскладки клавиатуры QWERTY это подтверждает — есть куда более удобные и быстрые варианты, но так уж сложилось. Но, в любом случае, это действительно значительный шаг вперед относительно привычного формата, а не просто красочная тема оформления.

Еще один большой плюс концепта — прототипы в коде, с которыми можно поиграть. Все больше дизайнеров понимает, что им нужен аккаунт на GitHub вдобавок к Dribbble и Behance.

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

Жаль только, что производители неохотно пускают к себе сторонние платформы и решения. Никому не хочется повторения истории с компьютерами, смартфонами и планшетами, когда рынком рулит софтверная компания, а вендоры сведены до роли фабрики и имеют мало возможностей для дифференциации. К инициативе автономных машин от Google отнеслись прохладно и каждый делает свои решения, а первый заход Apple с Siri in the Car по сути провалился — были единичные внедрения, несмотря на красивые обещания. С Android Auto и Apple Car Play все вроде как должно быть получше. Хотя, как я говорил выше, их пустили только в самые простые вещи как надстройку, о замене родных систем речи не идет.

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

Андраш Густи, руководитель мастерской мобильных приложений “Бегемот-Бегемот”:

Вовсе не странно, что ребята из ustwo, компании, очень громко заявившей о себе в плане дизайна, который ставит под сомнение наше понимание реальности и физики, решила поучаствовать в этом трендовом процессе. Это шанс выйти из такой “детской”, в глобальном смысле, деятельности как разработка игр, и сделать что-то, что может “поменять мир”. Ну и попытка прыгнуть выше головы. И прекрасная возможность стать топик-стартером в обществе на тему зависимости человека от цифровых технологий.

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

Blue Link Smartwatch

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

Недавно в RADUG я поднял дискуссию: зачем на навигаторах в мобильных устройствах кнопки +/-, если есть пинч на мультитаче. Дискуссия была жаркая, и мы пришли к выводу, что людям так привычнее, а ломать привычки людей во время вождения – опасно. И тут предлагается в корне переосмыслить то, как мы видим навигационную панель и что это такое. Я за любые нововведения, но, должен признать, это тоже опасно.

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

Мне кажется, данная концепция прекрасно подходит для мобильного устройства (мы сами сейчас разрабатываем интуитивный навигатор, который цветовым решением передает то, насколько правильно водитель едет). Но ее элементы нужно очень осторожна адаптировать к приборной панели. А адаптировать придется, так как никуда не денемся. Идея обязательно приживется. Людям такие псевдо-прогрессивные штуки нравятся. Мы как общество уверенно движемся к упрощенным интерфейсам, которыми можно управлять на уровне эмоций, и показатели которых ясны с первого взгляда. Даже когда это представляет для нас скрытую угрозу.

Я бы рассматривал текущую попытку как первую итерацию. Уверен, в ближайшем будущем мы увидим множество более удачных вариаций на тему.

Комментарии
Если вы нашли опечатку - выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать info@apptractor.ru.
Advertisement
Click to comment

You must be logged in to post a comment Login

Leave a Reply

Дизайн и прототипирование

FlowMapp

FlowMapp – онлайновый инструмент для создания интерактивных карт и пользовательских потоков для сайтов и приложений.

AppTractor

Опубликовано

/

Автор:

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

Комментарии
Продолжить чтение

Дизайн и прототипирование

Новое для дизайнеров в iOS 12

Юрий Ветров в “Дайджесте продуктового дизайна” рассказал о нововведениях в iOS 12.

AppTractor

Опубликовано

/

Автор:

Вчера анонсировали iOS 12. С точки зрения интерфейса изменений немного, основной упор сделан на повышение производительности (iOS 11 была одной из самых сырых и глючных). Причём её можно будет поставить на те же устройства, что работали с прошлой версией — пул доступных устройств получается шире.

Неплохие обзоры обновления сделали The Verge и Engadget. Какие визуальные и интерфейсные нюансы можно отметить:

  • iOS-приложения можно будет портировать для MacOS. Пока это сделано для некоторых приложений Apple, со следующего года станет доступно сторонним разработчикам. Но это не объединение платформ, о чём мечтают многие.

  • Ещё один стиль кнопок в action sheets:

  • Apple, Adobe и Pixar продвигают единый стандарт файла для описания дополненной реальности.
  • Shortcuts, своя версия IFTTT на базе купленного продукта Workflow — можно создавать собственные операции для Siri, которые затрагивают несколько действий в разных приложениях.
  • Автоподстановка кодов подтверждения, которая поможет мобильным банкам.
  • Умельцы раскопали намёк на тёмную тему. Она появится в новом MacOS, в iOS была в некоторых приложениях (например, будильник).

Короче, для дизайнеров новостей мало, получился скорее релиз про полировку и оптимизацию. Полный список изменений. iOS 12 будет доступна в сентябре, но уже сейчас можно поставить бета-версию.

Комментарии
Продолжить чтение

Дизайн и прототипирование

Темный или светлый UI? Советы по выбору цветовой схемы для вашего интерфейса

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

AppTractor

Опубликовано

/

Автор:

Факторы, влияющие на выбор цветовой схемы

Будьте уверены — нет ни одного конкретного решения, которое бы сработало для всех задач. Решение в значительной степени зависит от множества факторов, охватывающих не только вид со стороны пользователя, но и бизнес-цели, рыночные условия и текущие тенденции в проектировании интерфейсов. Давайте рассмотрим существенные факторы, которые необходимо учитывать.

Читаемость и разборчивость

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

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

Означает ли это, что интерфейсы со светлым фоном более читабельны? Не всегда. Один из известных гуру дизайна пользовательского опыта Джейкоб Нильсен сказал: «Используйте цвета с высоким контрастом между текстом и фоном. Для оптимальной четкости требуется черный текст на белом фоне (так называемый позитивный текст). Белый текст на черном фоне (негативный текст) почти так же хорош. Хотя коэффициент контрастности такой же, как и для положительного текста, инвертированная цветовая схема немного «остужает» людей и замедляет их чтение. Больше всего разборчивость страдает в цветных схемах, которые делают текст более легким, чем чистый черный, особенно если фон сделан более темным, чем чистый белый».

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

Однако некоторые научные исследования, относящиеся к 1980-м годам, показывают, что для больших объемов текста светлый фон представляется более эффективным выбором для большинства пользователей. Изучая работу рекламных носителей, Д.Бауэр и К.Р.Кавоний поделились своими исследованиями в статье «Улучшение удобочитаемости визуального отображения при помощи изменения контраста» (1980). В частности, они обнаружили, что участники были на 26% более точными при чтении текста, когда на светлом фоне фигурировали темные буквы.

Почему это так? Джейсон Харрисон из Sensor Perception and Interaction Research Group (Университет Британской Колумбии) объясняет это явление следующим образом. Люди с астигматизмом (которых, согласно различным статистическим данным, около 50% населения) чувствуют, что сложнее воспринимать белый текст на черном, чем черный текст на белом. Отчасти это связано с уровнем освещенности. С ярким дисплеем (на белом фоне) диафрагма закрывается немного больше, уменьшая эффект «деформированной» линзы. С темным дисплеем (черным фоном) радужная оболочка открывается, чтобы получать больше света, и деформация линзы создает гораздо более нечеткий фокус для глаза. Итак, основываясь на этом исследовании, если интерфейс представляет много текста и требует длительного чтения, то светлый фон более удобен для пользователя.

image

Доступность

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

Ясность

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

image

Отзывчивость

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

Окружение

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

image

Чеклист список для выбора цветовой схемы

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

  1. Определите цель интерфейса. Определив основные точки использования интерфейса и возможности решения проблем пользователя, вы сделаете выбор цветовой схемы более обоснованным. Если пользовательский интерфейс является текстовым (блог, новостная платформа, электронный ридер и т.д.), светлый фон будет более эффективным выбором. Свет делает экран просторным, и становится легче сосредоточиться исключительно на содержании. С другой стороны, если интерфейс вращается вокруг изображений, а не текста, то цветовая схема с темным или ярким фоном может быть хорошим решением, поскольку цвета изображений будут ощущаться глубже.
  2. Проанализируйте свою целевую аудиторию. Определение и анализ целевой аудитории – это главное, что должен сделать дизайнер. Понимание того, кто является вашим потенциальным пользователем и что он хочет получить от сайта или приложения – это прочный фундамент для удобного, полезного и привлекательного интерфейса. Люди среднего возраста и пожилые люди предпочитают интерфейсы со светлой цветовой схемой, поскольку они находят ее более интуитивной и управляемой. Молодые люди часто считают  интерфейсы с темным фоном более оригинальными и стильными, что может быть способом привлечения целевых пользователей. Подростки и дети предпочитают интерфейсы, где используются яркие фоны и забавные детали. Выбор цвета, очевидно, зависит от характера функционирования интерфейса и контента. Но предпочтения целевой аудитории всегда являются хорошим ключом к решениям, ориентированным на пользователя.
  3. Изучите конкурентов. Еще один аспект, который следует иметь в виду, заключается в том, что ваш продукт не плавает в “синем океане”. Наоборот, он будет бороться за внимание пользователя в условиях сильной и динамически меняющейся конкуренции. Выбор цветовой схемы становится способом сделать приложение или веб-сайт отличающимся и привести к столь драгоценному первому взаимодействию со стороны пользователя. Время, затраченное на исследование существующих продуктов в сегменте, сэкономит вам время и силы, которые вы, в противном случае, потратите на редизайн неэффективных решений.
  4. Тестируйте, тестируйте, тестируйте. Описанные выше моменты убеждают в одной ключевой вещи: поскольку цвет относится к факторам, непосредственно влияющим на удобство использования и привлекательность интерфейса, каждое дизайнерское решение должно быть соответствующим образом проверено – в разных разрешениях, на разных экранах и в различных условиях. Тестирование позволит выявить сильные и слабые стороны цветовой схемы до того, как продукт выйдет на рынок, получит внимание  и потеряет шанс произвести первое впечатление.

image

Компромиссные решения

Не желая придерживаться строгих цветовых схем, дизайнеры пользовательских интерфейсов иногда находят компромиссные решения, например, такие.

Темный интерфейс, белые вкладки для содержания

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

image

Предоставление пользователю возможности выбора цветовой схемы

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

image

Полезное чтение:

Комментарии
Продолжить чтение

Дизайн и прототипирование

Креативные прогресс бары, помогающие скрасить ожидание

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

AppTractor

Опубликовано

/

Автор:

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

 

Забавные экраны ввода пароля

Экраны регистрации пользователей: примеры для вдохновения

Комментарии
Продолжить чтение

Реклама

Наша рассылка

Нажимая на кнопку "Подписаться" вы даете согласие на обработку персональных данных.

Вакансии

Популярное

X
X

Спасибо!

Теперь редакторы в курсе.