design da interface para o telefone ip...
TRANSCRIPT
DESIGN DA INTERFACE PARA O TELEFONE IP
TOUCHSCREEN
Cayo Vinícius Corrêa e Silva UOL – Universo OnLine | Web & Mobile User Interface Designer
Claudia R. Batista Universidade Federal de Santa Catarina | Depto. Expressão Gráfica
Resumo
A empresa Dígitro estava desenvolvendo um novo modelo de telefone com um conjunto de aplicações e tela sensível ao toque (touchscreen), visando
otimizar a experiência do usuário e proporcionar facilidades aos clientes. Vinculado a esse projeto, surgiu a demanda para a realização do design da interface para este novo produto. Este artigo apresenta o projeto gráfico para a interface do telefone IP Touchscreen. O foco do projeto foi
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 com 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; em suma, propor uma interface funcional, com valor estético e inovadora. Palavras-chave: projeto gráfico; design de interface; touchscreen.
Abstract
The Dígitro Company was developing a new model telephone with a set of applications and touchscreen, seeking to optimize the user experience and provide facilities to customers. This project generated demand for the realization of interface design for this new product. This paper shows the visual design for interface of IP Touchscreen telephone. The project focus was to develop an intuitive digital interface that includes the precepts of usability. Other requirements were defined for the interface: easy navigation; to find quickly the information or function desired; aesthetic quality and visual treatment compatible with the user profile; use appropriate of visual language to communicate effectively the phone functions; in short, to propose a functional interface with aesthetic value and innovative. Keywords: graphic design, interface design, touchscreen.
2
1 Apresentação
A Dígitro é uma empresa que desenvolve soluções em Inteligência, Tecnologia da
Informação e Telecomunicações, com sede em Florianópolis - SC. Atua no mercado
há mais de 30 anos e possui em seu portfólio produtos e serviços para diversas
empresas em segmentos corporativos com operadoras de telefonia. Acompanhando o
crescimento tecnológico e buscando agregar valor aos produtos e soluções oferecidos,
a Dígitro está desenvolvendo um novo produto: o telefone IP Touchscreen. Vinculado
ao projeto deste produto, surgiu a demanda para o design da interface, cuja interação
usuário-telefone ocorrerá através de uma tela sensível ao toque (touch screen). Como
requisitos de projeto, apontou-se a usabilidade, funcionalidades extras (em relação ao
modelo antecessor) e qualidade visual.
A solução proposta apresentada neste artigo foi desenvolvida durante o Trabalho
de Conclusão do Curso de Design da Unisul. O objetivo geral do projeto foi realizar o
design da interface digital para o aparelho de telefone IP Touchscreen da Dígitro. E
foram definidos os seguintes 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.
Este estudo envolveu a interação do usuário com a interface sensível ao toque
(touchscreen), cujo software principal disponibiliza informações em módulos, tais como
configurações e status do aparelho (hardware), propiciando comodidade ao cliente
através de aparelho multifuncional que atenda com rapidez e objetividade as
atividades do dia-a-dia.
O escopo deste projeto concentrou-se em apresentar uma solução visual gráfica
que propiciasse ao usuário interagir fácil e precisamente com o sistema, desfrutando
de uma gama de funcionalidades. O escopo deste trabalho não contemplou o
desenvolvimento do software, nem o design do aparelho (artefato/hardware).
3
2 Procedimento Metodológico
O procedimento metodológico do estudo foi constituído das seguintes fases:
Fase Investigativa: foi realizada uma pesquisa bibliográfica, onde utilizou-se 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 foi
possível:
- identificar as necessidades do projeto da interface;
- estabelecer o conceito da interface;
Fase Produtiva: o desenvolvimento do design da interface foi pautado na
metodologia proposta por Bürdek (1999).
Figura 1: Metodologia Projetual para Interfaces Fonte: Bürdek (1999).
3 O design da interface
3.1 Cliente e Produto Anterior
O telefone atualmente comercializado pela Dígitro disponibiliza um display
monocromático, tal como pode ser observado na figura 2.
4
Figura 2: Display do telefone IP da Dígitro
Fonte: Silva (2010, p. 40)
No modelo anterior, o usuário acessa as funções do telefone através dos botões
disponíveis na moldura do display, tal como pode ser observado no aparelho a
esquerda, na figura abaixo. Seguindo as tendências de mercado, de inovação e
tecnologia, o novo modelo deverá apresentar as funções da versão anterior e novas
possibilidades, contudo a interação dar-se-á diretamente sobre a tela sensível ao
toque, conforme o aparelho a direita, na figura abaixo.
Figura 3: Telefones IP
Fonte: Silva (2010, p. 41)
3.2 Briefing
Ao levantar os requisitos do projeto com o cliente, observou-se as seguintes
especificaçõ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 480 x 272 px, tamanho da tela de 4,3”, 24 bits de cor, 91dpi, RAM
32MB, ROM 16MB e processador 300mhz ou 600mhz.
5
3.3 O 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 botões que no
aparelho anterior eram disponibilizados fora do display, na nova versão estarão
presentes na interface.
Ressalta-se ainda que o produto possui versão padrão, mas com a possibilidade
de ser totalmente customizado de acordo com a necessidade do cliente contratante do
serviço.
Figura 4: Telefone IP Touchscreen
Fonte: Silva (2010, p. 42)
Como este novo produto não tem um “cliente direto” (licitação), o desenvolvimento
se deu pelo impulsionamento do mercado e para acompanhar as novas tecnologias
existentes.
3.4 O Conceito da Interface para o Telefone IP Touchscreen
Após a análise de todos os dados obtidos em reuniões com responsáveis pelos
setores de marketing e comercial da empresa Dígitro, delineou-se o conceito para a
interface deste novo produto:
Minimalista: com uma aparência clean e com poucas imagens, intensificando a
versatilidade dos itens apresentados em tela;
Cores sóbrias e que denotam seriedade, sem perder a contemporaneidade;
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.
- Só o necessário: poucos elementos em tela;
6
- Fácil compreensão e aprendizado: legibilidade, linguagem clara;
- Navegações consolidadas: manter navegações consolidadas em aparelhos
celulares, smartphones e outros dispositivos.
Os itens supracitados são representados no painel semântico apresentado na
sequência:
Figura 5: Painel Semântico referente ao Conceito da Interface
Fonte: Silva (2010, p. 51)
3.5 Alternativa escolhida
Após o estudo para a definição dos elementos visuais a serem aplicados e da 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.
A figura 6 apresenta o layout escolhido para a tela descanso:
Figura 6: Tela Descanso Fonte: Silva (2010, p. 60)
7
A tela descanso 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 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, tem-se o horário de Brasília, dia da semana completo, data completa,
aba lateral com atalhos de serviços da empresa.
Em baixo, tem-se 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.
As figuras 7 a 10 apresentam algumas das opções de papéis de parede padrão a
serem utilizadas pelo cliente:
Figura 7: Tela Descanso (Azul)
Fonte: Silva (2010, p. 61)
Figura 8: Tela Descanso (Roxa)
Fonte: Silva (2010, p. 62)
8
Figura 9: Tela Descanso (Verde)
Fonte: Silva (2010, p. 62)
Figura 10: Tela Descanso (Marrom)
Fonte: Silva (2010, p. 62)
A figura 11 apresenta o layout escolhido para a tela de atalhos:
Figura 11: Tela de Atalhos Fonte: Silva (2010, p. 63)
A tela de atalhos apresenta as seguintes características:
A barra de atalhos aparece na área central da tela de descanso contendo 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.
A figura 12 apresenta o layout escolhido para a tela do menu principal:
9
Figura 12: Tela Menu Principal Fonte: Silva (2010, p. 64)
A tela do Menu Principal 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
na tela e arrastando da direita para a esquerda, muito parecida com a navegação
do iPhone da Apple©.
Os bullets (quadradinhos com bordas arredondadas centralizado na parte inferior
da tela) criam a paginação das telas do menu.
Um botão de sair (localizado a direita na parte inferior da tela) foi colocado
justamente para o usuário voltar para a tela de descanso assim que for selecionada
com o dedo.
A figura 13 apresenta o layout escolhido para a tela agenda de contatos:
Figura 13: Tela Agenda de Contatos
Fonte: Silva (2010, p. 65)
A tela Agenda de Contatos apresenta as seguintes características:
A agenda contém todos os contatos do usuário, assim como a agenda geral
(corporativa) que apresenta os colaboradores com suas respectivas fotos, nomes e
ramais; além da agenda particular que não possibilita fotos, apenas nome e o
telefone da respectiva pessoa, mas com um diferencial, uma barra lateral azul
10
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.
Barra de rolagem no canto direito da tela foi aplicada como guia para o usuário ficar
ciente de que há mais contatos abaixo. Sua rolagem é feita com as ações 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.
A figura 14 apresenta o layout escolhido para a tela Menu Central:
Figura 14: Tela Menu Central
Fonte: Silva (2010, p. 66)
A tela Menu Central apresenta as seguintes características:
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
11
determinada ação.
A figura 15 apresenta o layout escolhido para a tela Recebendo Chamada:
Figura 15: Tela Recebendo Chamada
Fonte: Silva (2010, p. 67)
A tela Recebendo Chamada 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 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.
A figura 16 apresenta o layout escolhido para a tela Chamada Estabelecida:
Figura 16: Tela Chamada Estabelecida
Fonte: Silva (2010, p. 68)
12
A tela Chamada Estabelecida 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.
Barra inferior contextual passar a ter função de transferir chamada (apresentada à
esquerda) e desligar (apresentada à direita e em vermelho).
A figura 17 apresenta o layout escolhido para a tela Segunda Chamada:
Figura 17: Tela Segunda Chamada
Fonte: Silva (2010, p. 69)
A tela Segunda Chamada 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 “X” 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).
A figura 18 apresenta o layout escolhido para a tela Todas as Chamadas:
13
Figura 18: Tela Todas as Chamadas
Fonte: Silva (2010, p. 70)
A tela Todas as Chamadas 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, onde serão apresentadas abaixo desta aba
todas as ligações efetuadas, recebidas e perdidas;
o Segunda aba: ligações perdidas, onde serão filtradas apenas ligações
perdidas;
o Terceira aba: ligações recebidas, onde serão filtradas apenas ligações
recebidas;
o Quarta aba: ligações efetuadas, onde serão filtradas apenas ligações efetuadas
pelo usuário.
No centro, apresenta-se 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).
A figura 19 apresenta o layout escolhido para a tela Monitorar Ramal:
Figura 19: Tela Monitorar Ramal Fonte: Silva (2010, p. 71)
A tela Monitorar Ramal apresenta as seguintes características:
14
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.
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.
3.6 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
imagem apresentada na figura 20:
Figura 20: Modelo de Apresentação
Fonte: Silva (2010, p. 73)
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.
15
Ao avaliar o estudo realizado, 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.
5 Referências
BÜRDEK, Bernhard E. Beyond Interfaces. Software-Ergonomie: 27-28, 1999.
CYBIS, Walter; BETIOL, Adriana Holtz; FAUST, Richard. Ergonomia e Usabilidade:
conhecimentos, métodos e aplicações. São Paulo: Novatec, 2007.
PREECE, Jennifer et al. Design de interação: além da interação homem-
computador. Porto Alegre: Bookman, 2005.
SILVA, Cayo Vinícius Corrêa e. Design de interface: projeto gráfico de interface
touchscreen para telefone IP Dígitro. 2010. Trabalho de Conclusão de Curso (Graduação em Design) - Universidade do Sul de Santa Catarina. Orientadora: Claudia Regina Batista.