jump to navigation

TAXONOMIAS Abril 14, 2008

Posted by edersonmelo in Arquitetura e Design de Sistemas Para Web(e intranet).
Tags: , ,
add a comment

TAXONOMIAS

Voltando depois de ter estudado PROTOTIPAGEM E WIREFRAMES, Resolvi estudar o quanto podemos atrapalhar os usuários durante a utilização das aplicações que desenvolvemos seja ela intranet ou sites. Eis que percebi o que você já deve saber a algum tempo(sei que to atrasado nos estudos e nem precisa ficar rindo:) ,como usamos termos técnicos em nossas aplicações.  Estes termos em vez de ajudar atrapalha o usuário, que muitas veses, tem que parar para entender, ou arriscar e clicar pra ver no que dá.

Um exemplo é no meio no qual trabalho. Se eu usar o termo editar em uma aplicação e o jornalista que não está acostumado com a ferramenta, resolver usalá vai pensar, por alguns miléssimos de segundo no mesmo editar usado por eles:

“No mundo jornalístico, a palavra “editar” significa a revisão e eventual correcção de um artigo por parte de um Editor ou de um Chefe de Redação.”

Claro que com o tempo a maioria dos jornalistas se acostumou a usar o termo editar nos dois sentidos. Editar artigo(como exemplo) e editar o artigo no software.

Bom at+ então…

Abraço,
Ederson Melo

WIREFRAMES!? Abril 14, 2008

Posted by edersonmelo in Arquitetura e Design de Sistemas Para Web(e intranet).
Tags: , , , , , , , , ,
add a comment

WIREFRAMES!?

O que é um WIREFRAMES?
Um wireframe é um documento elaborado durante a fase de arquitetura de informação de um projeto web que tem como função estruturar o conteúdo de cada página, indicando o peso e relevância de cada elemento do layout e a sua relação com os demais elementos formadores do todo.

Além desta função estrutural, o wireframe também é utilizado para a marcar etapas de um processo de interação entre o utilizador e o sistema, fornecendo um wireframe por cada ecrã que explique detalhadamente todos os elementos presentes na página e como o utilizador pode interagir com eles.

A origem do nome “wireframe” vem da união de duas palavras em inglês: “wire” (linhas) e “frames” (ecrãs). Ou seja, são ecrãs de baixa resolução e com um aspecto gráfico muito comun que servem apenas para indicar onde devem estar localizados os objetos e menus de interação.mostrando assim os aspetos gráficos de uma aplicação.

Elaborando wireframes, podemos concentrar-nos somente nas questões da interface – como acessibilidade e usabilidade – deixando questões estéticas para uma próxima etapa. Além disso, é possível discutir melhor com o cliente em cima de um wireframe. Se ele decide mudar alguma coisa, é mais fácil mudar um esboço do que um layout pronto. Salvo claro que esta etapa podemos tratar durante a prototipagem em papel (portanto mais rápido e mais barato).

Como desenhar um wireframe?

Existem algumas aplicações com funções específicas para desenhar wireframes, entre elas temos o Microsoft Visio, o OmniGraffle, o Adobe Illustrator ou o Adobe InDesign.

A vantagem de desenhar em XHTML é que os protótipos são funcionais e na fase de concepção poupa-se trabalho porque o esqueleto das páginas já está feito. Mas perde-se muito mais tempo a codificar o XHTML e o CSS correspondente do que se desenharmos os ecrãs através de objetos “drag & drop”.

Fidelidade

A primeira coisa a se fazer quando começamos a projetar wireframes é definir se eles serão construídos em baixa, média ou alta fidelidade. Todos têm suas vantagens e desvantagens e a opção por um deles varia de acordo com as necessidades do projeto.

Os de baixa-fidelidade não possuem elementos gráficos nem conteúdo real.
Os de média-fidelidade possuem um grau de detalhamento maior, indicando aspectos de conteúdo, layout e sistemas de navegação. Já os de alta-fidelidade chegam mais próximo do que será o design gráfico, simulando com exatidão tamanho da página e das fontes e podendo servir como protótipos.

