É bem verdade que desde o início de 2009 já existem algumas campanhas que incentivam os usuários a atualizarem seus browsers, entretanto, percebo algumas falhas que fazem com que estes passem “batidos” por estes alertas de atualização.

Mais do que impor a atualização do software, é importante explicar e conscientizar as conseqüências de permanecer com o antigo (IE6) e também desmistificar a complexidade (que não existe) da atualização.

Veja a solução em funcionamento

Pensando como um usuário de IE6

Se estamos falando de alguém que utiliza o IE6, este certamente é a definição do que é um USUÁRIO e certamente não acessará portais de tecnologia, muito menos este artigo.  Te convido para refletir porque tantos ainda utilizam o IE6 e também COMO devemos nos preparar para os dois tipos de usuários que temos que encarar.

1) O usuário que NÃO sabe que utiliza o IE6

Aconteceu comigo: Minha tia não conseguia acessar o menu de um determinado site e eu fui ajudá-la. O problema obviamente era o IE6, que fiz questão de retirar da máquina. O mais curioso é que este site tinha uma barra para atualização do browser (o que me motivou a escrever este artigo), mas passou despercebido por ela. Pra mim foi como um teste de usabilidade involuntário.

2) O usuário que sabe que utiliza o IE6

Agora, olhando pelo outro lado, e quem sabe que tem o encardido IE6 instalado em seu computador, por que não atualiza?

• Por que tem medo de não se familiarizar com “o novo”
• Por que pensam o tempo para atualização é grandes
• Por que acha que é difícil procedimento baixar e instalar
• Por que os desenvolvedores continuam fazendo hacks para o IE6
  • Podem achar que sou radicalista neste ponto e questionarem que isso bate de frente com a questão da ACESSIBILIDADE. O que faço hoje são sites ACESSÍVEIS para o IE6. O conteúdo é plenamente visualizado, porém esteticamente pode ficar comprometido em alguns pontos  (PNG sem  transparência e uma <div> ou outra fora do lugar). – mas o usuário já foi alertado sobre a incompatibilidade.
  • Esta é uma questão polêmica e acho que vale outro post para discutir isso. Eu penso que que tempo é dinheiro, e desenvolver para IE6 é perda de tempo.

Medidas que fazem a diferença

Nosso papel como desenvolvedores é incentivar, facilitar e esclarecer ao máximo para o usuário por que e COMO ele deve se livrar do IE6. Pequenas medidas fazem a diferença para reduzir as estatísticas:

• Não disponibilizar muitas opções de browsers
  • O usuário pode se sentir confuso e desistir
• Um breve texto (objetivo) para cada opção ajuda no ato da escolha
  • O usuário não precisa clicar (e depois ter que voltar) para tomar a decisão.
• Estimar o tempo e o tamanho do download
  • Incentiva e mostra que a atualização é rápida
• Utilizar linguagem informal

Instalando o mecanismo que ajuda o usuário a atualizar o browser

Primeiro, inclua este script na página incial de seu site

<script type=”text/javascript”>

var browser        = navigator.appName
var ver            = navigator.appVersion
var thestart    = parseFloat(ver.indexOf(”MSIE”))+1
var brow_ver    = parseFloat(ver.substring(thestart+4,thestart+7))

if ((browser==”Microsoft Internet Explorer”) && (brow_ver <= 6))
{
alert(”Você está utilizando um browser antigo e poderá não visualizar todas as funcionalidades deste site. Saiba como atualizar.”)
window.location=”ie6/index.html”;
}
//–>

</script>

Depois baixe estes arquivos (pasta) e insira-os no ROOT do seu site. Pronto.

Considerações finais

Para a página inicial do seu site eu recomendo a instalação desde facilitador. Para as páginas internas, porém, o Imasters dispõe uma barra que aparece no topo do navegador que reforça o apelo para atualização. Veja aqui.

E aí, vai ajudar seu usuário a se livrar seu usuário a partir de hoje?

Abraços, e até a próxima.

É com muita satisfação que publico hoje o site de uma referência nacional em cirurgia Bariátrica, o médico e cirurgião Dr. Gustavo Peixoto.

Foi grandioso receber o convite para reformulação do site do médico que realizou o primeiro transplante de fígado do Espírito Santo. Dr. Gustavo também é responsável pelo Programa de CirurgiaBariátrica do Hospital Meridional e H.U.C.A.M.-U.F.E.S.

O Site

Acessar o site

