Projeto de interface Avançado
Aqui iniciamos os elementos essenciais para planejamento web e desktop.
Desktop
Painéis de controle
Janelas
Apresentam graficamente os comandos, as ferramentas e os dados de determinada aplicação.
Caixa de Diálogo
Apóiam a operação de funções específicas e bem delimitadas, provendo troca de informações. É uma janela secundária que apresenta ou recebe informações adicionais do usuário
Formulários
É uma caixa de diálogo destinada especificamente à entrada e consulta de dados, com opções de comandos específicas para o registro e a manutenção desses dados.
Caixa de Mensagem
É uma caixa de diálogo que apresenta informações sobre uma situação ou condição particular.
Seleção
Menus
Proporcionam aos usuários escolhas que podem ser de comandos, ou de opções relacionadas a um comando (PREECE; ROGERS; SHARP, 2005). SegundoPressman (2007), o menu simples proporciona ao usuário um contexto global, e é menos propenso a erros do que o formato de linha de comando, mas seu uso pode ser tedioso. Use quando o número de escolhas é limitado ou para facilitar o aprendizado de usuários inexperientes para o aplicativo. Assim, poderá fornecer navegação facilitando a orientação dentro do sistema. Existem tipos de menus, a saber: suspensos (drop-down), instantâneos (pop-up), ou de diálogo simples.
Barra de Menu
Ela é apresentada abaixo do título da interface e contém as chamadas para outras intercaces.
Barra de Ferramentas
A barra de ferramentas é um painel não modal (o usuário continua seu trabalho sobre uma outra janela ou caixa de diálogo, sem fornecer uma resposta imediata a caixa não modal), que contém conjuntos de controles projetados para fornecer o acesso rápido a comandos específicos. Combina a idéia de um conjunto de ferramentas com uma barra (PREECE; ROGERS; SHARP, 2005). Use para comandos globais e que são usados com freqüência.
Caixa de Combinação (Combo Box)
É um objeto que permite a entrada de dados através de uma forma de interação que combina seleção e edição.
Barra de Rolagem
A barra de rolagem combina o conceito de rolo com uma barra, em um gráfico de barras (PREECE; ROGERS; SHARP, 2005).
Lista de Seleção
É uma lista que apresenta valores para entrada de dados e que permitem ao usuário selecionar um ou mais opções desejadas. Ela pode ser classificada como textual, gráfica e mista
Procure incluir barra de rolagem. Elas podem ser usadas para calendários quando a densidade na tela é baixa, ou para paleta de cores quando quiser apresentar um conjunto de dados do tipo gráfico (para seleção de cores).
Caixa de Agrupamento
Contém um grupo de informações relacionadas. É utilizado por razões semânticas ou ergonômicas de apresentação.
Controle – Botões de Rádio (Radio Button)
São grupos de botões que permitem ao usuário escolher entre uma ou outra opção.
Controle – Caixa de Atribuição (Check Box)
Permite o usuário escolher uma ou mais opções dentro de um grupo.
Controle - Botão de Comando (Command Button)
É um botão que contém uma ação a ser executada, normalmente um OK ou, CANCELA, em sua maioria tem formato retangular com um texto objetivo sobre a ação a ser executada.
DIRETRIZES PARA INTERFACES WEB
Neste momento, precisamos considerar que para o uso de interfaces web o tempo é sempre diferente em relação ao uso de interfaces desktop. Os usuários têm menos tolerância com as interfaces, pois desejam que a velocidade de carregamento das páginas seja alta, e também com menos atrasos. Mas, em compensação o usuário sente-se mais no controle da interação, se nas páginas visitadas houver indicativos de links visitados ou não, ou ainda o caminho de migalhas. Como também, permitir que o usuário possa voltar para a home page, a partir de qualquer lugar que esteja navegando. Esses e outros padrões de interação são descritos a seguir, juntamente com alguns exemplos de suas aplicações.
Entenda um pouco mais sobre a condução na criação de sites:
Links
Para saber mais sobre diretrizes para a confecção de páginas Web Acessíveis, acesse o site: http://www.w3.org/ [W3C The World Wide Web Consortium].
Padrões de IHC definidos por Welie
Sobre Navegação
Menu sem cabeçalho
Problema: usuário precisa acessar seções principais do site.
Solução: Combinar menus na vertical usando diferentes pistas visuais ou invés de cabeçalhos.
Caminho de Migalhas
Problema: usuário precisa conhecer onde ele esta na estrutura hierárquica e voltar a navegar no mais alto nível desta hierarquia.
Solução: Mostrar o caminho hierárquico do nível mais alto até a página atual e tornar cada caminho um link.
Diretórios de Navegação
Problema: o usuário precisa escolher um item de fora do conjunto de itens.
Solução: resumir nível 1 e nível 2.
Duplo Guia de Navegação
Problema: os usuários necessitam navegar em uma estrutura hierárquica.
Solução: use uma guia tabular para mostrar os dois níveis mais altos da hierarquia.
Menu Fly-Out
Problema: usuários precisam ter acesso direto a sub navegação, mas a quantidade de espaço na tela de navegação é limitada.
Solução: Combinar navegação horizontal com um sub menu que aparece (flies-out) quando o usuário para sobre um item do menu principal.
Link para a Home Page
Problema: usuários precisam voltar para um ponto de início familiar.
Solução: usar um elemento fixo, tal como a logo do site, como um link para a página inicial.
Navegação Principal
Problema: usuários precisam conhecer onde eles podem encontrar o que estão procurando.
Solução: Colocar um menu sempre visível, em uma posição fixa na tela.
Navegação por Mapa
Problema: usuários precisam encontrar uma localização da sua escolha em um mapa.
Solução: Mostre um mapa com os pontos de interesse e fornece links de navegação para todos os cantos.
Meta de Navegação
Problema: usuários querem conhecer com quem eles estão lidando.
Solução: reserve uma área em todas as páginas para comunicação e elementos de navegação secundários.
Minesweeping
Problema: usuários precisam similar a interação com elementos de navegação.
Solução: mostre nos elementos gráficos que ao posicionar o mouse em cima revela seu significado.
Menu Repetido
Problema: usuários precisam acessar o menu principal.
Solução: repita o menu principal no final da página [rodapé].
Caixa de Atalho
Problema: usuários desejam acessar funcionalidades especificas em um caminho direto.
Solução: permita que os usuários selecionem importante localização em uma combobox.
Link para o topo da página (to-the-top)
Problema: usuários precisam voltar para o início da página.
Solução: forneça um link para o topo da página.
Árvore de Navegação
Problema: usuários precisam encontrar um item na navegação principal.
Solução: seções (em pilha) são abertas verticalmente, ao mesmo tempo em que o usuário digita o conteúdo.
Interações Básicas
Botão de Ação
Problema: usuários precisam tomar alguma importante ação, que é relevante no contexto da página que ele está visualizando.
Solução: Use um botão de apertar (push-button), com a ação tendo um verbo significativo como parte do rótulo (label).
Paginação
Problema: usuários precisam navegar entre uma grande lista de itens de interesse.
Solução: representar o resultado da busca por agrupamento em páginas, com um número fixado de itens e permitir que o usuário escolha facilmente qualquer dos itens listados.
Botão Pulldown
Problema: usuário precisa selecionar um item fora do conjunto de itens.
Solução: mostre os itens por suas representações visuais, em uma lista circular. Tal que um dos itens pode ser selecionado na hora.
Slideshow
Problema: usuários querem ver uma série de imagens ou fotos.
Solução: mostre cada imagem por alguns segundos e forneça controle para navegar manualmente tanto para trás como pra frente, assim como no caso de parar a apresentação.
Passo a Passo
Problemas: usuário precisa ver em ordenação linear o conjunto de itens.
Solução: permitir aos usuários ir para a tarefa anterior ou próxima, também por meio de links.
Wizard
Problema: usuário precisa alcançar uma única meta, mas várias decisões precisam ser tomadas antes da meta ter sido alcançada completamente. Esta pode não ser conhecida pelo usuário.
Solução: usuário realiza a tarefa um passo de cada vez. Mostrando cada passo ainda existente, e quais têm sido completados.
Busca
Busca Avançada
Problema: usuários precisam encontrar um item especifico em uma grande coleção de itens.
Solução: ofereça uma busca especial e avançada função de busca, com termos estendidos, correspondentes e com opções de saída.
Qstões freqüentemente perguntadas (FAQ – Frequently Asked Questions)
Problema: usuários têm questões relativas ao site, ou aos seus tópicos.
Solução: crie uma página com as questões freqüentemente perguntadas (FAQ) e fornece pequenas respostas.
Caixa de busca
Problema: usuários precisam encontrar um item ou uma informação especifica.
Solução: ofereça a busca.
Área de busca
Problema: usuários precisam encontrar uma página.
Solução: use uma área dedicada com diferentes tipos de funcionalidade de busca.
Resultados de busca
Problema: usuários precisam entender a lista de resultados.
Solução: forneça pequenos resultados com pequenas descrições.
Tipos de busca
Problema: usuários precisam conhecer o mecanismo de busca.
Solução: ofereça ajuda em palavras-chave e em opções correspondentes.
Índice do site
Problema: usuários precisam encontrar uma página especifica.
Solução: mostre todas as páginas em índice em ordem alfabética ou por tópicos.
Mapa do site
Problema: usuários precisam encontrar uma página específica.
Solução: mostre o mapa do site.
Mapa do site no rodapé
Problema: usuários precisam encontrar uma página específica.
Solução: mostre um conjunto de links categorizados no rodapé de cada página.
Tags
Problemas: usuários precisam conhecer quais tags são freqüentemente usadas e sua popularidade.
Solução: liste as tags mais comuns ordenadas alfabeticamente e indique as mais populares com fontes de tamanho maior.
Lidando com dados
Construtor de listas
Problema: usuário precisa construir e gerenciar uma lista de itens.
Solução: mostre a lista completa e ofereça funcionalidade de edição.
Visão geral em Detalhes
Problema: usuário deseja verificar objetos que são parte de um conjunto.
Solução: mostre uma visão geral de todos os objetos e mostre os detalhes do objeto selecionado em uma nova página.
Nenhum comentário:
Postar um comentário