Prof.:

ran

gel@

dsc.u

fpb

.b

rra

ng

el@

lmrs

-sem

arh

.ufp

b.b

rra

ng

el@

dsc.u

fpb

.b

rra

ng

el@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

Prof.:Prof.: José Eustáquio Rangel de QueirozJosé Eustáquio Rangel de Queiroz

Carga Horária:Carga Horária:60 h60 h

22

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r


Características de GUI e WUI


GUI x Interfaces orientadas a caracteres

GUI x WUI

Interface com o Usuário

Coletânea de técnicas e mecanismos que proporcionam a interação de um usuário com uma determinada aplicação

Interface Gráfica

Interface na qual o mecanismo primário de interação é um dispositivo de apontamento de alguma espécie, atuante como o equivalente à mão humana

Existência de objetos visíveis, audíveis, palpáveis ou perceptíveis pelos sentidos humanos

GUI x Interfaces orientadas a caracteres

GUI x WUI

Interface com o Usuário

Coletânea de técnicas e mecanismos que proporcionam a interação de um usuário com uma determinada aplicação

Interface Gráfica

Interface na qual o mecanismo primário de interação é um dispositivo de apontamento de alguma espécie, atuante como o equivalente à mão humana

Existência de objetos visíveis, audíveis, palpáveis ou perceptíveis pelos sentidos humanos

33

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r




Visão

Objetos sempre visíveis pelo usuário, destinados à execução de tarefa

Visão

Objetos sempre visíveis pelo usuário, destinados à execução de tarefa

Inserir gráficoInserir gráfico

Objeto visível, MESMOcom a função desabilitada

Entidade independente

Ação (operação executada pelousuário sobre um objeto)

44

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r




Popularidade das representações gráficas Popularidade das representações gráficas

55

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r




Manipulação Direta

Estilo de interação para sistemas gráficos

Shneiderman (1982)

Características Sistema apresentado como uma extensão do mundo real

Visibilidade contínua de objetos e ações

Ações rápidas e incrementais com exibição visível dos resultados

Ações incrementais são facilmente reversíveis


Estilo de interação para sistemas gráficos

Shneiderman (1982)

Características Sistema apresentado como uma extensão do mundo real

Visibilidade contínua de objetos e ações

Ações rápidas e incrementais com exibição visível dos resultados

Ações incrementais são facilmente reversíveis

66

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r





Estilo de interação que precedeu o primeiro sistema gráfico

Criação de telas simulando folhas de papel sobre uma escrivaninha (extensão do mundo real)

Revisão do conteúdo das folhas em toda sua extensão (visibilidade contínua)

Edição e reestruturação do conteúdo (ações incrementais com exibição visível dos resultados)

Apresentação rápida do conteúdo(ações rápidas com exibição visível dos resultados)

Reversão de ações conforme a necessidade (ações incrementais são facilmente reversíveis)


Estilo de interação que precedeu o primeiro sistema gráfico

Criação de telas simulando folhas de papel sobre uma escrivaninha (extensão do mundo real)

Revisão do conteúdo das folhas em toda sua extensão (visibilidade contínua)

Edição e reestruturação do conteúdo (ações incrementais com exibição visível dos resultados)

Apresentação rápida do conteúdo(ações rápidas com exibição visível dos resultados)

Reversão de ações conforme a necessidade (ações incrementais são facilmente reversíveis)

77

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r




Manipulação Direta x Indireta

Relevância do advento das GUI

Factibilidade de manipulação direta de TODOS os objetos

Dificuldade de conceitualização de operações no sistema gráfico

Limitações impostas pela capacidade gráfica do sistema

Limitações impostas pelo espaço disponível para o posicionamento de controles de manipulação na borda da janela

Dificuldade de aprendizado e memorização de todas as operações e ações necessárias pelos usuários

Manipulação Direta x Indireta

Relevância do advento das GUI

Factibilidade de manipulação direta de TODOS os objetos

Dificuldade de conceitualização de operações no sistema gráfico

Limitações impostas pela capacidade gráfica do sistema

Limitações impostas pelo espaço disponível para o posicionamento de controles de manipulação na borda da janela

Dificuldade de aprendizado e memorização de todas as operações e ações necessárias pelos usuários

88

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r




Sistemas GráficosApresentação simplificada da interface

Redução dos requisitos de memória impostos ao usuário

Uso mais efetivo de facilidades de processamento da informação

Redução dos requisitos de aprendizagem do sistema

Sistemas GráficosApresentação simplificada da interface

Redução dos requisitos de memória impostos ao usuário

Uso mais efetivo de facilidades de processamento da informação

Redução dos requisitos de aprendizagem do sistema

99

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r




Sistemas Gráficos

Vantagens

Reconhecimento mais rápido de símbolos do que de texto

Aprendizado mais rápido de representações gráficas/pictóricas do que de representações textuais

Uso e resolução de problemas mais rápido via símbolos do que via instruções

Facilidade de rememoração de conceitos operacionais

Maior naturalidade e proximidade das habilidades inerentes a seres humanos

Exploração de indicações visuais/espaciais

Contextualização de uso

Redução do número de erros cometidos

Sistemas Gráficos

Vantagens

Reconhecimento mais rápido de símbolos do que de texto

Aprendizado mais rápido de representações gráficas/pictóricas do que de representações textuais

Uso e resolução de problemas mais rápido via símbolos do que via instruções

Facilidade de rememoração de conceitos operacionais

Maior naturalidade e proximidade das habilidades inerentes a seres humanos

Exploração de indicações visuais/espaciais

Contextualização de uso

Redução do número de erros cometidos

1010

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r




Sistemas Gráficos

Vantagens

Ampliação da sensação de controle do usuário

Retorno mais imediato da informação (Feedback)

Previsibilidade das respostas do sistema

Facilidade de reversão de ações

Redução da ansiedade concernente ao uso

Caráter mais atrativo

Possibilidade de redução do uso do espaço (ícones x palavras)

Universalidade dos símbolos e representações gráficas/pictóricas

Sistemas Gráficos

Vantagens

Ampliação da sensação de controle do usuário

Retorno mais imediato da informação (Feedback)

Previsibilidade das respostas do sistema

Facilidade de reversão de ações

Redução da ansiedade concernente ao uso

Caráter mais atrativo

Possibilidade de redução do uso do espaço (ícones x palavras)

Universalidade dos símbolos e representações gráficas/pictóricas

1111

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r




Sistemas Gráficos

Vantagens

Facilidade de integração de textos para ampliação de recursos interativos

Redução dos requisitos de digitação

Facilidade de transição para sistemas baseados em linguagem de comandos

Sistemas Gráficos

Vantagens

Facilidade de integração de textos para ampliação de recursos interativos

Redução dos requisitos de digitação

Facilidade de transição para sistemas baseados em linguagem de comandos

1212

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r




Sistemas Gráficos

Desvantagens

Aumento da complexidade de projeto

Treinamento ainda necessário

Carência de diretrizes para projeto experimentalmente derivadas

Inconsistência em técnicas e terminologias

Domínio de trabalho é o presente

Possibilidade de falta de familiaridade dos usuários com representações gráficas/pictóricas

Requisitos de manipulação de janelas

Limitações na produção de símbolos

Sistemas Gráficos

Desvantagens

Aumento da complexidade de projeto

Treinamento ainda necessário

Carência de diretrizes para projeto experimentalmente derivadas

Inconsistência em técnicas e terminologias

Domínio de trabalho é o presente

Possibilidade de falta de familiaridade dos usuários com representações gráficas/pictóricas

Requisitos de manipulação de janelas

Limitações na produção de símbolos

1313

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r




Sistemas Gráficos

Desvantagens

Quantidade existente de símbolos testados

Ineficiência do modo de interação para digitadores experientes

Ineficiência do modo de interação para usuários experientes

Preferência por alternativas textuais

Velocidade do estilo de interação para algumas aplicações

Possibilidade de aumento de situações de confusão e frustração do usuário

Possibilidade de consumo de mais espaço

Limitações de hardware

Sistemas Gráficos

Desvantagens

Quantidade existente de símbolos testados

Ineficiência do modo de interação para digitadores experientes

Ineficiência do modo de interação para usuários experientes

Preferência por alternativas textuais

Velocidade do estilo de interação para algumas aplicações

