Este projecto tinha como objectivo levar a Internet para a TV (no formato widget) de modo a facilitar o acesso aos conteúdos web usando o principal objecto de interacção familiar em casa, a TV.

Além dos widgets, o MEO Interactivo inclui também uma espécie de App Store ou Marketplace onde o utilizador pode escolher os widgets que quer correr ou adicioná-los aos favoritos. Os widgets favoritos passam a poder ser acedidos através da tecla azul do telecomando directamente por cima da transmissão de TV.

Prototipagem

Como normalmente acontece, antes de começar a desenhar os interfaces é necessário estudar a plataforma (neste caso, desenhar para a TV é muito diferente e muito mais limitativo do que desenhar para a web) e a forma como a interacção iria ser feita (ecrãs, workflows, navegação, etc).

Em baixo, alguns exemplos dos esboços iniciais feitos apenas com papel e lápis:

Um dos principais problemas que encontrámos inicialmente foi com a tecla “back” do telecomando. Muitas pessoas desconhecem a existência dessa tecla (muito por culpa da sua má localização no comando e má iconografia) e usam outros atalhos para sair dos menus (ex: clicar 2x na tecla “menu”). Com base nesta limitação, foi criado um modelo de navegação que funcionaria apenas usando as setas (cima, baixo, esquerda, direita), em que a tecla “esquerda” serviria para voltar atrás, e a tecla “direita” serviria para seguir em frente.

Wireframes

Depois de várias reuniões e fechados os protótipos, passou-se para a fase de desenho dos wireframes.

Para desenhar os wireframes já é preciso ter uma noção das dimensões do ecrã e dos elementos que lá vão ser colocados. Apesar de hoje em dia a maior parte das TV já serem em alta definição (HD ou HD Ready), este sistema deveria funcionar em qualquer TV, e isso significa que um ecrã tem de funcionar igualmente bem numa resolução de 1080p como numa de 480p.

E depois há o problema das margens de segurança que é necessário ter quando estamos a trabalhar com TVs antigas com ecrãs CRT.

Em baixo, um exemplo de wireframes para o Marketplace (com as margens de segurança) e para uma Widget de meteorologia.

Desenvolvimento e Implementação

Depois dos wireframes finalizados e de mais algumas reuniões com a equipa de desenvolvimento onde foi discutida a viabilidade técnica das soluções apresentadas, passou-se finalmente ao desenvolvimento e design final da plataforma.

A fase de design também foi acompanhada de perto uma vez que algumas das soluções apresentadas em wireframe poderiam necessitar de ser reajustadas de modo a adaptarem-se a um ecrã real de TV (no wireframe não temos noção de todas as limitações a que estamos sujeitos numa TV) e só depois de testes reais com o comando e com a interacção é que se chegou ao design final.

E aqui está ele, disponível usando a tecla azul do telecomando do MEO (poderá ser necessário fazer restart à box para a actualizar). Em baixo alguns exemplos do resultado final:

A barra dos widgets favoritos (o primeiro item dá acesso ao MEO Interactivo, nome de código Marketplace, onde se podem correr outros widgets ou fazer a gestão dos favoritos):

A widget de meteorologia:

Uma das secções (entretenimento) do MEO Interactivo onde é possível navegar por todas as widgets disponíveis:

E finalmente a ordenação de widgets na barra de favoritos:

Esperemos que gostem, e no futuro poderá ser possível adicionar mais widgets ao MEO Interactivo (ainda não confirmado), quem sabe se não poderá ser a vossa própria widget

NOTA: Este artigo foi escrito também no blog SAPO UX

Ao contrário dos dois primeiros dias, dedicados a workshopws, o terceiro e último dia da UX Lx foi dedicado a pequenas palestras (talks) de 40 minutos cada.

De manhã

A primeira talk do dia foi “Upgrade your Mandate“, por Peter Merholz em que foram mencionadas as vantagens de ter uma equipa/empresa completamente focada no utilizador/cliente e na melhoria contínua da experiência que o seu utilizador/cliente tem ao usar os serviços prestados. No fundo, um cliente satisfeito é um cliente que volta a comprar connosco e ajuda a espalhar a palavra de que o nosso serviço é bom.

A segunda talk, por Bill Scott foi “Designing with Lenses: Lessons from Other Design Crafts“. Esta talk seguiu a mesma onda da workshop do dia anterior e basicamente foram mostrados alguns exemplos de boas e más práticas para o design de interfaces ricas.

A terceira talk foi “Designing for (and with) New Technologies“, por Dan Saffer. Aqui foram discutidas as preocupações que devem ser tidas em conta no desenvolvimento de interfaces em novas plataformas ou tecnologias. Além do interface é importante que o modo de interacção seja também ele intuitivo de modo a que a nova plataforma/tecnologia não seja só por si uma barreira ao uso do sistema. Um dos exemplos mostrados foi uma forma de controlar a televisão usando apenas gestos com as mãos e as dificuldades que isso implica quando alguém gesticula os braços sem querer interagir com a mesma. Ou seja, o interface deve ajudar a usar o sistema e não deve ser um estorvo quando o utilizador quer realizar outras acções que não estão relacionadas com o uso desse sistema.

A quarta e penúltima talk da manhã foi “Design Games“, por Donna Spencer. Aqui foi apresentada uma metodologia interessante de potenciar a comunicação e a partilha de informação entre os vários membros da mesma equipa usando uma espécie de jogo. Durante esta talk, ela conseguiu que as cerca de 400 pessoas que estavam a assistir à talk interagissem entre si para gerar ideias para um problema apresentado. Será certamente uma metodologia a experimentar no futuro

