De botões semelhantes

De botões semelhantes a bolhas de mensagem: os modelos UX que você nunca mais pode usar

você está no negócio de vender pizza. Todo mundo adora pizza. É rápido e fácil. A demanda é alta. É o clássico americano básico. Mas você tem uma tonelada de concorrentes, o marketing é mais difícil do que você imaginava, o aluguel está ficando mais alto, os projetos de aplicativos são obsoletos, toda semana é uma baixa de 52 semanas e está ficando mais difícil diferenciar – você sabe, as coisas típicas . Então, você pensa: “Eu preciso fazer algo que ninguém nunca fez antes. Algo novo, algo progressivo. ”Você começa a fazer brainstorming de ideias e criar uma ideia brilhante que soe algo como:“ Então, você pode ver os detalhes da pizza e deslizar para a direita, se quiser, e deslizar para a esquerda, se não gostar. Mais ou menos como Tinder, mas para pizza!

É, não. Você não pode projetar algo assim, porque o Tinder tem uma patente sobre a interação de passar direto para o gosto e deixar de gostar. “Ok, ok, tudo bem”, você diz para si mesmo. “Essa é a marca registrada de todo o seu aplicativo, então apenas se livre do recurso de furto, e faremos uma solução de produto viável mínimo (MVP) de apenas ter um botão ‘curtir’ e ‘não gostar’ na parte inferior.” Boa sorte, garoto. Tinder também tem uma patente sobre isso.

Designers estão sempre observando como outras empresas resolvem desafios semelhantes de design e os usam como inspiração para idéias. É um processo divertido (e às vezes não tão divertido) que pode até fazer com que os outros o critiquem por não fazer pesquisas suficientes se você não olhar para as soluções de um concorrente. Para designers e não-designers, é importante entender quais designs estão fora dos limites para uso como inspiração. As empresas levam muito tempo para pensar em elementos de interface do usuário que definem os produtos, por isso faz sentido que eles não queiram que outros copiem algo que passaram a gerar muita energia. Esses recursos da interface do usuário podem ser tão detalhados quanto a navegação sem o uso de botões residenciais do iPhone X da Apple, para o qual ela registrou uma patente gigante ainda em revisão ou tão pequena quanto o ícone “curtir” do Facebook.

Perguntas gerais sobre patentes
Quanto tempo leva para patentear um projeto?
Pode levar de um a dois anos para patentes de design e até cinco anos para patentes de utilidades.

Quanto custa para fazer uma patente de design?
O custo total de uma patente de projeto é de US $ 2.000 a US $ 3.000. Ao contrário de outros tipos de patentes, as taxas anuais de manutenção não são necessárias. Se você é uma grande empresa, isso é bem barato.

Quanto tempo as patentes de design duram?
Todas as patentes listadas neste artigo duram cerca de 15 anos.

Como faço para encontrar patentes?
Convenientemente, você pode encontrá-los no Google Patents, que os indexa de mais de 100 escritórios de patentes ao redor do mundo. Você pode pesquisar por tipo, palavras-chave ou empresa, porque as patentes são todas de material público. Se você tiver tempo, é uma boa ideia procurar patentes de vez em quando.

Estou olhando para as patentes. Como eu leio essa merda?
De acordo com a UpCounsel, “a única seção em uma patente que é legalmente aplicável” é escrita na reivindicação, que é limitada a uma sentença. Para patentes que não são de design, faz sentido acessar a seção de sinistros primeiro. Nas patentes de design, essa frase é muitas vezes vaga e lê algo como: “O design ornamental de um painel de exibição de um sistema de computador programado com uma interface gráfica do usuário, conforme mostrado e descrito”, o que não é muito útil. Portanto, as peças a serem observadas são as linhas sólidas nos desenhos anexos. As linhas pontilhadas são apenas detalhes de suporte para mostrar em que ambiente ela aparece, como se fosse móvel ou desktop. As linhas pontilhadas também podem ser contextuais, o que ajuda a saber, por exemplo, que algo está rolado ou se aparece especificamente em um aplicativo de mensagens. O título também informará se o item patenteado é uma animação ou uma interface gráfica. Infelizmente, as patentes geralmente não incluem uma descrição de como a coisa deve funcionar – às vezes, um pouco de adivinhação está envolvida.

