Интерактивный дизайн. Лучшие эффективные тенденции ушедшего года
Как правило, для стимулирования человека, использующего продукт, сервис, систему, нужна возможность дать ответную реакцию. Эта реакция должна быть оцененной, с четко прописанной коммуникацией, и, в большинстве случаев, вызывать четкий и наполовину предсказуемый ответ. И тогда это работает.
Приведенное выше – это базисное определение интерактивного дизайна (Interaction Design - IxD), соединяющее вместе общие тенденции определений, данных известными дизайнерами Денном Саффером (Dan Saffer 1 ) и Робертом Рейнманном (Robert Reimann 2 ), а также Ассоциацией Интерактивного Дизайна (Interaction Design Association 3 ).
Также очень важно отметить, что интерактивный дизайн – это понятие, совершенно отличное от других видов дизайна. Это не информационная архитектура, или промышленный дизайн. Это также не разновидность пользовательского интерфейса. Интерактивный дизайн – это не какая-либо форма или структура, а что-то более эфемерное – это, скорее, понятие того «почему» и «когда», а не «что» и «как».
Для любой разновидности дизайна первоочередная задача – сформулировать то, что называется основами или базисными элементами. Создание таких семантических понятий обеспечивает:
- более качественную коммуникацию между участниками
- создание общих эстетических понятий
- лучшие инструменты для обучения
- область для исследований
Что такое основания?
Первое мое знакомство с “основаниями” состоялась при подготовке программы для специалистов по промышленному дизайну в институте Пратта в Бруклине, Нью-Йорк. Программа создавалась Ровиной Рид Костеллоу (Roweena Reed Kostellow) на основе ее образовательной философии оснований (более детально см. «Элементы дизайна» от Гейл Грит Ханна - Elements of Design , Gail Greet Hannah 4 ).
По Костеллоу, существует шесть элементов, которые образуют основания промышленного дизайна: линия, освещение и цвет, пространство, объем (размеры), отрицательное пространство (задний план, фон) и текстура (поверхность, фактура). Смешивание этих элементов и эксперименты с ними – сердце дизайна в области 3D-форм. Студенты института Пратта осваивали эти основания в течение годичного курса. Они должны были определять границы и зависимости, обсуждая абстракции и реальные проекты.
Поскольку я не единственный человек, который задумывался об этих вещах, можно предположить, что все мы думаем об этом по-разному. Например, Ден Саффер, в своей книге «Разработка интерактивностей» отвел большую главу, где он описывает элементы интерактивного дизайна: время, движение, пространство, появление, текстура и звук. Элементы Дена скомпонованы по тому, как я могу вызвать их на форме для появления интерактивности, а не по тому, какая форма интерактивности будет доступна для меня или нет, за исключением, наверно, времени.
Если это действительно основания интерактивного дизайна, они должны быть полностью абстрагированы от формы и не иметь физических атрибутов.
Основания интерактивного дизайна
Время
«Время» отличает интерактивный дизайн от других видов. Это оболочка наших понятий об интерактивности.
Но время не единственное основание интерактивного дизайна. Есть очень много взаимосвязанных аспектов манипулирования временем. И как мы все знаем, время относительно, оно существует по множеству осей в один и тот же момент. Так что можно выделить три зависящих от времени оснований интерактивного дизайна:
Темп
Интерактивный дизайн – это создание повествования, постепенных изменений в индивидуальном опыте, но при этом оставаясь в границах. Например, если я использую почтовый клиент, мне совершенно не хотелось бы включать печку в тот момент, когда я пишу письмо.
Повествование имеет темп. Мы ясно понимает это, когда смотрим кино. Если кино хорошее – мы никогда не смотрим на часы. Темп – это также часть интерактивного дизайна, поскольку иногда вы можете смотреть на часы вовсе не из-за скуки, а потому, что хотите понять – сможете ли вы вовремя завершить процесс «интерактивности».
По моему мнению, темп в интерактивном дизайне часто коррелирует с тем, что мы можем сделать в отдельно взятый момент. При этом недостаточно того, чтобы я мог что-то сделать, надо еще, чтобы я это мог сделать до перехода на следующий шаг. Например, когда я что-то покупаю, я могу заполнять одну очень громадную форму, где есть вся информация обо мне и проверять все данные сразу, или я могу проверять данные по частям, разделив процесс проверки на несколько.
Поскольку общая длина полей одинакова, время на заполнение должно быть также примерно одинаково в каждом случае, но ощущение темпа в каждом дизайне будет отличаться. В общем случае, одна большая форма более эффективна, а поделенная на куски – более управляема.
Реакция
Простейший путь определения времени в интерактивном дизайне – «время реакции». Насколько долго система отвечает на событие? Это происходит, когда мы види, как курсор превращается в песочные часы или в, ставший притчей во языцех, прогресс-бар, и мы ждем когда система нам ответить, но важны и другие времена реакции.
Действие, совершающееся в реальном времени (синхронно), связано с текущим моментом, в то время как асинхронное действие теряет эту связь. Поскольку некоторые системы чувствительны ко времени, надо знать, как учитывать различия этих типов реакции.
Контекст
Каждый базисный элемент, такой как время, должен иметь подэлемент – «контекст». В нашем случае, интерактивности курса для человека, это означает, что нельзя рассматривать дизайн сам по себе. Например, говоря «время», мы не можем заниматься дизайном приложения без понимания того, как долго человек может потратить на прямой контакт с системой.
Метафора
Метафора – это литературный прием, при котором одно хорошо понимаемое явление или понятие используется для объяснения другого понятия, более трудного для понимания, или когда его трудно объяснить другим образом. Виртуальная природа компьютеров требует нахождения «вещественных» метафор для того, чтобы объяснить людям все эти туманные вещи. От того, какого типа и насколько много метафор вы используете, напрямую зависит качество и эмоциональное восприятие вашего продукта.
Самый наглядный пример метафоры – урна или мусорное ведро (в операционной системе на вашем компьютере). Идея состоит в том, что ваши файлы лежат в виртуальном «ведре» или «корзине», так что если вы ошиблись, то вы можете покопаться там (Ой!) и восстановить их в оригинальном виде. И, конечно, вы можете всегда «опустошить ведро», сделав содержимое невосстанавливаемым. Метафора работает хорошо для любых людей, поскольку она точно и гибко связана с реальностью.
Все метафоры не имеют обратного хода. Например, мы попытались использовать термин «удалить», для того, чтобы быстро объяснить, как добавить что-то в ведро или урну. Но, мы ведь не можем что-то удалить в реальное мусорное ведро или урну, не так ли?
Но иногда метафора бывает слишком отдаленной. Тогда она позволяет расширить границы наших способностей к воображению. Если у меня есть книга для записей, картотечный шкаф, почтовый ящик, календарь и тому подобное для удобной работы на моем экране, я могу называть мои объекты карточками, использовать блокнот, оставлять свои сообщения в почтовом ящике и отмечать встречи в календаре, не правда ли?
Но при этом метафоры лучше достигают цели, если они немного не точны, и пользователь сам должен заполнять пробел согласно собственному пониманию предмета. Так, например, мы адаптировали метафоры рабочего стола к нашим современным компьютерам.
Дизайнер интерактивности должен достигать этого баланса, внимательно используя метафоры своих предшественников и строя что-то поверх них, так долго, насколько оригинальная метафора (возможно, всеми признанная) будет способна сопротивляться новым течениям.
Абстракция
Работая в тандеме с метафорой, абстракция соотносится больше с физической и ментальной активностью, которая исключительно необходима для того, чтобы интерактивность имела место. Я впервые начал думать об абстракции тогда, когда прочел статью Йонаса Лоугрена (Jonas Lowgren) 7 , о том, что он обозначил термином «пластичность». Прочитав эту статью и использовав этот термин несколько раз в разговорах и дискуссиях, я вдруг понял, что в действительности Йонас говорил о том, как абстракция в интерфейсе является отображением продукта.
По большому счету, все что мы видим в компьютере – изначально абстракция, поскольку у нас есть два первичных интерфейса для точки ввода – мышь и клавиатура. Некоторые правда размещают монитор внутри особого рода указательных устройств и понижают уровень абстракции для некоторого типа интерактивностей, в основном – для рисования. Тем не менее, большинство из нас использует нажатие на клавишы, указание, клик и перемещение мыши по экрану.
Давайте сфокусируемся на «мышеводстве». Мы смотрим на монитор, по которому перемещается курсор (в виде иконки) в соответствии с движениями мыши. Не глядя на мышь (обычно) мы перемещаем ее и, в соответствии с заданным направлением, иконка на экране (обычно стрелка) – перемещается тоже. Отлично, сортируем. Направо и налево работает так, как видится, но вот перемещение мыши «от себя» двигает курсор вверх, а «на себя» - вниз экрана. Отличная возможность метафоры для понятия перспективы.
Когда мы подводим иконку к цели, мы нажимаем на кнопку мыши. Это высший уровень абстракции. Мышь, монитор и процессор работают в унисон и создают серию эффектов того, что мы соединены с этими тремя устройствами. Но соединение это очень и очень абстрактное и должно быть изучено.
В поведении мыши заложены различные уровни абстракции. Мои фавориты для сравнения этого - Google Maps и MapQuest. В Google Maps, нажав на кнопку мыши и двигая рукой, я могу перемещать центр области карты. Там очень быстрое время реакции, но тип движения – перемещение руки так, как если бы я двигал лист бумаги в луче света – менее абстрактен, чем в MapQuest, где я просто кликаю на рамку или на карту (устанавливая соответствующий режим). Можно сказать что клик – это быстрее (меньший набор навыков), но это более абстрактно, наверное, менее увлекательно и, определенно, менее точно. Все это делает работу с Google Maps (и его подражателемя) более приятной и эффективной интерактивностью.
Системы становятся все более комплексными и все более интегрированными в нашу жизнь. Многие системы стали полностью абстрактными и это не всегда хорошо, когда комплексность увеличивает абстрактность информации. Каждый из нас рано или поздно сталкивался с экранами, чувствительными к нажатию. Это резкое уменьшение уровня абстракции при взаимодействии с компьютерными устройствами.
Некоторые новые и популярные технологии создают трудности для новой волны дизайнеров интерактивности… Расширяющийся мир пространственных указателей, RFID и других подобных устройств дает скачок абстракции, так как просто отсутствует интерфейс прямого взаимодействия с такими устройствами. Для них просто невозможно найти простые эффективные метафоры, чтобы дать пользователям понимание о работе таких устройств, подобно тем метафорам, что мы подобрали для мыши.
Отрицательное пространство
Все «правильные» дизайнерские дисциплины имеют понятие о форме отрицательного пространства. В архитектуре и промышленном дизайне это полости или пространство между массивами. В графическом дизайне это «белое пространство» без цвета, линий или форм – как белые места на напечатанном листе бумаги. Дизайн звука использует тишину, дизайн света - темноту.
Так что такое отрицание интерактивности?
Есть много мест, где «что-то» может отсутствовать, или, говоря точнее, есть много слоев. Мы можем только говорить о действиях продукта? О наших действиях? О пространстве между частями действий?
Пауза – Очень ясное понятие о времени, когда не совершается никаких действий, связанных с интерактивностью. Часто интерактивный дизайн пытается заполнить такие провалы, но может быть, эти провалы полезны.
Остановиться и подумать – Что делать, если от системы нет реакции? Подумать, как сделал один студент Шведского института интерактивности и придумал «шар мысли». Если вы мало думаете, шар укатывается все дальше.
Неактивность – Ничего не делать, продукт не реагирует на действие, может быть из-за его неправильности. Это не то, что пауза, так как в этом случае неактивность – это реакция на действие, а не остановка в действии.
Смешивание в интерактивности
В отличии от других, формообразующих дисциплин дизайна, интерактивный дизайн очень запутан, потому что требует других дисциплин, чтобы строить взаимодействия. По этой причине, интерактивный дизайн больше схож с хореографией 8 или съемкой фильма, чем с музыкой или пошивом костюмов. Основные элементы, перечисленные выше, подходят только для интерактивного дизайна или были переопределены исключительно для него.
Например, использование цвета, как эстетического инструмента, улучшает или ухудшает уровень интерактивности. В общем, для большинства случаев, требуется информационная архитектура для подготовки информации, прежде чем будет создана интерактивность.
В конце концов, интерактивный дизайн – это хореография или оркестровая аранжировка других, формообразующих видов дизайна для создания взаимосвязанного диалога между людьми и окружающими нас продуктами и системами.
4 As captured in this recent book: Hannah, Gail Greet, Elements of Design: Rowena Reed Kostellow and the Structure of Visual Relationships , New York: Princeton Architectural Press, 2002.
8 Heller, David (NKA Malouf, David), “Aesthetics and Interaction Design: Some Preliminary Thoughts.” (ACM membership required) , Interactions 12:5 (September-October 2005): 48-50.
От автора: прошедший год принес целую волну новых техник, стилей и трендов, большинство из которых возникли для удовлетворения потребностей растущего рынка мобильных устройств. Технический прогресс изменил ожидания пользователей по поводу эстетики и функциональности сайтов и приложений. В данной статье мы обсудим интерактивный дизайн сайта, а именно 5 лучших трендов 2015 года.
Давайте разберем несколько распространенных тактик, описанных в книге Лучшие практики интерактивного дизайна .
Фрейминг – То, как вы представляете определенную информацию. Вместо того чтобы показывать, что оплата картой будет стоить дороже, можно было бы включить ее в общую стоимость и представлять другие способы оплаты, как со скидкой.
Анкоринг – Суть заключается в отображении более дорогого товара выше, тем самым устанавливая его цену за эталон. В таком случае более дешевые товары будут выглядеть намного привлекательнее. Способ особенно эффективен в паре со скидками, когда пользователь четко видит, сколько он может сэкономить.
Боязнь потери – По результатам исследования выяснилось, что инстинкт покупателя избежать боли намного сильнее инстинкта удовольствия от покупки. Постановка вопроса «Если вы не зарегистрируетесь, то потеряете 10$» намного эффективнее, чем «Если вы зарегистрируетесь, вы сэкономите 10$».
Дефицит – Чем меньше товара, тем больший на него спрос. Внимательно посмотрев на сайты Groupon и Amazon, вы заметите, как они подчеркивают дефицит товара для управления конверсией.
Невидимый интерфейс
Хороший дизайн не привлекает к себе внимание. Такой дизайн работает на заднем плане, создавая ощущение у пользователей, что все, чего они достигли, все это благодаря только их усилиям. Ниже я представил несколько полезных способов по расширению возможностей пользователя во взаимодействии с сайтом:
Уменьшение и упрощение этапов – Чем меньше шагов пользователь делает для достижения цели, тем более успешен ваш интерфейс. Этапы могут быть небольшими, но даже если вы избавите пользователя от одного лишнего клика, то он оценит это. Просто взгляните, как Uber (ниже скриншот) превратил многоступенчатый процесс добавления данных кредитки в один простой шаг.
Понятная визуальная коммуникация – Придерживайтесь последовательной визуальной темы и универсальных и понятных значков, чтобы пользователь не запутался (т.е. иконка почты означает список сообщений или входящие).
Всепрощающий интерфейс – Предугадывайте распространенные ошибки пользователей и устанавливайте соответствующие меры безопасности. К данным мерам можно отнести отмену, автосохранение, многоформатный ввод данных, а также пояснительную обратную связь.
Следите за передвижением пользователя – Лучший способ выявить избыточность интерфейса и ненужные шаги это визуализировать передвижение пользователя по сайту. Jessica Downey на примере своей «карты щупалец » создает визуальную карту, помогающую правильно организовать этапы. Ryan Singer с сайта Basecamp придумал похожий, но более быстрый способ .
Значение пробелов
В книге «Лучшие практики пользовательских интерфейсов в веб-дизайне» сказано, что пустое место это не всегда скучно. Пробелы необходимо использовать как активную часть дизайна. С точки зрения интерактивного веб-дизайна пробелы это паузы между словами и предложениями. Распознавание и обработка элементов с экрана быстро теряет смысл без кратких передышек.
Ниже я составил парочку советов относительно пробелов, которые стоит запомнить:
Пробелы создают иерархию – Чем больше пустого пространства вокруг объекта, тем больше к нему приковывается внимание. Только этот трюк уже может помочь дизайнерам повлиять на визуальную иерархию того, на что хочется посмотреть первым.
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении
Минимализм добавляет искушенности – Минимизировав количество элементов и увеличив пустое пространство, вы придаете своему сайту атмосферу элегантности и роскоши. Данный подход часто можно встретить на веб-сайтах модных брендов.
Пространство оказывает влияние на четкость – Пробелы используются не только для фона: если отбросить все и посмотреть на дизайн с атомного уровня, то пробелы могут, как улучшить, так и снизить читаемость текста. В нашем случае под четкостью подразумевается легкость чтения сложных букв в слове. Следуйте этим советам по пробелам между строками/буквами, чтобы быть уверенными в читаемости текста.
Текст интерфейса тоже часть дизайна
Развивая аналогию пользовательского взаимодействия, как диалога, можно сказать, что интерфейс должен тщательно подбирать слова. Все на экране приложения или сайта считается интерфейсом, и текст не исключение. Если смысл написанных слов не совпадает с задачей сайта, не поможет даже самый лучший шрифт.
Вас не спасет то, что ваш основной текст может принимать различные формы и размеры. Обычно, весь текст можно разделить и изменить по категориям. Слова приветствия могут быть непринужденными или доброжелательными, но текст призыва к действию на той же странице должен быть более смелым и кратким. Вне зависимости от цели вашего текста, следующие советы могут помочь донести до пользователя правильный смысл:
Знайте свою аудиторию – Этот совет стар, как мир. Знайте своих пользователей и то, что они хотят от вас, чтобы вы им сказали. К примеру, на сайте для детей слова или фразы могут повторяться для привлечения внимания, в то время как на юридическом сайте такой подход не приветствуется.
Определите контекст применения вашего сайта – Вы пишите для веб-сайта или приложения? Домашняя или страница описания? Так же, как вы изменили основной текст под аудиторию, измените сайт под среду использования. Если ваше приложение спроектировано для использования в суетливых или отвлекающих ситуациях (Waze при вождении), сокращение текста ускорить обработку информации.
Показывайте свою индивидуальность – Ваш стиль письма вносит свой вклад в общее настроение и атмосферу сайта так же, как и сильный образ или плавная анимация. Необходимо понять, какие эмоции вызывают определенные цвета. Текст не должен конфликтовать с визуальным взаимодействием.
Отличный дизайн
Последний, но не менее важный, хороший интерактивный дизайн это всегда приятно. Эмоциональная связь с пользователями – самый надежный способ завоевать доверие. Когда дело доходит до дизайна сердце так же важно, как и разум.
На примере MailChimp окно подтверждения является важнейшей частью привлечения пользователей через email рассылку. Забавная картинка и смешной текст только усиливают наслаждение от использования сайта (не говоря уже о том, что данный подход снижает раздражение от массовой рассылки почты). Ниже я составил несколько быстрых советов:
Не жертвуйте юзабилити – Думайте об отличном дизайне как о вишенке на торте: вишенка разбавляет вкус торта, но сама по себе она ничего не дает. Никогда не жертвуйте дизайном ценой ясности.
Оторвитесь от привычного – Как сказал Ben Rowe, ваша первостепенная задача в создании «осмысленного восторга». Как ваш сайт или приложение могут ввести людей в состояние, где действия не ограничены ничем?
Исследования – Пользователя любят сюрпризы. Подходящие микровзаимодействия (типа затухающей анимации, если пользователь завершил задачу) могут сделать довольно общие задачи более эмоционально стоящими. На рисунке ниже показано, как даже простая анимация плавного появления меню добавляет увлекательности повторяющимся действиям.
Интерактивность помогает сделать пользовательские интерфейсы выразительными и простыми в использовании. Несмотря на большой потенциал, интерактивность, пожалуй, наименее понятно из всех дисциплин дизайна. Это может быть связано с тем, что интерактивность является одним из новых членов семейства пользовательских интерфейсов. Визуальный дизайн и дизайн взаимодействия восходят к ранним графическим интерфейсам, но интерактивный дизайн должен был дождаться более современного оборудования для плавного рендера анимации. Наслаивание интерактивности пользовательского интерфейса на традиционную анимацию вносит свою лепту недопонимания. Целую жизнь можно потратить на освоение 12 основных принципов Диснея , означает ли это, что интерактивность пользовательского интерфейса также сложно? Люди часто говорят мне, что проектировать интерактивность сложно или что выбор правильных значений неоднозначен. Я утверждаю, что в областях, наиболее важных для пользовательского интерфейса, интерактивный дизайн может и должен быть простым.
С чего начать?
Основная задача интерактивного дизайна - помочь пользователям ориентироваться в приложении, проиллюстрировав взаимосвязь между элементами пользовательского интерфейса. Интерактивный дизайн также имеет возможность добавлять персонажа в приложение с анимированными иконками, логотипами и иллюстрациями; однако удобство использования должно иметь приоритет над элементами выразительности. Прежде чем демонстрировать навыки анимации персонажа, давайте начнем с создания базовой интерактивности, сосредоточившись на переходах навигации.Паттерны перехода
При разработке навигационного перехода ключевыми являются простота и согласованность. Для этого мы выберем два типа движений:- Переходы на основе контейнера
- Переходы без контейнера.
Переходы на основе контейнера
Элементы, такие как текст, значки и изображения, группируются внутри контейнеров
Если композиция включает в себя контейнер, такой как кнопка, карточка или список, тогда проект перехода основан на анимации контейнера. Контейнеры обычно легко обнаруживаются на основе их видимых границ, но помните, что они также могут быть невидимыми до начала перехода, как элемент списка без разделителей. Этот шаблон разбивается на три этапа:
* Анимация замедлена, чтобы проиллюстрировать, появление и исчезания элементов
Применение этого паттерна ко всем переходам с контейнером устанавливает согласованный стиль. А также делает понятной связь между начальной и конечной композициями, так как они связаны анимированным контейнером. Для демонстрации гибкости этого паттерна, здесь показаны пять разных композиций:
* Анимация замедлена, чтобы проиллюстрировать, как начальная и конечная композиции связаны контейнером
Некоторые контейнеры просто появляются из за экрана с помощью стандартного смягчения. Направление его движения определяется местоположением компонента, с которым он связан. Например, нажатие значка навигационного меню в верхнем левом углу приведет к перемещению контейнера слева.
Если контейнер из за границ экрана, он плавно появляется и увеличивает масштаб. Вместо анимирования от 0%, он начинает анимацию с 95%, чтобы избежать чрезмерного внимания к переходу. Масштабная анимация использует смягчение замедления , то есть начинается с максимальной скорости и мягко замедляется. Чтобы исчезнуть, контейнер просто плавно затухает без масштабирования. Окончание анимации должно быть менее выраженным, чем начало, чтобы сосредоточить внимание пользователя на новом контенте.
* Анимация замедлена, чтобы проиллюстрировать, как контейнеры могут возникать благодаря постепенному изменению элемента (масштабирование, появление и исчезание)
Переходы без контейнера
Некоторые композиции не имеют контейнера, на котором основывается переход, например, нажимая значок в нижней навигации, который выводит пользователя в новое место назначения. В этих случаях используется двухэтапный шаблон:- Композиция начинается путем плавного затухания, заканчивается плавным появлением.
- По мере того как конечная композиция исчезает, она также едва заметно масштабируется используя уменьшение смягчения элементов. Опять же, масштабирование применяется только в момент появления композиции, чтобы подчеркнуть новый контент по сравнению со старым.
* Анимация замедлена, чтобы проиллюстрировать, как происходят переходы без контейнера использую масштабирование, появление и исчезание элементов
Если начало и конец композиции имеют четкую пространственную или поэтапную связь, то совместное движение может быть использовано для ее усиления. Например, при навигации по шаговому компоненту начало и конец композиция прокручивается по вертикали по мере их постепенного затухания или появления. Это усиливает их вертикальную компоновку. При нажатии следующей кнопки для ознакомления с дальнейшим материалом, композиция прокручивается по горизонтали. Перемещение слева направо усиливает понимание последующего события. Совместное движение использует элементы стандартного смягчения.
* Анимация замедлена, чтобы проиллюстрировать, как происходят движение по вертикали и горизонтали
Лучшие практики
Чем проще тем лучше
Учитывая их высокую частоту и тесные связи с юзабилити, навигационные переходы должны в целом поддерживать функциональность по стилю. Это не значит, что они никогда не должны быть стилизованными, просто убедитесь, что выбор стиля оправдан брендом. Движение глаз обычно лучше всего задерживается на элементах, таких как маленькие иконки, логотипы, загрузчики или свободное состояние. Простой пример ниже может не привлечь столько внимания на Dribbble, но это сделает более удобным приложение.
* Анимация замедлена, чтобы проиллюстрировать, различные стили движения
Выберите правильную продолжительность и смягчение
Навигационные переходы должны использовать длительности, которые определяют приоритетность функциональности, будучи быстрыми, но не настолько быстрыми, чтобы они не стали дезориентирующим фактором. Длительность выбирается в зависимости от того, какой процент экрана занимает анимация. Поскольку навигационные переходы обычно занимают большую часть экрана, длительность 300 мс является проверенным методом. Напротив, небольшие компоненты, такие как переключатели, используют короткую продолжительность 100 мс. Если переход слишком быстрый или медленный, отрегулируйте его продолжительность с шагом 25 мс, пока он не достигнет правильного баланса.Смягчение описывает скорость, с которой анимация ускоряется и замедляется. Большинство навигационных переходов используют стандартное смягчения элементов, которое является асимметричным типом смягчения. Это означает, что элементы быстро ускоряются, а затем осторожно замедляются, чтобы сосредоточить внимание на конце перехода. Этот тип смягчения придает анимации естественное качество, поскольку объекты в реальном мире не могут вдруг начать и прекратить движение. Если переход кажется жестким или роботизированным, вероятнее всего, симметричное или линейное смягчение было выбрано ошибочно.
* Анимация замедлена, чтобы проиллюстрировать, различные типы смягчения
Паттерны и лучшие практики, изложенные в этой статье, предназначены для создания практичного и ненавязчивого стиля движения. Это подходит для большинства приложений, однако некоторые бренды могут требовать более интенсивных выражений стиля. Чтобы узнать больше о стилизации движения, ознакомьтесь с нашими инструкциями по настройке .
После того как навигационные переходы реализованы, начинается задача добавления персонажа в ваше приложение. Именно здесь простые паттерны не действуют, и тут в полной мере можно реализовать свои анимационные умения…
Персональная анимация может добавить непринужденности к серьезной ошибке
Если вам интересно узнать больше о возможности движения, обязательно прочтите наши
Была привнесена целая волна новых методов, стилей и направлений. Большинство из них появились, чтобы удовлетворить потребности растущего рынка мобильных устройств. Технологические достижения изменили пользовательские ожидания от эстетики и функциональности сайтов и веб-приложений.
Из всего, что происходило в мире интерактивного дизайна в 2015 году, мы выделили 5 наиболее существенных тенденций, которые, скорее всего, будут перенесены на текущий год.
Убедительный дизайн
Сердцем интерактивного дизайна всегда было «очеловечивание» взаимодействия с компьютером, разговор между пользователем и сайтом. Не смотря на то, что почти каждый сайт имеет свои собственные бизнес цели, почти половина такого взаимодействия применяет классические методы продаж. Давайте взглянем на некоторые из наиболее распространенных тактик, применяющихся в интерактивном дизайне:
— Кадрирование.
То, как вы представляете определенную информацию, называется кадрированием. Вместо предложения надбавки для кредитных карт, как дополнительной платы, можно сформулировать ее как нормальную цену и сказать, что оплачивая товар альтернативным методом, клиент зарабатывает скидку.
— Закрепление.
Представьте более дорогой пункт первым, предложив эту цену в качестве стандарта. Тогда каждая меньшая цена покажется клиенту торговой сделкой. Это особенно эффективно работает на ценах со скидками, где пользователи могут точно видеть, сколько экономят.
— Неприятие потери.
Исследования показывают, что клиенты больше реагируют на избегание убытка, чем на приобретение дополнительных бонусов. Окно с месседжем — «если вы не зарегистрируетесь, то потеряете $10» приносит больше результатов чем — «если вы зарегистрируетесь, то сэкономите $10».
— Дефицит.
Чем меньше предлагаемое количество, тем выше спрос. Вы видите, как такие сайты как Groupon и Amazon по-прежнему управляют потреблением, выделяя дефицит товара.
Незаметный интерфейс
Хорошие проекты не перетягивают на себя одеяло. Они работают в фоновом режиме, так чтобы пользователи чувствовали, что любой успех обусловлен чисто их собственными силами. Вот некоторые полезные способы для расширения возможностей пользователя при взаимодействии с сайтом:
— Меньше и проще.
Чем меньше шагов нужно сделать вашему пользователю для достижения цели, тем более успешен ваш интерфейс. Шаги могут быть незначительными, но даже если вы уберете хотя бы одни клик, пользователь оценит это. Посмотрите на то, как Uber превращает многоэтапный процесс ввода информации о кредитной карте в один простой шаг.
— Ясная визуальная коммуникация.
Чтобы избежать путаницы, поддерживайте постоянную визуальную тему и используйте понятные обозначения. Например, значок почты означает сообщение или почтовый ящик.
— Снисходительный интерфейс.
Умение предвидеть распространенные ошибки пользователей и обеспечить соответствующие гарантии во взаимодействии с сайтом – очень полезное качество дизайна. Мы подразумеваем варианты отмены действий, автосохранение, входы в разных форматах и поучительную обратную связь.
— Карта пользовательского пути.
Лучший способ выявить избыточность дизайна и ненужные шаги – составить визуально путь пользователя к услуге.
Значимость белого пространства
Пустое пространство не всегда скучно. Белое, или негативное, пространство, должно быть реализовано в дизайне так же, как и визуально активные элементы. С точки зрения интерактивного дизайна – белое пространство как паузы между словами. Без коротких передышек от просмотра информации, все элементы на экране быстро теряют свой смысл. Вот некоторые основные рекомендации о белом пространстве, которые стоит помнить:
— Негативное пространство создает иерархию.
Чем больше пробелов вы размещаете вокруг объекта, тем больше внимания он получает. Один только этот простой трюк может помочь дизайнерам влиять на визуальную иерархию, заставляя пользователя увидеть именно нужный элемент в первую очередь.
— Минимализм добавляет изысканности.
Минимизация количества элементов и максимизации количества отрицательного пространства придает вашему сайту атмосферу элегантности и роскоши. Эта тактика наиболее часто применяется в веб-сайтах модных брендов.
— Пространство влияет на читабельность.
Белое пространство используется не только для фонового шума. Опускаясь вплоть до атомного уровня, расстояние может улучшить или ухудшить читаемость. В этом случае, четкость — это правильное использование символов в слове. Интервал между строками и буквами может обеспечить приемлемую читаемость.
Текст интерфейса как дизайн
Рассматривая интерфейс как аналогию взаимодействия с пользователем в разговоре, дизайнер должен тщательно выбирать слова. Все, что находится на экране приложения или сайта, считается интерфейсом. И текст – не исключение. Если смысл, стоящий за словами, не соответствует вашему сайту или приложению, даже отличная типографика не имеет значения.
Как правило, вы можете изменять варианты своего дизайна для разных категорий. Приветствие может иметь случайный и доброжелательный тон, в то время как текст с призывом к действию на той же странице должен быть более смелым, точным и кратким. Независимо от цели текста, следующие принципы помогут вам донести до пользователя правильную мысль:
— Знайте свою аудиторию.
Это совет стар, как мир. Знайте своих пользователей и то, что они хотят. Например, сайт для детей может повторять фразы и слова для корректировки концентрации внимания, в то время как сайт для юридической фирмы должен делать прямо противоположное.
— Учитывайте контекст.
Представьте: вы пишете текст для веб-сайта или приложения; для домашней страницы или о домашней странице. Наверняка, вы будете изменять текст, чтобы удовлетворить ожидания аудитории. Сделайте то же самое в целом для веб-среды. Если ваше приложение предназначено для использования в суете или отвлекающих ситуациях (например, при движении), текст, выполненный коротким и толстым шрифтом, поможет быстрее воспринимать информацию.
— Отображайте вашу индивидуальность.
Стиль написания будет способствовать общему настроению и атмосфере сайта так же, как сильный образ или анимация. Согласование по цвету позволит тексту не конфликтовать с визуальным взаимодействием.
Очаровательный дизайн
И последнее, но не менее важное замечание. Хороший интерактивный дизайн – всегда приятный. Формирование эмоциональной связи с вашими пользователями — надежный способ заработать их лояльность. Когда дело доходит до дизайна, прислушайтесь не только к уму, но и к сердцу.
На сайте MailChimp — окно подтверждения является неотъемлемой частью электронного маркетинга. Добавление прикольной графики и юмористического текста добавляет немного удовольствия без каких-либо затрат (не говоря уже о том, что это подрывает часть напряженности, присущей массовой рассылке через электронную почту). Вот несколько простых советов, которые помогут сделать дизайн приятным:
— Не жертвуйте удобством.
Подумайте о дизайне как о глазури на торте: глазурь добавляет торту привлекательности, но глазурь в одиночку — уже не торт. Никогда не увлекайтесь искусностью в ущерб ясности.
— Выйдите за пределы.
Ваша конечная цель заключается в создании «значимого восторга». За восхитительной эстетикой дизайна стоит цель заманить людей на сайт и дать им почувствовать неограниченные возможности.
— Способность делать открытия
Люди любят сюрпризы. Соответствующее микровзаимодействие (например, анимационные элементы, которые помогают пользователю выполнять задание) очень помогает вашему сайту. Иногда даже простая исчезающая анимация в навигационном меню добавляет удовольствия в повторяющихся действиях.
Уровень современных цифровых технологий позволяет дизайнерам и веб-разработчикам смело экспериментировать при создании интерфейсов для различных устройств. Современные интерфейсы становятся все более интерактивными и это трудно не заметить. Сегодня многие дизайнеры начинают думать об опыте взаимодействия задолго до создания первых прототипов, так как цена возможной ошибки очень высока, а рисковать никто не хочет. Отсюда и столько разговоров о UX – прежний веб уходит в прошлое и в интернете начинают доминировать новые тренды. И одним из основных трендов является интерактивный дизайн. Но это глобальная тенденция, своеобразный тектонический сдвиг, который чувствуют все, но пока мало кто представляет, как будут выглядеть интерфейсы ближайшего будущего. Однако уже сейчас можно отметить 6 тенденций в интерактивном дизайне, которые мы, несомненно, увидим в 2016 году.
СИНЕМАГРАФИКА
Синемаграфика – это нечто среднее между фотографиями и видео. Зацикленные GIF-изображения объединяют статику и динамику и выглядят очень эффектно. Тренд появился в 2011 году и быстро набрал популярность. Использование синемаграфики в интерактивном дизайне позволит привлечь внимание пользователей к интересному графическому контенту, так что дизайнерам стоит задуматься о присутствии зацикленных гифок в их проектах.
ЛЕНДИНГИ С ДЛИННОЙ ПРОКРУТКОЙ
Сегодня множество сайтов может прекрасно обойтись без использования большого количества страниц, о чем свидетельствует появление огромного количества лендингов. Пользователям мобильных устройств гораздо проще просматривать контент на сайте-одностраничнике, так как для этого нужно всего лишь прокручивать страницу пальцем. Одностраничник с интерактивным дизайном при этом выглядит на экране смартфона гораздо выигрышнее, чем сайт со стандартной многостраничной схемой. Конечно, в таком дизайне придется использовать большие кликабельные области и кнопки, что значительно увеличит длину страницы, но при правильном подборе контента это не будет являться проблемой.
MATERIAL DESIGN
Материальный дизайн, созданный разработчиками Google, появился в результате усилий по унификации интерфейсов для Android-приложений. Стремясь сделать интерфейсы более интерактивными, дизайнеры отталкивались от идеи quantum paper – «квантовой бумаги». Расположенная в трехмерном пространстве плоская бумага подчиняется законам физики, а дизайне активно используется анимация. Элементы имеют тени, свечения, они могут двигаться, ускоряться или замедляться. Данный стиль позволяет привнести в дизайн дополнительную глубину и реализм, а анимация используется не только для «оживления» интерфейса – пользователь всегда остается в курсе того, что происходит. В материальном дизайне приложение реагирует на действия пользователя, что позволяет упростить визуальные связи при просмотре разных видов контента. Использование принципов Material Design дает возможность проектирования эффектных интерактивных сайтов и приложений.
АНИМИРОВАННАЯ ТИПОГРФИКА
Добавить сайту интерактива можно и с помощью типографики. Главное – не переусердствовать в этом. Лучше всего в дизайне смотрятся анимированные заголовки, при этом вовсе не обязательно, чтобы текст крутился, вертелся или вел себя не очень понятным для пользователя образом. Если заголовок будет реагировать на наведение курсора, к примеру, изменением цвета, это сделает взаимодействие с интерфейсом более интересным.
СЛОЖНАЯ ВИЗУАЛИЗАЦИЯ
То, что качественная красивая инфографика гораздо интереснее скучных схем и диаграмм, понимают все. Но стоит обратить внимание на такой набирающий силу тренд как использование интерактивной инфографики со сложной визуализацией. Такая инфографика может выглядеть как серия слайдов или представлять собой один слайд. Во втором случае пользователь получает нужные сведения, выделяя наиболее интересные ему элементы. Очевидно, что данная тенденция будет актуальна в ближайшие годы – такой контент очень информативен и позволяет пользователю легче усваивать информацию.
ORGANIC LAYOUTS
Название этого тренда можно перевести как «органичные макеты». Так как в интерактивном дизайне вовсе необязательно придерживаться стандартных сеток, то это дает дизайнерам возможность подать контент максимально естественно. Свободное расположение различных элементов, таких как текст, иллюстрации или мультимедиа позволяет разнообразить дизайн и представить информацию в наиболее удобной для пользователя форме.