28 июня 2019

От кнопок «like» до всплывающих сообщений: UX-дизайн, который вы не можете использовать

Разработка нового пользовательского интерфейса в 2019 году сложнее, чем вы думаете.

Нашли идеальное решение UX-дизайна вашего проекта? Подождите радоваться: для начала нужно убедиться, что вы имеете право его использовать. В своей статье Кристи Танг (Christie Tang) рассказывает о патентах на дизайн.

Credit: Soloma_Poppystyle/iStock/Getty Images Plus

Вы в бизнесе по продаже пиццы. Все любят пиццу. Это быстро и просто. Спрос высок. Классическое блюдо американской культуры. У вас есть масса конкурентов, маркетинг сложнее, чем вы ожидали, дизайн приложений устарел, цены идут на спад, становится все труднее выделяться — вы понимаете, о чем я говорю. Вы думаете: «Мне нужно сделать то, чего никто раньше не делал. Что-то новое, что-то прогрессивное».‎ Вы начинаете искать решения, и в голову приходит блестящая идея, которая выглядит примерно так: «Вы можете просмотреть информацию о пицце и провести пальцем вправо, если она вам нравится, и провести пальцем влево, если не нравится. Что-то вроде Tinder, но только для пиццы!»

Да, но… нет. Вы не можете сделать нечто подобное, потому что у Tinder есть патент на использование свайпа вправо, если что-то вам понравилось, и влево, если не понравилось. «Окей, хорошо, понятно», — говорите вы себе. «Это отличительная черта всего приложения, поэтому просто нужно избавиться от свайпов, и мы получим MVP (minimum viable product) с кнопками «Нравится» и «Не нравится» в нижней части приложения». Однако и тут не повезло. У Tinder есть патент и на это тоже.

Дизайнеры всегда обращают внимание на то, как другие компании решают схожие задачи, вдохновляясь нестандартным ходом мысли. Это занимательный (а иногда и не очень) процесс, и иногда, если не принимаете в расчет решения конкурента, это может даже вызвать критику в ваш адрес за то, что вы не проводите достаточного количества исследований. Для дизайнеров (и не только) важно понимать, какими решениями нельзя вдохновляться. Компании тратят много времени на то, чтобы придумать определяющие элементы пользовательского интерфейса продукта, поэтому вполне разумно, что они не хотят, чтобы другие копировали то, на что они потратили много энергии. Эти особенности пользовательского интерфейса могут быть подробно описаны, как, например, навигация без кнопки «Домой» от Apple iPhone X (компания подала документы на крупный патент, который находится на этапе рассмотрения), или же очень коротко, как иконка «Мне нравится» на Facebook.

Общие вопросы относительно патента

Сколько времени нужно, чтобы запатентовать дизайн?

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

Сколько стоит сделать патент на дизайн?

Общая стоимость образца патента составляет от 2000 до 3000 долларов. В отличие от других типов патентов, ежегодная плата за его обслуживание не требуется. Если у вас большая компания, то это довольно дешево.

Как долго действуют образцы патентов?

Все перечисленные в этой статье патенты действуют около 15 лет.

Как мне найти патенты?

Вы можете найти их на сайте Google Patents, который собирает патенты из более чем 100 патентных ведомств по всему миру. Вы можете искать по типу, ключевым словам или компании, поскольку все патенты являются общедоступным материалом. Просматривайте патенты, когда у вас будет время.

Я смотрю на патенты. Как лучше читать документацию?

По словам торговой площадки для юридических услуг UpCounsel, единственный пункт в патенте, имеющий юридическую силу, написан в разделе «Иск», который ограничен одним предложением. Для патентов, не относящихся к дизайну, имеет смысл сначала обратиться к разделу «Иск». Говоря об образцах патента, это предложение часто расплывчато, бесполезно и звучит примерно так: «Декоративный дизайн панели дисплея программируемой компьютерной системы с графическим пользовательским интерфейсом, как показано и описано». Поэтому сплошные линии на прилагаемых чертежах — это единственные детали, на которые следует обратить внимание. Пунктирные линии дополняют чертежи, чтобы показать, в какой платформе используется патент — например, в мобильной версии или на ПК. Пунктирные линии также могут добавлять контекст, что помогает вам узнать, что что-то прокручивается или специфично появляется в приложении обмена сообщениями. В заголовке также будет указано, является ли запатентованный элемент анимацией или графическим интерфейсом. К сожалению, патенты обычно не включают в себя описание того, как устройство должно работать, поэтому иногда приходится поломать голову.