Cor

O uso de cores deve ser evitado eu por exemplo utilio branco e tons de cina. Isto evita confunidr o designer gráfico com as cores que realmente a aplicação deva ter.

Consistência

O ideal também é manter a consistência portanto, manter um mesmo posicionamento e tamanho de elementos que se repetem ao longo das páginas que serão esboçadas nos wireframes.

Anotações

Sempre que algum ponto ficar confuso ou obscuro o ideal seria colocar um comentário para que possamos ter uma real em relação a dúvida que surge.

Também é importante manter nos wireframes uma numeração lógica, o nome do autor, o projeto a que ele se refere, quando foi construído e quando foi modificado pela última vez. Se for necessário, um histórico de modificações também pode ser providenciado.

OPINIÃO DE UM TERCEIRO SITE QUE CONSULTEI A ALGUM TEMPO–

” Programas para construção de wireframes

O melhor programa que conheço para construção de wireframes é o Axure RP Pro11. Como ele foi concebido quase que exclusivamente para esta função, é um software bastante completo e que já vem com todas as tradicionais formas do wireframes embutidas em uma biblioteca própria.

Outra grande vantagem do Axure é que ele gera protótipos navegáveis. Ou seja, você pode fazer com que os links levem a determinado wireframe, permitindo que o protótipo seja testado e validado antes de seguir para o design gráfico. Esses protótipos são exportados em HTML, levando consigo tanto o índice geral no lado esquerdo quanto as anotações no rodapé da página.

“

VOLTANDO….

O software mais utilizado no mercado é o Microsoft Visio. O Visio é uma ferramenta para construção de gráficos em geral, bastante fácil de usar e com a possibilidade de importar bibliotecas de formas que ajudam na construção dos wireframes.

Mas você pode construir seus wireframes em qualquer aplicação gráfica, até mesmo no velho powerpoint.

Bom espero que tenham gostado voltaremos…

Abraço,
Ederson Melo

PROTOTIPAGEM EM PAPEL Abril 14, 2008

Posted by edersonmelo in Arquitetura e Design de Sistemas Para Web(e intranet).
Tags: , , ,
add a comment

PROTOTIPAGEM EM PAPEL

Quando vc trabalha com desenvolvimento uma das partes primordiais é a entrevista com o cliente. Entender, ver, sentir o que ele deseja.

Daí podemos analisar todos os dados recolhidos e pensar, se for o caso, em um workflow para a aplicação.

Onde entra a PROTOTIPAGEM EM PAPEL?

A prototipagem em papel é uma maneira fácil e rápida de criar esboços de páginas que podem ser usadas para fazer testes com os utilizadores.

Porquê em papel? Porque em papel dá para apagar e começar tudo de novo e é mais rápido de desenhar do que se fosse feito através de algum software.

Na prototipagem podemos recolher dados sobre:

  • Conceitos e terminologia: Podemos ver os termos escolhidos nos formulários?
  • Navegação: Como ficará, é o ideal, complexo de mais, longo se entender?
  • Conteúdo: A aplicação tem as informações que os usuários desejam ver?
  • Layout da página: Dá para ver os campos, se são idéias, são o esperados, contém informação em excesso?
  • Funcionalidade: O que é apresentado no papel é o que eles necessitam? vai ser falta algo?

E os benefícios incluem:

  • Testar o layout antes de começar a programar: Algumas funcionalidades podem ser complexas para programar, e no papel podemos verificar se são realmente necessárias e qual a complexidade de cada uma.
  • Fazer alterações rapidamente: Com os protótipos em papel podemos rapidamente apagar ou escrever por cima.

Estou criando a PROTOTIPAGEM EM PAPEL de 4 aplicações e pretendo terminar até o final do mês, destas 4 apenas uma não é minha.

Bom por fim é isso, o que achou? Então comenta aí!

Abraço,
Ederson Melo