Tornando os sites mais fáceis de conversar

Publicados: 2022-03-10
Resumo rápido ↬ Os sites modernos não são mais inseparáveis ​​das telas. Entre assistentes de telefone, alto-falantes domésticos e leitores de tela, mais e mais pessoas estão usando a web sem sequer olhar para ela. Os sites precisam evoluir em espécie.

Um site sem tela não soa bem. Como um livro sem páginas, ou um carro sem volante. No entanto, existem audiolivros, veículos de mãos livres. E cada vez mais os sites estão sendo usados ​​sem sequer serem vistos – pelo menos por humanos.

Assistentes de telefone e alto-falantes domésticos são uma parte crescente do ecossistema da Internet. No artigo, tentarei detalhar o que isso significa para os sites daqui para frente, o que os designers podem fazer sobre isso e por que isso pode finalmente ser um salto para a acessibilidade. Afinal, mais de dois terços da web são inacessíveis para pessoas com deficiência visual. É hora de tornar os sites fáceis de conversar.

Invasão dos alto-falantes domésticos

As vendas globais de alto-falantes inteligentes superaram 147 milhões em 2019 e, com ou sem pandemia, a tendência está aumentando. Afinal, falar é mais rápido do que digitar. Do Google Home ao Alexa, aos assistentes de smartphone, carros e até geladeiras, mais e mais pessoas estão usando programas para pesquisar na web em seu nome.

Captura de tela da adaptação cinematográfica de 1984, de George Orwell.
Testes de usuários para a próxima geração de alto-falantes domésticos do Google. (Visualização grande)

Deixando de lado os tons sinistros do Big Brother Inc desta tendência, é seguro dizer que centenas de milhões de pessoas já estão explorando a web todos os dias sem realmente olhar para ela. As telas deixaram de ser essenciais para navegar na web e os sites devem se adaptar a essa nova realidade. Aqueles que não estão se separando de centenas de milhões de pessoas.

Desenvolvedores, designers e escritores devem estar preparados para a possibilidade de que seu trabalho não seja visto ou clicado – ele será ouvido e falado.

“

Projetando a invisibilidade

Existem duas vertentes principais para o tópico da conversa do site – tecnologia e linguagem. Vamos começar com a tecnologia, que percorre todo o caminho desde a estrutura básica de conteúdo até a marcação semântica e além. Estou tão interessado em boa escrita como qualquer um, mas não é o lugar para começar. Você pode ter uma cópia do site digna de uma performance de Daniel Day-Lewis, mas se não for organizada e marcada adequadamente, não valerá muito para ninguém.

Fundações Antigas

A ideia de websites serem entendidos sem serem vistos não é nova. Os leitores de tela existem há décadas, com dois terços dos usuários escolhendo a fala como saída, com o terço final escolhendo braille.

O foco deste artigo vai além disso, mas tornar os sites amigáveis ​​ao leitor de tela fornece uma base sólida para as coisas mais sofisticadas abaixo. Não vou demorar muito nisso, pois outros escreveram extensivamente sobre o tópico (links abaixo), mas abaixo estão coisas que você deve sempre pensar:

  • Navegação clara na página e em todo o site.
  • Alinhe a estrutura do DOM com o design visual.
  • Texto alternativo, não mais que 16 palavras ou mais, se uma imagem não precisar de texto alternativo (se for um plano de fundo, por exemplo) tenha texto alternativo vazio, não nenhum texto alternativo.
  • Hiperlinks descritivos.
  • 'Pular para links de conteúdo'.

O pensamento visual realmente nos cega para muitas falhas de design. Os usuários podem e muitas vezes juntam as peças sozinhos, mas isso não ajuda muito em sites legíveis por máquina. Tornar os sites fáceis de conversar começa com torná-los amigáveis ​​para conversão de texto em fala (TTS). É uma boa prática e melhora enormemente a acessibilidade. Ganha ganha.

