<!DOCTYPE article PUBLIC "-//NLM//DTD JATS (Z39.96) Journal Archiving and Interchange DTD v1.0 20120330//EN" "JATS-archivearticle1.dtd">
<article xmlns:xlink="http://www.w3.org/1999/xlink">
  <front>
    <journal-meta />
    <article-meta>
      <title-group>
        <article-title>Design interativo m-learning para ensino a distância</article-title>
      </title-group>
      <contrib-group>
        <contrib contrib-type="author">
          <string-name>José Antonio Bezerra Junior</string-name>
        </contrib>
      </contrib-group>
      <pub-date>
        <year>2015</year>
      </pub-date>
      <fpage>406</fpage>
      <lpage>414</lpage>
      <abstract>
        <p>Introducing the developing interactive design m-learning distance education: tablets and smartphones. Aiming at a harmonious and dynamic result, which awaken the student's interest and facilitate their learning through a cognitive usability and interactivity. For its preparation will be used ADOBE programs: Indesign, Illustrator, Edge Animation, AppStore, Google Play. Resumo. Apresentando o desenvolvimento em design interativo m-learning de ensino a distância: tablets e smartphones. Visando um resultado harmonioso e dinâmico, que desperte o interesse do aluno e facilite sua aprendizagem através de uma usabilidade cognitiva e da interatividade. Para sua elaboração serão usados programas da ADOBE: Indesign, Ilustrator, Edge Animation, AppStore, Google Play.</p>
      </abstract>
    </article-meta>
  </front>
  <body>
    <sec id="sec-1">
      <title>1. Introdução</title>
    </sec>
    <sec id="sec-2">
      <title>2. Objetivo</title>
      <p>processo de aperfeiçoamento, além de novos recursos e potencialização na comunicação
durante o processo de aprender, ensinar, produzir e compartilhar, tornando-se cada vez mais
interativo.</p>
      <p>O Design em questão corresponde, em sua base de desenvolvimento, a algumas
plataformas digitais para m-learnirng, mas pensando em uma estrutura de Design pedagógico
desde a construção, revisão, edição, publicação e aplicação.</p>
      <p>Ressalta-se, também, o papel do designer na elaboração de um Design gráfico, não
somente o layout, a seguir mostrando as dimensões da experiência de leitura em livro digital
interativo na ilustração abaixo:</p>
      <p>Fonte: autor, 2015
3. Justificativa
O Design em análise foi desenvolvido para uso em Ensino a Distância (EaD), visando à
interatividade e um melhor aprendizado. Para isso, utiliza-se de ferramentas e buscando
alcançar uma otimização dos aspectos cognitivos e uma maior atratividade para os usuários,
onde na figura 1 é apresentado o primeiro desenho de uma aula.</p>
      <p>Figura 1: Capa de uma disciplina no iPad e Iphone. 1. Autores / 2. Navageção da
disciplina onde desliza para cima e para baixo / 3. Curso / 4. Vídeo, assuntos abordados.</p>
      <p>Nesta via, é visível que atualmente a sociedade vive no apogeu da era da informação,
quando o aprendizado concorre com várias das novas tecnologias, entre elas as redes sociais,
programas para troca de mensagens.</p>
      <p>Segundo Filatro (2008), no aprendizado eletrônico, a interação não acontece por acaso.
Ela precisa ser intencionalmente planejada e ser expressa visual e funcionalmente na interface
do curso ou unidade de aprendizagem.</p>
      <p>Assim, o design de interação surge como uma ferramenta imprescindível para tornar o
ensino atrativo, fácil e prazeroso para uma geração que já cresce com pleno acesso às
tecnologias inovadoras e com muitas opções de entretenimento e comunicação.</p>
      <p>Dessa forma, sua usabilidade torna-se um atrativo para o uso, através de um design que
gere produtos interativos, que sejam fáceis de aprender a usar e agradáveis para o aluno. Como
mostra a figura 2.</p>
      <p>Figura 2: Apresentação no iPad e Iphone. 1. Navegação onde desliza para cima e para
baixo / 2. Apresentação da disciplina ao chegar no nível ideial / 3. Link de vídeo onde abre uma
nova tela / 4. Orientação de navegação com numeração de páginas.</p>
      <p>Assim como as metas de usabilidade são extraídas em termos de questões específicas,
