UX в душе

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

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

ДАНО:

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


Ограничения:

- формат А5

- максимум 2 физические кнопки


Функциональность (обязательны все пункты):

- настройка потока воды

- настройка температуры

- настройка света

- настройка радио

- погода

- время


Комментарий к заданию и его выполнению

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

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

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. Пользователь видит погоду;
  4. При желании настраивает яркость света;
  5. При желании включает радио;
  6. Настраивает и включает воду.

Второй:

  1. Взаимодействие со светом. Пользователь входит в кабинку, свет включается,, загорается основной экран;
  2. Пользователь настраивает и включает воду.

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

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

Вот такого:

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

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

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

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

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

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

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

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

Итоговый вариант

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

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

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

Не, ну это слишком уже. Передаю привет всем, кто с таким смесителем ищет ту самую нужную середину перемещениями по милиметру. Двукраники - наше всё.

Ответить
Развернуть ветку
Борис Шабаев
Автор

снимаю кв и у нас в душе стоит двухвентильный смеситель. Каждый день также по миллиметрам настраиваю температуру воды

Ответить
Развернуть ветку
Рамиль Газетдинов

нанесите лаком метки на смесителе

Ответить
Развернуть ветку
Alexej Karpov

Есть смесители с темпиратурной шкалой, проблема не актуальна. 

Ответить
Развернуть ветку
Vlad Kapinus

Зачем использовать старый дизайн смесителя с кнопкой (сенсорной?), который говорит о том что его можно потянуть вверх на себя и повернуть, как она кнопка будет встраиваться туда? почему бы не использовать голос? если ты пошел в автоматическое включение света. Голосовые помощники уже умеют с умным домом работать. 
Что будет если в душ идет сын, а потом идет мама? нужно выбирать из разных списков сохраненные настройки воды и радио? Может стоит предусмотреть эти сценарии
VС превращается в разбор кейсов студентов школ? Есть же паблики на фейсбуке для таких обсуждений) К автору задания тоже вопрос, зачем во время принятия душа знать температуру на улице?) 

Ответить
Развернуть ветку
Роман Стреха

Почему никто не задается вопросом «зачем мне в душе смотреть погоду?» это какая-то панацея или что с вами не так? Почему в юзерстори автор указывает аж на втором по важности действии что пользователь смотрит погоду? Да раз уж на то пошло то и время тут не самый важный элемент и зачем занимать полезное пространство этими нахрен не нужными непосредственно в душе вещами, когда можно сделать ЭЛЕМЕНТЫ УПРАВЛЕНИЯ ДУШЕМ, собственно именно то ради чего все и затевалось. По этой логике что «мы настраиваем температуру и напор минуту а потом смотрим время» с таким же успехом можно со стригальный машинки убрать настройки программы и показывать погоду

Ответить
Развернуть ветку
Todd

Виктор Папанек наверное в гробу перевернулся от таких дизайнерских задач :0

Ответить
Развернуть ветку
Борис Шабаев
Автор

Это одно из условий выполнения задания. Иногда у дизайнера бывает ТЗ, которое надо соблюдать) 

Ответить
Развернуть ветку
Роман Стреха

Задание в интерфейсе управления душевой сделать акцент на часах и погоде?

Ответить
Развернуть ветку
Борис Шабаев
Автор

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

Ответить
Развернуть ветку
Илитный Иксперт
UX
Ответить
Развернуть ветку
Vladislav Baimurzin

UK?  
В одной жаришь, в другой охлаждаешь?)

Ответить
Развернуть ветку
Dmitry Serebrennikov

Там же "идея" в том, чтобы с двух кранов воду смешать. :-) Закупориваем отверстие слива, смешиваем воду, умываемся. 

Ответить
Развернуть ветку
Vladislav Baimurzin

я это могу одним краном сделать смесителем, поставить среднюю температуру, закупорить отверстие и смешать:)

Ответить
Развернуть ветку
Илитный Иксперт
UK

Вроде да, нигде больше таких уебанских кранов нету

Ответить
Развернуть ветку
Александр Ефименко

Кнопка на смесителе включает душ и панель, соответственно нет света, нет и душа, то есть основного функционала душа. Сомнительное решение. Или я что-то не понял?

Ответить
Развернуть ветку
Борис Шабаев
Автор

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

Ответить
Развернуть ветку
Рамиль Газетдинов

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

Ответить
Развернуть ветку
Борис Шабаев
Автор

погода была в условии) 

Ответить
Развернуть ветку
Рамиль Газетдинов

ну хозяин барин =)

Ответить
Развернуть ветку
Artemy Kuznetsovsky

И обязательно экранное время!

Ответить
Развернуть ветку
Visait Nunaev

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

Ответить
Развернуть ветку
Ярослав Фролов

Интересно. Но есть моменты чисто технические. Вода и сенсор – не очень хорошо совместимы. Пользовались телефоном в дождь? А тут вы запихали ползунки для управлением светом и водой. Довольно сложно тянуть ренджи, если на пути попадаются капли воды. 
Экран панели экономит энергию или работает постоянно? Если он выключается, то как его включить? Ставить датчик на размыкание двери душа? Или включать его тапом по экрану? А если я тапнул, тогда у меня сразу появится напор воды и я не отрегулирую свет? 

Ответить
Развернуть ветку
Aydar Salikhov

Бесит, что 99,9% смесителей для душа подразумевают трубы, замурованные в стену. Если где-то станет протекать, сразу стену ломать надо?

Ответить
Развернуть ветку
Илитный Иксперт

Особенно охуенно если ебнет общий стояк с горячей водой замурованный, который изнутри кваритиры не отключается

Ответить
Развернуть ветку
Alexej Karpov

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

Ответить
Развернуть ветку
Илитный Иксперт
Вообще-то во всём цивилизованном мире делают трубы которые не протикают и не ржавеют.
протикают

Протик просто с комента. 

Ответить
Развернуть ветку
Эдуард

Тикай с города 

Ответить
Развернуть ветку
Илитный Иксперт

Тоби пизда

Ответить
Развернуть ветку
Aydar Salikhov

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

Ответить
Развернуть ветку
Борис Шабаев
Автор

НУ тут три варианта:
1) сделать просто качественно 
2) продумать дизайн ванной с внешними трубами (иногда это круто смотрится) 
3) купить готовую душевую кабину и без разницы как ты подключишь к ней воду. Её всегда можно подвинуть и тд (исходя из условий задания я продумывал панель именно для такого душа)

Ответить
Развернуть ветку
Elizaveta Fragner

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

Ответить
Развернуть ветку
Борис Шабаев
Автор

«Не пытайся понять — почувствуй» цитата из недавнего фильма)

Ответить
Развернуть ветку
Felix Matveev

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

1) подмешивание холодной воды (таким не хитрым образом реализуются игры с температурой через гаджет)
2) перекрытие подачи при очень горячей воде (это функционал например важен в больницах где понятие очень ниже обычного).
3) частичное перекрытие для смены напора через гаджет.

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

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

Ответить
Развернуть ветку
Дмитрий Малахов

Автор проектирует смеситель с термостатом, при этом в качестве "предметов для обсуждения" рассматривает классические смесители.

Обычный смеситель с термостатом не имеет радио и экрана - но это сильно удешевляет монтаж. ( В 90% помещений к нему не подведено электричество)
У смесителя с термостатом есть 2 ручки - напор и температура ...

Ответить
Развернуть ветку
32 комментария
Раскрывать всегда