Leitura adicional sobre design e acessibilidade TTS

  • Texto para fala por W3C
  • Front End North Pt 2: Leonie Watson me surpreendeu
  • Text-To-Speech com AWS (Parte 1)
  • Text-to-Speech e vice-versa com a AWS (Parte 2)
  • Observações sobre acessibilidade renderizada pelo cliente
  • Controles de rotulagem pelo W3C
  • Usando o atributo aria-label da Mozilla
  • Usei a Web por um dia usando um leitor de tela
  • Dos especialistas: desenvolvimentos globais de acessibilidade digital durante o COVID-19

Coisas mais extravagantes

Além de estabelecer uma base sólida, projetar para leitores de tela e acessibilidade é bom por si só. Isso é motivo suficiente para mencioná-lo primeiro. No entanto, ele não prevê o aumento da navegação 'mãos livres' sobre o qual falei no início deste artigo. Interfaces de usuário de voz ou VUIs. Para isso, temos que cavar na marcação semântica.

Tornar os sites fáceis de conversar significa rotular o conteúdo em um nível muito mais granular. Quando as pessoas perguntam ao assistente de casa as últimas notícias ou uma receita, ou se o restaurante está aberto na terça-feira à noite, elas não querem navegar em um site usando a voz. Eles querem a informação. Agora. Para que isso aconteça, as informações nos sites precisam ser claramente rotuladas.

Eu caí na toca do coelho da Web Semântica este ano, e não pretendo me repetir aqui. A web pode e deve aspirar a ser legível por máquina, e isso inclui a fala.

Mais depois do salto! Continue lendo abaixo ↓

A marcação semântica já existe para isso. Um é chamado de 'falável', uma propriedade do Schema.org atualmente em beta que destaca as partes de uma página da web que são 'especialmente apropriadas para conversão de texto em fala'.

Por exemplo, eu e dois amigos revisamos um álbum por semana como hobby. Recentemente, redesenhamos o site com marcação semântica integrada. Abaixo está uma parte dos dados estruturados de uma página mostrando a fala em ação:

 { "@context": "https://schema.org", "@type": "Review", "reviewBody": "It's breathless, explosive music, the kind of stuff that compels listeners to pick up an instrument or start a band. Origin of Symmetry listens like a spectacular jam — with all the unpolished, patchy, brazen energy that entails — and all in all it's pretty rad, man.", "datePublished": "2015-05-23", "author": [ { "@type": "Person", "name": "Andre Dack" }, { "@type": "Person", "name": "Frederick O'Brien" }, { "@type": "Person", "name": "Andrew Bridge" } ], "itemReviewed": { "@type": "MusicAlbum", "name": "Origin of Symmetry", "@id": "https://musicbrainz.org/release-group/ef03fe86-b54c-3667-8768-029833e7e1cd", "image": "https://alpha.audioxide.com/api/images/album-artwork/origin-of-symmetry-muse-medium-square.jpg", "albumReleaseType": "https://schema.org/AlbumRelease", "byArtist": { "@type": "MusicGroup", "name": "Muse", "@id": "https://musicbrainz.org/artist/9c9f1380-2516-4fc9-a3e6-f9f61941d090" } }, "reviewRating": { "@type": "Rating", "ratingValue": 26, "worstRating": 0, "bestRating": 30 }, "speakable": { "@type": "SpeakableSpecification", "cssSelector": [ ".review-header__album", ".review-header__artist", ".review-sidebar__summary" ] } }

Então, se alguém perguntar ao seu assistente de alto-falante doméstico o que o Audioxide achou de Origin of Symmetry by Muse, o speakable deve direcioná-lo para o nome do álbum, o artista e o pequeno resumo da revisão. Conveniente e direto ao ponto. (E poupa as pessoas da provação de ouvir nossos resumos completos.) Não há nada lá que não estivesse lá antes; é apenas rotulado corretamente. Você notará também que escolher uma classe CSS é suficiente. Fácil.

Esse tipo de funcionalidade se presta melhor a certos tipos de sites do que a outros, mas as possibilidades são vastas. Receitas, notícias, disponibilidade de ingressos, informações de contato, compras de supermercado… todas essas coisas e muito mais podem ser melhoradas se apenas adquirirmos o hábito de tornar os sites mais fáceis de conversar, cada página repleta de informações claramente estruturadas e rotuladas prontas e esperando para responder a perguntas quando eles vêm em seu caminho.

