Primeiras aulas do curso UX Acessível: Projetando interfaces inclusivas

UX Acessível: Projetando interfaces inclusivas

Arquitetura de informação - Introdução

Boas vindas ao curso UX Acessível: Projetando interfaces inclusivas! Sou Talita Pagani, especialista em User Experience (UX) e Acessibilidade Web.

Neste curso, veremos conceitos e boas práticas de acessibilidade relacionados aos aspectos do design, arquitetura de informação até UX writting.

Para melhor aproveitamento do curso, é importante já conhecer alguns conceitos de experiência do usuário, UX writting e alguma base de Acessibilidade Web. Inclusive, temos cursos aqui da Plataforma Alura relativos a estes assuntos que vale conferir e podem ser acessados aqui.

Se já possui conhecimento suficiente nestas áreas e quer entender melhor sobre formas de projetar soluções mais inclusivas para pessoas com e sem deficiência, este curso é para você.

Para entender os conceitos que serão apresentados ao longo das aulas, usaremos como base o projeto feito para o site "De Olho na Telona", o qual é voltado para pessoas que são fãs de cinema e querem conferir as resenhas de outras pessoas, além de compartilhar suas próprias sobre filmes. Na versão inicial, nosso layout e conteúdo apresentam vários problemas de acessibilidade que resolveremos ao longo do curso.

Aqui, usamos uma ferramenta online chamada moqups.com para prototipação e design de interfaces, mas as considerações passadas podem ser tranquilamente aplicadas onde preferir.

Nosso projeto possui cinco páginas: inicial para mobile, aba Populares, Detalhe do Filme, formulário para escrever resenhas também para mobile e um layout desktop correspondente ao blog. No projeto final, teremos várias modificações iterativas em plano de fundo, contraste, posicionamento de elementos até a nomenclatura de botões, rótulos e outros elementos de interface.

Este curso não é voltado somente para questões relacionadas às pessoas com deficiência, pois acessibilidade abrange aspectos mais amplos do que exclusivamente deficiências; por exemplo, alguém em um ambiente externo com bastante luminosidade pode ter dificuldade de enxergar o conteúdo na tela do celular, tendo uma limitação visual situacional. Ou ainda, uma pessoa muito cansada que está com a memória e capacidade cognitiva mais limitadas naquele momento, pode ter dificuldade de entender uma informação ou preencher um formulário.

Então, quando falamos sobre acessibilidade e design inclusivo, consideramos também limitações permanentes, temporárias ou situacionais, o que não envolvendo apenas deficiências.

Durante o curso, aprenderemos como trabalhar requisitos de acessibilidade nas etapas de arquitetura de informação, design de interação e de interface visando melhorar nosso projeto em uso de cores, disposição de elementos e seus comportamentos, até o Microcopy. Escrita de código HTML CSS não será abordada em nossas aulas, pois nos concentraremos mais na escrita de conteúdo e design de interface.

Vamos lá?

Arquitetura de informação - Priorização de conteúdo

Consideramos a versão mobile da página de detalhe de um filme e de escrita de uma resenha.

Olhando as páginas, é importante conseguir identificar facilmente a principal função de cada uma. Note que em detalhes do filme "Manga Mia!" o botão "Escrever resenha" e o link "Ver resenhas" são pouco perceptíveis. Como designers, podemos ter identificado rapidamente; porém, não esqueça que nossa percepção é mais treinada e não somos o usuário.

Tela da versão mobile de detalhe de um filme com o botão "Escrever resenha" e o link "Ver resenhas"

Na página para escrever as resenhas, é um pouco difícil perceber os campos para preenchimento do formulário; estão mal distribuídos na página, não há um rótulo e sua cor é muito clara em relação ao fundo. O destaque de uma informação é importante para fornecer pistas visuais que ajudam pessoas com diferentes habilidades cognitivas a encontrá-la, indicando o percurso de suas ações.

Se considerarmos que o objetivo do nosso site é permitir que escrevam resenhas sobre um filme, consultem a classificação e leiam textos de outros, devemos destacar as funções que permitem atingir o objetivo, o que não está acontecendo na estrutural atual com eficiência.

Tela da versão mobile de escrita de uma resenha com campos de preenchimento

Retomando alguns conceitos básicos, assim como a parte mais concreta do design começa pela Arquitetura de Informação antes de pensarmos em aspectos mais gráficos, a preocupação com acessibilidade deve estar presente também a partir desta etapa.

