Mostrando postagens com marcador palestras. Mostrar todas as postagens
Mostrando postagens com marcador palestras. Mostrar todas as postagens

27/06/2009

Webstandards melhorando a experiência do usuário


Instruções sobre webstandards , técnicas de codificação, como dar mais ênfase a sua acessibilidade beleza e usabilidade dentro de seus padrões. junto com esta matéria, também um slide.




Muitos desenvolvedores já adotaram os Webstandards, mas seguem apenas os padrões que beneficiam a produção das páginas. Existem técnicas de codificação que podem aumentar a acessibilidade, a usabilidade e a beleza das páginas, mas elas não estão muito difundidas.






slide




Tópicos e referências



* O que é webstadards

* Como são elaborados os Webstandards?


o W3C


* Os Webstandards, em última análise, devem beneficiar o usuário

* Separação entre conteúdo, apresentação e comportamento [ infográfico ]


o Código mais organizado, mais fácil de manter

o Diferentes arquivos de CSS para diferentes mídias: monitor, PDA, impressora, áudio [ tutorial ]

o Melhor indexabilidade em buscadores como o Google


* Recomendações baseadas nos padrões e na experiência de diversos autores

* Metadados


o Defina o seu DOCTYPE [ importância ]


+ Renderiza mais rápido

+ Padroniza renderização


o Declarando o idioma do texto [ aprofundamento ]


+ Essencial para a sintetização

+ Facilita indexação

o Ligue o documento a documentos relacionados. [ referência ] [ elocubração ]

+ Link rel (next, prev, index, start, author, copyright )


o Escreva títulos descritivos e sucintos para cada página


+ descritivo

+ não usar palavras-chave genéricas [ discussão ]

+ começar com o conteúdo


o Utilizar as tag certas [ importância ]

o Comente seus códigos [ aprofundamento ]


+ O código CSS tb é uma interface com usuários

+ Superespecificar


* Layout

o Evite usar tabelas para marcar layout [ introdução ]


+ Renderiza somente depois de carregadas as tabelas

+ Não se adapta facilmente


o Faça seu layout funcionar em diferentes resoluções [ lista de email ]

o Defina uma largura máxima para a coluna principal de texto [ argumentos científicos ]

o Ofereça layouts alternativos para o usuário [ tutorial ]

o Evite usar iframes


+ Use DIVs com overflow


o Evite colorir as barras de rolagem [ discussão ]


* Tipografia

o Prefira tamanhos de fonte relativos

o Use fontes incomuns, desde que com alternativas padrão [ pesquisa ]

o Substituir texto somente quando for impreencindível [ discussão ]


+ SFIR


o Aproveite o espaçamento entrelinhas e entreletras para aumentar a legibilidade [ chacota ]


* Navegação

o Mantenha o mesmo código de invólucro para conteúdo através das páginas do site [ exemplo ]


+ Ilusão de que não carregou nova página


o Evite submenus voadores horizontais só com CSS [ bom exemplo / mau exemplo ]

o Não quebre o botão voltar do navegador quando a gente mais precisa dele [ solução1 | solução2 ]

o Forneça um link para pular direto para o conteúdo [ aprofundamento ]

o Controle a ordem da navegação com a tecla tab.


* Formulários

o Associe o rótulo com o elemento de formulário. [ discussão ]

o Posicione os rótulos acima das caixas de entrada de texto. [ pesquisa científica ]

o Formulário Acessível ou Usável?


* Dimensões da Linguagem [ elocubração ]

o Sintática - regras da linguagem

o Semântica - significados da linguagem

o Pragmática - efeitos da linguagem


* Ferramentas essenciais

o Internet Explorer

o Barra Webaccessibilty

o Firefox

o Extensão Aardvark

o Barra Webdeveloper

o Opera

o Opera Mini Simulator


Fonte: usabilidoido.com.br


Como fazer um briefing de website


Para escrever um bom briefing, é preciso certa experiência, saber o que é um briefing. Briefar não é somente preencher um formulário com os dados do cliente e da peça a ser produzida para servir de contrato entre designer e cliente, mas sim uma atividade de projeto..




Para decidir o que entra no briefing, é preciso pesquisar, refletir e negociar. O briefing vai guiar todo o projeto, ele não pode ser considerado uma ferramenta trivial. Mesmo que o briefing não seja oficializado, escrito ou assinado, ainda assim as decisões de design que ele costuma encerrar estarão nas mentes, nas conversas e nos papéis das pessoas que participam do projeto.
Definição do objeto


