Trabalho de conclusão de curso

TRABALHO DECONCLUSﾃグ DECURSO

PROJETO GRﾃ：I CO DEI NTERFACETOUCHSCREEN PARA TELEFONEI P

UNIVERSIDADE DO SUL DE SANTA CATARINA CAYO VINÍCIUS CORRÊA E SILVA

DESIGN DE INTERFACE Projeto Gráfico de Interface Touchscreen para Telefone IP Dígitro

FLORIANÓPOLIS 2010

1

CAYO VINÍCIUS CORRÊA E SILVA

DESIGN DE INTERFACE Projeto Gráfico de Interface Touchscreen para Telefone IP Dígitro

Trabalho de Conclusão de Curso apresentado ao Curso de Graduação em Design da Universidade do Sul de Santa Catarina, como requisito parcial à obtenção do título de Bacharel em Design.

Orientador: Profa Dra Claudia Regina Batista

FLORIANÓPOLIS 2010

2

3

ao meu pai José Carlos (in memoriam), minha mãe Suely e meu irmão Diego

4

RESUMO

Uma interface bem resolvida em um sistema de interação, é uma das parte fundamentais para o funcionamento e comunicação do todo com o usuário. Ambas as partes necessitam de uma comunicação a altura sem deixar passar despercebido um detalhe.

O projeto gráfico de uma nova interface para o telefone IP touchscreen (o primeiro no Brasil e na América Latina, até o momento) para a empresa Dígitro, trazendo inovação e funcionalidade, era algo que não se via na empresa à anos.

Dividindo este trabalho em duas grandes etapas: revisão bibliográfica e um projeto de design, em que foi aplicada a metodologia proposta por Bürdek.

Neste projeto gráfico subdivide-se em 5 partes, sendo elas: briefing, estudo de campo, conceituação do projeto, geração de alternativas e escolha da alternativa final, e definição de um padrão gráfico para implementação.

Palavras-chave: projeto gráfico, design de interface; touchscreen; telefone ip.

5

LISTA DE SIGLAS ABNT – Associação Brasileira de Normas Técnicas ISO – Organização Internacional para Padronização SC – Santa Catarina TCC – Trabalho de Conclusão de Curso UNISUL – Universidade do Sul de Santa Catarina

6

LISTA DE FIGURA

Figura 1 - Metodologia Projetual para Interfaces...................................................... 13 Figura 2 - Campos interdisciplinares ......................................................................... 15 Figura 3 - Interface de linha de comando .................................................................. 17 Figura 4 - Interface baseada em menus .................................................................... 18 Figura 5 - Microsoft Windows 1.0 (1985) ................................................................... 19 Figura 6 - Microsoft Windows 1.0 (1985) .................................................................. 19 Figura 7 - Microsoft Windows 3.0 (1990) ................................................................... 20 Figura 8 - Microsoft Windows 3.1 (1992) ................................................................... 20 Figura 9 - Microsoft Windows 95 (1995) .................................................................... 21 Figura 10 - Microsoft Windows 98 (1998) ................................................................. 21 Figura 11 - Microsoft Windows XP (2001) ................................................................. 22 Figura 12 - Microsoft Windows Vista (2007) .............................................................. 22 Figura 13 - Via Voice da empresa IBM ...................................................................... 23 Figura 14 - Nokia 5530 .............................................................................................. 24 Figura 15 - Motorola DEXT........................................................................................ 25 Figura 16 - iPhone 3G ............................................................................................... 26 Figura 17 – iPad ........................................................................................................ 26 Figura 18 - Terminal de consulta de filmes ............................................................... 27 Figura 19 – Display do telefone IP da Dígitro ............................................................ 40 Figura 20 – Telefones IP ........................................................................................... 41 Figura 21 – Telefone IP Touchscreen ....................................................................... 42 Figura 22 - Telefone IP Touchscreen da empresa Polycom ..................................... 43 Figura 23 - Telefone IP Touchscreen e interface da empresa Avaya........................ 44 Figura 24 - Telefone IP Touchscreen da empresa SNOM ........................................ 45 Figura 25 - Telefone IP Touchscreen da empresa NORTEL ..................................... 46 Figura 26 - Telefone IP Touchscreen da empresa Alcatel ........................................ 47 Figura 27 - Zune HD da empresa Microsoft .............................................................. 48 Figura 28 - Projeto conceitual BenQ Black Box da empresa BenQ........................... 48 Figura 29 - Interface utilizando a linguagem Symbian 4 ............................................ 49 Figura 30 - HTC com o modelo HTC Hero ................................................................ 49

7

Figura 31 - Painel Semântico referente ao Conceito da Interface ............................. 51 Figura 32 - Sketch 1 .................................................................................................. 52 Figura 33 - Sketch 2 .................................................................................................. 53 Figura 34 - Geração de Alternativas.......................................................................... 54 Figura 35 - Fonte Arial ............................................................................................... 55 Figura 36 - Fonte Swiss721....................................................................................... 55 Figura 37 - Fonte Helvetica ....................................................................................... 55 Figura 38 - Fonte Escolhida Swiss721 BT ................................................................ 56 Figura 39 - Paleta de Cores ...................................................................................... 56 Figura 40 - Pacote de Ícones .................................................................................... 57 Figura 41 - Tela de descanso .................................................................................... 60 Figura 42 - Tela de descanso (Azul) ......................................................................... 61 Figura 43 - Tela de descanso (Roxa) ........................................................................ 62 Figura 44 - Tela de descanso (Verde) ....................................................................... 62 Figura 45 - Tela de descanso (Marrom) .................................................................... 62 Figura 46 - Tela de atalhos ....................................................................................... 63 Figura 47 - Tela de menu principal ............................................................................ 64 Figura 48 - Tela de agenda de contatos .................................................................... 65 Figura 49 - Tela de menu central .............................................................................. 66 Figura 50 - Tela recebendo chamada ....................................................................... 67 Figura 51 - Tela chamada estabelecida .................................................................... 68 Figura 52 - Tela de segunda chamada ...................................................................... 69 Figura 53 - Tela todas as chamadas ......................................................................... 70 Figura 54 - Tela monitorar ramal ............................................................................... 71 Figura 55 - Modelo de apresentação......................................................................... 73

8

SUMÁRIO

1. INTRODUÇÃO ...................................................................................................... 10 1.1 ORIGEM DA DEMANDA ................................................................................. 10 1.2 OBJETIVOS ..................................................................................................... 11 1.2.1 OBJETIVO GERAL ................................................................................... 11 1.2.2 OBJETIVOS ESPECÍFICOS ..................................................................... 11 1.3 JUSTIFICATIVA ............................................................................................... 11 1.4 ESCOPO DO PROJETO ................................................................................. 12 1.5 ADERÊNCIA À LINHA DE PESQUISA ............................................................ 12 1.6 PROCEDIMENTO METODOLÓGICO ............................................................. 12 2. DESIGN, INTERAÇÃO E INTERFACE................................................................. 14 2.1 DEFINIÇÃO DE DESIGN................................................................................. 14 2.2 DESIGN DE INTERAÇÃO ............................................................................... 14 2.3 DESIGN DE INTERFACE ................................................................................ 16 2.3.1 TIPOS DE INTERFACE ............................................................................ 16 2.4 ASPECTOS CONSIDERADOS NO DESIGN DE INTERAÇÃO E DE INTERFACES ........................................................................................................ 28 2.4.1 ERGONOMIA COGNITIVA ....................................................................... 28 2.4.2 USABILIDADE .......................................................................................... 29 2.4.2.1 INTERAÇÃO HUMANO-COMPUTADOR .............................................. 30 2.4.2.2 REGRAS DA USABILIDADE ................................................................. 31 2.4.2.2.1 HEURÍSTICAS DE NIELSEN .............................................................. 31 2.4.2.2.2 REGRAS DE OURO DE SHNEIDERMAN .......................................... 33 2.4.2.2.3 CRITÉRIOS ERGONÔMICOS DE BASTIEN & SCAPIN .................... 34 3. DESENVOLVIMENTO DO PROJETO .................................................................. 40 3.1 CLIENTE E PRODUTO ATUAL ....................................................................... 40 3.2 BRIEFING ........................................................................................................ 41 3.3 NOVO PRODUTO ........................................................................................... 41 3.4 PESQUISA DE CONCORRENTES E SIMILARES .......................................... 42 3.4.1 CONCORRENTES .................................................................................... 42 3.4.1.1 TELEFONE POLYCOM VVX 1500 TOUCHSCREEN ............................ 43

9