O objetivo principal do novo site foi tornar mais fácil a navegação e o acesso as informações do site, já que o google direcionava uma média 1200 acessos mensais, devido ao fato que o site tornou-se referência para pacientes carentes de informação sobre a cirurgia bariátrica.

O site também funciona como um canal de comunicação direta com o Dr. Gustavo, que responde desde dúvidas do público em geral como também mensagens de carinho e gratidão de seus pacientes transformados pela cirurgia bariátrica.

Desafios

O Design é simplista para não concorrer com o grande volume de informações que o site possui.

O site antigo trazia muitas informações de forma desordenada e massiva, textos desnecessários e ilustrações confusas. Foi necessário um trabalho de arquitetura de informação para relacionar osconteúdos (Sobre a Cirurgia Bariátrica) de forma que ficasse mais simples e direcionado.

Calma, Aqui não tem nenhuma receita de bolo, entretanto, este tema é bastante polêmico e o texto abaixo certamente lhe mostrará os ingredientes.

Apesar do foco deste blog ser o Design voltado para o e-learning, em um dos módulos da Pós graduação (em Educação a Distância, no SENAC RJ) debateu-se a importância do professor no sucesso de um curso a distância. Esse assunto é muito interessante e vale a discussão! O texto abaixo é uma cópia da atividade que desenvolvi no curso.

Depois de ler, me diga se você concorda ou não. Vamos trocar idéias.

Enunciado

Lina Morgado, no texto “O Papel do Professor em Contextos de Ensino On-line: problemas e virtualidades”, defende a idéia de que a chave para o sucesso de um curso dessa natureza centra-se na atuação do professor. Você concorda com essa idéia? Justifique o seu entendimento.

Resposta

Respondendo com apenas uma palavra: absolutamente.

Planejamento pedagógico, suporte técnico, material adaptado para o modelo de educação a distancia e professores capacitados. Nós sabemos que todos estes fatores são importantes para o sucesso de um curso à distância, mas o último item em questão merece destaque.

Seja o modelo de ensino (a distância) centrado no professor (transmissão da informação, semelhante ao ensino presencial), centrado na tecnologia ou no estudante, é inquestionável a importância de um professor ativo e preparado para mediar às discussões online.

Por experiência própria atuando no meio acadêmico, posso afirmar que a maioria absoluta dos alunos que experimentam o ensino a distância ficam perdidos ou se sentem desamparados em algum momento do curso, principalmente em seu início, quando tudo é novidade.

Além de acolher o aluno e estimular sua participação na construção colaborativa do conhecimento, o professor tutor também trabalha no sentido de tornar o ambiente virtual mais aconchegante. É plenamente possível estudar em um ambiente virtual caloroso e estigante, bem como fazemos nas redes sociais que utilizamos informalmente.

O professor conteúdista (que muitas vezes também acaba sendo o tutor) também cumpre um papel importantíssimo para o sucesso de um curso a distância. Ele é responsável por adequar a linguagem utilizada no material de apoio ao aluno, facilitando sua compreensão.

É bem verdade que não é simples cumprir com todos os requisitos que a modalidade exige, pois, conforme a autora Lina Morgado bem relata, um professor que deseja ingressar e participar deste novo modelo de ensino deve cumprir alguns requisitos nos

• Aspectos pedagógicos, englobando todos os aspectos do processo de aprendizagem
• Aspectos de gestão, organizando e planificando as atividades de ensino
• Aspectos sociais, promovendo relações interpessoais e manutenção do grupo para que este trabalhe colaborativamente
• Aspectos técnicos, contribuindo para tornar a tecnologia utilizada (seja ela qual for) transparente aos alunos

Para concluir, nos últimos anos tem-se assistido uma preocupação crescente em centrar algumas investigações no estudo do comportamento do professor no contexto do ensino online. Os resultados podem conduzir-nos a uma reflexão mais aprofundada e repensar como se dá a formação destes super-profissionais com esta missão tão nobre: educar, seja presencialmente ou a distância.

Esqueça a paginação e limitação de fotos por página ao buscar imagens em um futuro próximo. O Google já está testando o Google Image Swirl, uma forma inovadora de interagir nas buscas por fotos, imagens, ícones e afins.  A sensação é de estar navegando em uma espécie de túnel do tempo.

Diferenciais:

1 – A primeira tela parece ser normal. Mas só parece. Ela traz uma dimensão do volume de fotos que está por trás de cada resultado obtido.

