4. 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 ;-)
sábado, 21 de abril de 2012
21. O dedo é maior e menos preciso que um
mouse.
sábado, 21 de abril de 2012
22. As área ativas em uma interface touchscreen
devem ter uma margem de erro, sem
controles muito próximos.
sábado, 21 de abril de 2012
23. O tamanho mínimo que a Apple sugere é de
44 x 44 px.
sábado, 21 de abril de 2012
24. Se a área visual de um controle é menor que
a mínima recomendada, certifique-se de que
a área da tela ativa que responde ao toque
de um usuário seja suficiente grande para
garantir a operação.
sábado, 21 de abril de 2012
26. 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.
sábado, 21 de abril de 2012
28. 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.
sábado, 21 de abril de 2012
29. Esquemas de cores oferecem um pouco mais
de liberdade criativa.
sábado, 21 de abril de 2012
30. Uso
Planejamento
Tela
Ícone
Teste
sábado, 21 de abril de 2012
45. Comece o processo de design com a
estrutura de navegação e, em seguida crie os
blocos de funções principais.
sábado, 21 de abril de 2012
46. Desenhe o fluxograma completo do
aplicativo conectando todas as telas e
pontos.
sábado, 21 de abril de 2012
47. Pense no seu App uma tela por vez.
Concentre-se no objetivo principal que cada
tela vai ter.
sábado, 21 de abril de 2012
48. 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.
sábado, 21 de abril de 2012
49. Evite mostrar muitas informações: amontoar
as coisas em telas pequenas confude o
usuário.
sábado, 21 de abril de 2012
51. Desenvolva o projeto e funcionalidade o
máximo que puder no papel, usando
estênceis disponíveis para iPad e iPhone
como guias.
sábado, 21 de abril de 2012
55. Desenvolva o mock-up do aplicativo, retire
captura das telas e visualize-as no aplicativos
de fotos para garantir que sejam bem
apresentadas.
sábado, 21 de abril de 2012
58. Defina o nível de personalização que sua
interface terá. Lembre-se disso em todas as
fases.
sábado, 21 de abril de 2012
59. Certifique-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.
sábado, 21 de abril de 2012
65. A principal diferença em projetar para a web
e para tablet é que cada elemento tem uma
posição fixa, diferente da web. Isso requer
cuidado, mas deve ser encarado com um
benefício.
sábado, 21 de abril de 2012
66. Lembre-se também que o tamanho de tela
em dispositivos móveis varia bastante
sábado, 21 de abril de 2012
69. 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.
sábado, 21 de abril de 2012
70. Projetando para
diferentes telas
sábado, 21 de abril de 2012
71. Ao projetar para iPad e para iPhone, comece
sempre pela tela maior e depois simplifique o
design para a menor.
sábado, 21 de abril de 2012
72. Aproveite o máximo dos modos retrato e
paisagem para incorporar diferentes pontos
de vista e funções.
sábado, 21 de abril de 2012
73. 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.
sábado, 21 de abril de 2012
75. Em apps para uso em tempo real (como
jogos) é muito importante deixar os
elementos principais grandes de forma que
sejam selecionados com facilidade.
sábado, 21 de abril de 2012
76. 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.
sábado, 21 de abril de 2012
77. Uso
Planejamento
Tela
Ícone
Teste
sábado, 21 de abril de 2012
78. Se um ícone não chama
a atenção, ele não
cumpre sua tarefa.
sábado, 21 de abril de 2012
79. O ícone é a primeira impressão que o
usuário tem do app. Se ele for mal feito, você
não terá sucesso.
sábado, 21 de abril de 2012
80. O ícone NÃO precisa comunicar todas as
funções do app, mas deve parecer
profissional e ter relação com a interface de
seu aplicativo.
sábado, 21 de abril de 2012
102. Uso
Planejamento
Tela
Ícone
Teste
sábado, 21 de abril de 2012
103. 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.
sábado, 21 de abril de 2012
104. Mostre o resultado a algumas pessoas que
não conhecem o app e confira se entendem
o conceito.
sábado, 21 de abril de 2012
105. Encontre um usuário com mãos grandes,
pois é a forma mais eficaz para descobrir se
algum elemento está de difícil acesso.
sábado, 21 de abril de 2012
107. Quando tiver um protótipo funcional,
convide alguém para um café em troca de
um teste de usabilidade informal de 10
minutos.
sábado, 21 de abril de 2012
112. 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.
sábado, 21 de abril de 2012
114. 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
sábado, 21 de abril de 2012
116. A antiga regra de tipografia 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.
sábado, 21 de abril de 2012
118. Criar um gráfico 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.
sábado, 21 de abril de 2012
120. 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.
sábado, 21 de abril de 2012
122. 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.
sábado, 21 de abril de 2012
123. Construa
Relacionamentos
sábado, 21 de abril de 2012
124. 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 fluida e
simples para poder construir um forte
relacionamento com o usuário.
sábado, 21 de abril de 2012
126. 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.
sábado, 21 de abril de 2012
132. 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/
sábado, 21 de abril de 2012
133. 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/
sábado, 21 de abril de 2012
134. 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/
sábado, 21 de abril de 2012
135. 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
sábado, 21 de abril de 2012
136. http://developer.apple.com/library/ios/
#DOCUMENTATION/UserExperience/
Conceptual/MobileHIG/Characteristics/
Characteristics.html#//apple_ref/doc/uid/
TP40006556-CH7-SW1
http://developer.apple.com/library/ios/
#DOCUMENTATION/UserExperience/
Conceptual/MobileHIG/
UIElementGuidelines/
UIElementGuidelines.html
sábado, 21 de abril de 2012
137. http://mobile-patterns.com/
http://pttrns.com/
http://kenyarmosh.com/blog/ios-pattern-
slide-out-navigation/
http://androidniceties.tumblr.com/
http://mobilegui.net/inspiration/
sábado, 21 de abril de 2012