Aula 2 - 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 02</p><p>UX Design</p><p>UX Design</p><p>Experiência do Usuário</p><p>A experiência do usuário abrange todas as interações do usuário com uma marca. Após a</p><p>transformação digital, essa experiência se voltou principalmente para sites, aplicativos</p><p>móveis, ferramentas e outros recursos similares.</p><p>Hoje, altos índices de satisfação não dependem mais inteiramente da qualidade dos produtos</p><p>ou serviços, pois para as empresas, isso implica um maior esforço para desenvolver uma</p><p>presença digital coerente e atraente, além de adaptar seus fluxos de interação cada vez mais</p><p>às características e aos comportamentos do usuário.</p><p>Para entender melhor o que as marcas de hoje devem considerar para garantir uma</p><p>experiência do usuário ideal, estudaremos os pilares desse conceito.</p><p>UX Design</p><p>Experiência do Usuário</p><p>Quais são os pilares da experiência do usuário?</p><p>1. ATRATIVO VISUAL</p><p>2. UTILIDADE</p><p>3. ACESSIBILIDADE</p><p>4. CREDIBILIDADE</p><p>5. INTUITIVIDADE</p><p>6. DESEMPENHO TÉCNICO</p><p>7. PROXIMIDADE E CUMPLICIDADE</p><p>8. INOVAÇÃO E ORIGINALIDADE</p><p>UX Design</p><p>Experiência do Usuário</p><p>ATRATIVO VISUAL:</p><p>Este é um dos pontos elementares do UX Design. Isso porque a primeira impressão também é</p><p>importante para a experiência do usuário.</p><p>Por esse motivo, é necessário cativá-lo com uma atraente apresentação visual.</p><p>Independentemente de ser um e-commerce, blog ou qualquer outro tipo de site, é importante</p><p>ter um design agradável, coerente e atrativo que capture o visitante e o faça permanecer</p><p>bastante tempo naquela página web, surpreendendo-o por seu valor estético.</p><p>UX Design</p><p>Experiência do Usuário</p><p>UTILIDADE:</p><p>Além de ser visualmente atraente, a Experiência do Usuário (UX - User Experience) deve ser</p><p>altamente funcional.</p><p>Dessa forma, plataformas como aplicativos e sites para celular devem oferecer valores</p><p>agregados que ajudem a resolver problemas e satisfazer necessidades de usuários e clientes.</p><p>Entre esses valores agregados encontramos calculadoras, planilhas, manuais técnicos e,</p><p>inclusive, conteúdo e informações com foco educacional.</p><p>UX Design</p><p>Experiência do Usuário</p><p>ACESSIBILIDADE:</p><p>A acessibilidade, em primeiro lugar, refere-se à possibilidade de acessar uma página web a</p><p>partir de diferentes dispositivos, e não apenas de um computador ou notebook tradicional.</p><p>Além disso, exige que o design tenha a capacidade de se ajustar e se otimizar, considerando</p><p>as características e o formato de cada dispositivo, conforme estabelecido pelos bons</p><p>princípios de responsividade.</p><p>Isso garante uma ótima experiência na página a todo momento, independentemente do meio</p><p>pelo qual o usuário a acessa (computador, tablet ou smartphone).</p><p>Esse ponto também está intimamente relacionado à inclusão de usuários com restrições</p><p>físicas, como pessoas com deficiência visual, possibilitando-lhes o acesso à informação</p><p>através de recursos como leitores de tela.</p><p>UX Design</p><p>Experiência do Usuário</p><p>CREDIBILIDADE:</p><p>Para que um site ou plataforma digital contribua para as taxas de conversão e satisfação do</p><p>usuário, precisa projetar credibilidade.</p><p>Para isso, deve estar livre de erros e, acima de tudo, atender às expectativas que gera.</p><p>É importante que as diferentes funcionalidades e os valores agregados realmente cumpram os</p><p>objetivos que prometem e contribuam de maneira tangível para a solução dos problemas.</p><p>Assim, a UX é marcada pela confiança, que pode levar a compras, assinaturas e demais</p><p>relações comerciais duradouras.</p><p>UX Design</p><p>Experiência do Usuário</p><p>INTUITIVIDADE:</p><p>A interface do usuário é eficaz apenas quando garante usabilidade, capacidade de</p><p>digitalização e intuitividade.</p><p>De nada adianta um site ter ótimos recursos e potencial se o usuário não entende como usá-lo</p><p>e tirar o máximo proveito dele. Portanto, uma interface deve ser altamente intuitiva às vistas</p><p>do usuário.</p><p>UX Design</p><p>Experiência do Usuário</p><p>DESEMPENHO TÉCNICO:</p><p>Ter uma alta velocidade de carregamento e um bom desempenho técnico é especialmente</p><p>importante para as páginas. Essa é a única maneira de alcançar a otimização da taxa de</p><p>conversão (CRO) e uma sólida experiência do usuário.</p><p>Mesmo que um site seja funcional e visualmente atraente, o usuário não se sentirá confortável</p><p>se este falhar tecnicamente e precisar lidar com vários atritos e aborrecimentos.</p><p>É importante mencionar também que um site com bom desempenho técnico é mais valorizado</p><p>pelos algoritmos dos buscadores, portanto, isso tem relação direta com a otimização dos</p><p>mecanismos de busca (SEO).</p><p>UX Design</p><p>Experiência do Usuário</p><p>PROXIMIDADE E CUMPLICIDADE:</p><p>Os usuários estão cada vez mais exigentes e requerem experiências que realmente os</p><p>motivem e cativem.</p><p>É por isso que dentro dos pilares da experiência do usuário está a humanização das páginas e</p><p>ferramentas, tornando-as mais próximas e permitindo que as marcas se conectem</p><p>emocionalmente com o público.</p><p>O resultado dessas boas práticas, quando implementadas, aumenta o engajamento dos</p><p>usuários, o que os incentiva a se tornarem embaixadores da marca graças à experiência de</p><p>navegação bem-sucedida.</p><p>UX Design</p><p>Experiência do Usuário</p><p>INOVAÇÃO E ORIGINALIDADE:</p><p>Além disso, a experiência é mais gratificante quando o usuário interage com plataformas e</p><p>ferramentas inovadoras e originais que têm sua identidade própria e se mostram memoráveis.</p><p>Portanto, ter um web site recheado de inovações tecnológicas, sem perder seu perfil de</p><p>originalidade, provê uma significativa experiência do usuário.</p><p>UX Design</p><p>Experiência do Usuário</p><p>https://www.youtube.com/watch?v=9BdtGjoIN4E&t=21s</p><p>https://www.youtube.com/watch?v=9BdtGjoIN4E&t=21s</p><p>UX Design</p><p>Experiência do Usuário</p><p>UX Design</p><p>Experiência do Usuário</p><p>UX Design</p><p>Experiência do Usuário</p><p>UX Design</p><p>Experiência do Usuário</p><p>UX Design</p><p>Experiência do Usuário</p><p>UX Design</p><p>Experiência do Usuário</p><p>UX Design</p><p>Experiência do Usuário</p><p>UX Design</p><p>Experiência do Usuário</p><p>Ferreira (2012) afirma que “experiência do usuário é muito importante para qualquer tipo de</p><p>produto ou serviço, com foco em diversos aspectos, principalmente na usabilidade de Web</p><p>Pages ou Mobile Apps”.</p><p>Utilizando o “Teorema de Iceberg” da experiência do usuário, criada por Trevor Van Gorp</p><p>(2007), sendo uma releitura de um gráfico apresentando por Jesse James Garret, no livro</p><p>“The Elements of User Experience”, 2000, aponta-se os elementos que fazem parte da</p><p>experiência do usuário dentro do desenvolvimento de um produto.</p><p>Esses elementos, dentro de um projeto, englobam diferentes disciplinas como a arquitetura de</p><p>informação, o design de interação e design de interfaces.</p><p>UX Design</p><p>Experiência do Usuário</p><p>O “Teorema de Iceberg” divide o processo de UX Design na criação de um produto em etapas</p><p>com enfoque no usuário. Primeiramente, deve-se verificar quais as necessidades das pessoas</p><p>que farão o uso da interface para, posteriormente, desenvolver o projeto de UI Design.</p><p>UX Design</p><p>Experiência do Usuário</p><p>Conforme o “Teorema do Iceberg”, pode-</p><p>se resumir como as cinco camadas</p><p>funcionam juntas.</p><p>Diante disso, a base do iceberg se</p><p>encontra no fundo do oceano e é regida</p><p>pela Estratégia (“Strategy”), que consiste</p><p>na investigação de quais são as</p><p>necessidades dos usuários (“User</p><p>Needs”) e suas dores (“Objectives”).</p><p>UX Design</p><p>Experiência do Usuário</p><p>Nessa etapa são levantadas questões</p><p>como: O porquê do produto? Por que foi</p><p>criado? Para quem? Por que precisam</p><p>dele? Qual Caminho percorrer?</p><p>Dessa forma, essas perguntas são a base</p><p>para o desenvolvimento do produto final.</p><p>Nesse sentido, a Estratégia vai se</p><p>transformar em Escopo (“Scope”) quando</p><p>definidos as especificações funcionais</p><p>(“Functional specs”), as exigências de</p><p>conteúdo (“Content requirements”) que</p><p>aplicativo atenderá.</p><p>UX Design</p><p>Experiência do Usuário</p><p>Definido isso, o Escopo se tornará Estrutura</p><p>(“Structure”) quando estabelecidas as formas</p><p>de interação com a usabilidade do sistema</p><p>(“Interaction Design") e a partir do desenho</p><p>dessa Estrutura como cada informação será</p><p>apresentada (“Information architecture"),</p><p>descomplicando a busca do usuário para</p><p>que siga uma lógica simples levando em</p><p>consideração as possibilidades de interação.</p><p>UX Design</p><p>Experiência do Usuário</p><p>Chega-se, dessa forma, na camada do</p><p>Esqueleto (“Skeleton”) que determina a</p><p>Interface Visual (“Interface Design”) da tela,</p><p>a Navegação (“Navigation Design”) e a</p><p>disposição de todos as Informações</p><p>(“Information Design”) que forem</p><p>necessários.</p><p>Para finalizar, na camada da Superfície</p><p>(“Surface”) é onde se cria a Apresentação</p><p>Visual (“Visual Design”), levando em</p><p>consideração todas as etapas citadas</p><p>anteriormente.</p><p>UX Design</p><p>Estratégia de UX</p><p>Acesse o www.miro.com/app/dashboard, para usar as ferramentas que veremos a seguir:</p><p>UX Design</p><p>Estratégia de UX</p><p>1. Mind Map *</p><p>Um mapa mental é uma</p><p>estratégia utilizada para</p><p>representação de ideias,</p><p>analises, compreensão e</p><p>solução de problemas que</p><p>se ramifica a partir de um</p><p>conceito central. (BUZAN,</p><p>2012)</p><p>UX Design</p><p>Estratégia de UX</p><p>1. Mind Map</p><p>UX Design</p><p>Estratégia de UX</p><p>2. User Stories</p><p>A segunda estratégia de UX utilizada</p><p>é o “User Stories”, esta etapa</p><p>consiste em descrever as</p><p>necessidades do usuário de uma</p><p>maneira simples e objetiva.</p><p>O método tem a finalidade de definir</p><p>os detalhes necessários para o</p><p>desenvolvimento da funcionalidade e</p><p>motivações do aplicativo. Pode-se</p><p>resumir essa estratégia em três</p><p>pequenas perguntas: Quem?</p><p>O que deseja? e Por qual motivo?</p><p>UX Design</p><p>Estratégia de UX</p><p>2. User Stories</p><p>Ator 1: Contratantes</p><p>Estou expandindo meu negócio para um “e-commerce” e quero elaborar de maneira efetiva</p><p>meu canal de vendas online, com fluxos intuitivos e estruturados. Busco também facilidade na</p><p>contratação e pagamento seguro. Como microempreendedor busco um designer gráfico para</p><p>produção da identidade visual da minha empresa que transmita a essência e credibilidade aos</p><p>meus futuros clientes. Procuro um preço justo e um profissional que otimize meu tempo para</p><p>solucionar meu problema.</p><p>Gostaria de um profissional para criar uma animação que mostre os processos de fabricação</p><p>dos meus produtos. Procuro um profissional disposto a se dedicar exclusivamente para a</p><p>produção deste material até sua finalização.</p><p>UX Design</p><p>Estratégia de UX</p><p>2. User Stories</p><p>Ator 2: Contratados</p><p>Como UX Designer almejo transmitir meu conhecimento através de estratégias e métodos</p><p>qualificados para elaborar a melhor experiência do usuário. Pretendo ter segurança no</p><p>pagamento e aumentar minha demanda de clientes consequentemente.</p><p>Como Designer Gráfico busco enriquecer meu portfólio, consolidar meu trabalho e ter sempre</p><p>clientes dispostos a novas possibilidades de solucionar seus problemas. Além disso, receber</p><p>um preço justo pelo projeto desenvolvido.</p><p>Como Motion Designer pretendo mostrar por meio da criatividade o meu trabalho, sempre com</p><p>foco na qualidade e desempenho do projeto. Assim, permitir uma flexibilidade de animações</p><p>dentro do orçamento do cliente.</p><p>UX Design</p><p>Estratégia de UX</p><p>2. User Stories</p><p>Dessa maneira, com o desenvolvimento do User Stories é possível a visualização mais</p><p>fracionada às expectativas e motivações dos usuários, sendo escritas segundo o ponto de</p><p>vista dos agentes identificados.</p><p>Portanto, as motivações dos contratantes são, a facilidade na contratação, a qualidade dos</p><p>serviços, a flexibilidade de pagamento e exclusividade do projeto solicitado. Quanto às</p><p>motivações dos contratados temos, o aprimoramento do portfólio, a consolidação profissional,</p><p>o aumento da renda e a flexibilidade de atendimento.</p><p>UX Design</p><p>Estratégia de UX</p><p>3. Personas</p><p>Personas são um retrato do público-alvo que destaca dados demográficos, comportamentos,</p><p>necessidades e motivações através da criação de um personagem ficcional baseado em</p><p>insights extraídos de pesquisa.</p><p>Personas fazem com que os designers e desenvolvedores criem empatia com os</p><p>consumidores durante o processo</p><p>de design. (TEIXEIRA, 2015)</p><p>UX Design</p><p>Estratégia de UX</p><p>3. Personas</p><p>Desse modo, esta etapa do processo mostra as possibilidades de serviços mais próximas dos</p><p>consumidores e é baseada em informações reais e características demográficas dos usuários.</p><p>O intuito de desenvolver personas é mostrar quais possíveis problemas podem surgir a partir</p><p>do conteúdo oferecido e colaborar na determinação de uma linguagem para o aplicativo.</p><p>Delimita-se, então, o público alvo e busca solucionar de maneira eficaz os problemas que</p><p>surgem no decorrer do projeto.</p><p>UX Design</p><p>Estratégia de UX</p><p>3. Personas</p><p>Persona 1:</p><p>UX Design</p><p>Estratégia de UX</p><p>3. Personas</p><p>Persona 2:</p><p>UX Design</p><p>Estratégia de UX</p><p>3. Personas</p><p>Persona 3:</p><p>UX Design</p><p>Estratégia de UX</p><p>3. Personas</p><p>Persona 4:</p><p>UX Design</p><p>Estratégia de UX</p><p>3. Personas</p><p>Persona 5:</p><p>UX Design</p><p>Estratégia de UX</p><p>3. Personas</p><p>O que podemos concluir sobre cada persona (Motivações e Dores)?</p><p>UX Design</p><p>Estratégia de UX</p><p>3. Personas</p><p>O que podemos concluir sobre cada persona (Motivações e Dores)?</p><p>UX Design</p><p>Estratégia de UX</p><p>3. Personas</p><p>O que podemos concluir sobre cada persona (Motivações e Dores)?</p><p>UX Design</p><p>Estratégia de UX</p><p>Conteúdo e Especificações Funcionais</p><p>Card Sorting *</p><p>É uma combinação dos esquemas de</p><p>organização, rotulação de busca e</p><p>navegação dentro de websites e</p><p>intranets. Uma disciplina emergente e</p><p>uma comunidade de prática focada em</p><p>trazer princípios do design e</p><p>arquitetura ao espaço digital.</p><p>(ROSENFELD e MORVILLE, 2006)</p><p>UX Design</p><p>Estratégia de UX</p><p>Conteúdo e Especificações Funcionais</p><p>Card Sorting</p><p>O “Card sorting” é um método de estruturação das informações de sites, aplicativos e outras</p><p>interfaces digitais que fornecem prestação de serviços. Esta técnica consiste em organizar as</p><p>características e as necessidades dos usuários dentro do aplicativo e é representada por um</p><p>conjunto de “cards” descrevendo conteúdos e funções que serão disponibilizados.</p><p>Os cards devem ser organizados a partir da visão do usuário formando categorias para o</p><p>aplicativo.</p><p>Através desta técnica pode-se obter um mapa mental preciso baseando-se no ponto de vista</p><p>dos usuários finais de uma determinada aplicação (Spencer,2004).</p><p>UX Design</p><p>Estratégia de UX</p><p>Conteúdo e Especificações Funcionais</p><p>Card Sorting</p><p>UX Design</p><p>Estratégia de UX</p><p>Conteúdo e Especificações Funcionais</p><p>Card Sorting</p><p>UX Design</p><p>Estratégia de UX</p><p>Conteúdo e Especificações Funcionais</p><p>Card Sorting</p><p>UX Design</p><p>Estratégia de UX</p><p>Arquitetura de Informação</p><p>Site Map *</p><p>Segundo Fabricio Teixeira (2015, p. 57)</p><p>um dos métodos mais conhecidos</p><p>de UX consiste em um diagrama das</p><p>páginas de um site organizadas</p><p>hierarquicamente.</p><p>Este método ajuda a visualizar</p><p>a estrutura básica e a navegação</p><p>entre as diferentes partes</p><p>dos sistemas.</p><p>UX Design</p><p>Estratégia de UX</p><p>Arquitetura de Informação</p><p>Site Map</p><p>Esta etapa do processo chama-se Site Map e é uma maneira de mostrar aos usuários as</p><p>primeiras estruturas do aplicativo, leva-se em consideração os resultados gerados através do</p><p>Card Sorting. Desta forma, fica mais fácil visualizar a trajetória do usuário, mapear os dados</p><p>de cada seção e arquitetar as informações do aplicativo. Com isso, irá direcionar a base do</p><p>funcionamento da interface. O desenvolvimento do Site Map colabora para a ramificação dos</p><p>menus criados anteriormente, assim, forma-se os fluxos das ações realizadas pelos usuários.</p><p>As informações deste método buscam listar detalhadamente todas as ações realizadas pelos</p><p>usuários, isso auxilia na identificação das páginas primárias, secundárias e assim em diante. A</p><p>realização do Site Map é indispensável pois ele é a base para a criação dos wireframes.</p><p>UX Design</p><p>Estratégia de UX</p><p>Arquitetura de Informação</p><p>Flow Chart</p><p>Após o Site Map, utiliza-se o</p><p>fluxograma da interface a partir de</p><p>um método chamado Flow Chart, que</p><p>é uma representação feita com gráficos.</p><p>Com isso o entendimento dos</p><p>possíveis menus, botões e</p><p>respectivamente os seus grupos</p><p>ficaram mais claras, estruturando</p><p>uma hierarquia de interações</p><p>primárias e secundárias.</p><p>UX Design</p><p>Estratégia de UX</p><p>Arquitetura de Informação</p><p>Flow Chart</p><p>UX Design</p><p>Estratégia de UX</p><p>Arquitetura de Informação</p><p>Flow Chart</p><p>Legenda:</p><p>UX Design</p><p>Estratégia de UX</p><p>ATIVIDADE ASSISTIDA</p><p>Visando a concepção do seu projeto para desenvolver um protótipo da interface com o</p><p>usuário, para certo WebSite ou WebSystem, responsivo, Mobile App, baseado na</p><p>experiência do usuário, elabore as seguintes estratégias de UX:</p><p>- Mind Map (mapa mental)</p><p>- Card Sorting (organização de cartões)</p><p>- Site Map (mapa do site)</p><p>- Flow Chart (fluxograma da interface)</p>