Esta é a parte mais delicada do briefing. Se fechar demais a definição do objeto, poderá ficar preso a elas até o final do projeto, mesmo que se constate depois que não são ideais; se for muito genérico na definição, pode deixar o projeto sem rumo, divagando em possibilidades infinitas sem sair do lugar.


A melhor estratégia que encontrei até agora foi definir o tipo de objeto (website, hotsite, CD-Rom, animação e etc) e agregar apenas as características que a pesquisa inicial indicar como interessantíssimas. O segredo é saber escolher as características que vão transmitir a sensação ao leitor do briefing de que ele sabe do que se trata e que isso é uma boa coisa.


Pesquisa



Fazer pequenas pesquisas não leva muito tempo. Navegar pelos websites da concorrência e anotar o que estão fazendo de bom ou de ruim é o primeiro passo para definir o diferencial do projeto. Conhecer melhor a empresa já é uma obrigação mesmo, então não custa anotar o seu diferencial competitivo. O público-alvo às vezes parece óbvio, mas nunca se sabe com certeza que grupo de pessoas vai se interessar pelo serviço que será disponibilizado. Por isso, o designer tem que estar a par dos costumes das principais perfis de usuários da Internet da região. Tem gente que acessa para jogar, xeretar a vida alheia (blogs e afins), consumir pornografia, obter informações, procurar emprego, pesquisar e uma infinidade de outras atividades.


Conhecendo bem a tribo a que o usuário-alvo faz parte, fica bem mais fácil projetar. Se isso for possível, uma visita a um local onde hajam potenciais usuários do website já é suficiente para ambientar o designer. Imagine ir a um baile da terceira idade antes de projetar um website de um retiro? Emocionante não? Claro que não para o designer, mas sim para os velhinhos! Se o designer se coloca no lugar dos usuários, percebe que o que é feio para ele, é bonito para outros. Texto em fonte Verdana 18px é horrível para a maioria dos designer que conheço, mas para os idosos é ótimo!


Caso o artefato interativo seja usado numa situação específica, dados sobre esta serão de grande valia para o designer. Saber que o artefato será usado principalmente em ambiente coorporativo de escritório já deixa o designer com um pé atrás para usar sons. Se o ambiente for uma fábrica barulhenta, som será completamente inútil. Porém, no aconchego do lar, ele pode ser muito agradável caso seja associado ao entretenimento. Cyber-cafés e Lans-house equipadas com fones de ouvido também são propícias ao bom som, é claro. No entanto, esses lugares podem não ser muito bem iluminados, o que torna os contrastes mais fortes no monitor. Existem muitos fatores ergonômicos que podem influenciar o uso de um software ou website específico e, caso sejam recorrentes na situação de uso almejada, o projeto deve se adaptar a eles.


No caso de design de aplicações, a visita pode ser menos recreativa. Análises de tarefas e de workflow podem ser um tanto cansativas, mas são muito, muito valiosas quando a aplicação apresentar complexidade. Esse tipo de análise pode acontecer numa fase posterior ao briefing, mas antes de sair a campo é possível esboçar um fluxo de interação geral entre as pessoas que vão usar o sistema com base nas conversas iniciais com os clientes.


O tempo todo em que o designer estiver no local da situação, deve aproveitar para observar como as pessoas se comunicam. Não é necessário incorporar todo o vocabulário utilizado, mas certas palavras podem tornar a interface familiar. Também é interessante notar como outras mídias se comunicam com essas pessoas. Folderes, cartazes, outdoors, propagandas televisivas e jornais de áreas específicas devem ser analisados com carinho pelo designer. Que imagens são frequentes? Que ideologias estão por trás delas? Que valores são priorizados?


Comparar os websites que esse pessoal acessa com frequência, é mais interessante ainda. É possível identificar padrões, os clichês que funcionam e os batidos demais e aplicar ou não diretamente no design. Não que ele deva reproduzir somente o lugar-comum, mas deve ter elementos familiares aos usuários. Reproduzir o lugar-comum é fácil para o designer, mas buscar uma identidade única sem estraçalhar com os padrões estabelecidos é uma tarefa muito mais instigante. É como estar no limiar, tentando inovar mas sem colocar o carro na frente dos bois. Ser 100% correto não é possível na prática, mas o Zen nos ensina que devemos ser pelo menos 99%. O que vale é a intenção, ou melhor, o que vale é o retorno que o design vai dar.


Objetivos



O que se pretende comunicar? Vender um skate e acessórios? Apresentar dados demográficos da população brasileira? Mostrar que o filme "X" vale à pena assistir? Essa informação não precisa nem ser oficializada, desde que o cliente deixe bem claro o que quer para o designer. Entretanto, ela vai martelando na mente do designer até o final do projeto. Será seu norte, a base mais elementar para qualquer decisão do design. Assim como na programação orientada a objetos, todos os objetivos secundários do projeto herdarão a constituição do objetivo principal.


