Páginas

Pesquisar neste blog

Mostrando postagens com marcador Comunicação Visual. Mostrar todas as postagens
Mostrando postagens com marcador Comunicação Visual. Mostrar todas as postagens

30 de setembro de 2021

O Que Significa Design UX para Aplicativos



O design UX é o processo de desenvolvimento e melhoria da qualidade da interação entre o usuário e o seu aplicativo. O termo UX (User Experience) significa Experiência do Usuário e foi criado por Donald Norman, co-fundador da Nielsen Norman Group Design Consultancy nos anos 90.

O design UX envolve a atitude, o comportamento e os sentimentos do usuário, na utilização do produto. Ele também inclui a percepção do usuário nos aspectos do sistema tais como, utilidade, facilidade de uso e eficiência. A experiência do usuário pode ser considerada subjetiva, porque se trata da percepção e pensamento com respeito ao sistema.

A dinâmica da experiência do usuário está constantemente em modificação devido às alterações das circunstâncias de uso, alterações individuais de sistema, bem como alterações do contexto do uso.

Como o termo se refere a experiência que o usuário experimenta ao usar o produto, acaba se confundindo com o termo UI (User Interface).

O design UX leva em conta não somente a usabilidade como também a acessibilidade. O produto deve ser fácil, agradável para o maior número possível de pessoas, por esse motivo os designers UX são profissionais que atuam em diversas áreas desde a programação até a psicologia.

Como Fazer um Design UX

A pesquisa de UX começa com o usuário do produto e algumas vezes com a criação de personas, a partir do qual o designer verifica toda a jornada que o usuário vai seguir na interação com o produto.

Um bom desenvolvimento UX faz a análise de como o usuário interage com as coisas no dia a dia, por exemplo, como um usuário faz a pesquisa por um restaurante próximo ao seu trabalho.

Quando um designer UX inicia a pesquisa para fazer o design de um produto ele analisa:
  • Quais as emoções os usuários estarão sentindo ao usar o produto.
  • Se os usuários ficam confusos em como usar o produto e como obter o resultado desejado.
  • Quais os problemas os usuários estão tentando resolver ao usar o produto.
  • Se o processo de uso do produto pode ser melhorado através do design.
Após a pesquisa e a análise de qual a melhor forma de apresentação do produto para atender as necessidades do usuário, dando como exemplo, o desenvolvimento de um site, o designer pode projetar uma diagrama de wireframe para visualizar e testar a interface a fim de verificar se a experiência do usuário foi atendida.


O Design UX é uma parte importante no desenvolvimento do produto para atender as expectativas do cliente tanto quanto ao funcionamento como a experiência que ele tem com o produto em termos de usabilidade, praticidade e facilidade.

Post Relacionado

27 de setembro de 2021

O que Significa Design UI para Aplicativos


A função do design UI para aplicativos é proporcionar ao usuário um local onde ele possa interagir com o aplicativo de forma simples, amigável e eficiente, de preferência que ele possa inserir poucas informações para que o aplicativo execute a operação desejada.

O design UI normalmente se preocupa com a apresentação e a aparência da tela do aplicativo para o usuário. O objetivo principal é fazer com que a interação entre o usuário e o aplicativo seja a mais simples e eficiente possível, e que também proporcione uma boa experiência para o usuário.

A sigla UI significa User Interface em inglês, usamos a tradução Interface de Usuário, que é composta de elementos utilizados nos aplicativos e na navegação de sites. Podemos destacar alguns elementos que são comuns na UI:

  • Botão 
  • Caixa de Texto
  • Imagens
  • Campos de Formulários
  • Barras de Rolagem
  • Caixas de Opção
  • Menus

Tipos de UI

As  principais Interfaces de Usuário que utilizamos são:

  • Linha de Comando: Essa é uma interface bem antiga, mas usada até os dias de hoje. Ela apareceu nos primeiros computadores pessoais, conhecida como janela DOS.


  • Interface Gráfica de Usuário (GUI - Graphical User Interface): Essa interface começou a ser usada nas primeiras versões do Windows e dos computadores da Apple. Ao invés de digitar os comandos começamos a usar o mouse e ter acesso aos elementos gráficos como menus, janelas, botões, entre outros.


  • Interface de Usuário Habilitada por Voz: Essa é uma interface mais moderna que apareceu com o desenvolvimento da inteligência artificial usada em vários dispositivos. Podemos citar como exemplo, Alexa, Siri, Cortana, assistente do google, entre outros.


Como Projetar uma UI

Uma boa Interface de Usuário deveria ser pelo menos:

  • Intuitiva: Apresentar as telas de forma que o usuário consiga usar facilmente, simplesmente navegando pelas telas.
  • Consistente: Apresentar os elementos de uma forma padrão em todas as suas telas, por exemplo, se um link possui a fonte azul e é sublinhado, todos os links da interface devem seguir o mesmo formato.
  • Eficiente: Apresentar as telas de forma que o usuário consiga realizar a tarefa desejada com o mínimo de operações possível, para chegar ao resultado final.

O design UI para aplicativos é importante para atrair o usuário para seu aplicativo. Deve ser fácil de usar, resolver o problema ou executar a tarefa desejada da forma mais simples, fácil e intuitiva possível.

Posts Relacionados

23 de setembro de 2021

Qual a Diferença entre UI e UX


Atualmente tem se falado muito sobre design UX nos aplicativos, e juntamente com o aparecimento deste acrônimo, apareceram também dúvidas sobre qual a diferença entre o design UI, que é o design para a interface do usuário, com o termo design UX, que está relacionado com a experiência do usuário na utilização de um aplicativo. 

Explicando de forma muito resumida o termo UX  é um acrônimo para Experiência do Usuário (User Experience) e é um campo mais analítico, enquanto que a UI que é um acrônimo para Interface de Usuário (User Interface) está relacionada com a camada visual.

Os acrônimos têm sido utilizados já há algum tempo, mas a ideia por trás das siglas vem sendo aplicada há muito mais tempo ainda.

Apesar dos dois tipos de design serem muito importantes para o aplicativo e trabalharem próximos, suas funções são bem diferentes. A boa experiência de um aplicativo se inicia com o design UX e é finalizado com o design UI, ambos são essenciais para o sucesso do aplicativo.

Diferença entre UI e UX

Para entender melhor qual a diferença entre design UI e UX vamos ver quais os itens cada designer pesquisa, durante a etapa de desenvolvimento do aplicativo.

Design UI

Para projetar a Interface de Usuário o designer:
  • Desenvolve a parte visual incluindo por exemplo, os elementos gráficos, cores, fontes, ícones e imagens.
  • Desenvolve o guia de estilos e as bibliotecas dos elementos da interface para garantir a compatibilidade e padronização da marca.
  • Pesquisa a interatividade dos elementos para melhorar a capacidade de resposta, que pode incluir as animações, transições, navegação entre páginas e várias outras formas.

Design UX

Para desenvolver uma melhor Experiência para o Usuário o designer:
  • Pesquisa quais as últimas tendências e qual a expectativa que as pessoas têm de um bom design.
  • Pesquisa quais os problemas que os usuários encontram para usar produtos similares e o que fazer para resolver esses problemas.
  • Organiza os elementos na interface de forma a ficar fácil e intuitivo para o usuário.
  • Faz o design do wireframe para analisar qual vai ser a experiência do usuário, quando utilizar o produto.

Exemplo de Wireframe

Um exemplo interessante para diferenciar o design UX do design UI, é um que solicitava que a equipe de design definisse qual a melhor forma de apresentar uma tela de login, com opção de cadastro para o usuário.

No design UI a preocupação está em como posicionar os botões, caixas de texto, definir cores, layout da tela, seleção dos campos necessários para preenchimento dos dados do usuário.

No design UX, a primeira pergunta seria, qual é o público que a aplicação deseja atingir, se for um público que utiliza redes sociais, ao invés de termos o login com opção de cadastro, poderíamos ter botões de login integrados nas principais redes sociais, onde este público já possui cadastro, melhorando desta forma a experiência do usuário.

Nesse exemplo fica claro como os dois tipos de design são importantes e estão interligados na definição das telas do aplicativo.