3.4.1.2 TELEFONE AVAYA 9670G TOUCHSCREEN ....................................... 44 3.4.1.3 TELEFONE SNOM 870 TOUCHSCREEN ............................................. 45 3.4.1.4 TELEFONE NORTEL 2007 TOUCHSCREEN ....................................... 46 3.4.1.5 TELEFONE ALCATEL IP TOUCH 4068 ................................................ 47 3.4.2 SIMILARES ............................................................................................... 48 3.5 ANÁLISE DOS DADOS ................................................................................... 50 3.6 CONCEITO DA INTERFACE DO TELEFONE IP TOUCHSCREEN................ 50 3.7 CRIAÇÃO DA INTERFACE ............................................................................. 52 3.7.1 MAPA CONCEITUAL ................................................................................ 52 3.7.2 SKETCHES ............................................................................................... 52 3.8 ESPECIFICAÇÕES DA INTERFACE .............................................................. 54 3.8.1 FONTES .................................................................................................... 54 3.8.2 PALETA DE CORES ................................................................................. 56 3.8.3 ÍCONES .................................................................................................... 57 3.8.4 TRATAMENTO VISUAL ............................................................................ 59 3.9 ALTERNATIVA ESCOLHIDA ........................................................................... 60 3.10 MODELO DE APRESENTAÇÃO ................................................................... 73 4. CONSIDERAÇÕES FINAIS .................................................................................. 74 5. FUTUROS ESTUDOS ........................................................................................... 75 6. REFERÊNCIA BIBLIOGRÁFICA .......................................................................... 76 7. ANEXOS ............................................................................................................... 79 7.1 ANEXO I – Mapa Conceitual ........................................................................... 79

10

1. INTRODUÇÃO

1.1 ORIGEM DA DEMANDA O Trabalho de Conclusão de Curso em Design (TCC) será vinculado a empresa Dígitro Tecnologia Ltda.

A Dígitro tem 32 anos de mercado sendo uma empresa cem por cento catarinense. Voltada à área tecnológica, de inteligência e telecom carrega em sua bagagem uma extensa gama de produtos, serviços e soluções. É a primeira empresa brasileira a trabalhar com sistema de inteligência voltado à segurança pública, além disso oferece soluções completas de PABX, call centers, centrais telefônicas e sistemas de convergência digital (voz e dados), oferecendo mais rapidez e conforto aos seus clientes.

Com técnicos de alta capacitação, a empresa conta com engenheiros, analistas, cientistas, designers e técnicos de alto conhecimento na área de telefonia e segurança pública que compreendem a necessidade de seus clientes.

Acompanhando o crescimento tecnológico e visando agregar valor aos produtos e soluções oferecidos, a Dígitro está desenvolvendo um telefone IP touchscreen.

Basicamente, pode-se dizer de modo simplificado que trata-se de uma adaptação do telefone IP oferecido atualmente, mas com a inserção de uma interface interativa otimizada.

Dessa forma, a Dígitro apontou a necessidade no desenvolvimento de uma interface atraente, com funcionalidades extras em sua composição e com usabilidade.

11

1.2 OBJETIVOS

1.2.1 OBJETIVO GERAL Realizar o design da interface digital para o aparelho de telefone IP touchscreen da Dígitro.

1.2.2 OBJETIVOS ESPECÍFICOS -

Realizar o projeto centrado no usuário, ou seja, respeitando os aspectos cognitivos e a experiência do usuário.

-

Desenvolver uma interface digital intuitiva, contemplando os preceitos da usabilidade, propiciando ao usuário facilidade na navegação e rapidez em encontrar a informação e/ou função desejada.

-

Criar uma interface atraente, ou seja, dotada de qualidade estética e tratamento visual compatível com o perfil do público alvo.

-

Utilizar linguagem visual gráfica pertinente de forma a comunicar eficazmente o acesso às funções disponíveis no telefone.

1.3 JUSTIFICATIVA

A demanda do telefone IP touchscreen surgiu quando um dos clientes mais importantes da empresa sugeriu este novo produto, considerando que empresas norte americanas e inglesas já comercializam este tipo de solução.

Com o crescimento da empresa e o foco em atingir mercados internacionais, vislumbrou-se a possibilidade de acrescentar ao portfolio mais este case, tornandose assim a primeira empresa brasileira a oferecer este tipo de produto neste seguimento de mercado.

12

No design da interface do telefone IP touchscreen, serão consideradas as ações do usuário, envolvendo um estudo sobre os aspectos cognitivos na interação humano-máquina facilitando o lado operacional e conectando ambos para um maior entendimento de suas funcionalidades. Para tanto, designer de interfaces embasa seu projeto na ergonomia, usabilidade e estudos estético-formal, passando pela concepção, implementação e verificação do usuário.

1.4 ESCOPO DO PROJETO Este estudo, envolve a interação do usuário com a interface do touchscreen,cujo software principal,disponibiliza informações em módulos, tanto como configurações e status do aparelho (hardware), para comodidade do cliente em ter em mãos um aparelho multifuncional que atenda com rapidez e objetividade as atividades do diaa-dia.

Portanto, o escopo deste trabalho concentra-se em apresentar uma solução visual gráfica que propicie ao usuário interagir fácil e precisamente com o sistema, desfrutando de uma gama de funcionalidades.

O escopo deste trabalho não contempla o desenvolvimento do software, nem o design do aparelho (artefato/hardware).

1.5 ADERÊNCIA À LINHA DE PESQUISA Este estudo possui aderência à Linha de Pesquisa "Design para Novas Mídias e a Interatividade | Design Digital".

1.6 PROCEDIMENTO METODOLÓGICO O procedimento metodológico do presente estudo é constituído das seguintes fases:

13

FASE INVESTIGATIVA: Será realizada uma Pesquisa Bibliográfica, onde serão utilizadas como fontes os mais recentes trabalhos publicados nas seguintes áreas: design digital, design da interação, ergonomia, comunicação visual, cores, entre outras áreas vinculadas ao tema em questão.

FASE ANALÍTICA: Ao realizar análise dos dados levantados na pesquisa bibliográfica e confrontá-los com os requisitos do sistema do telefone IP touchscreen será possível: 

identificar as necessidades do projeto da interface;



estabelecer o conceito da interface;

FASE PRODUTIVA: O desenvolvimento do design da interface será pautado na metodologia proposta por Bürdek (1999) apud Batista (2008).

Figura 1 - Metodologia Projetual para Interfaces Fonte: Bürdek (1999) apud BATISTA (2008, p. 20)

FASE DA VALIDAÇÃO: Validar a interface, avaliando a usabilidade da interface através de um teste com usuários.

14

2. DESIGN, INTERAÇÃO E INTERFACE

2.1 DEFINIÇÃO DE DESIGN Na literatura é possível encontrar diversas definições sobre design, formuladas a partir de diferentes pontos de vista de especialistas nesta área.

Entretanto, neste estudo fez-se a opção em apresentar a definição formulada pelo International Council Design of Societies of Industrial Design | ICSID1 –, adotada também pelo Programa Brasileiro de Design: Design é uma atividade criativa cujo objetivo é determinar as propriedades multifacetadas dos objetos, dos processos, dos serviços e de seus sistemas durante todo o ciclo de vida. Conseqüentemente, design é o fator central da inovadora humanização da tecnologia e fator crucial da cultura e intercâmbio da economia. Design busca descobrir e avaliar relacionamentos estrutural, organizacional, funcional, expressivo e econômico, com a tarefa de: – Melhorar a sustentabilidade global e proteção ambiental (ética global); – Propiciar benefícios e liberdade para toda a comunidade humana, individual e coletiva; – Defender usuários finais, produtos e mercado (ética social); – Dar suporte a diversidade cultural apesar da globalização no mundo (ética cultural); – Propiciar aos produtos, serviços e sistemas, aquelas formas que são expressivas (semiologia) e coerentes com (estética) sua apropriada complexidade. (ICSID, 2007)

O campo do Design possui ampla abrangência e, naturalmente, foram surgindo subáreas e/ou especialidades, dentre as quais se destaca o Design de Interação, Design de Interfaces, cujas definições são apresentadas na sequência.

2.2 DESIGN DE INTERAÇÃO Interação é definida como ação recíproca entre usuário e um equipamento sendo ele um computador, televisor, etc.

1

O Conselho Internacional das Organizações de Design Industrial (ICSID) é uma organização não governamental que protege e promove os interesses da profissão do design industrial.

15

Especificamente, significa criar experiências que melhorem e estendam a maneira como as pessoas trabalham, se comunicam e interagem [...] consiste em encontrar maneiras de fornecer suporte às pessoas.Tal projeto contrasta com o da engenharia de software, que enfoca principalmente a produção de soluções de software para certas aplicações. (PREECE et al.

2005).

Com o avanço da tecnologia e a inserção de novos equipamentos e softwares utilizados para otimizar as tarefas da sociedade contemporânea, surgiu a necessidade de transformar a linguagem da máquina em linguagem compreensível ao Ser Humano, em sua comunicação e simplificação de suas tarefas.

Preece et al. (2005) enfatiza que o designer de interação entra em cena agregando conforto, facilidade no entendimento, na interação e na redução de esforços (na visão do usuário). As ações e reações dos usuários na interação com estas soluções necessitam de uma atenção especial do designer que irá projetar a nova interface. O design de interação é constituído por diferentes áreas, como por exemplo, design, psicologia cognitiva, sociologia, informática, ergonomia, entre outras, tal como pode ser observado na figura abaixo:

Figura 2 - Campos interdisciplinares Fonte: PREECE et al. (2005, p. 29)

De acordo com Oliveira Netto (2004, p. 81): O paradigma de interação pode ser ordenado dos seguintes modos: ação-

16

objeto ou objeto-ação. Seguindo a seqüência ação-objeto, primeiramente o usuário escolhe a ação a realizar, para, em seguida escolher o objeto que sofrerá a ação resultante da operação. Já seguindo a seqüência objetoação, inicialmente o usuário escolhe o objeto e, em seguida, indica a operação.