Possibilidade de aumento de situações de confusão e frustração do usuário

Possibilidade de consumo de mais espaço

Limitações de hardware

1414

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r




Considerações

Determinante mais efetivo da facilidade de uso Projeto da interface (não de seu estilo de interação)

Preferências do usuário DEVEM ser consideradas na escolha do estilo de interação

Palavras são mais significativas para os usuários do que ícones

Conteúdo da tela gráfica crítico para a sua utilidade

Sucesso da GUI dependente da competência dos projetistas na consideração de princípios vigentes de usabilidade

Considerações

Determinante mais efetivo da facilidade de uso Projeto da interface (não de seu estilo de interação)

Preferências do usuário DEVEM ser consideradas na escolha do estilo de interação

Palavras são mais significativas para os usuários do que ícones

Conteúdo da tela gráfica crítico para a sua utilidade

Sucesso da GUI dependente da competência dos projetistas na consideração de princípios vigentes de usabilidade

1515

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r



Características de GUI e WUI Características das GUI

Apresentação visual sofisticada

Aspecto visual

Exibição dos diferentes níveis de informação

Linhas, desenhos e ícones

Fontes de caracteres variadas (tamanhos e estilos)

Recursos de animação

Exibição de fotografias e vídeo

Características das GUI


Aspecto visual

Exibição dos diferentes níveis de informação

Linhas, desenhos e ícones

Fontes de caracteres variadas (tamanhos e estilos)

Recursos de animação

Exibição de fotografias e vídeo

1616

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r





Elementos da interface

Janelas (principal, secundárias e caixas de diálogo)

Menus (barra, pull-down, pop-up e cascata)

Ícones

Controles (caixas de texto, de listas, barras de rolamento e botões)



Elementos da interface

Janelas (principal, secundárias e caixas de diálogo)

Menus (barra, pull-down, pop-up e cascata)

Ícones

Controles (caixas de texto, de listas, barras de rolamento e botões)

1717

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r






Tradução visual do mundo real do usuário na tela de um terminal de vídeo, de forma realista, significante, simples e clara



Tradução visual do mundo real do usuário na tela de um terminal de vídeo, de forma realista, significante, simples e clara

1818

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r





Interação Pick-and-Click

Pick Atividade motora requerida do usuário para a

identificação do elemento associado a uma ação de interesse

Click Sinal necessário à realização de uma ação de

interesse


Interação Pick-and-Click

Pick Atividade motora requerida do usuário para a

identificação do elemento associado a uma ação de interesse

Click Sinal necessário à realização de uma ação de

interesse

1919

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r




Conjunto restrito de opções de interfaceamento

Conceito WYSIWYG

Visualização

Processo cognitivo destinado à compreensão da informação difícil de ser apreendida Volume x Grau de abstração

Conversão da representação de uma entidade revelação gradual da estrutura/função associada Produção de imagens que traduzam a informação

relevante


Conjunto restrito de opções de interfaceamento

Conceito WYSIWYG

Visualização

Processo cognitivo destinado à compreensão da informação difícil de ser apreendida Volume x Grau de abstração

Conversão da representação de uma entidade revelação gradual da estrutura/função associada Produção de imagens que traduzam a informação

relevante

2020

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r





Orientação a objetos

Objetos x Ações

Subobjetos

Objetos contêiners (workplace, folder, workarea) Objetos dispositivos

Coleção

Conexão ou vínculo (constraint)

Composição

Contêiner

Persistência



Objetos x Ações

Subobjetos

Objetos contêiners (workplace, folder, workarea) Objetos dispositivos

Coleção

Conexão ou vínculo (constraint)

Composição

Contêiner

Persistência

2121

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r





Propriedades ou Atributos de Objetos

Características inerentes ao objeto, que auxiliam a descrevê-lo e podem ser alteradas por usuários

Estilos de texto

Dimensões de fontes

Cor do plano de fundo do aplicativo


Propriedades ou Atributos de Objetos

Características inerentes ao objeto, que auxiliam a descrevê-lo e podem ser alteradas por usuários

Estilos de texto

Dimensões de fontes

Cor do plano de fundo do aplicativo

2222

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r





Ações

Usuários executam ações sobre objetos