TL; DR para regras de patentes
Você pode patentear:

Ícones
Telas estáticas (um determinado padrão de interface do usuário)
Interações animadas (como uma interação de furto)
Uma função existente que adiciona seu próprio toque ornamental para torná-lo suficientemente original
Algo extremamente específico, como o texto em que parte da tela e o tamanho da imagem. Mas é uma prática melhor torná-lo mais fluido para que, quando você quiser atualizar seus designs, eles ainda estejam dentro das restrições de patente.
Vários recursos na tela são separados em várias patentes. No exemplo de Tinder, a empresa tem uma patente para o recurso de furto e uma patente separada para a colocação dos botões circulares “curtir” e “não gostar”, embora apareçam na mesma tela.
Você não pode patentear:

Algo puramente por função. Por exemplo, não é possível patentear um leitor de termostato digital, mas você pode patentear um leitor de termostato digital tomando a forma de um círculo com controles de relógio giratórios, como o desenho do Nest. Isso significa que alguém ainda poderia projetar um leitor de termostato digital que toma a forma de um triângulo.
O uso da cor
Às vezes, você pode encontrar planos ocultos de uma empresa enquanto observa as patentes. Eu encontrei um par de plantas para projetos que ainda não estão em um produto (se é que isso acontece). O que faz sentido, porque o seguro para uma patente com duração de 15 anos custa menos de um ano de seguro de automóvel. Para uma empresa, isso é essencialmente seguro grátis – e se encontrar uma oportunidade de processar alguém por copiar seus projetos, isso é dinheiro grátis. A Samsung provavelmente está ciente disso: em 2018, a empresa mantinha 61.608 famílias de patentes ativas – 34% a mais do que a Canon, que detinha 34.905 famílias de patentes. As empresas patentearão qualquer ideia meio decente que ele possa legalmente, com a expectativa de que muitas dessas idéias nunca cheguem à produção – mas que acabem compensando em litígios.

maçã
Deslize para desbloquear

Fotos: Richard Dellinger (à esquerda)
Estamos tão acostumados a ver o padrão de deslizar para destravar que pode parecer surpreendente que um padrão tão onipresente seja bloqueado (com trocadilho) pela Apple. Voltar quando o slide para desbloquear lançado, esta era uma idéia muito nova, por isso faz sentido que a Apple queria marcá-lo como deles, e com razão. Eu imagino que essa patente cubra a maioria dos designs horizontais de deslizar para destravar. Agora, isso não significa que você não pode criar um padrão no qual você deslize para desbloquear. Significa apenas que, se o fizer, precisa parecer significativamente diferente. Houve um grande caso legal em que a Samsung teve que pagar à Apple US $ 120 milhões por ter um projeto similar.

Ícones expandidos

Imagem: Imran Chaudhri
Ao tocar em uma pasta de ícones, os ícones na pasta são exibidos em um estado expandido abaixo. O contorno duplo na pasta selecionada e a seta no estado expandido são elementos de design integrais para esta patente.

Forma de bolha de bate-papo do iMessage

Quando a mensagem é por si só, tem uma cauda no final. Quando há várias mensagens do mesmo usuário em rápida sucessão, somente a última mensagem exibe uma cauda. Imagens: Christopher Foss, Jonathan P. Ive e Matthew Dean Rohrbach (à esquerda)
Todas as IUs de bate-papo tendem a seguir um padrão semelhante, razão pela qual essa patente é particularmente importante. Parece que a Apple decidiu que suas bolhas de mensagem eram uma parte icônica da experiência do usuário, portanto, certifique-se de não copiar a forma delas com a pequena cauda da última mensagem e encontre uma maneira de diferenciar sua interface de bate-papo.

Toque no ícone de identificação