A última talk da manhã foi “First Person User Interfaces“, por Luke Wroblewski e aqui foram mostradas as vantagens de usar interfaces de realidade aumentada, ou seja, interfaces em que o utilizador interage com o mundo à sua volta. Alguns exemplos práticos e que já existem hoje em dia são aplicações para smartphones (ex: Layar ou Yelp) que fazem uso da câmara de filmar de modo a que o utilizador possa interagir com o que está à sua volta. Por exemplo, apontando a câmara para um edifício histórico é possível interagir com a imagem de modo a saber mais informações sobre o edifício (ex: Wikipedia) ou ver fotos de outras pessoas (ex: Flickr) desse mesmo edifício.

À tarde

A primeira talk da tarde foi “The Lazy Person’s Guide to a Better World: Advantages of Doing The Least You Can Do“, por Steve Krug. Nesta talk foi salientada a importância de nos focarmos nos dois ou três maiores problemas de usabilidade encontrados e centrar os nossos esforços na sua resolução. O que muitas vezes se faz é resolver os problemas mais pequenos, porque são mais fáceis e rápidos de resolver, mas os maiores problemas vão continuando a existir. No fundo, em cada iteração só se resolvem os problemas mais críticos, e devem ser feitas iterações constantes ao longo da vida do projecto/serviço para ter um processo de melhoria contínua.

A segunda talk, por Eric Reiss foi sobre “Killer content or content that kills?“. Esta foi certamente uma das talks mais animadas do dia (juntamente com a última, de Jared Spool). Nesta talk foi abordada a importância dos conteúdos num website. Sem os conteúdos ninguém visitaria o website, por isso eles são o componente mais importante do mesmo. Da mesma forma, os conteúdos mais importantes devem ser mostrados no topo da página, enquanto que os menos importantes devem ir mais para baixo na hierarquia. O que acontece com muitos dos websites actualmente é que a zona mais importante da página está ocupada com uma imagem enorme que não fornece nenhuma informação adicional, enquanto que os conteúdos são empurrados para baixo, tornando-se muitas vezes invisíveis.

A terceira talk da tarde foi “The Next ten Years“, por Brian Fling. Nesta talk Brian falou da importância de traçar metas para o futuro de modo a acompanhar a evolução da tecnologia. Hoje em dia, nem mesmo as maiores empresas conseguem responder à pergunta sobre o que estarão a fazer daqui a 10 anos (ou 5 anos ou até mesmo daqui a 1 ano). Ao responder a esta pergunta poderemos guiar e centrar os nossos esforços no desenvolvimento de algo que deverá acompanhar a inovação tecnológica, ao mesmo tempo que fornece uma experiência consistente ao longo do tempo.

A quarta talk foi “Neuro Web Design: What makes them click?“, por Susan Weinshenk que nos falou da forma como o cérebro humano toma decisões. Muitas das vezes é o cérebro mais primitivo que toma a decisão da realização de uma acção. Uma vez que o nosso cérebro primitivo tem um processamento mais básico e rápido, ele responde de forma diferente a diferentes estímulos. Por outro lado, a parte racional do cérebro analisa em mais detalhe o meio envolvente e toma decisões mais elaboradas. Ao navegar num website, há certas decisões que são tomadas por impulso pelo cérebro primitivo e há várias técnicas e metodologias de mostrar um conteúdo de forma a activar essa parte do cérebro e levar o utilizador a tomar decisões de forma mais rápida e intuitiva (muita na onda do “don’t make me think”).

A quinta e penúltima talk da tarde foi “Designing for User Performance and User Success“, por Larry Constantine em que salientou a importância de desenvolver soluções focadas na actividade do que nos utilizadores em si. Aqui a ideia é que ao desenhar um melhor processo ou workflow, melhora-se também a forma como os utilizadores o executam. É algo controverso, mas é um ponto de vista válido porque a actividade é aquilo que o utilizador executa no sistema, por isso ao analisar a actividade temos também que analisar o comportamento dos utilizadores.

Finalmente, a última talk do dia e do evento foi “The Dawning of the Age of Experience“, por Jared Spool. A par com a talk de Eric Reiss, foi uma das mais animadas do dia, o que ajudou a terminar a UX Lx em grande. Essencialmente, Jared falou-nos da importância de uma equipa multi-disciplinar a trabalhar no desenvolvimento de um website e como hoje em dia as equipas são cada vez mesnores, mas os requisitos são cada vez maiores, o que leva a que cada pessoa tenha que ter cada vez mais “skills” e conhecimentos sobre várias áreas distintas. Desta forma, começamos a ter equipas multi-disciplinares de pessoas com conhecimentos multi-disciplinares.

Em Conclusão

Foi um evento excelente e a organização está de parabéns. Espero sinceramente que para o ano se consiga repetir o mesmo (e no ano a seguir e no outro também) com oradores da mesma qualidade e gabarito. Não é todos os dias que se consegue juntar tanto talento junto, especialmente focado em usabilidade e user experience a um preço razoável.

O dia 2 da UX Lx foi, na minha opinião, bastante melhor do que o primeiro. Aqui está um resumo do que aconteceu:

Workshop 1

O segundo dia na UX Lx começou de forma excelente com o workshop “Designing for Content-Rich Websites” apresentado por Jared Spool. Foi o melhor workshop a que assisti nesta conferência muito por culpa das excelentes capacidades de comunicação do Jared Spool e porque continha também vários exemplos (bons e maus) da vida real.

Essencialmente, neste workshop aprendemos a importância das páginas de conteúdos (e as várias formas de lá chegar). Consequentemente, a homepage é considerada como a página menos importante de um website porque serve apenas como ponto de passagem para aquilo que o utilizador realmente quer ver, os conteúdos.