2 – A brincadeira começa a esquentar e você já começa a visualizar os relacionamentos da imagem clicacda

3 – O emaranhado de possibilidades começa a se formaras linhas mais grossas te dão a dimensão de “por onde passei até chegar aqui”.

4 – O resultado final decepciona um pouco. Ao clicar na imagem desejada somos redirecionados a busca de imagens convencional do Google. Mas calma, isso é só uma questão de tempo.

Por enquanto a busca se limita em mais ou menos 200 mil resultados, pelo fato de ainda ser um laboratório. Mas dá pra brincar bastante.

Se jogue no Google Swirl e impressione-se com a usabilidade e interação que as novas ferramentas estão nos proporcionando.

Depois volte aqui e veja que isso é só o começo, em breve vamos estar interagindo com o computador assim, ó:

10/GUI from C. Miller on Vimeo.

Protótipo de Sistema operacional baseado em touchscreen

Post nostálgico e rápido.  Em 2004 estava no início de minha carreira e  era  estagiário e de criação na e-brand. Ralava muito e um dia quebrei o porquinho pra comprar um chevettinho. Acreditem, me apaixonei por esse cara aqui de baixo:

Desde então não fazia contas e investia tudo que podia pra deixá-lo mais arrumadinho, com personalidade. Com o tempo ele foi ficando do meu jeito e arrancava reações adversas nas pessoas: Elogios de quem passava na rua, e altos sarros dos meus que diziam que as rodas valiam mais que o carro.

O tempo foi passando e o carro se foi. As histórias que ele me proporcionou, não. Sempre sou sacaneado pelo @Gilbermachado,  que conta a todas as gerações que passaram na agência do dia que fiquei de fora do meu próprio carro, na rua,  a mercê da porta que não queria abrir (não tinha maçanetas). Hoje foi mais um dia de relembrar essas e outras histórias, junto com a velha e nova geração da e-brand, que comemora em breve 10 anos  de vida.

Hoje, olhando para trás vejo um Chevette ainda sem vida e uma agência com muitos profissionais excepcionais, ambos ganhando forma e evoluindo rapidamente. Hoje posso dizer que o Chevette mais bonito que você viu é criação minha e foi sustentado (insanamente) pela internet capixaba.  Também posso dizer que ajudei a escrever a história dessa agência, na qual fiz muitas amizades e desejo todo sucesso!

Lembranças de um Designer de interfaces e, por que não dizer, um designer de Chevette?

OBS: Aguardo fotos deste encontro!

#quartaweb #webcapixaba

Em breve mais fotos…

Este post tem basicamente 2 objetivos:

1) Mostrar um passo-a-passo macro na construção de uma interface pra os designers que estão começando.

2) Considerando que que cada designer tem um estilo (e isso também se aplica a seus métodos de desenvolvimento), estou expondo a forma como eu trabalho para que possamos trocar idéias.

Não vou me aprofundar demais, a intenção é mesmo deixar uma visão macro do processo. Vamos lá.

1) Jogando os elementos e idéias na tela. Alguns gostam de rascunhar no papel esta etapa do projeto. Particularmente, prefiro recorrer a meu amigo Fireworks e a um wireframe de baixíssima fidelidade. Normalmente, já tenho a idéia montada em minha cabeça. Caso você não tenha, preocupe-se com isso – provavelmente você vai ficar jogando elementos de um lado pro outro na tela por falta de planejamento.

2) Segure as ondas com o baldinho de cor. Depois de definir onde cada bloco de informação vai ficar, é hora de detalhar um pouco mais o conteúdo de cada um (inserir texto e imagens). Contornos (sem preenchimento) são muito utilizados nesta etapa.

3) Trabalhando em tons de cinza. Seguindo ainda a linha do wireframe, os tons de cinza servem para demarcar o nível de importância de cada área do site (quanto mais escuro, maior destaque). Ponto. Em tons de cinza eu também já vou desmembrando o  site em cabeçalho, corpo e rodapé (que isso não seja uma regra). Ainda nesta etapa monocromática, costumo popular com imagens repetidas as áreas do site que vão conter imagens. Assim temos uma noção mais real do peso visual e no impacto que as imagens vão causar no layout. OBS: As vezes pode acontecer de você perceber que o layout ficou “poluído” em determinados pontos. Caso isso acontecer, recorra ao seu bom senso e ao espírito Magaiver.

