x
 
↑
Декабрь
1 •
4 •

5 •
•
2 •
↓
Михаил Аксёнов
9 декабря 2013

Что можно добавить/изменить в оранжевой части или калькуляторе в целом?

Спасибо.

Михаил!

Я убеждён, что прежде чем браться за интерфейсы, дизайнер обязан освоить азы вёрстки.

Сколько ни говорится красивых слов о том, что дизайнер интерфейсов проектирует сценарии, интерфейс должен быть невидимым, а «дизайн — это как продукт работает, а не выглядит», 99% результатов нашей повседневной работы — это макеты, экраны, страницы и шаблоны. Вслед за Полом Рэндом процитирую Людвига Миса ван дер Роэ: «Форма — это не цель, это результат нашей работы».

Поэтому вместо обсуждения интерфейса калькулятора предлагаю разобрать один блок:

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

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

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

Это базовая молекула вёрстки. Любая страница, составленная из таких «кирпичиков» будет иметь внятную и простую структуру.

Добавим немного внутреннего порядка числам:

Мы уже имеем приемлемый аккуратный блок. Теперь можно подумать о смысловом выделении:

Блок потерял однородность и форму. Добавим линеечку, чтобы явно разделить этажи и придать им «прямоугольности»:

Но такое деление не очень логично. Кроме того, осталось некоторое многословие. Ещё компактнее:

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

 См. также совет о смешении комков

Поделиться
Отправить

Комментарии
Паша Омелёхин
9 декабря 2013

В самом калькуляторе всё так тесно. Можно было и посвободнее сделать.
Всеволод Рудой
9 декабря 2013

Маленький выступ на оранжевом пузыре-бабле вынудил меня задуматься. Оранжевый блок ведь не является подсказкой-разъяснением к просвету в калькуляторе, правда?

Яркий цвет и так достаточно сильно тянет внимание, от стрелочки можно отказаться. Или повернуть её в другую сторону.
Сергей Шабалин
10 декабря 2013

1. У площади не хватает единиц измерения. Возможно, не все догадаются, что это квадратные метры.

2. Скидка: могу я одновременно получить три скидки, если как новосёл закажу товар по акции в онлайне? Скорее всего — нет.

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

В итоге получится, что можно выбрать один вариант из «Пенсионерам», «Новосёлам», «По акции» и один вариант из «Онлайн» и «В магазине».
Глеб Великанов
14 декабря 2013

Российские натяжные потолки отличаются от якобы германских только максимальной шириной полотна. Т. е. они бесшовные, когда ширина менее 2,7 метров, в остальных случаях используют якобы германские (шириной до 5,5 м), т. к. это практичнее, чем спаивать узкие российские полотна. Ситуациями, когда сшивают полотна 5,5 м можно пренебречь, их менее 1%. Поэтому можно обойтись одной галочкой «ширина больше 2,5» вместо указания материала.

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

Диапазон площади понизить до 30 кв. м (99,9% потолков), по умолчанию 15 (среднее). Углов по умолчанию четыре. Люстра — галочка. Скидки и бонусы, я думаю, должны формироваться в последнюю очередь, т. е. после формирования формальной цены.
Андрей Щербатых
16 декабря 2013

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

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

Кстати, если выбрать у вас «новосёлам», должно появиться хотя-бы предупреждение, мол, «при доставке вас попросят предъявить документы на квартиру, в которой будет указано, что это первая покупка». Ну или как вы там определяете новоселье.

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

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

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

Вот такой веб 2.0.
2 • Как вы используете матрицу эмоций?




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

Как сделать, чтобы публикация выделялась в ленте: композиция, исправление дефектов, цвет 1 • Невозможно собрать портфолио 1 • 3 • Выбранные элементы списка, как не забывать принципы из советов бюро и когда нужен логотип 1 •