Uma das frases que mais foi dita foi: “the back button is the button of doom” porque basicamente significa que a navegação do site não foi pensada da melhor maneira porque se o utilizador seguiu um link errado numa página, o facto de voltar atrás (usando o botão “back” do browser) não significa que ele vá encontrar um link melhor na página anterior, onde já tinha estado, para alcançar o seu objectivo. Há até alguns estudos que comprovam isto: se a navegação da página tiver os links correctos (com as palavras chave certas) há uma probabilidade de sucesso de 55% de alcançar o objectivo, enquanto que nos casos em que o utilizador tenta vários links e usa o botão “back” para voltar atrás, a percentagem de sucesso baixa até aos 11% (não tenho bem a certeza dos números exactos porque não os anotei, mas andam à volta destes valores).

Open Sessions

Depois do almoço fui assistir a mais duas Open Sessions e hoje foram bem mais interessantes do que as que tinha assistido ontem.

A primeira foi sobre “What you need to know about eye tracking” por Harry Brignull, em que foram salientados alguns pontos importantes para se conseguir interpretar melhor os heatmaps gerados pelos eyetrackers. Este tema é-me interessante porque costumamos fazer vários testes com um eyetracker lá no SAPO e é sempre bom saber um pouco mais sobre como devemos interpretar os resultados.

A segunda sessão foi “Make it Obvious: Affordance as a Design Tool” por Justin Davis, mais um excelente orador. A apresentação não ia muito além da explicação sobre o que significa o termo “Affordance”, mas a forma como foi apresentada fez toda a diferença e acabou por ser a melhor Open Session a que assisti.

Workshop 2

O último workshop do dia foi “Making smart design decisions: Collaborative techniques for analyzing usability testing data” por Dana Chisnell. Fizémos um exercício interessante para melhorar a forma como uma equipa pode analisar rapidamente os problemas encontrados nos testes de usabilidade.

Algumas das sugestões que foram apontadas já estamos a usar no SAPO, tal como convidar os responsáveis dos projectos para assistirem aos testes e eles próprios tirarem notas dos problemas que vão sendo encontrados. Isto faz com que todos os que estejam envolvidos no projecto conheçam a forma como os utilizadores usam os seus websites e também faz com que não seja necessário fazer um relatório muito elaborado com os resultados dos testes porque toda a equipa observou o que foi acontecendo.

Outra das coisas que fazemos às vezes é juntar todos os observadores no final dos testes e discutir o que se observou ao longo do dia. Tudo isto é útil para que toda a equipa esteja em sintonia com os problemas identificados e reconheça a necessidade de os resolver rapidamente.

Em resumo, foi um segundo dia em grande.

Amanhã há mais

Começou hoje a UX Lx, a maior conferência sobre usabilidade e user experience de sempre em Lisboa. Os dois primeiros dias são dedicados aos workshops e escrevo aqui um resumo do primeiro dia e dos 2 workshops a que assisti.

O primeiro workshop começava às 9h por isso era importante chegar cedo para fazer o registo. Consegui chegar por volta das 8h30 e nessa altura já havia alguma fila para entrar. Quem chegou mais tarde já não teve tanta sorte porque a cada minuto a fila ia aumentando cada vez mais e muita gente já entrou atrasada para os workshops devido ao tempo de espera na recepção.

Workshop 1

O primeiro workshop a que assisti foi “An Introduction to Remote Usability Testing” por James Page e Sabrina Mach. Tinha algum interesse no tema dos testes de usabilidade remotos porque nem sempre é fácil recolher utilizadores que estejam dispostos a deslocar-se ao nosso laboratório para realizar um teste, além de que os utilizadores agem de forma muito mais natural no seu ambiente habitual do que num laboratório.

Neste workshop aprendemos várias técnicas e metodologias para testes de usabilidade remotos, mais precisamente os testes assíncronos (em que o participante e o moderador estão separados no espaço e no tempo) uma vez que eles desenvolveram uma aplicação web, de seu nome Webnographer, que facilita a execução destes testes de usabilidade remotos.

Foi interessante, mas um pouco superficial. Os conteúdos mais avançados ficaram guardados para a segunda parte do workshop (a qual já não assisti porque decorria à mesma hora do outro workshop a que fui assistir).

Open Sessions

Depois do almoço pude assistir a duas Open Sessions (sessões livres de 20 minutos). A primeira “What’s the Story? Infusing experiences with the craft of storytelling” não foi nada de especial e basicamente falava na predisposição do cérebro humano preferir conteúdos que contem uma história de modo a melhorar a experiência de utilização. A segunda sessão foi “UX 4 Kidz” em que forma mostrados alguns exemplos e boas práticas no desenvolvimento de websites para crianças. Esta já foi mais interessante, mas uma vez que o tempo é limitado, não deu para aprofundar muito mais os conteúdos.

Workshop 2

O segundo workshop do dia a que assisti foi o “Designing with Patterns” por Bill Scott. Bill foi um dos co-autores da Yahoo! Design Pattern Library, uma biblioteca de informação com boas práticas e soluções para problemas comuns no desenvolvimento de websites. Neste workshop foram apresentados vários tipos de padrões web, boas práticas, más práticas (anti-padrões) e bastantes exemplos reais de vários websites.

Foi um workshop bastante interessante, principalmente porque é sempre melhor ver exemplos reais do que ouvir apenas a parte teórica. Para quem estiver interessado em mais informação há também um livro “Designing Web Interfaces” deste autor com vários exemplos de padrões e soluções para problemas comuns que normalmente encontramos quando temos que desenvolver um website.

E amanhã há mais

Caixa Geral de Depósitos

O site da CGD usa um menu lateral do estilo drop-down, em que cada opção abre as suas sub-opções num novo menu à frente.

