Atualmente discutem muito acerca do design e inovação. O que se considera hoje em dia design inovador, na verdade existe a 20 anos. De exemplo temos o rato omnipresente, que foi inventado por Douglas Engelbart em 1964 e só foi comercializado em 1984 por Steves Jobs.
E temos os cristais liquidos(LCD), que poderíamos dizer que foram inventados a 20 anos. Na verdade o Friedrich Reinetzer o descobriu em 1888. O primeiro protótipo surgiu em 1968, a Optel a primeira fabricante de relógios baseados em LCD. Desde a sua descoberta passaram 82 anos até a sua comercialização.
O mesmo aconteceu a TV, que a sua invenção foi em 1935 e só chegou a era dourada em 1950.
No livro tiraram a conclusão para o designer e interfaces. Que tudo que “todas as tecnologias que irão afetar significativamente as nossas vidas nos próximos 10 anos afinal já cá andam há quase uma década. “
um exemplo de inovações emergentes para o design de interfaces consiste nos plasmas, na tinta electrónica e nos chamados smartboards. Que foram revolucionados diminuindo os preços destas superfícies colaborativas inteligentes, de tal forma que mudou a forma como aprendemos, reunimos e planeamos.
De entre as inúmeras qualidades do Star, destacam-se as seguintes: Desenhado com base em extensos e intensos estudos de usabilidade; o utilizador trabalhava com documentos e não vom aplicações, ou seja, as aplicações não apareciam ao utilizador; Contemplava teclas frequentes como copiar, colar ou desfazer; não existiam teclas modais CTRL,ALT, etc; uma janela era uma forma de ícone em grande.
David Liddle, lider fo projecto Star, afirmaria mais tarde o seguinte: os sistemas posteriores como Macintoch e o Windows. O utilizador nunca deveria operar diretamente nos programas. Não era isso que acontecia porque os designers posteriores limitavam-se a encaixar os conceitos do Star sobre as ideias existentes. De facto trabalhamos com documentos e não com aplicações.
Surge em 1984 o primeiro Apple Macintoch, que entrou na história da IPM como o primeiro computador pessoal com interface gráfica verdadeiramente popular. Em vexmz de apreender um conjunto complexo de comandos, o utilizador apenas necessitava de apontar para a selecção num menu e carregar no botão do rato. Isto significava que todas as aplicações no Macintoch tinham uma interface com o utilizador semelhante. O sucesso da interface do Macintoch conduziu a uma nova era de aplicações e sistemas operativos gráficos e mais fáceis de usar.
O Windows 3.0 goi bastante bem sucedido. Tornou-se o standard dos sistemas operativos no mercado dos computadores pessoais e foi mais tarde sucedido pelo Windows 95.
Na história e evolução das interfaces com o utilizador, não poderíamos omitir um computador que foi também jm marco: o Xerox 810 Star. Construido em 1981 Smith et al. 1990 descrevem a criação daquela que foi a primeira interface a implementar o paradigma WIMP e a metáfora do desktop. O paradigma WIMP é um estilo de interacção com a interface gráfica que assenta em quatro elementos: Windows, icons, menus e Pointing Device (usualmente o rato).
Quando a Rússia apresentou o sputnik em 1957, os EUA sentiram uma forte ameaça ao perder o seu papel de super pôtencia tecnológica líder. Assim o governo norte-americano investiu enorme quantia de dinheiro em programas e utilizadores das máquinas. E fundou instituições de investigação e captou o interresse de vários cientistas de todo o país.
Entre esses cientistas Douglas Engelbart foi influenciado por Vanner Bush. Engelbart passou a liderar o ARC no início dos 1960, no qual foram inventados conceitos que ainda hoje são totalmente atuais.
J.R.C. Licker também foi um dos pioneiros nesta área. Liderando a ARPA entre 1962 e 1964. Promoveu a educação na informática e a interacção com a computação.
Em 1962 surge o primeiro sistema gráfico, Sketchpad, de Ivan Sutherland. O Sketchpad considerado o pai dos programas de CAD e das interfaces modernas.
Em 1967, Engelbart apresenta o oN-Line System (NLS). Este sistema apresentava como característica principal o rato e ecrã de edição a duas dimensões, faz lembrar a maior parte das descrições do software atual.
Já no Brooks Hall, em São Francisco, onde em 1968. Douglas Engelbart recebe uma ovação memorável pela sua demonstração da computação interativa. Uma consola estava ligada à linha telefónica dos seus colegas de laboratório ARC em Menlo Park e na plateia mais 1000 pessoas assistiam à demonstração.
Em 197 a empresa conhecida como Xerox funda o PARC. Cria três laboratórios o GSL, o CSL e SSL. Bob Taylor recrutava pessoas para o CSL. E no PARC Alan Kay e colegas inventam a maior parte das tecnologias sem as quais não haveria interfaces amigáveis joje em dia, como o PC, Ethernet, impressão a laser, o desktop publishing. Sem esquecer que era a Xerox que finaciava a PARC, a programação orientada a objectos que vingou até hoje a metáfora do ícone da desktop.
Podemos dizer que o promeiro computador foi o Xerox Alto. O Alto era o primeiro computador com ecrã bitmapped, ou seja, em pixeis em vez de caracteres.
A maioria das situações descritas anteriormente raramente acontece e em situações especiais. Mesmo que não estejam vidas humanas em jogo os profissionais da área tem de desenhar correctamente e deve sempre ser a sua prioridade.
Engenharia da usabilidade, hoje em dia oferece importantes benefícios em termos de custos , qualidade e satisfação do consumidor. A usabilidade pode sempre melhorar a produtividade. Nos sistemas interativos atuais, os autores referem como problema “creeping featuritis” simplificado seria “funcionalidade aguda” consiste no facto de fabricantes de software anunciarem os seus produtos através de lista de funcionalidades ou características. Que realmente não haveria, com certeza a necessidade de publicar bastantes e volumosos livros de instruções e dicas para o utilizar.
O objectivo ao estudar princípios de design de interfaces é também para evitar a funcionalidade aguda e focando realmente nas necessidades dos utilizadores.
A usabilidade faz poupar dinheiro aos produtores de software, porque precocemente são detectados os erros defeitos de design.
A usabilidade pode trazer benefícios a longo prazo também, através de custos de formação mais baixos que advirão de o sistema ser fácil de usar, suporte ao cliente mais baixo, o que traduzirá também numa maior satisfação do cliente.
A EVOLUÇÃO DAS INTERFACES
Para comprender as interfaces atuais, é útil estuadar a sua evolução ao longo das últimas décadas. Podemos considerar que houve cinco geração de interfaces pessoa – máquina, que dividimos por décadas . As primeiras interfaces, tal como os primeiros computadores, surgiram na década de 1950. Conheidas as memórias desse nascimento da computação como uma indústria onde os únicos eram os programadores técnicos daquele hardware primordial. Era baseada em código e cartões perfurados que eram inseridos na máquina que era uma interface ao nível do hardware.
Nas décadas de 1960 e 1970 a interface ao nível de programação. COBOL e FORTRAN eram duas linguagens de programação mais populares, e aprender a programar era um requisito para aprender a utilizar o computador.
Apenas na década de 1980 é que se massificaram as Interfaces ao nível do diálogo da interacção que já existiam na década dos anos 1960. E na década de 1990 o chamado CSCW(computer-supported cooperative work).
Outro caso que pelos piores motivos passou a constar das introduções à importância desta disciplina foi a THERAC-25, uma máquina de administração de radiação a doentes oncológicos que, como qualquer outra máquina, tinha uma interface com o utilizador.
Um doente estava recebendo um tratamento de radioterapia no East Texas Cancer Center. Através da THERAC-25 aquela interface havia dois modos de operação por electrões e por raios X. Uma técnica bem treinada, uma vez que possuia muita experiência de utilização rapidamente introduziu os dados. Após a verificação dos dados que havia colocado, reparou que havia cometido um erro de ter colocado o modo raios X. E em seguida tentando corrigir clicou no “cursor up” repentinamente. Então depois de clicar varias vezes no botão de RETURN, o tratamento foi administrado ao doente e sem se aperceber deixou seguir a operadora.
Ocorreu um erro chamado “Malfunction 54” e a interface sugeriu uma subdose e a operadora fez um click na tecla “P” para proceguir com o tratamento. E recebendo a segunda dose o doente se apercebeu e desatou a gritar, este que não foi ouvido pela operado da interface, porque ficava num quarto isolado e mesmo que existiam equipamentos de áudio e vídeo para a interacção entre os dois, que por ventura o mesmo se encontrava fora de serviço. Cinco dias após aquele incidente vinha a falecer o doente devido as doses excessivas de radiação recebidas naquele dia.
E com isso pedemos ver que a interacção pessoa-máquina têm sempre de ser levada em conta, visto que nós humanos mesmo com muitas experiências cometemos erros fatais. O facto é que haviam imensos factores foram desconsiderados. Ora, se os designers da THERAC-25 tivessem realizado alguns estudos da usabilidade, veriam que os utilizadores experientes têm a tendência de introduzir de forma mais rápida os dados na máquina. E acontece o erro “Malfunction 54” sempre que as teclas eram pressionadas repentinamente e os designers não levaram em conta que alguém colocaria os dados em menos de oito segundos.
Web Design e HTML avançado (pgs 100-124) – Fim do Livro
Fontes
Uma fonte é uma representação consistente dada a um alfabeto. Inclui objetos que alteram a forma do símbolo sem alterar seu significado. As características exigidas de uma fonte são tipo (ou família), tamanho, formato e peso. Para especificar o texto, você deve especificar a fonte especificando seu tipo, forma, peso e tamanho. CSS fornece propriedades como família de fontes, tamanho de fonte, estilo de fonte e peso de fonte para definir essas propriedades. Além disso, diferentes tipos de funções permitem considerar diferentes tipos de fontes.
Font-Family:
Uma família de fontes (ou fontes) é especificada com a propriedade Font Family. Aceita uma lista de valores separados por vírgula que representam nomes de fontes que podem não existir no sistema do usuário. Se o substantivo raiz tiver mais de uma palavra, coloque-o entre aspas.
Exemplo:
Font-Size:
A propriedade Font-Size altera o tamanho da fonte, que pode ser especificado como um valor absoluto ou relativo.
Exemplo:
O tamanho pode ser especificado em unidades como pontos, pixels, centímetros, milímetros e polegadas.
Font-Style e Font-Weight:
O tipo de fonte é afetado pela espessura da fonte (altera a espessura) e pelo tipo da fonte (altera o itálico).
Font-Variant:
A função de alteração de fonte permite aplicar uma fonte diferente. As opções mais comuns são “small caps” e “small caps”. Coloque as palavras em maiúscula, não em minúsculas.
Propriedade Font:
Se quiser definir vários aspectos do seletor de uma só vez, você pode usar o estilo da fonte para definir a ordem correta dos elementos.
Atributos de Texto
Nesta parte contém alterações e recursos relacionados ao texto, incluindo alteração de texto para controlar letras maiúsculas e minúsculas e texto maiúsculo para adicionar ou remover efeitos de maiúsculas e minúsculas, como sinais e sintomas.
Text-Transform:
A propriedade text-conversion converte o texto em letras maiúsculas ou minúsculas.
Text-Decoration:
O recurso de marca de texto permite adicionar ou remover efeitos decorativos ao texto.
Text-Align e Vertical-Align:
Essas propriedades controlam o alinhamento horizontal e vertical do texto.
Exemplo:
Text-Indent
Realiza a endentação da primeira linha do bloco de texto.
Exemplo:
Cores
Abrange funções relacionadas a cores, como color para definir a cor do texto, background.color para definir a cor de fundo e background-image para adicionar uma imagem de fundo.
Color:
É utilizada para definir a cor do texto da página.
Exemplo:
Background-Color:
É uma propriedade para definir uma cor de fundo de um determinado elemento.
Exemplo:
Background-Image:
Usada para definir uma imagem ao fundo de um determinado elemento.
Exemplo:
Background-Repeat:
É uma propriedade que controla como a determinada imagem de fundo será repetida na página.
Exemplo:
Background-Positione Background-Attachment
São usadas para controlar o posicionamento e a fixação da imagem de fundo da página.
Exemplo:
Propriedade de Classificação
Esta seção contém os principais recursos que permitem usar estilos de forma sistemática, agrupando elementos em categorias específicas. As categorias incluem linhas, blocos, blocos e objetos invisíveis.
Display:
As propriedades de exibição desempenham um papel importante na decisão de como exibir um elemento. Ele oferece opções como Nenhum, que desativa a visibilidade do elemento, Bloco, que cria uma nova caixa para colocar o objeto, Lista de elementos em um bloco com um marcador de linha e Linha, que define o elemento como parte de um bloco.
Exemplo:
White-Space:
Controla a propriedade de espaço em branco dentro de um elemento. Define se quebras de linha, espaços, tabulações, etc. devem aparecer na tela. Isso é algo a considerar ou não quebrar a linha.
Exemplo:
List-Style
A propriedade estilo de lista e suas variantes (tipo de estilo de lista, imagem de estilo de lista e posição de estilo de lista) são fundamentais na formatação de itens de lista, controlando tipo de caractere, imagem e posição do caractere.
Exemplo:
Controle de Blocos
As propriedades margin e padding desempenham um papel crucial no controle das bordas internas e externas de um elemento de bloco. Eles podem ser aplicados de diversas maneiras, como definir todas as margens de uma vez ou separadamente para cada lado (superior, direita, inferior, esquerda).
Margin e Padding:
As margens externas e internas são definidas usando as propriedades de margens e preenchimento. Eles podem afetar todas as arestas de uma vez ou podem ser aplicados a cada lado separadamente.
Exemplo:
Border-Width, Border-Color e Border Style:
Para controlar certos aspectos das bordas, como espessura, cor e estilo, usamos as propriedades border-width, border-color e border-style. Eles podem ser usados individualmente ou em grupos.
Exemplo:
Border:
Borda Superior, Borda Inferior, Borda Esquerda e Borda Direita agrupam as configurações de cor, estilo e espessura para cada uma das quatro bordas.
Exemplo:
Width e Height
As propriedades de largura e altura permitem controlar o tamanho do elemento do bloco alterando a altura e a largura do bloco.
Exemplo:
Float:
O recurso flutuante permite colocar um bloco à direita ou à esquerda da janela do navegador, permitindo que o restante do texto flua ao redor dele.
Exemplo:
Clear
O atributo clear é usado para evitar que blocos flutuem em torno de imagens ou blocos que usam o atributo float. Isto tem o mesmo efeito que o atributo explícito em HTML.
Exemplo:
Posicionamento
A posição dos objetos em HTML pode ser absoluta ou relativa. As propriedades position, top e left desempenham um papel vital neste controle.
Position, top e left:
A propriedade position requer que as propriedades top e left especifiquem a posição absoluta ou relativa do objeto. A origem da posição absoluta é o canto superior esquerdo do navegador, enquanto a posição relativa refere-se à posição anterior do objeto.
Exemplo:
Z-Index
A propriedade Z-index permite organizar objetos por camada e especificar sua profundidade na visualização. Quanto maior o número, maior o nível.
Exemplo:
Visibility:
A propriedade Visibilidade controla a visibilidade do bloco, tornando-o visível ou invisível. Ao contrário da largura, a visualização preserva o espaço ocupado por um bloco.
Exemplo:
Conclusão
Concluindo todo o conteúdo até agora, o HTML (Hypertext Markup Language) ainda é extremamente importante nos dias de hoje, desempenhando um papel essencial na criação e estruturação de páginas web. A sua importância reside na capacidade de fornecer uma base sólida para o desenvolvimento de conteúdos online, criando assim interfaces acessíveis e intuitivas para utilizadores em diferentes dispositivos e plataformas. O HTML também é a espinha dorsal da Web Semântica, facilitando a interpretação precisa do conteúdo pelos mecanismos de pesquisa e facilitando a indexação e categorização eficientes das informações. A evolução contínua do HTML e suas versões mais recentes, como o HTML5, incluem recursos avançados que expandem suas capacidades, tornando-o ainda mais importante para a criação de experiências digitais interativas ricas. Em suma, o HTML continua a ser a tecnologia central sobre a qual a web moderna foi construída e desenvolvida.
Aplicando conhecimentos do mundo físico ao mundo digital:
A importância de entender e aplicar conhecimentos do mundo físico ao design de interação no mundo digital. Ele enfatiza a necessidade de compreender os processos cognitivos dos usuários ao interagir com sistemas digitais e sugere que estratégias eficazes no mundo físico podem ser aplicadas no mundo digital.
A abordagem mencionada envolve a emulação de estratégias e métodos que as pessoas utilizam no mundo físico, como a criação de lembretes eletrônicos semelhantes aos bilhetes post-it, listas eletrônicas de tarefas e lembretes de reuniões. Essa abordagem é considerada produtiva em certos contextos, já que as estratégias bem-sucedidas no mundo físico podem ser transferidas para o ambiente digital.
O autor menciona um estudo clássico de Tom Malone sobre a “história natural” dos escritórios físicos, destacando que a organização ou desorganização aparente pode revelar estratégias subjacentes das pessoas. O texto destaca que imitar o comportamento do mundo real na interface digital deve ser cuidadosamente considerado, levando em conta a utilidade e a extensibilidade para uma aplicação interativa.
Neste resumo vamos dar continuidade nos assuntos abordados no resumo anterior.
Explicações acerca da manipulação direta Vimos que de acordo com o Princípio da Transparência de Rutkowski em 1982, os utilizadores sentem satisfação interagir com sistemas que possibilitam a manipulação direta porque são “capazes de aplicar o intelecto diretamente na execução da tarefa em questão; a ferramenta em uso tende a desaparecer”. (HECKEL, 1991) lamenta que “Nossos instintos e treinamento de engenheiros encorajam-nos a pensar logicamente em vez de visualmente e isso é contraproducente em na construção de sistemas amigáveis.”
Hutchins e colegas reveem os conceitos de manipulação direta e oferecem uma inteligente decomposição de conceitos. Eles descrevem um “sentimento de envolvimento direto num mundo de objetos, o que é bem diferente de se comunicar com ele através de um intermediário”.
A psicologia, em particular o estudo de como resolvemos problemas e como aprendemos, pode nos ajudar a entender a satisfação do utilizador em interagir com sistemas que permitem a manipulação direta.
(BRUNER et al. (1966) levou esse mesmo princípio para o ensino de fatoração polinomial. Finalmente, Arnheim (1969) mostrou que representações físicas, espaciais, ou visuais são mais simples de se memorizar do que representações numéricas ou textuais. Chega-se a conclusão, portanto, que nós humanos raciocinamos melhor em cima do concreto do que do abstrato. E isso é fácil de se entender. Ao raciocinarmos sobre coisas abstratas, temos que manter em mente, o seu significado. Quando temos evidências perceptivas dos objetos da ação, não precisamos fazer uma operação de transformação mental a mais. Assim nossas mentes estão mais livres para focar nos objetivos das nossas tarefas.
Manipulação direta pode não ser sempre a melhor saída Representações espaciais ou visuais não se constituem necessariamente uma interface superior quando comparadas a interfaces mais tradicionais. No desenvolvimento de sistemas, por exemplo, os diversos diagramas são úteis até certo ponto. Diagramas complexos facilmente se tornam confusos e difíceis de ler.
Estudos mostram que abordagens gráficas são mais eficientes quando a tarefa exige reconhecimento de padrões, mas não quando o campo visual fica muito cheio de objetos e a tarefa exige informações detalhadas. Para utilizadores experientes, uma tabela com cinquenta nomes de documentos pode ser mais apropriada do que apenas dez ícones de documentos abreviados de tal forma a caber no tamanho de ícone. Um segundo problema é que os usuários devem aprender o significado dos componentes das representações visuais. Um ícone, por exemplo, pode ter um significado para o projetista, mas pode requerer um tempo de aprendizado igual ou maior de aprendizado que uma palavra. Em aeroportos, por exemplo, devido ao fato de servirem a uma comunidade multi-línguas, boa parte da comunicação é feita por meio de ícones cujo significado nem sempre é óbvio. Outra questão é a que em vários casos, utilizadores experientes, por motivo de performance, preferem usar teclado a ter que parar a digitação, procurar o mouse e apontar para o objeto na tela. O teclado continua sendo o dispositivo de manipulação direta mais efetivo para diversos tipos de tarefas. A escolha dos objetos e ações adequados para cada tipo de tarefa não é necessariamente algo simples. Metáforas, analogias e modelos com um mínimo conjunto de conceitos são um bom ponto de partida. Problemas podem surgir quando o projetista escolhe uma metáfora não apropriada ou de difícil entendimento para a comunidade de usuários. Em geral, o projetista tem formação diferente daquelas pessoas que fazem parte da comunidade de utilizadores e não convive com elas. Assim é importante que o projetista apresente e teste seu modelo conceitual com membros da comunidade o mais cedo possível no processo. É também recomendável a confecção de um documento que apresente o modelo com suas suposições e limitações.
Ambientes de desenvolvimento de sistemas baseados em manipulação direta Não basta produzir programas de computador que implementem a manipulação direta. Um ambiente de desenvolvimento de sistemas que implemente tais conceitos, certamente aumenta a produtividade do programador. Na programação de robôs, um exemplo, os profissionais primeiro testam os movimentos necessários para uma determinada tarefa, um a um, antes de executar a sequência toda em alta velocidade. Esse conceito de programação de manipulação direta também se aplica a brocas de precisão, câmeras de televisão com movimento previamente definido, etc. Esse conceito foi levado para a automação de escritório sob a forma de macros. Macros nada mais são do que um conjunto de comandos previamente gravados que, quando acionadas, as executam trazendo produtividade e diminuindo os erros do operador. Durante a execução de uma macro outra pode ser chamada, o que aumenta e muito as possibilidades de construção de encadeamento complexo de ações. Hoje programas de automação de escritório como o Excel possuem sua própria linguagem de programação que permite aos seus usuários a criação de partes de programas que são capazes de executar operações em planilhas eletrônicas.
O capítulo explora aspectos cognitivos no design de interfaces, considerando as habilidades e limitações humanas. São apresentados frameworks conceituais baseados em cognição para explicar a interação humano-computador. Os objetivos principais incluem:
Explicar a cognição e sua importância no design de interação.
Descrever aplicações da cognição no design de interação.
Oferecer exemplos de pesquisa cognitiva que contribuíram para designs interativos eficazes.
Explicar o conceito de modelos mentais.
Apresentar frameworks conceituais úteis para o design de interação.
Permitir a compreensão e elicitação de modelos mentais.
São destacado dois modos gerais de cognição: experiencial (eficaz e sem esforço) e reflexivo (pensativo e decisivo). Processos cognitivos incluem atenção, percepção, memória, aprendizado e resolução de problemas. A atenção seleciona informações relevantes, dependendo de objetivos claros e da visibilidade da informação.
O autor destaca a interdependência dos processos cognitivos, sendo a memória especialmente relevante para o design de interação. O capítulo conclui com a importância de entender como os usuários pensam e interagem para criar designs eficazes.
Resumo: O capítulo explora a cognição no design de interfaces, abordando processos cognitivos, modelos mentais e frameworks conceituais. Destaca a interdependência dos processos cognitivos e a importância de compreender como os usuários pensam para criar designs eficazes.