Ao utilizar um celular, por exemplo, interage-se ao fazer uma ligação, consultar agenda, apagar, salvar, cancelar uma operação, visualizar um dado, editar, entre outros. Todas estas ações, somente são possíveis devido à preocupação dos profissionais envolvidos no decorrer do projeto, portanto, visualiza-se aí a relevância do design de interação no desenvolvimento de produtos intuitivos e fáceis de utilizar.

2.3 DESIGN DE INTERFACE Apesar do sentido da palavra interface ser amplo, inerente a área em que se trata, interface em design é caracterizada como um meio que capacita à fácil comunicação e interação de um usuário ou um grupo de usuários.

Segundo Oliveira Netto (2004), a interface deve chegar a ponto de passar despercebida, ou seja, “invisível” ao usuário para que este possa se concentrar exclusivamente no problema que deseja resolver.

Conforme Lévy (1993, p. 181) apud Batista (2008), interface é “uma superfície de contato, de tradução, de articulação entre dois espaços, duas espécies, duas ordens de realidade diferentes: de um código para outro, do analógico para o digital, do mecânico para o humano [...]”.

2.3.1 TIPOS DE INTERFACE

Dentre os tipos de interface, destacam-se: interface de linha de comando, interface baseada em menus, interface gráfica, interface de comando de voz e interface touchscreen; entretanto, Prioste (2003, p. 92) apud Batista (2008) afirma

17

que “foi através da interface gráfica que o computador rompeu a barreira dos ambientes científicos e chegou até os ambientes domésticos”.

Abaixo serão apresentadas as características dos principais tipos de interface: 

Interface de linha de comando: são as interfaces com comandos prédefinidos para o usuário digitar, solicitar uma ação/comando ao sistema. São utilizados combinações de caracteres e teclas, abreviações, palavras curtas e caracteres únicos que são bem eficientes os usuários experientes (usuários de alto nível de conhecimento). É uma interface complicada para usuários inexperientes, pelo alto nível de erros na digitação dos caracteres e também por desconhecer a gama de comandos que o sistema possui.

Figura 3 - Interface de linha de comando Fonte: Arquivo pessoal



Interface baseada em menus: estas interfaces apresentam menu de opções ao usuário, sendo consideradas de fácil reconhecimento e escolha. Com agrupamentos de itens e botões com opções de seleção simples, botões de seleção ou de seleção múltipla, que o usuário irá interagir e indicar ao sistema a sua escolha. A hierarquização do menu é feita de acordo com as tarefas mais recorrentes, observadas na hora do desenvolvimento desta interface. A

18

interação disponibiliza ao usuário duas formas de categorização hierárquica do menu, sendo elas por sequência de teclas, menu de abas ou pull-down que aparecem quando é clicado em um item e somem ao selecionar uma das opções ou, simplesmente, quando é abandonado.

Figura 4 - Interface baseada em menus Fonte: Arquivo pessoal



Interfaces gráficas e evolução: observa-se a evolução das interfaces gráficas com o passar dos anos, desde a primeira interface, com surgir em 1985 até os dias atuais.

As imagens apresentadas abaixo, servem apenas como demonstração da evolução das interfaces gráficas com o passar do tempo. O Windows, da empresa Microsoft, é um dos softwares mais utilizados nos dias atuais pela maioria dos usuários domésticos e comerciais. Abaixo pode-se observar algumas telas do sistema:

19

Figura 5 - Microsoft Windows 1.0 (1985) Fonte: Evolution of Desktops (2010)

Figura 6 - Microsoft Windows 1.0 (1985) Fonte: Evolution of Desktops (2010)

20

Figura 7 - Microsoft Windows 3.0 (1990) Fonte: Evolution of Desktops (2010)

Figura 8 - Microsoft Windows 3.1 (1992) Fonte: Evolution of Desktops (2010)

21

Figura 9 - Microsoft Windows 95 (1995) Fonte: Evolution of Desktops (2010)

Figura 10 - Microsoft Windows 98 (1998) Fonte: Evolution of Desktops (2010)

22

Figura 11 - Microsoft Windows XP (2001) Fonte: Evolution of Desktops (2010)

Figura 12 - Microsoft Windows Vista (2007) Fonte: Evolution of Desktops (2010)

23



Interface por comando de voz: este tipo de interface tem como objetivo o reconhecimento de voz (com o auxílio de um microfone) convertido em comandos entendíveis pelo computador. Através de uma pré-configuração e testes iniciais feitos pelo software, ele passa a reconhecer cada comando através de palavras ou frases longas ou curtas pré-definidas pelo produto.

Observa-se abaixo a interface do sistema Via Voice, comercializado pela empresa IBM:

Figura 13 - Via Voice da empresa IBM Fonte: Estilo Web (2010)



Interface Touchscreen: este tipo de interface, caracteriza-se por possuir uma interface plana sensível ao toque humano ou de outros dispositivos como canetas desenvolvidas apropriadamente para o uso, que aumentam a precisão do ponto de toque. Há três diferentes sistemas de rastreamento de toque: sistema resistivo, sistema capacitivo e sistema de onda acústica superficial, os quais são descritos resumidamente abaixo, como apresentado e descrito no site How Stuff Works (2010): o Sistema resistivo: este tipo de sistema apresenta duas camadas, sendo uma metálica e outra resistiva, uma sobreposta a outra com corrente elétrica passando entre as duas que são aparadas por separadores.

Quando o usuário toca a tela, duas camadas fazem contato exatamente no ponto pressionado, aonde o computador calcula e

24

entende que alguma ação Ê para ser executada naquele ponto pressionado, assim como o mouse utilizado atualmente. Este tipo de sistema pode ser encontrado em 90% dos celulares touchscreen vendidos no mercado e para ilustrar foram escolhidos dois modelos mais vendidos:

Figura 14 - Nokia 5530 Fonte: Nokia (2010)

25

Figura 15 - Motorola DEXT Fonte: Motorola (2010)

o

Sistema capacitivo: uma camada que armazena carga elétrica é colocada no painel de vidro do monitor. Quando um usuário toca o monitor com seu dedo, parte da carga é transferida para o usuário, de modo que a carga na camada capacitiva diminui. Esta diminuição é medida nos circuitos localizados em cada canto do monitor.

Considerando as diferenças relativas de carga em cada canto, o computador calcula exatamente onde ocorreu o toque e então envia esta informação para o software do driver da tela sensível. Uma vantagem que o sistema capacitivo apresenta sobre o resistivo é que ele transmite quase 90% da luz do monitor, enquanto o sistema resistivo transmite apenas 75%. Isso dá ao sistema capacitivo uma imagem muito mais clara do que o sistema resistivo. Este sistema é utilizado em um dos produtos mais cobiçados no mundo os iPhones e iPads vendidos pela empresa americana Apple.

26

Figura 16 - iPhone 3G Fonte: Apple (2010)

Figura 17 – iPad Fonte: Apple (2010)

27

o Sistema de onda acústica superficial: em uma tela de um sistema de onda acústica superficial, dois transdutores (um receptor e um emissor) são posicionados ao longo dos eixos x e y da placa de vidro do monitor. Também instalados sobre o vidro, encontram-se refletores que enviam de volta um sinal elétrico proveniente de um transdutor para o outro. O transdutor receptor é capaz de informar se a onda foi perturbada por um evento de toque em qualquer instante e localizá-lo.

A configuração por onda acústica não possui camadas metálicas sobre a tela, permitindo a passagem de 100% da luz e uma claridade perfeita da imagem. Isso torna o sistema de onda acústica ideal para exibição de gráficos detalhados, os dois outros sistemas apresentam uma degradação significativa da claridade. Este sistema é utilizado em terminais de compras de ingressos para cinema, consulta de filmes em locadoras, terminais de consulta de pontos turísticos, etc.

Figura 18 - Terminal de consulta de filmes Fonte: How Stuff Works (2010)

28

Após o sucesso das interfaces gráficas, atualmente observa-se uma forte tendência: cada vez mais são adotadas as interfaces touchscreen.

Em relação a fase inicial do desenvolvimento da interface torna-se necessário entender quais tarefas serão executadas, o perfil do usuário que irá interagir, os requisitos e as limitações do projeto, buscando a satisfação do usuário, a melhoria do desempenho das tarefas e o aumento da produtividade.

Dentre as diversas áreas relevantes ao design de interface, pode-se citar a Ergonomia Cognitiva, tema abordado na sequência.

2.4 ASPECTOS CONSIDERADOS NO DESIGN DE INTERAÇÃO E DE INTERFACES

2.4.1 ERGONOMIA COGNITIVA A ergonomia é o estudo da adaptação do trabalho ao homem. O trabalho aqui tem uma acepção bastante ampla, abrangendo não apenas aquelas máquinas e equipamentos utilizados para transformar os materiais, mas também toda a situação em que ocorre o relacionamento entre o homem e seu trabalho. Isso envolve não somente o ambiente físico, mas também os aspectos organizacionais de como esse trabalho é programado e controlado para produzir os resultados desejados. (IIDA, 1990, p. 1)

Dentre os diversos ramos da ergonomia, destaca-se a ergonomia cognitiva ou engenharia psicológica, que trata de fatores e estudos de como o homem apreende o mundo através dos sentidos, o estudo da percepção humana, entre outros.

