Davi no SMD: maio 2014

Neste post irei fazer uma análise da usabilidade de uma aplicação feita no Processing, os autores que serão utilizados como referência são o Jakob Nielsen e o Steve Krug.

Podemos definir Usabilidade como:

"Usabilidade significa fazer algo que funciona bem, e que uma pessoa não muito experiente consiga usá-lo para a sua devida finalidade, sem nenhuma frustração durante esse processo."(Krug)

Nielsen é um cientista da computação com PHD em Interação Humano-Computador e criou 10 heurísticas para avaliar a usabilidade. Podemos definir uma heurística, segundo a wikipédia, como: Um método ou processo criado com o objetivo de encontrar soluções para um problema.

Steve Krug é um pesquisador na área de usabilidade e escreveu um livro chamado "Don't make me think" que trata do tema usabilidade e interação humano-computador.

Link da aplicação: http://vimeo.com/6875954

Olhar para as barras de seleção de cor e de tamanho.

Neste printscreen temos 5 elementos de interação (3 checkboxes, 2 barras de seleção e 4 textos informativos), as barras de seleção são bastante interessantes para a interação com o sistema, já que elas indicam o estado do "pincel". A barra de seleção de cor se modifica de acordo com a cor escolhida e o tamanho da barra "Pen Size" engrossa e afina facilitando a compreensão da aplicação por parte do usuário. Tal característica representa uma das heurísticas de Nielsen que diz:

"Feedback:

O sistema deve informar continuamente ao usuário sobre o que ele está fazendo.
10 segundos é o limite para manter a atenção do usuário focalizada no diálogo."

Apesar de ter utilizado respostas visuais bastante eficientes a interface erra na aplicação das checkboxes e do texto informativo na parte inferior da tela.

A aplicação falha ao deixar o usuário pintar sobre a informação de limpar a tela.

"Os usuários não gostam de quebra-cabeças na hora de fazer as coisas. Isso é fato. Se as pessoas que projetam interfaces não se importarem suficientemente em criar coisas óbvias, podem abalar diretamente a confiança dos usuários sobre o seu site."(Krug)

As checkboxes são extremamente não intuitivas o que contradiz o que Krug aponta como ideal, podendo fazer que o usuário perca tempo e acabe por ter dificuldades em dizer o que o designer quis passar ao usuário. Outra falha é o fato da aplicação permitir que o usuário desenhe sobre a informação de limpar a tela.

A aplicação possui um misto em erros e acertos segundo a heurística de Nielsen que fala sobre atalhos.

"Atalho

Para usuários experientes executarem as operações mais rapidamente.
Para usuários leigos o sistema precisa ser fácil de usar.
Abreviações, teclas de função, duplo clique no mouse, função de volta em sistemas hipertexto.
Atalhos também servem para recuperar informações que estão numa profundidade na árvore navegacional a partir da interface principal."

Não há um botão que possa limpar a tela, utilizasse apenas um atalho por teclado, além disso o texto informando o teclado ainda pode ser encoberto pelo usuário. Acredito que o melhor seria possuir um botão e ter o atalho, assim um usuário mais experiente poderia aprimorar sua utilização do programa e o usuário mais leigo poderia recorrer à algo mais intuitivo como um botão.

Uma sugestão seria a criação de botões e atalhos para desfazer ou refazer uma operação(Undo e Redo) segundo o Livro "Don't make me think" do Krug: "Usuários ainda são apegados ao botão de “voltar”", ou seja : Mesmo com uma boa usabilidade, não é difícil ver usuários errando o caminho de vez em quando durante a navegação. Para isso, basta um clique equivocado em um momento de pressa. Apesar dos estudos de Krug serem focados para a parte de web, podemos adaptar esse conceito aos botões de undo e redo propostos acima.

Resumo:

Pontos negativos

Não intuitividade sobre o funcionamento das checkboxes.
A possibilidade de desenhar sobre um texto que passa uma informação importante sobre o uso da aplicação.
Falta de botões para usuários leigos. (Ausência de botões)

Pontos positivos

O bom feedback do sistema em relação ao estado do pincel (Cor, tamanho do traço).
A pintura é feita de forma intuitiva.

Melhorias propostas

Separação do menu de configuração do pincel do quadro onde será executado a pintura.
Criação de botões (limpar a tela, desfazer uma ação, refazer uma ação).
Criação de atalhos para modificar o pincel (mudar cor ou tamanho)
Criar labels para os checkboxes de randomico.

Sugestão de interface

Referências:

http://www.tidbits.com.br/as-10-heuristicas-de-usabilidade-do-nielsen
http://www.uxdesign.blog.br/usabilidade/10-licoes-de-usabilidade-de-steve-krug/
http://pt.slideshare.net/huxleydias/as-10-heursticas-de-nielsen
http://corais.org/node/99
http://en.wikipedia.org/wiki/Jakob_Nielsen_%28usability_consultant%29
http://en.wikipedia.org/wiki/Steve_Krug
http://pt.slideshare.net/barao/conceitos-de-usabilidade

Segue o código:

PImage imgOriginal;
PImage img2;
float r, g, b;

void setup()
{
  size(320, 240);
  imgOriginal = loadImage("original.jpg");
  img2 = loadImage("personagem.jpg");
}

void draw()
{
  crossFadeCroma(imgOriginal, img2, 30);
}

void crossFadeCroma(PImage img1, PImage img2, float alfa)
{
  {

    loadPixels();
    alfa = alfa/100;
    
    for (int x = 0; x < 320; x++)
    {
      for (int y = 0; y < 240; y++)
      {
        pos = y * 320 +x;
        r = alfa*red(img1.pixels[pos]) + (1-alfa)*red(img2.pixels[pos]);
        g = alfa*green(img1.pixels[pos])  + (1-alfa)*green(img2.pixels[pos]);
        b = alfa*blue(img1.pixels[pos])  + (1-alfa)*blue(img2.pixels[pos]);
        pixels[pos] = color(r, g, b);
      }
    }
    updatePixels();
  }

}

Davi no SMD

terça-feira, 27 de maio de 2014

Análise de interface

terça-feira, 13 de maio de 2014

Criação de Cross-Fade.

Tratamento de Imagem

quarta-feira, 7 de maio de 2014

Questão 3 - Prova