Wireframes Desenho de Iteração. Henrique Correia. Faculdade de Ciências da Universidade de Lisboa

Transcrição

1 1 Wireframes Desenho de Iteração Henrique Correia Faculdade de Ciências da Universidade de Lisboa Sistemas Hipermédia - 1º ano Mestrado Ensino da Informática 11 de Outubro de 2011

2 2 Wireframes Introdução Os Wireframes estão relacionados com o conceito de design estrutural de um web site, funcionam como um guia visual que sugere a sua estrutura. De acordo com Peter Morville e Louis Rosenfield (2006) os wireframes definem, de acordo com uma perspetiva arquitetónica, como uma página ou um template deve ser. Figura 1. Exemplo de Wireframe Através da elaboração de wireframes o arquiteto de informação pensa e desenha a estrutura do web site. São definidos nos esboços aspetos como por exemplo a localização do sistema de navegação e das categorias de informação. Desta forma os wireframes ajudam o arquiteto de informação a agrupar conteúdos e a ponderar as suas prioridades por ordem de importância. São utilizados posteriormente para transmitir a organização geral do site aos outros elementos da equipa. De acordo com Dan Brown (2007), o propósito dos wireframes é de comunicar as ideias iniciais de design focando a atenção na estrutura e nos conteúdos do website e não no design gráfico. Devem utilizar-se wireframes apenas para as páginas mais importantes, nomeadamente as que são mais complexas, como por exemplo nas páginas principais ou nas que contêm mecanismos de pesquisa ou outras aplicações importantes. É também frequente a sua utilização nos templates que iram ser utilizados posteriormente em outras páginas.

3 3 Wireframes - Desenho A elaboração de wireframes pode ser feita recorrendo a desenhos feitos sobre papel ou quadro branco (Fig. 2), ou em alternativa produzidos com software especifico para esse fim (Fig.3). É frequente acontecer num mesmo projeto iniciarem-se os desenhos de baixa fidelidade no papel e à medida que se ajustam os conteúdos aos objetivos passar-se para desenhos de media ou alta fidelidade. O objetivo de utilizar desenhos de baixa fidelidade inicialmente, tem o propósito de não dispersar as atenções da equipa do que é o principal nesta fase de desenvolvimento. São também mais flexíveis, podendo fazer-se alterações rapidamente e com um baixo custo. Através do desenho e análise dos wireframes, o arquiteto de informação, pode repensar toda a estrutura de um website sem que para isso tenha de despender de muitos recursos humanos e financeiros. A utilização desta técnica, tem assim para além do desenho das principais áreas do website, o objetivo de tentar evitar mais tarde uma eventual necessidade de reengenharia. A reengenharia numa fase tardia irá ter custos bastante mais elevados, podendo por em causa a própria continuação do projeto. Figura 2. Wireframe desenhado em papel. Jason Robb - Long Page Sketches. Figura 3. Wireframe de página principal. (Peter Morville and Louis Rosenfeld, Information Architecture for the World Wide Web, Third Edition, pág. 307.)

4 4 Como podemos observar nas figuras acima, ambos os wireframes compõem versões simplificadas das páginas do site. Constam apenas de textos e links, sem qualquer detalhe gráfico, para a verificação das funcionalidades, da abordagem editorial e da navegação do website. O conjunto de wireframes inclui a listagem e posicionamento dos elementos de todas as páginas e do conteúdo de cada uma, com o estabelecimento de vínculos entre elas. (Avelar e Duarte, 2011, avelareduarte.com.br). Os wireframes fazem assim parte de um conjunto de elementos a produzir e entregar a todos os membros da equipa numa fase preliminar da construção de um website. Na figura 4 podemos observar um conjunto de produtos referentes à fase de arquitetura de informação, da qual a produção de wireframes faz parte. Figura 4. Produtos a entregar na Arquitetura de Informação (Peter Morville and Louis Rosenfeld, Information Architecture for the World Wide Web, Third Edition, pág. 15.) Wireframes Características Nem sempre acontece, mas os wireframes devem ser produzidos por um arquiteto de informação. Um arquiteto de informação não é nem tem de ser um especialista em design gráfico, neste sentido é frequente que o aspeto dos wireframes não seja muito apelativo visualmente. O objetivo dos wireframes não é serem bonitos nem terem o aspeto de um site finalizado, a ideia e objetivo é de estudar e representar a funcionalidade de um site indicando como este está organizado. Neste sentido segundo Avelar e Duarte (2011) e Dan Brown (2007) podemos enumerar as seguintes funções para os wireframes: Explorar e desenvolver os principais conceitos, com o registo dos primeiros produtos do processo de criação da estrutura conceptual, de alguma maneira subjetiva, para a intervenção crítica e reformulação por outros profissionais, como analistas de sistemas, arquitetos da informação, programadores, designers de interface, redatores e editores, profissionais de marketing e outros profissionais. Permitir a compreensão da estrutura pelos stakeholders do projeto, para a sua avaliação. Facilitar o planeamento das próximas etapas do projeto, a partir de uma visão mais clara do produto.