Fialho (2001) aponta que a psicologia cognitiva contribui para o design de Interfaces Gráficas Computacionais com pesquisas sobre o funcionamento do cérebro e mais especificamente as características da percepção humana. O homem apreende o mundo através dos sentidos. Após a recepção da informação, a passagem pelas portas de entrada, os chamados inputs, são processadas internamente pelo cérebro sendo assim decodificadas, agrupadas e armazenadas podendo gerar ou não ações.

29

Cognição é classificada para Preece et al. (2005) como um processo que envolve as atividades do dia-a-dia, tais como: pensar, escrever, ler, aprender, lembrar, falar, tomar decisões, ver e fantasiar.

A cognição também é apresentada no que se diz respeito aos tipos específicos de processos, tais como, percepção humana, atenção humana e visão. 

Percepção Humana: é feita pela análise das informações adquiridas pelos sistemas sensitivos e transformada em experiências visuais, auditivas, táteis, olfativas e gustativas. Preece et al. (2005) aponta “no que diz respeito ao design de interação, é importante apresentar a informação de uma maneira que possa ser prontamente percebida, da forma pretendida.”



Atenção Humana: Preece et al. (2005) afirmam que a atenção permite focar uma informação relevante para a tarefa que esta sendo realizada. Este processo poderá ser de fácil ou difícil compreensão, dependendo da quantidade e clareza de informações que precisamos salientar no ambiente.

Se sabemos exatamente o que queremos encontrar, tentamos combinar isso com a informação que está disponível. Por exemplo, se recém aterrissamos em um aeroporto, após um longo vôo, e queremos saber quem ganhou a Copa do Mundo, podemos dar uma olhada nas manchetes de jornais, pesquisar na internet, ligar para um amigo ou perguntar para alguém dentro do aeroporto. (PREECE et al., 2005)

2.4.2 USABILIDADE Usabilidade em sua forma mais simples é facilidade de uso. A facilidade de uso acarreta execuções mais rápidas e objetivas do objeto manipulado, compreensão mais objetiva e clara e com redução de ocorrências de erros.

De acordo com Nielsen (1993) a usabilidade é um atributo da qualidade que avalia quão fáceis as interfaces de usuários são de usar.

De acordo com as normas ISO 9241-11 a usabilidade é a medida pela qual o produto pode ser usado por usuários específicos para alcançar objetivos específicos com efetividade, eficiência e satisfação em um contexto de uso específico.

30

A usabilidade vem como um catalisador das interações do usuário, otimizando o trabalho, propiciando fácil entendimento de todo o processo e dando abertura ao entendimento tanto do usuário como da máquina na execução das tarefas.

De acordo com Preece et al. (2005), as metas de usabilidade são: 

Eficácia: Quando o sistema atende completamente o que ele propunha fazer.



Eficiência: Se o sistema é realmente eficiente ao auxiliar o usuário na realização da tarefa.



Segurança: Se o sistema traz certa segurança ao usuário nas execuções de tarefas, como: feedbacks, mensagens de confirmação de certa ação (excluir, por exemplo), entre outros.



Utilidade: Se todos os elementos do sistema são realmente úteis, atendendo as necessidades do usuário de uma forma rápida e precisa. Funções apropriadas para realizar a tarefa.



Fácil

aprendizagem:

Basicamente

define-se

pela

capacidade

de

aprendizagem do usuário, o quão fácil o sistema é ao usar. 

Fácil memorização: Preza pela facilidade que o usuário tem ao lembrar passo-a-passo na utilização do sistema, depois de aprendido.

Um dos conceitos que ajudam a definir a usabilidade e a Interação HumanoComputador (IHC), que é apresentada na sequência.

2.4.2.1 INTERAÇÃO HUMANO-COMPUTADOR

Interação Humano-Computador (IHC) engloba o estudo do intercâmbio de informações entre pessoas e computadores. Resultando no aperfeiçoamento da usabilidade suprindo as ferramentas para a melhoria das interfaces.

31

Uma lista foi elaborada por Hansen et al. (1971) com os princípios que devem ser seguidos no design de sistemas interativos: 

Conhecer o usuário;



Minimizar a necessidade de memorização, substituindo a entrada de dados pela seleção de itens, usando nomes ao invés de números, assegurando-se um comportamento previsível e provendo acesso rápido à informação prática do sistema;



Otimizar as operações mediante a rápida execução de comandos comuns à consistência da interface e organizando e reorganizando a estrutura da informação com base na observação do uso do sistema;



Oferecer ao usuário mensagens de erro eficientes, criar designs que evitem os erros mais comuns, tornando possível desfazer as ações realizadas e garantir a integridade do sistema no caso de uma falha de software ou hardware.

2.4.2.2 REGRAS DA USABILIDADE Algumas orientações e “boas práticas” podem garantir uma boa usabilidade aplicada na relação usuário-sistema. Três propostas tidas como bases da usabilidade de sistemas interativos foram utilizadas pela equipe multidisciplinar durante o projeto gráfico da interface para o telefone IP touchscreen da Dígitro.

2.4.2.2.1 HEURÍSTICAS DE NIELSEN Nielsen propõe em seu livro Usability engineering (1994), dez heurísticas de usabilidade

sendo

elas

conhecidas

como

“configuração

base”

para

o

desenvolvimento de qualquer sistema de usabilidade como enfatizam CYBIS,

32

BETIOL e FAUST (2007). Segue abaixo em uma forma resumida estas dez heurísticas do design de interface do usuário propostas por Nielsen:



Visibilidade do status do sistema: o sistema mantém os usuários sempre informados sobre o que está acontecendo, fornecendo um feedback adequado, dentro de um tempo razoável;



Compatibilidade do sistema com o mundo real: o sistema fala a linguagem do usuário utilizando palavras, frases e conceitos familiares a ele, em vez de termos orientados ao sistema;



Controle do usuário e liberdade: fornece maneiras de permitir que os usuários saiam facilmente dos lugares inesperados em que se encontram, utilizando “saídas de emergência” claramente identificadas;



Consistência e padrões: evitar fazer com que os usuários tenham que pensar se palavras, situações ou ações diferentes significam a mesma coisa;



Ajudar os usuários a reconhecer, diagnosticar e recuperar-se de erros: utiliza linguagem simples para descrever a natureza do problema e sugere uma maneira de resolvê-lo;



Prevenção de erros: onde possível, impende a ocorrência de erros;



Reconhecimento em vez de memorização: tornar objetos, ações e opções visíveis;



Flexibilidade e eficiência de uso: fornece aceleradores invisíveis aos usuários inexperientes, os quais, no entanto, permitem aos mais experientes realizar tarefas com mais rapidez;

33



Estética e design minimalista: evita o uso de informações irrelevantes ou raramente necessárias;



Ajuda e documentação: fornece informações que podem ser facilmente encontradas e ajuda mediante uma série de passos concretos que podem ser facilmente seguidos.

2.4.2.2.2 REGRAS DE OURO DE SHNEIDERMAN

As “oito regras de ouro” do design da interface são apresentadas por Shneiderman & Plaisant (1992). Sobre experiências heurísticas estudas e analisadas por Shneiderman, sendo elas aplicáveis na maioria dos sistemas interativos, foram propostas os seguintes princípios: 

Perseguir a consistência: seqüências consistentes de ações devem ser utilizadas em situações similares; terminologia idêntica deve ser usada em prompts, menus e telas de ajuda; e cores, layout e fontes consistentes devem ser empregados por todo o sistema.



Fornecer atalhos: enquanto a freqüência de uso aumenta também aumenta o desejo do usuário de diminuir o número de interações e aumentar o ritmo delas. Tempos de resposta curtos e taxas de exposição rápidas são atrativos para usuários freqüentes.



Oferecer feedback informativo: para cada ação do usuário deve haver um feedback do sistema. Para ações freqüentes e menores a resposta pode ser modesta, enquanto ações infreqüentes e maiores devem ter respostas substanciais.

34



Marcar final dos diálogos: seqüências de ações devem ser organizadas em grupos com começo, meio e fim. Os feedbacks informativos ao completar um grupo de ações dão ao usuário a satisfação de dever cumprido, uma sensação de alívio e uma indicação de que o caminho está limpo para se preparar para o próximo grupo de ações.



Fornecer prevenção e manipulação simples de erros: tente ao máximo projetar o sistema de forma que os usuários não possam cometer erros graves. Se um usuário comete um erro, o sistema deve ser capaz de detectar o erro e oferecer mecanismos simples e compreensíveis para manipulação do mesmo.



Permitir fácil reversão das ações: esta funcionalidade alivia a ansiedade, já que os usuários sabem que erros podem ser desfeitos; isto encoraja a exploração de opções não familiares. A unidade de reversão pode ser uma única ação, uma entrada de dados ou um grupo completo de ações.



Sustentar o controle do usuário: operadores experientes desejam se sentir no controle do sistema e sentir que o sistema responde às suas ações. Projete o sistema para fazer dos usuários os iniciadores das ações, ao invés de apenas responder a elas.



Reduzir a carga de memória de trabalho: a limitação humana no processamento da informação na memória de curto-prazo exige que interfaces se mantenham simples.

2.4.2.2.3 CRITÉRIOS ERGONÔMICOS DE BASTIEN & SCAPIN

O emprego de critérios bem definidos e adequados se faz necessário para obtenção de sucesso em qualquer processo de concepção ou de avaliação.

35