A vantagem deste tipo de menu é que conseguimos percorrer as várias opções, indo até níveis mais profundos rapidamente sem sair da mesma página. A desvantagem é que normalmente é preciso uma maior precisão de movimentos do rato para navegar. Um movimento em falso e o menu desaparece ou abre uma outra opção que não é aquela que estávamos à espera. No caso da CGD, o menu só desaparece ao fim de 1 segundo (tempo suficiente para corrigir a posição do rato).

Ao contrário dos outros serviços de homebanking que conheço, o da CGD é o único que não mostra imediatamente no menu as opções “Pagamentos” e “Transferências”, colocando-as dentro do menu “Serviços”. O facto destas duas opções estarem “escondidas” dentro de um outro menu faz com que eu ande sempre à procura delas no menu principal até me aperceber que estão dentro dos “Serviços”.

O facto das acções principais do homebanking estarem escondidas num sub-menu e restritas apenas a uma palavra ou frase curta (para caber no menu) faz com que algumas das opções não sejam tão facilmente perceptíveis do que seriam se tivessem uma pequena descrição a acompanhar.

MillenniumBCP

No MillenniumBCP o menu lateral usa um misto de drop-down (tal e qual o da CGD) para algumas opções e uma página de entrada para outras. Aqui, as opções “Pagamentos/Carregamentos” e “Transferências” fazem parte do menu principal e abrem uma página de entrada com várias acções possíveis.

Gosto particularmente destas páginas de entrada porque têm vários grupos de acções que se podem realizar. No caso dos “Pagamentos/Carregamentos” há vários tipos de pagamentos ou carregamentos que se podem fazer, e estão devidamente separados por grupos. Isto permite encontrar mais facilmente aquilo que se quer fazer olhando apenas para o nome do grupo, de só depois para a acção pretendida. Também permite ter um número muito maior de operações na página, sem que esta pareça demasiado cheia ou de difícil visualização (imaginem ter todas estas opções de pagamento num menu drop-down).

Banco Best

Do meu ponto de vista, a navegação do Banco Best é uma das piores. Todo o menu principal do site (a azul) apenas serve para aceder a conteúdos institucionais ou aos produtos do Banco. A navegação no homebanking está restrita a um único botão no topo (que abre as restantes opções em drop-down).

As acções do homebanking também aparecem numa coluna à esquerda, a seguir ao login, mas basta clicar numa opção e na página seguinte esse menu aparece quase sempre fechado. Por exemplo, se clicar na opção “Pagamentos e Carregamentos”, na página seguinte o menu lateral está completamente fechado e acaba por passar despercebido quando quero mudar de acção, como por exemplo fazer uma transferência.

Como se pode ver na imagem acima, além do menu aparecer fechado, o título da página é somente “interbancárias” (porque segui o link no menu para “Transferências > Interbancárias”), sem mais nada.

BBVA

No BBVA senti um pouco mais de dificuldades em usar a navegação porque existem três links no menu para Pagamentos (e às vezes não dá para saber à partida em qual deles está o tipo de pagamento que quero fazer).

Depois de clicar num link no menu lateral, existe um conjunto de tabs e sub-opções no topo da página. Nem todas são claramente perceptíveis (qual é a diferença entre pagamento de Serviços e Pagamento de Compras?) e às vezes ao clicar numa das sub-opções, apesar dela ficar imediatamente activada, o resto da página permanece parado, com o mesmo ecrã do menu anterior. Só passados alguns segundos é que muda a página toda.

Ao contrário dos restantes sites bancários, no BBVA não é possível ir ao extracto e clicar nos pagamentos e transferências que fizémos para ver mais informações ou obter o comporvativo. Também só permite consultar os movimentos dos últimos 90 dias, enquanto que por exemplo no MillenniumBCP é possível consultar os movimentos dos últimos 2 anos e posso ver os detalhes e comprovativos de todos os pagamentos e transferências.

Outra funcionalidade importante que falta no site do BBVA e que existe em todos os outros é a possibilidade de controlar os débitos directos (consultar, editar, cancelar) e poder receber alertas via e-mail sempre que é feito um crédito ou débito da conta (isto dá bastante jeito).

Ou seja, infelizmente o BBVA parece estar uns bons 10 anos atrasado nas funcionalidades de homebanking em relação aos restantes bancos. O que é estranho, tratando-se de um dos maiores bancos mundiais…

Uma vez que não tenho conta em todos os bancos (era bom, não era) e eles dificilmente arranjam contas para testes, vou apenas comparar aqueles que conheço e que tenho/tive a oportunidade de testar:

• Caixa Geral de Depósitos
• MillenniumBCP
• Banco Best
• BBVA

Nota: Por motivos de segurança não vou colocar links para os sites dos Bancos. Se quiserem aceder a eles, devem escrever o endereço no vosso browser. Nunca confiem em links para sites de bancos, pois podem ser usados para fazer phishing.

Nesta primeira parte vou debruçar-me sobre o processo de login.

Caixa Geral de Depósitos

Ao entrar no site da CGD é um pouco complicado saber onde é que posso fazer o login na minha conta. Instintivamente olho em redor à procura de um formulário onde possa introduzir os meus dados mas só depois percebo que devo ter que clicar num link algures para aceder à área reservada. Isso obriga-me a ter que ler o que está escrito na página, à procura do link correcto. Não é uma tarefa fácil porque o link para o CaixaDirecta online está no meio de um grupo de outros links e acaba por ser bastante parecido com os restantes, que falam sobre os produtos e campanhas do Banco.

