Марат Сафи
8 апреля 2014

Здравствуй, бюро!

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

Цель: показать посетителю, сколько он сэкономит, используя светодиодное освещение.

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

Буду рад, если вы укажете на различного рода недочеты. Спасибо.



Марат!

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

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

Метод предложений

Суть: сначала ограничиться в дизайне единственным инструментом — предложениями.

Что вы хотите сказать пользователю этой страницей? Что бы вы сказали человеку, если вместо страницы вы бы были рядом с ним?

Вы пишете: «Цель: показать посетителю, сколько он сэкономит, используя светодиодное освещение». Возможно, я не прав, но у меня подозрение, что это не цель, а ваше решение, которое вы по ошибке приняли за цель. Настоящая цель, как я предполагаю, помочь покупателю понять, что светодиодные лампы выгоднее ламп накаливания. Вот и первое предложение готово:

Светодиодные лампы выгоднее ламп накаливания.

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

Светодиодные лампы выгоднее, хоть и дороже ламп накаливания.

Теперь всё чётко, однако сразу возникает вопрос: «Но как?!» Весь ваш калькулятор — попытка ответить на него, дав человеку инструмент расчёта стоимости владения лампой. Давайте не будем забегать вперёд и ответим предложением (цифры от балды, нужно поставить настоящие):

Светодиодные лампы выгоднее, хоть и дороже ламп накаливания. Они потребляют в 10 раз меньше электроэнергии и служат в 5 раз дольше.

Теперь, когда механизм экономии объяснён, можно переходить к убеждению. Ваше «показать, сколько человек сэкономит» — отличный способ. Давайте посчитаем, сколько же человек сэкономит и напишем ещё пару предложений (цифры снова от балды):

Светодиодные лампы выгоднее, хоть и дороже ламп накаливания. Они потребляют в 10 раз меньше электроэнергии и служат в 5 раз дольше.
В году около 2000 рабочих часов. Если в офисе светит 60-ваттная лампа накаливания, то за 5 лет при цене электричества 4 р. за кВт·ч вы тратите на электроэнергию 2000 × 60 × 5 × 0,004 = 2400 р. Она сгорает раз в год, при цене лампы 30 р. это ещё плюс 150 р., итого 2550 р.
Если использовать эквивалентную по освещению 6-ваттную светодиодную лампу, то на электричество вы потратите в 10 раз меньше — 240 р., а на саму лампу — 300 р. один раз (она не сгорит), итого 540 р. Экономия — больше 2000 р. Умножьте на количество ламп в вашем офисе.

В принципе, дизайн 1.0 готов.

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

Тут можно всё переставить по вкусу, добавить логотип и всё остальное.

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


    Метод предложений имеет два важных свойства:
  1. Он вправляет мозги. Если ты не можешь сделать страницу в виде текста из предложений, значит ты не понимаешь, зачем её делать и что хочешь сказать. Проблема не в отсутствии вдохновения, а в непонимании задачи. Когда задача понятна, сделать страницу проще простого, можно даже Фотошоп не открывать.
  2. Он идеально совместим с прогрессивным джипегом, что жизненно важно для работы по ФФФ. Первый результат готов за полчаса. Дальнейшее время тратится на его доведение до блеска. Пока время есть, предложения раскрашиваются и размечаются, расставляются в блоки и столбики, заменяются иллюстрациями, видеороликами, инфографикой, интерактивными элементами. С каждым шагом страница становится всё круче, но в любой момент дизайн готов.

Предположим, что время ещё осталось. Приглашаю уважаемых советчиков предложить следующие шаги.

P. S.

Я веду практический курс «Пользовательский интерфейс и представление информации». Дата следующего курса пока неизвестна.

 
Мы напишем вам, когда будет открыта запись. Без спама.

Поделиться

Комментарии

Константин Зотов
8 апреля 2014

Кнопка «Купить выгодную лампу» рядом с такой большой суммой слегка пугает. Стоит кнопку ставить рядом с самой маленькой суммой.

Евгений Романовский
8 апреля 2014

Илья, о существенной выгоде светодиодных ламп мне было известно и до вашего совета. Квартира на первом этаже, лампочек нужно много, светят постоянно (работаю дома). Так что это действительно важный вопрос, который мы все время откладывали. Но фраза «вы потратите в 10 раз меньше» заставила произвести свои расчеты прямо сейчас. Получилось 87 рублей вместо 870 в месяц. Завтра же иду в магазин!

В вашем сравнении нет люминесцентных ламп (они есть у автора). С ними выгода менее очевидна. Про срок службы как-то не сразу задумываешься. Разница по потреблению не столь велика. И тут в расчетах крайне важна стоимость лампочки, которая может отличаться в два раза. Если делать прям настоящий калькулятор-калькулятор, то «зашивать» фиксированную стоимость лампочки не совсем корректно. Сейчас можно по распродаже купить сравнительно дешевых и хороших люминесцентных. Низкие цены на светодиодные попадались мне нечасто. Как правило, неизвестных марок с неизвестным качеством.