4) Cores. Cuidado para seu layout não ficar travado demais nas cores que o cliente usa. Você tem alternativas trabalhando com uma ou duas cores auxiliares, sempre tomando cuidado para seu site não virar um carnaval fora de época. Vai meu filho, se joga na paleta de cores e no baldinho. Se você for um programador se aventurando meio sem noção nas combinações , talvez isso te ajude. http://www.colorotate.org/

5) “Desemblocando” o layout. Note que o conteúdo (colunas na parte cinza) começam a sair dos blocos quadrados. Neste caso, como o site é formal, não abusei muito das formas e disposição do conteúdo. Porém, se o site for algo mais artístico, conceitual, não fique preso ao wireframe do primeiro passo: teste formas, disposições, rotações, combinação, sacanagens e simpatizantes. Essa foi uma discussão lá na webcapixaba, e até vale um post só pra falar disso. Mas por enquanto não, vamos para o próximo passo.

Ah sim, outra alteração significativa foi a definição de um tamanho e formato para o cabeçalho e rodapé, mesmo que a grosso modo.

6) Lapidações finais. Calma que já tá acabando.

• Correções de espaçamento entre os elementos
• Detalhes e adornos do topo trabalhados (maoir nível de detalhes)
• Imagens previamente tratadas no photoshop, definitivas
• Fundo caracterizando ramo do cliente, discretamente.
• Sombreamentos

Acabou?

O PNG, a arte do site, sim. Você pode conferir algumas sacanagens a mais feitas em flash direto no site – www.diskmoveis.com.br

Agora, se você ver um estagiário com aquele pescoção em sites de templates pra dar aquela chupada, que tal compartilhar este link para que ele conheça os processos e tente  desenvolver seu estilo e criatividade.

Um abraço! E vamos trocar idéias…

Talvez, em mundo perfeito, uma equipe de agência web seja formada por gerentes de projetos,  redatores, revisores de conteúdo, testadores, programadores, atendimento perfeito, e arquitetos de informação que fornecem wireframes (também conhecido como mockup’s)  prontinhos para os designers trabalharem.

Quem dera, hein?  Como sabemos, no mundo real não funciona assim tudo tão bem dividido. É comum um bom Designer (leia-se Bombril) também ficar responsável pela arquitetura de informação do site, ou qualquer que seja a interface.

Por isso, pretendo abordar nesse post diferentes abordagens no momento da produção dos wireframes.

Wireframes na visão dos arquitetos de informação

Já adianto que este não é o foco do meu post e não vou me aprofundar muito nesta questão. Mas, para efeito comparativo (com a segunda parte do post), é importante que você entenda que normalmente Arquitetos de informação utilizam sofwares específicos para a criação de wireframes, e que o resultado final é algo parecido com isso:

Wireframe com baixo nível de detalhamento

OBS: No final do post disponibilizo uma lista completíssima de softwares específicos para a produção de wireframes.

Depois de escolher um software bacana e tendo em mãos o wireframe, chega o momentode utilizar outro software para dar continuidade ao projeto (Normalmente Photoshop ou Fireworks). É neste momento que acontecem algumas distorções no conteúdo – um ajuste aqui, um adeno ali.

Olhando pelo lado bom, pode-se gerar novas idéias neste “retrabalho” de transformar o wireframe (pobre visualmente, como deve ser) em um layout elaborado. Mas também pode-se distorcer o que já havia sido definido, perdendo-se tempo e o prazo.

Um freelancer ou um Designer que trabalha em uma pequena, média, ou até em uma grande empresa que não dispõe de uma pessoa que fica responsável somente com a arquitetura de informação, pode agilizar este processo.

Como? Através dos

Wireframes mutantes

As vezes tentamos organizar e documentar demais as etapas de um trabalho, e deixamos em segundo plano a produtividade. Veja bem, eu não estou defendendo o trabalho nas coxas ou sem planejamento. Penso que cada projeto tem sua complexidade, e às vezes não é necessário matar uma mosca com uma bazuca.

O Designer pode, perfeitamente, fazer uso da ferramenta que vai gerar o layout finalpara produzir um wireframe que vai ser incrementado gradativamente. Veja um exemplo:

Página principal (home) – Repare que este não é um wireframe tão engessadom, mas  não deixa de ser simples e extremamente rápido de ser produzido

É importante que, até que seja finalizado o wireframe, os afobados se contenham em não trocar fontes e testarem cores. Agora não é a hora de perder tempo com isso.