também são transformadas em critérios de usabilidade. Esses são objetivos específicos que
permitem avaliar se a usabilidade de um produto pode melhorar (ou não) o desempenho de um
usuário. (Rogers, Sharp e Preece, 2013, p. 22)</p>
      <p>O design de interação é uma área recente, que se encontra em pleno desenvolvimento,
sendo um campo propício à criatividade e de fundamental importância no futuro da educação,
propondo novas formas de tornar o ensino mais eficaz e atrativo para um novo tempo e uma
nova geração.
4. Métodos e técnicas utilizados
Resta cristalino que o corpo social está submerso na era do Google, na qual a pesquisa textual
livre e imediata é a forma dominante de recuperação de informações. No entanto, esta não é a
única maneira útil de organizar a informação, e ela não tem limitações. Imagine procurar o
nome de um ator cujo nome não se lembra: não é impossível, mas é preciso um tipo diferente
de pensamento.</p>
      <p>Um obstáculo muito mais difícil está em como usar cadernos – tanto analógicos como
digitais – para gerir o pensamento criativo, sendo um dos mecanismos fundamentais da
criatividade a colisão acidental de ideias.</p>
      <p>Para orientar o processo de desenvolvimento do Design interativo, adotou-se a Isto é
Design Thinking de Serviços e Design de Interação, a qual apresenta flexibilidade em sua
estrutura, permitindo o andamento simultâneo das etapas e fases, a seguir visualizadas.</p>
      <p>Fonte: autor, 2015</p>
      <p>No desenvolvimento dessa metodologia foi imprescindível entender os usuários para
demonstrar clareza sobre o objetivo principal, tendo em vista o desenvolvimento do layout
interativo com uma usabilidade que visa a assegurar que os conteúdos sejam fáceis de aprender,
eficazes e agradáveis – na perspectiva do usuário, de modo a permitir que estes realizem suas
atividades no trabalho, na escola e no cotidiano.</p>
      <p>O processo de desenvolvimento mostra na ilustração a seguir como será dividido e
definido em três etapas, objetivando êxito no resultado, e a metodologia será abordada por
completo. Com o objetivo a eficácia da usabilidade, interatividade e cognição na sua capacidade
de produzir resultados. Seus critérios de eficácia são: minimalismo, alinhamento, originalidade,
denotação, conotação, facilidade de uso, memorização, potencial de design e permanência.</p>
      <p>Fonte: autor, 2015</p>
      <sec id="sec-2-1">
        <title>4.1. Design</title>
        <p>O design vem sendo contextualizado e particionado em diversas áreas de conhecimento, entre elas
o design gráfico, todas presentes no dia a dia, ficando responsável em facilitar a comunicação
existente através de formas, cores e linhas.</p>
        <p>Neste caminho, o design de interação será responsável por equilibrar um sistema que
possua uma boa comunicação, através do design gráfico, mas que não seja apenas
operacional, e, sim, funcional. Neste contexto, utiliza-se a usabilidade, a interatividade e a
cognitividade, que permitem uma facilidade de uso entre sistema e usuário. Isso é possível
d e ser elaborado para que o design emocional possa, por sua vez, influenciar no equilíbrio
do sistema, permitindo-lhe analisar os sentimentos negativos ou positivos que possuam
relações. Em suas cores, que influenciam na capacidade de transmissão e sentimentos, as
tipografias possuem grandezas que podem e devem estar de acordo com os contextos,
mantendo uma contínua comunicação para elaboração de um bom projeto de design.</p>
      </sec>
      <sec id="sec-2-2">
        <title>4.2. Usabilidade</title>
        <p>Nos dias de hoje, é alto o grau de usabilidade digital com o avanço tecnológico e o modo como
a interação é encadeada, muitas vezes em termos do desenho do diálogo entre o usuário e o
serviço online. No design de interação, a usabilidade é pensada enquanto arquitetura de
interação, e descreve as divisões funcionais entre as diferentes partes de um projeto, bem como
desenvolve o layout e sua funcionalidade. Este Design precisa ser estruturado e descrito como
um mapa mental para os usuários e, idealmente, a estrutura das páginas deve refletir esse
modelo mental. Esta não é uma tarefa fácil de ser realizada, mas existe uma arquitetura de
informações com bons talentos.</p>
        <p>Buscamos inspiração na mudança organizacional e registramos as reflexões sobre
