andré.santana [webdesign blog]

Archive for março 2008

Post muito legal, vale a pena ver. Via Stuff That Happens

Ouch!

simplicity

Clique na imagem para ampliar

=)

Comentem…

O Flash já foi um alvo de muitas críticas, incluindo do famoso Jakob Nielsen, pai da usabilidade, sobre suas deficiências ao gerar conteúdos acessíveis.

Bom, a Macromedia, atualmente Adobe, contratou o próprio Jakob Nielsen, autor das maiores críticas, como consultor para melhorar o programa. O resultado foi o surgimento de um painel novo, além de novas características em outros painéis.

Vamos ver como utilizar estes painéis da forma correta, aplicando ao documento, menus e campos de texto.

Para este manual básico, estarei utilizando a versão CS3 do Flash, mas as mesmas ferramentas e painéis são encontradas nas versões MX 2004 e 8.

Acessibilizando o documento

Janela Document Properties

Para abrir esta janela, vá até o menu Modify > Document.

Para cada arquivo em Flash que for desenvolver, é importante que defina duas informações sobre o mesmo:

  1. Title – Este campo serve para determinar um título para o arquivo, uma informação breve, sobre o documento, como por exemplo: “Catálogo de Produtos”.
  2. Description – Neste campo faça uma breve descrição sobre o conteúdo do arquivo e seu propósito. Como por exemplo: “Conheça nossas linhas de produtos”.

Com o documento descrito, podemos começar a desenvolver nosso projeto, sabendo que já informará ao usuário que documento está acessando e qual o seu propósito.

Painel Acessibility

Com este painel, podemos gerar conteúdo acessível, fornecendo equivalentes textuais aos elementos utilizados no Flash.

Para abrir este painel, vá até o menu Window > Other Panels > Acessibility.

Acessibilizando Textos

Por padrão, o Flash permite o acesso a todos os elementos textuais para os leitores de tela. Não sendo necessário fazer nenhuma modificação. Mas é importante observar que as opções do painel Accessibility mudam de acordo com o tipo de Campo Texto que for utilizado.

Static Text (Texto Estático)

Se escrever qualquer texto utilizando o campo Static Text, vai encontrar no painel Accessibility apenas a mensagem: “Current selection cannot have accessibility applied to it” ou seja: “A seleção atual não tem acessibilidade aplicada a ela”, o que nos informa que não há opções a serem configuradas para ela, veja a Imagem 3 . Mas é importante deixar ativa a opção “selectable”, que possibilita a seleção do texto, isto permite que usuário selecione o texto e facilita a acessibilidade para alguns leitores de tela.

Static Text não possui configurações no painel Accessibility.

Dynamic Text (Texto Dinâmico)

Os campos de texto do tipo Dynamic Text, quando com a opção “Make object Accessible” ou seja “Torne o objeto acessível”, estiver ativada, permitirá ao leitor de tela ler exatamente o conteúdo escrito no mesmo. Mas se achar necessário poderá contar com mais duas configurações:

  1. Description (Descrição) – Utilize esta opção para definir uma pequena descrição do campo, o qual deve ser feita apenas se o campo necessitar de maiores explicações, o que na maioria das vezes não é necessário.
  2. Tab index (Ordem da Tabulação) – Utilizado para definir a ordem que o objeto será selecionado quando o usuário navegar utilizando as teclas TAB e SHIFT+TAB.

Opções de acessibilidade para Dynamic Text.Input Text (Texto de Entrada)

No campo de texto do tipo Input Text, configuramos o painel Accessibility da mesma forma que fariamos na linguagem (X)HTML, onde é indicado definir um “Name” – um rótulo para o campo de texto, para que o usuário saiba o que está preenchendo, e quando for necessário coloque uma descrição no campo “Description”, como por exemplo: “Campo obrigatório”.

Além destas duas opções ainda temos os campos:

  1. Shortcut – que serve para definir um atalho, um acesso rápido ao campo, o que é feito definindo uma letra ou número, como por exemplo: “A”. O atalho para o usuário será a tela ALT juntamente com a letra ou número definido, no nosso exemplo o atalho é “ALT + A”.
  2. Tab index – No caso de formulários é muito importante definir a ordem da tabulação para que o usuário tenha uma ordem lógica definida ao preencher os campos. Caso contrário ele ficará preso à ordem de criação dos campos.

Acessibilizando Buttons e MovieClips

O termo “etiquetar” é bem conhecido por quem desenvolve conteúdo acessível, que significa identificar textualmente um elemento, o que é feito no HTML com imagens através do atributo “alt” e no Flash é feito através do painel Accessibility.

Tanto os Buttons como os MovieClips tem que ser etiquetados, pois mesmo contendo campos de texto inseridos no seu corpo, é um elemento fechado e pode acarretar em não ser acessado pelo leitor de tela.Para demonstrar como etiquetar um menu de navegação, criei no Flash dois elementos utilizados para este fim, um Button, com a função de voltar e um MovieClip com a função de avançar.