Fotos: Chesnot / Getty; Physicx / iStock / Getty Images Plus
Esse bad boy está fora dos limites. Você só pode usar o ícone do Touch ID em situações como um modelo com um modal solicitando sua ID de impressão digital que usa os recursos nativos da Apple. Você não pode usar este ícone na sua versão do seu aplicativo eCommerce iOS no campo de login, por exemplo. Eu realmente fiz isso uma vez e fui chamado pelo meu cliente que sabia melhor, então eu aprendi isso da maneira mais difícil. Para ser honesto, é um ótimo ícone, bacana e circular, de modo que você não é forçado a trabalhar com aquela estranha forma de impressão digital longa. Bom trabalho, Apple.

Visualizador de voz Siri

Fotos: Gary Butcher, Imran Chaudhri, Alan C. Dye, Christopher Foss, Aurelio Guzman, Jonathan P. Ive e Britt Nelson; maçã
À medida que as IUs de voz se tornam mais uma tendência de design, as pessoas certamente procurarão por IUs existentes, como Siri, Alexa e Google Assistant, como inspiração. A Apple tomou a iniciativa de patentear a visualização quando a voz é transcrita de humano para máquina, o que assume a aparência de um conjunto colorido de ondas.

Facebook
Botão “Like”

Três diferentes animações que existem quando você clica em “gostei”. Elas aparecem aleatoriamente no mesmo botão. Imagens: Facebook
Esta patente cobre o estilo do botão “curtir” e qualquer animação que venha com ele. Bem direto. A patente não dita exatamente como o botão “curtir” anima, então o Facebook ainda pode mudar o design no futuro.

Ícones flutuantes em livestreams (legado)

Emojis borbulhantes verticais no livestream. O vídeo original foi editado com uma sobreposição branca para bloquear o conteúdo. Veja a patente. Imagens: Kevin Lin, Ryan Lin e Alex Douglas Cornell; Facebook

Emojis borbulhantes horizontais em livestream. Veja a patente. Imagens: Alex Douglas Cornell; Facebook
Dadas todas as patentes em torno desses ícones flutuantes, é evidente que o Facebook colocou muita atenção e recursos em seus serviços de transmissão ao vivo. Isso também aconteceu na época em que o Periscope e o Instagram Live do Twitter estavam se popularizando. Quando o usuário seleciona um ícone / emoji no painel horizontal durante uma transmissão ao vivo, seu emoji tem um efeito de bolhas animado que é visível para outros espectadores. Este foi um projeto interessante do Facebook, já que você pode ver as reações de outras pessoas em tempo real como uma linha do tempo, em vez do número de marcação tradicional. O Facebook tem patentes para emojis que flutuam e para emojis que flutuam horizontalmente. Parece que nenhuma dessas patentes está sendo usada atualmente na produção, mas o Facebook ainda criou patentes para todas as diferentes versões para fins de teste. A empresa criou uma variação do recurso de emoji flutuante que se eleva do centro quando os pontos de toque estão no centro da tela, além de outra variação do mesmo conceito, mas com os destinos de toque na parte inferior da tela.

Ícones crescentes quando você mantém

O ícone “curtir” no Facebook Messenger aumenta de tamanho à medida que você o mantém pressionado. Imagens: Benjamin S. Langholz; Facebook
Este é um recurso algo oculto e agradável que acrescenta um senso de personalidade à marca do Facebook.

Passe o mouse para revelar outros emojis

Quando você passa o mouse sobre o botão “gostei” em uma postagem, aparecem emojis adicionais com sua própria animação de foco. Imagens: Brandon Walkin; Facebook
Esta foi uma solução realmente inteligente por parte do Facebook para consolidar os emojis que estavam presentes na interface do usuário. Como as reações são parte integrante da experiência, era importante que o Facebook enfatizasse a capacidade de reagir. Colocar emojis em um estado expandido deixa espaço para outras ações, enquanto a oportunidade de mostrar o lado divertido e lúdico com animações adicionais permanece.

Novo post no celular

