Interface Com o Usuário Técnicas de Projeto

Apresentação em tema: "Interface Com o Usuário Técnicas de Projeto"— Transcrição da apresentação:

1 Interface Com o Usuário Técnicas de Projeto
Tipos de Aplicativos e Arquiteturas

2 Interface com o Usuário
Introdução Existem dois aspectos estruturais relacionados ao projeto de software de IHC: 1. O aspecto lógico, que descreve as relações entre os documentos e define as ligações entre os documentos; e 2. O aspecto físico, que descreve onde o documento está hospedado, por exemplo: em CDROM ou num servidor Web. É importante observar que, para o usuário, a estrutura lógica de navegação em um projeto é mais importante do que sua estrutura física. Interface com o Usuário

3 Relacionamento usuários x interface
Usuários não se preocupam com a origem da informação; Não necessitam saber que acionadores de discos contém qual dado; Nem como se deve organizar sua árvore de diretórios; Portanto não se deve expor aos usuários o caminho dos documentos, isto é, sua estrutura física; O projetista deve sempre ter o conhecimento da estrutura física do sistema, mas não o usuário. Interface com o Usuário

4 Interface com o Usuário
Exemplo Um arquivo em particular está situado numa região profunda na árvore de diretórios em um sistema de gerenciamento de arquivos com um caminho do tipo: D:\Documentos\Cursos\IHC\Aulas\Semana01\S01-Teoria.doc entretanto, na perspectiva do usuário o mesmo arquivo pode ser visualizado a partir da seguinte URL: Interface com o Usuário

5 Interface com o Usuário
Mapas de movimentação Servem para mapear a estrutura de movimentação do usuário através de um sistema de software Um mapa de movimentação é um gráfico do fluxo lógico da interface interativa. São 4 as estruturas fundamentais de organização da movimentação: Estrutura Linear, os usuários movimentam-se seqüencialmente, de um quadro ou campo de informação para outro; Hierárquica, a movimentação é ao longo das ramificações de uma estrutura de árvore formada pela lógica natural do conteúdo; Não-Linear, os usuários movem-se livremente através do conteúdo do projeto, livres de caminhos predeterminados; Composta, movimentação livre (de forma não-linear), mas ocasionalmente são obrigados a apresentações lineares de movimentos ou informações. Interface com o Usuário

6 Interface com o Usuário
Estrutura Linear É a mais conhecida de todas as estruturas de navegação em documentos, devido a influência do estilo de organização dos tradicionais meios impressos. Por exemplo: Livros são geralmente escritos uma página após a outra em uma ordem linear. A forma de apresentações à moda linear normalmente é muito útil em procedimentos de apresentação passo a passo, entretanto existem momentos em que uma informação complementar torna-se necessária. As formas lineares podem ser um pouco modificadas para permitir maior flexibilidade, entretanto corre-se o risco da degeneração em outras formas mais complexas. Interface com o Usuário

7 Estrutura linear básica
A organização puramente linear facilita a progressão ordenada através da informação. Normalmente utilizada em apresentações de slides que permitem ao usuário conhecer melhor a respeito de um assunto. Utilizando a forma linear o projetista tem a certeza de que o usuário receberá a informação na forma desejada. Interface com o Usuário

8 Características do estilo linear
É altamente previsível e o projetista sabe exatamente para onde o usuário irá na próxima interação. Assim, é possível realizar uma operação de pré-carga (preload ou precache) da próxima tela de interação de modo a aumentar a performance do sistema, principalmente se for uma apresentação pela internet. Por exemplo: Enquanto o usuário recebe a informação de uma tela, as imagens da próxima tela podem ser carregadas para a área de arquivos temporários da internet (cache) do navegador (browser). Quando o usuário avançar para a próxima tela, esta será carregada diretamente da área de arquivos temporários, dando ao usuário a ilusão de que as páginas carregam rapidamente. A pré-carga só é uma solução viável quando o próximo passo do usuário possa ser antecipado, como no caso da organização linear. Interface com o Usuário

