USABILIDADE EM INTERFACES WEB COM DESIGN RESPONSIVO

Tamanho: px

Começar a partir da página:

Download "USABILIDADE EM INTERFACES WEB COM DESIGN RESPONSIVO"

Natália Caldeira Almada
6 Há anos
Visualizações:

1 USABILIDADE EM INTERFACES WEB COM DESIGN RESPONSIVO Michel Robaskiewicz Ferreira da Silva¹, Claudete Werner¹, Jaime William Dias¹ ¹Universidade Paranaense (Unipar) Paranavaí-PR-Brasil Resumo. Esta investigação científica apresenta um estudo em relação a usabilidade no ambiente web. O artigo tem ênfase em design responsivo. Com base nos estudos foi desenvolvido um projeto web utilizando a biblioteca de css, html e javascript BootStrap e a linguagem PHP 1. Introdução O uso de dispositivo móvel gera novas possibilidades ao mercado de tecnologia, estatísticas apontam que os aparelhos celulares que acessam a internet já ultrapassaram aos computadores de mesa, o mundo está se tornando mais flexível, com acesso a informações rápidas. Estabelecimentos comerciais, empresariais, privados e públicos já disponibilizam serviços online que se adapta aos aparelhos de seus usuários. A interface também faz parte da engenharia de software, antes de um desenvolvimento é necessário planejar uma arquitetura adequada para que a aplicação seja funcional e de fácil entendimento, pelos usuários que a utilizaram. Os engenheiros de software adotam maneiras eficazes para o planejamento e na identificação de problemas aplicando teorias, métodos e ferramentas. São os engenheiros que pensam em toda a estrutura de um sistema para que o mesmo tenha qualidade em seu produto final e satisfaça as necessidades [Sommerville 2007]. Pressmam, 2011 enfatiza o uso de um conjunto de métodos no desenvolvimento de um software para que seja bem projetado, que são: fácil manutenção, confiança eficiência e usabilidade. Com isso o objetivo desse artigo foi um amplo estudo sobre a usabilidade e design responsivo e adaptativo como uma alternativa para evitar erros ou transtornos na construção de uma página web responsiva, contextualizando a importância da usabilidade em qualquer projeto, a importância do design responsivo e uma alternativa correta de se seguir no desenvolvimento. 2. Metodologia Para o desenvolvimento desse artigo foi feita uma extensa revisão bibliográfica através de livros, artigos e sites da internet. Com o conhecimento adquirido em base nesses estudos evoluímos para a fase prática colocando em uso da Framework BootStrap v3.3.6, Linguagem PHP e a Ferramenta de desenvolvimento Sublime Text 3 para construção do

2 Web Site. 3. Desenvolvimento 3.1 Usabilidade A usabilidade se encaixa em qualquer interface de projeto web, é de extrema importância seu papel em uma aplicação. Uma página web que se venere, deve manter seu usuário sempre no caminho das informações desejadas, sendo elas coerentes, evitando frustações de erros e links inativos. Barbosa, 2010 descreve que a usabilidade endereça principalmente a capacidade cognitiva, perceptiva e motora dos usuários despendidas durante a interação. Já Nielsen, 1993 enfatiza que a usabilidade está relacionada com a facilidade de aprendizado e uso da interface, bem como a satisfação do usuário em decorrência desse uso. O autor ainda apresenta a usabilidade como um conjunto de fatores que qualificam quão bem uma pessoa pode interagir com um sistema interativo. Segundo Nielsen, 1993 a usabilidade pode ser dividida em cinco fatores básicos: Facilidade de aprendizado: Fácil entendimento e aprendizado da ferramenta; Facilidade de memorizar: Após um tempo sem utilizar o usuário é capaz de lembra de como funciona a interface; Maximizar a produtividade: Interface permite que o usuário realize tarefas ou ações rápidas; Segurança no uso: Garantir a redução de erros, e caso aconteça informar ao usuário; Satisfação do usuário: Confiança e segurança ao usuário, nível de conforto que o usuário apresenta ao utilizar a interface; 3.2 Design responsivo Em 2010 surgia uma nova filosofia de desenvolvimento para seguir na criação de layouts, Ethan Marcotte considerado o pai do design responsivo publica um artigo intitulado e nele enfatiza que Web design responsivo, finalmente, nos oferece um caminho a seguir, o que nos permite projetar para o fluxo e o refluxo das coisas. Segundo Zemel, 2012 o design responsivo não é uma moda é uma nova forma de pensar Web Diga não a mais versões específicas para celulares, basta de linguagens próprias para mobile, chega de subdomínios ou diretórios específicos para atender ao público móvel! Não existe uma web mobile. O autor enfatiza que dentro de pouco tempo, será tão vital e importante aos desenvolvedores e à experiência do usuário quanto o próprio HTML ou o CSS. Para se aplicar um desenvolvimento de páginas adaptáveis a diferentes tamanhos de telas é necessário, três métodos segundo Zemel: Layout baseado em grid flexível: Grids que não possuem valor fixo, ou seja que se adapte conforme a resolução, para isso é utilizado o símbolo de porcentagem na frente do tamanho ao invés de px.

3 Imagens e Medias Flexíveis: Imagens que se adapte conforme a resolução, exemplo de implementação na Figura 2. Figura 2 - Exemplo de implementação de Mídias Flexíveis. Fonte Zemel [2012] Media quereis: Módulo que permite importar folhas de estilos CSS e incorpora esse código conforme configurado, veja de exemplo na Figura 3. Figura 3 Exemplo de implementação de Media Quereis. Fonte Zemel [2012] 3.3 Framework BootStrap É uma biblioteca de componentes Html, Css e JavaScrip de código aberto que oferece uma ampla variedade de componentes construídos para fornecer iconografia, menus suspensos, inputs de entrada, navegação, alertas, slide show e muito mais para criação de Front-End, foi criado no Twitter por Mark Otto e Jacob Thornton, atualmente é mantido por vários outros colaboradores na comunidade. Samy, 2015 em seu livro de apoio a framework ressalta que ao construir um layout, por mais complexo que ele seja, é necessário saber quais são os elementos, classes, atributos e estruturas de marcação do grid usar. O grid é a espinha dorsal de qualquer framework CSS. É ele que determina o posicionamento de cada elemento em uma página, sendo assim usado para construir o layout. O grid se constitui com uma quantidade total de 12 colunas que se ajusta conforme o tamanho da resolução, com isso o alinhamento de conteúdo é eficaz, veja como é estruturado na Figura 4.

4 Figura 4 Exemplo de estrutura da classe container, row e col. Fonte: Para que as proporções da grid funcionem conforme a resolução do aparelho as linhas de código devem ser escritas seguindo a documentação, como toda API que se venere ela retém algumas regras, os padrões de grid oferecidos estão listados logo a baixo, veja o exemplo de implementação na Figura 5:.col-xs- a resolução para Telefones fica ativa até quando for menor que 768px;.col-sm- a resolução para Tablets se ativa a partir de 769px até 991px;.col-md- a resolução para dispositivos Desktop Medium se ativa a partir de 992px até 1199px;.col-lg- resolução para dispositivos Desktop Grandes é ativo a partir de 1200px; Figura 5 Explicação da classe Col 3.4 Recursos da Usabilidade e resultados Após o desenvolvimento da aplicação realizamos um método de avaliação com a concepção de 10 usuários que foram considerados avaliadores, para eles foram apresentadas sete heurísticas definidas por Nielsen em 1993, consideradas essenciais no desenvolvimento de interfaces na web. Para cada princípio deveria ser escolhido um grau de rigorosidade: excelente, bom, ruim, péssimo. Com a concepção de cada usuário foi aplicado as seguintes situações: Facilidade e interação com o usuário; Navegue entre as páginas e verifique a relevância do conteúdo; Encaminhe um ; Princípios de Usabilidade Excelente Bom Ruim Péssimo Clareza na Arquitetura da Informação 80% 20% - - Facilidade de Navegação 90% 10% - - Simplicidade 100% Relevância do Conteúdo 80% 20% - - Manter a Consistência 100% Tempo Suportável 90% 10% - - Foco nos Usuários 80% 10% - -

5 Após concluir a pesquisa e obter o resultado, se observa que o nível de aceitação de aparência e coerência foi positivo. 4. Considerações finais Com base em que Zemel, 2012 descreve, então porque não planejar e desenvolver uma aplicação utilizando apenas um código economizando linhas, não perdendo tempo fazendo caminhos alternativos para inúmeros aparelhos com resoluções diferentes. Com os resultados obtidos através dos estudos e da pesquisa proposta observamos a importância de um site que se adapte a diversas tela de aparelhos de resoluções diferentes, mantendo sua consistência, tanto em aparecia como em coerência. 5. Referencias NIELSEN, J. (1993) Usability Engineering. Academic Press, Cambridge, MA, MARCOTTE, E. (2010) Responsive Web Design. A List Apart, 25 de Maio de ZEMEL, T. (2012) Web Design Responsivo Páginas Adaptáveis para todos os dispositivos. 1. ed. Casa do Código, Ian Sommerville, et al. (2007) - Engenharia de Software - 8ª Edição. BootStrap V3.3.6 < Maurício Samy Silva - Bootstrap Aprenda a usar o framework Bootstrap para criar layouts CSS complexos e responsivos Dinara P.Lima Usabilidade na Web < Acessado dia <25/08/2016> Tiago Volpato - TÉCNICAS DE ESTRUTURAÇÃO PARA DESIGN RESPONSIVO: AMPLIANDO A USABILIDADE NO AMBIENTE WEB Heloísa Vieira da Rocha, M.Cecília C. Baranauskas - Design e Avaliação de Interfaces Humano Computador Rogério Albuquerque Ribeiro - ESTUDO AVALIATIVO DE ACESSIBILIDADE E USABILIDADE APLICADO AO AMBIENTE WEB

Documentos relacionados

Curso online de. Formação em Front-End. Plano de Estudo

Curso online de. Formação em Front-End. Plano de Estudo Curso online de Formação em Front-End Plano de Estudo Descrição do programa O Programa de Desenvolvimento Web lhe oferece conhecimentos para desenvolver habilidades necessárias para se tornar um Desenvolvedor