UX в душе

Если вы читали книгу Дональда Нормана «Дизайн привычных вещей», то вы уже знаете, что дизайн окружает нас повсюду. Дизайн может быть плохим или хорошим, но он есть во всем, что делают люди. В том числе и в дУше.

Во время моего обучения в Школе продуктового дизайна МТС перед нами с лекцией про артефакты проектирования выступал Артем Костин из AIC и для фана дал задание.

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

Но, из-за того, что:

1. Данное «художество» плохо отражало логику выполнения задания

2. Мне хотелось оформить выполнение этого задания в портфолио

Я решил немного отойти от условий выполнения задания и сделал его в Figma.

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

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

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

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

Но даже у него всегда было несколько проблем (болей):

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

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

К примеру:

Моемся мы в душе 15-20 минут, а настраиваем его ну не более минуты. Даже если его настройка очень неудобная, только из-за корявости процесса нам кажется, что это происходит гораздо дольше.

Поэтому я решил, что показателям температуры и напора воды нет смысла находиться на экране постоянно, и сначала сосредоточился на экране интерфейса, который пользователь видит оставшиеся 95% времени, и реализовал на нем остальные функции панели из задания:

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

Чтобы все начало работать вам надо подключить кабинку к электричеству и настроить WiFi в таком окне.

Вызывается окно нажатием на иконку WiFi:

Расскажу сначала про свет:

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

Допустим, что у нас есть возможность установить в душевой кабине датчик движения (не противоречит условию), и свет включается автоматически, когда кто-то входит в кабинку. Сразу отпадает необходимость в кнопке включения света и остается только организовать настройку его яркости. Это легко сделать с помощью обыкновенного «ползунка».

Добавляем к «ползунку» иконку лампочки и проценты, чтобы пользователь при необходимости посмотрел на панель и сразу догадался, что это за ползунок (как поменять яркость и какая сейчас настройка яркости).

Регулировка света активируется при сильном нажатии, по аналогии с технологией Apple 3D Touch и реализуется похожим образом. При сильном нажатии фон размывается и остается только индикатор яркости. Поэтому пользователь сосредоточен только на целевом действии в этот момент.

Регулировка света находится справа, потому что:

1) Это далеко не основное, что может заинтересовать пользователя в любой момент.

Скорее он задастся вопросами: «а который сейчас ча? ” или “какая сегодня погода? что одеть на работу?» и будет искать на экране время или погоду соответственно.

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

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

2) Мы живем в мире правшей, около 90% людей удобнее (привычней) использовать правую руку, а при расположении «ползунка» справа, это делать существенно удобней.

В общем, у нас просто нет иного выхода, мы вынуждены расположить его справа!

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

Тут можно немного поспорить, что важнее показать пользователю в первую очередь: время или погоду. Но давайте сойдемся на том, что время гораздо важней. О времени мы задумываемся гораздо чаще, не просто так ведь, и на iOs и на Android на экране блокировки нас всегда встречает время.

Поэтому на времени у меня самый сильный акцент на:

• самый крупный шрифт (нам еще важно, что время было видно издалека и не надо было прищуриваться);

• расположение по центру относительно высоты. Можно поспорить, что люди читают в основном не только слева направо (как я утверждал ранее), но еще и сверху вниз. Это правда, но это работает не всегда. Из многих правил есть исключения, если их нарушать осознанно. Кто посмотрит наверх, когда его внимание акцентируют на центр огромным шрифтом?

Настраивать время не надо, так как оно выставляется автоматически после подключения к Wi-Fi.

С погодой аналогичная ситуация, как и со временем.

А вот с радио, думаю, можно раскошелится и встроить радиоприемник, хотя он и по Wi-Fi может работать…

Такие технические моменты лучше уточнить у тех, кто будет реализовывать ваши задумки: программистов, инженеров-конструкторов и т.д. Им виднее.

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

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

Очевидно было, что на плеер нужно будет выделить целый блок на экране: сверху или снизу. Но, если расположить радио-плеер сверху, то:

1) Он съедает очень много внимания на себя, а этого нам не нужно (все-таки музыка в душе это ооооочень доп.функция), дизайн интерфейса становится «тяжелым” из-за того, что сверху остальные элементы “придавливает» большой блок, а бедная погода остается в самом низу, где ей не место с её воздушными облачками, солнышком и т.д.

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

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

Поэтому, они расположены именно так:

Я кстати думал еще о том, чтобы не отделять плеер от остальной части экрана плашкой, но с ней, в таком варианте дизайна (варфрейме), интерфейс выглядит целостней чтоль. Сравните сами, как по мне, тут дело вкуса:

1. Название радиостанции и волна, можно пофантазировать, что подключение по Wi-Fi телефон и слушаем музыку с него. А душ это у нас колонка.

2. Добавить прослушиваемую радиостанцию в избранное.

3. Думаю можно не комментировать: вкл/выкл, вперед/назад.

4. Если лень мотать взад и вперед радиостанции, то заходите в «Списки» и там ищете нужную вам волну. Там же список радиоволн, чтобы добавить в избранное. А также другие частоты.

5. «Ползунок», регулирующий громкость.

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

Первый:

Второй:

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

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

Вот такого:

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

С помощью этого экрана пользователь может:

1) настраивать воду привычным ему способом, но при этом, на экране будет отображаться температура и напор воды, которые он настроил. Но вода еще не льется.

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

2) Пользователь также может выбрать определенный режим (оптимальный или сохраненный им ранее) здесь:

Это иконка с сохраненными и предлагаемыми режимами.

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

3) Или добавить режим в избранное.

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

Экран регулировки + одноручный смеситель: