Exibição de conteúdo: Textual; Gráfica; Sonora;

Transcrição

1

2 Exibição de conteúdo: Textual; Gráfica; Sonora;

3 Primeiras interfaces; Base para a produção da interface: caracteres e dígitos;

4 Windows 1

5 Windows 2

6 Interface produzida a partir da definição de pixels (Picture Elements);

7 Macintosh 1 (1985) a 6

8 Macintosh 8 a 9

9 Macintosh OS X

10 Windows 3

11 Windows 95

12 Windows 7

13 Acessibilidade a deficientes visuais; Virtual Vision; DOSVox; Pouquíssimo considerada ou desconsiderada por muitos desenvolvedores; (Exemplo)

14 GUI (Graphical User Interfaces); WIMP (Windows, Icons, Menus and Pointers)

15 Interação (principais tipos): Em linguagem por comando (Command Language); Com diálogo guiado por pergunta e resposta; Com seleção por menu; Comando por voz; WYSIWYG; Manipulação Direta;

16 Interação por meio de um conjunto de vocábulos; Regras rígidas de sintaxe; Lembre e digite; Exige bastante treinamento e memória; Maior potencial e flexibilidade; Exemplo: DOS

17 Interação determinada por uma sequência; Pouca flexibilidade; Facilidade de uso; Exemplos: DOSVox, Assistentes, Formulários

18 Opções acessíveis via menu; Rapidez do aprendizado; Necessidade de vários níveis de menu; Exemplo: Windows 1.0

19 O computador responde a comandos do usuário; O computador deve ser treinado (específico para um usuário); Não é 100% precisa; Não permite realizar todas as tarefas; Acessível para usuários deficientes; Rápido acesso à conteúdos; Exemplos: ViaVoice ou Dragon Naturally Speaking

20 A imagem de manipulação da interface é a mesma que a aplicação cria. Ex: Editores de texto, como o Word da Microsoft. Aqui você tem negrito, sublinhado e itálico. Aqui voc^^e tem ^bnegrito, ^ssublinhado e ^iit^ alico.

21 O usuário vê na tela aquilo que terá na impressão; clareza. Existem aplicações que não conseguem ser implementadas neste estilo (estilo restrito) Tela difere da impressão no estilo não WISISWYG, o que pode confundir o usuário. Ex: Latex

22 Todos os objetos, atributos e relações são expressos e operados visualmente (o estilo de Manipulação Direta pura é o sistema Macintosh) As operações são realizadas por ações realizadas sobre a representação na tela. Exemplo: para excluir um arquivo, ele sofre dragging e é levado para a lixeira.

23 Representação: Texto: nome de um arquivo Gráfico: ícones com algum tipo de significado (o significado deve ser aprendido pelo usuário e nem sempre é imediato) I love you

24 Vantagens: uso fácil por usuários leigos aprendizado rápido Desvantagens: lenta para os usuários experientes buscas difíceis sobre conjuntos extensos de elementos. Exemplo: exclusão de arquivo: excluir *.txt é mais fácil

25 Janelas: Contêineres de conteúdo; Base dos Sistemas Operacionais modernos;

26 Elementos da interface gráfica janelas menus ícones figuras geométricas caixas de diálogo caixas de mensagem barra de ferramentas controles som e vídeo

27 Partes de uma janela Barra de título Botão de menu do sistema Botão de minimizar Botão de maximizar Barra de menu Área de status/mensagens Barras de deslizamento

28 Janelas divididas permite visualizar diferentes partes da mesma janela, com barras de rolamento independentes. Redimensionamento característica dos ambientes Mac ou Windows de redimensionar janelas em diferentes disposições: cascata lado a lado horizontal lado a lado vertical redimensionamento manual. algumas janelas não são dimensionáveis (evitar este bloqueio).

29 Caixas de Diálogo: obtém informações do usuário, através de controles são usadas para parametrizar operações. Caixas de Mensagem: comunicam informações ao usuário podem obter confirmações do usuário são caixas de diálogo simplificadas.

30 Geralmente são usados em Caixas de Diálogo Tipos de Controles: Texto Caixa de Edição (Edit Box) Caixa de Verificação (Verify Box) Caixa de Lista (List Box) Caixa de Grupo (Group Box) Botão de Rádio (Radio Button) Botão de Seleção Múltipla (Option Button) Botão de Comando (Command Button) Barras de Rolagem (Scroll Bar) Combinação: Caixa de Edição/Caixa de Lista Controle Giratório.

31

32 Botões de Controle

33

34 Texto Caixa de Edição (Edit Box) Caixa de Verificação (Verify Box) Caixa de Lista (List Box) Caixa de Grupo (Group Box) Botão de Rádio (Radio Button) Botão de Seleção Múltipla (Check Button) Botão de Comando (Command Button) Barras de Rolagem (Scroll Bar) Combinação: Caixa de Edição/Caixa de Lista Controle Giratório.

35 Botões de Ação iniciam uma ação a partir da caixa de diálogo Os mais comuns são: OK, Cancel e Close. Botões de Saltar fecham a caixa de diálogo atual e abrem uma nova. um botão de saltar pode enviar o usuário para uma segunda caixa de diálogo com mais detalhes sobre as opções disponíveis na primeira. Botões de Saltar e Retornar abrem uma nova caixa mas não fecham a antiga uma caixa do tipo Details, pode funcionar desta forma Botões de Desdobrar expandem a caixa de diálogo atual para mostrar mais opções. Botões de Dobrar redobram uma caixa de diálogo

36 Botão de Desdobrar Botão de Dobrar

37 Botões de Rádio Tradicionais são apresentados por círculos círculo preenchido por uma bola preta, significa a opção selecionada quando uma opção estiver selecionada, automaticamente todas as anteriores devem ficar não selecionadas é usado para seleção de uma opção única e obrigatória, dentre várias é interessante sempre ter um default. Botões sob forma de Conjunto de Valores é um grupo de botões retangulares, onde só um pode ser escolhido geralmente é usado para escolher cores ou padrões de textura, ou ainda figuras geométricas.

38 Caixas de Verificação Botões de Rádio

39

40

41 são listas com um pequeno quadrado ao lado, que pode ter quaisquer das opções marcadas (com um X) difere dos botões de rádio, pela possibilidade de poder se marcar uma, duas, três ou mais opções, inclusive todas ou nehuma há opções que só podem ser ligadas, se outra estiver ligada; neste caso desabilitar a opção secundária (dependente), mostrando-a em cinza, e de forma visual a mostrar a hierarquia pode-se usar caixas de verificação em combinação com botões de rádio.

42 São usadas para exibir opções para o usuário, representadas por textos, cores ou gráficos. Tipos de Caixas de Lista: Caixa de Lista Padrão de Seleção Simples todas as opções disponíveis são exibidas e o usuário pode selecionar apenas uma delas Drop-down de Seleção Simples: as opções disponíveis só são exibidas quando o usuário dá um click na seta drop-down Seleção Múltipla Padrão: todas as opções disponíveis são exibidas pode ser selecionada mais de uma opção Drop-down de Seleção Múltipla: as opções disponíveis só são exibidas quando o usuário dá um click na seta drop-down pode ser feita mais de 1 seleção, através de Ctrl-Click ou Shift-Click

43 Caixas de Lista Padrão: exibem toda a lista de uma só vez geralmente têm entre 3 e 8 ítens se as opções da lista representam os possíveis valores dos atributos para uma seleção, o valor corrente deve ser selecionado quando a lista é exibida inicialmente sendo heterogênea a seleção, nenhum valor deve ser selecionado quando o espaço é limitado, pode-se substituir listas padrão por listas drop-down

44 Caixa de Lista Padrão de seleção Simples

45 Caixas de Lista Drop-down: até que sejam clicadas, exibem apenas a seleção corrente de uma lista só usar se houver três ou mais opções se uma lista drop-down contém mais do que 8 ítens, deve possuir barra de rolamento vertical preferencialmente abrir a lista na opção até então selecionada, posicionando-a no meio da tela (mostrando que há opções mais acima e mais abaixo [se houver, é claro])

46 Caixa de Lista Drop Down de Seleção Simples

47 São controles de edição, dentro dos quais o usuário digita informações em forma de texto. A maioria das Caixas de Texto usa apenas uma linha, como por exemplo, a caixa do menu Salvar Como (Save As), no espaço reservado para digitar o nome do arquivo a ser salvo. Se a caixa for do tipo multilinhas ilimitado, só usar barras de rolagem vertical, quando se digitar uma próxima linha que não caberá mais na tela reservada para a caixa de texto. Para inserir um Return dentro do texto, usar a convenção de digitar Ctrl-Return.

48 Caixa de Texto

49 São usados para exibir e ajustar os valores em dimensões contínuas, como em volume, cor, brilho, contraste, matiz, etc. Consiste em uma barra contendo uma escala ou marca de medida, mais um indicador perpendicular à barra. O indicador mostra o valor corrente. O indicador pode ser arrastado pelo mouse. Pode incluir uma caixa de texto, que mostra o valor corrente associado ao botão, podendo este valor ser alterado manualmente, quando então o botão deverá se ajustar para a posição correspondente.

50

51 São usados para exibir valores que serão lidos, mas não alterados, como por exemplo, mensagens de erro ou mensagens informativas. Nestes campos o usuário não pode alterar ou digitar nada, devendo o teclado ser bloqueado para digitação. Uma forma de alertar para este tipo de campo é a cor de fundo do campo de texto estático, que deve ser a cor de fundo normal da janela, ao contrário da cor de fundo de um campo de Caixa de Texto, que entra na cor (mais escura) de edição.

52 É a combinação de um campo texto editável e uma caixa de lista. É utilizada quando o aplicativo exige uma entrada do usuário e pode exibir uma lista de respostas possíveis. O usuário pode digitar uma resposta na caixa de texto, caso a resposta correta não esteja disponível na lista. A diferenca básica com a caixa de lista é que na caixa de lista pode-se digitar um ítem completamente novo, que não esteja na lista.

53 É uma caixa de texto com duas setas (uma para cima e outra para baixo), colocadas à direita da caixa. É uma caixa de texto especializada, ou seja, aceita apenas um conjunto de valores discretos de entradas ordenadas. O valor da caixa de texto pode ser manipulado por: digitação de um novo valor dentro da caixa e texto dando um click na seta para cima, para aumentar o valor dando um click na seta para baixo, para diminuir o valor Aplicações: ajuste de horários e datas ajuste de margens e tabulações ajuste de tamanhos de fontes e objetos

54 Botões de Aumentar e Diminuir

55

56 Modalidade: não modal: flutuam e permitem interação com outros objetos servem para informar ou aguardar uma entrada exemplo: uma caixa de ferramentas aplicativo modal: permite mudar de aplicativo, mas não permite mudar de objeto dentro do mesmo aplicativo exemplo: uma caixa com informação que está imprimindo sistema modal: paralisa todo o sistema, até que se responda ao que é solicitado é usada para informar a ocorrência de erros, e aguardar instruções de como prosseguir aplicativo semi-modal permitem selecionar objetos, mas não executar ações exemplo: numa planilha uma caixa que solicita coordenadas; pode-se sair da caixa e marcá-las com o mouse

57 Mobilidade: móveis: podem ser deslocadas para qualquer posição da janela fixas: ocupam sempre o mesmo local Caixas Desdobráveis: podem ser abertas para mostrar mais detalhes devem também poder ocultar detalhes Tipos de Caixas: caixas de mensagem apenas informam uma mensagem diálogo padrão informam uma mensagem e aguardam uma resposta

58 Arranjo: vertical: todos os botões devem ter mesma altura e mesma largura horizontal: mesma altura, mas a largura pode ser variável OK sempre acima ou à esquerda OK e Cancelar devem estar juntos devem conter todo o nome. sem abreviações Help: oposto ao OK, espaçado sempre uma linha de texto por botão Cancelar x Parar Cancelar : não faz nada e retorna Parar (ou Interromper) : pára e retorna

59 Caixas Pré-definidas: Abrir Arquivo (File Open) Salvar Como (Save As) Imprimir (Print) Configurar Impressora (Printer Setup) Fontes (Choose Font) Cores (Choose Color) Sempre que possível, usar as caixas pré-definidas pois já constituem um padrão e isto facilita o uso pelo usuário.

60 São Caixas de Diálogo com textos e botões sugere-se um ícone explicativo: Informação (I) Exclamação (!) Interrogação (?) Parada (sinal de Pare) botões selecionáveis OK, Cancelar (OK, Cancel) Sim, Não (Yes,No) Sim, Não, Cancelar (Yes, No, Cancel)

61 Drop-down ou cortina a partir de um menu horizontal fixo dá-se um click numa opção e a partir dela desce na vertical o menu Cascata é uma ramificação do menu drop-down Pop-up ou flutuante é um menu que não tem ligação com outros menus, podendo ficar flutuando em qualquer ponto da tela Tear-off ou destacáveis é um menu que é destacado do menu drop-down e posicionado em qualquer ponto da tela

62 é o tipo básico das interfaces gráficas normalmente fica pendurado em um título da barra de menus pode ser dividido com barras, separando diferentes componentes algumas opções podem não estar habilitadas, no momento; neste caso apresentá-las em cinza, ao invés de preto, não havendo ações associadas quando selecionadas no caso de opções não habilitadas por restrições de acesso, não mostrar a opção no caso do número de opções exceder o tamnho da tela, indicar na parte inferior, com uma seta para baixo, que há continuação.

63 menus em cascata ramificam uma opção do menu padrão normalmente aparecem à direita da opção do menu drop-down ao qual estão associados no menu padrão deve haver uma seta para direita indicando que há um menu em cascata permitem jogar para um nível seguinte opções que ficariam acumuladas num só nível pode haver um terceiro ou quarto nível de cascata (não é muito recomendável!) são mais complicados de serem manuseados pelo mouse ou teclado

64 são menus que podem ficar em algum ponto qualquer da tela, soltos normalmente são acionados através do botão direito do mouse normalmente é desativado pelo próximo click (do botão esquerdo do mouse) usar poucos itens e não usar em cascata normalmente entra numa posição próxima de onde se encontra o ponteiro do mouse

65 é um menu em cascata ou pop-up que se pode destacar e arrastar para outro lugar da tela é um intermediário entre uma estrutura de submenus e uma caixa de diálogo exemplos destes menus são os menus de controles de programas gráficos como Photoshop, Canvas, MacDraw,etc, usados para controles de cores, penas, setas, objetos, etc.

66 Tipos de ítens de menus: ações (ex. Save) atributos (ex. Negrito) documentos janelas de documentos itens gráficos de menu (ex. ferramentas da caixa de ferramentas) alguns ítens são executados assim que são selecionados, outros necessitam mais informações ex. Estilo--> Negrito, é imediato Arquivo--> Abrir, necessita saber detalhes sobre diretório, disco quando um ítem de menu abrir outro menu (em cascata), indicar com uma seta para a direita quando um ítem de menu abre uma janela, indicar com reticências à direita da opção

67 ítens de menus são independentes quando se pode selecionar mais do que uma opção ao mesmo tempo são similares às caixas de verificação (botões de seleção múltipla) ex. selecionando atributos de um texto, pode-se escolher simultaneamente: Negrito, Sublinhado e Itálico Ítens de menus são interdependentes quando só se pode selecionar uma opção de cada vez são similares aos botões de rádio ex. Ao selecionar fontes, só se pode escolher um de cada vez