Ланч-тайм 101: краткий перевод свежих статей о digital

Содержание

• Принципы UX-хореографии
• 10 инструментов для разработчиков
• 9 удивительных историй популярных брендов

#489. Принципы UX-хореографии

The Principles of UX Choreography

Точки пересечения Дисней и UX. Как уроки рисования Микки Мауса изменят ваш подход к дизайну.

Дисней и UX

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

Масштабный спортивный фестиваль для IT-специалистов RUNIT в этом году пройдет 18 июня в Измайловском парке

И если вы читаете этот текст — вы приглашены.

Участвовать можно в личном или командном зачете на дистанции от 3-х до 25 км или собрать команду и пробежать эстафету. С организаторов футболка и крутая медаль для каждого участника, вода, еда, отличная трасса и множество развлечений.

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

Приглашаем вас стать частью события! →

Реклама

Пять принципов UX-хореографии

Основная работа UX дизайнеров состоит в том, чтобы делать вещи не просто функциональными, а приятными. И создавать дизайн, в котором пользователь чувствует последовательность.

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

Обратная связь

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

Что об этом говорят в Диснее? Принцип преувеличения — его не просто чувствуют, его замечают. Часто для этого нам показывают утрированные эмоции героев.

#959595;">Эмоции Чудовища, когда он узнает, что Бель не идет на ужин

Все настолько быстро, что вы даже не замечаете, как это происходит, но в конечном счете это очевидно.

#959595;">Примеры обратной связи в приложениях. Сброс пароля на iOS при ошибке. Взаимодействие слоев в Dots

#959595;">Оформление Yahoo News. Реакция на выбор жанра в Beats (больше замечательных примеров на capptivate.co)

Опережение

Дайте пользователям намек — подтолкните их на правильную последовательность действий, чтобы они не запутались. Подготовьте их к тому, что должно произойти. Намекните: «Смотри сюда!» или «А здесь можно потянуть». Эти небольшие детали люди могут даже не заметить, что, однако, не отменяет их пользы.

У Диснея есть похожий принцип: подготовка аудитории к тому, что должно произойти.

#959595;">Открытая рука Микки указывает на последующее действие — он собирается схватить шар

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

#959595;">В Clear есть тонкий намек на новый пункт списка. Moldiv дает пользователю подглядеть за тем, что за экраном

#959595;">Yummly: Белый фон становится полем для ввода текста. Привидение в Snapchat подает сигнал, что что-произойдет.

Пространственная логика

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

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

И это тоже один из принципов Диснея — сценичность.

#959595;">Откройте набор инструментов в VSCO или категории в Nike Making

#959595;">Полистайте Calendar или Stellar

Пользовательский фокус

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

Это неофициальный, но важный принцип Диснея.

Микки вытаскивает огромный молоток. Он неестественно большой, потому что в этой сцене публика должна увидеть именно его.

#959595;">Кнопки в Pinterest появляются, когда они нужны. Всплывающие уведомления по клику на земной шар в Paper Notifications

#959595;">Выделение цветом объектов при выборе в Peek. Привлекающая внимание анимация в приложении для погоды Yahoo

Тон бренда

Мы думаем: «Если бы бренд говорил, что бы он сказал?» А еще надо думать: «Если бы бренд двигался, как бы он это делал?» Пользователи должны знать голос бренда и то, как он движется.

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

#959595;">Забавные привидения в Snapchat. Культовые точки в Flickr при обновлении

#959595;">Беговые дорожки стадиона в Nike + Zappos, которые отличились супер-котом

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

Вывод: Гениальные идеи везде работают — и в мультиках, и на сайтах. Поэтому видео в конце оставлено с образовательной целью.
Вы сэкономили: 15 минут.

#490. 10 инструментов для разработчиков

10 Helpful User Experience Tools for Every Designer

1. Sketch

С помощью Sketch можно проектировать интерфейсы, сайты и иконки. В нём много функций, как в Photoshop и Illustrator, но Sketch более гибкий. Векторные формы легко приспосабливаются к изменению стилей и размеров.

Стоимость: 99$

2. Mockplus

Простой в использовании инструмент для создания прототипов сайтов и мобильных приложений. При этом не нужно работать с кодом. Одна из особенностей Mockplus — возможность создавать интерактивный дизайн, который работает по принципу WYSIWYG.

Стоимость: Базовая версия — бесплатно, Pro — 20$/месяц

3. XMind

XMind — популярный инструмент для майндмэппинга. Поможет выяснять взгляды, управлять информацией, проводить брейнштормы и организовать работу. Визуализация помогает обрисовать цели, прогресс, требования и проблемы.

Стоимость: Базовая бесплатно, Plus — 79$, Pro — 99$

4. UsabilityTools

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

Стоимость: Демо — 14 дней, Pro — от 19$/месяц

5. Marvel

Веб-приложение для простого дизайна и разработки прототипов. Пара кликов — и вы сможете соединять экраны с Dropbox и Гугл Диск и создавать интерактивные прототипы для сайтов и мобилок.

Стоимость: Базовая бесплатно, Pro — от 15$/месяц

