Привет!

Сегодня мы откроем формат постов, в котором я буду кратко пересказывать видео-лекции дизайнеров (и не только) со всего мира. Разумеется, вы сможете перейти по ссылке и прослушать лекцию самостоятельно. Но если у вас нет свободных 30 минут времени, то можно пробежаться по тезисам и понять, насколько вам будет интересно смотреть видео целиком.

И начнем мы с лекции Paul Bakaus из Google, который рассказывает про особенности восприятия скорости в вебе, поднимая тему производительности – https://www.youtube.com/watch?v=g3P7Gy_2wOo

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

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

Причем важна не реальная производительность, а ощущаемая производительность. Все мы с вами знаем, что есть огромная разница между реальным временем и ощущаемым временем в зависимости от ситуации. Иногда минуты пролетают молниеносно, а иногда тянутся вечность.

И наверняка вы слышали фразу «живи в моменте», типа находись здесь и сейчас. Но на самом деле это не особо реально, потому что все мы с вами живем постоянно в прошлом. Наше с вами сознание отстает от реальности на 80 миллисекунд. Когда вы думаете, что что-то происходит, это на самом деле уже произошло.

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

Но, как оказывается, у нас проблемы не только с ощущением настоящего. Знаете, часто говорят фразу типа «Никогда не позволяй твоему прошлому определять твое будущее»? Но будущее не может существовать без прошлого, потому что все, что мы можем представить о будущем основано на нашем прошлом опыте. Люди, которые не могут держать в голове долгосрочные воспоминания не могут себе представить завтрашний день. Это факт.

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

В общем, честно признаться, из людей вышел бы крайне плохой часовой механизм.

И Пол приводит несколько величин, относящихся к восприятию времени, которые стоит учитывать при работе с интерфейсами:
- если действие быстрее 200мс, то оно воспринимается как мгновенное
- если действие быстрее 1 секунды, то оно воспринимается как немедленное
- если меньше 5 секунд, то все еще воспринимается как часть user flow
- до 8.5 секунд внимание все еще концентрируется на процессе
- выше 8.5 секунд – внимание пользователя потеряно.

И заключительная величина 10 лет назад составляла 10 секунд. Но как видите, клиппинговое мышление дает о себе знать, и это значение постоянно уменьшается.

Важно влияние контекста на восприятие времени. Если вы опаздываете на встречу, то задержка в 10 секунд уже раздражает. Если же вы включаете свою приставку, чтобы провести за ней следующие несколько часов, то ожидание в 1 минуту выглядит не таким напряжным.

Переключение канала на телике в 5 секунд – очень долго.
Приготовление шаурмы за 5 секунд – очень быстро.
Иногда слишком высокая скорость уменьшает значимость сервиса.
Если что-то делается быстро, значит это просто. Если это просто, значит это дешево.

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

Вот несколько способов, которые по словам Пола могут помочь:
1. Упреждающий старт. На самом деле в эту категорию подходят все действия, предполагающие последовательное взаимодействие, где каждый следующий шаг не зависит от предыдущего, но обязательно следует за ним. Если мы знаем, что мы в обязательном порядке проведем пользователя через несколько шагов, то логично сразу загружать второй шаг, пока пользователь занят выполнением первого шага, чтобы сократить время ожидания.
2. Раннее завершение – прогрессивный JPG. Когда мы стараемся показать пользователю пусть нефинальный результат, но максимально быстро, затем уточняя его.
3. Оптимистичный UI – Instagram. Когда мы лайкаем фотографию, то сердечко и обновление количества лайков отображаются мгновенно, хотя это может еще на самом деле не произойти. Например, если вы заехали на машине в туннель, в нем поставили лайк, и, предположим, оставили телефон в туннеле навсегда, то этот лайк так и не станет реальным, хотя интерфейс вам уже показал, что все ок.
4. Предвидение – если в iOS вы просвайпите контент и быстро остановите палец, то можете обратить внимание на еле заметное продолжение движения контента. Этот эффект возникает из-за того, что система для предотвращение лага пытается предугадать ваше следующее действие. Если вы ведете палец, то система в любом случае отстает от него на миллисекунды. Чтобы этого избежать, система начинает действовать наперед подвигая контент туда, где по ее мнению будет ваш палец через несколько миллисекунд.
5. Визуальная иллюзия – здесь Пол говорит об обычных анимационных изингах, которые тоже могут повлиять на восприятие.

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