A utilização do Symbol Button é para botões mais simples, sem uma animação maiselaborada, enquanto o Symbol MovieClip deve ser utilizado para botões animados e com aspectos visuais mais elaborados.

Acessibilizando um Button

O Button tem as mesmas opções que foram vistas nos campos de texto, então basta configuralo da mesma forma, mas é importante salientar a importância de determinar o rótulo do botão no campo “Name” do painel Accessibility, para este botão do exemplo o Name seria “Voltar” e nos casos que forem necessários determine a descrição no campo Description, aqui poderíamos utilizar: “Clique para voltar para o slide anterior”.

Para botões com a função de navegação de slides, como “Voltar” e “Avançar” é importante definir corretamente o Tab index e um Shortcut.

Para botões animados desenvolvidos com MovieClips, há apenas uma diferença no painel

Accessibility para os botões definidos pelo Symbol Button: a opção “Make child objects accessible”, ou seja, “Tornar os objetos filhos (ou internos) acessíveis”.

Acessibilizando um MovieClip

Neste caso, como o MovieClip pode, desde ter a simples funcionalidade de um botão até ter a função de recipiente de partes ou de toda uma animação, a opção “Make child objects accessible” permite que os elementos internos do MovieClip possam ser lidos pelo leitor de tela, os quais devem também estar com as suas opções de acessibilidade definidas.

por Carlos Tristacci

Para o design ter sucesso, ele deve primeiro atender as necessidades básicas das pessoas – antes de tentar satisfazer necessidades de níveis mais altos.

E quais seriam estas necessidades? Para chegar aos cinco elementos chave na hierarquia das necessidades no design, vamos seguir o padrão de Maslow:

maslow

Necessidades humanas segundo Maslow

1. Fisiológicas
2. Segurança
3. Relacionamento
4. Estima/Status
5. Realização pessoal

Necessidades do Design

1. Funcionalidade
2. Confiabilidade
3. Usabilidade
4. Proficiência
5. Criatividade

Funcionalidade

Fisiologia: significa atender os requisitos mais básicos do design. Exemplo: um aparelho de DVD deve, pelo menos, ser capaz de gravar e reproduzir vídeos.

Valor agregado pelo design é muito baixo.

Estabilidade

Segurança: significa estabelecer uma performance estável e consistente. Exemplo: um aparelho de DVD deve reproduzir vídeos com qualidade e o mecanismo (software/hardware) não deve apresentar defeitos.

Valor agregado pelo design é baixo.

Usabilidade

Relacionamento: significa disponibilizar uma interface simples, fácil de ser usada e que perdoe erros do usuário. Exemplo: programar um aparelho de DVD para começar a gravar um filme a uma determinada hora deve ser fácil e o sistema deve ser tolerante em relação a erros cometidos pelo usuário.

Valor agregado pelo design é moderado.

Proficiência

Estima: significa disponibilizar recursos para melhorar o modo como os usuários fazem as coisas. Exemplo: um aparelho de DVD que consiga pesquisar e gravar programas baseado em palavras chave escolhidas pelo usuário.

Valor agregado pelo design é alto.

Criatividade

Realização pessoal: é o nível na hierarquia onde todas as necessidades foram atendidas e onde as pessoas começam a interagir com o design de formas inovadoras. O design passa a ser usado para criar e explorar áreas que estendam a experiência do usuário.

Valor agregado pelo design é muito alto.

De acordo com a teoria de Maslow, as necessidades fisiológicas, as necessidades de segurança e algumas das necessidades sociais (funcionalidade, confiabilidade e usabilidade se aplicado ao design) são fatores de desmotivação. A teoria diz que a satisfação destas necessidades é básica; já a ausência da satisfação destas necessidades não motiva ninguém, pelo contrário, desmotiva.

Já as necessidades sociais, as necessidades de “status” e de estima e as necessidades de auto-realização são fortes fatores motivacionais. Ou seja, se não forem atendidas, as pessoas procuram fazer com que sejam satisfeitas; as pessoas são motivadas a alcançar a satisfação destas necessidades.

Quando se fala em design agregando valor a algum produto, serviço ou interface é preciso ter a clareza que ele terá o efeito desejado quando passar a atender os níveis mais altos da pirâmide (proficiência e criatividade).

Mas até chegar a estes níveis, os primeiros devem necessariamente ser atendidos.

por Marcos Nähr


Seja Bem-Vindo!

@andrehsantana

março 2008
S T Q Q S S D
« fev   abr »
 12
3456789
10111213141516
17181920212223
24252627282930
31  

RSS Feeds Deliciosos

  • Ocorreu um erro. É provável que o feed esteja indisponível. Tente mais tarde.

Flickr!

Cell

Dia do Design

Geometric

Logotipo Pé do Palco // 02

Logotipo Pé do Palco // 01

Mais fotos

Blog Stats

  • 239,086 hits