Mesmo sabendo que o link está lá, perco sempre alguns segundos à procura dele na página (o facto de estar colocado no meio da página pode levar a que eu não o encontre à primeira porque normalmente as opções de login e informação do utilizador estão sempre localizadas num dos cantos da página).

Depois de clicar no link para a CaixaDirecta online, aqui sim, temos a página de login no serviço. O facto do site mudar completamente de layout ajuda o utilizador a perceber que está numa área completamente diferente do site, e isso ajuda a aumentar um pouco mais a segurança porque se ele está a ver esta versão do site significa que está com a conta autenticada e deve fazer logout antes de sair. Em outros bancos praticamente não se nota a diferença entre a versão institucional e a versão de homebanking, como iremos ver mais à frente, e isso às vezes confunde alguns utilizadores porque não sabem se estão a ver os detalhes das suas contas ou uma promoção de um produto qualquer do banco.

Aqui, no meu ponto de vista, o principal problema é o teclado virtual (já vos disse o quanto odeio os teclados virtuais?). Eu percebo que seja mais seguro usar este tipo de teclados no caso do utilizador ter algum vírus no computador que registe quais as teclas pressionadas, e com isso, detecte os seus códigos pessoais. Mas o facto de ter que ir clicar com o rato num teclado virtual obriga-me a ter que usar o rato (e com isso, a ter que procurar as letras no teclado, que estão sempre a mudar de sítio) o que implica que tenho que ter uma grande precisão de movimentos para clicar nas teclas certas. Todo este processo é bastante moroso e se pudesse usar o teclado despachava-me em menos de um décimo do tempo que demoro a usar o teclado virtual. Já para não falar do facto de que não posso usar nenhum teclado virtual se tiver alguém comigo ou a olhar por cima do meu ombro…

MillenniumBCP

O site do MillenniumBCP tem na barra lateral do lado esquerdo o acesso directo às contas. Basta inserir o código de utilizador (que podemos ser nós a definir, em vez de ter que inserir um número de conta difícil de memorizar) e escolher a opção de entrar no site para Particulares ou Empresas. Normalmente, inserindo o código de utilizador e carregando na tecla ENTER vamos logo para a zona de Particulares.

O processo de login é feito em dois passos. Na página inicial insere-se o código de utilizador, e na página seguinte insere-se a password (3 caracteres aleatórios). Isto permite separar os dois campos e evitar que os dados do formulário sejam apanhados por algum vírus ou software instalado no computador do utilizador. Não é preciso usar nenhum teclado virtual e a password digitada nunca é a mesma (apenas 3 caracteres aleatórios). Do meu ponto de vista, isto inspira-me mais segurança do que o modelo da CGD.

O MillenniumBCP mistura no mesmo site as operações bancárias com as informações institucionais. Isto pode confundir alguns utilizadores por se poderem perder pelos menus institucionais, mas estando autenticado, as opções de gestão das contas estão sempre na coluna da esquerda, enquanto que a navegação institucional se mantém no topo. Acaba por ser menos mau, mas não há aquela sensação de que estamos numa área reservada e segura do site.

Banco Best

O Banco Best remodelou o seu site no início do ano. O login é feito clicando no botão laranja no topo da página (tal como na versão anterior). Não é o mais directo possível, mas dado que os restantes tons do site são azul e banco, o botão laranja destaca-se bastante bem e chama a atenção. Poderia ganhar mais destaque se fosse um pouco maior e não estivesse meio perdido junto de outros links e botões na mesma área da página.

O processo de login no Banco Best é um dos menos seguros de todos. É utilizado um teclado virtual, mas é possível memorizar a password no browser e ela é automaticamente preenchida ao entrar nesta página, bastando apenas clicar no botão “Entrar”.

Em comparação com o login da CGD, aqui podem-se usar letras e números (enquanto que na CGD apenas eram aceites números), o que torna o teclado um pouco maior, mas neste caso as teclas não mudam de sítio, o que invalida logo uma componente importante da segurança dos teclados virtuais (se as teclas estão sempre no mesmo sítio, é possível que um vírus ou outro software consiga saber quais as teclas onde estamos a clicar e assim guardar a nossa palavra chave).

O Banco Best também mistura os links institucionais com os links do homebanking, no entanto este caso é mais grave porque o menu com as opções de homebanking está no topo e tem as suas opções escondidas dentro de um dropdown (irei analisar a navegação destes sites no artigo seguinte).

BBVA

O site do BBVA parece que parou no tempo a meio dos anos 90. Não só a nível de layout, mas também a nível de funcionalidades e segurança no login.

O login é feito directamente na página inicial, não há que enganar, mas os dados para login são o número na frente do cartão multibanco (quem é que memoriza o número do cartão multibanco!? E se o cartão mudar vou ter que usar outro código?) e o pin de acesso é um número com 4 algarismos (este é o tipo de passwords mais fracas que se podem usar).
Além disso, aqui também é possível que o browser memorize os dados de login, bastando depois clicar no botão “Entrar” para ter acesso às contas.

De todos, o BBVA e o Banco Best são os que menos segurança me inspiram. O da CGD peca por me obrigar a usar um teclado virtual e que tanto o código de utilizador como a password sejam apenas números. O do MillenniumBCP, para mim é o que inspira mais confiança e o que considero ser o mais difícil de haver alguém que consiga descobrir os meus dados de acesso.

No próximo artigo irei analisar a navegação pelos menus, e mais à frente quais os passos para fazer um pagamento de serviços e uma transferência bancária.

Nas primeiras semanas custou-me um bocado a habituar-me ao modo como se trabalha aqui no SAPO. Vim de uma empresa pequena (+/- 25 pessoas) e no dia seguinte estava aqui a trabalhar com cerca de 150 pessoas.