Os critérios ergonômicos de Bastien e Scapin (1993) são considerados os mais importantes no processo de desenvolvimento de sistemas interativos definindo então os oito critérios divididos e subdivididos, com intuito de reduzir problemas ergonômicos, identificação e classificação das qualidades nas interfaces dos sistemas interativos. Observe abaixo os critérios de Bastien e Scarpin: 

Condução: refere-se aos meios disponíveis para aconselhar, orientar, informar e conduzir o usuário na interação com o computador (mensagens, alarmes, rótulos, etc.). Subdivide-se em 4 itens: convite, agrupamento de itens, feedback e legibilidade. o Presteza: esse critério engloba os meios utilizados para levar o usuário a realizar determinadas ações, como, por exemplo, entrada de dados, bem como mecanismos ou meios que permitem ao usuário conhecer as alternativas, em termos de ações, conforme o estado ou contexto nos quais ele se encontra. o Feedback Imediato: refere-se às respostas do sistema às ações do usuário. Tais entradas podem ir do simples pressionar de uma tecla até uma lista de comandos. Em todos os casos, respostas do computador devem ser fornecidas, de forma rápida, com passo (timing) apropriado e consistente para cada tipo de transação, como o seu estado e resultados. o Legibilidade: características lexicais das informações apresentadas na tela que possam dificultar ou facilitar a leitura dessa informação (brilho do caractere, contraste letra/fundo, tamanho da fonte, espaçamento entre palavras, espaçamento entre linhas, espaçamento de parágrafos, comprimento da linha, etc.). o Agrupamento/Distinção de Itens: este item diz respeito à organização visual dos itens de informações relacionadas uns com os outros de alguma maneira.

36



Agrupamento/Distinção

por

Localização:

posicionamento

relativo dos itens, estabelecido para indicar se eles pertencem ou não a uma dada classe, ou, ainda, para indicar diferenças entre classes. Esse critério também diz respeito ao posicionamento relativo dos itens dentro de uma classe. 

Agrupamento/Distinção por Formato: trata-se especificamente às características gráficas (formato, cor, etc.) que indicam se itens pertencem ou não à uma dada classe, ou que indicam ainda distinções entre classes diferentes ou distinções entre itens de uma dada classe.



Carga de Trabalho: refere-se à todos os elementos da interface que têm um papel importante na redução da carga cognitiva e perceptiva do usuário e no aumento da eficiência do diálogo. O critério carga de trabalho está subdividido em dois critérios: brevidade (que inclui concisão e ações mínimas) e densidade informacional. o Brevidade: denota-se como a carga de trabalho perceptiva e cognitiva, tanto para entradas e saídas individuais, quanto para conjuntos de entradas (isto é, conjuntos de ações necessárias para se alcançar uma meta). 

Concisão: define-se como a carga perceptiva e cognitiva de saídas e entradas individuais. Por definição, a concisão não diz respeito às mensagens de erro e de feedback.



Ações Mínimas: trata-se da carga de trabalho em relação ao número de ações necessárias à realização de uma tarefa. O que temos aqui é uma questão de limitar tanto quanto possível o número de passos que o usuário deve empregar.

o Densidade Informacional: refere-se à carga de trabalho do usuário de um ponto de vista perceptivo e cognitivo, com relação ao conjunto total

37

de itens de informação apresentados aos usuários e não a cada elemento ou item individual. 

Controle Explícito: diz respeito tanto ao processamento explícito pelo sistema das ações do usuário quanto ao controle que os usuários têm sobre o processamento de suas ações pelo sistema. O critério Controle Explícito se subdivide em: Ações Explícitas do Usuário e Controle do Usuário. o Ações Explícitas do Usuário: refere-se às relações entre o processamento pelo computador e as ações do usuário. Essa relação deve ser explícita, isto é, o computador deve processar somente ações solicitadas pelo usuário e apenas quando solicitado a fazê-lo. o Controle do Usuário: corresponde ao fato de que os usuários devem sempre estar no controle do processamento do sistema (por exemplo, interromper, cancelar, suspender e continuar). Cada ação possível do usuário deve ser antecipada e opções apropriadas devem ser oferecidas.



Adaptabilidade: diz respeito à capacidade do sistema de reagir conforme o contexto e conforme as necessidades e preferências do usuário. Dois subcritérios participam da adaptabilidade: a flexibilidade e a consideração da experiência do usuário. o Flexibilidade: define-se sobre os meios colocados à disposição do usuário que lhe permitem personalizar a interface, a fim de levar em conta as exigências da tarefa, de suas estratégias ou seus hábitos de trabalho. Ela corresponde também ao número das diferentes maneiras à disposição do usuário para alcançar um determinado objetivo. Tratase, em outros termos, da capacidade da interface de se adaptar as variadas ações do usuário. o Consideração da experiência do usuário: tem-se como os meios implementados que permitem que o sistema respeite o nível de experiência do usuário.

38



Gestão de erros: trata-se de todos os mecanismos que possibilitam a redução ou evitar a ocorrência de erros e, quando eles ocorrerem, que favoreçam sua correção. Os erros são aqui considerados como entrada de dados incorretos, entradas com formatos inadequados, entradas de comandos com sintaxes incorretas, etc. Três subcritérios participam da gestão dos erros: a proteção contra os erros, a qualidade das mensagens de erro e a correção dos erros. o Proteção contra os erros: são mecanismos empregados para detectar e prevenir os erros de entradas de dados, comandos, possíveis ações de conseqüências desastrosas e/ou não recuperáveis. o Qualidade das mensagens de erro: trata-se da pertinência, à legibilidade e à exatidão da informação dada ao usuário sobre a natureza do erro cometido (sintaxe, formato, etc.) e sobre as ações a executar para corrigi-lo. o Correção dos erros: defini-se quanto aos meios colocados à disposição do usuário com o objetivo de permitir a correção de seus erros.



Consistência (Homogeneidade/Coerência): trata-se do modo nas quais as escolhas na concepção da interface (códigos, denominações, formatos, procedimentos, etc.) são conservadas idênticas, em contextos idênticos, e diferentes, em contextos diferentes.



Significado dos códigos e denominações: aponta adequação entre o objeto ou a informação apresentada ou pedida e sua referência. Códigos e denominações significativas possuem uma forte relação semântica com seu referente. Termos pouco expressivos para o usuário podem ocasionar problemas de condução, podendo levá-lo a selecionar uma opção errada.



Compatibilidade: refere-se ao modo que possa existir entre as características do usuário (memória, percepção, hábitos, competências, idade, expectativas, etc.) e as tarefas, de uma parte, e a organização das saídas, das entradas e

39

do diálogo de uma dada aplicação, de outra. Também ao grau de similaridade entre diferentes ambientes e aplicações.

40

3. DESENVOLVIMENTO DO PROJETO

3.1 CLIENTE E PRODUTO ATUAL O telefone atualmente comercializado pela Dígitro atende seus clientes com um display monocromático e sem interação, tal como pode ser observado na fig. 19:

Figura 19 – Display do telefone IP da Dígitro Fonte: Arquivo pessoal

Seguindo as tendências de mercado, de inovação e tecnologia, vislumbrou-se o lançamento de um telefone mais sofisticado e funcional. O telefone touchscreen.

Em primeira instância, a interface desenvolvida deveria apresentar as mesmas funções dos botões no painel principal do produto, como pode ser visto na figura abaixo:

41

Figura 20 – Telefones IP Fonte: Arquivo pessoal

3.2 BRIEFING Ao levantar os requisitos do projeto com o cliente, observou-se as seguintes definições: 

O produto tem como objetivo compor portfólio;



Deverá ser compatível com as plataformas de terceiros;



Os públicos atendidos serão gestores e secretárias executivas;



“O software terá de ser compatível com as seguintes especificações de hardware: resolução de 480x272 px, tamanho da tela de 4,3”, 24 bits de cor, 91dpi, RAM 32MB, ROM 16MB e processador 300mhz ou 600mhz.

3.3 NOVO PRODUTO No telefone IP touchscreen será desenvolvido um novo conjunto de aplicações e facilidades com o intuito de atender as necessidades do cliente.Os

42

botões que no aparelho anterior eram disponibilizados fora do display, na nova versão estarão presentes na interface.

Ressaltando que o produto será totalmente customizado de acordo com a necessidade do cliente contratante do serviço, existindo uma versão padrão que será apresentada durante este relatório.

Figura 21 – Telefone IP touchscreen Fonte: Arquivo pessoal

Como este novo produto não tem um “cliente direto” (licitação), o desenvolvimento se deu pelo impulsionamento do mercado e acompanhar as novas tecnologias existentes. A pesquisa feita foi informal por parte dos desenvolvedores responsáveis e em conjunto com a presidência da empresa.

3.4 PESQUISA DE CONCORRENTES E SIMILARES

3.4.1 CONCORRENTES Observou-se

predominância

de

empresas

multinacionais

com

desenvolvimento em países da América do Norte e Europa. Sendo empresas de grande porte e com base totalmente tecnológica.

43

Pode-se classificar este produto como o primeiro no Brasil e na America latina com tecnologia 100% brasileira. Os produtos das empresas pesquisadas foram:

3.4.1.1 TELEFONE POLYCOM VVX 1500 TOUCHSCREEN

Figura 22 - Telefone IP Touchscreen da empresa Polycom Fonte: Polycom (2010)