O objetivo deve ser claro e conciso, mas não pode lhe faltar especificidade, do contrário não tem utilidade. De que adianta ter como objetivo de um website "fornecer informações a quem se interessar por elas"? Qualquer website pode fazer isso, no entanto, cada website faz isso de forma diferente, pois existe uma intenção por trás do fornecimento de informações. O cliente pode dizer que o objetivo do website é "transmitir informações sobre os carros que sua empresa vende", mas isso não é o que a empresa realmente quer obter. O que a empresa quer é vender carros, mesmo que o website sirva apenas para influenciar um ato posterior de compra. "Vender carros" é o verdadeiro objetivo do website. As informações que serão transmitidas serão meros argumentos para convencer o consumidor.


Para atingir esse objetivo, a mensagem principal que deve ser transmitida é "os carros da nossa marca são os melhores para você". Não importa que informações serão utilizadas como argumento, a mensagem é a mesma. Como as possibilidades de argumentação são grandes, é interessante deixar documentada essa mensagem, de preferência no briefing do projeto ou em outros documentos primários, para que a imaginação não divague demais.


Aplicações também transmitem mensagens principais, embora não sejam tão explícitas. O anti-virús precisa transmitir a sensação de segurança; o Mozilla Firefox precisa mostrar que é melhor que o Internet Explorer sem ser muito diferente; e o Google precisa conquistar a confiança de que pode encontrar qualquer coisa.


Retorno do investimento



Você sabe o quanto vale o seu trabalho? Vale mais ou menos a metade daquilo que seu cliente vai ganhar com ele a curto prazo. Se o lucro almejado pelo cliente é grande, então o orçamento pro design deve ser grande, oras. No Brasil, é comum fazer das tripas coração no desenvolvimento de websites com os orçamentos apertados e os prazos curtos, mas é difícil alguém saber o quanto o cliente está lucrando com isso. Por isso, é interessante tanto para a equipe que desenvolve o projeto quanto para o cliente, calcular o Retorno do Investimento (ROI - Return On Investment).


O Retorno do Investimento é uma estimativa objetiva dos lucros que o projeto trará. Alguns tipos de retornos comums são:



* corte nos custos

* maior participação no mercado (market-share),

* maior conscientização da marca (branding awareness)

* aumento direto nas vendas

* influência na decisão de compra

* aumento de produtividade

* aumento de audiência

* atração de nova audiência

* fidelização da audiência

* aumento da credibilidade do negócio

* aumento da satisfação subjetiva



Para definir o Retorno, basta reunir-se com os representantes da empresa e discutir o que se almeja e o que é viável obter com o orçamento destinado. Esse processo deve ser muito bem documentado já que, se o Retorno for alcançado, ele servirá como excelente argumento de venda dos seus serviços de design.


Entretanto, não adianta calcular antes e não verificar qual foi o Retorno concreto depois da execução do projeto. O cliente fornecerá os dados facilmente se ele estiver empolgado com o resultado. Do contrário, pode ficar a cargo da equipe do design checar isso. Vale à pena não só pelo valor comercial que esses dados tem, mas também pela gratificação ao designer responsável; faz bem para sua auto-estima.


Metodologia



Até aqui maravilhoso, mas é preciso cair na real e dizer como tudo isso vai acontecer. Descrever a metodologia dá grande credibilidade ao projeto, mas é preciso segui-la depois. Se comprometer com as ferramentas tecnológicas a serem empregadas no projeto também é complicado, mas pode ser necessário.

Nesse ponto não posso dar muitas mais recomendações, pois a forma de proceder estará determinada pelos elementos acima citados.


Uma ressalva



Esses eram os pontos que eu costumava pensar até alguns meses atrás em projetos tradicionais. Recentemente, estou tentando reduzir os pré-conceitos antes de ter contato com a realidade na própria situação de uso. Para entrar de cabeça no design participativo que acredito ser crucial para a Web 2.0, é preciso estar preparado para trabalhar sem briefing, do contrário fecha-se ou induz a participação das pessoas dentro daquilo que se quer obter delas. Se é pra participar, que seja participação pra valer!



Fonte: usabilidoido.com.br


Usabilidade na Acessibilidade


Usabilidade na Acessibilidade é um ponto de extrema importância com certeza, pensando nessa prática repasso a vocês esta excelente matéria sobre tal tópico citado.