Uma vez que o departamento para onde vim trabalhar (qualidade, usabilidade, acessibilidade, etc…) é transversal a todo o SAPO, não tardaram a chover dezenas de pedidos de análises, testes e aprovações de serviços e sites logo nos primeiros dias.
Mais tarde apercebi-me da verdadeira dimensão do SAPO, em que todos os dias temos centenas de pessoas a trabalhar em n coisas diferentes, e é necessário que tudo seja aprovado pelo departamento de qualidade.

Os primeiros dois meses foram duros, mas consegui acompanhar o ritmo e adaptar-me às metodologias que se usavam por cá. Felizmente não estive sozinho nesta aventura. O André Luís, que já trabalhava aqui no SAPO, mas noutro departamento, juntou-se à equipa e como ele já conhecia toda a gente foi mais fácil fazer a adaptação.

Ao mesmo tempo que me tentava adaptar, uma das tarefas principais que tinha era criar um documento com regras e recomendações de Usabilidade e Acessibilidade. Curiosamente, essa foi também a minha primeira tarefa quando entrei para a log há 6 anos atrás. O documento não era o mesmo, porque para a log fiz um com técnicas e metodologias de usabilidade, enquanto que no SAPO o objectivo seria o de ter um documento com regras, recomendações e boas práticas de usabilidade que pudessem ser facilmente seguidas pelos designers e developers da casa.

No final do primeiro mês o documento estava pronto e foi um sucesso. Durante os meses seguintes foram feitas algumas revisões e fomos dando várias formações (uma por capítulo). As formações acabaram por ser algo que fazíamos praticamente todos os meses (às vezes mais do que uma por mês) e isso ajudou bastante na minha integração e a passar a mensagem que queríamos.

Inicialmente, o departamento de qualidade era visto por algumas pessoas como algo que é obrigatório para o site poder ser aprovado ou não antes de ir para o ar, mas o nosso objectivo não era sermos o obstáculo final, mas sim a equipa que ajuda a ter um melhor produto final. Assim, nas nossas análises, em vez de apontarmos apenas os erros de usabilidade a corrigir, começámos a dar sugestões de correcção e a disponibilizarmo-nos para ajudar in loco quem quer que necessitasse de ajuda ou de tirar algumas dúvidas.
Ao final de alguns meses conseguimos mudar a maior parte das mentalidades e hoje somos abordados todos os dias para ajudar nos vários projectos que estão a decorrer

Em suma, nestes últimos 12 meses fizemos dezenas de avaliações heurísticas, vários testes de usabilidade (incluindo testes com crianças; com idosos; e com eyetracker), avaliações de acessibilidade, brainstormings, focus groups, sessões de card sorting, várias formações internas (e também algumas SAPO Sessions abertas a quem quisesse assistir), muitos wireframes, muitas especificações funcionais para vários produtos e serviços (não só para o SAPO, mas também para outras empresas do grupo PT como a TMN e o MEO), ajudámos a lançar dezenas de sites e serviços, incluindo a nova homepage do SAPO e mais uma quantidade infindável de outras coisas…
Se quiserem saber mais, aqui está uma lista de tudo o que fizemos em 2009 (não inclui ainda os primeiros 2 meses de 2010 onde muito já aconteceu).

Agora, venha mais um ano

Na primeira vez que se acede ao sistema, é-nos pedido para definir uma password de acesso e uma password de operações. Como se pode ver na imagem em baixo, os campos para inserir a password de operações estão desactivados, sendo necessário clicar numa checkbox em cima para os activar e preencher com a password pretendida.

O problema é que quase ninguém lê as instruções (principalmente se são frases ou parágrafos muito longos). Eu não li a instrução e intuitivamente pensei que a checkbox servia para indicar que queria usar o mesmo código para as duas passwords (eu sei, eu sei, é um problema de segurança, mas posso sempre alterá-las depois) uma vez que a selecção da checkbox activava ou desactivava o preenchimento da segunda password.
Ou seja, ao clicar na checkbox, a percepção dada pelo site é que ela serve para definir a mesma password para os dois campos.

Depois de fazer login e tentar realizar operações no site é que reparei que não podia fazer nada porque me dava um erro a dizer que a password de operações não foi definida. E não há nenhuma forma de definir uma nova password porque para isso preciso de inserir a password de operações actual (que não existe)… E desta forma não consigo usar o site. Lá vou eu ter de ligar para o helpdesk para poder criar uma nova password…

No caso do utilizador (como eu) não preencher a password de operações, porque é que o deixam continuar? Se essa password é necessária para usar o site então porque é que não é de preenchimento obrigatório logo no início, e porque é que as instruções estão numa checkbox? Não percebo…

Fiz uma versão alterada desta página que penso será mais fácil de usar (e que deverá mostrar uma mensagem de erro se o utilizador não preencher as duas passwords):

Já para não falar do facto de que as passwords têm ambas 4 caracteres no máximo… Não me parece ser lá muito seguro…

Em breve conto fazer um comparativo entre os serviços de homebanking de alguns Bancos

A UX Lx será o maior evento alguma vez realizado em Portugal (e quem sabe, até na Europa) sobre usabilidade e user experience, com workshops bastante interessantes e um programa ainda mais aliciante, contando com profissionais de renome da área, como:

• Jared Spool, um dos mais reconhecidos defensores da usabilidade hoje em dia;
• Steve Krug, autor do livro “Don’t make me think”;
• Peter Merholz, da Adaptive Path;
• Luke Wroblewski, Chief Design Architect na Yahoo;
• Bill Scott, autor do livro “Designing Web Interfaces“;
• Entre outros…

Os membros da APPU terão direito a 20% de Desconto sobre o preço de todos os bilhetes.
Até 28 de Fevereiro podem poupar até 200€ em cada bilhete!

