Артём
2 февраля 2015
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Как решать дизайнерские задачи?


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

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

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

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

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

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

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

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

Однажды я ехал в лифте с клиентом — профессором, и он поделился смешной историей. Он работал с помощниками над схемой, которая выходила слишком громоздкой и никак не умещалась на одном листе. И так покрутили, и эдак передвинули — не лезет, и всё тут. Сломали голову, пока один из коллег, проходящих мимо, не сказал: «Возьмите листик побольше».

Профессор был сражён — ничего не мешало сменить формат бумаги, а он потратил столько времени на борьбу с блоками и стрелочками:

Семинар о полезном действии

A4

Какая-то другая схема из интернета

A3

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

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

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

Закон очевиден на примере телевизоров. Полезное действие телевизора — трансляция изображения. Общая площадь передней панели первого «Телевизора» (именно так назывался этот продукт с собственной эмблемой) не сильно отличается от площади среднего современного телевизора. Но у первого телевизора экран занимает около 5% площади, а у современного — приближается к 100%:

1930

2015

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

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

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

Обычная сушилка (не сушит)

Дайсон

Полезное действие сушилки Дайсона максимизировано: струи воздуха движутся со скоростью 700 км/ч, а конструкция позволяет сушить обе руки одновременно.

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

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

Прорывные изобретения — это не рутина. Но принцип максимизации полезного действия применим и в повседневной практике дизайнера.

В Токио работает система оплаты проезда на общественном транспорте «Пасмо». Пассажиры пополняют баланс единой транспортной карты, которую используют для прохода через контрольные турникеты. Карту прикладывают к считывателю, с неё списываются средства и на экране отображается один из трёх ответов: «проходите», «проходите, но баланс близок к нулю» и «недостаточно средств»:

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

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

Было

Ай ОС 6

Стало

Ай ОС 7

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

Если менеджер просит дизайнера выделить в истории операций поступления цветной иконкой, дизайнер, знакомый с принципом максимизации, предложит покрасить всю строку:

Дата Сумма, ₽ Остаток, ₽
15 авг 300,00 9341,00
15 авг 599,00 9641,00
25 июл 60,00 10 240,00
31 мар + 300,00 10 300,00
10 фев 232,00 10 000,00
Дата Сумма, ₽ Остаток, ₽
15 авг 300,00 9341,00
15 авг 599,00 9641,00
25 июл 60,00 10 240,00
31 мар + 300,00 10 300,00
10 фев 232,00 10 000,00

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

Ответ студента на письмо из Школы стажёров

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

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

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

Обычно

При перетаскивании мышью

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

Максимизация полезного действия необязательно связана с физическими размерами. В тексте и интерфейсах в качестве полезного параметра выступает информативность:

Было Стало
В тексте:
«Завкабель» — старейшее предприятие кабельной промышленности с широчайшей номенклатурой выпускаемых изделий. «Завкабель» основан в 1949 году. Производит силовые, реакторные, установочные бытовые и осветительные провода и кабели.
В интерфейсе:

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

Было Стало

Эпизодический метаязык в XXI веке

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

Эпизодический метаязык в XXI веке

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

Карикатуристы для узнаваемости гипертрофируют характерные внешние черты политиков и актёров.

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

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

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

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

P. S. Это был понедельничный совет о решении дизайнерских задач. Хотите знать всё о полезном действии, разрешении противоречий, работоспособных системах, законах, приёмах и формулах? Присылайте вопросы.

P. P. S. Открыт набор в Школу стажёров до 18 июля или пока есть свободные места. Занятия с 29 августа.

 

Плюсануть
Поделиться

Комментарии

Алексей Мельников
3 февраля 2015

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

Андрей Горбунов
3 февраля 2015

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


4 февраля 2015

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

Когда я схватился за карту, текст мне точно не нужен.

Роман Ватриковский
4 февраля 2015

Признаться, меня сильно смущает идея с картой. Если бы я хотел посмотреть карту, то вполне вероятно, захотел бы не только подвигать её, но и изменить масштаб. Как минимум, по привычке, не ожидая такого чудесного расширения. А возможно, вместившейся в экран карты в исходном масштабе не хватит лично мне для ориентира.

Карта закроется как раз в тот момент, когда я занесу палец над колесом мыши — предвижу раздражение.

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

Тем не менее, идея, безусловно, красивая.


8 февраля 2015

Роман, вообще-то рамка видна, присмотритесь к эскизу.

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

Эдик Цветцих
5 февраля 2015

В новом АПИ Яндекс.Карт появилась кнопка фулскрина, которая разворачивает карту на все окно браузера. Это, конечно, не подсветка при перетаскивании, но принцип подтверждает.

Саша Кан
9 февраля 2015

Спустя пару дней после публикации совета «Эпл-инсайдер» рассказал о патенте, который как раз описывает возможную разблокировку Айфона по прикосновению в любую точку экрана.

http://appleinsider.com/…sensors-into-touchscreen-displays


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

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

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

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

5 У меня никак не получается непротиворечиво сформулировать, что такое дизайн 9 Как разрешать противоречия без компромиссов? Часть вторая 3 Как разрешать противоречия без компромиссов? 1




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

3 1 Как теория близости работает в интерфейсе? Часть вторая 1 Дизайнер — это булочник 3



© 2007—2016

Запрещённые слова
Пишите: artgorbunov@artgorbunov.ru