Layout da interface
Atividades relacionadas (layout de web sites)
As atividades abaixo estão numeradas de acordo com o sequenciamento de atividades da elaboração da estrutura:
■ H1. Examinar a arquitetura da informação, diagramas de fluxo e storyboards, para verificar os elementos necessários à interface. As análises das entrevistas fornecem informações valiosas para esta avaliação, bem como mapas conceituais e pesquisas sobre os padrões culturais de grupos de usuários e seus códigos visuais (cores, sinais, ícones, tipologias).
Também faz parte desta atividade o conhecimento da configuração do usuário ideal para a qual o site será desenvolvido. Quanto mais amplo é o público do site, mais preparada para grande variedade de situações de acesso precisa ser a interface.
É importante também entrar o mais profundamente possível no universo (informacional, técnico, comercial, editorial) do produto web em questão e, de maneira mais específica, no problema comercial, editorial a resolver.
O conhecimento do assunto e do seu ambiente facilita o processo de criação, a escolha dos referenciais técnicos, a defesa das soluções e a argumentação na hora da tomada de decisões.
O cliente confia mais no fornecedor que entende (ou procura entender) o resultado a ser obtido e se converte num parceiro. Em vez de cruzar os braços e simplesmente esperar que o produto apareça pronto na sua frente, tende a cooperar mais na criação e no aperfeiçoamento do produto.
■ H2. Avaliar as informações sobre o conceito editorial, para a criação de uma maneira de traduzi-lo visualmente.
Conversar com o editor ou responsável pelo conteúdo sobre o tamanho dos títulos e textos, a necessidade de leads e subtítulos, o tamanho das chamadas na página Principal e páginas internas, de olhos dentro dos textos, a necessidade de estilos especiais para citações e fontes bibliográficas, de agrupamentos de links.
■ H3. Organizar uma imagem geral como esboço e verificar a sua aderência às necessidades do projeto. Neste momento, é importante avaliar a inventividade e da originalidade da solução e como este fator repercute positiva ou negativamente no público.
É importante também estabelecer uma grade (malha) que se adeque às diferentes configurações de uso e que se mantenha consistente nas diversas soluções de layout.
■ H4. Produzir o layout e alternativas em programa apropriado, para a escolha do cliente e/ou da equipe de projeto responsável pela seleção. Muitas vezes as soluções são esboçadas de maneira informal, e vão aos poucos ganhando forma e acabamento até que sejam satisfatórias tanto por seus autores quanto pelos clientes e pelo público em geral.
Embora seja comum a apresentação ao cliente de layouts em formato de imagem, feitos no Photoshop, o desenvolvimento do layout em HTML com uso de CSS mostra a ideia com maior precisão especialmente os efeitos visuais que mudam sob a ação do usuário, bem como o modo de uso dos botões e recursos dinâmicos e os detalhes de acabamento.
Muitos clientes aprovam um layout apresentado como imagem e, ao ver o resultado em HTML, pedem para fazer tantas mudanças que é preciso praticamente refazer a solução.
Mesmo que os elementos, a composição e a descrição sejam satisfatórias em papel ou na imagem estática, a demonstração do uso permite uma percepção completa da solução, tanto sob o ponto de vista visual como funcional.
Neste momento, o designer precisa considerar aspectos relacionados à composição do conjunto de elementos (funcionais, de conteúdo) no contexto do veículo. E considerar também aspectos específicos da interface digital.
■ H5. Testar a solução com conteúdo em diferentes formatos, seja conteúdo editorial (textos, imagens, vídeo, músicas) ou funcional, como formulários. Testar imagens em diferentes formatos, aplicar barras de navegação adicionais em áreas internas, prever a diagramação de gráficos e tabelas.
■ H6. Apresentar presencialmente as soluções aos clientes, patrocinadores e stakeholders, de modo a que a soma de opiniões possa enriquecer a adequação da solução aos seus objetivos.► Exemplo1 ► Exemplo2 ► Exemplo3
O cliente pode pedir que, para a escolha do layout seja feito um teste com usuários representativos do público-alvo do site. Nos testes, a apresentação de duas ou mais soluções permite que os usuários se sintam mais confortáveis para rejeitar totalmente as que não agradam embora evidenciem que os designers podem não estar seguros em relação à melhor opção.
■ H7. Detalhar as soluções por escrito, incluindo todos os elementos da interface, como diferentes tipos de títulos, subtítulos, textos, imagens (fotos, gráficos, tabelas, ícones) elementos de navegação (barras, botões, menus, links), diferentes tipos de formulários, gráficos e tabelas, vinheta de apresentação de vídeos e arquivos sonoros, moldura para apresentação de vídeos, páginas especiais e elementos específicos a cada orientação comercial e editorial. ► Checklist de elementos de layout (xls, 19Kb)
■ H8. Registrar por escrito todas as decisões e especificações gerais editoriais e de layout (conceito geral, tipologias, palheta de cores, imagens, composição, resolução de tela prioritária considerada, aparência dos botões, setas, bullets elementos secundários de sinalização), que serão detalhadas ao longo da produção.
Este documento é muito útil para a orientação da equipe de programação sobre o layout das páginas elementos e funcionalidades especiais.
Outras atividades do projeto de layout
■ Descrever o processo de criação > avaliação > ajustes > aprovação e desenvolvimento antes de começá-lo, bem como todos os produtos relativos ao layout que serão apresentados. Desta maneira, o cliente (ou dono do produto, em métodos ágeis) pode acompanhar cada etapa e pedir antecipadamente o acréscimo ou a supressão de uma atividade ou produto.
■ Checar a qualidade do layout de acordo com requisitos pré-estabelecidos ou lista de referência já existente. ► Exemplo de lista de indicadores (formato xls, 47kb). Esta lista pode ser conferida pelo arquiteto da informação, gerente do projeto, analista de sistemas e desenvolvedores, para ver se não falta nada a criar e a apresentar ao cliente.
Embora a lista de checagem possa se basear em listas genéricas de elementos de layouts web, é sempre necessário enfatizar a importância de adaptá-la a cada projeto.
Assuntos relacionados
► Apresentação do layout ao cliente
► Componentes da interface web
► Tipos de testes
► Lugares comuns dos elementos das páginas
► Planejamento (EAP): Atividades da Criação de modelos
► Consistência do layout e do tratamento editorial
► Arquitetura da informação
► Mapas conceituais
► Usabilidade
► Usabilidade – Consistência
► O espaço da página
► Indicadores de qualidade - exemplo de lista de checagem
Referências sobre atividades relacionadas à criação do layout web
► Research: First steps for designers, de Elliot Jay Stocks (SitePoint, acesso em 19.3.2009)
► The importance of effective detailed design (Human Factors International, acesso em 2.5.2005)
Mais informações sobre o assunto (links externos)
► Graphic design theory: 50 resources and articles (noupe, acesso em 22.6.2010)
► Handbook of collaborative design (little springs design, acesso em 21.3.2010)
► Designing with content in mind (thedesignCubicle, acesso em 7.12.2009)
► Kanban para design gráfico e user experience (UX) usando Scrum, de Helio Costa (dubaralho, acesso em 6.11.2009)
► Integrating prototyping into your design process, de Fred Beecher (boxesandarrows, acesso em 20.10.2009)
► The battlefield of design: Designers vs. clients (acesso em 18.6.2009)
► Usability Body of Knowledge (acesso em 20.3.2009)
► Principles for usable design (Alertbox, acesso em 20.3.2008)
► Bridging the designer-user gap (Alertbox, acesso em 20.3.2008)
► Cues, the golden retriever (Boxesandarrows, acesso em 6.6.2008)
► Design principles (IBM, acesso em 28.3.2008)
► Visual language – Design guidelines for the widening of page templates across bbc.uk.uk - especificações de design dos sites da BBC - PDF
Ferramentas e recursos auxiliares
► Modelos de elementos de user interfaces para web designers (acesso em 21.7.2010)
► Notable, permite o retorno sobre o design de telas, conteúdo e código de qualquer página ou plataforma web direto do browser (acesso em 24.5.2010)
► AttentionWizard, programa que pode ser usado para avaliar layouts de web sites a partir da simulação dos movimentos do olho humano e da verificação dos principais pontos de atenção. (SiteTuners.com, acesso em 4.12.2009)
► Sketchbook Pro (permite o desenho livre de esboços, com suporte de ferramentas de texto e alguns efeitos de texturas)