IU do Facebook ao criar uma nova postagem no celular. Esquerda: um wireframe patente. Centro: o aplicativo no Android. Direita: o aplicativo no iOS. Imagens: Kristina Varshavskaya, Francis Luu e Jacob Andrew Brill; Facebook
O Facebook tem patentes em telas simples, como as mostradas aqui, onde o usuário cria uma nova postagem. Ele também tem patentes para a versão desktop, que parece bem diferente quando o usuário cria uma nova postagem. Esta é uma nova patente, concedida em agosto de 2018. As partes específicas destacadas aqui são os ícones e o texto na parte inferior da tela.

Interação ao gostar de um post (futuro)

Animação do perfil do usuário em exibição com uma reação do tipo “como” expandida ao lado do ícone do usuário. Imagem: Robin Maxime Clediere
Esta patente foi concedida em novembro de 2018 para um recurso que ainda não foi visto na produção. Na minha opinião, ao percorrer os comentários de uma postagem específica, uma animação da foto do perfil do usuário aparece e a reação deles (nesse exemplo, o usuário atingiu “curtir”) também se expande em tamanho ao lado do perfil do usuário. A partir desses wireframes de patente, não está claro a quem pertence o perfil. Não sabemos se são reações de outros usuários que você pode ver em tempo real ou se é uma animação para uma ação realizada.

Bate-papo e reservas com empresas (futuro)

A ideia do Facebook para um recurso de bate-papo e reserva com empresas. Imagem: Robert Franklin Daniel, Yoram Talmor, Alexandre Lebrun, Laurents Nicolas Landowski, Deniz Demir, Jeremy Harrison Goldberg e Willy Blandin
Fiquei muito empolgado quando vi esse recurso, porque, que eu saiba, ainda não está em produção. Facebook tem os direitos para o layout deste projeto, em que o usuário pode enviar mensagens de restaurantes e reservar uma reserva. Esta patente foi atribuída em 2017, portanto, não está claro se isso ainda está em andamento ou se o Facebook foi desclassificado. De qualquer forma, seria interessante ver esse recurso criando concorrência com outros aplicativos de reserva, como OpenTable, Resy e Yelp.

Microsoft
Grade de inicialização do Windows

À esquerda: tela de exibição da Microsoft com interface do usuário. Centro: a tela de inicialização do sistema operacional Windows. Direita: o menu iniciar é aberto quando você clica no ícone da janela. Imagem: Ethan Nelson Ray, Leslie MacNeil, Jonathan Eric Gleasman e Denise Michele Trabona; Microsoft
Esse padrão de retângulos se tornou a marca registrada da marca principal da Microsoft e é usado em todos os dispositivos Windows. Quando você clica no menu Iniciar em um desktop, você também obtém uma pequena grade de opções. Ao projetar um painel, certifique-se de não projetar algo que também seja apenas um monte de retângulos que se assemelham ao layout dessa estrutura de arame patenteada.

A Microsoft cobriu sua bunda também patenteando o layout de grade móvel apresentado no Windows Phones. A parte exclusiva é a proporção e o posicionamento dessas grades, que ficam à esquerda, portanto, há espaço para um ícone de navegação no canto superior direito. Parece, no entanto, que esse design é legado. O design atual (abaixo, à direita) tem a grade preenchendo toda a tela e pode ocupar várias colunas. Mas você ainda não conseguiu fazer uma versão reversa como a original, porque essa patente ainda está ativa.

Layout de grade no celular. A patente é para o desenho mostrado à esquerda; a interface do usuário atual é mostrada à direita. Imagens: Michael I. Guss e Jeffrey C. Fong; Microsoft
Visualizador de galeria (legado)

Painel do Xbox 360 legado da Microsoft. Imagens: Eddie Mays e Charlie Stabb; Xbox / Microsoft
Eu descobri isso enquanto procurava pelas patentes da Microsoft e achava que era um design realmente limpo para uma galeria. Eu uso o Windows há 25 anos e não consigo me lembrar de uma vez em que vi esse layout usado. Eu procurei e perguntei: é o legado do Xbox 360. Eu ainda queria incluir isso porque é um layout legal, e outra pessoa pode acabar criando uma versão mais moderna sem perceber que ela é de propriedade da gigantesca corporação chamada Microsoft. Yikes É um projeto bem antigo – a patente foi concedida em 2010 – mas você ainda não pode fazer algo assim até 2024, quando a patente deve expirar.

