98
Boas Práticas na Construção de Sítios Web Março 2011 Pedro Tavares

Web Standards

Embed Size (px)

DESCRIPTION

Apresentação ESE Santarém - 01/04/2011

Citation preview

Page 1: Web Standards

Boas Práticas na Construção de Sítios Web

Março 2011 Pedro Tavares

Page 2: Web Standards

Arquitectura Design Tecnologia

Page 3: Web Standards

I’m Lost!

Page 4: Web Standards

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

Page 5: Web Standards

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

Page 6: Web Standards

Usabilidade

Page 7: Web Standards

“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

Page 8: Web Standards

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).  

Page 9: Web Standards

Vários produtos sofrem de pouca preocupação com experiência de utilização

It’s  Google!  

Page 10: Web Standards

Outros jogam com a experiência emocional

Is  it  for  my  hair?    Medical  experiences?    Oh,  i  got  it...  It’s  a.....  

Page 11: Web Standards

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

Page 12: Web Standards

How about the Web?

Page 13: Web Standards

Yahoo!  em  1996  

Page 14: Web Standards

Yahoo!  em  2004  

Page 15: Web Standards

Yahoo!  hoje  

Page 16: Web Standards

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!

Page 17: Web Standards

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

Page 18: Web Standards

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

Page 19: Web Standards

Um bom website requer a compreensão das

necessidades e objectivos dos utilizadores

Interacção    permanente  

Page 20: Web Standards

A preocupação com a usabilidade

melhora a web

Fornece instrumentos de análise

Alarga competências

Desenvolve uma consciência crítica

Page 21: Web Standards

Muitos projectos estão longe destas

preocupações

Page 22: Web Standards

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

Page 23: Web Standards
Page 24: Web Standards

Mas muitos projectos web estão ainda longe destas preocupações…

Design: Criar páginas visualmente atractivas mas não necessariamente simples de utilizar

Page 25: Web Standards
Page 26: Web Standards

Mas muitos projectos web estão ainda longe destas preocupações…

Escrita Linear: utilização do estilo de escrita linear dos meios tradicionais

Page 27: Web Standards
Page 28: Web Standards

Mas muitos projectos web estão ainda longe destas preocupações…

Estratégia de links: “linkar para dentro”

Page 29: Web Standards
Page 30: Web Standards

3 níveis de Usabilidade

Page 31: Web Standards

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

Page 32: Web Standards

3 níveis de usabilidade

Design

Page 33: Web Standards
Page 34: Web Standards
Page 35: Web Standards
Page 36: Web Standards

Design

DDeessiiggnn EErrggoonnóómmiiccoo:: –  Verificar distâncias de scroll –  Verificar esquema de cores

Page 37: Web Standards
Page 38: Web Standards
Page 39: Web Standards

3 níveis de usabilidade

Conteúdo

Page 40: Web Standards

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

Page 41: Web Standards

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

Page 42: Web Standards
Page 43: Web Standards
Page 44: Web Standards

3 níveis de usabilidade

Arquitectura da Informação

Page 45: Web Standards

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

Page 46: Web Standards

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

Page 47: Web Standards

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

Page 48: Web Standards
Page 49: Web Standards
Page 50: Web Standards

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”

Page 51: Web Standards
Page 52: Web Standards
Page 53: Web Standards

Wait! I’m outside!

Page 54: Web Standards
Page 55: Web Standards
Page 56: Web Standards

Mobilidade e tudo à volta...

Um contexto imprevisível   Aplicações adaptadas à

necessidade do momento   Desenvolver utilizando standards

multiplataforma   Tirar partido das redes sociais

existentes!

Page 57: Web Standards

It’s an error…

Page 58: Web Standards

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

Page 59: Web Standards

Conteúdo

Falta de identificação da homepage: O quê, como, para quem

Page 60: Web Standards

Conteúdo

Utilizadores fazem uma visualização rápida do website: deve dizer claramente o que é o website e quais os objectivos

Page 61: Web Standards

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    

Page 62: Web Standards

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

Page 63: Web Standards

Conteúdo

Perceber contexto de aplicação das mensagens

Page 64: Web Standards

Suporte à tarefa

Requerer dados desnecessários

Necessidade de solicitar o mínimo necessário

Page 65: Web Standards

Suporte à tarefa

Aplicação desenvolvida sobre informação irrelevante para o utilizador

Page 66: Web Standards

Navegação

Vários tipos diferentes de navegação

Page 67: Web Standards

Navegação

Página actual não indicada

Page 68: Web Standards

Formulários

Parece ser texto editável mas não é

Page 69: Web Standards

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

Page 70: Web Standards

Hiperligações

Botões difíceis de descobrir

Page 71: Web Standards

Hiperligações

Links não visíveis

Page 72: Web Standards

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

Page 73: Web Standards

Design gráfico e layout

Page 74: Web Standards

Design gráfico e layout

Page 75: Web Standards

Design gráfico e layout

Page 76: Web Standards

So, now let’s build a website

Page 77: Web Standards

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!

Page 78: Web Standards

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  

Page 79: Web Standards

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

Page 80: Web Standards

2. Arquitectura da Informação

Estrutura do site

Page 81: Web Standards

2. Arquitectura da Informação

um storyboard

Page 82: Web Standards

Reflectir, analisar, conhecer as melhores práticas Conhecer os problemas ajuda a novos e melhores desenvolvimentos

Page 83: Web Standards

3. Conceber blocos de

informação - Wireframes

Page 84: Web Standards

4. Construir a maquete,

receber feedback

Page 85: Web Standards

5. Testar! 6. Desenvolver 7. Testar (e voltar a testar)

Page 86: Web Standards

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!

Page 87: Web Standards

Some ideas

Page 88: Web Standards

Be creative, innovate

Page 89: Web Standards

Think before you design

Page 90: Web Standards

Stay updated

Page 91: Web Standards

You are what you share (Charles Leadbeater)

Page 92: Web Standards

Think before you design

Page 93: Web Standards

This is teamwork

Page 94: Web Standards

Next year everything will be new (or not…)

Page 95: Web Standards

Onde posso saber mais

Page 96: Web Standards

Mais Info

Page 97: Web Standards

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        

Page 98: Web Standards

Keep it social: 11frames.com I [email protected] linkedin.com/in/pedroltavares facebook.com/pedroltavares

twitter.com/ptavares

Obrigado!