É a parte que trabalha a estruturação de um site ou aplicativo desde a definição de páginas e subpáginas, passando pela organização das informações presentes em cada uma, chegando até a definição de vocabulário, termos e nomenclaturas. Nesta aula, nos concentramos em organizar priorizando tarefas e conteúdos mais relevantes.

Para melhorar esta questão na aplicação "De Olho na Telona" do moqups.com considerando nosso objetivo, devemos salientar o botão "Escrever resenha" no detalhe do filme e na página inicial. Abrindo esta página na visualização do Moqups, clicamos no ícone "Edit this project" para sermos direcionados à edição.

Clicamos na página de detalhe do fundo azul para arrastar a borda e subir a base do retângulo com transparência até estar acima do botão "Escrever resenha", conferindo mais destaque à este. Em seguida, selecionamos a camada abaixo com a imagem, apertamos o ícone de corte da figura e também arrastamos seu limite inferior até estar alinhado com a última área modificada para finalizar clicando em "Done", deixando então uma área disponível somente com o botão para que o usuário o identifique rapidamente por estar diferente do restante do conteúdo.

projeto no modo edição do Moqups com a área da figura sendo arrastada e cortada até se alinhar com o fundo modificado anteriormente, estando acima do botão de "escrever resenha", com ícone da ferramenta de corte em destaque

Após isso, alteramos a cor deste botão para que se adeque ao padrão do projeto selecionando-o, depois clicando nas cores da parte "Fills" da janela lateral de propriedades para escolher um tom de azul mais escuro do que o amarelo anterior. Mudamos também a cor do texto para branco, contrastando com o fundo.

É interessante aumentarmos um pouco a altura do botão em suas propriedades para que fique com uma área de clique melhor. Anotamos os valores das dimensões para que possa ser aplicados igualmente em outros elementos que forem necessários. Ainda, acessamos esta mesma lista lateral de opções para selecionar a opção "Enable" no espaço de "Drop Shadow" e adicionar uma sombra preta com cerca de 25% de opacidade, fazendo com que pareça mais proeminente na interface.

Visualização do projeto após as alterações do botão, ficando em maior destaque

Já o link "Ver resenhas" está com quase nenhum distinção em relação ao fundo. Clicamos sobre este para alterar a cor do texto para um cinza bem escuro, realçando-o mais com negrito. Faremos ainda mais modificações nesta informação mais adiante.

Na página inicial, lidamos com o link de "Escrever resenha"; começamos com double click sobre este para excluí-lo e, como já temos um botão pronto para este destino nos detalhes do filme, podemos reaproveitá-lo. O copiamos e o colamos para a página inicial, reduzindo-o até ficar agradavelmente encaixado ao lado de "Leia mais". Podemos ainda reescrever seu texto em caixa baixa para deixar mais sutil.

Movemos o link de "Leia mais" até estar alinhado com a parte inferior do cartaz do filme presente nesta página. Revisaremos este link também, mas em outro momento. Expandimos o botão de "Escrever resenha" para alinhar com a caixa de texto da sinopse, deixando-o mais proeminente. Se acessarmos esta página como um usuário comum, vemos melhor qual ação a aplicação propõe neste momento.

Tendo em mente a proposta do aplicativo, é importante saber o gênero do filme; além da busca, essa informação não ocorre em outros lugares. Então, inserimos logo abaixo da sinopse como um link clicável, opção disponível na lista lateral de "Stencils". Deslocamos a caixa de texto da sinopse e o botão para que caiba o gênero agradavelmente logo após "Sinopse", colocando-o em negrito para destacar mais. Diminuímos o tamanho da fonte para ser menor que "Sinopse" e mudamos a cor para o azul padrão de nossa paleta, sendo o gênero do filme fictício "Comédia, Musical".

Tela inicial de busca antes das mudanças e a mesma tela com as alterações e adição do gênero do filme

Desta forma, destacamos e inserimos informações pertinentes à busca e aos detalhes do filme. É importante que os principais dados que as pessoas precisam consultar estejam visíveis, perceptíveis e acessíveis.

Por fim, o botão para enviar o formulário deve ser salientado mais na página para escrever resenhas e um rótulo em seus campos deve ser inserido de forma a orientar o usuário. Logo, podemos copiar o mesmo estilo de "Escrever resenha" da tela iniciar através do recurso "Copy styles", acessível quando clicamos no botão com a direta do mouse, o que nos facilita o reúso e a consistência do projeto.

