Web Standards

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 pedroltavares@gmail.com linkedin.com/in/pedroltavares facebook.com/pedroltavares

twitter.com/ptavares

Obrigado!