Exemplo de página interna (busca) – No Firework (Software de minha preferência), basta salvar o arquivo como e aproveitar os elementos já criados na estrutura anterior

Observe bem que as estruturas mostradas:

• Tem Caixas (boxes) extremamente simples e secas
• Tem o cinza mais escuro para indicar maior relevância do conteúdo
• Fontes sem formatação, porém os tamanhos diferenciados indicam hierarquia
• O espaçamento e diagramação é diferente, se aproxima mais do layout final.

Não levei mais do que 2hs para montar o esquema acima. A vantagem de utilizar wireframes com um nivél médio de detalhes, é que ele torna-se o norte todo processo de criação

Outra vantagem é poder apresentar a idéia da estrutura da interface ao cliente sem que haja um grande esforço de abstração – exigido quando o wireframe é extremamente pobre e gerado por ferramentas destinadas aos Arquitetos de informação.

Resumindo: O designer tem a facilidade e o conhecimento da ferramenta gráfica, pra ele custa pouco inserir pequenos detalhes (que fazem a diferença) no layout.

Continuando o desenvolvimento em cima do Wireframe mutante

Depois de aprovado (ou não) junto ao cliente, finalmente é chegada a hora de maquear o pobre, quadrado e monocromático Wireframe. Cores, fontes, fundos, degradês, ícones, botões, bruches, e chega. Vamos ver no que deu.

Que bonito! Olhando assim nem parece que deu trabalho..

Agooooora é a hora onde vou conseguir concluir meu ponto de vista e minha teoria: Note que, comparando com o wireframe inicial, não fugi do escopo e tudo está em seu devido lugar, sem grandes modificações. 

E ainda ainda não acabou. Neste modelo de desenvolvimento gradativo, podemos aproveitar pedaços dos wireframes para compor as páginas internas:

Notem que os elementos são basicamente os que estavam na home, aproveito vários deles para compor layout das páginas internas.

Pode parecer que não, mas esta prática ajuda e agiliza MUITO o processo de criação. Com um pouco mais de trabalho, lapidei esta tela até chegar em sua versão final.

Notem que mudei apenas a disposição das imagens para o lado direito, mas isso é só um detalhe.

Concluindo..

Penso que a arquitetura de informação é parte integrande do processo do design, e que não é necessário torná-la um passo a parte. A não ser que você viva no mundo perfeito e seja (remunerado extremamente bem) para trabalhar somente com a arquitetura de informação. =)

Obs: Já que você leu até aqui, pode deixar registrado sua opinião? Dê uma olhadinha nesse versão mais escura do layout em questão.

Só mais uma coisa: Pra você que não está acostumado a fazer wireframes, esta lista de softwares é uma dica muito preciosa

Conforme prometido, segue abaixo uma lista MUITO bacana (que achei neste site, não é pesquisa minha) de softwares que ajudam na confecção de wireframes.

► Axure RP (aplicativo para a produção de protótipos funcionais e wireframes, especificações de programas, acesso em 9.8.2008)
► Balsamiq mockups (modelos para esboços, acesso em 20.2.2009)
► Hot Gloo (ferramenta online que tem dois modos de trabalho, edição e revisão. Este último permite a inserção de notas e comentários, acesso em 18.8.2009)
► iPlotz (gratuito para até 5 páginas, mensalidade ou anuidade para número ilimitado de projetos, tem recursos de colaboração e recursos de gestão de projetos – com a verificação das tarefas já completas, por exemplo, acesso em 20.2.2009)
► Justinmind (além de wireframes, permite a instalação de ferramentas participativas, pelas quais os clientes podem inserir notas e comentários, acesso em 6.8.2009)
► JustProto (online, diagramas de processo, elementos padronizados, bom controle de texto, poucos eventos interativos, acesso em 28.5.2009)
► Lovely Charts (gratuito, aplicativo online para a criação de diagramas de fluxo, mapas de sites, organogramas, wireframes, de maneira intuitiva, acesso em 13.9.2009)
► MockFlow (ferramenta online com elementos arrastáveis e que permite que qualquer página seja transformada em master, acesso em 18.8.2009)
► Omnigraffle (diagramas, diagramas de processo, layouts simplificados, protótipos funcionais, acesso em 20.2.2009)
► Pencil Project (funciona com o Firefox para a produção de protótipos funcionais e wireframes, acesso em 9.8.2008)
► Serena Composer (disponível para compra, acesso em 15.9.2009)