Надеюсь, что этот формат будет полезен для вас. Если вы недавно находили какие-нибудь классные лекции, то скидывайте их мне @sergeyandronov

Кстати, архив постов за прошлую неделю вы сможете найти вот здесь - https://goo.gl/jeRBtN

Интересной недели всем! ;)

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

Прошел уже почти год, и список явно хочется актуализировать и дополнить новыми именами, так что держите новую подборку крутых студий и агентств:
1. merci-michel.com
2. www.epic.net
3. buildinamsterdam.com
4. wild.as
5. immersive-g.com
6. watsondg.com
7. aquest.it/en
8. activetheory.net
9. jam3.com
10. hellomonday.com
11. dogstudio.co
12. b-reel.com
13. unit9.com
14. resn.co.nz
15. mediamonks.com
16. digital.eleks.com
17. northkingdom.com
18. waaark.com
19. legworkstudio.com
20. rezo-zero.com/en

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

Эту проблему я начал изучать с попытки понять, что же такое вообще «эффектность», и что такое «эффективность», и из чего они состоят, на какие виды делятся.

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

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

Формулировка, которую предлагают словари, звучит следующим образом: эффектность – свойство производить впечатление. Отсюда понятно, что производить впечатление можно не только графикой, но и множеством других способов.

На текущий момент для себя я выделил следующие виды эффектности:
1) визуальная – анимационные решения, нестандартные способы верстки, нестандартные статичные графические решения и так далее
2) смысловая – когда мы впечатляемся самой идей и концепцией проекта. Они могут быть обличены в разную форму, навороченную или очень простую, но эффект, произведенный самой сутью, явно ощутим.
3) функциональная – когда мы удивляемся, радуемся и показываем друзьям то, каким образом продукт, сервис, сайт помогает нам, как он необычно решает наши задачи.
4) коммуникационная – когда мы испытываем эмоции от того языка, на котором с нами разговаривает продукт или сервис.

Наверняка позже этот список дополнится и детализируется.

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

Завтра вечером (7 сентября) в 20:00 я буду делиться той информацией, которая собралась на текущий момент в Британской Высшей Школе Дизайна. Мы попробуем порассуждать, посмотреть конкретные примеры и приемы.

Видеозаписи и выложенной презентации, к сожалению не будет. Но это будет открытая бесплатная лекция, на которую вы спокойно можете прийти, просто зарегистрировавшись (отметившись) на странице мероприятия – https://www.facebook.com/events/1864441100540051

Так что приходите, если вы сейчас в Москве, познакомимся и пообщаемся!

Уже почти год назад ребята из музыкальной группы OK Go выпустили свой очередной безумный музыкальный клип «The One Moment»

Но помимо самого ролика очень интересно посмотреть процесс того, как он создавался https://www.youtube.com/watch?v=v8nc5wBl0dM

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

Если же говорить про клип «The One Moment», то несмотря на то, что он был сделан почти год назад, он получил золотого Льва на Каннских Львах в этом году и есть за что. Фишка клипа в том, что ребята сняли весь клип за 4.5 секунды! Запись производилась на камеру со скоростью 4000 кадров в секунду с помощью заранее запрограммированной роботизированной руки, которая четко провелка камеру в нужные моменты по нужной траектории.

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

Мы сегодня вечером будем обсуждать этот пример на моей открытой лекции в Британке, так что напоминаю, что вы можете запросто прийти, а я буду вам очень рад – https://www.facebook.com/events/1864441100540051/! 😉

http://nikecityfast.co.uk/ – мобильный сайт-игра для Nike. Знакомая механика и приятная графика, вероятно сделают его победителем в ближайшие пару дней на FWA.

Но говоря про этот проект, хочется еще немного затронуть тему Progressive Web App. В этом посте мы не будем изучать все технические особенности PWA, но поговорим о применимости формата к такого рода проектам как NikeCityFast.

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

И формат PWA очень круто может здесь помочь. Он позволяет сохранить сайт в виде отдельной версии к вам прямо на Home Screen в виде иконки. То есть у вас на экране появится иконка, такая же как у любого другого приложения, установленного из AppStore или Google Play. И теперь для того, чтобы вернуться к игре, вам достаточно просто тапнуть на иконку.

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

Думаю, что мы еще вернемся к теме Progressive Web App в других постах с конкретными примерами и техничекими особенностями, чтобы вы точно смогли принять решение о том, насколько такой формат будет полезен в вашей работе.

Ну а архив за прошлую неделю по традиции можно найти вот здесь - https://goo.gl/jeRBtN ;)

Как вы заметили, я храню архив постов канала на notion.so. На самом деле я храню там кучу информации, набросков, чек-листов, мыслей, списков, закладок, задач на неделю и так далее. И каждый раз, когда я даю ссылку на архив, то получаю в ответ вопрос «Что такое Notion»? Инструмент на мой взгляд очень крутой, поэтому расскажу о своем опыте его использования в посте. Возможно вам тоже он будет полезен.

Notion это сервис, который лично для меня заменил Google Docs, Dropbox Paper, Wunderlist, Evernote, Wiki, Trello (для личного использования) и подобные сервисы. Так, и это все никакая не реклама! =)

В нем я сейчас:
1. пишу и структурирую все посты
2. разрабатываю структуру лекций и занятий для курсов
3. веду базу полезных материалов, закладок
4. формирую чек-листы для задач студии
5. планирую свои задачи на неделю.

Вообще Notion это инструмент для организации большого количества разнообразной информации в удобном структурированном формате.

Первый раз, когда я наткнулся на него, где-то полгода назад в какой-то из подборок, где не было должного описания, я не очень понял суть проекта, подумал, что это просто какой-то навороченный текстовый редактор и не более того. Уже позже, я узнал, что Сережа Сурганов (@surganov) ex-art-director Медузы (который ведет крутой канал @internet9000), перешел работать в Notion и переехал к ребятам в Сан-Франциско. И здесь захотелось все-таки посмотреть и разобраться, что же это за продукт, и в чем его фишка.

На самом деле для меня эта платформа – смесь текстового редактора и wysiwyg-редактора сайтов типа Readymag. Построение любого материала основывается на блоках. Каждый новый абзац это блок, для которого может быть использовано огромное количество модулей разного формата, например:
1. стандартные: текст, заголовки, разные списки, цитаты, разделители и так далее
2. медийные: картинки, ссылки-закладки на внешние ресурсы, видео, части кода, файлы, математические формулы и др.
3. навороченные, интерактивные: блоки для дискуссионных комментариев, которые вы можете вставлять прямо посередине материала; хлебные крошки, пользователи, кнопки для создания сущностей по шаблону и прочее.
4. embed с интеграцией: Google Drive, Google Maps, Framer, Invision, Twitter, GitHub.

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

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

Ну и, честно признаюсь, я получаю удовольствие от самого набора материала, потому что в редакторе используются всякие приятные мелочи, типа добавления новых блоков через «/». Попробуйте сами, поймете, о чем речь.

В бесплатной версии Notion есть ограничение на количество блоков, но его очень легко обойти, просто пригласив 5 своих друзей для безлимита.

Я уже давно пригласил друзей в Notion и убрал ограничения, поэтому мне смысла зазывать вас ради своей выгоды нет. Но я правда очень хочу, чтобы вы попробовали сервис, потому что он реально крутой – https://www.notion.so/invite/link/96f551c5a538442f82724463a5b7440e!

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