Snapchat
Memórias (legado)

Esquerda: o design patenteado. Direita: O design das memórias atuais. Imagens: Jack Brody; Snapchat
Lembre-se disso? Eu sempre achei que esse design era meio maluco. Mas eu estou jogando aqui porque estou surpreso que o Snapchat ainda tenha patenteado um círculo entre os retângulos, o que parece ser um pouco exagerado para esse design. Desde então, a empresa atualizou sua interface do usuário para exibir uma grade mais unificada.

Transição da história

Imagens: William Wu; Snapchat
A transição é sutil, mas quando você abre um snap, ele começa como um círculo e preenche o retângulo. Se você puxar o encaixe lentamente, poderá vê-lo saindo de um retângulo de volta a um círculo e retornando à área de perfil do usuário.

Samsung
Deslize para desbloquear (legado)

À esquerda: uma ideia de patente com as duas setas apontando para dentro de um dispositivo móvel. Direita: O design atual em produção. Imagens: Anzures de Freddy, Imran Chaudhri, Jonathan Dascola, Christopher Foss, Chance Graham, Jonathan P. Ive, Christopher Daryl Soli e Christopher Wilson (à esquerda)
Samsung tem sua própria versão de furto para desbloquear, que é duas setas apontando para dentro. Não consegui encontrar uma maquete desta ideia em jogo; parece ter passado para apenas a dica de texto para desbloquear.

Netflix
Passe em carrosséis

Tela principal do Netflix com o efeito de foco no carrossel. Imagens: Navin Prasad, Paul Anastasopoulos e Cameron Johnson; Netflix
A Netflix realmente trouxe o jogo de carrossel para o próximo nível e fez uma tonelada de trabalho para conseguir a experiência do hover. Quando você passa o mouse sobre um show, a imagem se expande, um clipe de vídeo começa a ser reproduzido e os detalhes essenciais são exibidos. O estado de foco também empurra outros itens do carrossel para fora para liberar espaço para o estado expandido. Este é um design muito arrojado: a Netflix decidiu remover todas as informações para evitar o bombardeamento do usuário. A conseqüência desse design é que o título de cada filme ou programa deve estar presente e legível em cada cartão. Netflix como uma marca valorizou a personalidade do conteúdo sobre a unidade e consistência da colocação de títulos. Esta é uma nova patente, concedida em fevereiro de 2018.

Item de carrossel expandido

Clicar na seta em estado de foco revela um estado de detalhes expandido. Imagens: Anna Mary Blaylock, Navin Prasad, Paul Anastasopoulos e Cameron Johnson; Netflix
Como não uso o Netflix com muita frequência, não percebi que isso existia até que eu estava fazendo minha pesquisa. Quando você passa o mouse sobre um item, uma seta clicável é exibida. Ao clicar, ele oferece uma visualização maior do programa. Há também mais abas com detalhes do show. Este é um bom sistema que permite revelações progressivas em vários níveis. Esta patente foi concedida em março de 2018.

Airbnb
Sobreposição de reserva fixada animada / expandida

Página de descrição de reserva do Airbnb, com ações de reserva à direita. Imagens: Shane Allen

Quando o usuário rola a página, as opções de reserva são fixadas à direita. Informações adicionais na parte inferior expandem o cartão. Captura de tela: Airbnb
Designers amam Airbnb. Tem alguns dos designs mais limpos e o trabalho da empresa é uma inspiração para todos. Os designers da Airbnb foram algumas das pessoas que realmente levaram a idéia de “design e experiência em primeiro lugar” para o coração e fizeram outros seguirem o exemplo. A empresa tem liderado o setor com o primeiro conceito de design, porque é difícil para as empresas existentes alterar seus modelos de trabalho e, bem, você não consegue fazer os executivos aprenderem sobre o design em um dia.