Funcionalidades do aparelho apresentadas pela empresa: 

Visor: 8,3” (800 x 480px)



Vídeo conferências



Cotação e bolsa de valores



Informação mais detalhada durante a chamada



Gravação de voz (chamadas)



Vídeo mail box



Slideshow (imagens pessoais)



Ativação de telefone por voz

44

3.4.1.2 TELEFONE AVAYA 9670G TOUCHSCREEN

Figura 23 - Telefone IP Touchscreen e interface da empresa Avaya Fonte: Avaya (2010)

Funcionalidades do aparelho apresentadas pela empresa 

Visor: 5,1 x 3,8” (640 x 480px)



Teclado virtual



Envio de mensagens



Clima e tempo



Relógio mundial



Calculadora



Cotação e bolsa de valores



Ativação de telefone por voz

45

3.4.1.3 TELEFONE SNOM 870 TOUCHSCREEN

Figura 24 - Telefone IP Touchscreen da empresa SNOM Fonte: SNOM (2010)

Funcionalidades do aparelho apresentadas pela empresa 

Visor: 4,3” (480 x 272px)



Sistema de busca inteligente



Drag-and-drop a partir da agenda



Classificação de contatos e demonstração nas chamadas



Agenda com filtros de grupos importantes



Customização de toques

46

3.4.1.4 TELEFONE NORTEL 2007 TOUCHSCREEN

Figura 25 - Telefone IP Touchscreen da empresa NORTEL Fonte: Nortel (2010)

Características do aparelho apresentadas pela empresa 

Visor: 5,7” (320x240px)



Interface pobre graficamente



Falta de padrão gráfico



Cores sem contraste



Ícones de difícil assimilação



Rótulos claros



Interface textual

47

3.4.1.5 TELEFONE ALCATEL IP TOUCH 4068

Figura 26 - Telefone IP Touchscreen da empresa Alcatel Fonte: Alcatel (2010)

Funcionalidades do aparelho apresentadas pela empresa 

Visor: 73,5mm x 55,6mm(240 x 320px)



Poucas cores



Pouco atrativo



Existe um padrão gráfico



Minimalista



Navegação intuitiva



Uso de abas

48

3.4.2 SIMILARES Os similares apresentados a seguir, foram pesquisados com intuito de maior amplitude no repertório visual e funcionalidades nas quais poderão ou não ser aplicadas no novo produto em desenvolvimento pela empresa Dígitro.

Celulares, tocadores de música, telefones convencionais e aparelhos conceito entraram para o hall de pesquisa de similares.

Os aparelhos e interfaces pesquisadas foram:

Figura 27 - Zune HD da empresa Microsoft Fonte: Zune (2010)

Figura 28 - Projeto conceitual BenQ Black Box da empresa BenQ Fonte: BenQ (2010)

49

Figura 29 - Interface utilizando a linguagem Symbian 4 Fonte: MeioBit (2010)

Figura 30 - HTC com o modelo HTC Hero Fonte: HTC (2010)

50

3.5 ANÁLISE DOS DADOS Levantar dados, tais como as características dos produtos dos concorrentes da empresa e similares, foi pertinente para um maior entendimento do nicho de mercado ao qual a empresa se inclui profundamente nos conceitos de telecomunicações. Essencialmente, a pesquisa teve como base para um desenvolvimento coerente da nova interface touchscreen do telefone IP. Pode-se apontar que os pontos relevantes analisados durante a pesquisa são: 

Os softwares apresentam pouca atratividade visual com uma carência evidente de padronização estética;



As interfaces entram em discordância com a estética dos aparelhos em si, não havendo uma unificação do produto por completo;



As

interfaces

dos

concorrentes

Dígitro

transmitem

avanços

pouco

significativos no que diz respeito à customização do produto, por serem multinacionais e não desenvolver seus produtos em uma sede única; 

A Dígitro sendo uma empresa de médio porte, apresenta uma grande flexibilidade e em tempo hábil o desenvolvimento em cima da customização de suas soluções de acordo com a necessidade apontadas pelos seus clientes;

3.6 CONCEITO DA INTERFACE DO TELEFONE IP TOUCHSCREEN Após a análise de todos os dados pesquisados, reuniões com responsáveis pelos setores de marketing e comercial da empresa Dígitro e o rumo que almeja seguir com este novo produto, conclui-se que a interface deverá apresentar os seguintes requisitos: 

Minimalista: com uma aparência mais clean e com poucas imagens, intensificando a versatilidade dos itens apresentados em tela;



Cores mais sóbrias e que denotam seriedade perder a modernidade;

51



Formas mais arredondadas: obtendo com isso maior coerência hardware e software;



Transparência: apresentar maior clareza das informações e efeitos de transparência nos itens em tela.



Simplicidade: o sistema deve apresentar uma forma simples de navegação dos itens apresentados em tela. Uma navegação intuitiva e que atenda de prontidão as necessidades do usuário, com clareza e objetividade. o Só o necessário: poucos elementos em tela; o Fácil compreensão e aprendizado: legibilidade, linguagem clara; o Navegações consolidadas: manter navegações consolidadas em celulares, smartphones e outros dispositivos.

Os itens supracitados foram retirados do painel semântico apresentado abaixo:

Figura 31 - Painel Semântico referente ao Conceito da Interface Fonte: Arquivo Pessoal

52

3.7 CRIAÇÃO DA INTERFACE

3.7.1 MAPA CONCEITUAL O mapa conceitual disponibilizado no Anexo I, apresenta o mapa de navegação de possíveis funcionalidades do telefone IP touchscreen. A estrutura de navegação de telas do sistema foi criada pela equipe multidisciplinar do setor de design da empresa Dígitro.

3.7.2 SKETCHES As gerações de alternativas, apresentadas abaixo, caracterizam-se como escopos da estrutura inicial e de definição da disposição dos elementos em tela, não apresentando as características estéticas e funcionais em relação ao conceito definido anteriormente.

Figura 32 - Sketch 1 Fonte: Arquivo Pessoal

53

Figura 33 - Sketch 2 Fonte: Arquivo Pessoal

54

Após a etapa de sketches surgiram os primeiros traços do novo padrão estético do telefone IP touchscreen.

Figura 34 - Geração de Alternativas Fonte: Arquivo Pessoal

A partir desta etapa e de refinamentos em cima das telas apresentadas acima, foi possível obter o resultado apresentado na Evolução do Projeto.

3.8 ESPECIFICAÇÕES DA INTERFACE

3.8.1 FONTES

A empresa Dígitro apresentou delimitações em relação às fontes permitidas para utilização. Poucas fontes são permitidas o uso comercial em interfaces e peças gráficas na empresa.

Abaixo, apresentam-se fontes disponibilizadas para uso na interface:

55



Arial: desenvolvida por Robin Nicholas e Patricia Saunder no ano de 1982 sendo a mais utilizada até o momento, as fontes disponíveis são:

Figura 35 - Fonte Arial Fonte: Arquivo Pessoal



Swiss721: desenvolvida por Max Miedinger no ano de 1982, as fontes disponíveis são:

Figura 36 - Fonte Swiss721 Fonte: Arquivo Pessoal



Helvetica: também desenvolvida por Max Miedinger no ano de 1957, as fontes disponíveis são:

Figura 37 - Fonte Helvetica Fonte: Arquivo Pessoal

Devido as características estéticas que cada uma apresenta e utilizando como norte o conceito supracitado, a fonte que melhor se encaixaria com o layout da interface foi a Swiss217 BT. Além de atender os requisitos de legibilidade, a fonte

56

apresenta características que transmitem elegância, seriedade e sofisticação pela sua forma mais angulosa, simples e objetiva.

Figura 38 - Fonte Escolhida Swiss721 BT Fonte: Arquivo Pessoal

3.8.2 PALETA DE CORES

Após o estudo de fontes, realizou-se uma análise sobre as cores a serem utilizadas, definindo então uma paleta de cores para o projeto. Seguindo o conceito apontado anteriormente, as cores definidas são apresentadas abaixo:

Figura 39 - Paleta de Cores Fonte: Arquivo Pessoal

As cores base foram: preto, cinza, branco, azul, verde e vermelho, como pode ser observada. 

Preto, cinza e branco: são as cores que atendem os requisitos definidos no conceito do projeto, com o intuito de tornar a interface mais flexível em relação à aplicação de papéis de parede diferenciados e aumentando com isso a legibilidade, além de serem cores contrastantes, de cada item

57

apresentado em tela. Não deixando de ressaltar a preocupação com a seriedade que a interface precisa transmitir. 

Azul, verde e vermelho: são cores definidas para apresentação de status do telefone em geral, como ocupado, botão de ligar, desligar e cancelar, etc.

Fora apontar algum serviço ativo/inativo no sistema.

3.8.3 ÍCONES

Os ícones aplicados no projeto foram aproveitados do banco de ícones já estudados anteriormente por designers que trabalharam efetivamente na empresa Dígitro, sofrendo poucas modificações para adaptar-se esteticamente a nova interface, como pode ser observado na fig. 40:

Figura 40 - Pacote de Ícones Fonte: Arquivo Pessoal

58

O

pacote

de

ícones

apresentado

acima

passou

por

um

refinamento/aprimoramento de efeitos e detalhes que antes não havia, para seguir as características atuais de layout e criar uma unidade nas peças como um todo.