Próximo Post

Do wireframe a arte final - Um passo-a-passo com dicas

Pra ficar ligado quando este post sair, basta assinar o RSS.

Abraços, e não deixe de comentar.

Este semestre (2009/2) os alunos da UVV matriculados em disciplinas ministradas à distância contam com várias novidades. Além de atualizar o ambiente virtual de aprendizagem para a versão mais atual, toda interface do Moodle foi customizada objetivando uma melhor experiência com o aluno.

Analogamente ao Google, almejamos uma interface extremamente simples e intuitiva, levando os alunos aos seus objetivos (assimilação do conteúdo proposto) rapidamente. Pode parecer um pouco óbvia esta observação, mas nem sempre é fácil deixar limpo um ambiente que já conta naturalmente com MUITOS recursos, poluído de informações (necessárias).

O conteúdo do ambiente virtual é restrito aos alunos da UVV, porém vou mostrar um pouco do ambiente no qual eles estão interagindo neste semestre.

Moodle 1.95+ - Customizado para boas experiências em 2009/2

A nova interface vai de encontro a identidade visual previamente existente do site da UVV Virtual.

Se quiser conhecer um pouco mais sobre o projeto, fique à vontade clicando aqui.

É importante lembrar que as duas telas mostradas acima são somente a casca do projeto, somente os pontos de entrada que os alunos utilizam até chegar no conteúdo proposto por cada disciplina. Apesar de não ser um ponto chave no quesito aprendizagem é fundamental que o aluno tenha uma mega power boa impressão do ambiente onde vai estar em contato direto e constante. Porque?

A primeira impressão é a que fica…

e assim como qualidade da embalagem de um bom produto diz muito do que se encontra lá dentro (leia-se Ferrero Rocher), o zelo com a interface e arquitetura de informação diz muito sobre a qualidade do projeto em geral.

Sendo assim, meu primeiro objetivo foi impactar positivamente o aluno, logo no primeiro acesso. Além de impactar a interface também precisa funcionar e “dizer” rapidamente aos alunos seus objetivos. Com poucos cliques espera-se que o aluno entenda que

• O conteúdo das aulas é dividido por semanas
• Existem limitações nas tentativas de exercícios
• Têm a sua disposição ferramentas de interação, como Fórum e Chats
• Também tem à sua disposição um professor tutor que pode responder dúvidas em tempo real, porém, em determinados horários
• Podem interagir com os demais participantes do curso
• Etc.

Tudo isso sem que haja um documento que explique passo-a-passo o funcionamento da ferramenta. Na verdade, isso é o desejável e felizmente se aplica na esmagadora maioria dos alunos, que geralmente trocaram os carrinhos e o futebol pelo computador em sua infância. Porém, não podemos esquecer de disponibilizar um recurso adicional para os mais metódicos – normalmente o público mais velho, que aprecia os detalhes.

Para eles é disponibilizado um PDF com todos os recursos do ambiente, descritos de forma detalhada, porém objetiva.

Imagem retirada do manual do aluno, explicando cada recurso no Moodle

Desta forma conseguimos agradar e satisfazer o público em geral.

Como saber se a interface está atingindo seus objetivos?

Existem muitas formas de responder esta pergunta.

Um filtro que eu posso dizer que funciona é a quantidade de ligações/e-mails que você recebe com reclamações do tipo: “Mais hein, onde está tal coisa? Não estou achando!”

Isso acontecia bastante quando utilizávamos o já ultrapassado Aulanet. Tá certo, sempre existirão pessoas cabeçudas com menos intimidade com a informática, mas se tratando de um projeto que atende um público grande não podemos descartar os tios e tias.

O método mais preciso certamente seria um teste formal de usabilidade. Fato.

Mas na falta deste recurso (muito caro) vale jogar com as cartas que se têm na manga. No meu caso foi dar uma de agente secreto, me “infiltrando” em algum laboratório da UVV observando os alunos acessarem o conteúdo. É muito curioso e intrigante ver como outras pessoas interagem e reagem com uma interface que você produziu sem saber que estão sendo observadas. Sério.

Dá “agonia” de ver alguém procurando algo pra clicar, aparentemente tão óbvio, que você já está cansado de saber onde está. Este é um grande indicativo que alguma coisa precisa melhorar. Eu utilizava bastante esse método de observação logo no começo do projeto (principalmente com as aulas). Acreditem: funciona, além de ser divertido =)

