Design para Dispositivos Móveis
Um dos maiores desafios como webdesigner na MSI Sistemas & Web, até agora, foi criar as telas de uma aplicação para Mobile. Não tanto pelo fato de ser em um dispositivo cheio de restrições tecnológicas, mas muito mais pelos requisitos do próprio projeto.
Tínhamos uma interface relativamente complexa, que deveríamos simplificar para tornar usável no Mobile. E isso não era uma tarefa nada simples.
Primeiro foi preciso revisar alguns conceitos. Levando em conta que mesmo o mais avançado Mobile que testamos não aceitava a maioria das especificações do CSS 1.0, portanto teríamos que trabalhar na conversão do visual também.
A aplicação nada mais é do que o sistema de pedidos dos representantes comerciais da Dimesul Medicamentos.
Ele consistia em uma série de funções como checagem de pendências, pedidos via web, checagem de ganho, compras, lucro, estoque e assim por diante. Agora a grande questão era como colocar tudo isso em um dispositivo onde tudo deve ser leve, tudo deve ser pequeno e (na teoria) bem menos bonito.
A solução encontrada foi dividir a aplicação em diversas partes, agrupando funções separadamente. Assim, além de tornar a aplicação mais leve na entrada, ainda filtrava a necessidade do usário, direcionando-o para uma área específica da aplicação. Assim o representante acessava um menu principal com apenas quatro opções, com o gráfico melhor trabalhado, mantendo o balanço (quanto mais informação, menos gráfico e quanto mais gráfico, menos informação). A partir destes quatro grupos básicos eles acessam funções secundárias separadas por menus maiores. Após escolher a função, agora ele podia realizar sua consulta.
Pode parecer uma navegação muito truncada, mas o uso da tela de toque realmente auxiliou muito nessa hora. Testes e mais testes foram feitos para se chegar ao tamanho ideal das fontes e imagens.
Foram criados ícones para ilustrar essa tela principal, afinal ela tinha espaço para isso. Nossa principal luta foi contra o espaço e, sendo que testamos a mesma aplicação em pelo menos três aparelhos Mobile (o Cyberbank POZ, o Palm Thungsten e o Palm Treo) os problemas de espaçamento e tamanho foram diversos, até que chegamos a uma solução mista.
Misturando alinhamentos centralizados e tamanhos fixos nas páginas principais, conseguimos manter a aparência na navegação, enquanto nas páginas de exibição de dados, os tamanhos eram definidos por porcentagens, de forma que mostrasse a mesma informação em qualquer tela.
Mesmo que todos os representantes estivessem usando exatamente o mesmo aparelho, queríamos ter certeza de que ele rodaria em qualquer lugar. E foi o que aconteceu.
Um cuidado muito especial foi tomado com todas as imagens que fizeram parte da aplicação, afinal o mais moderno dos aparelhos (o POZ) exibia apenas 65k cores, o que é pouco comparado ao computador.
Por isso a maior parte do processo de criação foi convertida para testes e o design das imagens foi feito com um método de tentativa e erro, até que se acertasse a fórmula mágica, então foi só seguir um padrão visual e de desenvolvimento, tornando o processo geral de criação muito mais veloz.
Nenhuma das imagens presentes na aplicação ultrapassam o tamanho de 600 bytes (meno de 1KB), sem perder qualidade, enquanto que uma imagem comum de um site (como o meu avatar de autor, por exemplo) tem de 10 - 200 KB para que não perca a qualidade.
Com isso foi possível aprender técnicas e métodos que tornassem possível a diminuição do tamanho de imagens, mesmo em sites feitos para plataformas convencionais.
Quanto à tipografia, fazendo pesquisas e testes reunimos as 3 únicas fontes que eram utilizadas na maioria dos dispositivos móveis e as usamos e, para nossa surpresa, conseguimos colocar atributos de cor através do CSS, contrariando a declaração da Microsoft de que o CSS não funcionaria no PocketIE, navegador que acompanha o Cyberbank POZ.
Em termos de funcionalidade, a aplicação foi inovativa. Hoje em dia é normal ver vendedores, empresários e até estudantes com dispositivos móveis de alta tecnologia. No caso dos vendedores eles podem utilizá-lo para fazer suas vendas, registrando produtos no Palm, sem ter que utilizar papéis, economizando tempo e dinheiro, o que sempre ajuda a satisfazer o cliente. Essas aplicações funcionam da seguinte maneira. No começo do dia, o vendedor sincroniza o seu dispositivo móvel com o seu computador de casa ou do escritório, pegando todas as informações de preço e estoque. Depois ele vai às ruas e realiza suas vendas, registrando tudo em seu dispositivo móvel. No final do dia ele realiza novamente a sincronização com o Desktop e este conecta-se à internet para trocar as informações com o servidor.
A diferença de nossa aplicação está justamente nessa agilidade. Ele usa a mesma engine de nosso sistema desktop. O usuário comunica-se diretamente com o servidor em tempo real, fazendo seus pedidos através do computador. Simples assim. O vendedor acorda pela manhã e sai para as vendas, sem precisar baixar nenhuma informação do servidor. Realiza sua venda com o cliente, com informações em tempo real, como se ele estivesse na loja. Todas as informações (estoques, preços, promoções) chegam para ele à medida em que são alteradas na base de vendas, sem que ele precise se conectar no Desktop. O pedido é enviado na hora para o serviço de entrega, que já começa a realizar o seu trabalho. Enquanto o vendedor habitual está chegando em casa para descarregar seus pedidos na web, o nosso vendedor está descansando, enquanto o pedido já está a caminho.
Até hoje foi um dos cases de maior aprendizado aqui na MSI, onde pudemos vivenciar experiências únicas de design e desenvolvimento, não só pela qualidade dos aparelhos-alvo mas como também a clareza e a liberdade nas especificações dos clientes.
Por Douglas d'Aquino
