Aula 3 - 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>Semana 03</p><p>Interaction Design</p><p>Interaction Design</p><p>Design de Interação</p><p>O que é o design de interação?</p><p>Interaction Design (IxD Design), ou Design de Interação como é conhecido em português, é</p><p>a área de conhecimento responsável por entender, elaborar e melhorar todos os processos de</p><p>interatividade de usuários com sistemas, sejam eles digitais ou físicos.</p><p>Por ser uma profissão relativamente recente, ela exige conhecimentos que vão de design de</p><p>informação e user experience, até programação e desenvolvimento front-end.</p><p>Mostrando-se uma profissão com amplo campo de atuação e inúmeras possibilidades para</p><p>quem se interessa pela área.</p><p>Interaction Design</p><p>Design de Interação</p><p>É de extrema importância para qualquer empresa saber como o consumidor enxerga a sua</p><p>marca e quanto ele gosta do seu produto, já que uma boa visão por parte dos clientes é um</p><p>dos fatores que determina o sucesso de uma organização.</p><p>Além disso, esse conhecimento permite que reclamações sejam atendidas de maneira mais</p><p>fácil.</p><p>Na verdade, diante um mercado altamente competitivo, globalizado e desleal, uma verdadeira</p><p>selva de pedra, as empresas buscam obter Vantagem Competitiva, diante seus concorrentes.</p><p>Interaction Design</p><p>Design de Interação</p><p>https://www.youtube.com/watch?v=O0rlzDmsN18</p><p>https://www.youtube.com/watch?v=O0rlzDmsN18</p><p>Interaction Design</p><p>Design de Interação</p><p>Para que serve o design de interação?</p><p>O design de interação possui diversas finalidades, afinal, isso se dá por qual das suas</p><p>abordagens ele é executado. De maneira geral, existem quatro fundamentações principais.</p><p>A primeira delas é centrada no usuário. Ou seja, o design de experiência (UX) voltado para</p><p>atender demandas do mesmo, com base em suas necessidades. Nessa abordagem, o</p><p>designer deve traduzir no produto ou serviço o interesse do usuário final.</p><p>Já o segundo viés é centrado nas atividades. Os designers de interação tem o papel de criar</p><p>ferramentas necessárias para que as ações e tarefas sejam concluídas. Ou seja, os outros</p><p>setores e gerentes de produtos idealizam, enquanto a área de design de interação precisa</p><p>materializar isso.</p><p>Interaction Design</p><p>Design de Interação</p><p>Para que serve o design de interação?</p><p>A abordagem de sistemas se parece muito com a anterior. No entanto, o foco nesse cenário</p><p>é voltado para componentes globais e interligados. Além disso, o profissional garante que</p><p>todos os requisitos para a execução de um programa sejam cumpridos.</p><p>Por fim, há a abordagem em que a área de design de interação é responsável pela</p><p>idealização e materialização do processo. Com isso, o cliente final passa a ser apenas um</p><p>componente validador do processo, não participando do seu desenvolvimento.</p><p>No entanto, vale ressaltar que independente da abordagem utilizada, o design de interação</p><p>tem um foco em comum: otimizar a interação entre algo e o seu usuário final.</p><p>Interaction Design</p><p>Design de Interação</p><p>Quais as aplicações do design de interação?</p><p>Para qualquer sistema que exija interação, existem possibilidades para a aplicação de</p><p>técnicas de design de interação para melhorar a experiência do usuário. Dentre as suas</p><p>interfaces, é possível utilizá-la para criar ambientes mais interativos, que levem em</p><p>consideração relações emocionais, aspectos sociais e outros milhares de detalhes.</p><p>Dessa forma, o designer de interação cria produtos que sejam úteis no dia a dia de um público</p><p>específico. Para isso, sempre leva em consideração algumas competências principais.</p><p>Vejamos cada uma delas a seguir!</p><p>Interaction Design</p><p>Design de Interação</p><p>Compreensão ou Legibilidade</p><p>Um dos pilares para a aplicação do design de interação é a legibilidade. Em termos práticos,</p><p>ele significa que produto desenvolvido sempre faz parte de uma solução completa que leva</p><p>em consideração funcionalidades, como:</p><p>•Facilidade de compreensão pelo usuário;</p><p>•Interpretação intuitiva da proposta do serviço;</p><p>•Navegação espontânea.</p><p>Interaction Design</p><p>Design de Interação</p><p>Usabilidade</p><p>Mais específica, outra funcionalidade importante do design de interação é a usabilidade. Esta tem</p><p>relação direta com o manuseio dos sistemas de maneira simples.</p><p>Para o teste dessa função, os designers podem utilizar mecanismos como mockups (versão</p><p>reduzida ou tamanho real do projeto), wireframes e protótipos.</p><p>Funcionalidade</p><p>Nessa competência o design de interação tem o objetivo claro de responder a uma pergunta: o</p><p>programa é útil e entrega os resultados que foram esperados com o seu desenvolvimento?</p><p>Esta etapa demanda a interação do que foram as ideias com a materialização das mesmas. Por</p><p>isso, ela depende em grande parte da abordagem escolhida apresentada no tópico anterior.</p><p>Interaction Design</p><p>Design de Interação</p><p>Visualização</p><p>O IxD se baseia também no design de experiência (UX DESIGN) e, por isso, a maneira com</p><p>que se apresenta a interface com o usuário é essencial.</p><p>Com isso, o designer deve se atentar aos seguintes aspectos:</p><p>•Representação visual, como imagens, vídeos e templates;</p><p>•Tempo de carregamento de páginas e recursos utilizados;</p><p>•Comportamento do usuário nas páginas e interação com os recursos.</p><p>Além disso, para essa competência a satisfação do cliente é fundamental. Por isso,</p><p>aconselha-se a fazer pesquisas para coletar feedbacks e ter insumos para os processos de</p><p>melhoria contínua.</p><p>Interaction Design</p><p>Design de Interação</p><p>Programação e processamento de dados</p><p>Outra aplicação comum do design de interação é na apresentação de projetos desenvolvidos por</p><p>profissionais responsáveis por programação e processamento de dados. Afinal, com isso</p><p>conseguem garantir as demais competências.</p><p>Idealmente, os designers de interação devem ter conhecimento também de programação, para</p><p>garantir que não haverá falhas tanto de funcionamento quanto de usabilidade.</p><p>Apesar do design de interação ser mais utilizado por programadores front-end, ele também pode ser</p><p>um diferencial para quem trabalha com foco em back-end.</p><p>Interaction Design</p><p>Design de Interação</p><p>Mockups</p><p>Mockup consiste em uma representação de um</p><p>determinado projeto, que pode ser feita em escala</p><p>ou em tamanho real. Ele é aplicado na apresentação</p><p>de ideias de maneira mais elaborada, possuindo o</p><p>design bastante próximo ao projeto final.</p><p>O mockup simula o tamanho, formato, perspectiva,</p><p>textura, cor e demais aspectos de um produto.</p><p>Dessa forma, a visualização do projeto final ocorre</p><p>de forma bem mais facilitada, contribuindo para a</p><p>aprovação da ideia ou para fazer as devidas</p><p>alterações.</p><p>Interaction Design</p><p>Design de Interação</p><p>Quais as vantagens do design de interação?</p><p>Como você já deve ter percebido, o uso do design de interação é uma forma de manter o foco</p><p>no cliente e na sua experiência com um produto ou serviço.</p><p>Visto isso, é possível destacar algumas vantagens competitivas que empresas que adotam a</p><p>metodologia possuem. Confira a seguir:</p><p>•Criação e melhoria contínua do desempenho dos produtos para que estejam cada vez mais</p><p>adaptados às necessidades dos clientes e usuários finais;</p><p>•Monitoramento das atividades nas interfaces e interações com o usuário buscando adquirir</p><p>feedbacks pelos seus comportamentos;</p><p>•Foco em um produto que seja ao mesmo tempo útil, funcional e com fácil interpretação;</p><p>•Elaboração de projetos que visam contribuições mais assertivas de todas as áreas</p><p>envolvidas, dando insumos alinhados para todas.</p><p>Interaction Design</p><p>Design de Interação</p><p>Acesse o www.miro.com/app/dashboard, para usar as ferramentas que veremos a seguir:</p><p>Interaction Design</p><p>Design de Interação</p><p>Navegação e Prototipagem</p><p>Wireframes</p><p>Segundo Teixeira (2015), Wireframes</p><p>são: Um guia visual que representa a</p><p>estrutura da página, bem como sua</p><p>hierarquia e os principais elementos</p><p>que compõem.</p><p>Útil para discussão de ideias como</p><p>o time e como os clientes, e também</p><p>para informar o trabalho dos diretores</p><p>de arte e desenvolvedores.</p><p>Interaction Design</p><p>Design de Interação</p><p>Navegação e Prototipagem</p><p>Os Wireframes definem primitivamente o Design Visual do projeto, são os primeiros sketches</p><p>(proposta de desenho) e consistem na representação diagramada das informações e das</p><p>estruturas do design final do aplicativo, ou seja, apresenta formas geométricas e</p><p>funcionamentos de todas as ações. Com isso, desenvolver Wireframes é um passo necessário</p><p>neste processo de criação, visto que, ajuda a esclarecer todos elementos individuais de cada</p><p>tela do projeto.</p><p>Dessa forma, é possível estabelecer as áreas de interações, fluxos e o próprio design do</p><p>aplicativo.</p><p>Interaction Design</p><p>Design de Interação</p><p>Navegação e Prototipagem</p><p>Com isso, desenvolver Wireframes é um passo necessário neste processo de criação, visto</p><p>que, ajuda a esclarecer todos elementos individuais de cada tela do projeto,</p><p>independentemente se o projeto é para Web Site ou Mobile App.</p><p>Dessa forma é possível estabelecer as áreas de interações, fluxos e o próprio design do</p><p>aplicativo, independentemente se for um Web Site ou Mobile App. É importante ressaltar que,</p><p>para ambos os casos, pode-se utilizar o miro.com, como suporte.</p><p>Interaction Design</p><p>Design de Interação</p><p>Navegação e Prototipagem</p><p>Durante o processo de criação dos Wireframes alguns fatores são considerados, tais como,</p><p>garantir que o aplicativo seja criado de acordo com os objetivos definidos, oferecer caminhos</p><p>de navegação focados na usabilidade e no público alvo. Além de, fornecer os feedbacks dos</p><p>usuários, diminuindo a quantidade de erros de usabilidade.</p><p>Perguntas mais comuns para buscar compreender a ideia para a criação de Wireframes:</p><p>- Qual será o primeiro elemento que usuário visualizará?</p><p>- Quais campos de entrada de texto, caixas de seleção, menus e botões devo colocar na tela</p><p>para otimizar o uso?</p><p>- Tem alguma consideração em particular que julgue importante a fazer?</p><p>Interaction Design</p><p>Design de Interação</p><p>Navegação e Prototipagem</p><p>A partir de uma boa arquitetura de informação, os Wireframes devem apresentar os</p><p>elementos necessários de navegação, mostrar os caminhos percorridos pelos usuários,</p><p>entender possíveis comportamentos e respostas a interface.</p><p>A utilização de Wireframes no projeto é de extrema importância, dado que facilitam na</p><p>concepção do layout final. Vale lembrar, que os Wireframes são experimentações do</p><p>projeto e podem sofrer alterações durante o processo.</p><p>Desse modo, são feitos em sua maioria a mão utilizando papel, caneta/lápis e pode,</p><p>também, serem criados através de programas computacionais.</p><p>Interaction Design</p><p>Design de Interação</p><p>Navegação e Prototipagem</p><p>em papel</p><p>Interaction Design</p><p>Design de Interação</p><p>Navegação e Prototipagem</p><p>em computador</p><p>Interaction Design</p><p>Design de Interação</p><p>Navegação e Prototipagem</p><p>Os Wireframes são desenvolvidos utilizando o Card Sorting e Site Map como base, muda-se</p><p>da ramificação de palavras com suas funções e começa a ganhar suas características visuais</p><p>organizadas por tela.</p><p>Os Wireframes profissionais podem ser criados por ferramentas computacionais, plataformas</p><p>digitais específicas para UX e UI design, como é o caso do Figma e Adobe XD, por exemplo.</p><p>Interaction Design</p><p>Design de Interação</p><p>Navegação e Prototipagem</p><p>Figma: WebSite ou WebSystem Wireframe</p><p>Interaction Design</p><p>Design de Interação</p><p>Navegação e Prototipagem</p><p>Figma: Mobile App Wireframe</p><p>Interaction Design</p><p>Design de Interação</p><p>Navegação e Prototipagem</p><p>Protótipo</p><p>Protótipos são a materialização de uma</p><p>Ideia de forma rápida, para que possa ser</p><p>aprimorada antes do desenvolvimento ou</p><p>de ser replicada em larga escala.</p><p>Pode-se dizer que é um experimento.</p><p>Protótipos navegáveis são aqueles</p><p>construídos de acordo com os princípios</p><p>da matéria digital: ao contrário de</p><p>documentos estáticos, no protótipo</p><p>navegável você clica e navega.</p><p>(NAHRA, 2018).</p><p>Interaction Design</p><p>Design de Interação</p><p>Navegação e Prototipagem</p><p>Protótipo</p><p>Interaction Design</p><p>Design de Interação</p><p>Navegação e Prototipagem: Desktop System</p><p>https://www.youtube.com/watch?v=6lS-T0-nQ0U</p><p>https://www.youtube.com/watch?v=6lS-T0-nQ0U</p><p>Interaction Design</p><p>Design de Interação</p><p>Navegação e Prototipagem: WebSystem</p><p>https://www.youtube.com/watch?v=9dJqJJYLYCk</p><p>https://www.youtube.com/watch?v=9dJqJJYLYCk</p><p>Interaction Design</p><p>Design de Interação</p><p>Navegação e Prototipagem: WebSite</p><p>https://www.youtube.com/watch?v=JAjkqLYWEO8</p><p>https://www.youtube.com/watch?v=JAjkqLYWEO8</p><p>Interaction Design</p><p>Design de Interação</p><p>Navegação e Prototipagem: Mobile App</p><p>https://www.youtube.com/watch?v=VX0pgwV0mqE</p><p>https://www.youtube.com/watch?v=VX0pgwV0mqE</p><p>Interaction Design</p><p>Design de Interação</p><p>UI Design: Moodboards</p><p>Segundo Teixeira (2015),</p><p>Moodboards são coleções de</p><p>imagens e referências que</p><p>eventualmente se transformarão</p><p>no estilo visual do produto.</p><p>Interaction Design</p><p>Design de Interação</p><p>UI Design: Moodboards</p><p>Moodboards também conhecidos como painéis semânticos, são referências visuais, de fotos a</p><p>texturas, carregam uma série de elementos que favorecem a visualizar as ideias que poderão</p><p>se tornar uma referência para o projeto final.</p><p>Através dos moodboards, torna-se as ideias mais claras e dão uma identidade para a</p><p>interface. As inspirações para esse projeto são formas geométricas simples, cores</p><p>contrastantes, utilização de imagens e de ícones pictográficos para melhorar a tomada de</p><p>decisão dos usuários.</p><p>Interaction Design</p><p>Design de Interação</p><p>UI Design: Moodboards</p><p>Vale lembrar que o moodboard são</p><p>primeiras ideias de como serão os</p><p>elementos do projeto, pois durante as</p><p>próximas etapas eles podem ser</p><p>modificando de acordo com os testes</p><p>de aplicação feitos.</p><p>Interaction Design</p><p>Design de Interação</p><p>UI Design: UI Elements</p><p>UI Design, ou User Interface Design</p><p>(Design de Interface do Usuário), é o meio</p><p>pela qual uma pessoa interage e controla</p><p>um dispositivo, software ou aplicativo.</p><p>Esse controle pode ser feito por meio de</p><p>botões, menus e qualquer elemento que</p><p>forneça uma interação entre o</p><p>dispositivo e o usuário.</p><p>(MATIOLA, 2018).</p><p>Interaction Design</p><p>Design de Interação</p><p>UI Design: UI Elements</p><p>O Design da Interface é o início da concepção do projeto final, através dele é possível</p><p>visualizar os elementos visuais, a usabilidade, a arquitetura da informação, a navegação e a</p><p>transição de telas, ou seja, todos os recursos que agregam e melhoram a forma dos usuários</p><p>a interagir com o aplicativo.</p><p>Mas, contudo, não se pode considerar somente a interface visual, os elementos devem ser</p><p>funcionais e transmitir os conceitos de usabilidade dentro do projeto.</p><p>Interaction Design</p><p>Design de Interação</p><p>https://www.youtube.com/watch?v=5CxXhyhT6Fc</p><p>https://www.youtube.com/watch?v=5CxXhyhT6Fc</p><p>Interaction Design</p><p>Design de Interação</p><p>Telas de um Protótipo de Projeto</p><p>Usuário Cliente</p><p>Interaction Design</p><p>Design de Interação</p><p>Telas de um Protótipo de Projeto</p><p>Usuário Cliente</p><p>Interaction Design</p><p>Design de Interação</p><p>Telas de um Protótipo de Projeto</p><p>Usuário Cliente</p><p>Interaction Design</p><p>Design de Interação</p><p>Telas de um Protótipo de Projeto</p><p>Usuário Cliente</p><p>Interaction Design</p><p>Design de Interação</p><p>Telas de um Protótipo de Projeto</p><p>Usuário Profissional</p><p>Interaction Design</p><p>Design de Interação</p><p>Telas de um Protótipo de Projeto</p><p>Usuário Profissional</p><p>Interaction Design</p><p>Design de Interação</p><p>Telas de um Protótipo de Projeto</p><p>Usuário Profissional</p><p>Interaction Design</p><p>Design de Interação</p><p>Telas de um Protótipo de Projeto</p><p>Usuário Profissional</p><p>Interaction Design</p><p>Wireframe WebSite x Mobile App</p><p>ATIVIDADE ASSISTIDA</p><p>Elabore o wireframe do seu projeto para desenvolvimento de um protótipo da interface</p><p>com o usuário, para certo WebSite ou WebSystem, responsivo, Mobile App, baseados</p><p>em UX e UI:</p>