Podem ainda seguir a UX Lx no Twitter e no Facebook para receberem ofertas ocasionais.

A ver se consigo recuperar os posts em atraso e se arranjo algum tempinho (e também alguma paciência) para começar a escrever mais

Foi curioso constatar tudo aquilo que vem escrito nos livros e que é típico deste tipo de utilizadores, nomeadamente:

• Não fazem muito scroll. A rodinha do rato é quase inexistente e nas raras ocasiões em que fazem scroll, vão com o rato “pegar” na barra de scroll para a mover;
• A precisão de movimentos é muito baixa. Só para terem uma ideia, o acto de seleccionar uma checkbox é bastante difícil. Os próprios links em texto são difíceis de clicar. Reparei que ao clicarem, estes utilizadores movem ligeiramente o rato para baixo, o que faz com que o ponteiro se desloque do ponto inicial onde deveria ser feito o clique. Às vezes foram precisas 3 tentativas para conseguirem acertar num link (os links testados tinham 11px de altura);
• Os “date pickers” são para esquecer. Causam mais confusão do que se tivessem que inserir a data manualmente. Houve um utilizador que tentou usar os números no “date picker” para inserir a data, por exemplo, para o dia 16 clicou no número 1 e depois no 6;
• As janelas modais, em alguns casos, fizeram com que os utilizadores pensassem que tinham feito algo de errado. O facto de lhes aparecer uma janela à frente vinda do nada causa-lhes a sensação de que aconteceu algo que não estavam à espera;
• Ao fechar uma janela modal, já não sabiam onde estavam na página anterior. Por exemplo, se estivessem a preencher um formulário e um dos campos abrisse uma janela modal para seleccionar uma opção, ao fechar a janela perdiam-se e já não sabiam o que fazer a seguir;

Curiosamente, e apesar de todas estas dificuldades, a taxa de conclusão das tarefas foi bastante boa. Identificámos vários problemas (que não aconteceram só com os utilizadores idosos) que necessitam de correcção, mas a experiência foi bastante agradável

Há cerca de 1 ano e meio atrás fui abordado para ajudar no desenvolvimento de um grande portal. A ideia seria torná-lo o melhor portal do género em Portugal em termos de usabilidade, facilidade de uso, e de conteúdos. Convém dizer que não se trata de um portal generalista como o Clix ou o SAPO, mas sim de um portal com conteúdos muito específicos numa área com bastante procura por parte dos utilizadores (infelizmente não vou dizer publicamente qual é). Já existem outros grandes sites (inclusivé o maior competidor é um canal do SAPO) o que faz com que a concorrência seja muita e daí a necessidade de se ter o melhor produto no mercado.

Fizemos uma proposta que incluía o desenvolvimento do portal segundo as regras de usabilidade e seguindo sempre os webstandards para proporcionar um website fácil de usar, leve, e ao mesmo tempo agradável à vista. Obviamente que, se nos pediram para fazer o melhor site do mercado, tivemos que fazer uma proposta que tivesse em conta isso mesmo, ou seja, a qualidade geral do produto teria que ser bastante acima da média. E isso reflecte-se nos tempos de desenvolvimento e, consequentemente, no preço final.

A resposta que nos deram foi que os tempos que tínhamos fornecido não dariam para ter o site no ar a tempo. Isto porque o prazo para a colocação no ar era de apenas 3 meses. Além disso, eles já tinham decidido qual o gestor de conteúdos que queriam usar e disseram-nos que não dava para usar o nosso código directamente nos templates porque eles eram gerados automaticamente por esse gestor de conteúdos. Ou seja, ficámos sem perceber se o gestor de conteúdos é assim tão mau ou simplesmente se as pessoas que o estavam a instalar não tinham conhecimentos suficientes para pegar numa página em HTML e converter para um template…

Depois disso, fizemos nova proposta que incluía desenvolver ou usar um outro gestor de conteúdos mais flexível, mas isso iria aumentar o tempo de desenvolvimento e os custos, pelo que foi também recusada.

3 meses depois

Passados 3 meses, o site já deveria estar no ar, mas aconteceram alguns atrasos e o design apresentado pela outra empresa que ganhou o concurso não estava devidamente especificado e faltava definir onde e como deveriam ser incluídos alguns elementos nas páginas bem como faltava também o design de algumas páginas interiores importantes.

Além disso, o código HTML e CSS do website estava demasiado pesado e muito mal estruturado (uma mistura de tabelas e div’s; id’s e classes de CSS com nomes enormes e com todo o aspecto de terem sido gerados automaticamente; muito código repetido e redundante).

Nessa altura, foi-me pedido para ajudar a redefinir todo o layout do site, para o tornar mais “clean” e criar os elementos e páginas que faltavam, isto claro, sem fugir ao design actual. Aceitei o desafio e eles aceitaram os valores que pedi. Infelizmente, nem todas as minhas propostas de alteração foram aprovadas e o site manteve-se com um layout pesado e pouco “clean” na minha opinião. No entanto, consegui melhorar alguns aspectos claros de má usabilidade (alguns continuaram com má usabilidade porque os designers disseram que não gostavam do aspecto das propostas de alteração que eu fiz!) e criei as páginas que faltavam (em Photoshop).

Neste momento tinha-se passado mais um mês e o projecto já estava atrasado. Ou seja, além de não estarem a cumprir os prazos (o que acarreta custos) estavam a contratar alguém para resolver os problemas de usabilidade que deveriam ter sido resolvidos logo no início (mais custos).

6 meses depois

