Aula 1 - Interfaces de Sistemas Computacionais

Prévia do material em texto

<p>INTERFACES</p><p>DE SISTEMAS</p><p>COMPUTACIONAIS</p><p>Prof. Dr. Alfredo BOENTE</p><p>alfredo.boente@uva.br</p><p>APRESENTAÇÃO</p><p>PROFESSOR X</p><p>ALUNO</p><p>Currículo 2022</p><p>TRIMESTRAL</p><p>Apresentação do Professor</p><p>Alfredo Boente:</p><p>alfredo.boente@uva.br</p><p>EMENTA DA</p><p>DISCIPLINA</p><p>EMENTA:</p><p>- Introdução à Comunicação Visual, Interface e</p><p>Interação.</p><p>- Conceitos e elementos da área de Interação</p><p>Humano-Computador (IHC).</p><p>- Design orientado à experiência do Usuário</p><p>(UX Design).</p><p>- Design de Interação.</p><p>- Design para dispositivos Móveis.</p><p>- Interface Orientada ao Usuário X</p><p>Usabilidade.</p><p>- Novas perspectivas para interação humano-</p><p>computador.</p><p>COMPETÊNCIAS</p><p>E HABILIDADES</p><p>OBJETIVO DA</p><p>DISCIPLINA</p><p>COMPETÊNCIAS E HABILIDADES:</p><p>Criação de protótipos de interfaces interativas</p><p>de acordo com as inovações tecnológicas e</p><p>centradas no usuário.</p><p>OBJETIVO DA DISCIPLINA:</p><p>Ao final desta disciplina, espera-se que o aluno</p><p>tenha aprendido a: sintetizar o conceito de</p><p>design interativo de produtos de software e</p><p>hardware a partir do uso de práticas da</p><p>Engenharia de Usabilidade e Design Centrado</p><p>no Usuário e Design de Interações.</p><p>REFERÊNCIAS</p><p>BIBLIOGRÁFICAS</p><p>BIBLIOGRAFIA RECOMENDADA:</p><p>PLANEJAMENTO</p><p>DAS AULAS</p><p>PLANEJAMENTO DAS AULAS:</p><p>PLANEJAMENTO DAS AULAS:</p><p>CRITÉRIOS DE</p><p>AVALIAÇÃO E</p><p>APROVAÇÃO</p><p>CRITÉRIOS DE AVALIAÇÃO:</p><p>A4: Atividade Avaliativa .............................. 10,0</p><p>CRITÉRIOS DE APROVAÇÃO:</p><p>A4 ≥ 6,0 e mínimo de 75% de presença</p><p>Então, o aluno estará APROVADO</p><p>Observação: Não existe 2ª chamada para a</p><p>Atividade Avaliativa (A4)</p><p>SISTEMA DE</p><p>AVALIAÇÃO</p><p>SISTEMA DE AVALIAÇÃO:</p><p>Elaborar um projeto para desenvolvimento de um</p><p>protótipo da interface com o usuário, para certo</p><p>WebSite ou WebSystem, responsivo, Mobile App,</p><p>baseado em UX e UI, tema a sua escolha, que tenha:</p><p> BrainStorming</p><p> Mind Map</p><p> Card Sorting</p><p> Site Map</p><p> Wireframe</p><p> Prototype</p><p>A documentação do projeto (BrainStorming, Mind</p><p>Map, Card Sorting, Site Map, Wireframe) deve ser</p><p>entregue em forma de apresentação (PPT).</p><p>O protótipo navegável (Prototype) deve ser entregue</p><p>como arquivo Figma (.fig).</p><p>Semana 01</p><p>Introdução à IHC</p><p>Introdução</p><p>Comunicação Visual</p><p>Introdução</p><p>Comunicação Visual</p><p>SIMPLICIDADE E LIXO VISUAL</p><p>1. SIMPLES;</p><p>2. O MAIS SINTÉTICA POSSÍVEL;</p><p>3. OBJETIVA.</p><p>Na Comunicação Visual é essencial a experiência e o conhecimento das convenções estabelecidas.</p><p>O “design” eficaz resulta da aplicação do seguinte princípio:</p><p>“A forma respeita/segue a função”</p><p>A Comunicação Visual deve ser:</p><p>Introdução</p><p>Comunicação Visual</p><p>ELEMENTOS DA COMUNICAÇÃO</p><p>1. A ELEGIBILIDADE É MUITO IMPORTANTE;</p><p>2. DEVE-SE APENAS UTILIZAR UM OU DOIS TIPOS DE LETRAS POR DOCUMENTO;</p><p>3. A ESCOLHA DO TIPO É CONDICIONADA PELA VISUALIZAÇÃO EM TELA DE COMPUTADOR OU</p><p>EM PAPEL .</p><p>O tamanho efetivo varia conforme a fonte utilizada:</p><p>Tipos de Letras:</p><p>Introdução</p><p>Comunicação Visual</p><p>ELEMENTOS DA COMUNICAÇÃO</p><p>A relação entre as cores pode dificultar a leitura sendo recomendável o uso de cores</p><p>complementares e/ou de gamas tonais da mesma cor. Existe uma associação ao significado da cor,</p><p>que varia de cultura para cultura. Uma parte significativa da população tem problemas de daltonismo</p><p>e as cores nunca são percebidas da mesma forma por todos.</p><p>Cores:</p><p>Introdução</p><p>Comunicação Visual</p><p>ELEMENTOS DA COMUNICAÇÃO</p><p>1. DENOTATIVAS E CONOTATIVAS? SÃO NECESSÁRIAS QUANDO?</p><p>2. QUAL A RESOLUÇÃO INDICADA? QUAL O TAMANHO? AS CORES?</p><p>3. AS IMAGENS PODEM SUBSTITUIR PALAVRAS.</p><p>O tamanho e a cor são decisivos</p><p>na importância da imagem.</p><p>Imagens:</p><p>Introdução</p><p>Comunicação Visual</p><p>ELEMENTOS DA COMUNICAÇÃO</p><p>1. O MAIS LIMPO POSSÍVEL;</p><p>2. EVITAR RUÍDO VISUAL.</p><p>Confuso (ruído visual) Elucidativo</p><p>Gráficos:</p><p>Introdução</p><p>Comunicação Visual</p><p>FORMATOS E APLICAÇÕES</p><p>1. PAPEL;</p><p>2. TELA</p><p>CORES PRIMÁRIAS:</p><p>LUZ: RGB (Red, Green, Blue)</p><p>PIGMENTO: CMYK (Cyan, Magenta, Yellow, Black)</p><p>Suportes:</p><p>Introdução</p><p>Comunicação Visual</p><p>FORMATOS E APLICAÇÕES</p><p>Adobe Acrobat: O PDF é um formato versátil, multi-plataforma e que garante fiabilidade na impressão e na</p><p>apresentação, podendo ser produzido a partir da maior parte das aplicações. É o formato mais</p><p>aconselhado para troca de documentos e o Acrobat Reader é gratuito.</p><p>Macromedia Freehand, Corel Draw, Adobe Illustrator, Adobe Indesign, Autodesk AutoCad:</p><p>Ferramentas gráficas especializadas que facilitam o controlo de impressão.</p><p>Microsoft PowerPoint: Formato muito divulgado que começou por ter como objetivo a apresentação de</p><p>dispositivos electrônicos mas é também utilizado como aplicação gráfica para impressões, embora com</p><p>algumas limitações;</p><p>Microsoft Word: Processador de texto, com algumas limitações ao nível da manipulação na área da</p><p>paginação.</p><p>Aplicações Aconselhadas:</p><p>Introdução</p><p>Comunicação Visual</p><p>QUESTÕES A CONSIDERAR NA APLICAÇÃO PRÁTICA</p><p>Dimensões ISO:</p><p>Introdução</p><p>Comunicação Visual</p><p>QUESTÕES A CONSIDERAR NA APLICAÇÃO PRÁTICA</p><p>Folha de Estilo:</p><p>Em aplicações editoriais ou de paginação existe a folha de estilos ou página mestra, em que as guias, tipo e corpo</p><p>de texto, cores etc., estão definidos para todo o documento.</p><p>Introdução</p><p>Comunicação Visual</p><p>QUESTÕES A CONSIDERAR NA APLICAÇÃO PRÁTICA</p><p>Compressão de Imagens:</p><p>Para que as imagens utilizadas não tornem o</p><p>documento demasiado grande devem ter o</p><p>tamanho e resolução adequados. As imagens</p><p>devem ser ajustadas previamente num programa</p><p>de edição de imagem como o Adobe Photoshop,</p><p>embora algumas aplicações de paginação</p><p>permitam alterar a sua dimensão.</p><p>Introdução</p><p>Comunicação Visual</p><p>Introdução</p><p>Comunicação Visual</p><p>COMUNICAÇÃO VISUAL FOCADA NO PROBLEMA DO NEGÓCIO</p><p>Análise de Negócios:</p><p>Análise de negócios pode ser definida como a prática de facilitação da mudança no contexto organizacional,</p><p>através da identificação de necessidades e recomendação de soluções para entregar valor às partes interessadas.</p><p>Análise de Requisitos:</p><p>Análise de Requisitos ou Engenharia de Requisitos é um aspecto importante no Gerenciamento de Projetos, é a</p><p>responsável por coletar dados indispensáveis, necessários, exigências de que o usuário necessite para solucionar</p><p>um problema e alcançar seus objetivos.</p><p>Introdução</p><p>Comunicação Visual</p><p>COMUNICAÇÃO VISUAL FOCADA NO PROBLEMA DO NEGÓCIO</p><p>Um Projeto de Comunicação Visual (Visual Design) para Interfaces de Sistemas Computacionais,</p><p>busca entender quais os requisitos necessários e, compreender o foco do negócio do cliente, para o</p><p>desenvolvimento de um Visual Design voltado para o cliente.</p><p>Análise de Negócios x Análise de Requisitos x Projeto de Comunicação Visual:</p><p>Introdução</p><p>Interação Humano-Computador</p><p>Introdução</p><p>Interação Humano-Computador</p><p>Introdução</p><p>Interação Humano-Computador</p><p>Introdução</p><p>Interação Humano-Computador</p><p>Introdução</p><p>Interação Humano-Computador</p><p>Introdução</p><p>Interação Humano-Computador</p><p>Introdução</p><p>Interação Humano-Computador</p><p>Introdução</p><p>Interação Humano-Computador</p><p>Introdução</p><p>Interação Humano-Computador</p><p>Introdução</p><p>Interação Humano-Computador</p><p>Introdução</p><p>Interação Humano-Computador</p><p>Introdução</p><p>Interação Humano-Computador</p><p>Introdução</p><p>Interação Humano-Computador</p><p>Introdução</p><p>Interação Humano-Computador</p><p>Introdução</p><p>Interação Humano-Computador</p><p>Introdução</p><p>Interação Humano-Computador</p><p>Introdução</p><p>Interação Humano-Computador</p><p>Introdução</p><p>Interação Humano-Computador</p><p>Introdução</p><p>Interação Humano-Computador</p><p>Introdução</p><p>Interação Humano-Computador</p><p>Introdução</p><p>Interação Humano-Computador</p><p>Introdução</p><p>Interação Humano-Computador</p><p>Introdução</p><p>Interação Humano-Computador</p><p>Introdução</p><p>Interação Humano-Computador</p><p>Introdução</p><p>Interação Humano-Computador</p><p>Introdução</p><p>Interação Humano-Computador</p><p>Introdução</p><p>Interação Humano-Computador</p><p>Introdução</p><p>Interação Humano-Computador</p><p>Introdução</p><p>Interação Humano-Computador</p><p>Introdução</p><p>Interação Humano-Computador</p><p>Introdução</p><p>Interação Humano-Computador</p><p>Introdução</p><p>Interação Humano-Computador</p><p>Introdução</p><p>Interação Humano-Computador</p><p>Introdução</p><p>Interação</p><p>Humano-Computador</p><p>Introdução</p><p>Interação Humano-Computador</p><p>Introdução</p><p>Interação Humano-Computador</p><p>Introdução</p><p>Interação Humano-Computador</p><p>Introdução</p><p>Interação Humano-Computador</p><p>Introdução</p><p>Interação Humano-Computador</p><p>Introdução</p><p>Interação Humano-Computador</p><p>Introdução</p><p>Interação Humano-Computador</p><p>Introdução</p><p>Interação Humano-Computador</p><p>Introdução</p><p>Interação Humano-Computador</p><p>Introdução</p><p>Interação Humano-Computador</p><p>https://www.youtube.com/watch?v=4Ox6nFfkOkI</p><p>Introdução</p><p>Interação Humano-Computador</p><p>https://www.youtube.com/watch?v=a1MzIkEe6-M</p><p>Introdução</p><p>Interação Humano-Computador</p><p>ATENÇÃO:</p><p>É importante lembrar que no momento inicial do seu projeto todas as ideia surgidas têm</p><p>validade pois, são de extrema importância para o entendimento do que deve e não deve</p><p>ser, efetivamente incluída para a realização do mesmo.</p><p>As boas práticas indicam o uso da técnica de tempestade de ideias, tecnicamente</p><p>conhecida como brainstorming, onde, todas as pessoas envolvidas deverão expor suas</p><p>ideias acerca do tema escolhido.</p><p>A técnica de brainstorming pode ser adotada e registrada, tanto de forma manual, escrita</p><p>em papel, quanto por meio de ferramenta de software (software para brainstorming).</p><p>Introdução</p><p>Interação Humano-Computador</p><p>Acesse o www.miro.com/app/dashboard, para usar as ferramentas que veremos a seguir:</p><p>Introdução</p><p>Interação Humano-Computador</p><p>BrainStorming</p><p>Brainstorming é uma técnica</p><p>para estimular o surgimento</p><p>de soluções criativas. Dito como</p><p>a Tempestade de Ideias, é feita</p><p>em uma reunião e permite o</p><p>compartilhamento de ideias,</p><p>soluções e insights valiosos</p><p>para um projeto ou empresa.</p><p>(Cayo Woebcken, 2019)</p><p>Introdução</p><p>Interação Humano-Computador</p><p>ATIVIDADE ASSISTIDA</p><p>Escolha uma dupla de trabalho, e defina um tema para desenvolvimento de um projeto,</p><p>que deverá ser validado pelo professor da disciplina, e que tenha como objetivo</p><p>desenvolver um protótipo da interface com o usuário, para certo WebSite ou</p><p>WebSystem, responsivo, Mobile App.</p><p>Então, inicie seu projeto com um BrainStorming baseado na sua proposta de trabalho.</p><p>Introdução</p><p>Interação Humano-Computador</p><p>ATIVIDADE COMPLEMENTAR</p>