nossas experiências como alunos e professores, incluindo as situações organizacionais
mais complexas. Integramos três práticas mais complexas, que exploramos e
analisamos: a utilização de bases de dados e informações, a comunicação e a
interação, e a construção de conteúdo. (Carvalho, 2010, p. 3)</p>
        <p>Há uma boa maneira de chegar no modelo mental ideal para o usuário, que é criar o
design de um serviço é solicitar a eles sugestões para uma estrutura de página que seja a
melhor e com maior diversidade de métodos disponíveis.</p>
        <p>Existem ainda chaves que abrem os portões dessa usabilidade: frequência, sequência
e importância. Na frequência se fala das coisas que frequentemente o usuário faz: avançar,
voltar, buscar, etc.; esses elementos devem ter uma posição de destaque, da sequência se
destacando dentro da sequência. Esta estabelece que as atividades possam ocorrer na ordem,
apresentadas de maneira sequencial: você paga uma conta bancária no fim da transação, e
não no meio. Assim, o contexto atual mostra que as informações importantes precisam ser
comunicadas com clareza e na hora certa: se o professor faz uma prova e o aluno não estudou
o conteúdo pensando que já sabia de todo o programa, não dando a devida importância às
explicações, era para saber disso logo no início das aulas.</p>
        <sec id="sec-2-2-1">
          <title>4.3. Design de Interação</title>
          <p>É responsável por criar experiências de usuário que melhorem e ampliem a maneira como as
pessoas trabalham, se comunicam e interagem. Enfatiza em diferentes aspectos o que se está
projetando: interface do usuário, design de software, design centrado no usuário, design de
produto, web-design de experiência e design de sistemas interativos.</p>
          <p>Designers precisam saber muitas coisas diferentes sobre usuários, as tecnologias e as
interações entre eles, a fim de criarem experiências de usuário eficazes. O design de
interação é em grande parte realizado por equipes multidisciplinares, em que são
reunidas as habilidades de engenheiros, designers, programadores, psicólogos,
antropólogos, sociólogos, artistas, fabricantes de brinquedos e outros. (Rogers, Sharp,</p>
          <p>Preece, 2013, p. 11 e 12)</p>
          <p>Os benefícios de reunir pessoas com diferentes formações e treinamentos traduz-se num
grande potencial, gerando muitas e grandes ideias, desenvolvendo métodos novos e produzindo
designs mais criativos e originais.</p>
        </sec>
        <sec id="sec-2-2-2">
          <title>4.4. Aspectos Cognitivos</title>
          <p>Mas, afinal, para que serve a cognição e seus aspectos? Nos seus mais variados tipos, como
pensar, lembrar, aprender, sonhar acordado, tomar decisão, ver, ler, escrever e falar? Norman
(1993) mostra dois modos mais gerais: cognição experiencial e cognição reflexiva.</p>
          <p>A cognição externa explica os processos cognitivos envolvidos quando interagimos
com diferentes representações externas (Sacaife e Rogers, 1996). Um dos principais
objetivos é explicar os benefícios cognitivos de se utilizar representações diferentes
para atividades cognitivas e para os processos envolvidos. (Rogers, Sharp, Preece,
2013, p. 93)</p>
          <p>A primeira é um estado de espírito e a primeira fase em que os indivíduos percebem,
agem e têm reações a eventos ao seu redor de forma eficaz e sem esforço, exigindo um certo
nível de competência e de engajamento. Já a reflexiva envolver pensar, comparar e tomar
decisões. Esse tipo é o que leva o designer a ter novas ideias e criatividade.
4.5. Design Gráfico
Elaborado no Indesign para formato de tabletes e smartphones, no qual temos o uso de
tipografias, cores e formas minimalistas, sendo agradável e com usabilidade fácil.</p>
          <p>Este design foi desenvolvido para uso em Ensino a Distância visando a interatividade e o
aprendizado. Para isso foram usadas técnicas cognitivas.
5. Descrição do produto ou processo
Decidido o tema do Design, é necessário compor o conteúdo. Para redigir os textos foi preciso
fazer comparações entre assuntos existentes, pois as informações encontradas nas fontes de
pesquisa estavam fragmentadas. Após a análise do levantamento das informações foi possível
realizar a estrutura dos capítulos visando a melhor sequência para facilitar a compreensão do
leitor. Dessa forma, o conteúdo foi dividido em cinco capítulos: Contexto, Princípios
Caligráficos, Princípios Tipográficos, Princípios da Imagem e Processo. O primeiro, introduz
o assunto com informações essenciais seguida de uma contextualização até os dias de hoje.</p>
          <p>Este processo foi desenvolvido e diagramado em programas da ADOBE por não ser
