Design de Interface - Avaliação Final A proposta deste trabalho era adaptar a interface gráfica de um jogo de tabuleiro clássico tomando como base os conhecimentos de Consistência, Hierarquia e Personalidade. Foram pedidas quatro telas (inicial, durante o jogo, pontuação e final) e por isso este texto será dividido em cinco seções: uma dedicada a uma breve explicação geral sobre a interface criada e uma para cada uma das telas pedidas. 1 Introdução O jogo escolhido para este trabalho foi o Xadrez. Foi dada uma abordagem mais clássica à interface justamente por Xadrez ser um jogo clássico. Texturas de madeira estão presentes no tabuleiro, nas peças e nas caixas de mensagem exibidas durante o jogo. A fonte King, cujo nome coincidentemente remete à peça mais importante do Xadrez, foi utilizada para o texto exibido em todas as telas, a única exceção sendo a logo (o título FreeChess ), cuja fonte é a LaBrit. Ambas são fontes serifadas, o que também remete ao aspecto mais clássico da interface, e estão sendo utilizadas na mesma cor em todas as telas. No geral, os títulos foram postos em caixa alta para dar destaque a eles e diferenciá-los de outros elementos. Todos os elementos foram alinhados à esquerda. 2 Tela Inicial O fundo da tela inicial mostra um tabuleiro de Xadrez, um indicativo do que o jogo se trata,
por cima de um fundo de madeira que é consistente em todas as outras telas. Este tabuleiro foi o mesmo utilizado para a tela Durante o Jogo. A fonte LaBrit é uma fonte gótica muito expressiva e por isso foi escolhida para a logo do jogo, que forma um F serifado (primeira letra do nome do jogo) com o menu. O menu inicial é um bom indicativo das funções que o jogo possui. Carregar Jogo, por exemplo, indica que o usuário poderá salvar um jogo para terminá-lo em outro momento. No mouse over, a opção (botão) selecionada ganha destaque ao mudar de cor e, à sua esquerda, é mostrado um peão, símbolo que remete ao jogo de Xadrez. Este padrão será consistente em todos os botões similares presentes nas outras telas do jogo. 3 Tela Durante o Jogo Na tela Durante o Jogo, vemos um tabuleiro chapado para dar a impressão de que ele foi construído, com suas coordenadas pintadas em volta, em uma mesa de madeira. A mesa seria a mesma imagem de fundo vista na página inicial. O símbolo visto nas pontas do tabuleiro é um símbolo clássico do Xadrez: a cruz do rei. Na lateral direita, o usuário terá acesso a informações sobre a partida atual. A barra que contém estas informações possui um fundo diferente para que o usuário não confunda os elementos contidos nela como sendo elementos do jogo, porém, apesar da cor diferente, o mesmo fundo foi utilizado para uma melhor harmonia. O motivo da barra estar na direita é que a leitura do usuário ocorre da esquerda para a direita. O mais importante para o usuário não são as informações da partida, mas sim o jogo em si, logo, o tabuleiro é a primeira coisa que ele deve ver. Diferente das informações em si, os títulos estão em caixa alta para ajudar na distinção entre os dois. Para indicar hierarquia, as informações também estão levemente deslocadas para a direita. Os ícones ajudam a diferenciar os grupos e também adicionam personalidade à interface. A duração da partida é marcada em horas, minutos e segundos. O ícone do relógio remete a tempo.
Nível é a dificuldade do jogo, que pode ser fácil, médio ou difícil. O Xadrez é um jogo de estratégia clássico no qual dois exércitos se enfrentam. A espada foi escolhida por ser um instrumento de batalha clássico. O ícone utilizado para perdas remete ao fato de que no Xadrez, quando um jogador pega uma peça do outro, se diz capturar a peça. A torre representa o local onde as peças capturadas serão mantidas. Como é comum em jogos deste tipo, ao clicar em uma peça, ela é marcada de algum modo e são mostrados possíveis movimentos para esta peça. Na imagem acima, o cavalo branco da direita foi selecionado. O quadrado em que ele se encontra possui um contorno e as duas possíveis jogadas também são indicadas pelo mesmo contorno. Na direita, as possíveis jogadas também são mostradas, mas em forma de coordenadas abaixo do ícone e do nome da peça. Caso nenhuma peça esteja selecionada, nem o ícone, nem o nome e nem as sugestões são mostradas. Os botões Salvar e Sair estão consistentes com os botões do menu da tela inicial. 4 Tela Final Ao final da partida, a tela é ofuscada e embaçada e uma caixa de texto é mostrada informando o resultado da partida (se o usuário venceu ou perdeu). Ao clicar em continuar, o usuário pode ser levado para a tela inicial, no caso de derrota, ou pode ser levado para a tela de pontuação, no caso de vitória. No segundo caso, será requisitado o nome do usuário para que sua pontuação seja adicionada à tabela como é mostrado abaixo. OBS: Como nenhuma peça está selecionada, não estão sendo mostrados os possíveis movimentos.
A cor da caixa de mensagem em ambas as telas é a mesma utilizada na barra lateral da tela in game (durante o jogo), pois ambas possuem a mesma função: passar mensagens para o usuário. 5 Tela de Pontuação
Na tela de pontuação, é exibido um ranking em formato de tabela, indicando a dificuldade da partida, quanto tempo ela durou e a data em que ela aconteceu. Os títulos estão em caixa alta para diferenciá-los das informações e estabelecer uma hierarquia. As informações estão deslocadas um pouco para a direita, assim como acontece na tela in game. Ao clicar em início, o usuário é levado à página inicial. O botão possui o mesmo efeito de mouse over que os botões da tela inicial.