Как усовершенствовать тестирование юзабилити сайта

Give participants the confidence to behave naturally.

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

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

Читать далее

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

Amazon and Macy’s home pages

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

Последние исследования показывают, что вероятность совершения покупки в Интернет-магазине увеличивается на 67%, если сайт адаптирован под мобильные телефоны и смартфоны. Об этом действительно стоит задуматься.

Читать далее

Адаптивная система в UX дизайне

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

Читать далее

Когда не стоит использовать закон Фиттса

Relative and absolute size communicate priority within an interface.

Закон Фиттса гласит: “время, которое затрачивают на то, чтобы дотянуться до чего-нибудь и нажать на него, прямо пропорционально тому, насколько далеко это расположено и какого оно размера”. Другими словами, чем ближе и больше цель (ссылка), тем чаще по ней будут кликать. Это очень легко понять, не слишком сложно реализовать и, казалось бы, бессмысленно оспаривать. Однако, прежде чем начать применять закон Фиттса на каждом свободном пикселе, давайте рассмотрим несколько проблем, которые могут возникнуть у вас, как у дизайнера сайтов при подобном подходе. Читать далее

Личностно-ориентированный подход к веб-дизайну

Balsamiq

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

«Именно личностно-ориентированный подход позволит вашему бренду обойти конкурентов и заручиться доверием пользователей».

Читать далее

Адаптивный дизайн Vs.Отзывчивый дизайн

Responsive Layout

Примечание редактора: Добро пожаловать в Smashing Magazine UX Design Q& А. Вот как мы работаем: вы присылаете нам свои вопросы о веб-дизайне и UX дизайне, а мы выбираем лучшие из них и раз в месяц публикуем ответы. На ваши вопросы отвечает Кристиан Хольст, наш постоянный автор и основатель  Baymard Institute. Ранее (до 2009 года) Кристиан принимал участие в разработке слуховых аппаратов и сервиса пользования кредитными картами, а также проводил частные консультации.

Адаптивный дизайн Vs.Отзывчивый дизайн

Вопрос:

“В каких видах сайтов/проектов лучше использовать адаптивные макеты (с фиксированными точками разрыва)? В каких видах сайтов лучше использовать отзывчивые макеты (с гибкими рамками) ”?

Читать далее

Внедрение широкоформатного UX в скоростную разработку.

Spike Outline Diagram.

Быстрое развитие технологий UX дизайна может привести к тому, что разработчики начнут принимать недальновидные решения.Если дизайнеры будут сосредоточены на удовлетворении текущих потребностей пользователей, то, скорее всего, глобальным вопросам веб-проектирования будет уделяться недостаточное количество внимания. Нетрудно догадаться, что из-за подобного небрежного отношения к важным вопросам, в будущем, могут возникнуть очень серьезные проблемы.

Читать далее

Новый материал для мобильного UX дизайна

Wonder Woman

Я рос в очень религиозной семье.

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

Суббота, наоборот, была свободным от ритуалов днём, когда я мог сполна вкусить прелести “храма” мультфильмов. Каждую субботу, в любую погоду, здоровым или больным, я вскакивал с постели, бежал вниз в гостиную, усаживался перед телевизором и смотрел “Чудо-Женщину”, “Скуби Ду”, “Капитан Кэйвман” и “Смурфики” часами напролёт. И, хотя мои родители были далеко не в восторге от религии, которую я выбрал для себя, они терпели это как компенсацию воскресным посещениям проповедей.

Сейчас я могу с уверенностью сказать, что эти субботние часы фанатичного просмотра “Евангелия от мультфильмов” в конечном итоге сделали из меня настоящего профессионала. Я полагаю, что многие из тех, кто читает эту статью, являются приверженцами той же религии, что и я, и могут объяснить разницу между напечатанной картинкой из мультфильма и анимированными кадрами, которые можно видеть по телевизору. Наверняка среди вас много таких как я, которые каждую субботу завтракали и одновременно принимали причастие перед телевизором. Мы — это те, кто понимает, что достаточно добавить движения плоской картинке, и она оживёт. Движение вдыхает жизнь во всё!

Wonder Woman

Scooby Doo

Анимированные мультфильмы, такие как “Чудо-Женщина”, “Скуби Ду” и “Капитан Кэйвман” показали мне, как движение может вдохнуть жизнь в простой рисунок.

Добавить движения к чему-либо, будь то серия рисунков или компьютерные персонажи, совсем не так просто, как “добавить воды”. Это искусство, которое требует терпения, мастерства и тщательного изучения того, как объекты и люди перемещаются в пространстве с течением времени.

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

Люди, которые понимают это лучше, чем кто-либо, составляют легионы блестящих аниматоров, которые работали на Walt Disney. К счастью для нас, двое из них, Олли Джонстон и Фрэнк Томас, решили взяться за перо и поделиться с миром основными принципами анимации, используемой всеми аниматорами Диснея. Они выпустили книгу Иллюзия жизни: Disney Animation.

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