Для дотошных посетителей (а надо обладать определенной дотошностью, чтобы вычислять выгоду от перехода с люминесцентной на светодиодную) было бы неплохо пояснить вопрос цены. Ну, что хорошую светодиодную дешевле 300 рублей не купишь (или купишь? Не знаю).

Александр Сарычев
8 апреля 2014

Не следующий шаг, но мысль по странице.

Я не воспринимаю цифры сэкономленных денег на периоде 5-10-20 лет. В примере Марата я сэкономлю 19520 рублей за 20 лет. Но что эти деньги будут стоить через 20 лет? Во-первых, энергия будет дорожать, и, наверно, каждый год. Во-вторых, и лампочки будут дорожать из-за инфляции. А в-третьих, и самое главное, эти 20 000, может быть, ничего не будут стоит через много лет. Вспомните уровень цен и зарплат хотя бы 10 лет назад.

Мне кажется, что человеку проще понять, что с одной лампочки ежемесячно он будет экономить 100 рублей. А с трёх, в каждой комнате — все 300. Сколько мы ежемесячно отдаём за квартплату все примерно представляют, и могут оценить насколько это будет выгоднее. Сумму для года я бы оставил. И число внушительнее будет (на то, ведь, и расчёт был с этими 5-10-20 годами), и год ещё осязаем.

Андрей Шестаков
8 апреля 2014

Александр, думаю вы не правы.

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

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

Женя Бакст
8 апреля 2014

У Брета Виктора есть библиотечка для динамизации документов: http://worrydream.com/Tangle/

Вадим Паясу
8 апреля 2014

Калькулятор — сложная в проектировании, верстке и программировании система, требующая постоянного апдейта цен. И которой никто все равно не будет пользоваться.

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

Поэтому обычному человеку хватает воображаемых подсчетов.

Фёдор Аксёнов
8 апреля 2014

Оба макета реализуют лишь промежуточную инструментальную задачу, а не предлагают готовое решение сценария «Хозяин дома задумался об энергоэффективности освещения».

У меня дома множество различных ламп. Я хочу знать — сколько я могу сэкономить, если заменю их на светодиодные лампы. С учётом первоначальных затрат и без. В сравнении с текущим состоянием.

Решение:
Ряды ламп (в включенном состоянии) различного типа (накаливания, галогенные, люминесцентные) и различной мощности (45-60-75-90-100-150-180). Кликаю на лампу и «включаю её». Когда включил весь ряд — добавляется новый ряд ещё не включенных.

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

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

И в самом конце график эффективности перехода на светодиодные лампы с учётом расходов (включая сравнение с расходами на обычные лампы — они же будут перегорать).

В итоге: Кликать на лампы — весело. Визуальный результат подсчёта и сравнения — исчерпывающий. Посмотрел и сразу всё понял.

Марат Сафи
8 апреля 2014

Спасибо, Илья. Спасибо комментаторам.

Продемонстрированный пример проще и понятнее для восприятия. Обязательно возьму на заметку такой подход!

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

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

Относительно периода 5-10-20 лет, Александр, вы правы. Стоимость в месяц будет самое то.

Андрей Щербатых
8 апреля 2014

Чтобы повысить эффективность калькулятора и ещё больше перейти в мир клиента — надо от «введите кол-во лампочек» перейти к «введите площадь помещения».

В офисах чаще всего это потолок армстронг с квадратными батареями ламп по 4 штуки. Есть смысл сравнить именно так (введите кол-во квадратов ламп в вашем офисе).

Цена на э/э — переменная величина — она неодинакова для офиса и для жилого помещения. Так что там тоже радиобаттон (утверждение для Украины, с РФ не знаком).

Мерить выгоду не в рублях (спасибо, Александр Сарычев), а в батонах хлеба, бутылках пива и канистрах бензина. Они тоже дорожают, пропорция цен вряд ли меняется — вот поэтому так-то и будет понятнее. Или в путёвках на Мальдивы… Ну, типа, ввёл 10 ламп — экономишь 5 литров АИ-95 в месяц. Ввёл 100 ламп — экономишь 1 путёвку на Мальдивы в год.

А чё, наглядно.

Евгений Арутюнов
9 апреля 2014

Недавний буклетик. Пусть полежит здесь.

Игорь Коротин
9 апреля 2014

Хочу заметить, что не раскрыта основная проблема, а именно качесто освещения светодиодными лампами и цена светодиодной лампы по отношению к «лампочке Ильича».

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

Валерий Бровиков
30 апреля 2014

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


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

1 Несмотря на то, что между нами была договорённость о работе по ФФФ, клиент был в бешенстве 4 Надоело работать без сна и отдыха. Что посоветуете? 2 В прошлый раз вы за эти деньги и в эти же сроки сделали столько, а на этот раз вы сделали только это 2




Недавно всплыло

2 1 2 Расскажите об управляемости: программа 2