Краткое содержание условий использования патента

Вы можете запатентовать:

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

Вы не можете запатентовать:

  • функционал без особого дизайна. Например, вы не можете запатентовать термостат с цифровым экраном, но можете запатентовать термостат с цифровым экраном круглой формы с поворотным управлением, как, например, дизайн термостатов у компании Nest. Это означает, что кто-то еще может сделать термостат треугольным;
  • использование цвета.

Иногда вы можете узнать секретные планы компании, глядя на их патенты. Я нашла пару планируемых дизайнов, которых еще нет в продукте (если, конечно, эти идеи вообще когда-нибудь будут реализованы). Такие патенты имеют смысл, потому что страхование патента на 15 лет стоит меньше, чем один год автострахования. Для компании это, по сути, бесплатная страховка, а если она найдет возможность подать в суд на кого-то за плагиат дизайна, это будут легкие деньги. Компания Samsung, вероятно, хорошо об этом осведомлена. В 2018 году компания владела 61 608 активными семействами патентов, что на 34% больше, чем у компании Canon, которая владела 34 905 патентными семействами и занимала второе место по количеству патентов. Компании будут патентовать любую более-менее стоящую идею, даже зная, что многие из этих идей никогда не попадут в производство, но это может окупиться в судебном процессе.

Apple

Провести пальцем вправо, чтобы разблокировать

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

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

Расширенные иконки

Image: Imran Chaudhri

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

Сообщения в пузырьках

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

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

Иконка Touch ID

Использование этой иконки запрещено. Использовать иконку Touch ID можно только в макетах с модальными окнами, запрашивающих отпечаток пальца, реализующих стандартную процедуру Apple. Вы не можете использовать эту иконку в своей версии eCommerce-приложения для iOS в поле ввода логина. Я лично с этим столкнулась, когда мне позвонил мой клиент, который был лучше осведомлен в данном вопросе. Если честно, это отличная иконка — красивая и круглая, так что вам не нужно иметь дело с этой странной вытянутой иконкой с отпечатком пальца. Хорошая работа, Apple.

Визуализация голоса Siri

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

Facebook

Кнопка «Нравится»

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

Этот патент распространяется на стилизацию кнопки «Нравится» и любую анимацию, связанную с ней. Довольно просто. Патент не определяет, как именно анимируется кнопка «Нравится», поэтому компания Facebook может изменить дизайн в будущем.

Плавающие иконки в прямом эфире (устаревшая версия)

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

Горизонтальные пузырящиеся эмоджи в прямом эфире.

Принимая во внимание все патенты на движущиеся иконки, очевидно, что компания Facebook уделяет много внимания и ресурсов сервисам прямой трансляции. Это началось примерно тогда, когда сервисы Periscope в Twitter и Instagram Live стали популярными. Когда пользователь нажимает на иконку или смайлик во время прямой трансляции, появляется анимированный пузырек с изображением смайлика, который виден другим зрителям. Это был интересный проект, созданный компанией Facebook, потому что вы могли видеть реакцию других людей в режиме реального времени, а не просто количество смайликов. У компании Facebook есть патенты на смайлики, которые всплывают как вертикально, так и горизонтально. Несмотря на то, что ни один из этих патентов еще не был выпущен в продакшн, Facebook продолжает создавать патенты для целей тестирования. Компания придумала различные вариации движущихся смайликов, появляющихся из центральной части экрана, когда вы нажимаете туда, и схожий механизм, когда вы нажимаете в нижнюю часть экрана.

Увеличение иконок при удержании нажатия

Значок «Мне нравится» в Facebook Messenger увеличивается, чем дольше вы жмете на кнопку.

Не самая известная, но полезная функция, которая добавляет индивидуальности бренду Facebook.

Коснитесь, чтобы открыть эмоджи

Когда вы наводите курсор мыши на кнопку «Мне нравится», появляются дополнительные смайлики, которые имеют собственную анимацию при наведении курсора.

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