preciso um programador ao lado. Foi usado o Indesign, Ilustrator, Edge Animation, para deixar
o design interativo e na nuvem da Adobe é preciso o Digital Publishing Suite (DPS).</p>
          <p>O Adobe Digital Publishing Suite é um conjunto de ferramentas e serviços que
permite que editores criem e distribuam publicações em dispositivos tablet, como o
Apple iPad. Essas publicações digitais são chamadas de fólios.</p>
          <p>Com o InDesign, você pode criar fólios e visualizá-los em um dispositivo tablet e em
um pré-visualizador de área de trabalho. Entretanto, uma assinatura do Digital
Publishing Suite é necessária para criar um visualizador personalizado. Editores podem
distribuir suas publicações digitais ao enviá-las para a Apple Store ou para o Android
Market. Você pode disponibilizar fólios para um editor que tenha uma assinatura do</p>
          <p>Digital Publishing Suite.1
5. 1. Sentido da navegação e orientação da página
O sentido da navegação foi definido para ser apenas na vertical por considerar que esta ação é
mais espontânea dando sentido de páginas impressas, uma vez que não exige a atenção do
usuário para a continuação em dois sentidos. A orientação da página foi escolhida após testes e
a orientação vertical foi definida pois valoriza a diagramação do conteúdo com predomínio de
textos curtos, com muitas imagens e para melhor aproveitamento da área da tela.
5.2. Escolha dos tipos
As necessidades de leitura e compreensão servem de base para os aspectos visuais das
publicações; sendo assim tipografias foram escolhidas pelas características estéticas e
funcionais. Como requisito, deveriam ser apropriadas para a leitura em tela e contribuir para a
construção da identidade visual do Design interativo sem prejudicar sua leitura quando juntas
na página, deixando o texto confortável para uma leitura agradável e divertida.</p>
          <p>
            O tipo é grande quanto sua aparência. Avalie o tamanho do tipo por sua legibilidade
aparente em um dado tamanho, e não pela aplicação de uma fórmula, como “o texto
deve estar em 10 pontos”. Uma fonte sem serifa em 10 pontos pode ser grande demais;
uma fonte estilo antigo em 10 pontos pode ser pequena demais. Eis uma referência
daquilo que os leitores consideram aceitável.
            <xref ref-type="bibr" rid="ref4">(Samara, 2011, p. 36)</xref>
            1 Extraído do site adobe https://helpx.adobe.com/br/indesign/using/digital-publishing-suite-overview.html. Disponível em 02
out 2015
          </p>
          <p>Assim, foram escolhidas duas famílias tipográficas que justas apresentam contraste de
pesos e formas. Kepler Std, desenhada por Designer, Robert Slimbach, 2007, foi escolhida por
tradicionalmente, os caracteres tipográficos modernos são conhecidos por sua qualidade
intelectual legal, Kepler capta o estilo moderno de uma maneira humanística. Sendo elegante e
requintado, com uma pitada de proporção oldstyle e caligráfico detalhando que lhe empresta o
calor e energia. Museo, desenhada por Designer, Jos Buivenga, 2008, seu Design Museo
parecia um pouco com algum pedaço de fio de metal curvado, trazendo um contraste mais baixo
possível de manter as formas simples.
5.3. Construção do grid
O grid foi construído com base em uma malha de pixels 2 x 2 para facilitar o alinhamento da
tipografia assim como demais elementos da página. Dessa forma, como a resolução da página
para Tablets é de 768 x 1024 px, as margens foram definidas com 120 px para a superior, 164
px para a inferior e, 128 para as laterais.</p>
          <p>Anatomia do GRID, um grid é constituído por um conjunto especifico de relações
alinhamento, que serve como um guia para distribuição de elementos em um formato
de página. Todo grid contém as mesmas partes básicas, não importa o quão complexo
se torne. Essas partes podem ser combinadas conforme a necessidade, ou omitidas da
estrutura global, a critério do designer. (Samara, 2011, p. 68)</p>
          <p>A malha foi dividida em dez colunas com 38 px de espaçamento entre elas para obter uma
estrutura flexível que oferecesse liberdade para desenvolver composições de acordo com a
necessidade do conteúdo da página.
5.4. Conteúdo interativo
O conteúdo interativo está presente em quase todas as páginas do livro, e portanto, precisa ter
boa visibilidade. Para facilitar a identificação do conteúdo interativo na página, uma cor foi
escolhida de modo que apresentasse contraste para que assim, fosse percebida de forma
independente das demais.</p>
          <p>Por mais simples ou complexo que pareça qualquer modelo de ciclo de vida é uma
versão simplificada da realidade. Ele é planejado como uma abstração e, como em
qualquer boa abstração apenas a quantidade de detalhe necessária para a tarefa em
questão será incluída. (Rogers, Sharp, Preece, 2013, p. 331)</p>
          <p>Os desenhos desenvolvidos foram a melhor maneira para garantir e levar aos usuários seu
envolvimento real ao longo desse processo. Dessa forma, podendo obter uma melhor
compreensão dos objetivos usados para os usuários, levando a um produto mais adequado e
usável. Foi determinado diferenciar botões de indicações para deixar mais evidente como
interagir e garantir a usabilidade.
6. Considerações finais
As publicações digitais e interativas para tablets e smartphones agenciam novas formas de
apresentar os conteúdos aos leitores. Assim, a informação da página é dinâmica e o usuário
poderá intervir no conteúdo, manipular, transformar, ou seja, a participação dele faz parte do
processo. No livro digital interativo, o usuário terá expectativas relativas a uma abordagem
dialógica da informação. Nessa experiência de leitura, existem zonas convergentes que podem
estimular a motivação e potencializar o aprendizado.</p>
          <p>Nesta ótica, pensar num mix de usabilidade, interatividade e cognição foi a forma mais
adequada para esse Design. As soluções encontradas e respostas para isso estão em entender o
usuário, sua oferta e sua estratégia, encontrando um ponto de apoio para o Design das interações
no seu serviço e conceito.</p>
          <p>Além disso, os atributos típicos do serviço, como a interação com o usuário, sendo
cordial, por exemplo, objetiva experiências prazerosas e a superação das expectativas, que são
resultados que o designer de interação é capaz de promover. Dessa maneira, o processo
educativo pode ser otimizado pelo uso do design de interação.
7. Referências</p>
        </sec>
      </sec>
    </sec>
  </body>
  <back>
    <ref-list>
      <ref id="ref1">
        <mixed-citation>
          <string-name>
            <surname>BARROS</surname>
          </string-name>
          , Daniela Melaré Vieria.
          <article-title>Guia didático sobre as tecnologias da comunicação e informação, 1</article-title>
          . ed. Rio de Janeiro: Vieira &amp; Lent,
          <year>2009</year>
          .
        </mixed-citation>
      </ref>
      <ref id="ref2">
        <mixed-citation>
          <string-name>
            <surname>CARVALHO</surname>
          </string-name>
          , Fábio Câmara Araújo de.
          <article-title>Tecnologias que Educam: ensinar e aprender com tecnologias da informação e comunicação, 1</article-title>
          . ed. São Paulo: Pearson Prentice Hall,
          <year>2010</year>
          .
        </mixed-citation>
      </ref>
      <ref id="ref3">
        <mixed-citation>
          <string-name>
            <surname>NOBLE</surname>
          </string-name>
          , Ian. Bestley, Russel.
          <source>Pesquisa Visual</source>
          , 2. ed.
          <source>Porto Alegre: Bookman</source>
          ,
          <year>2013</year>
          .
        </mixed-citation>
      </ref>
      <ref id="ref4">
        <mixed-citation>
          <string-name>
            <surname>SAMARA</surname>
          </string-name>
          ,
          <string-name>
            <surname>Timothy. Guia de Design Editorial</surname>
          </string-name>
          <article-title>: manual prático para o design de publicação, 1</article-title>
          . ed.
          <source>Porto Alegre: Bookman</source>
          ,
          <year>2011</year>
          .
        </mixed-citation>
      </ref>
      <ref id="ref5">
        <mixed-citation>
          <string-name>
            <surname>STICKDORN</surname>
            ,
            <given-names>Marc. SCHNEIDER</given-names>
          </string-name>
          , Jakob. Isto é design thinking de serviços: 1. ed.
          <source>Porto Alegre: Bookman</source>
          ,
          <year>2014</year>
          .
        </mixed-citation>
      </ref>
    </ref-list>
  </back>
</article>