Respeitando as normas referidas no Capítulo 2, as interfaces do sistema devem colocar na re- gião central a informação mais importante para cada grupo de utilizadores, deixando as regiões à sua volta para informação de suporte. O wireframe apresentado figura 3.3 pretende servir como base para todas as interfaces a construir. Nele é possível distinguir seis áreas distintas marca- das com anotações de 1 a 6 assinalando respetivamente o cabeçalho, a área pessoal, a barra de navegação, a região central da página, a região lateral esquerda e a região lateral direita.
Figura 3.3: Wireframe da interface geral do sistema de resolução de problemas.
A área marcada com a anotação 1 representa o cabeçalho da página, sendo que este deve ser conciso mostrando apenas a informação necessária de modo a não sobrecarregar o utilizar ou distraí-lo da informação mais importante, presente no centro da página. O cabeçalho pode conter um logo da empresa ou da marca representada do lado esquerdo, que pode servir como uma ligação à página inicial. Esta ligação pretende dar uma sensação de conforto ao utilizador porque, independentemente da interface em que ele esteja, saberá que a qualquer momento poderá voltar atrás para uma interface que já conhece, evitando também que se perca. Esta área engloba também a área 2 que pretende representar a área pessoal do utilizador e que pode incluir uma foto
de perfil, uma ligação para os seus dados pessoais, uma ligação para as definições do utilizador, um botão para mudar o idioma da página e outro para terminar a sessão. O botão de mudança de idioma permite a um utilizador que não entenda a língua base do sistema mudá-la para uma com que se sinta mais confortável, sem ter de navegar pelo website para encontrar essa opção nas definições, facilitando esse objetivo e evitando possíveis erros que possam ocorrer no caso do utilizador mudar alguma definição que não pretendia ao tentar mudar o idioma. Por último o botão de terminar sessão permite ao utilizador, sem grande trabalho, terminar a sua sessão o que poderá ser uma ação realizada várias vezes, sendo por isso importante que esteja sempre por perto.
A barra de navegação da página está marcada com a anotação 3 e permite aceder a todas as partes do website para as quais o utilizador tenha permissão. Esta barra deve conter uma aba para cada área do sistema, sendo possível agrupar as várias páginas numa área para assistências, para os problemas, para as estatísticas e ainda outra para as configurações. A aba das assistências serve como ligação ao seu formulário de inserção e à lista contendo todas as assistências que o utilizador possa visualizar, enquanto que a dos problemas permite aceder ao seu formulário de inserção, à listagem dos problemas existentes e à lista dos que se encontram à espera de intervenção. Nas estatísticas é possível aceder a dados sobre todas as áreas do sistema e nas configurações pode- se aceder a páginas para inserir e editar utilizadores, tipos de problemas, tipos de assistências, workflowse demais configurações necessárias para o correto funcionamento do sistema. Os ad- ministradores devem ter todas as permissões e, como tal, têm à sua disposição todas estas abas e funcionalidades. Já os assistentes apenas podem aceder à aba das assistências e à dos problemas e os queixosos aos problemas e a lista de assistências que lhes foram realizadas.
A anotação 4 pretende representar a região central da página onde deve estar presente a in- formação mais importante. Em páginas de inserção de problemas ou assistências o formulário de preenchimento dos dados contendo caixas de seleção ou campos de texto deve ocupar esta posição, enquanto que nas páginas de listagens de problemas ou assistências ela é ocupada pela tabela com um resumo dos dados. Nas páginas de um problema ou de uma assistência a informação completa sobre este também se apresenta nessa área.
As regiões laterais da página estão marcadas pelas anotações 5 e 6 sendo que devem ser ocu- padas por elementos que ajudem o utilizador a compreender ou realizar algo na região central. Estas áreas contêm ferramentas de ajuda, sugestões de preenchimento de formulários, sugestões de resolução de problemas e pequenas estatísticas. Para os utilizadores ocidentais a informação de suporte mais importante deve ser colocada à esquerda, visto que a sua forma de ler tende a seguir o movimento da esquerda para a direita e de cima para baixo, tendo por isso um pouco mais de atenção que a parte direita marcada com 6.
Aplicando a interface geral representada na figura 3.3 ao caso das listagens de problemas ou de assistências obtemos o wireframe apresentado na figura 3.4. É possível ver identificada com o número 1 a área central contendo um resumo das informações dos vários problemas que um assistente terá de trabalhar ou então das assistências realizadas. É importante que esta área seja clara e de fácil leitura para simplificar o trabalho do assistente daí que deva apenas encontrar a informação mais relevante, que no caso da listagem de problemas será o número do problema, um
breve resumo, o nome do cliente ou da empresa que o introduziu, a sua data limite e a próxima ação a realizar no workflow. O ponto 2 pretende representar a sombreado a parte do site em que nos encontramos para que o utilizador saiba sempre onde se encontra e no ponto cinco é indi- cada a paginação dos problemas para evitar apresentar tudo na mesma página, o que provocaria um excesso de informação e levaria o assistente a ter de percorrer toda a página para encontrar um problema antigo. A área lateral direita está marcada com o número 3 e apresenta algumas estatísticas sobre problemas ou assistências passadas, assim como um calendário contendo tanto o histórico de ações como a data limite dos problemas ainda a decorrer. Por último, a área la- teral esquerda, representada com o número 4, pretende agrupar um conjunto de ferramentas que deverá facilitar o fluxo de trabalho do utilizador, permitindo-lhe criar ou editar um problema ou uma assistência, filtrar a informação, procurar alguns dados, eliminar informação e, no caso do administrador, selecionar quais dos seus colaboradores devem estar na lista de assistências.
Figura 3.4: Wireframe da lista de assistências ou de problemas.
O formulário de preenchimento de um novo problema ou de uma nova assistência encontra-se representado no wireframe da figura 3.5. Nele é possível ver na região central, marcada com o número 1, o formulário onde será preenchida a informação desse problema ou assistência. Este formulário deverá obrigar o utilizador a inserir a informação mínima necessária para não o fazer desperdiçar o seu tempo, deixando-lhe assim a decisão de entregar um formulário mais completo ou não, dependendo do seu tempo e do que pretende. Os campos deverão seguir uma ordem natural de leitura de cima para baixo, terminando com um botão de submissão, sendo que o tipo de campos a usar dependerá não só do tipo de informação a recolher como também do tipo de utilizador. Se por exemplo se pretender recolher a data de realização de uma assistência será mais fácil fazê-lo recorrendo a um calendário para dar mais contexto ao utilizador, mas se o objetivo for o de obter uma descrição deve-se utilizar uma caixa de texto grande para que o utilizador possa
descrever o que pretender da forma mais completa possível. Há também casos em que o elemento se deve adaptar ao utilizador porque, por exemplo, para um cliente com menos experiência fará mais sentido colocar em alguns campos caixas de seleção, para que este saiba o que pode escolher, enquanto que um utilizador mais experiente isso fará com que perca demasiado tempo a procurar a opção que quer, sendo para ele mais indicado uma caixa de texto que apresente hipóteses para completar o texto que está a ser introduzido. O estudo feito aos grupos de utilizadores poderá também ajudar a escolher os elementos a colocar visto que utilizadores que usem mais o teclado irão preferir campos de inserção de texto com sugestões, enquanto que utilizadores que utilizem mais o rato irão preferir caixas de seleção. É importante também que as descrições sejam claras e, sempre que necessário, deverá ser deixado um ícone ao lado do elemento de introdução contendo uma descrição mais detalhada e possivelmente até alguns exemplos de como o preencher.
A área lateral direita do wireframe pretende dar suporte ao utilizador, apresentando algumas sugestões de resolução do problema enquanto ele tenta introduzir um novo, para evitar a introdução de problemas de simples resolução, ou então um histórico de outras assistências ou problemas com interesse, para poder comparar e copiar dados.
Figura 3.5: Wireframe dos formulários de inserção de novos problemas e assistências.
Após inserir um problema ou uma assistência o utilizador é levado à página do mesmo, que está na figura 3.6 e que engloba quatro áreas distintas. Na região central, marcada com a anota- ção 1, deverá estar presente uma descrição completa com toda a informação necessária para um assistente fazer o seu trabalho e alguns botões, na parte inferior, para que possa tomar alguma ação relativamente ao problema apresentado. Os botões de ação devem estar algo distanciados, ter descrições bem claras e ser distintos visualmente para procurar evitar erros de escolha por parte do assistente. Ainda dentro da área 1 pode-se ver uma área mais pequena com a anotação 4 que
Figura 3.6: Wireframe da página de um problema ou assistência.
pretende representar uma área com os dados pessoais da pessoa ou empresa que introduziu os da- dos no sistema, facilitando uma ligação rápida ao mesmo por chamada ou email. Na região lateral esquerda ficam mais uma vez alguns ícones com ligações para a página de criação ou edição de problemas ou assistências, pesquisa de informação ou eliminação do problema visível. Ao usar sempre os mesmos símbolos nas mesmas posições na página pretende-se mostrar ao utilizador que estes ícones irão realizar sempre a mesma ação, mantendo coerência e não obrigando o utilizador a decorar a sua posição para cada interface. Do lado direito da página, na anotação 2, poderá es- tar presente um histórico de assistências ou problemas com informação útil para o utilizador para chegar ao seu objetivo.