Podemos ter aplicativos com interfaces muito bem feitas, com uma aparência excelente, mas que são muito complicadas de trabalhar e não são intuitivas, neste caso temos um bom design UI e um design UX ruim.

Também podemos ter casos de interfaces com uma aparência não tão bem elaborada, mas que são extremamente fáceis de trabalhar e intuitivas, neste caso temos um bom design UX e um design UI mais simplificado.

Apesar de mencionar a diferença entre UI e UX para a área de aplicativos, estes designs são aplicados em várias modalidades de empresas como por exemplo, área médica, área automobilística, indústrias, entre outros.

Posts Relacionados

13 de novembro de 2017

O Que é Formato SVG para Imagens


A adesão da maioria dos navegadores ao suporte de imagens no formato SVG (Scalable Vector Graphics – Gráfico Vetorial Escalável) fez com que as pessoas começassem a utilizar este formato para imagens, ao invés dos tradicionais JPG e PNG, porque finalmente temos a possibilidade de utilizar imagens vetoriais na web, que podem ser redimensionadas sem perda a qualidade.

Nesse post você vai conhecer a história, a definição, as vantagens e aprender como criar, abrir e salvar figuras e gráficos no formato SVG.

Tabela de Conteúdo

Como Abrir Arquivos SVG

História do SVG

Quando se iniciou a construção de páginas HTML na web, percebeu-se a necessidade de possuir um formato para as imagens de página, que fossem compatíveis com as diferentes densidades dos displays, que pudessem ser redimensionadas, possuir transparência, camadas e até imprimir com uma qualidade melhor.

Estava claro que os formatos já existentes e muito utilizados até os dias de hoje não seria o ideal como, por exemplo, as figuras com formato PNG e JPG. O grande problema destes formatos é que não permitem o redimensionamento com qualidade. 

O que a web precisava era um formato que permitisse o redimensionamento, ou seja, que fosse uma imagem vetorial que é composta por curvas, elipses, linhas, polígonos e vários outros elementos baseados em vetores matemáticos.

Pensando nisto Chris Lilley escreveu em 1996 um documento que era uma especificação dos requisitos gerais para gráficos vetoriais. Várias empresas na época se inscreveram para participar da definição do padrão junto a W3C, mas o grupo de trabalho decidiu não utilizar nenhuma das especificações fornecidas pelas empresas, porque cada uma tinha uma ideia diferente de como fazer. 

As empresas resolveram então, criar uma especificação do zero baseada nas lições aprendidas até aquele momento de trabalhos anteriores, e assim nasceu o SVG.

Nos últimos anos vários navegadores começaram a dar suporte ao formato incluindo Opera, Firefox, Safari, Edge e Chrome. 

Definição do SVG

O formato de imagem SVG utiliza o padrão XML para descrever imagens em duas dimensões, ou seja, podemos desenhar a imagem em um arquivo texto utilizando os atributos de um arquivo XML. Por exemplo, para desenhar um círculo utilizam-se os atributos e estilos para definir as coordenadas, raio, cor, borda, etc.

Figura 1 - Exemplo de cículo desenhado no formato SVG

A vantagem deste formato é que além de poder redimensionar sem perda da qualidade da imgem, podemos utilizar uma ferramenta de edição de imagem ou simplesmente um editor de texto comum, como o Notepad. No caso do editor de texto é necessário conhecer o XML.

As ferramentas de criação e edição de imagem são mais fáceis de utilizar, porque não é necessário o conhecimento da linguagem XML, podemos desenhar diretamente na ferramenta sem nos preocupar com a linguagem.

Se você tiver a curiosidade de conhecer a linguagem por trás do arquivo, abra o arquivo da imagem com a extensão .SVG em um editor de texto qualquer. A imagem da Figura 1 utiliza o seguinte código XML:


<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="83px" height="83px" version="1.1"><defs/><g transform="translate(0.5,0.5)"><ellipse cx="41" cy="41" rx="40" ry="40" fill="#004d99" stroke="#004d99" stroke-width="3" pointer-events="none"/></g></svg>