9 Facilidades de navegação linear
Devido ao fato de só existir navegação para frente ou para trás, o usuário poderá se sentir “preso” utilizando a forma linear de navegação. Assim, é importante fazer com que o usuário sempre saiba onde ele se encontra na estrutura linear e quais são as informações prévias e as informações seguintes à tela que está sendo assistida. Isso pode ser feito simplesmente colocando o título “Página X de Y” onde X corresponde ao número da página atual e Y é o número total de páginas. Interface com o Usuário

10 Estrutura linear alternativa
A organização linear é útil para apresentar informação em uma ordem predeterminada, pois ela fornece poucas formas de interação entre o usuário e a informação. O modelo de organização Linear com Alternativa simula a interatividade fornecendo duas ou mais formas de navegar pela interface, que eventualmente terminam com o usuário tendo que voltar para a página anterior numa seqüência. Interface com o Usuário

11 Interface com o Usuário
Exemplo de aplicação Um questionário onde o usuário necessita responder com “Sim” ou “Não” a uma pergunta em cada página, fazendo o usuário avançar para a próxima página com base na sua resposta. Embora possa parecer ao usuário que exista alguma tecnologia por trás da aplicação, na verdade os dois caminhos já foram pré estabelecidos, mas são transparentes para o usuário que acaba tendo uma ilusão de interatividade. Apesar da aparência, a estrutura linear com alternativas preserva a linearidade geral da navegação pela interface. Entretanto, as possibilidades múltiplas de caminhos de interação compromete a pré-carga das páginas no caso de utilização na internet tornando sua interatividade mais lenta. Interface com o Usuário

12 Estrutura linear com opções
É um bom tipo de estrutura quando deseja-se preservar o caminho principal, mas acomodando pequenas variações nesse caminho, tal como saltando algumas telas (páginas) em particular. É útil para inspeções on-line onde alguns usuários poderiam saltar algumas questões. Permite a linearidade de navegação com a opção de pular para frente em várias telas de navegação na estrutura. Interface com o Usuário

13 Interface com o Usuário
Exemplo de utilização A apresentação de uma fábrica de bicicletas: Enquanto algumas páginas podem ser comuns a todas as bicicletas, certas páginas podem ser puladas por um usuário interessado particularmente em mountain bikes ou em bicicletas de pista. Este tipo de organização também simula um sistema inteligente embora seja simplesmente um conjunto de arquivos estáticos. Interface com o Usuário

14 Estrutura linear com linhas paralelas
Permite diversos tipos de controle. Ainda que o usuário possa realizar uma pequena navegação para fora da linha principal, a estrutura o forçará o seu retorno para a seqüência principal, preservando o fluxo original. Interface com o Usuário

15 Interface com o Usuário
Exemplo de utilização Um artigo a respeito do funcionamento do sistema de combustível de um automóvel é apresentado em uma forma linear. Nesse caso poderia existir um link em uma palavra particular, tal como pressão, que o levaria a uma página tangencial com a definição da palavra ou talvez a um pequeno conjunto de telas (ou páginas) discutindo qual a relação entre o combustível e a pressão no motor do automóvel. Eventualmente pode existir um caminho em paralelo finalizando a interação ou retornando para a tela principal. Uma navegação em paralelo pode ser, por exemplo, um link para um artigo de uma revista. Ao invés de tirar a concentração do usuário do assunto principal, esta pequena quantidade de informação poderá aumentar sua experiência Interface com o Usuário

16 Interface com o Usuário
Estrutura de Grade Tipo de estrutura dual apresentando tanto um relacionamento entre as telas de navegação no sentido vertical quanto no sentido horizontal. Devido ao fato da grade possuir uma representação espacial, é muito utilizada em coleções de itens. Uma estrutura de grade “pura” não é muito comum em sistemas de navegação.   Interface com o Usuário

17 Características de projeto
Quando projetada corretamente, a grade proporciona orientação tanto na navegação vertical quanto na horizontal de modo que o usuário nunca se sentirá perdido no hiperdocumento. Por exemplo: Os itens de um catálogo de roupas podem ser organizados em categorias, tais como, camisas, calças e jaquetas. Outro modo de organizar a informação poderia ser pelo preço. O estilo de grade permitirá ao usuário observar facilmente o preço da roupa bem como uma marca particular. Interface com o Usuário

18 Estrutura Hierárquica
A estrutura mais comum de navegação em um texto corresponde a forma de árvore ou hierárquica. Mesmo não permitindo a estrutura espacial da estrutura de grade ou mesmo a previsibilidade e controle da estrutura linear, a estrutura hierárquica é muito importante porque pode ser enormemente modificada ou expor muito mais informação que o necessário. Interface com o Usuário

19 Características de projeto
Estruturas hierárquicas começam com uma página raiz (página principal, página de entrada ou home page) que é a página de entrada no aplicativo. Esta página funciona como um marco e normalmente tem uma aparência muito diferente das outras páginas do aplicativo. As páginas principais ou home pages são fundamentais para o sucesso da interação com o usuário. É desta página que são apresentadas várias opções (ou caminhos) para a navegação pelo aplicativo. Interface com o Usuário

20 Estrutura árvore de profundidade
Este tipo de estrutura apresenta poucas escolhas mas pode necessitar muitos cliques do mouse para encontrar seu destino final; Esta organização enfatiza a profundidade ao invés da largura. Interface com o Usuário

21 Interface com o Usuário
Exemplo de uso Um site web para um serviço de empregos geralmente possui dois tipos principais de audiência: empregados e empregadores. Fazendo esta distinção óbvia na home page e solicitando que o usuário escolha sua categoria, aumentará a velocidade e facilitará o acesso para seções importantes do site. Expandir as escolhas do nível do topo da árvore para incluir opções que seriam específicas para quem procura emprego ou para quem oferece emprego pode causar Interface com o Usuário

22 Interface com o Usuário
Dicas de projeto A árvore de profundidade pode necessitar que o usuário faça muitas escolhas para encontrar uma página final (página folha), mas em alguns casos torna-se um meio muito útil para “selecionar” os usuários para uma categoria específica. Um meio de entender se a hierarquia do site é muito estreita é quando existem muitas páginas em que clicando em “voltar” simplesmente retornam para página principal. É importante lembrar que os usuários necessitam de um retorno e clicar infinitamente pelas páginas pode ser ainda mais frustrante. Interface com o Usuário

23 Estrutura árvore de superfície
Este tipo de hierarquia baseia-se na largura das escolhas. Sua principal desvantagem deve-se ao fato de que pode apresentar tantas opções quantas páginas a navegar. Enquanto o usuário necessita de um ou dois cliques para encontrar o conteúdo, o tempo gasto em sua procura por todas as escolhas iniciais pode ser improdutiva. Muitas pessoas acham que tudo o que for importante deve estar na página principal. Interface com o Usuário

24 Interface com o Usuário
Estrutura árvore web Na verdade estruturas puramente de árvores hierárquicas não são muito comuns nas páginas Web que estamos acostumados a navegar. Em uma estrutura de árvore pura, não existe cruzamento de links, assim é necessário retornar para encontrar outras partes da árvore. Se um usuário encontrar-se na página A na estrutura da figura; para encontrar a página B, ele deverá retornar dois níveis acima e então prosseguir descendo na árvore no sentido da página B. Interface com o Usuário

25 Características de projeto
Enquanto na Web é possível retornar utilizando o botão “Voltar” do navegador, links são normalmente adicionados às páginas de modo que os usuários podem encontrar a página sem necessitar navegar por todo o caminho de volta. Em muitos casos, páginas possuem links cruzados utilizando a barra de navegação ou explicitamente links de retorno para ajudar os usuários navegar rapidamente pela estrutura do site. Com a barra de navegação, pode ficar muito mais fácil saltar de uma seção para outra sem um grau significativo de retornos. Interface com o Usuário

26 Exemplo de mapa de navegação
Um diagrama de site pode ser muito complexo. Os links de retorno e os links cruzados dentro do site aumentam muito a sua complexidade. Neste caso, deve-se considerar somente as seções principais com links cruzados Interface com o Usuário

