ланч-тайм
Ланч-тайм 101: краткий перевод свежих статей
о digital
о digital
В номере: программы, которые должен попробовать каждый дизайнер, влияние мультфильмов на UX и поворотные моменты в истории известных брендов.
#489
Принципы UX-хореографии
The Principles of UX Choreography
![](https://s29805.cdn.ngenix.net/upload/_tilda/project960686_1710410209/tild3734-6433-4637-b035-383361366430__-__empty__1111.png)
Точки пересечения Дисней и UX. Как уроки рисования Микки Мауса изменят ваш подход к дизайну.
Дисней и UX
Основа анимации — в 12 принципах, которые сформировали в студии Дисней. Там знают — для того, чтобы завоевать сердца аудитории, нужна эмоциональная вовлечённость. Для этого в анимацию нужно добавить реалистичные движения и живые эмоции. Используйте их в дизайне сайтов и мобильных приложений.
Пять принципов UX-хореографии
Основная работа UX дизайнеров состоит в том, чтобы делать вещи не просто функциональными, а приятными. И создавать дизайн, в котором пользователь чувствует последовательность.
Запомните пять важных принципов, которые помогут создать положительный и приятный пользовательский опыт.
Обратная связь
Показать результат взаимодействия и построить доверительные отношения поможет обратная связь. При разработке анимации обратной связи необходимо сделать ее очевидной для пользователей.
Что об этом говорят в Диснее? Принцип преувеличения — его не просто чувствуют, его замечают. Часто для этого вам показывают утрированные эмоции героев.
Дисней и UX
Основа анимации — в 12 принципах, которые сформировали в студии Дисней. Там знают — для того, чтобы завоевать сердца аудитории, нужна эмоциональная вовлечённость. Для этого в анимацию нужно добавить реалистичные движения и живые эмоции. Используйте их в дизайне сайтов и мобильных приложений.
Пять принципов UX-хореографии
Основная работа UX дизайнеров состоит в том, чтобы делать вещи не просто функциональными, а приятными. И создавать дизайн, в котором пользователь чувствует последовательность.
Запомните пять важных принципов, которые помогут создать положительный и приятный пользовательский опыт.
Обратная связь
Показать результат взаимодействия и построить доверительные отношения поможет обратная связь. При разработке анимации обратной связи необходимо сделать ее очевидной для пользователей.
Что об этом говорят в Диснее? Принцип преувеличения — его не просто чувствуют, его замечают. Часто для этого вам показывают утрированные эмоции героев.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project960686_1710410209/tild6536-3833-4038-a233-393839363766__-__empty__12.jpeg)
Эмоции Чудовища, когда он узнает, что Бель не идет на ужин
Все настолько быстро, что вы даже не замечаете, как это происходит, но в конечном счете это очевидно.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project960686_1710410209/tild6564-3666-4539-b665-656266623434__-__empty__1.gif)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project960686_1710410209/tild3766-3031-4866-b736-356262386139__-__empty__2.gif)
Опережение
Дайте пользователям намек — подтолкните их на правильную последовательность действий, чтобы они не запутались. Подготовьте их к тому, что должно произойти. Намекните: "Смотри сюда!" или "А здесь можно потянуть". Эти небольшие детали люди могут даже не заметить, что, однако, не отменяет их пользы.
У Диснея есть похожий принцип: подготовка аудитории к тому, что должно произойти.
Дайте пользователям намек — подтолкните их на правильную последовательность действий, чтобы они не запутались. Подготовьте их к тому, что должно произойти. Намекните: "Смотри сюда!" или "А здесь можно потянуть". Эти небольшие детали люди могут даже не заметить, что, однако, не отменяет их пользы.
У Диснея есть похожий принцип: подготовка аудитории к тому, что должно произойти.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project960686_1710410209/tild3138-3861-4533-a637-376365316232__-__empty__15.jpeg)
Открытая рука Микки указывает на последующее действие — он собирается схватить шар
Пользователи сами хотят угадать, что случится — так позвольте им. Потратьте время, чтобы добавить к анимации символ, по которому станет понятно дальнейшее действие. Пример — открытая рука Микки, который готовится поймать мяч.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project960686_1710410209/tild6164-3239-4539-b236-326164643239__-__empty__1111.gif)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project960686_1710410209/tild6131-6134-4262-b734-313330636231__-__empty__17.gif)
Пространственная логика
Помогает пользователям ориентироваться в среде и в отношениях между элементами. Они могут находиться в разных уголках экрана и даже за ним. Главное — удостовериться, что в их расположении есть логика.
Пользователю нужно время, чтобы привыкнуть к среде и интерфейсу. Он должен понять, что за штуковина появилась на экране, куда она пропала и как найти её снова. Избегайте внезапных изменений — пользователю должно быть понятно, как добраться из пункта А в пункт Б.
И это тоже один из принципов Диснея — сценичность.
Помогает пользователям ориентироваться в среде и в отношениях между элементами. Они могут находиться в разных уголках экрана и даже за ним. Главное — удостовериться, что в их расположении есть логика.
Пользователю нужно время, чтобы привыкнуть к среде и интерфейсу. Он должен понять, что за штуковина появилась на экране, куда она пропала и как найти её снова. Избегайте внезапных изменений — пользователю должно быть понятно, как добраться из пункта А в пункт Б.
И это тоже один из принципов Диснея — сценичность.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project960686_1710410209/tild6664-6166-4065-b530-356535323034__-__empty__19.gif)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project960686_1710410209/tild3531-6663-4939-b962-616631303666__-__empty__18.gif)
Пользовательский фокус
Расставляйте акценты, привлекая внимание пользователя к важным деталям. Одно скрыть или затемнить, другое увеличить или выделить — так внесёте ясность.
Это неофициальный, но важный принцип Диснея.
Расставляйте акценты, привлекая внимание пользователя к важным деталям. Одно скрыть или затемнить, другое увеличить или выделить — так внесёте ясность.
Это неофициальный, но важный принцип Диснея.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project960686_1710410209/tild6538-6239-4164-b533-363236353435__-__empty__110.gif)
Микки вытаскивает огромный молоток. Он неестественно большой, потому что в этой сцене публика должна увидеть именно его.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project960686_1710410209/tild6233-3365-4532-a464-633534623732__-__empty__111.gif)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project960686_1710410209/tild3062-3932-4536-a531-356566396237__-__empty__112.gif)
Тон бренда
Мы думаем: "Если бы бренд говорил, что бы он сказал?" А еще надо думать: "Если бы бренд двигался, как бы он это делал?" Пользователи должны знать голос бренда и то, как он движется.
Принцип Диснея - привлекательность — как раз об этом. Чтобы персонаж получился, недостаточно хорошо нарисовать его. Он должен быть харизматичным. Как и приложение должно не просто быть качественным, но вызывать симпатию и эмоциональную привязанность у пользователей.
Мы думаем: "Если бы бренд говорил, что бы он сказал?" А еще надо думать: "Если бы бренд двигался, как бы он это делал?" Пользователи должны знать голос бренда и то, как он движется.
Принцип Диснея - привлекательность — как раз об этом. Чтобы персонаж получился, недостаточно хорошо нарисовать его. Он должен быть харизматичным. Как и приложение должно не просто быть качественным, но вызывать симпатию и эмоциональную привязанность у пользователей.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project960686_1710410209/tild3730-6533-4339-a261-313735666537__-__empty__113.gif)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project960686_1710410209/tild3032-6462-4462-a265-636637626261__-__empty__114.gif)
Эти пять принципов, которые помогут вам очаровать аудиторию. Ваша обязанность — создать последовательность, основываясь на эмоциях в реальной жизни. Ведь герои, для которых мы делаем дизайн, не на экране. Наш главный герой — это пользователь.
Вывод: Гениальные идеи везде работают — и в мультиках, и на сайтах.
Вы сэкономили: 15 минут
Вы сэкономили: 15 минут
#490
10 инструментов для дизайнеров
10 Helpful User Experience Tools for Every Designer
![](https://s29805.cdn.ngenix.net/upload/_tilda/project960686_1710410209/tild3339-3661-4862-a131-316137376366__-__empty__noroot.png)
1. Sketch
С помощью Sketch можно проектировать интерфейсы, сайты и иконки. В нём много функций, как в Photoshop и Illustrator, но Sketch более гибкий. Векторные формы легко приспосабливаются к изменению стилей и размеров.
Стоимость: 99$
2. Mockplus
Простой в использовании инструмент для создания прототипов сайтов и мобильных приложений. При этом не нужно работать с кодом. Одна из особенностей Mockplus — возможность создавать интерактивный дизайн, который работает по принципу WYSIWYG.
Стоимость: Базовая версия - бесплатно, Pro — 20$/месяц
3. XMind
XMind — популярный инструмент для майндмэппинга. Поможет выяснять взгляды, управлять информацией, проводить брейнштормы и организовать работу. Визуализация помогает обрисовать цели, прогресс, требования и проблемы.
Стоимость: Базовая бесплатно, Plus — 79$, Pro — 99$
С помощью Sketch можно проектировать интерфейсы, сайты и иконки. В нём много функций, как в Photoshop и Illustrator, но Sketch более гибкий. Векторные формы легко приспосабливаются к изменению стилей и размеров.
Стоимость: 99$
2. Mockplus
Простой в использовании инструмент для создания прототипов сайтов и мобильных приложений. При этом не нужно работать с кодом. Одна из особенностей Mockplus — возможность создавать интерактивный дизайн, который работает по принципу WYSIWYG.
Стоимость: Базовая версия - бесплатно, Pro — 20$/месяц
3. XMind
XMind — популярный инструмент для майндмэппинга. Поможет выяснять взгляды, управлять информацией, проводить брейнштормы и организовать работу. Визуализация помогает обрисовать цели, прогресс, требования и проблемы.
Стоимость: Базовая бесплатно, Plus — 79$, Pro — 99$
![](https://s29805.cdn.ngenix.net/upload/_tilda/project960686_1710410209/tild6535-3439-4164-b035-393136393333__-__empty__22.png)
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 видео)
Популярный инструмент в UX для визуальной аналитики приложений и сайтов. UsabilityTools показывает, что работает, а что нет. И, самое главное, почему. UsabilityTools позволяет следить за поведением на сайте и смотреть, как пользователи продвигаются по воронке продаж.
Стоимость: Демо — 14 дней, Pro — от 19$/месяц
5. Marvel
Веб-приложение для простого дизайна и разработки прототипов. Пара кликов — и вы сможете соединять экраны с Dropbox и Гугл Диск и создавать интерактивные прототипы для сайтов и мобилок.
Стоимость: Базовая бесплатно, Pro — от 15$/месяц
6. Slack
С лозунгом "команда 21-го века" появился Slack, который значительно экономит время на переписку с коллегами.
Стоимость: Базовая бесплатно, Стандарт — 6,67$/месяц
7. UserTesting
Ошибки на сайтах и в приложениях стоят компаниям миллионы долларов в год. Чтобы этого избежать, UserTesting позволяет получить обратную связь за час. Реальные люди удалённо отвечают на вопросы в анкете и записывают свои комментарии на видео. Проверять можно лендинг, электронные письма, объявления, прототипы, сайты и приложения.
Стоимость: Основной — 99$ за видео (49$ за первых 10 видео)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project960686_1710410209/tild3331-3436-4035-a165-386538663865__-__empty__25.png)
8. Optimizely
Optimizely, как и UserTesting, облегчает проверку и персонализацию сайтов и мобильных приложений. Однако Optimizely сосредотачивается на A/B тестировании.
9. Stylify Me
Этот инструмент помогает дизайнерам быстро получать рекомендации по стилю сайта, включая цвета, шрифты, размеры и интервалы, и подгонять это все на своем сайте под тренды.
10. Color Safe
Сервис помогает выбрать цветовые комбинации, при которых контент воспринимается легко на любом экране.
Optimizely, как и UserTesting, облегчает проверку и персонализацию сайтов и мобильных приложений. Однако Optimizely сосредотачивается на A/B тестировании.
9. Stylify Me
Этот инструмент помогает дизайнерам быстро получать рекомендации по стилю сайта, включая цвета, шрифты, размеры и интервалы, и подгонять это все на своем сайте под тренды.
10. Color Safe
Сервис помогает выбрать цветовые комбинации, при которых контент воспринимается легко на любом экране.
Вывод: Ну давай, перейди с Фотошопа на Скетч. Ты давно хотел — так вот тебе знак. Do it!
Вы сэкономили: 10 минут.
Вы сэкономили: 10 минут.
#491
9 удивительных историй популярных брендов
![](https://s29805.cdn.ngenix.net/upload/_tilda/project960686_1710410209/tild3365-6138-4634-a664-393734653434__-__empty__noroot.jpg)
Хороший продукт, инновационный маркетинг, лояльные клиенты и смекалочка - все это важно. Но иногда есть что-то вроде комбинации удачи и возможности. И одно решение может изменить все.
1. Жук за миллион для Domino
В 1961 братья Том и Джеймс Монаган купили пиццерию за 500 долларов. Спустя год Джеймс решил продать свою долю за жука Volkswagen, который они использовали для доставки. Позже Domino стала второй по величине сетью пиццерий в США. В 1998 Том продал 93% акций компании за 1 миллиард долларов.
2. Формула Coca-Cola навеяна Францией
Фармацевт Джон Пембертон был ранен на войне и стал зависимым от морфия. Это побудило его создать свою версию вина Мариани, в котором он соединил кокаин и вино.
В 1886 году из-за сухого закона Пембертон заменил вино сахарным сиропом и переименовал напиток в Coca-Cola, назвав его «трезвым». Кокаин в напитке содержался вплоть до 1903 года.
3. История фермы Lamborghini
Ферруччо Ламборгини основал завод по производству тракторов после Второй мировой войны. Но испытывал страсть к спортивным автомобилям. Ламборгини владел Ferrari 250 GT, у которого были проблемы со сцеплением. Он лично встретился с Энцо Феррари, который сказал ему, что проблема не с автомобилем, а с водителем, и посоветовал ему вернуться к тракторам. Это побудило Ламборгини построить свой завод по производству автомобилей. Меньше чем за шесть месяцев он создал модель 350 GTV.
1. Жук за миллион для Domino
В 1961 братья Том и Джеймс Монаган купили пиццерию за 500 долларов. Спустя год Джеймс решил продать свою долю за жука Volkswagen, который они использовали для доставки. Позже Domino стала второй по величине сетью пиццерий в США. В 1998 Том продал 93% акций компании за 1 миллиард долларов.
2. Формула Coca-Cola навеяна Францией
Фармацевт Джон Пембертон был ранен на войне и стал зависимым от морфия. Это побудило его создать свою версию вина Мариани, в котором он соединил кокаин и вино.
В 1886 году из-за сухого закона Пембертон заменил вино сахарным сиропом и переименовал напиток в Coca-Cola, назвав его «трезвым». Кокаин в напитке содержался вплоть до 1903 года.
3. История фермы Lamborghini
Ферруччо Ламборгини основал завод по производству тракторов после Второй мировой войны. Но испытывал страсть к спортивным автомобилям. Ламборгини владел Ferrari 250 GT, у которого были проблемы со сцеплением. Он лично встретился с Энцо Феррари, который сказал ему, что проблема не с автомобилем, а с водителем, и посоветовал ему вернуться к тракторам. Это побудило Ламборгини построить свой завод по производству автомобилей. Меньше чем за шесть месяцев он создал модель 350 GTV.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project960686_1710410209/tild3033-3465-4366-a633-326164633763__-__empty__32.jpg)
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 обедал в ресторане Кохлсаата в Чикаго, и был настолько поражен дружелюбной улыбкой одного из официантов, что сделал его лицом бренда. Сходство с тем официантом сохраняется даже в современной версии логотипа.
Сотрудник 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 обедал в ресторане Кохлсаата в Чикаго, и был настолько поражен дружелюбной улыбкой одного из официантов, что сделал его лицом бренда. Сходство с тем официантом сохраняется даже в современной версии логотипа.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project960686_1710410209/tild3962-6264-4465-a636-383231306635__-__empty__34.jpg)
8) HP. Орел или решка?
Когда основателям компании, Биллу Хьюлетту и Дэйву Пакарду, надо было выбрать название, они бросили монетку. Так определили, чье имя будет первым. Паккард победил, но компанию все равно назвали Hewlett-Packard, а не Packard-Hewlett.
9) С чего начинал Samsung
В 1938 Бьонг Чхуль Ли основал Samsung. Сначала это был продуктовый магазин, затем сахарный завод, на котором позже стали производить шерсть. Samsung даже занимались страхованием, ну и телерадиовещанием. Когда компания перешла к сыну Ли, он решил стать №1 только в одной сфере, и сжег лишний инвентарь на 50 миллионов долларов. Это, как ни странно, окупилось — Samsung в 2015 продал телефонов на 81,3 миллиона (а Apple — на 74,8).
Когда основателям компании, Биллу Хьюлетту и Дэйву Пакарду, надо было выбрать название, они бросили монетку. Так определили, чье имя будет первым. Паккард победил, но компанию все равно назвали Hewlett-Packard, а не Packard-Hewlett.
9) С чего начинал Samsung
В 1938 Бьонг Чхуль Ли основал Samsung. Сначала это был продуктовый магазин, затем сахарный завод, на котором позже стали производить шерсть. Samsung даже занимались страхованием, ну и телерадиовещанием. Когда компания перешла к сыну Ли, он решил стать №1 только в одной сфере, и сжег лишний инвентарь на 50 миллионов долларов. Это, как ни странно, окупилось — Samsung в 2015 продал телефонов на 81,3 миллиона (а Apple — на 74,8).
Вывод: В бизнесе всегда что-то происходит в том месте и в то время, и в итоге решает случай, а не холодный расчёт. Если только вы не из HP — там решает только Хьюлетт.
Вы сэкономили: 10 минут.
Вы сэкономили: 10 минут.
Незаметно закончился 101ый, далматиновый ланч. Всем гав и любите пёсиков.