O desenvolvimento está praticamente terminado e o site foi lançado em versão Beta para os vários “produtores de conteúdos” começarem a inserir os conteúdos que iriam tornar o site um dos maiores do país no seu ramo de actuação.

Um dos principais sintomas que se nota é a lentidão de carregamento das páginas (demasiadas imagens, cantos arredondados, tabelas, demasiado código “lixo” e redundante). Além disso, o principal concorrente lançou uma nova versão do seu site, com um layout mais apelativo e inovador.

Por tudo isto, voltaram a entrar em contacto comigo para refazer totalmente o layout do site de modo a torná-lo mais leve, clean e usável (não foi isto que nos pediram há 6 meses atrás?). A ideia, segundo eles, é que uma vez que já está tudo praticamente desenvolvido seria mais fácil agora alterar o layout do site.

A minha resposta foi que, ao contrário do que pensam, sai-lhes mais caro alterar agora o layout do site do que lhes teria saído se o tivessem feito logo no início. Isto porque essa alteração teria que ser feita em todas as páginas e o código HTML e CSS que lhes seria entregue seria diferente do actual, o que iria aumentar o trabalho da equipa que faria a integração do HTML com o gestor de conteúdos. Além disso, no inicio tinham-nos dito que o gestor de conteúdos deles não permitia usar o nosso código nos templates… Não me voltaram a contactar.

1 ano e 6 meses depois

O site está online (não vou colocar aqui o endereço porque não quero divulgar o nome do cliente) e praticamente ninguém o conhece. Para quem queria ser um portal de referência, foi um “epic fail”. Nem com publicidade na TV (de vez em quando passam alguns spots na TV) me parece que o site tenha alguma audiência. Posso estar enganado porque não conheço os números dos acessos, mas penso que a maior parte das pessoas nunca ouviu falar dele nem nunca o usou…

Conclusão

Se tivessem aceite a nossa proposta inicial, o custo total, comparado com o custo dos deslizes do projecto e das alterações efectuadas durante o decorrer do mesmo seria muito menor. Não posso dizer que o site seria mais ou menos conhecido do que é actualmente, mas pelo menos teriam algo com qualidade.

Pode ser que este tenha sido um exemplo em que tudo correu mal para o cliente e possam pensar que o erro dele foi a vários níveis (não só na não contratação dos nossos serviços, mas passando também pela má escolha do gestor de conteúdos e do design do site), no entanto já vi isto acontecer tantas vezes que me continuo a perguntar: porque é que em Portugal se continua a trabalhar em cima do joelho e só se pensa em ter as coisas feitas “para ontem” e sem qualidade nenhuma?

É costume ouvir estes responsáveis dizer que não precisam de se preocupar com a acessibilidade porque não têm utilizadores com necessidades especiais (pessoas com algum tipo de deficiência) a usar o site, ou se têm, são poucos. Algumas das principais desculpas são porque é preciso mais desenvolvimento para criar/alterar o site, e dá mais trabalho… No entanto, é impossível saber se há ou não utilizadores com algum tipo de deficiência a usar o site. Nas estatísticas, um utilizador com necessidades especiais é contabilizado como sendo um utilizador igual aos outros.

Os dados que existem actualmente para contabilizar o número de pessoas com necessidades especiais em Portugal são escassos e que eu saiba ainda não foi feito nenhum estudo dedicado ao uso da web por estas pessoas.

Numa pesquisa rápida pelo site do Instituto Nacional de Estatística descobri um estudo sobre o Enquadramento familiar das pessoas com deficiência (baseado nos Censos de 2001) que contém alguns dados interessantes.

Em 12 de Março de 2001, o recenseamento da população apurou 636 059 pessoas com deficiência (6,1% da população residente total) distribuídas pelos seguintes tipos de deficiência:

• Auditiva: 13,2%
• Visual: 25,7%
• Motora: 24,6%
• Mental: 11,2%
• Paralisia Cerebral: 2,4%
• Outras: 23%

Podem parecer poucos (felizmente), mas não deixa de ser uma fatia importante da população que também deve ter acesso à informação, tal como todos os outros. Ao tornarmos um website mais acessível, estamos a facilitar a vida a estas pessoas, quer sejam deficiente visuais que usem um screen-reader, ou deficientes motores que usem outros dispositivos apontadores em vez do rato.

Aliás, é mais provável que estas pessoas usem mais a web no dia-a-dia do que o mundo físico. Imaginem fazer compras num hipermercado sem conseguir ver. É muito mais fácil (se o site for minimamente acessível) fazer as compras online do que andar a vaguear pelos corredores do hipermercado sem quaisquer pistas auditivas ou tácteis para saber que tipo de produtos estamos a comprar.

Criar um site acessível (ou transformar um site já existente) não é uma tarefa complicada. Não dá assim tanto mais trabalho do que o normal (talvez no início seja necessário investir algum tempo a investigar como é que se deve fazer o site, mas após algum tempo é muito mais fácil e directo).
E se estamos a tornar um site mais fácil de usar para pessoas com necessidades especiais, estamos também a torná-lo mais fácil de usar para todos os outros.

Também não tenho publicado quase nada ultimamente, umas vezes por falta de tempo, outras por falta de paciência para isso.

No entanto, hoje conheci o Project 52, que basicamente é um desafio pessoal colocado aos bloggers para publicarem pelos menos 1 artigo por semana, durante 1 ano inteiro.

Para dinamizar mais o blog, aceitei o desafio e vou esforçar-me para publicar um novo artigo todas as semanas, mantendo a temática principal do blog: usabilidade, acessibilidade e web design. Por isso, aqui estou eu a publicar o artigo 1 de 52 na primeira semana de 2010

Se quiserem podem ajudar dando ideias de temas para artigos que achariam que fosse interessante eu falar