[dig2012] 12 - Interfaces mobile

Interfaces EmbarcadasEduardo Novais - Design de Interfaces Gráficas

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.

UsoPlanejamentoTelaÍconeTeste

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 filas 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, 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.

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).

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

Flick To scroll or pan quickly.

SwipeWith one finger, to reveal the Delete button in a table-view row or to reveal Notification Center (from the top edge of the screen).With four fingers, to switch between apps on iPad.

Double tapTo zoom in and center a block of content or an image.To zoom out (if already zoomed in).

PinchPinch open to zoom in.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.

Definições

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

Defina 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 fluxograma 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.

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

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.

Android

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

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

Definições

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.

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 simplifique 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.

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 profissional 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 confira se entendem o conceito.

Encontre um usuário com mãos grandes, pois é a forma mais eficaz 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 finais 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

Tipografia

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.

Imagens

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.

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 fluida 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

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

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

Education

Transcript of [dig2012] 12 - Interfaces mobile

Detailed specifications of the satellite radio interfaces ...!PDF-E.… · radio interfaces of International Mobile Telecommunications-Advanced ... of International Mobile Telecommunications-Advanced

3D Interfaces for Mobile Phones_public_20080529

Extending Enterprise Applications to mobile interfaces-Final

Reverse Engineering Mobile Application User Interfaces With REMAUI

Mobile Interfaces to Mainframe Applications - Architecture Considerations

Assessing Mobile Touch Interfaces for Tetraplegics

Condor user interfaces for mobile terminals

Assessing Mobile Touch Interfaces for Tetraplegicsweb.ist.utl.pt/~tiago.guerreiro/amc/accessible...Assessing Mobile Touch Interfaces for Tetraplegics Tiago Guerreiro, Hugo Nicolau,

DESIGN IMPLICATIONS FOR MOBILE USER INTERFACES OF …lib.tkk.fi/Diss/2009/isbn9789522481429/isbn9789522481429.pdf · Design implications for mobile user interfaces of Internet services

Designing Mobile Interfaces

12 Robotic Interfaces

Designing Mobile Augmented Reality Interfaces for Locative ... · Designing Mobile Augmented Reality Interfaces for Locative Games and Playful Experiences Dan Burnett ImaginationLancaster

Reverse Engineering Mobile Application User Interfaces ...ranger.uta.edu/~csallner/papers/nguyen15reverse.pdf · Reverse Engineering Mobile Application User Interfaces With REMAUI

8 myths about mobile interfaces

Designing Mobile Interfaces - Goodpatch Workshop SF

Aalto - Advanced audio interfaces for mobile Javaresearch.spa.aalto.fi/publications/theses/paavola_mst.pdf · 2009-10-19 · Advanced audio interfaces for mobile Java This Master's

Mobile Interfaces for Better Living: Supporting Awareness ...

Hand Grip Pattern Recognition for Mobile User Interfaces

Multipresence-Enabled Mobile Spatial Audio Interfaces

Usability Testing On Mobile Interfaces