Abaixo uma breve explicação de cada ícone apresentado na fig. 40: 

Conferência: com um grupo de pessoas para conferência via telefone;



Status do telefone: item utilizado no menu principal da interface;



Som: ícone de sem áudio, áudio no volume máximo, áudio no volume mínimo e viva-voz;



Configurações: item utilizado no menu principal para configurações do sistema;



Feedback: ícones utilizados para enfatizar mensagens de feedback do sistema em caixa de diálogo;



Discagem rápida: item utilizado no menu principal para discagem rápida;



Brilho: item utilizado nas configurações de brilho da tela do telefone;



Não perturbe: item utilizado no menu principal do produto sendo um dos serviços disponíveis do sistema;



Cadeado: item utilizado no menu principal do produto sendo um dos serviços disponíveis do sistema;



Ações: itens utilizados como forma de status de ações executadas ou não pelos usuários;



Chamadas: itens utilizados na tela de chamadas definindo como: chamadas perdidas, recebidas, efetuadas e todas as chamadas;



Hold: item utilizado como status de segurar uma ligação estabelecida;

59



Sem imagem: item utilizado para definir usuários em uma lista de contatos sem foto;



Siga-me: item utilizado no menu principal do produto sendo um dos serviços disponíveis pela empresa Dígitro para o sistema;



Ocupado: item de status de monitoração de ramais (quando ativa);



Voicemail: item de status que notifica ao usuário que ele recebeu uma mensagem de voz;



Agenda: item utilizado no menu principal do produto que irá direcionar o usuário para a agenda de telefones.

3.8.4 TRATAMENTO VISUAL

Não anulando as características físicas do produto, estudou-se a estética do aparelho para manter a unidade entre interface e hardware, notando assim os seguintes aspectos estéticos do produto: 

Curvas e formas retas: o aparelho apresenta um misto de formas retas e curvas;



Cores: cores mais sérias como preto, cinza, vermelho, verde e branco foram notadas no produto.



Efeitos: alguns efeitos como volume, sombra, transparência e suavização são necessários para transparecer modernidade, simplicidade e realismo. Toda uma tendência estética observado nos aparelhos telefônicos vendidos no mercado.

60

3.9 ALTERNATIVA ESCOLHIDA

Após todo um estudo de definição de elementos visuais a serem aplicados e de geração de alternativas até chegar a um resultado final satisfatório, selecionou-se então a primeira tela do telefone IP touchscreen, a tela de descanso com suas opções básicas de papéis de parede padrão.

Ressaltando que as telas apresentadas a seguir não apresentam todos os ícones pré-determinados para a interface final e a geração das telas abaixo são apenas para a criação de uma padronização estética de todo o projeto. A sequência apresentada, não segue a sequência correta de navegação definida pelo arquiteto de informação da empresa Dígitro. O projeto continua em andamento com finalização prevista para dezembro de 2010.



Tela de Descanso

Figura 41 - Tela de descanso Fonte: Arquivo Pessoal

Esta tela apresenta as seguintes características: Na barra superior temos o número 7530 que será de acordo com o ramal de cada posto de trabalho em que o telefone for utilizado, nome completo do colaborador (funcionário) da empresa e ícones de status do telefone

61

aparecerá de acordo com cada notificação de ações que o telefone execute (podendo ser eles voicemail, chamadas perdidas, cadeado, siga-me, etc.).

No centro temos o horário de Brasília, dia da semana completo, data completa, aba lateral com atalhos de serviços da empresa.

Em baixo temos a agenda, menu principal e chamadas sendo eles itens necessários para um acesso rápido as funcionalidades do telefone. Também observados em aparelhos telefônicos pesquisados anteriormente.

A seguir, algumas das opções de papéis de parede padrão a serem utilizadas pelo cliente:

Figura 42 - Tela de descanso (Azul) Fonte: Arquivo Pessoal

62

Figura 43 - Tela de descanso (Roxa) Fonte: Arquivo Pessoal

Figura 44 - Tela de descanso (Verde) Fonte: Arquivo Pessoal

Figura 45 - Tela de descanso (Marrom) Fonte: Arquivo Pessoal

63



Barra de Atalhos Rápidos

Figura 46 - Tela de atalhos Fonte: Arquivo Pessoal

Esta tela apresenta as seguintes características: A barra de atalhos aparece na frente do miolo da tela de descanso com itens de acesso rápido como o Siga-me (que é programado dentro das configurações do sistema), Não Perturbe (que pode ser ativado ou desativado) e o Cadeado (que também pode ser ativado ou desativado).

Ao pressionar a seta ao lado do botão Siga-me, a barra se recolherá instantaneamente voltando para a tela de descanso.

64



Menu Principal

Figura 47 - Tela de menu principal Fonte: Arquivo Pessoal

Esta tela apresenta as seguintes características: O menu principal apresenta ícones de todas as funcionalidades do sistema, sendo ele o acesso principal a cada item do telefone. Sua rolagem é feita com um toque em tela e arrastando da direita para a esquerda, muito parecida com a navegação do iPhone produto da empresa Apple.

Os bullets (quadradinhos com bordas arredondadas na parte inferior da tela e centralizado) criam a paginação das telas do menu.

Um botão de sair (localizado na parte inferior à direita) foi colocado justamente para o usuário voltar para a tela de descanso assim que for selecionada com o dedo.

65



Agenda de Contatos

Figura 48 - Tela de agenda de contatos Fonte: Arquivo Pessoal

Esta tela apresenta as seguintes características: Agenda que contém todos os contatos do usuário, assim como a agenda geral (corporativa), que apresenta cada colaborar com sua respectiva foto, nome e ramal, e a agenda particular que não possibilita fotos, apenas nome e o telefone da respectiva pessoa, mas com um diferencial, uma barra lateral azul aparecerá para classificação e rápida identificação de que aquela pessoa não pertence a agenda corporativa.

Botões de ligar (botões verde com o ícone do telefone) foram acrescentados nesta interface para reduzir a quantidade de toques em tela (esforço do usuário).

Botões de edição (botões cinza) foram acrescentados também na interface para a edição de um determinado contato.

Barra horizontal na frente do primeiro contato da lista determina que aquele usuário da lista está selecionado para futuras ações: navegação por botões do teclado físico do telefone.

66

Barra de rolagem no canto direito da tela foi aplicado como guia para o usuário ficar ciente de que há mais contato abaixo. Sua rolagem é feita com tocar e arrastar de baixo pra cima e vice-versa apresentando mais contatos da lista. Ícone de ocupado (ícone vermelho a frente da foto do contato) apresenta o status do contato, se o ramal estiver ocupado, ela automaticamente aparecerá, caso a linha esteja livre, ele não ficará aparente.

Deixando claro que este ícone de status só funcionará para ramais dentro da empresa em que o aparelho de telefone IP touchscreen for utilizado.

A barra inferior (em cinza escuro) apresenta botões de Novo (adicionar um novo contato), Menu com itens como excluir contato, editar contato e cancelar a ação e Voltar dando a possibilidade do usuário de voltar para a tela anterior.

Esta barra inferior é contextual à tela em que o usuário está utilizando no momento.



Menu Central

Figura 49 - Tela de menu central Fonte: Arquivo Pessoal

Esta tela apresenta as seguintes características:

67

Menu contextual à tela que o usuário está no momento (botão central da barra inferior apresentada na agenda de contatos), cobrindo a tela toda e dando mais opções de ações para o usuário, sendo estas ações secundárias.

Botão de cancelar e desligar serão sempre apresentados em vermelho por serem ações de tomada de decisão, dando a possibilidade ao usuário de não executar determinada ação.



Recebendo Chamada

Figura 50 - Tela recebendo chamada Fonte: Arquivo Pessoal

Esta tela apresenta as seguintes características: Abas superiores onde o usuário poderá efetuar o pêndulo entre ligações dando a possibilidade da criação de uma sala de conferência.

A terceira aba (terceira chamada) apresenta-se nesta tela apenas como forma de ilustrar. Ela só aparecerá quando a segunda chamada (segunda aba) for estabelecida.

Título superior contextual à ação que está em andamento.

Ao receber uma ligação a foto do usuário aparecerá na tela junto com as informações como nome completo, telefone do usuário e empresa (foto

68

somente aparecerá no caso de usuários que pertencem a agenda geral corporativa).

Botão verde responsável por executar ou atender uma chamada.

Na barra inferior os itens como transferir a ligação (após estabelecida) ou silenciar, o telefone deixa de soar o toque, mas na tela continua alertando ao usuário que está recebendo uma chamada.



Chamada Estabelecida

Figura 51 - Tela chamada estabelecida Fonte: Arquivo Pessoal

Esta tela apresenta as seguintes características: Segue os mesmos tratamentos estéticos e funcionais da tela apresentada anteriormente, tela de recebimento de chamada, mas apenas o rótulo, antes com o texto recebendo chamada, passando para chamada estabelecida. Ícone de ação (telefone) da primeira chamada é modificado com o intuito de transmitir uma chamada atendida. Ícone de relógio e tempo percorrido de conversa (textual) são apresentados no centro da tela a direita.

69

Barra inferior contextual passar a ter função de transferir chamada (apresentada à esquerda) e desligar (apresentada à direita e em vermelho).



Segunda Chamada

