USABILIDADE EM INTERFACES WEB COM DESIGN RESPONSIVO

USABILIDADE EM INTERFACES WEB COM DESIGN
RESPONSIVO
Michel Robaskiewicz Ferreira da Silva¹, Claudete
Werner¹, Jaime William Dias¹
¹Universidade Paranaense (Unipar)
Paranavaí-PR-Brasil
[email protected],
[email protected],
[email protected]
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
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.

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.
Figura 4 – Exemplo de estrutura da classe container, row e col. Fonte:
http://getbootstrap.com/
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 e-mail;
Princípios de Usabilidade
Clareza na Arquitetura da Informação
Facilidade de Navegação
Simplicidade
Relevância do Conteúdo
Manter a Consistência
Tempo Suportável
Foco nos Usuários
Excelente
80%
90%
100%
80%
100%
90%
80%
Bom
20%
10%
20%
10%
10%
Ruim
-
Péssimo
-
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, 1993.
MARCOTTE, E. (2010) Responsive Web Design. A List Apart, 25 de Maio de 2010.
ZEMEL, T. (2012) Web Design Responsivo Páginas Adaptáveis para todos os
dispositivos. 1. ed. Casa do Código, 2012.
Ian Sommerville, et al. (2007) - Engenharia de Software - 8ª Edição.
BootStrap V3.3.6 <http://getbootstrap.com/css/>
Maurício Samy Silva - Bootstrap 3.3.5 - Aprenda a usar o framework Bootstrap para
criar layouts CSS complexos e responsivos
Dinara P.Lima – Usabilidade na Web < http://goo.gl/Oo6TQm> 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