Upload
pedro-tavares
View
458
Download
2
Embed Size (px)
DESCRIPTION
Apresentação ESE Santarém - 01/04/2011
Citation preview
Boas Práticas na Construção de Sítios Web
Março 2011 Pedro Tavares
Arquitectura Design Tecnologia
I’m Lost!
O alto custo de não ser possível encontrar
informação
“The Fortune 1000 stands to waste at least $$22..55 bbiilllliioonn ppeerr yyeeaarr due to an inability to locate and retrieve information.” “While the costs of not finding information are enormous, they are hhiiddddeenn within the enterprise, and...are rarely perceived as having an impact on the bottom line.” The High Cost of Not Finding Information, IDC White Paper
Os maiores problemas na experiência de utilização da web
Resultados de pesquisa mal organizados 53% Arquitectura da Informação mal definida 32% Performance baixa 32% Homepages mal definidas 27% Terminologia confusa 25% Registo invasivo 15% Navegação Inconsistente 13%
Fonte: Vividence Research 2008
Usabilidade
“a melhor forma de os u�lizadores interagirem com a tecnologia de modo a completarem determinada acção” Zimmerman e Muraski Um interface intui�vo e manuseável na perspec�va do u�lizador
Usabilidade v.s. experiência de
utilização
“We don't just use technology, we live with it. (...) People who design, use, and evaluate interac�ve systems need to be able to understand and analyze people's felt experience with technology” (McCarthy & Wright, 2004).
Vários produtos sofrem de pouca preocupação com experiência de utilização
It’s Google!
Outros jogam com a experiência emocional
Is it for my hair? Medical experiences? Oh, i got it... It’s a.....
Muitas das nossas escolhas são baseadas não na u�lidade, ou simplicidade, mas pela sua forma, pela relação que nos liga ao objecto
How about the Web?
Yahoo! em 1996
Yahoo! em 2004
Yahoo! hoje
Porquê a usabilidade na
web?
A usabilidade regula a web: se o consumidor não descobrir o produto num site, irá à procura noutro sítio
O consumidor tem a palavra-final. Toda a concorrência está apenas a um clique!
Porquê a usabilidade na
web?
A usabilidade assumiu mais importância com a Internet Na web os consumidores experimentam primeiro e pagam depois
É necessário que exista uma preocupação no modo como os consumidores vão receber a mensagem do site
Desenvolver um website “usável” implica dominar
conceitos para lá do webdesign
Ter conhecimentos de programação e webdesign não significa que se perceba as necessidades ligadas à experiência de utilizador e à usabilidade
Um bom website requer a compreensão das
necessidades e objectivos dos utilizadores
Interacção permanente
A preocupação com a usabilidade
melhora a web
Fornece instrumentos de análise
Alarga competências
Desenvolve uma consciência crítica
Muitos projectos estão longe destas
preocupações
Mas muitos projectos web estão ainda longe destas preocupações…
Arquitectura de informação: a estrutura do site tenta reflectir o modo como a empresa está organizada
Mas muitos projectos web estão ainda longe destas preocupações…
Design: Criar páginas visualmente atractivas mas não necessariamente simples de utilizar
Mas muitos projectos web estão ainda longe destas preocupações…
Escrita Linear: utilização do estilo de escrita linear dos meios tradicionais
Mas muitos projectos web estão ainda longe destas preocupações…
Estratégia de links: “linkar para dentro”
3 níveis de Usabilidade
Design
Simplicidade (with a twist):
– Design suporta na maior parte daz vezes o conteúdo – O seu focus principal está no conteúdo – Design deve ajustar-se às várias soluções e diferenças
tecnológicas – Menus visíveis e manuseáveis – Uso de metáforas (mas com atenção a especificidades e
características do público-alvo
3 níveis de usabilidade
Design
Design
DDeessiiggnn EErrggoonnóómmiiccoo:: – Verificar distâncias de scroll – Verificar esquema de cores
3 níveis de usabilidade
Conteúdo
Conteúdo
O centro da estratégia para a web – Estudos de usabilidade revelam que muitos utilizadores
fazem um scan rápido sobre a área principal do site à procura de títulos e de outros elementos que identifiquem o propósito do site
– Necessidade de conteúdos de qualidade
A Usabilidade a 3 níveis: Conteúdo
Escrita para a web:
– Necessidade de textos breves e concisos (“pirâmide invertida”)
– Escrita para uma leitura rápida do conteúdo global – Utilização do hipertexto para dividir textos longos em
múltiplas páginas
3 níveis de usabilidade
Arquitectura da Informação
Arquitectura da Informação
Somos nós que temos de pensar o site, não o utilizador
Não há regras dogmáticas, há princípios orientadores
Arquitectura da Informação
Alguns princípios:
DDeesseennhhoo ppaarraa uummaa oorriieennttaaççããoo ssiimmpplleess:: – Onde estamos - OOrriieennttaaççããoo – Onde está a informação que o utilizador procura -
NNaavveeggaaççããoo – Como dar ao utilizador aquilo que ele procura -
HHiippeerrlliiggaaççõõeess
Arquitectura da Informação
Alguns princípios: CCoonnssiissttêênncciiaa ee ssttaannddaarrddss:: – Conhecer a concorrência antes de fazer um
site – Procurar as melhores práticas
Arquitectura da Informação
Alguns princípios:
UUttiilliizzaaddoorreess ttêêmm ddiiffeerreenntteess nníívveeiiss ddee ccoonnhheecciimmeennttooss ee ccoommppeettêênncciiaass:: – Primeira visita e utilizadores regulares – “Experts” em internet e “iniciados”
Wait! I’m outside!
Mobilidade e tudo à volta...
Um contexto imprevisível Aplicações adaptadas à
necessidade do momento Desenvolver utilizando standards
multiplataforma Tirar partido das redes sociais
existentes!
It’s an error…
Erros principais em websites
UI Wizards, Inc.:
– Conteúdo – Suporte à tarefa – Navegação – Formulários – Pesquisa – Apresentação de Texto – Apresentação de links – Design gráfico e layout
Conteúdo
Falta de identificação da homepage: O quê, como, para quem
Conteúdo
Utilizadores fazem uma visualização rápida do website: deve dizer claramente o que é o website e quais os objectivos
Conteúdo
Evitar paragrafos longos Utilizar sub-títulos, hiperligações (com pouco texto com link, listas
Elimine metade do texto e depois elimine a outra metade da metade que restou
Steve Krug, Don't Make Me Think: A Common Sense Approach to Web Usability
Conteúdo
Conteúdo por terminar: não colocar online sem ter o website finalizado. Verificar! 0.44 de 25/03/2011 24 milhões de resultados no Google em pesquisa por Lorem ipsum
Conteúdo
Perceber contexto de aplicação das mensagens
Suporte à tarefa
Requerer dados desnecessários
Necessidade de solicitar o mínimo necessário
Suporte à tarefa
Aplicação desenvolvida sobre informação irrelevante para o utilizador
Navegação
Vários tipos diferentes de navegação
Navegação
Página actual não indicada
Formulários
Parece ser texto editável mas não é
Pesquisa
Pesquisa mal categorizada e sem metadados
Necessidade de organizar a informação, indexar, perceber tendências de pesquisa,testar: recorrer às melhores práticas. Usar Google se necessário
Hiperligações
Botões difíceis de descobrir
Hiperligações
Links não visíveis
Design gráfico e layout
Principais erros:
– Texto demasiado pequeno – Esquemas de cores demasiado subtis ou invasivos – Texto centrado – Utilização de tecnologias e versões sem aviso ao
utilizador (exº Flash) – Desrespeito por regras de acessibilidade
Design gráfico e layout
Design gráfico e layout
Design gráfico e layout
So, now let’s build a website
Construir um website
1. Pensar o projecto – conhecer o mercado, saber que tipo de projecto pretendemos
2. A arquitectura da informação: construir a estrutura do website; ou o storyboard
3. Desenvolver blocos de informação – wireframes 4. Design: conceber a maquete, receber feedback 5. Testar (actividade contínua) 6. Desenvolver 7. Testar (actividade contínua)
Voltar ao princípio: um website é sempre versão Beta!
2. Arquitectura da Informação
HHiieerraarrqquuiiaa: taxionomias, top levels, modelo mental (também por associações
BBaasseess ddee ddaaddooss: contexto estruturado com relações HHiippeerrtteexxttoo: referências cruzadas, contextual
hierarquia
Base de dados
hipertexto
2. Arquitectura da
Informação Esquemas de organização
EExxaaccttoo Tudo tem o seu lugar Fácil para criar e manter Exº páginas amarelas, geografia,
cronologia AAmmbbíígguuoo Difuso e com sobreposições Difícil de criar e manter Bom para a aprendizagem Exº tópicos, discussão de audiência
2. Arquitectura da Informação
Estrutura do site
2. Arquitectura da Informação
um storyboard
Reflectir, analisar, conhecer as melhores práticas Conhecer os problemas ajuda a novos e melhores desenvolvimentos
3. Conceber blocos de
informação - Wireframes
4. Construir a maquete,
receber feedback
5. Testar! 6. Desenvolver 7. Testar (e voltar a testar)
Em resumo
Perceber os objectivos e a lógica do negócio Perceber os objectivos do utilizador Conhecer o medium em que trabalhamos, as características e especificidades Trabalhar com standards Primeiro pensar, desenhar depois Testar, testar, testar!
Some ideas
Be creative, innovate
Think before you design
Stay updated
You are what you share (Charles Leadbeater)
Think before you design
This is teamwork
Next year everything will be new (or not…)
Onde posso saber mais
Mais Info
Mais Info
Asilomar Ins�tute for Informa�on Architecture h�p://aifia.org/ Bloug h�p://louisrosenfeld.com/home/ Boxes & Arrows h�p://www.boxesandarrows.com/ Findability.org h�p://findability.org/ Iawiki h�p://www.iawiki.net/IAwiki Seman�cs h�p://seman�cstudios.com/publica�ons/seman�cs/ www.useit.com www.iaslash.org Update yourself @ Techcrunch.com Thenextweb.com Engadget.com Mashable.com
Keep it social: 11frames.com I [email protected] linkedin.com/in/pedroltavares facebook.com/pedroltavares
twitter.com/ptavares
Obrigado!