Marco Gomes

Criador da boo-box. Empreendedor dedicado, nerd veterano, interneteiro profissional, cristão aprendiz, fotógrafo amador, marido apaixonado.

Textos marcados como ‘interface com usuario’

Organizando informação no tempo e no espaço

O objetivo de uma interface é auxiliar o usuário a completar algum trabalho. Pra que o trabalho seja executado, a interface deve apresentar informação, normalmente na forma de dados, ferramentas e elementos de interação. Parte do trabalho do designer de interfaces é organizar a informação que será apresentada ao usuário.

Informação pode ser posicionada no espaço ou colocada em fila no tempo.

Organizando informação no tempo

Painel de preferências do aplicativo Mail.app Nas telas de definição de preferências de aplicativos do Mac OS X[bb], a informação é organizada no tempo.

No aplicativo Mail, você pode definir suas preferências de SPAM em uma tela, e, em outra tela, define as preferências de tamanho e tipo de letra pra escrever as mensagens.

Os conjuntos de preferências são agrupados por similaridade em telas que são divididas no tempo, e você precisa trocar de tela (clicando) pra ver as outras preferências. Caso o designer preferisse, todas as preferências poderiam estar na mesma tela, organizadas no espaço.

Ao organizar a informação numa fila temporal o designer pode explicar melhor o que está acontecendo, facilita a interação do usuário que não precisa lidar com vários elementos de interface numa mesma tela, mas a tarefa vai levar mais tempo pra ser executada.

Organizar informação no tempo é recomendado em tarefas não repetitivas, que não podem exigir um “treinamento” do usuário, como processos de instalação de software (wizards), configuração de aplicativos, criação de documentos que sigam um modelo rígido.

Organizando informação no espaço

Tela de edição de post no aplicativo Blogo Na tela de edição de post do aplicativo Blogo, da Brain Juice, a informação é organizada no espaço.

Quando o usuário cria ou edita um post, toda a informação que ele precisa inserir está organizada no espaço de uma única tela. Caso o designer preferisse, o processo de postagem poderia ser um wizard, que primeiro te perguntaria o título do post, numa segunda tela perguntaria o texto do post, na terceira tela pediria as tags, e assim por diante, até conseguir todas as informações para criar um post completo.

Ao organizar a informação no espaço o designer permite que usuários terminem a tarefa mais rapidamente e sem exigir uma ordem correta para interação com elementos, diminuindo a sensação de estar fazendo uma tarefa repetitiva.

Organizar a informação no espaco é recomendado em tarefas repetitivas, que precisem ser completadas rapidamente e permitam uma curva de aprendizado para usar a interface, como criação de “tarefas” em aplicativos de controle de projetos, criação de posts em blogs, inserção de indivíduos em agendas telefônicas, criação de e-mails.

fikdik rsrsrs

Quando projetar suas interfaces, julgue com cuidado que tipo de informação precisa estar organizada no tempo e no espaço, uma falha neste planejamento pode afastar usuários da sua aplicação.

Para saber mais, veja Learning from “bad” UI.

Interfaces Modais e Quasimodais

Projeto de Interfaces

Pretendo, a partir de agora, escrever um pouco sobre a construção de interfaces, na minha eterna luta por tornar o mundo um pouco melhor e os computadores mais fáceis de usar… Pra quem não sabe, o boo-box surgiu da pergunta: E se eu pudesse clicar na foto e comprar o All Star que a Gisele Bündchen está usando?

A construção de interfaces é normalmente tomada como frescura por profissionais de outras áreas do desenvolvimento de aplicativos e websites, é comum vermos sistemas extremamente complexos, com mais tabelas no banco de dados que a quantidade de ex-namoradas do programador, processo de produção minuciosamente acompanhado por um profissional de gestão de projetos, seguindo regras ITIL e ISO, mas com interface sofrível e absurdamente não utilizável.