В своей статье я хотел бы рассказать вам о 12 основных принципах анимации, описанных Джонстоном и Томасом в книге Иллюзия жизни: Disney Animation (1981). И, хотя изначально принципы разрабатывались для анимационного кино и телевидения, все они применимы и в сфере мобильных интерфейсов. Если вы обладаете достаточным опытом, художественным вкусом и мастерством, то сможете наделить свою разработку той самой магией, которую вы так ждали по субботам, будучи ребёнком.

The Illusion Of Life Disney Animation

Иллюзия жизни: Disney Animation, Фрэнк Томас и Олли Джонстон описывают 12 основных принципов aнимации.

Итак, 12 основных принципов анимации:

  1. Принцип сжатия и растяжения.
  2. Предвосхищение действия (антиципация).
  3. Принцип постановки.
  4. Прорисовка каждого движения (компоновка).
  5. Принцип последовательности действий (доводка).
  6. Принцип смягчения начала и завершения действия.
  7. Дуги (использование криволинейных траекторий естественного движения).
  8. Дополнительное действие.
  9. Принцип расчёта времени
  10. Принцип преувеличения.
  11. Принцип профессионализма.
  12. Принцип внешней привлекательности.
12 принципов анимации

Принцип 1: Сжатие и растяжение

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

Squash And Stretch

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

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

Flipboard

Apple's iBook

На первом экране вы видите приложение Flipboard. Поверхность страниц кажется жёсткой и картонной. Обратите внимание на отличие от страниц в IBOOK Apple. Тут можно видеть пример применения принципа сжатия и растяжения. Страницы приобретают гибкость, и у пользователя появляется ощущения, что он листает настоящую книгу.

Принцип 2: Предвосхищение действия (антиципация).

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

  • Подготовка к действию.
  • Непосредственно действие.
  • Результаты действия.

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

Bowler

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

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

Aperture Animation

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

Palm Pre

Иконки пользовательского интерфейса Palm Pre помогают пользователям освоиться с сенсорным управлением.

Window Shade Animation

Анимированная подложка на главном экране Windows Phone 7 использует описанный принцип, предоставляя пользователям возможность выбрать нужное действие.

Принцип 3: Правильная постановка.

Люди, которые заинтересованы в продаже недвижимости часто “обставляют” дом так, чтобы каждая комната смотрелась наиболее выигрышно. Это можно сравнить с принципом правильной постановки в анимации. Правильная постановка объектов позволяет зрителю полностью понять центральную идею анимации. В мире мобильных устройств, принцип постановки является наиболее актуальным, когда дело касается перехода между приложениями и управления ими. Очень важно найти удачное сочетание цвета, композиции, освещения и направления движений анимированных объектов. Хорошая постановка объектов создаёт ощущение лёгкости и реалистичности, в то время как плохая производит впечатление несогласованности движений.

Staging

Хорошая постановка объектов (справа) помогает понять основную идею иллюстрации. Плохая же (слева) не создаёт ощущения ясности.

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

Mobile UX Staging

Пример хорошей постановки объектов — IPad версия Keynote. Она позволяет пользователям видеть, где именно располагается файл, с которым они работают в настоящее время. Вся файловая структура приложения видна в буквальном смысле “как на ладони”. Безусловно, с таким приложением пользователю будет гораздо комфортнее работать.

Принцип 4: Прорисовка каждого движения (компоновка)

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

Straight Ahead

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

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

Plants Vs. Zombies

Для большинства популярных игр, таких как Растения против Зомби для Ipad вполне достаточно прорисовки ключевых кадров.

Fruit Ninja

Игры с более сложным движением, как например игра Фрукты Ниндзя для IPad, используется более подробная покадровая прорисовка, чтобы движения получились более динамичными.

Принцип 5: соблюдение последовательности действий (доводка).

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

Follow-through

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

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

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

Windows Mobile

Windows используют принцип последовательности действий. Прямоугольники движутся не автономно друг от друга, каждое движение одного объекта влияет на положение другого.

Принцип 6: смягчение начала и завершения движения

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

Inertia

Добавление кадров в самом начале и в конце движения создает иллюзию присутствия инерции.

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

Scrolling List

Scrolling List

Принцип замедления движения применяется для прокрутки списков во многих мобильных интерфейсах. Можно заметить, что в начале и конце движения использовано больше кадров, нежели в середине. Этот эффект создаёт впечатление, что движение регулируется законами инерции.iPhone Home Screen

iPhone Home Screen

Прокрутка на дисплее iPhone: и опять, увеличение количества кадров в начале и в конце создают эффект наличия инерции.

Принцип 7: Дуги

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

Sparkler

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

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

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

Fish And Water

Пример движения одущевлённых (органических) объектов: рыбки и вода в приложении для iPhone движутся по арочной траектории.