5 5 Permitir a perceção de como as informações se relacionam e como a interface funciona. Detalhar as especificações para o desenvolvimento, incluindo as aplicações dinâmicas ("rich media applications"), animações, as ações e os movimentos do utilizador e respostas dos sistemas do início até o final, passando por etapas intermediárias. Ajudar a prevenir problemas que podem aparecer depois da inserção do conteúdo nas páginas. Servem como registos que devem ser corrigidos, testados por futuros utilizadores e aperfeiçoados (as versões iniciais necessitam de ser mantidas em arquivo, para consulta). Wireframes Tipos Existem vários tipos de wireframes podendo variar na forma, no tamanho bem como no nível de fidelidade. Para além dos desenhos esquemáticos os wireframes podem também integrar informações detalhadas, necessárias ao desenvolvimento de cada página, como texto, gráficos, áudio, vídeo, animações, elementos de navegação e links. Estes aspetos podem definir o nível de fidelidade do wireframe. Existem três níveis de fidelidade, baixa fidelidade, média e alta fidelidade. Os wireframes de baixa fidelidade tendem a ser desenhados manualmente numa folha de papel ou num quadro branco, por outro lado os wireframes de alta fidelidade são criados em HTML e/ ou através de ferramentas especificas. Existem várias ferramentas que podem ser utilizadas para desenhar wireframes, o Adobe Ilustrator, o Flair Builder, ou o GUI Design Studio são apenas alguns exemplos. De acordo com Peter Morville e Louis Rosenfield (2006) a maioria dos desenhos de wireframes situam-se algures no meio destas duas abordagens. Por exemplo um wireframe de baixa fidelidade pode ser desenhado a computador mas não ter quaisquer elementos gráficos e nenhum conteúdo real. Nesta abordagem o objetivo é centrar a atenção na navegação do site de uma forma local e global. Um wireframe de media fidelidade já contem um alto nível de detalhe. O objetivo é introduzir vários aspetos sobre conteúdo e layout para serem comunicados aos designers gráficos e aos programadores. Por ultimo, um wireframe de alta fidelidade assemelha-se muito com produto final. De acordo com Peter Morville e Louis Rosenfield (2006), este tipo de wireframe delimita até onde o arquiteto de informação pode ir em termos de desenho. A partir daqui já se pressupõe uma participação ativa de um designer gráfico. À medida que a fidelidade dos wireframes aumenta, também aumenta o esforço e os custos de produção bem como a atenção para os elementos gráficos. Este aspeto pode constituir uma distração para o objetivo principal do wireframe, no entanto um wireframe de alta fidelidade simula muito bem o produto final, permitindo melhores testes de funcionalidade e usabilidade com os utilizadores finais. Análise Critica De acordo com o que li, na minha opinião os wireframes são um produto importante numa fase de planeamento e desenvolvimento de um website uma vez que ajudam a esquematizar o layout e a definir onde iram ser colocados os conteúdos. Permitem também estudar quais os movimentos dos utilizadores para fazerem determinada operação. Neste ponto é possível, com os testes de usabilidade iniciais sobre o wireframe, otimizar o desenho

6 6 e tentar minorar as alterações futuras ao mesmo tempo que se otimizam as opções para serem cada ver mais orientadas ao utilizador final. A figura do arquiteto de informação aparece como a identidade que produz os wireframes e os transmite à restante equipa, tendo um papel fundamental para o sucesso do projeto o arquiteto para além das suas responsabilidades diretas, age como um negociador uma vez que tem de reunir vários consensos. Por vezes é difícil distinguir até onde vai a responsabilidade do arquiteto e até quando estará ou não a entrar no campo de outro especialista. Á medida que a fidelidade do wireframe aumenta, mais difícil se torna distinguir onde começa o trabalho do designer gráfico e onde termina o trabalho do arquiteto. Desta forma o trabalho em equipa tem de ser privilegiado e as pessoas envolvidas no projeto desde inicio. Quanto mais estiverem envolvidos maior viabilidade terá o trabalho realizado. Na minha opinião os wireframes são de uma utilidade inquestionável uma vez que à semelhança de uma planta num projeto de construção civil constituem o desenho de toda uma estrutura que será utilizado pelos vários especialistas das restantes áreas. Bibliografia Peter Morville & Louis Rosenfield, Information Architecture for the World Wide Web, Third Edition, O Reilly Brown, Dan M. Communicating Design: Developing Web Site Documentation for Design and Planning. New Riders, WebGrafia Youtube