Vantagens do SVG

  • Por ser uma imagem vetorial permite o redimensionamento sem a perda da qualidade da imagem e do texto.
  • Pode ser exibido nos navegadores de celulares, o que faz com as imagens sejam apresentadas com uma qualidade superior aos arquivos tipo JPG ou PNG.
  • Como o arquivo é na verdade um arquivo texto, porque utiliza à linguagem XML, o tempo que o navegador demora em exibir a imagem é muito menor do que os tradicionais formatos de imagem.
  • O tamanho do arquivo é bem menor do que o tamanho dos arquivos de imagens JPG ou PNG.
  • A impressão da imagem fica com uma qualidade superior do que a impressão de imagens JPG e PNG.

Como criar imagens SVG

Existem vários editores de imagem que criam arquivos SVG como o Adobe Photoshop e InDesign. Também existem as opções gratuitas como  Inkscape e o Gimp

Existe mais uma opção de editor de imagem que é o Desenhos Google. Você pode usar esse editor para criar desenhos e fazer o download do arquivo em vários formatos como PDF, JPG, PNG e o SVG.

Para usar o Desenhos Google, entre na página do Google Drive com sua conta e clique no botão + Novo e selecione Desenhos Google.

desenhos-google.png

O navegador abre uma guia com o aplicativo Desenhos Google, onde podemos desenhar, inserir formas, fazer fluxogramas, inserir e editar imagens. 

Para obter o desenho no formato vetorial, faça o download do desenho pronto no aplicativo Desenhos Google, através do menu Arquivo > Fazer o Download > Gráficos vetoriais escaláveis (.svg).

Como Abrir Arquivos SVG

Se você não tiver um editor de imagens vetoriais ou quiser simplesmente visualizar um arquivo com imagem vetorial SVG, use o navegador de sua preferência para abrir o arquivo. 

Uma das opções para abrir o arquivo no navegador é copiar o caminho do arquivo na barra de endereços do navegador.

Por exemplo, se o arquivo se encontra no diretório c:\usuario\figuras\imagem.svg, digite esse caminho na barra de endereços do seu navegador.

A imagem SVG é um bom formato de figuras para se utilizar em arquivos de ajuda online exibidos em navegadores. Por serem vetoriais adaptam-se melhor aos vários tamanhos de tela, desde o computador até os celulares.

Quando o usuário vai buscar uma ajuda online que possua imagens, o melhor é utilizar imagens vetoriais que não perdem a qualidade nos navegadores atuais e são mais rápidas para serem exibidas.

Como Salvar Figuras e Gráficos do Word como SVG

O Word permite salvar figuras e gráficos de documento para o formato SVG, para quem possui a assinatura do Microsoft 365. 

Vou mostrar como salvar um gráfico de vendas de um documento do Word, no formato SVG.

Com o gráfico no formato SVG podemos usar a imagem em vários aplicativos que reconhecem o formato e tirar proveito do fato da imagem ser vetorial e podermos redimensionar sem perda de qualidade.

Siga o passo a passo para salvar o gráfico do Word no formato SVG.

1. Com o documento Word aberto, clique na área do gráfico, no menu de contexto selecione o item Salvar como Imagem.



2. Na janela Salvar como Imagem, no campo Tipo, selecione Elementos Gráficos Vetoriais Escaláveis (*.svg).

3. Selecione o diretório onde vai salvar o arquivo e digite o nome do arquivo.

Agora podemos usar o gráfico na web e em vários outros aplicativos que reconhecem o formato SVG. Esse procedimento é válido tanto para gráficos como para figuras e SmartArt dentro do Word.

Se você quiser conhecer a linguagem por trás do SVG acesse o Tutorial de SVG.

Post Relacionado


Recursos Extras

The Secret Origin of SVG
Using SVG as placeholders — More Image Loading Techniques

15 de maio de 2017

7 Dicas de Como Escrever um Manual



Recentemente li um Manual de Escrita Técnica bem interessante que detalha os passos de como escrever um Manual, independentemente do tipo de manual ou de produto. São dicas genéricas que podem ser seguidas para qualquer tipo de Manual. Neste post apresento um resumo dos principais passos mencionados. Você pode acessar o Manual completo ou fazer o download através do link Tech Writing Handbook.

Para escrever um manual existem duas leis básicas, a primeira é que é necessário ter o conhecimento sobre o assunto que o Manual vai abordar, se for um produto, é necessário conhecer o produto, se for um software é necessário utilizar o software, se for instruções para montar ou consertar algum produto é necessário executar a montagem ou conserto, antes de escrever sobre o assunto.

A segunda lei é conversar com os especialistas que desenvolveram o produto ou o software, perguntar, consultar tentar obter o maior número de informações possíveis sobre o assunto que o Manual deve abordar.

Além de obedecer as duas leis básicas podemos seguir alguns passos para que o Manual seja claro, objetivo e fácil de entender.

1. Seja coerente

  • Comece o parágrafo com a informação mais importante.
  • Escreva os fatos, as informações que não forem relevantes não precisam ser incluídas.
  • Escreva sentenças curtas com no máximo 24 palavras.
  • Não utilize palavras vazias por exemplo, no evento de, substitua por se.
  • Utilize voz ativa, elimine o verbo Ser. Elimine seria, deveria ser,  tinha sido.
  • Utilize voz passiva estrategicamente, mas se puder substituir por voz ativa, substitua.
  • Quando der direções comece a frase com o Verbo.

    2. Escreva com Clareza

    • Utilize linguagem simples.
    • Não utilize jargões.
    • Não transforme verbos em substantivos.
    • Utilize as palavras um, uma, o, a, sem problemas. A omissão dessas palavras faz o texto parecer que foi escrito por um robô.
    • Faça testes com pessoas que não conhecem o assunto do Manual. Peça para que elas leiam o conteúdo e verifique se está claro e não existe nenhuma dúvida. Se existir significa que o Manual não está claro.
    • Não use as palavras, bastante, principalmente, um pouco,  parece, espécie de,  bonito.
    • No caso de siglas explique o significado a primeira vez que aparece no texto e coloque a sigla entre parênteses.

      3. Comunique-se com Clareza

      Cada autor tem um estilo de escrita que deve ser seguido do começo ao fim do Manual. O recomendado é que o autor seja espontâneo.

      A utilização da segunda pessoa você ou seu, sua, pode ser utilizado sem problemas. Inclusive o texto fica mais claro. Naturalmente não deve ser utilizado em textos científicos que devem demonstrar imparcialidade.

      Os parágrafos devem ser curtos. A regra de parágrafos com cinco sentenças não é aplicada em escrita técnica. Um parágrafo pode ser iniciado quando se inicia um novo pensamento. Uma recomendação é utilizar os marcadores para dar uma "quebrada" no texto.

      4. Verifique a Audiência

      Para escrever um bom Manual, o ideal é conhecer a audiência que vai utilizar o Manual. Um Manual para cliente não técnico deve ter termos simples e fáceis de entender. Um Manual para uma audiência mais técnica pode utilizar os termos técnicos já conhecidos.

      Dependendo da audiência verifique a possibilidade e necessidade de incluir um glossário em seu Manual.

      5. Fotografe o Processo

      Não devemos somente explicar como fazer, é necessário mostrar como fazer. Utilize outras formas de figuras, além de fotos devemos utilizar outras formas de imagem para explicar como fazer determinado procedimento, portanto utilize gráficos, diagramas,  ilustrações, vídeos.

      6. Organize o Conteúdo

      • Faça um esboço do conteúdo do manual.
      • As pessoas vão ler o Manual para procurar como fazer uma determinada tarefa se for o caso, portanto organize o Manual por tarefas nestas situações.
      • Utilize listas, numeradas ou não.
      • Escreva instruções úteis, e quando possível peça feedback das pessoas que leram o Manual.
      • Se a tarefa for um passo a passo, explique em sentenças curtas com fotos ou diagramas o que deve ser feito na sequência correta.
      • Faça reuso de conteúdo de forma inteligente. Se uma determinada tarefa for um pré-requisito que pode ser reutilizado, descreva o pré-requisito no Guia de Pré-Requisitos, depois somente mencione a página do pré-requisito, quando for necessário utilizá-lo novamente.

        7. Requisitos Legais

        As informações de perigos e riscos de utilização de determinado produto devem aparecer no manual de forma clara e chamativa por exemplo, com ícones, cores, letra em negrito. O texto também deve ser fácil de entender.

        Muitas empresas para se protegerem legalmente iniciam o manual com páginas de recomendações e cuidados.  O manual deve ter as recomendações, mas devemos ser coerentes e manter um bom senso na quantidade e no tipo de recomendação.

        Antes de iniciar a elaboração do Manual verifique se é necessário seguir alguma norma da empresa ou do local.

        A elaboração de um bom Manual não é uma tarefa fácil, requer pesquisa, planejamento, conhecimento do assunto que será abordado, entre outros detalhes como apresentação e distribuição, mas sempre é bom conhecermos algumas dicas que podem ser seguidas durante a elaboração do Manual, para termos um bom resultado junto ao cliente.

        Posts Relacionados
        10 Cuidados ao Utilizar Imagens em Documento Técnico

        10 de abril de 2017

        10 Cuidados ao Utilizar Imagens em Documento Técnico

        A utilização de imagens em documentos técnicos apresenta grandes desafios independentemente do formato de apresentação do documento, seja impresso, em arquivo, em um site, em um celular ou tablet.

        Na grande maioria dos documentos técnicos existem várias imagens para facilitar a compreensão do texto. Uma imagem pode simplificar o entendimento de determinado processo ou mesmo facilitar a localização de algum recurso.

        seleção de imagem


        Neste post vamos listar alguns desafios e cuidados que devemos ter ao utilizar imagens em documento técnico.

        1. Armazenamento dos Arquivos de Imagem

        Quando escrevemos um documento técnico, por exemplo, um manual de usuário de um aplicativo, podemos capturar as imagens das telas e ir “colando” diretamente no documento, sem se preocupar em armazenar estas imagens para edição posterior. Se o aplicativo sofrer alterações podemos capturar a imagem novamente e refazer o processo, por isto às vezes não pensamos em armazenar a imagem em um local separado.

        Mas e se precisarmos da imagem novamente para utilizar em outro documento, ou se precisarmos de partes da imagem para fazer um passo a passo. Este é somente um exemplo que indica a importância de armazenar em um local separado todas as imagens utilizadas no documento.

        2. Utilizar Imagens Vetoriais x Não Vetoriais

        Podemos dividir os tipos de imagens utilizados em documentos técnicos como vetoriais e não vetoriais.

        As imagens vetoriais são compostas por pontos, linhas, formas, polígonos entre outros elementos os quais são baseados em expressões matemáticas. Este tipo de imagem por ser baseada em vetores são mais leve e podem ser ampliadas e reduzidas sem perder a qualidade. Um exemplo de imagem vetorial utilizada em navegadores e recomendada pela W3C é o formato SVG (Scalable Vector Graphics). O formato SVG utiliza a linguagem XML para descrever de forma vetorial desenhos e gráficos.

        As imagens não vetoriais são compostas por pontos diferenciados por sua cor. Podemos citar como imagens não vetoriais mais comuns as imagens com formato JPG, BMP, PNG, GIF entre outras. Estas imagens possuem um tamanho de arquivo maior e perdem a qualidade quando redimensionadas.

        Uma situação comum que acontece em documentos técnicos são as atualizações do produto, processo ou aplicativo. Nestes casos a imagem precisa ser atualizada. É neste momento que vemos a importância de utilizar imagens vetoriais, quando possível. Nem sempre é possível utilizar imagens vetoriais como, por exemplo, em manuais de software. Nestes casos as imagens são capturas das telas do aplicativo, que são gravadas em formato não vetorial.

        Para as imagens não vetoriais a substituição é o mais comum, às vezes é possível alterar a imagem dependendo das modificações do aplicativo, mas redimensionamento da imagem pode ser um problema, já que a cada vez que redimensionamos a imagem, ela perde a qualidade, principalmente o formato JPG.

        Para as imagens vetoriais podemos fazer as alterações necessárias diretamente na imagem e gerar a imagem final alterada em diversos formatos e dimensões, sem a perda da qualidade da imagem.

        Portanto um cuidado que podemos ter é utilizar, quando possível, imagem vetorial e a partir destas imagens gerar o não vetorial para os diversos tipos de publicações.

        3. Imagens Utilizadas como Referência

        Em alguns tipos de plataformas onde são apresentados os documentos técnicos, como navegadores que utilizam HTML ou documentos desenvolvidos com DITA, não permitem a inserção direta da imagem e sim uma referência do local onde está a imagem.

        Neste formato de documentação é necessário ter muito cuidado para controlar o local das imagens. As atualizações das imagens não são feitas no documento e sim diretamente no arquivo da imagem, por este motivo o controle da localização da imagem é muito importante para evitar problemas como exibir a imagem correta, ou não exibir nenhuma imagem, porque o arquivo foi retirado ou alterado de sua localização original.

        4. Publicação das Imagens

        Cada plataforma de publicação de documento com imagens pode aceitar somente alguns formatos específicos de imagem, por exemplo, o formato SVG é relativamente novo e, por exemplo, no caso do Internet Explorer funciona somente a partir de versão 9. Se você precisa publicar em plataformas mais antigas ou mesmo plataformas que não aceitam este formato, é necessário converter a imagem em outros formatos como, por exemplo, JPG ou PNG.

        Portanto é sempre bom ter a mesma imagem em vários formatos para o caso de publicar o documento em diferentes plataformas.

        5. Reuso da Mesma Imagem

        Utilizar a mesma imagem para explicar situações diferentes é tentador, mas o usuário pode ficar confuso se a imagem possuir muitos detalhes que não são relevantes ao contexto em questão. Mesmo que existam setas ou outras indicações o usuário pode não entender. Nestes casos o melhor é cortar a imagem e exibir somente a parte relevante ao assunto. Os usuários estão mais propensos a perdoar um detalhe irrelevante que está faltando, do que visualizar muitos detalhes que não existem em sua aplicação e causar dúvidas na utilização.

        6. Controle de Versão de Imagem

        Em um documento técnico que possui controle de versão, as imagens existentes no documento não são controladas da mesma forma como o texto, portanto não dá para saber qual a versão de imagem está no documento.

        Para controlar a versão da imagem pode-se utilizar um aplicativo de controle de versão normal, mas as imagens vão ter que ter o seu próprio controle de versão, independente do documento. No caso de imagens de manual de usuário possuir as várias versões das imagens pode ser útil para identificar as diferentes versões do aplicativo e possível evolução do mesmo.

        7. Tamanho da Imagem

        O tamanho e resolução da imagem são importantes tanto no documento como no ambiente de publicação. Quando estamos trabalhando com a ferramenta de criação e edição de imagem não existe uma preocupação com o tamanho final da imagem, porque queremos obter uma imagem com a melhor resolução possível, mas dependendo do documento e de onde o documento vai ser publicado torna-se necessário tomar alguns cuidados.

        Por exemplo, inserir documentos com alta resolução e com o tamanho do arquivo muito grande em documentos Word, pode ser um problema. Primeiro o arquivo Word final vai ficar com um tamanho muito grande dificultando o manuseio do arquivo e armazenamento, sem falar na dificuldade de enviar o arquivo para revisão em outros departamentos.

        Se a publicação final for um documento impresso em impressora comum, não é necessário que as imagens sejam em alta resolução, porque a impressora não vai reproduzir toda a resolução. Se for um documento PDF o tamanho da imagem também é importante para não termos um arquivo muito grande.

        Se a publicação for feita na internet, temos o problema de velocidade e quantia de bytes necessários para fazer o download e exibir a imagem, portanto neste caso também não é necessário termos figuras com uma resolução muito alta.

        De uma forma geral após a elaboração da imagem é necessário verificar onde vai ser publicada para decidir o tamanho e resolução finais da imagem.

        8. Atualização de Imagens

        A atualização de imagens podem seguir dois processos diferentes, dependendo de como foi utilizada no documento. No caso da imagem estar inserida diretamente no documento a atualização de imagem é bem trabalhoso, porque é necessário alterar cada imagem no documento.

        No caso de documentos que possuem a referência da imagem pode ser um pouco menos trabalhoso, porque precisamos alterar a imagem somente no local físico. Como o documento possui uma referência, ele acaba sempre exibindo a imagem mais atualizada, se existir um processo bem definido de atualização destas imagens.

        9. Controle de Qualidade das Imagens no Documento 

        O controle de qualidade das imagens no documento é muito importante para garantir a qualidade final, por isto sempre verifique todas as imagens inseridas no documento, e em todas as plataformas de publicação. Às vezes algum formato não exibe corretamente em determinada plataforma, ou pior no caso de inserirmos somente a referência da imagem, é importante verificar a exibição da imagem, se ficou com uma boa qualidade e se a referência está correta.

        10. Tradução de Texto em Imagens

        Um problema comum em documentos é a utilização do documento em várias línguas. Neste caso o documento deve passar pelo processo de tradução, mas e as imagens como ficam?

        Se a imagem possui texto no caso de um documento que deve ser feito em várias línguas, gera um problema, porque é necessário fazer a tradução do texto das imagens e depois alterar a imagem para inserir o texto. Neste caso podemos ter uma imagem para cada língua do documento.

        Uma forma de minimizar este problema é procurar trabalhar com imagens com pouco ou sem texto se possível, ou se for necessário indicar alguma informação textual, podemos indicar a informação com números e criar uma tabela que referencia o número com o texto.

        Para elaborar um documento técnico dependendo da aplicação, além do conteúdo em termos de texto é necessário fazer um bom planejamento sobre o a criação e gerenciamento das imagens, porque as imagens são parte importante do bom resultado da usabilidade do documento.

        Posts Relacionados:
        Referência:


        2 de junho de 2016

        A Importância do Manual de Usuário

        Manual de Usuário


        Quando um aplicativo está pronto para lançamento, independentemente do tipo, seja ele para computador, tablet ou celular, é importante para os clientes terem acesso às informações do aplicativo. Antes de adquirir ou mesmo utilizar um aplicativo, o cliente precisa ter acesso pelo menos às informações básicas como, instalação, configuração, utilização, entre outros detalhes. Neste caso o manual de usuário é uma forma importante de se fazer a propaganda.

        No caso de aplicativos que fornecem a possibilidade de se fazer o download e utilizar por um período, antes de fazer a aquisição, geralmente o cliente procura por informações como, por exemplo, as telas, como funciona e os recursos principais.

        Estas informações iniciais já representam uma parte do manual, ou seja, um guia rápido de informações de funcionamento e utilização do aplicativo. A partir destas informações o cliente decide se vale a pena ou não adquirir o produto.

        Portanto inicialmente o cliente precisa de informações claras, objetivas e simples para um primeiro contato. Depois desta fase ele precisa de informações mais detalhadas, onde possa tirar as dúvidas ou conhecer melhor as funcionalidades mais avançadas.

        Nos dias de hoje, o termo manual não tem o mesmo significado que antigamente. Até bem pouco tempo atrás quando um aplicativo era adquirido, juntamente acompanhava um manual ou guia rápido. Este manual vinha na forma impressa e depois no formato digital em PDF.

        Atualmente os manuais evoluíram juntamente com os aplicativos, e são apresentados em vários outros formatos além do PDF. Temos as informações diretamente na web, geralmente no site do produto, e em outros formatos específicos para celulares, tablets e outros tipos de dispositivos de leitura.

        Além disto, o manual também não é mais uma espécie de “livro”, onde todas as informações estão em um único local de uma forma sequencial. Hoje as informações estão separadas em partes, por exemplo, uma parte mais simplificada acompanha o aplicativo, a explicação mais detalhada está no site ou é fornecido um guia completo onde o cliente pode fazer o download para leitura no computador, tablet ou celular.

        Um exemplo é o manual do iPhone. Quando você adquiri um iPhone o manual não acompanha o produto, mas você pode ter acesso ao manual completo de utilização do iPhone, através do iBooks que é uma aplicação que já vem instalada no dispositivo.

        Com a diversidade de dispositivos utilizados, a informação deve estar disponível em vários formatos específicos para cada dispositivo.

        O grande desafio de hoje, após a elaboração do conteúdo para o manual de usuário, é gerar a informação nos vários formatos necessários para atender a maioria dos dispositivos de forma a apresentar uma boa comunicação visual.

        Posts Relacionados