A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

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

Apresentações semelhantes


Apresentação em tema: "Interface Com o Usuário Técnicas de Projeto Tipos de Aplicativos e Arquiteturas."— 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ário2 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. Introdução

3 Interface com o Usuário3 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.

4 Interface com o Usuário4 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:

5 Interface com o Usuário5 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: 1. Estrutura Linear, os usuários movimentam-se seqüencialmente, de um quadro ou campo de informação para outro; 2. Hierárquica, a movimentação é ao longo das ramificações de uma estrutura de árvore formada pela lógica natural do conteúdo; 3. Não-Linear, os usuários movem-se livremente através do conteúdo do projeto, livres de caminhos predeterminados; 4. Composta, movimentação livre (de forma não-linear), mas ocasionalmente são obrigados a apresentações lineares de movimentos ou informações.

6 Interface com o Usuário6 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.

7 Interface com o Usuário7 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.

8 Interface com o Usuário8 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.

9 Interface com o Usuário9 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.

10 Interface com o Usuário10 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.

11 Interface com o Usuário11 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.

12 Interface com o Usuário12 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.

13 Interface com o Usuário13 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.

14 Interface com o Usuário14 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.

15 Interface com o Usuário15 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

16 Interface com o Usuário16 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.

17 Interface com o Usuário17 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.

18 Interface com o Usuário18 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.

19 Interface com o Usuário19 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.

20 Interface com o Usuário20 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.

21 Interface com o Usuário21 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

22 Interface com o Usuário22 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.

23 Interface com o Usuário23 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.

24 Interface com o Usuário24 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.

25 Interface com o Usuário25 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.

26 Interface com o Usuário26 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

27 Interface com o Usuário27 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 = 10 => 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.

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

29 Interface com o Usuário29 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.

30 Interface com o Usuário30 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

31 Interface com o Usuário31 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.

32 Interface com o Usuário32 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).

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

34 Interface com o Usuário34 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.

35 Interface com o Usuário35 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.

36 Interface com o Usuário36 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. Ex19.doc O exercício deve ser salvo como um arquivo de texto, que deve ser chamado Ex19.doc


Carregar ppt "Interface Com o Usuário Técnicas de Projeto Tipos de Aplicativos e Arquiteturas."

Apresentações semelhantes


Anúncios Google