Figura 52 - Tela de segunda chamada Fonte: Arquivo Pessoal

Esta tela apresenta as seguintes características: Caracterizada em função de pêndulo, com a primeira aba em uma chamada estabelecida e no aguardo, e a segunda aba em modo de efetuar uma chamada.

O rótulo textual passa a ser digite o número.

No centro observa-se o campo para digitar o telefone do contato com um botão de limpar acompanhado com um xis e logo após este botão pode-se observar o botão de ligar (em verde).

A barra inferior contextual passa a ter a função de acessar a agenda de contatos (apresentada à esquerda) e cancelar a operação (apresentada à direita e em vermelho).

70



Todas as Chamadas

Figura 53 - Tela todas as chamadas Fonte: Arquivo Pessoal

Esta tela apresenta as seguintes características: Tela muito parecida com a apresentada anteriormente (agenda de contatos), mas com abas superiores com as seguintes funções: o Primeira aba: todas as chamadas aonde serão apresentadas abaixo desta aba todas as ligações efetuadas, recebidas e perdidas; o Segunda aba: ligações perdidas aonde serão filtradas apenas ligações perdidas; o Terceira aba: ligações recebidas aonde serão filtradas apenas ligações recebidas; o Quarta aba: ligações efetuadas aonde serão filtradas apenas ligações efetuadas pelo usuário.

71

No centro apresenta os contatos com ícones de ação e botões de ligar (em verde) logo após estes ícones. Com barra de rolagem na vertical.

A barra inferior contextual passa a ter a função de detalhes do contato (apresentada à esquerda) e voltar à tela anterior (apresentada à direita).



Monitorar Ramal

Figura 54 - Tela monitorar ramal Fonte: Arquivo Pessoal

Esta tela apresenta as seguintes características: Uma janela pop-up explicativa de ajuda aparecerá sobreposta com uma mensagem sobre o serviço monitorar ramal. Tornou-se necessário esta ajuda para este serviço devido a muitos dos usuários que utilizavam a primeira versão do telefone ip (não sendo touchscreen), não entenderem claramente qual era a funcionalidade deste sistema.

Botão de OK, ícone de feedback e um texto explicativo mudarão de contexto de acordo com cada funcionalidade utilizada no telefone ip touchscreen.

Definindo assim mais um padrão de janelas de feedback do telefone ip touchscreen.

72

Checkbox selecionado em monitorar ramal (logo abaixo da caixa de feedback), foi personalizado para dar mais unidade a toda a característica estética da interface, mas sem perder as características funcionais e de assimilação de outros sistemas touchscreen.

A barra inferior contextual passa a ter a função de editar o contato (apresentada à esquerda) e voltar à tela anterior (apresentada à direita).

Até o momento, foram geradas todas as interfaces apresentadas acima.

Deixando mais que claro um padrão gráfico que atendesse ao conceito de todo o projeto.

73

3.10 MODELO DE APRESENTAÇÃO

Para uma apresentação comercial deste novo produto, a aplicação da interface principal com suas várias opções de customização (papéis de parede), gerou-se a seguinte imagem:

Figura 55 - Modelo de apresentação Fonte: Arquivo Pessoal

74

4. CONSIDERAÇÕES FINAIS

Este projeto procurou apontar um novo rumo tecnológico que o nosso país ainda não havia desenvolvido. Estudos são realizados diariamente sobre a tecnologia touchscreen que ainda é muito limitada no sentido da acessibilidade.

Ao avaliar a pesquisa realizada neste trabalho, notou-se um campo vasto sobre a tecnologia touchscreen, em que há muitas vertentes para pesquisa, teste e aplicação em projetos diversificados.

Buscou-se criar um novo produto, antes nunca visto dentro da empresa, e após a apresentação das telas em várias áreas internas, a resposta superou as expectativas da área de design. Tanto houve esta superação que outros produtos serão desenvolvidos com a mesma característica estética do telefone IP touchscreen. Criando assim, uma unidade na linha de soluções oferecidas pela empresa.

O projeto está em andamento e modificações poderão ocorrer, sem deixar de lado a essência estética e funcional do sistema.

Por fim concluiu-se que há a possibilidade de inovar e trazer um produto diferente e sofisticado com uma área de design dentro de uma empresa que a grande parte de sua equipe é composta por engenheiros e programadores.

75

5. FUTUROS ESTUDOS

Seguindo o mencionado nas considerações finais, o tratamento visual e o resultado final deste trabalho abriram a possibilidade de futuros estudos em interfaces de softwares desktop e webdesktop da empresa e aplicação destas características estéticas e funcionais, agregando ainda mais valor nas soluções oferecidas.

Com isso, ampliando ainda mais o mercado de produtos e mostrando que a empresa está andando em paralelo com as novidades que surgem dia após dia.

76

6. REFERÊNCIA BIBLIOGRÁFICA ABNT 9241-11 - Requisitos Ergonômicos para Trabalho de Escritórios com Computadores - Parte 11 – Orientações sobre Usabilidade. ABNT – Associação Brasileira de Normas Técnicas, 1993.

BASTIEN, Christian; SCAPIN, Dominique. RT-0156 – Ergonomic criteria for the evaluation of human-computer interfaces. Rapport technique de l’INRIA. Disponível em: <http://www.inria.fr/rrrt/rt-0156.html> Acesso em 25 de maio 2010.

BASTIEN, C. et al. Transferring Knowledge of User Interfaces Guidelines to the Web. Disponível em: <http://www.isys.ucl.ac.be/bchi/publications/2000/ScapinTFWWG2000.pdf> Acesso em: 22 de maio de 2010.

BATISTA, Claudia Regina et al. Modelo e diretrizes para o processo de design de interface web adaptativa. Florianópolis, 2008. 158f. Tese (Doutorado em Engenharia e Gestão do Conhecimento) – Programa de Pós-graduação em Engenharia e Gestão do Conhecimento, UFSC, 2008.

BROWN, Daniel. Communicationg design. 1.ed. Berkeley, CA: New Riders, 2007.

GARRETT, Jesse James. The elements of user experience. 1. ed. Nova York: AIGA, 2003.

CRIARWEB. Usabilidade na Web. Disponível em: <http://www.criarweb.com/ artigos/472.php> Acesso em 24 de maio 2010.

CYBIS, Walter; BETIOL, Adriana Holtz; FAUST, Richard. Ergonomia e Usabilidade: conhecimentos, métodos e aplicações. São Paulo: Novatec, 2007.

FIALHO, F. Ciencias da Cognição. Florianópolis, Editora Insular, 2001.

GARRETT, Jesse James. Disponível em: <http://www.jjg.net>. Acesso em: 2 fev.

2010.

IIDA, Itiro. Ergonomia: Projeto e Produção. São Paulo: Edgard Blücher Ltda, 1990.

MICHAELIS: Moderno dicionário da língua portuguesa. São Paulo: Cia. Melhoramentos, 2009.

NIELSEN, J., Usability Engineering. San Francisco, CA: Morgan Kaufmann, 1993.

77

NORMAN, D. A. Why interfaces don’t work. In “The art for human-computer interface design” edited by Brenda Laurel. Addison-Wesley Publishing Company, Massachusetts, 1990.

OLIVEIRA NETTO, A. A. IHC, Interação Humano Computador, Modelagem e Gerência de Interfaces com o Usuário. Florianópolis: Visual Books, 2004.

PREECE, Jennifer et al. Design de interação: além da interação homemcomputador. Porto Alegre: Bookman, 2005.

SHNEIDERMAN, Ben. Designing the User Interface: strategies for effective human-computer interaction. 3 ed. Chicago: Addison Wesley, 1992. _____. Ten Usability Heuristics. Disponível em: <http://www.useit.com/ papers/heuristic/heuristic_list.html> Acesso em: 26 de maio de 2010. _____. How Stuff Works. Disponível em: <http://hsw.uol.com.br> Acesso em: 06 de março de 2010. _____.Evolution of Desktops. Disponível em: <http://r101.blogspot.com/2006/08/evolution-of-desktops.html> Acesso em: 06 de março de 2010. _____. Nokia. Disponível em: <http://www.nokia.com.br> Acesso em: 06 de março de 2010. _____. Motorola. Disponível em: <http://www.motorola.com.br > Acesso em: 06 de março de 2010. _____. Apple. Disponível em: <http://www.apple.com> Acesso em: 06 de março de 2010. _____. Polycom. Disponível em: <http://www.polycom.com> Acesso em: 06 de março de 2010. _____. Avaya. Disponível em: <http://www.avaya.com> Acesso em: 06 de março de 2010.

78

_____. SNOM. Disponível em: <http://www.snom.com> Acesso em: 06 de março de 2010. _____. Nortel. Disponível em: <http://www.nortel.com> Acesso em: 06 de março de 2010. _____. Zune. Disponível em: <http://www.zune.com> Acesso em: 06 de março de 2010. _____. BenQ. Disponível em: <http://www.benq.com> Acesso em: 06 de março de 2010. _____. MeioBit. Disponível em: <http://www.meiobit.com/38455/primeiros-conceitosvisuais-do-symbian4> Acesso em: 06 de março de 2010. _____. HTC. Disponível em: <http://www.htc.com> Acesso em: 06 de março de 2010.

79

7. ANEXOS 7.1 ANEXO I â&#x20AC;&#x201C; Mapa Conceitual