Comandos Ações que manipulam objetos

Especificações de atributos/propriedades Ações que estabelecem ou modificam a

caracterização de objetos


Ações

Usuários executam ações sobre objetos

Comandos Ações que manipulam objetos

Especificações de atributos/propriedades Ações que estabelecem ou modificam a

caracterização de objetos

2323

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r



Características de GUI e WUI Orientação a objetos

Aplicação x Objeto

Estratégia orientada à aplicação Ação> 1. Uma aplicação é aberta Objeto> 2. Um arquivo ou outro objeto é

selecionado

Estratégia objeto:ação orientada ao objeto Objeto> 1. Um objeto é escolhido Ação> 2. Uma ação é selecionada

Focalização na tarefa

Minimização da visibilidade do sistema operacional

Separação de aplicações


Aplicação x Objeto

Estratégia orientada à aplicação Ação> 1. Uma aplicação é aberta Objeto> 2. Um arquivo ou outro objeto é

selecionado

Estratégia objeto:ação orientada ao objeto Objeto> 1. Um objeto é escolhido Ação> 2. Uma ação é selecionada

Focalização na tarefa

Minimização da visibilidade do sistema operacional

Separação de aplicações

2424

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r





Vistas

Common User Application (CUA) (IBM) Software Application Architecture (SAA) Composed, Contents, Settings e Help


Vistas

Common User Application (CUA) (IBM) Software Application Architecture (SAA) Composed, Contents, Settings e Help

2525

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r





Uso da memória de reconhecimento

Fora da vista, fora da mente

Desempenho concorrente de funções

cooperativo multitarefas

preemptivo multitarefas

transferência de dados entre tarefas

armazenamento temporário em um clipboard


Uso da memória de reconhecimento

Fora da vista, fora da mente

Desempenho concorrente de funções

cooperativo multitarefas

preemptivo multitarefas

transferência de dados entre tarefas

armazenamento temporário em um clipboard

2626

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r



Características de GUI e WUI Exercício 02

Caracterizar uma WUI, estabelecendo posteriormente similaridades e diferenças que tal interface apresenta quando confrontada com uma GUI. Considerar os seguintes aspectos:

Exercício 02

Caracterizar uma WUI, estabelecendo posteriormente similaridades e diferenças que tal interface apresenta quando confrontada com uma GUI. Considerar os seguintes aspectos: dispositivos foco do usuário dados/informações tarefas do usuário espaço conceitual do

usuário elementos de apresentação navegação conteúdo interação

dispositivos foco do usuário dados/informações tarefas do usuário espaço conceitual do

usuário elementos de apresentação navegação conteúdo interação

tempo de resposta estilo visual capacidade do sistema eficiência na execução de

tarefas consistência assistência ao usuário integração segurança confiabilidade

tempo de resposta estilo visual capacidade do sistema eficiência na execução de

tarefas consistência assistência ao usuário integração segurança confiabilidade

2727

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r


Interação Usuário-Computador


Propósito do Desenvolvimento

Alto grau de usabilidade

Usabilidade

Facilidade de aprendizado

Facilidade de memorização

Otimização do desempenho do usuário

Minimização da taxa de erros do usuário

Maximização da satisfação subjetiva do usuário

Eficiência x Efetividade x Satisfação (ISO 9126/ ISO 9241)


Alto grau de usabilidade

Usabilidade

Facilidade de aprendizado

Facilidade de memorização

Otimização do desempenho do usuário

Minimização da taxa de erros do usuário

Maximização da satisfação subjetiva do usuário

Eficiência x Efetividade x Satisfação (ISO 9126/ ISO 9241)

2828

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r





Projeto da Interação x Projeto da Interface com o Usuário



Look and feel

Como trabalha

Comportamento

Implementação do código de instanciação da componente de interação

Desenvolvimento daComponente de Interação

Desenvolvimento doSoftware da Interface

Desenvolvimento da Interface com o Usuário

2929

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r








Look and feel

Como trabalha

Comportamento

Implementação do código de instanciação da componente de interação

Desenvolvimento daComponente de Interação

Desenvolvimento doSoftware da Interface

Desenvolvimento da Interface com o Usuário

Documents

Prof.: