[dig2012] 12 - Interfaces mobile

Interfaces Embarcadas
Eduardo Novais - Design de Interfaces Gráﬁcas

sábado, 21 de abril de 2012

Interfaces mobile e em telas touchscreen
estão se tornando cada vez mais popular.


trendwatching.com (FEV/2012)


POINT-KNOW-BUY | Com métodos de busca e
informação à base de texto largamente disponíveis à
maioria das pessoas, (...) inicia-se a corrida para
disponibilizar métodos de busca e informações
visuais instantâneos (...). Logo, qualquer objeto(senão
pessoa) no mundo real poderá ser "conhecido" por
consumidores equipados com smartphones (...).
Estes aparelhos poderão ser apontados a qualquer
coisa para obter/encontrar informações
pertinentes, sempre que seus usuários quiserem. E
claro, algum tipo de comércio baseado nisso deverá
vir em seguida ;-)


Divisão do
Mercado em
Duas
Plataformas


Têm-se aí, um mercado já não tão novo mas
ainda cheio de oportunidades e crescimento


interfaces mobile


O design para tais aplicativos é diferente
para páginas Web e R.I.A.


Uso
Planejamento
Tela
Ícone
Teste


Situações de Uso


Considerar o que as pessoas estão fazendo
enquanto estão usando seu aplicativo.


O horário de pico do uso de um iPad para
entretenimento é de 20 às 23 hs.


Já o iPhone pode ser utilizado em ﬁlas de
banco ou dentro de um ônibus.


Manipulando a interface


O dedo é maior e menos preciso que um
mouse.


As área ativas em uma interface touchscreen
devem ter uma margem de erro, sem
controles muito próximos.


O tamanho mínimo que a Apple sugere é de
44 x 44 px.


Se a área visual de um controle é menor que
a mínima recomendada, certiﬁque-se de que
a área da tela ativa que responde ao toque
de um usuário seja suﬁciente grande para
garantir a operação.


Padrões


Usuários esperam certos comportamentos e
interfaces. Não se usa o gesto de pinch para
nenhuma função além de aumento ou
redução de zoom.


Gesture Action

Tap To press or select a control or item (analogous to a single mouse click).

To scroll or pan (that is, move side to side).
Drag
To drag an element.

Flick To scroll or pan quickly.

With one finger, to reveal the Delete button in a table-view row or to reveal
Swipe Notification Center (from the top edge of the screen).
With four fingers, to switch between apps on iPad.
To zoom in and center a block of content or an image.
Double tap
To zoom out (if already zoomed in).

Pinch open to zoom in.
Pinch
Pinch close to zoom out.

Touch and hold In editable or selectable text, to display a magnified view for cursor positioning.

Shake To initiate an undo or redo action.


Esquemas de cores oferecem um pouco mais
de liberdade criativa.


Deﬁnições


Deﬁna claramente o objetivo de seu app
antes de pensar no visual, bem como seu
público-alvo.


Deﬁna o recurso principal do aplicativo o
quanto antes. Não se desvie desse objetivo
colocando funções opcionais.


Público-alvo


Planeje o aplicativo sempre na perspectiva
do usuário.


Cada público tem seu estilo: um aplicativos
de negócios não deve ter um visual cartoon.


O estilo couro costurado no app "Find my
friends" é um exemplo do que não deve ser
feito


Não projete o app da maneira mais fácil de
desenvolver.


Estrutura


Comece o processo de design com a
estrutura de navegação e, em seguida crie os
blocos de funções principais.


Desenhe o ﬂuxograma completo do
aplicativo conectando todas as telas e
pontos.


Pense no seu App uma tela por vez.
Concentre-se no objetivo principal que cada
tela vai ter.


Comece com estrutura, arquitetura de
informação e padrões de interação bem
elaborados, e mantenha-os consistentes.
Assim, pode-se acrescentar características
secundárias sem comprometer o núcleo do
app.


Evite mostrar muitas informações: amontoar
as coisas em telas pequenas confude o
usuário.


Desenvolva o projeto e funcionalidade o
máximo que puder no papel, usando
estênceis disponíveis para iPad e iPhone
como guias.


Desenvolva o mock-up do aplicativo, retire
captura das telas e visualize-as no aplicativos
de fotos para garantir que sejam bem
apresentadas.


Deﬁna o nível de personalização que sua
interface terá. Lembre-se disso em todas as
fases.


Certiﬁque-se que o usuário possa encontrar
as características mais importantes do app
em um ou dois toques. Mesmo os mais
avançados devem ser acessados em no
máximo 3 toques.


Android


Se portar algum aplicativo para Android,
alguns aparelhos trabalham com layout ﬁxo,
vale redesenhar algumas telas.


Por ter outras formas de interação, o uso de
uma app Andróid pode variar bastante.


A principal diferença em projetar para a web
e para tablet é que cada elemento tem uma
posição ﬁxa, diferente da web. Isso requer
cuidado, mas deve ser encarado com um
benefício.


Lembre-se também que o tamanho de tela
em dispositivos móveis varia bastante


Restrições


As retrições de um smartphone restringem
o projeto de uma app somente para sua
função principal.

Já em um tablet, podemos considerar a
inclusão de recursos adicionais.


Projetando para
diferentes telas


Ao projetar para iPad e para iPhone, comece
sempre pela tela maior e depois simpliﬁque o
design para a menor.


Aproveite o máximo dos modos retrato e
paisagem para incorporar diferentes pontos
de vista e funções.


Esticar um layout de um smartphone para
um tablet pode parece mais fácil, mas a
maneira indicada - embora demorada - é
repensar totalmente a interação.


Dicas


Em apps para uso em tempo real (como
jogos) é muito importante deixar os
elementos principais grandes de forma que
sejam selecionados com facilidade.


Pelas suas limitações (falta de teclado, tela
pequena e poucos botões físicos), é
necessário uma hierarquia das partes mais
importantes de cada tela.

Se um botão é apertado constantemente,
deixe-o na parte inferior da tela.


Se um ícone não chama
a atenção, ele não
cumpre sua tarefa.


O ícone é a primeira impressão que o
usuário tem do app. Se ele for mal feito, você
não terá sucesso.


O ícone NÃO precisa comunicar todas as
funções do app, mas deve parecer
proﬁssional e ter relação com a interface de
seu aplicativo.


O ícone pode ser detalhado, mas esse
detalhe não pode prejudicar o seu foco
central.


Evite colocar textos no ícone: mantenha-o
como uma representação visual do aplicativo.


Um bom ícone deve mostrar suas funções
com clareza e transparência, mas de uma
forma visualmente atraente.


Usuários de iOs são exigentes em relação
aos ícones que selecionam na tela principal.


Planejamento


Ao desenvolver um ícone, compare-o com
outros das principais categorias da app store.


Desenvolva um mock-up do ícone no meio
de outros apps.


Lembre-se de criar todos os tamanhos
possíveis para garantir que o ícone será
exibido com boa resolução.


Se a Apple colocá-lo em destaque, haverá
poucos dias para mandar uma versão em
alta-resolução.


Evite deixar para pensar no ícone muito
tarde.


Ícones simples são sempre os melhores.


Peça a alguém que não conhece o projeto
olhar o esboço de seu projeto e dizer se as
funções parecem naturais a ele.


Mostre o resultado a algumas pessoas que
não conhecem o app e conﬁra se entendem
o conceito.


Encontre um usuário com mãos grandes,
pois é a forma mais eﬁcaz para descobrir se
algum elemento está de difícil acesso.


Quando tiver um protótipo funcional,
convide alguém para um café em troca de
um teste de usabilidade informal de 10
minutos.


Faça testes ﬁnais do app em dispositivos
reais. (Ainda mais se for para Android).


Páginas Mobile


Rapidez


Bons sites mobile são elegantes e simples.
Tente entender o que as pessoas que estão
visitando o seu site vão realmente querer
ver - pesquise aos seis clientes o que é
importante para eles e faça considerações
sobre que informações eles irão querer
acessar rapidamente, tais como informações
de reserva, cardápio e localização em uma
página de um restaurante.


Arquitetura limitada