Na página de escrita da resenha, clicamos com o botão direito do mouse em "Enviar resenha" e selecionamos "Paste styles" para que o programa copie exatamente as características aplicadas no elemento. Como não copia tamanhos e formas, é preciso aumentar suas dimensões manualmente com os mesmos valores aplicados no outro. Duplicamos da mesma forma para a página de erros de preenchimentos dos campos ao lado, mantendo-os idênticos na mesma posição em cada área.

Agora, precisamos colocar um rótulo nos campos de formulário. Usamos o título com negrito, destaque e tamanho adequado para sua função, mantendo a fonte padrão. Antes do espaço de escrita, inserimos "Título da sua resenha" para deixar clara sua relação. Reorganizamos os espaços entre os elementos para ficar o mais equilibrado e agradável possível, usando o recurso de cópia de estilo para os demais títulos dos campos, para obter um melhor resultado:

páginas de "Escrever Resenha" com botões modificados com o mesmo padrão de outras páginas e rótulos para os títulos dos campos abertos

Assim, fica mais fácil identificar os dados desta parte, de forma a orientar o usuário sobre como preencher e quais são as principais ações necessárias, tanto em escrita da resenha quanto na página inicial e detalhes do filme.

Definir o que aparece primeiro na tela, a ordem dos conteúdos e quais informações merecem maior destaque são atividades de Priorização de Conteúdo dentro da Arquitetura de Informação. Uma priorização adequada leva em conta as principais tarefas a serem realizadas e a ordem lógica de acesso aos dados que facilitam a compreensão do conteúdo. Também envolve remover o que é desnecessário no momento; focar em uma tarefa de cada vez nos permite fazer com que o usuário não seja sobrecarregado com excesso de recursos e informações.

Desta forma, a experiência se torna mais agradável às pessoas que possuem algum transtorno de aprendizagem como dislexia, distúrbio de déficit de atenção (DDA), autismo ou questões de memória, entre outras condições. Quanto maior a quantidade de informação em um site ou aplicativo, maior é a necessidade de uma eficiente estruturação para ser acessível ao maior público possível.

Arquitetura de informação - Navegação - de menus a busca

Falaremos sobre navegação nesta aula.

Vejamos a página inicial da aplicação "De Olho na Telona" em moqups.com; não há como saber com certeza onde abrir o menu do site. O ícone no canto superior esquerdo parece confuso ao usuário se é um caminho de retorno ou de um menu.

Página inicial da aplicação com um ícone em destaque

Já nos detalhes do filme, é preciso estar claro como fazer para procurar por títulos a partir desta. Aparentemente, só há um ícone para voltar direcionando para o início e outro de fechar, então falta-nos adicionar algum botão que permita ao usuário realizar esta busca claramente.

A forma como as pessoas podem navegar para encontrar a informação desejada em um site é também uma responsabilidade da Arquitetura da Informação, e afeta diretamente a acessibilidade. Podemos melhorar estas questões para qualquer indivíduo começando pelo uso de uma iconografia padrão e de fácil reconhecimento.

Na edição do projeto, alteramos o ícone da página inicial para algum que seja mais amplamente utilizado para representar um menu de navegação. Na lista lateral de elementos, clicamos na opção de "Icons" que consiste em uma biblioteca padronizada. Aqui em nosso caso, usamos os símbolos do "Material Design" do Google e podemos procurar digitando "menu" na barra superior de busca para ver o resultado apresentado.

São exibidos dois símbolos, sendo um deles o mais adequado conhecido por "menu hambúrguer". Clicamos e o arrastamos até o local do ícone anterior, substituindo-o. Repetimos o procedimento para as demais páginas onde seja necessária a substituição para que apareça no mesmo local e da mesma forma, facilitando a identificação.

Janela lateral da opção "Icons" aberta com resultado da busca por "menu", com destaque para o ícone de "Icons" e para o novo símbolo substituto na página de busca

O ícone anterior não deixava clara a abertura de um menu, e remetia mais à um botão de voltar. É importante que este seja usado tanto na versão mobile quanto na versão desktop do site, mantendo um padrão. Temos o layout do blog para versão desktop, e também devemos fazer a substituição do símbolo nesta página.

Nos detalhes do filme, os símbolos existentes parecem redundantes, pois se há um para retornar e outro pra fechar, parece óbvio que, ao clicar no "X", o usuário retorne à seção anterior ou inicial. Logo, mantemos o ícone de voltar e retiramos o de fechamento, substituindo-o pelo de busca representado por uma lupa, remetendo à esta ação que pode ser feita. Clique e arraste na opção apresentada na busca por "search" para fazer a substituição. Assim, fica claro que o usuário pode voltar à seção inicial ou navegar por outros conteúdos através da procura de informações.