27 Estrutura de malha cheia
Aplicativo onde todas as páginas estão interligadas umas com as outras. Em uma estrutura malha cheia, o numero de ligações (L) é igual ao número de páginas (NP) multiplicado pelo número de páginas –1, ou seja:  L = NP * (NP –1)  Isso significa que: Um aplicativo com 10 páginas, existirão: NP = => L = 10 * 9 = 90 ligações. Um aplicativo com 100 páginas, existirão: NP = 100 => L = 100 * 99 = ligações. A estrutura malha fechada não deve ser utilizada em aplicativos com mais de 7±2 links por página, em um aplicativo de no máximo 10 páginas. Interface com o Usuário

28 Interface com o Usuário
Mapa de navegação Interface com o Usuário

29 Interface com o Usuário
Estruturas mistas Apesar da estrutura de árvore de superfície apresentar um número muito grande de escolhas logo no início da navegação, a estrutura de árvore de profundidade esconde uma grande quantidade de informação. Por outro lado uma estrutura linear fornece poucas escolhas para o usuário enquanto a estrutura árvore web oferece muitas escolhas. Interface com o Usuário

30 Interface com o Usuário
Mapa de navegação Em alguns casos faz-se necessário aumentar o nível de hierarquias para que seja possível permitir um retorno rápido do usuário para o topo do aplicativo, este tipo de estrutura é chamada estrutura mista ou hierarquia mista, sendo que a forma de árvore domina a estrutura Interface com o Usuário

31 Interface com o Usuário
Exemplo de uso Um exemplo de uso deste tipo de hierarquia é um site onde existe um botão Download ou algo semelhante que força um salto em profundidade na estrutura do site. Pode-se dizer que esta trata-se de uma estrutura linear com saltos. Outros sites podem conter caminhos lineares somente para certas páginas no site. Embora a organização espacial não seja a mesma que em outras estruturas de sites, este tipo de hierarquia é muito comum na maioria dos sites mistos. Interface com o Usuário

32 Estruturas hub and spoke
Muitos sites consistem de páginas principais, denominadas hubs, que centralizam outras sub-páginas que são acessadas via spokes (links de ligação). Para visitar outras páginas no site, o usuário é forçado a voltar à página hub. Muitos portais utilizam esse estilo de modo a fazer com que os usuários re-visitar a página principal. Entretanto, não existe diferença entre o modelo hub and spoke (2) e o modelo típico de árvore (1). Interface com o Usuário

33 Interface com o Usuário
Benefícios O único benefício de estruturas hub and spoke é que ele fornece uma maneira mais fácil de visualizar um site Interface com o Usuário

34 Interface com o Usuário
Estrutura web Quando muitos links cruzados, saltos para o topo da página ou para páginas bem acima ou abaixo na hierarquia, e outros tipos de modificações são realizadas em um documento estruturado, sua forma poderá tornar-se pouco clara para o usuário. Quando um aplicativo possui uma estrutura cuja forma é difícil de classificar, esta é denominada Web Pura. Interface com o Usuário

35 Interface com o Usuário
Benefícios Um benefício de uma forma menos estruturada é que ela pode fornecer um grande teor de expressividade. Por exemplo, num texto técnico podem existir links relacionados a diagramas, comandos, dicas e utilização, bem como partes de outros textos. A organização de um site para esse tipo de aplicação não pode ser facilmente adaptada a nenhuma das formas mais estruturadas vistas anteriormente. Apesar de estruturas web puras permitirem a confusão do usuário e podem causar a perda do foco e também tornar difícil aos usuários a formação de um mapa mental do site, elas podem não ser um problema quando a informação ou tarefa for projetada apropriadamente. Interface com o Usuário

36 Interface com o Usuário
Exercício O objetivo desta prática é fazer com que o aluno saiba aplicar os conceitos de técnicas de navegação para o desenvolvimento IHC, vistos nas aulas teóricas. Qual foi o modelo de navegação utilizado para o desenvolvimento da página para cadastro de currículos de alunos, projetada em aula teórica em linguagem Html? Emitir um relatório de conformidade com o modelo escolhido para o projeto. O exercício deve ser salvo como um arquivo de texto, que deve ser chamado Ex19.doc Interface com o Usuário