Tente manter o máximo de três níveis de
navegação em um site mobile. Alguns
designers tentam se manter em apenas dois
níveis. Usuários de sites mobile querem a
informação rapidamente, eles não irão
querer clivar em vários locais até chegar na
informação que desejam


Tipograﬁa


A antiga regra de tipograﬁa para web
ainda é válida por aqui, tente evitar fontes
com serifa a não ser que a fonte muito
boa leitura. A boa notícia é que com
fontes incorporadas, abre-se uma grande
gama de possibilidades. Ainda assim,
mantenha as coisas o mais simples
possíveis.


Imagens


Criar um gráﬁco em 72 dpi implica em uma
imagem pixelada em um iPhone4. Não há
problema em fazer uma imagem que é maior
do que o mínimo necessário - usando um
JPEG otimizado para que o arquivo não seja
muito grande - e, em seguida deixar o código
cuidar de encolhê-lo onde for necessário.


Perspectiva do usuário


Tente compreender o uso do dispositivo do
ponto de vista do usuário. Teste o seu design
em um dispositivo e peça para o seus
clientes testarem também, assim você
poderá ver que existem algumas informações
que não deveriam estar ali ou que não foram
incluídas. Teste com usuário é sempre muito
importante.


Alivie a carga


Quando as pessoas acessam um site mobile
elas não estão em casa. É possível que eles
estejam inclusive caminhando. Muito usuários
ainda tem o limite de dados. Assim, se seu
site é muito cheio de imagens, é possível que
ele saia também muito caro para o seu
usuário.


Construa
Relacionamentos


Já que o design é o que primeiro vende o seu
produto, a relação do usuário nasce entre ele
e o website. Tudo diz respeito a como ele
interage com o site e faz o que deseja. A
apresentação do site deve ser ﬂuida e
simples para poder construir um forte
relacionamento com o usuário.


Mesmas diferenças


Ainda que você precise estar consciente do
fato de que nem todo mundo está usando o
mesmo dispositivo - por exemplo, nem todos
os smartphones têm touchscreens - a
tecnologia utilizada em diferentes
dispositivos móveis é quase a mesma. Então
lembre-se que nem todos tem a mesma
resolução de tela ou formas de entrada de
dados, mas não se preocupe muito com isso.


Inspiração


Referências


http://trendwatching.com/pt/trends/
pointknowbuy/

http://blog.nielsen.com/nielsenwire/
consumer/more-us-consumers-choosing-
smartphones-as-apple-closes-the-gap-on-
android/

http://blog.iskysoft.com/category/mac/


http://developer.apple.com/library/ios/
#DOCUMENTATION/UserExperience/
Conceptual/MobileHIG/Characteristics/
Characteristics.html#//apple_ref/doc/uid/
TP40006556-CH7-SW7

http://www.tentandote.com/2010/03/02/
gallery-for-prototyping-android-applications-
en-galeria-para-prototipar-aplicaciones-de-
android-es/


http://www.rainydaymagazine.com/
RDM2010/Home/July/Week5/
RDMHomeJul3010.htm

http://emilychang.com/2010/03/ipad-
templates-and-stencils/

http://blog.vovici.com/Portals/60483/images/
Screen_resolution_by_device.png

http://www.macstories.net/ipad/imockups/


http://www.computerarts.co.uk/features/50-
tips-designing-brilliant-ios-apps

http://www.androidpatterns.com/

http://www.iosinspires.me/

http://www.iosinspires.me/category/appicons/

http://mrgan.tumblr.com/post/708404794/
ios-app-icon-sizes


Conceptual/MobileHIG/Characteristics/
Characteristics.html#//apple_ref/doc/uid/
TP40006556-CH7-SW1

Conceptual/MobileHIG/
UIElementGuidelines/
UIElementGuidelines.html


http://mobile-patterns.com/

http://pttrns.com/

http://kenyarmosh.com/blog/ios-pattern-
slide-out-navigation/

http://androidniceties.tumblr.com/

http://mobilegui.net/inspiration/


[dig2012] 12 - Interfaces mobile

Mais conteúdo relacionado

Semelhante a [dig2012] 12 - Interfaces mobile (20)

Mais de Eduardo Novais (20)

Último (20)

[dig2012] 12 - Interfaces mobile