Janela lateral da opção "Icons" aberta com resultado da busca por "search", com destaque para o novo símbolo substituto em formato de lupa na página de detalhes do filme

De volta aos formulários para escrever a resenha, deletamos os "X" que fecham a página mas não colocamos o ícone de busca, pois neste caso não há sentido e pode confundir o usuário, afinal se trata de uma seção final. Devemos nos preocupar em retirar o máximo de distrações para que possam preencher os campos tranquilamente, mantendo somente o botão de voltar aos detalhes do filme.

Por fim, repare que nesta última página há indicação de localização por um percurso de navegação logo abaixo dos ícones superiores. Este indicador também é conhecido como breadcrumb, traduzido livremente para caminho com migalhas de pão. Está pouco perceptível e pode confundir com a informação do cabeçalho, já que são parecidos e há pouco contraste. Tendo em vista que este é um dado bastante importante para a pessoa saber onde está situada dentro do site.

Dando mais detalhes à informação, editamos o retângulo do cabeçalho reduzindo-o até acima do breadcrumb e abaixo do título do filme. Alteramos o texto do percurso e navegação também para um cinza bem escuro, contrastando com seu novo fundo claro. Os ícones ">" que indicam a direção também devem receber cores escuras em "Fills & Strokes" na barra lateral de propriedades e desta forma, temos uma maior distinção entre o breadcrumb, o cabeçalho e o restante da tela.

Antes e depois da tela de detalhes do filme com elementos deslocados e ajustes de cor para realçar o percurso de navegação

A navegação envolve desde as estruturas do menu até os mecanismos de busca, não são só os menus em si, links e etc. A busca também é uma forma de atingirmos a informação que queremos encontrar no site, pois muitas vezes não encontramos da forma como já está estruturada. Um ícone ou atalho usado de forma ambígua pode dificultar o acesso a qualquer pessoa.

Para usuários que fazem uso de softwares como leitores de tela, tenham pouca familiaridade com tecnologia ou apresentam alguma questão cognitiva, esta dificuldade pode ser ainda mais limitante, pois a aplicação pode não ter sido pensada para este amplo acesso, fugindo a um padrão de interação padronizada de sites o qual a pessoa está acostumada. Assim, precisam desprender mais tempo para entender as ações, percursos e conteúdos.

É necessário pensar onde a busca é acessada, como é apresentada e quais filtros podem ter para facilitar o encontro de dados. Além disso, para projetarmos uma navegação mais democrática, nos atentamos à simplicidade e consistência entre páginas utilizando indicadores de localização como nos exemplos.

Dois exemplos de breadcrumb ou percurso de navegação, um contendo linhas e setas para indicação de sentido com ícone "X" para fechar, e outro com círculos contendo status do progresso pelas páginas ligados por linhas, com um símbolo de retorno e outro com "?" para ajuda e informações extras

O primeiro breadcrumb é composto do primeiro link de onde a pessoa começou podendo ser a página inicial, seguido de uma sequência de setas e outros links mostrando a hierarquia do menu e qual caminho o usuário percorreu até chegar na tela atual.

O segundo possui indicadores de progresso com checks em círculos representando as etapas já passadas, sendo a atual com outro círculo interno em destaque de cor diferente para mostrar a página na qual a pessoa está no momento. Estas marcações ajudam o usuário a saber onde está e por onde passou, facilitando a recuperação de informações inclusive.

Também interessa apresentar botões de navegação global sempre que possível, principalmente em mobile para facilitar o reconhecimento como no caso do botão de fechar em "X", que por sua vez pode remeter ao retorno à etapa anterior, bem como o próprio ícone de voltar. Até mesmo o símbolo de ajuda com "?" que pode ser necessário em determinados momentos.

Sobre o curso UX Acessível: Projetando interfaces inclusivas

O curso UX Acessível: Projetando interfaces inclusivas possui 137 minutos de vídeos, em um total de 42 atividades. Gostou? Conheça nossos outros cursos de UX - User Experience em UX & Design, ou leia nossos artigos de UX & Design.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda UX - User Experience acessando integralmente esse e outros cursos, comece hoje!

Plus

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$85
à vista R$1.020
Matricule-se

Pro

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas