История развития карточного дизайна

07.07.2017

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

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

Тиндер

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

Слева направо: главный экран, пример свайпа, информация внутри карточки
Слева направо: главный экран, пример свайпа, информация внутри карточки

И что тут нового?

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

В до мобильную эпоху контент на компьютерах размещался сверху вниз. Чтобы посмотреть всю страницу нужно было крутить экран. Это называется скролл. Характерный элемент интерфейса — "ползунок".

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

Ок. Что это дало?

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

Схема развития карточного дизайна внутри приложений

Градиентиком — название раздела внутри соцсети основанного на карточках (кроме Тиндера)

Циферка — год появления раздела

Стрелочка — влияние

Снапчат: Сториес, Дискавер

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

Snap ink компания инноваций — они придумали самоуничтожающиеся фотки, они же придумали Сториес.

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

В 2015 году Снапчат запускает раздел Дискавер — аналог сториес для старых медиа. Газетам, тв каналам и интернет изданиям предоставили инструменты для ведения своих каналов внутри ленты пользователей Снапчата.

Слева направо: страница Дискавер и Сториес, карточка про культ от ViceNews, карточка про говно от BuzzFeed
Слева направо: страница Дискавер и Сториес, карточка про культ от ViceNews, карточка про говно от BuzzFeed

Если очень грубо и по-простому, это новый телевизор для поколения миллениалов. Минимум текста, максимум эмоциональности, броские заголовки и качественная анимация. Один слайд — одна мысль, новость, история. Таким образом пользователь Снапчата за пару минут может получить новости CNN и приколы Buzzfeed, на чтение которых привычным способом уйдёт больше времени. К тому же это было бы менее весело.

Твиттер: Моментс

В Твиттере просто использовали формат карточек для объединения нескольких твитов.

Твиты в карточках
Твиты в карточках

Инстаграм: Сториес

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

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

Раздел популярных фото и сториесы
Раздел популярных фото и сториесы

Медиум: Сериес

Завершает картину на сегодняшний день реализация карточного дизайна в сервисе лонгридов Медиум.

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

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

Я сокращу для ясности: в сервисе лонгридов появились клиповые тексты.

По этому же пути идёт и Яндекс выпуская свой Zen.

О чем это всё говорит?

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

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

Кстати. Эта презентация есть в сокращённом варианте на медиуме. И да, она тоже в виде карточек.

Оригинал поста опубликован в моем блоге — https://blog.derivanov.ru/all/house-of-cards/