Новый пост в смартфоне

Images: Kristina Varshavskaya, Francis Luu, and Jacob Andrew Brill; Facebook

Пользовательский интерфейс Facebook при создании нового сообщения на мобильном телефоне. Вверху: патентный каркас. Слева: приложение на Android. Справа: приложение на iOS.

Компания Facebook запатентовала пространство (которое можно увидеть на картинке), где пользователь может написать новый пост. Она также запатентовала десктопную версию, которая выглядит совсем иначе. Этот патент был получен в августе 2018 года. Иконки и текст в нижней части выделяются.

Когда ставим лайки посту (будущая версия)

Image: Robin Maxime Clediere
Анимация профиля пользователя, которая отображается в виде реакции «нравится» и расширяется рядом со значком пользователя.

Патент, который мы еще не видели в продакшене, был выдан в ноябре 2018. Я предполагаю, что при просмотре комментариев к определенному посту будет появляется аватарка пользователя, и его реакция (например, пользователь нажимает кнопку «Нравится») будет увеличиваться в размере рядом с профилем пользователя. По описанию патента пока не ясно, какому профилю будет принадлежать анимация. Мы не знаем, будет ли это реакцией других пользователей, которую видно в режиме реального времени, или это будет анимация после ваших действий.

Общение и бронирование напрямую через организации (в будущем)

Image: Robert Franklin Daniel, Yoram Talmor, Alexandre Lebrun, Laurent Nicolas Landowski, Deniz Demir, Jeremy Harrison Goldberg, and Willy Blandin
Идея Facebook для чата и бронирования у организации.

Я была очень взволнована, когда увидела эту функцию, потому что, насколько я знаю, она еще не выпущена. У компании Facebook есть права на проектное решение, благодаря которому пользователь сможет писать ресторанам и бронировать столик. Этот патент был получен еще в 2017 году, но пока неясно, находится ли он еще в разработке или уже нет. В любом случае, было бы интересно увидеть, как эта функция конкурирует с другими приложениями для бронирования, такими как OpenTable, Resy и Yelp.

Microsoft

Сетка приложений Windows

Image: Ethan Nelson Ray, Leslie MacNeil, Jonathan Eric Gleasman, and Denise Michele Trabona; Microsoft

Вверху: экран Microsoft с пользовательским интерфейсом. Слева: экран запуска операционной системы Windows. Справа: меню «Пуск» открывается при нажатии на иконку окна.

Эта сетка из небольших прямоугольников стала визитной карточкой основного бренда Microsoft и используется на всех устройствах Windows. Когда вы нажимаете на меню «Пуск» на рабочем столе, также открывается сетка опций. При разработке панели инструментов убедитесь, что вы не создаете нечто схожее с набором прямоугольников, напоминающих макет в этом запатентованном каркасе. Компания Microsoft на этом не остановилась и запатентовала схожий макет сетки для мобильного вида, представленный на Windows Phone. Уникальная часть дизайна — размер и расположение этих сеток. Сетка расположена слева, поэтому в правом верхнем углу есть место для навигационной иконки. Кажется, что этот дизайн уже устарел. Текущий дизайн (ниже, справа) имеет сетку, заполняющую весь экран, и может занимать несколько столбцов. Но вы все еще не можете повторять оригинальную версию, потому что этот патент все еще активен.

Images: Michael I. Guss and Jeffrey C. Fong; Microsoft

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

Просмотр галереи (устарело)

Устаревшая панель Microsoft Xbox 360.

Я нашла это, просматривая патенты Microsoft, и подумала, что это очень хороший дизайн для галереи. Я использую Windows уже 25 лет и не могу припомнить, чтобы я когда-либо видела этот дизайн. Я поискала информацию и узнала, что это устаревшая панель управления Xbox 360. Я хотела включить это в статью, ведь кто-то может разработать более современную версию, не осознавая, что она принадлежит гигантской корпорации под названием Microsoft. Ужас. Это довольно старый дизайн — патент на него был выдан в 2010 году. Вы ничего не сможете сделать до 2024 года, когда срок действия патента истечет.

Snapchat

Воспоминания (устаревший дизайн)

Images: Jack Brody; Snapchat

Вверху: запатентованный дизайн. Внизу: современный дизайн Memories.

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