Jef Raskin foi um visionário, fundou o projeto Macintosh e mudou o mundo com suas idéias sobre Interfaces Humanas[bb] (saiba mais na Wikipédia). Um de seus principais pilares era “tarefas simples devem permanecer simples”. Por que ajustar a hora em relógios digitais é tão complexo enquanto em relógios analógicos (de ponteiros), que são mais antigos, é tão fácil? Por que achar aquele doc sobre “A Teoria Cognitiva de Piaget” no seu Windows Explorer é tão mais difícil que achar um documento na sua pasta da faculdade? Tarefas simples devem permanecer simples.

Interfaces Modais facilitam o erro

Interfaces Modais têm seu comportamento alterado de acordo com um comando do usuário. Um bom exemplo é a tecla Caps Lock, você ativa ela sem querer, ou se esquece que ativou, E DE REPENTE SEU TEXTO COMEÇA A GRITAR COM O LEITOR. Teria evitado várias brigas no MSN caso isso pudesse ser deligado. O maior problema é que os usuários esquecem que mudaram o modo da interface e ela passa a se comportar de maneira inesperada. Tenho um amigo progamador que arranca a tecla “Power” de todos os teclados que usa, pra não desligar o computador por engano.

Interfaces Quasimodais dificultam o erro

A solução proposta por Raskin para Interface Modal era a Quasimodal, quasi em grego significa (adivinhe?) quase. Ou seja, interfaces “perto de serem modais”.

Uma interface quasimodal exige que o usuário ativamente mantenha o modo ativado, um bom exemplo é a tecla Shift, eu duvido que alguém tenha “gritado” com seus leitores por “esquecer que estava com o dedo no Shift”. Outro exemplo são os microfones de aviões, aeroportos ou lojas de departamento, caso a ativação seja simplesmente pressionando um botão, podem ocorrer situações em que o microfone fica transmitindo conversas inapropriadas. Se a ativação for pressionando constantemente um botão, esses erros desaparecem, ninguém vai xingar o chefe enquanto estiver pressionando o botão de “transmitindo”.

Outro exemplo de erro em interfaces modais são as janelas de monólogo, famosos alertas usados em websites e programas de desktop, uma janela com uma frase qualquer e somente uma opção: o botão Ok. Quantas vezes eu digitei caracteres insanamente, nervoso por meu “teclado ter parado de funcionar ou o computador estar travado” quando, na verdade, havia um alerta escondido embaixo de alguma janela ou perdido no segundo monitor (quando estou usando dois).

JavaScript Alert
Alerta “monólogo”.

A solução, segundo Raskin, são mensagens semitransparentes, que desaparecem após alguma ação do usuário, como movimentar o mouse ou apertar qualquer tecla. Somado a isso podemos ter um log das mensagens, caso o usuário perca a mensagem pode olhar no log e verificar quais foram os avisos que recebeu. Essa solução resolve o problema do falso travamento e melhora a usabilidade, pois você não precisa clicar no inútil “Ok”.

Aviso semitransparente da boo-box
Aviso semitransparente após o envio de e-mail no boo-box

capa de The Human Interface

Você pode conferir as idéias de Jef Raskin no livro “The Humane Interface”[bb], de 2000, onde ele destrincha, com certo humor, os erros das interfaces computacionais que estamos acostumados a usar e propõe boas soluções, mostrando que nem sempre “manter a solução que já vem sendo utilizada” é a solução mais inteligente para um problema.

Além do livro confira também o blog da Humanized, a empresa de Aza Raskin, o filho do gênio, onde ele dá continuidade ao trabalho do pai, que morreu em 2005.

Um bom exemplo de interface que leva em consideração as idéias de Jef e Aza Raskin é o Songza.com (via Cairo Gomes). Projetado pelo próprio Aza, é um sistema que busca músicas pra serem ouvidas facilmente, pegando videos do YouTube e tocando apenas o áudio, preste atenção na facilidade e fluidez de uso da aplicação.