Interface Elements

Элементы интерфейса на платформе Android двигаются по прямой линии, оставляя ощущение чего-то механического.

Принцип 8: дополнительное действие

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

Secondary Action

Первичное действие этой анимации — движения тела белки и её ног. Движения хвоста белки являются вторичным действием. Вместе они делают анимацию более реалистичной.

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

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

Mobile UX Secondary ActionПример вторичного действия: анимированные переходы между окнами браузера.

Принцип 9: расчёт времени

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

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

Timing

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

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

iPad Photo App

iPad Photo App

Скорость перемещения элементов в программе для обработки фотографий для Ipad сродни быстрой перетасовке колоды карт. Она выражает легкость и помогает достигнуть реалистичности.

Принцип 10: преувеличение

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

Ren And Stimpy

Канадский аниматор Джон Крикфалуси мастерски использовал приём преувеличения. На изображении вы видите героев мультсериала, Рена и Стимпи. 

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

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

Trampoline

iPad Transition

iPad Transition

iPad Transition

Преувеличение на примере приложений для IPad.

Принципы 11 и 12: принцип профессионализма и внешней привлекательности

Из 12 принципов анимации, изложенных Джонстоном и Томас, последние два — профессионализм и внешняя привлекательность — являются наиболее характерными для анимационных персонажей. Таким образом, они вызывают немного меньше интереса с точки зрения UX дизайна для мобильных устройств. Профессиональный рисунок должен обязательно отвечать всем правилам трехмерного пространства, учитывать пропорции объектов и персонажей по объему и весу. Профессионализм требует от аниматоров знания основ анатомии, умения составлять композицию, баланс света и тени.

Solid Drawing

Профессианальный рисунок всегда анатомически точен и учитывает баланс света и тени.

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

Способы передачи движения в дизайне

В то время как 12 принципов, разработанных Джонстоном и Томас являются полезными для первого знакомства с основами передачи движения, основной вопрос состоит в том, как интегрировать движение непосредственно в дизайн интерфейсов. Рассмотрим три ключевых этапа процесса проектирования.

  • Эскиз.
  • Кадрирование и создание каркаса.
  • Тестовый вариант (прототип).

Эскиз

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

Sketching

Пример работы над эскизом для приложения ITunes.

Создание каркаса, кадрирование

Создание каркаса является следующим в процессе проектирования двигающихся элементов. Все движения должны вписываться в рамки самого экрана и открытых окон.

Wireframe

Пример создания каркаса документа.

Тестовый вариант дизайна

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

Keynotopia

Создание прототипа программного продукта позволяет оценить все плюсы и минусы, поэкспериментировать с движущимися элементами.

Советы по применению принципов анимации в сфере UX дизайна

  1. Не переусердствуйте. Мало что раздражает больше, чем чрезмерное количество анимации. Анимированные элементы — это весело и интересно, но не стоит слишком увлекаться. Положитесь на своё чувство вкуса.
  2. Все принципы дополняют друг друга. Будь то сцена в мультфильме или переходы между закладками на экране мобильного устройства, принципы анимации редко существуют изолированно друг от друга. Эффективнее всего применять их в совокупности. Чем больше будет ваш опыт в создании анимации — тем более искусно вы научитесь сочетать эти принципы.
  3. Анимация всегда рассказывает какую-либо историю. Это справедливо как для мультфильмов, так и для UX дизайна. Анимация должна дополнять программный продукт, помогать пользователю, но не перетягивать внимание на себя.
Заключение

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

Подведем итог:

Хотя принципы анимации изначально были разработаны для анимационных фильмов и телевидения, они также справедливы и для UX дизайна. Перечислим 12 основных принципов, которые легли в основу книги “Иллюзия жизни”:

  1. Принцип сжатия и растяжения.
  2. Предвосхищение действия (антиципация).
  3. Принцип постановки.
  4. Прорисовка каждого движения (компоновка).
  5. Принцип последовательности действий (доводка).
  6. Принцип смягчения начала и завершения действия.
  7. Дуги (использование криволинейных траекторий естественного движения).
  8. Дополнительное действие.
  9. Принцип расчёта времени
  10. Принцип преувеличения.
  11. Принцип профессионализма.
  12. Принцип внешней привлекательности.
  • Три ключевых момента в процессе разработки дизайна: эскиз, создание каркаса и работа с прототипом (тестовым вариантом) дизайна.

(AL)

Лучший маскированный пароль для форм подписки.

Примечание редактора: эта статья всего лишь отображает личное мнение автора и охватывает экспериментальные UX методы, которые не считаются наиболее оптимальными. Вы согласны или не согласны с описанными методами? Можете ли вы предложить более подходящие решения? Дайте нам знать об этом в комментариях к статье!

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

Читать далее

Lean Startup и UX дизайн

Validated Learning

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

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

Читать далее