O princípio básico da Web é acesso por qualquer tipo de pessoa, em qualquer lugar, mas são poucos os websites que seguem esse princípio. Ora por incompetência técnica, ora por desinteresse comercial, a maioria dos criadores de websites ignoram boas práticas que viabilizam o acesso à informação (acessibilidade) e seu uso (usabilidade)....




Essa palestra explica como conciliar princípios de acessibilidade e usabilidade que beneficiem os usuários no projeto de websites.



::Tópicos



* Acessibilidade e usabilidade são condições básicas para a inclusão social digital.

* "O poder da web está em sua universalidade. Ser acessada por todos, independente de deficiência, é um aspecto essencial." Tim Berners-Lee, diretor do W3C e inventor da World Wide Web.

* Acessibilidade na Web

# Acessibilidade é a flexibilidade do acesso às funcionalidades de um determinado produto ou local. Se um produto ou local é acessível, então ele permite que pessoas com necessidades especiais, seja por deficiência ou por limitações dos meios utilizados, utilizem-no para seus fins.

# Quem precisa de acessibilidade? Exemplos de pessoas com necessidades especiais

# Excluir essas pessoas é desperdício social e econômico

# Como tornar websites acessíveis?



o Conhecendo as necessidades especiais

o Seguindo os Padrões Web

o Seguindo as diretrizes da WCAG

o Escrevendo texto preciso e conciso

o Testando em situações reais



# Usabilidade na Web



* Usabilidade é sinônimo de facilidade de uso.

Se um produto é fácil de usar, o usuário tem maior produtividade: aprende mais rápido a usar, memoriza as operações e comete menos erros.

* Quem precisa disso? Exemplos de pessoas que usam a Web em situações críticas

* Tratar mal essas pessoas é um desrespeito tremendo

* Como tornar websites usáveis?



o Conhecendo os usuários e o contexto de uso

o Priorizando pessoas ao invés de tecnologias

o Seguindo padrões de interação

o Seguindo recomendações de pesquisadores

o Comunicando claramente

o Testando em situações reais



# Usabilidade versus Acessibilidade



* Design Universal: uma solução para todos.

* Design Contextual: uma solução que atende apenas uma situação específica

* Pontos fracos do movimento de Acessibilidade


o Carência de métodos de pesquisa.

o Apego excessivo à diretrizes.

o Tecnocentrismo.

o Desconsideração de aspectos subjetivos da experiência de uso.



* Pontos fracos do movimento de Usabilidade



o Exclusão de deficientes em pesquisas com usuários.

o Consideração da Acessibilidade como um serviço extra.

o Desconsideração do valor de mercado da Acessibilidade.

o Desconsideração de aspectos subjetivos da experiência de uso.



# Design é justamente a conciliação de variáveis como essas

# Princípios para o Design de Interação



* Simplicidade: Menos é mais.

* Empatia: Sentir o que o usuário sente.

* Estética: Fazer o usuário se sentir bem.

* Imersão: Criar experiências fluidas.









slide



Fonte: usabilidoido.com.br



Padrões Web (webstandards)


Uma matéria importantíssima sobre os padrões a serem seguidos, são os padrões webstandars. O conhecimento dos Webstandards ou Padrões Web permite a implementação de layouts em HTML muito mais fácil e rapidamente...



O conhecimento dos Webstandards ou Padrões Web permite a implementação de layouts em HTML muito mais fácil e rapidamente. A separação dos códigos que definem a apresentação (CSS), o conteúdo (HTML) e o comportamento (DOM) oferece as seguintes vantagens:

* manutenção mais fácil

* tamanho do arquivo menor (economia de banda e velocidade no carregamento)

* maior acessibilidade para o usuário

* compatibilidade com diferentes navegadores

Ao invés de recomeçar do zero para aprender essa nova forma de codificação, é possível uma transição suave. O código vai aos poucos ficando mais limpo e bem escrito, até chegar ao webstandards ideal.





slide


segue abaixo o áudio desta palestra, podendo ser tocado ao assistir os slides da palestra do link acima.

áudio da palestra

Fonte: usabilidoido.com.br


texto completo aqui.



Concurso peixegrande


O Concurso Peixe Grande está premiando todos os vencedores gerais da classificação júri técnico. Veja a matéria completa...




Esse ano, as agências estão concorrendo ao valor de 10 mil reais! Já na categoria profissional freelancer, o prêmio será um notebook e se você é um blogueiro, poderá ganhar uma câmera digital! Vai ficar de fora dessa? Confira o regulamento www.peixegrande.com.br e inscreva-se já!

visite também.

http://arteccom.com.br/