Além disso, os grandes cérebros em lugares como Google e Mozilla estão trabalhando duro em APIs de fala na web dedicadas, permitindo interações de usuário mais sofisticadas com coisas como formulários e controles. Ainda é cedo para tecnologia como essa, mas absolutamente algo para ficar de olho.

A ascensão dos alto-falantes domésticos significa que os velhos e novos mundos estão colidindo. O fornecimento de um prevê o outro. Não vamos esquecer que os sites supostamente foram projetados para leitores de tela por décadas.

Leitura adicional

  • Aplicativos da Web que falam — Introdução à API de síntese de fala
  • Conceitos e uso de fala da Web pela Mozilla
  • O que são interfaces de usuário de voz? Pela Fundação Design de Interação

Escrever para falar

Você tomou medidas para tornar seu site melhor compreendido por leitores de tela, mecanismos de pesquisa e todas essas coisas boas. Parabéns. Agora chegamos aos tópicos mais confusos de tom e personalidade.

Projetar um site para falar é diferente de projetar para ser lido. A natureza das interações do usuário é diferente. Um ponto importante a ter em mente é que, no que diz respeito às consultas de voz, os sites quase sempre são responsivos – respondendo a perguntas, dando receitas, confirmando pedidos.

Um estudo do Open NYT descobriu que, para usuários domésticos, 'interagir com seus alto-falantes inteligentes às vezes resulta em trocas frustrantes ou até engraçadas, mas parece uma experiência melhor do que estar conectado a um telefone que envia notificações'.

Em outras palavras, você não pode e não deve forçar a questão. O ethos olhe para mim de pop-ups e anúncios e engajamento sem fim não tem lugar aqui. Sua tarefa é ter um bom site que forneça informações sobre o comando da forma mais clara e sucinta possível. Um mordomo virtual, se preferir.

O que isso significa em termos linguísticos é:

  • Frases sucintas,
  • Linguagem clara e simples,
  • Informações antecipadas (pense em pirâmide invertida),
  • Frasear respostas como frases completas.

Diga o que você escreve em voz alta, tenha sistemas de conversão de texto em fala gratuitos como o TTSReacher para dizer de volta para você. As palavras podem soar muito diferentes em voz alta do que escritas e vice-versa. Eu tenho minhas reservas sobre algoritmos de legibilidade, mas eles são ferramentas úteis para medir a clareza.

Leitura adicional

  • 'Teste de legibilidade para conteúdo de voz' em uma lista à parte
  • Os Elementos do Estilo de William Strunk Jr.

HAL, sem as partes ruins

Conversar com sites faz parte de uma mudança mais ampla para experiências na Web independentes de canal. A natureza dos sites está mudando. Do desktop ao celular e do celular aos sistemas domésticos inteligentes, eles estão se tornando mais fluidos. Todos nós conhecemos a indexação 'mobile-first'. Quanto tempo até que seja 'primeiro a voz'?

Afastar-se de restrições rígidas é assustador, mas também é libertador. Nós olhamos para sites, nós os ouvimos, nós conversamos com eles. Cada um é como um pequeno HAL, com tanta ou pouca personalidade e/ou intenção assassina quanto acharmos adequado projetar nele.

Aqui estão os passos que podemos tomar para tornar os sites mais fáceis de conversar, seja construindo do zero ou atualizando projetos antigos:

  • Navegue em seu site usando leitores de tela.
  • Tente consultas vocais por meio de assistentes de telefone/casa.
  • Use marcação semântica.
  • Implemente marcação falada.

Projetar sites para situações sem tela melhora sua acessibilidade, mas também aprimora sua personalidade, seu propósito e sua utilidade. Como Preston So escreve para A List Apart , 'é uma maneira eficaz de analisar e testar o quão independente de canal seu conteúdo realmente é.'

Tornar seus sites fáceis de conversar os prepara para a web independente de canal, que está rapidamente se tornando uma realidade. Em vez de texto e imagens em uma tela, os sites devem ser abstratos e flexíveis, prontos para interagir com uma variedade cada vez maior de dispositivos.