Para esta patente, levei muito tempo para decifrar o que exatamente o Airbnb patenteou. O Airbnb diz que quando um painel flutuante é definido nessa orientação na tela (à direita de sua grade), a empresa tem direitos sobre a animação que ocorre quando o usuário rola. Se você olhar de perto, há uma área expandida – “Ótimo preço” – que aparece quando você rola. Esta é uma nova patente que foi concedida em novembro de 2018.

Devolver o design da home page? (futuro)

Imagem: Derek Elijah Bradley, Stephanie Bain, Kyle Marisa Dill, Jason Reyes Mamaril, David Joseph Hayley, Brian Joseph Chesky, Paul Phillip Stafford, James John Cullen e Alexandra Lubomirsky
Esta patente também é nova, concedida em outubro de 2018. O design parece ser bastante genérico: guias na parte superior e algumas orientações em mosaico de imagens, com potencial para uma etiqueta de preço. Não está claro a partir da aparência desse design se é uma prévia de uma experiência futura, um design de home page de retorno ou uma página diferente em algum lugar da experiência que não posso encontrar. Tenha cuidado ao replicar um padrão como este, já que é bastante genérico.

Tinder
Deslize para a direita, deslize para a esquerda

Quando você desliza para a direita em um cartão de perfil, você “gosta” deles; se você deslizar para a esquerda, “não”. Os usuários podem ser correspondidos quando ambas as partes deslizam para a direita. Imagens: Sean Rad, Jonathan Badeen e Christopher Paul Gulczynsk (esquerda); Tinder (direita)
Você pode ser capaz de escapar com um deslize para não gostar e deslizar para a esquerda para gostar, mas no diagrama de patentes, apenas os cartões são linhas sólidas (a parte “gostei” é uma linha pontilhada), o que me faz pensar que qualquer padrão de deslizar para a esquerda e para a direita seria difícil de justificar. De qualquer forma, se você tentar algo assim e acabar ficando dedos apontados para você, você pode ter que lutar contra as linhas nebulosas de legal.

Toque para “curtir”

Imagem: Sean Rad, Jonathan Badeen e Christopher Paul Gulczynski
Desculpe, mas o Tinder se certificou de que você não poderia fazer o MVP (que significa produto mais viável, também conhecido como “ok, não temos tempo, então vamos descartar as coisas legais e ir com os ossos”).

Tinder social

Imagens: Sean Rad e Andrew Rudmann (esquerda); Tinder (direita)
A aparência de ter vários círculos de perfil abaixo dos seus, combinados com uma lista de contatos e um botão, é reservada para o Tinder. Este é um layout bem específico.

Takeaways
É divertido saber quais elementos da interface do usuário as empresas consideram parte de sua marca principal e quais podem não ser totalmente óbvias para o consumidor casual. Mais importante, como designers, é importante que tenhamos uma boa leitura sobre quais padrões estão fora dos limites. Obviamente, não estamos querendo copiar diretamente as experiências, mas ter esse conhecimento no bolso de trás pode ser útil quando falamos com pessoas que não conhecem.

Empresas como a Uber têm basicamente todas as telas de suas experiências patenteadas, e outras empresas, como a Google, têm muitas para começar a digerir. Encorajo-o a fazer algumas pesquisas sobre empresas das quais você está se inspirando.

Depois de fazer este trabalho, aprendi que as patentes podem ser incrivelmente pequenas, como a forma ou o posicionamento de um ícone. Eles também podem ser genéricos e vagos, como um grupo de retângulos com certa proporção e orientação. As patentes também podem ser detalhadas e descritivas, como a revelação progressiva da Netflix em seu carrossel.

Então, se você é um designer de produtos de UI / UX tentando se tornar grande, precisa se familiarizar com as patentes existentes. Só porque você não vê, não significa que não existe!

E se você tiver algo verdadeiramente único que seja uma marca registrada do produto de sua empresa, considere criar uma patente para sua empresa com a ajuda da equipe jurídica. Não é tão caro para a empresa, especialmente porque uma patente dura 15 anos. E ei, nada diz “não foda comigo” mais do que ter sua própria patente.


Advertisement