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

В последнее время, каждое приложение “красиво”. Если вы читаете технические новости, вы видели это театрализованное представление: красивые диаграммы и графики. Красивые истории. Красивые переписки. Красивые записные книжки. Красивая информация о батарее.

Стремление к красоте в наших проектах — замечательно. Но это не гарантирует удобства пользования, и это не продукт или маркетинговая стратегия. Как и “простой” и “легкий”, “красивый” говорит очень мало о продукте. Сколько людей, сытых по горло PowerPoint, выкрикивают в отчаянье, “Если бы только это было более красиво”?

В лучшем случае проблема проста: никто не выяснял, как описать продукт эффективно. Например, Write, приложение для записи лекций, описывает себя как “красивый дом для всех ваших примечаний”, которое не говорит много о том, почему можно было бы хотеть его. Macworld описывает это так “Простое написание с Markdown для пользователей Dropbox”. Это и кратко и определенно: Если вы любите Macworld и используете Dropbox, то вы будете читать больше.

Слово “красивый” говорит очень мало о продукте.

Изменяющиеся прилагательные отражают изменяющиеся отношения. В своей недавней статье “Обольщение внешним в проектировании цифрового продукта” Питер Мерхольц пишет:

«Обсуждение темы проектирования цифрового продукта за последние несколько лет стало буквально поверхностным. Много (большинство?) внимания было к таким проблемам как ‘flat’ vs ‘skeuomorphic’, цветовой схеме iOS 7, параллакс-прокрутки или подчеркивания ссылок. И не то что бы эти вещи не были важны или их не стоило бы обсуждать, но как человек, который подходит к дизайну с точки зрения удобства пользования и информационной архитектуры, я был разочарован, как сообщество преднамеренно пренебрегло более глубокими проблемами систем и структуры в пользу поверхностного. Я имею в виду, сколько пикселей должно быть пролито на перепроектированную клавишу shift в IOS 7.1.»

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

Дизайн перед эстетикой

Когда я начинал разработку в середине — 90-х, мы называли это “дизайн пользовательского интерфейса” или “человеко-машинное взаимодействие”. Программное обеспечение не было особенно гостеприимным местом для графических дизайнеров. Сеть была ограничена носителем с 216 “веб-безопасными” цветами и потребностью поддерживать дисплеи 800 × 600 в 72 PPI. Настольные компьютеры были еще более ограничены: кнопка была похожа на кнопку, которая была похожа на кнопку, и много приложений предприняли монументальное усилие по созданию их собственного стиля. Анимация была ограничена трансформациями подкачки изображения. Понятие “веб-разработчика фронтэнда” не существовало, потому что платформа была достаточно строга для того чтобы разработчики без опыта кодирования могли сделать это сами.

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

И это обеспокоило меня. Эстетика не казалась несовместимой с удобством пользования; и учитывая выбор между удобным уродливым продуктом и неудобным привлекательным, почему не последний? Я также не мог не думать о форме и функционировании вместе, одно поддерживает и улучшает другое.

Я нашел поддержку в работе Эдварда Тафта, книги которого размечали принципы и процессы для информационного проекта. Многие из этих принципов — как “самое маленькое эффективное различие” и различие между чернилами данных и chartjunk — продолжают направлять мою работу и сегодня.

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

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

Самый известный пример Тафта, графический “Поход Наполеона на Москву” 1869 Чарльза Минарда, показывает шесть размерностей информации с замечательной ясностью. (Источник: Википедия)

Помещение визуального в дизайн

К середине 2000-х индустрия догнала Тафта. Цифровые разработчики были склонны попадать в один из двух блоков: “проектирование взаимодействия с пользователем” (UX) и “визуальное проектирование” (хотя названия могут отличаться). Визуальное проектирование было, в некотором смысле, примененным графическим дизайном, и это реализовывало UX в пикселях. Это была не редкость, сводить двух разработчиков в одном проекте, из разных типов. Получившаяся работа извлекала выгоду не только из их ширины навыков, но также и от их взаимодействия.

Почему это вновь обретенное принятие визуального? В его «Эмоциональном дизайне» 2007, Дон Норман пишет:

“В 1980-х, в записи “Проекта повседневных вещей”, я не принимал эмоции во внимание. Я все относил к логическому: утилиту и удобство пользования, функцию и форму, беспристрастным способом — даже при том, что я был приведен в бешенство плохо разработанными объектами. Но теперь я изменился. Почему? Частично из-за новых научных усовершенствований в нашем понимании мозга и того, как эмоции и познание полностью переплетены”.

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

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

И это сохранило улучшение. IPhone поместил динамическое, контекстно-зависимое программное обеспечение в карман каждого. Разрешение дисплея удвоилось, и затем продолжило увеличиваться. Анимацию стало легче создавать, она сгладилась, стала богаче — вместе с возвратом, сталкивающимися объектами, которые имитировали реальную физику. Веб-шрифты освободили нас от кандалов Arial и Verdana, и те дисплеи с высокой разрешающей способностью дали четкость семействам шрифтов, которые не были ранее практичны. Сегодня, у нас есть беспрецедентная сила обеспечить кинематографическое восхищение.

Вынимание UX из дизайна

К 2011 я заметил, что отношение меняется снова. Мы взяли “дизайн” из “проектирования взаимодействия с пользователем”, и у некоторых компаний были отдельный UX и проектные команды. Wireframes стали бесполезны в некоторых кругах. Дебаты проекта все более и более разводились от пользовательских потребностей, как отметил Питер Мерхольц .

Прошлый год видел триумф дизайна “flat” над “skeumorphic”, который базировался на нечетном modernist-esque аргументе, что тени, текстуры и блеск, так или иначе соответствует действительности в среде цифрового дисплея.

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

Таким образом, сегодня, возможно, понимание Дона Нормана в «Эмоциональном дизайне» необходимо в обратном направлении. Красота потрачена впустую, когда наши продукты не учитывают реальные пользовательские потребности приемлемым способом. Снова, восприятие субъективно: продукт становится более уродливым, если ему не удается удовлетворить пользовательские потребности или он становится запутанным. Это походит на влюбленность с первого взгляда, а затем отступление после короткого разговора. Ваша давка выглядит менее привлекательной теперь; вы не можете даже вспомнить, почему вы были так очарованы вначале.

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

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

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

По материалам: smashingmagazine.com

Последняя редакция 28 сентября, 2014 в 01:09