Outra forma, menos eficaz na minha opinião, é perguntar se o usuário/amigo teve alguma dificuldade ao acessar o conteúdo. As vezes você consegue-se extrair alguma informação que tenha passado a sua percepção. Se realmente deseja fazer isso, seja um designer paciente. Regule bem seu senso de abstração e esteja preparado para ouvir algumas asneiras considerações sem muitos fundamentos e pitacos. Muitos pitacos.

Pode parecer até um pouco arrogante da minha parte dizer isso, mas o próprio Steve Jobs já dizia que o usuário não sabe o que quer, até que você mostre pra ele como deve ser feito.

Este post foi um pouco superficial pois este é um assunto que pretendo desmembrar e detalhar por aqui.

No próximo Post…

Vou escrever sobre a utilização de jogos no processo de aprendizagem virtual. Pra ficar ligado nas novidades, assine o Feed no topo da página! Ah sim, seu comentário também é bem vindo.

Abraços

Mais uma vez o Internet Explorer foi responsável por fazer sair fumaça das minhas orelhas.  Trata-se de um bug que ocorre com a Ferramenta Lightwindow (Framework para visualização elegante de imagens e outras mídias). Primeiramente vou explicar como ela funciona, pra quem não conhece. Depois vou mostrar e detalhar os bugs que ocorrem com o maldito Internet Explorer.

Os diferenciais da ferramenta Lightwindow

Apesar do título do post remeter uma má impressão da ferramenta, gostaria de deixar claro que esta framework é fantástica e funciona perfeitamente com os outros browsers. Digamos que o Lightwindow é uma versão mais incrementada do Lightbox 2.0 – que hoje é muito utilizada e você provavelmente já deve ter visto em algum site.

Além de trazer novas funcionalidades, como:

• Conceito de galeria de imagens
• Abertura de SWF ’s juntamente com imagens
• Abertura de DIV’s contendo formulários, páginas htm, links externos, etc

seu grande diferencial é o redimensionamento da imagem de acordo com o tamanho livre no browser, conforme ilustrado nas imagens abaixo:

Mesmo com o tamanho do browser bem pequeno a imagem se ajusta perfeitamente, sem distorcer.

Vale a pena dar uma conferida no site do Lightwindow e futucar suas funcionalidades.

Os bugs com internet Explorer

Quando estava desenvolvendo meu portfólio eu reparei que algumas vezes as imagens abriam cortadas e distorcidas (somente no IE). Desconfiando de cache, eu renomeava as imagens e tudo se resolvia. Não dei tanta importância para isso e dei continuidade com o projeto.

Depois de pronto, publiquei o site e testei em outros browsers e também em outros computadores. O pesadelo começava! Em cada versão do IE aparecia um Bug diferente. Veja a imagem abaixo, captada do IE8:

Note que a parte escura que deveria ser um "aplha" por cima do site, aparece todo preto. Além disso, a imagem aparece cortada e distorcida.

Nesta outra imagem, o browser não consegue calcular o tamanho da imagem exibindo-a de forma errada. Veja.

Começei então buscar por soluções, fóruns e mais fóruns. Vi várias postagens desesperadas no fórum oficial da ferramenta com problemas idênticos aos meus.  Eu não podia aceitar que uma ferramenta tão bacana pudesse se render ao IE, muito menos ter que jogar fora todo trabalho já realizado.

Então eu pedi um help ao meu amigo Léo Hackin, que começou a analizar o código javascript. Fazendo um trackin das ações do script ele conseguiu identificar o bug neste trecho de código (que por sinal, alguém também já havia identificado).

Bom, começamos esta brincadeira era 11hs da noite. 12hs ele estava bufando. 1h ele já tinha levado pro lado pessoal. 3hs da manhã ele bateu o mouse na mesa e soltou alguns palavrões. Ele desistiu e eu também.

E aí, não existe solução para o problema?

Muita, mas muita gente está xingando o Kevin (criador da ferramenta), alegando que doaram uma certa quantia para obter o suporte do Lightwindow. Porém o cara sumiu e, até o momento, não se pronunciou a respeito dos bugs.

Resumindo: eu caí numa verdadeira CILADA, Bino.

OBS: Deixei a versão antiga do meu portfólio em para que vocês mesmos possam constatar os bugs.

www.lucascoradini.com/old

Espero que com este post eu possa poupar tempo de algum desenvolvedor web.

Abraços