6. Slack

С лозунгом «команда 21-го века» появился Slack, который значительно экономит время на переписку с коллегами.

Стоимость: Базовая бесплатно, Стандарт — 6,67$/месяц

7. UserTesting

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

Стоимость: Основной — 99$ за видео (49$ за первых 10 видео)

8. Optimizely

Optimizely, как и UserTesting, облегчает проверку и персонализацию сайтов и мобильных приложений. Однако Optimizely сосредотачивается на A/B тестировании.

9. Stylify Me

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

10. Color Safe

Сервис помогает выбрать цветовые комбинации, при которых контент воспринимается легко на любом экране.

Вывод: Ну давай, перейди с Фотошопа на Скетч. Ты давно хотел — так вот тебе знак. Do it!
Вы сэкономили: 10 минут.

#491. 9 удивительных историй популярных брендов

Lamborghini, FedEx & Domino’s: 9 Surprising Stories Behind Famous Brands

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

1. Жук за миллион для Domino

В 1961 братья Том и Джеймс Монаган купили пиццерию за 500 долларов. Спустя год Джеймс решил продать свою долю за жука Volkswagen, который они использовали для доставки. Позже Domino стала второй по величине сетью пиццерий в США. В 1998 Том продал 93% акций компании за 1 миллиард долларов.

2. Формула Coca-Cola навеяна Францией

Фармацевт Джон Пембертон был ранен на войне и стал зависимым от морфия. Это побудило его создать свою версию вина Мариани, в котором он соединил кокаин и вино.

В 1886 году из-за сухого закона Пембертон заменил вино сахарным сиропом и переименовал напиток в Coca-Cola, назвав его «трезвым». Кокаин в напитке содержался вплоть до 1903 года.

3. История фермы Lamborghini

Ферруччо Ламборгини основал завод по производству тракторов после Второй мировой войны. Но испытывал страсть к спортивным автомобилям. Ламборгини владел Ferrari 250 GT, у которого были проблемы со сцеплением. Он лично встретился с Энцо Феррари, который сказал ему, что проблема не с автомобилем, а с водителем, и посоветовал ему вернуться к тракторам. Это побудило Ламборгини построить свой завод по производству автомобилей. Меньше чем за шесть месяцев он создал модель 350 GTV.

4. Плавающее мыло

Сотрудник Procter&Gamble, уходя на обед, забыл выключить миксер, и масса для мыла вспенилась. Но партию все равно выпустили. Позже компания начала получать заказы на «плавающее мыло». Оказалось, из-за этой ошибки мыло плавало и содержало меньше реактивов. Благодаря этому компания прославилась.

5. Блэкджек и FedEx

Фред Смит, основатель FedEx, был в отчаянии, когда его компании выставили счет за топливо в размере 24 000 $, а у него было только 5 000 $. Ему не на что было запускать самолеты в следующий понедельник.

Смит полетел в Лас-Вегас и поставил все свои средства на кон в блэкджеке. Это того стоило. Он вернулся домой с 27 000 $. Они спасли компанию — в 2013 численность штата FedEx превышала 146 000 человек, а доходы составляли 26,5 миллиардов долларов.

6. Инвестиции KFC в Wendy’s

Дэйв Томас работал в ресторанном бизнесе с 12 лет. В 1953 его наставник купил франшизу KFC, и несколько лет спустя Томасу поручили управление четырьмя загибающимися ресторанами KFC в Огайо. Он привел их к успеху и продал за 1,5 миллиона долларов. Эти деньги помогли Томасу открыть собственный ресторан быстрого питания Wendy’s.

7. Лицо манной каши

Основатель Cream of Wheat обедал в ресторане Кохлсаата в Чикаго, и был настолько поражен дружелюбной улыбкой одного из официантов, что сделал его лицом бренда. Сходство с тем официантом сохраняется даже в современной версии логотипа.

8. HP. Орел или решка?

Когда основателям компании, Биллу Хьюлетту и Дэйву Пакарду, надо было выбрать название, они бросили монетку. Так определили, чье имя будет первым. Паккард победил, но компанию все равно назвали Hewlett-Packard, а не Packard-Hewlett.

9. С чего начинал Samsung

В 1938 Бьонг Чхуль Ли основал Samsung. Сначала это был продуктовый магазин, затем сахарный завод, на котором позже стали производить шерсть. Samsung даже занимались страхованием и телерадиовещанием. Когда компания перешла к сыну Ли, он решил стать № 1 только в одной сфере, и сжег лишний инвентарь на 50 миллионов долларов. Это, как ни странно, окупилось — Samsung в 2015 продал телефонов на 81,3 миллиона (а Apple — на 74,8 ).

Вывод: В бизнесе всегда что-то происходит в том месте и в то время, и в итоге решает случай, а не холодный расчёт. Если только вы не из HP — там решает только Хьюлетт.
Вы сэкономили: 10 минут.

Незаметно закончился 101-ый, далматиновый ланч. Всем гав и любите пёсиков.

#464646;">Читать по теме: Ланч-тайм: краткий перевод свежих статей о Digital (все выпуски)