Переход истории

Трансформация едва заметна, но когда вы открываете историю, она появляется в виде круга, который превращается в полноэкранный прямоугольник. Если вы потянете за «историю», то увидите, как из прямоугольника она снова превращается в круг и вы оказываетесь в профиле пользователя.

Samsung

Проведи пальцем, чтобы разблокировать (устаревшая версия)

Слева: патентная идея с двумя стрелками, направленными внутрь на мобильном устройстве. Справа: текущий дизайн в производстве.

У Samsung есть своя версия для разблокировки — две стрелки на противоположных концах экрана. Я не смогла найти дизайн этой идеи в действии, видимо, он был упразднен в пользу текстовой подсказки для разблокировки.

Netflix

Наведите курсором на карусель

Images: Navin Prasad, Paul Anastasopoulos, and Cameron Johnson; Netflix

Images: Navin Prasad, Paul Anastasopoulos, and Cameron Johnson; Netflix
Главный экран Netflix с эффектом наведения на карусель.

Компания Netflix действительно подняла «игру» со списком фильмов на новый уровень и проделала огромную работу по улучшению эффекта наведения курсора. Когда вы наводите курсор на фильм, сериал или программу, изображение увеличивается, начинается воспроизведение видеоклипа и отображается дополнительная информация. Когда вы наводите курсором на фильм, другие фильмы смещаются с центральной линии, чтобы освободить место. Это очень смелый дизайн: компания Netflix решила убрать всю информацию о фильме, кроме иконки, чтобы не перегружать пользователя информацией. Таким образом, название каждого фильма должно присутствовать и читаться на каждой иконке. Netflix, будучи брендом, ценит индивидуальность контента, а не целостность или последовательность размещения названий. Этот патент был получен в февраля 2018 года.

Увеличенное изображение элемента списка

Images: Anna Mary Blaylock, Navin Prasad, Paul Anastasopoulos, and Cameron Johnson; Netflix

Images: Anna Mary Blaylock, Navin Prasad, Paul Anastasopoulos, and Cameron Johnson; Netflix
Открытие подробного превью фильма нажатием на стрелку.

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

Airbnb

Расширенная анимация бронирования

Страница описания бронирования Airbnb, с правами на бронирование.

Screenshot: Airbnb
Когда пользователь прокручивает страницу, параметры бронирования отображаются справа. Дополнительная информация показана внизу.

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

Мне понадобилось много времени, чтобы понять, что именно запатентовала Airbnb. По словам компании Airbnb, у них есть права на анимацию, которая появляется при прокрутке страницы, когда движущаяся панель находится в правой части сайта. Если вы посмотрите, то увидите, что при прокрутке страницы появляется дополнительная информация — «Отличная цена». Это новый патент, который был получен в ноябре 2018 года.

Дизайн главной страницы при возвращении на нее (будущий дизайн)

Image: Derek Elijah Bradley, Stephanie Bain, Jason Reyes Mamaril, Katherine Marisa Dill, David Bradley Haynes, Brian Joseph Chesky, Paul Phillip Stafford, James John Cullen, and Alexandra Lubomirsky

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

Tinder

Свайп вправо, свайп влево

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

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

Нажать, чтобы лайкнуть

Image: Sean Rad, Jonathan Badeen, and Christopher Paul Gulczynski

К сожалению, компания Tinder запрещает использование даже MVP (minimum viable product — минимально жизнеспособный продукт, что также понимается как «окей, у нас нет времени, поэтому давайте оставим основную функциональность и выбросим остальное») версию.

Tinder social

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

Заключение

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

Такие компании как Uber патентуют каждый экран своих приложений, а у некоторых компаний, таких как Google, патентов столько, что сложно даже просто перечислить их. Я советую вам делать небольшие самостоятельные исследования о компаниях, которые вас вдохновляют.

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

Если вы UI/UX-дизайнер, который работает над улучшением продукта, вам придется знакомиться с существующими шаблонами, потому что если вы их не видели, это не значит, что их не существует.

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

Оригинал: https://onezero.medium.com/ui-ux-patterns-you-literally-cannot-design-design-patents-from-tech-companies-21ae9643dc9e

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Читайте в нашем блоге

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: