Recursos especiais neste artigo:
Contém nota Quickupdate, Conteúdo sobre boas práticas.
Neste artigo iremos desenvolver um aplicativo para ler os feeds do Twitter. Como existem diversas maneira de fazer essa tarefa, foram escolhidas algumas características do iOS para explicar tanto o conceito como a técnica para esse desenvolvimento. Apesar de relativamente simples, esse exemplo incorpora conceitos importantes nas etapas do desenvolvimento que não podem ser esquecidos como a usabilidade, programação em blocos e em multitarefa e uso de animações, para desenvolver aplicações que realmente atraiam a atenção do usuário e que o façam ser fiel ao seu aplicativo.
Em
que situação o tema é útil
Qualquer aplicativo deve ser feito levando-se em
consideração a atenção do usuário e sua vontade em permanecer ou regressar ao
aplicativo. Um aplicativo mal feito ou deficiente no seu projeto não irá cativar
o usuário e ele irá buscar outra alternativa.
Uma das definições de usabilidade nos diz que ela define a facilidade com a qual os indivíduos podem fazer uso de uma ferramenta ou objeto com o propósito de efetuar uma tarefa específica e importante. Quando consideramos esse conceito no contexto da interação humano-computador e na ciência da computação, temos que o termo usabilidade normalmente se refere à simplicidade e facilidade com que um determinado software pode ser utilizado.
O objetivo deste artigo não é discutir o assunto usabilidade em profundidade, mas somente os pontos principais: interface com o usuário e responsividade, afinal, o que realmente importa é se o usuário está conseguindo usar seu aplicativo de forma satisfatória (simplicidade e facilidade).
Uma boa interface deve considerar para qual aparelho está sendo criada e também para qual orientação, afinal, pode-se usar os iGadgets tanto na horizontal (landscape ou deitado) quanto na vertical (portrait ou em pé). O iPhone possui uma resolução de 320 pixels em modo portrait e 480 em landscape e o iPad tem 768 pixels em portrait e 1024 em landscape - e o dobro disso nos aparelhos com tela Retina.
As Figuras 1 (células no iPhone em portrait) e 2 (células no iPad em landscape) demonstram o que acontecerá com nosso exemplo se não houver um planejamento adequado. Observem que a interface com usuário fica completamente desfigurada na Figura 2. Uma interface bem projetada não deveria sofrer deste tipo de problema.
O objetivo não é detalhar cada possibilidade de design nesse artigo, então iremos restringir esse exemplo ao uso do iPhone em portrait e do iPad em landscape.
Figura 1. Tela com o posicionamento das células no iPhone em Portrait.
Figura 2. Tela com o posicionamento das células no iPad em Landscape.
Outro exemplo de uma interface mal projetada, como a da Figura 3, faz com que os elementos não se adequem às característicos do aparelho (tamanho dos elementos para uso com o dedo, por exemplo) ou que os elementos não possam ser acessados.
Este exemplo mostra como o posicionamento inadequado de objetos pode atrapalhar o uso do sistema, ou a usabilidade. Note que o elemento botão está atrás do texto tweetLabel, impedindo seu acesso e seu tamanho também não segue as orientações. O que pode acontecer aqui, neste exemplo, é que o usuário não consiga tocar no botão. Se houver mais elementos próximos, que também requeiram toques, o sistema pode confundir qual botão foi tocado, já que o dedo do usuário pode “tocar” na área errada.
Figura 3. Uso inadequado dos elementos no layout da interface.
O manual iOS Human Interface Guidelines da Apple recomenda que a área de toque de um objeto seja de, no mínimo, 23 pixels e, recomendado, 31 pixels. Esses números foram definidos considerando estudos que levaram em conta o tamanho médio do dedo de um adulto normal.
Sendo assim, sempre que for projetar a interface considere os seguintes pontos:
· Tamanho mínimo dos elementos;
· Distância entre elementos;
· Posicionamento relativo dos elementos (quem está “acima/abaixo” de quem).
Na Web, o mouse tem apenas 1 pixel para acessar um elemento. Nas interfaces touch, o tamanho do dedo é quem determina a área de toque. Lembre-se, mínimo de 23 pixels mais uma margem entre cada elemento para evitar a obstrução - não somente visual, mas também na hora de efetuar o toque na tela.
...Confira outros conteúdos:
Perguntas frequentes
Nossos casos de sucesso
Eu sabia pouquíssimas coisas de programação antes de começar a estudar com vocês, fui me especializando em várias áreas e ferramentas que tinham na plataforma, e com essa bagagem consegui um estágio logo no início do meu primeiro período na faculdade.
Estudo aqui na Dev desde o meio do ano passado!
Nesse período a Dev me ajudou a crescer muito aqui no trampo.
Fui o primeiro desenvolvedor contratado pela minha
empresa. Hoje eu lidero um time de desenvolvimento!
Minha meta é continuar estudando e praticando para ser um
Full-Stack Dev!
Economizei 3 meses para assinar a plataforma e sendo sincero valeu muito a pena, pois a plataforma é bem intuitiva e muuuuito didática a metodologia de ensino. Sinto que estou EVOLUINDO a cada dia. Muito obrigado!
Nossa! Plataforma maravilhosa. To amando o curso de desenvolvimento front-end, tinha coisas que eu ainda não tinha visto. A didática é do jeito que qualquer pessoa consegue aprender. Sério, to apaixonado, adorando demais.
Adquiri o curso de vocês e logo percebi que são os melhores do Brasil. É um passo a passo incrível. Só não aprende quem não quer. Foi o melhor investimento da minha vida!
Foi um dos melhores investimentos que já fiz na vida e tenho aprendido bastante com a plataforma. Vocês estão fazendo parte da minha jornada nesse mundo da programação, irei assinar meu contrato como programador graças a plataforma.
Wanderson Oliveira
Comprei a assinatura tem uma semana, aprendi mais do que 4 meses estudando outros cursos. Exercícios práticos que não tem como não aprender, estão de parabéns!
Obrigado DevMedia, nunca presenciei uma plataforma de ensino tão presente na vida acadêmica de seus alunos, parabéns!
Eduardo Dorneles
Aprendi React na plataforma da DevMedia há cerca de 1 ano e meio... Hoje estou há 1 ano empregado trabalhando 100% com React!
Adauto Junior
Já fiz alguns cursos na área e nenhum é tão bom quanto o de vocês. Estou aprendendo muito, muito obrigado por existirem. Estão de parabéns... Espero um dia conseguir um emprego na área.