Para os últimos anos, ouvimos especialistas declarando a cada ano como "ano da Web móvel"; cada ano tentando soar mais convincente do que o anterior. Se 2011 será o "ano do mobile" real continua a ser visto, mas o que é indiscutível é o fato de que o uso móvel da Web está crescendo e evoluindo. À medida que evolui, o mesmo acontece com a experiência do usuário móvel, impulsionada pelos avanços na tecnologia de dispositivos móveis - a partir de navegadores melhor sobre os celulares básicos (ou telefones característica? - Lembre-se do Motorola RAZR) para a crescente adoção de smartphones e tablets.
O "Mobile Web" prazo (embora muitas vezes criticado ) é comumente utilizado para descrever acessar a internet utilizando um dispositivo móvel. Esta definição é ampla o suficiente para cobrir tudo, desde usar um navegador em um telefone recurso, ao uso de aplicativos altamente personalizado em smartphones ou comprimidos. "Há um aplicativo para que" fez dispositivo aplicações específicas a raiva do dia, com algumas empresas começando para trás com "precisamos de um aplicativo para iPhone" ao invés de compreender primeiro o que seus usuários realmente precisam, quando são móveis, os dispositivos que eles usam, e então decidir a melhor abordagem para ir móvel, que pode não ser um app, mas poderia ser um site para celular em seu lugar. Os sites móveis são universalmente acessível, menos dispendioso para desenvolver e manter, e podem ser pesquisados ​​e acessados ​​pela maioria dos telefones celulares.
(O "Mobile Web" é criticada porque implica que não são "diferentes" Webs que simplesmente não é verdade -. Não há Web Desktop, por exemplo Faz mais sentido falar de sites otimizados para usuários que acessam os sites . através de dispositivos móveis Nós estaremos usando esta perspectiva, neste artigo -. Equipe Editorial Smashing)
Este artigo centra-se na concepção da experiência do usuário para sites móveis acessado a partir de telefones celulares com telas pequenas, embora o processo pode ser aplicado para as aplicações de construção também. Como um Web designer, a boa notícia é que o processo é semelhante ao design de websites desktop - com alguns adicionais móveis somente considerações que caminham lado a lado com telas pequenas, as características do dispositivo e restrições e problemas de conectividade. A user-centered design de móveis do ciclo de vida pode ser pensado como um processo contínuo, conforme mostrado abaixo:

O curso centrado no usuário ciclo de vida móvel de design
Vamos discutir cada fase deste ciclo de vida em mais detalhes.

1. Avaliar a situação atual: Você realmente precisa de um site para celular agora?

Bobo que isso possa parecer em um artigo sobre a criação de experiências de usuário móvel website, é importante que primeiro descobrir se você realmente precisa de um site móvel. Verdade, haverá 91,4 milhões de usuários de internet móvel em os EUA até o final deste ano, mas quantos deles estão em seu público-alvo? Vendas do comércio móvel em os EUA em 2010 foram de US $ 3,4 bilhões, mas se você não está vendendo qualquer coisa online, é que isso importa para você? A estatística mais relevante é a forma como muitos de seus usuários estão acessando seu site usando dispositivos móveis. Uma maneira rápida de descobrir é claro, olhando para a sua análise de sites existentes área de trabalho para identificar o percentual de visitantes móveis, juntamente com os tipos de dispositivos e sistemas operacionais que usam para acessar seu site desktop completo. Cavar mais fundo para entender por que esses usuários visitar o seu site utilizando um dispositivo móvel - o que eles estão tentando fazer, e os conteúdos e funcionalidades que estão usando.
Agora, pense no que mais poderia ser relevante para esses usuários móveis, e por algum insight competitiva (e possivelmente inspiração), dê uma olhada em quais sites similares estão fazendo com a sua presença móvel. Seu site de desktop foi criado para apoiar alguns objetivos de negócio - pode ter sido um simples objetivo de criar a consciência ou um objetivo mais complexo de geração de receita através da venda online. Como é que um site para celular complemento que o site já existente? Identificar o conteúdo e funcionalidades que serão úteis para os usuários móveis, apoiando seus objetivos de negócio, incluindo quaisquer novas metas para celular. Salvar estes "requisitos de negócio" - nós vamos precisar deles ao decidir o que se passa no site mobile.
Se, no final deste exercício, você percebe que tem muito poucos usuários móveis, e, ocasionalmente, usar apenas um par de características (como encontrar o seu número de telefone, ou horas de operação), você pode ser melhor fora por agora apenas otimizando seu site de mesa para fazer a informação facilmente acessível por usuários móveis em vez de construir e manter um site móvel separado. Se o seu site passa a ser executado em WordPress, existem plugins que podem facilmente permitir que mobile-site com pouco esforço.
Nem todos os websites precisam ir telemóvel agora. Empresas que precisam estender os serviços de seu núcleo para seus usuários (como aqueles em viagens e bancário) certamente, mas um fabricante de aviões comerciais e aeronaves militares ou de um fornecedor de gases industriais especializados, provavelmente, não precisa de um site móvel separado agora, no entanto, que pode mudar em poucos anos. Mas se você perceber que precisa de um site para celular, vamos nos concentrar sobre a razão que você precisa: seus usuários!

2. Design Centrado no Usuário móvel Inicia com o usuário

Design centrado no usuário conta com o envolvimento do usuário durante o processo de design, levando a uma solução que os usuários vão achar útil e quiser usar. Para isso, primeiro você precisa ter uma compreensão clara de seus usuários, agrupados em um conjunto priorizado de grupos de usuários cujas necessidades podem ser pensados ​​individualmente. Para uma empresa farmacêutica, esses grupos poderiam ser pacientes, profissionais de saúde e cuidadores, com os dois primeiros grupos sendo os grupos de usuários primários, e cuidadores sendo um grupo usuário secundário com necessidades muito semelhantes aos pacientes. Identificar seus grupos de usuários-chave e criação de personas o ajudará a projetar melhor para seus usuários principais, a forma BBC fez ao construir a sua estratégia móvel do futuro .

Grupos móveis BBC usuário (tiradas de suas estratégia de futuro móvel )
Para desenvolver uma experiência de usuário móvel que se alinha com as necessidades e expectativas de seus usuários-alvo, você tem de envolver os utilizadores representativos e os seus comentários ao longo do processo. Entrada direta de seus usuários através de métodos de pesquisa primária, como usuários de observação, entrevistas e grupos focais contextual vai lhe dar insights sobre o comportamento celular, incluindo o que eles querem fazer da Web móvel, e quando e como irá utilizá-lo. Pesquisa primária vai lhe dar respostas a perguntas como:

• Por que eles usam seu site em um dispositivo móvel?
• Quais são as características que eles estão usando?
• Que recursos são cruciais para eles quando móvel?
• Quais são algumas fontes de frustração?
• Quais os dispositivos que eles usam para acessar a web móvel?

Como você construir um retrato detalhado de seus usuários e seus padrões de uso, completá-lo com pesquisa secundária sobre a indústria e as tendências do mercado móvel de Forrester , eMarketer , Nielsen e comScore , Mina de dados da comScore , DeviceAtlas e Ópera Estatal de a web móvel . Para além de uma compreensão de seu usuário e suas necessidades, você também vai obter uma melhor compreensão dos tipos de dispositivos móveis você tem que considerar ao projetar.

3. O que priorizar seu site móveis devem oferecer

Ao avaliar a necessidade de um site para celular, você tinha uma lista de recursos que você gostaria de oferecer em seu site móvel. Idealmente, estes requisitos de negócio seria alinhados com as necessidades do utilizador identificado durante a pesquisa do usuário. Se eles não se alinham, olhe para as exigências se perguntando "qual o valor que isso vai adicionar aos usuários?" Para garantir que os requisitos de sua empresa atender às necessidades do usuário e objetivos - isto é design centrado no usuário, afinal.
Como é frequentemente o caso, se você acabar com mais recursos do que você pode segurar no lançamento, priorizar o que você pode oferecer, inicialmente, tendo em consideração o tempo, esforço e recursos disponíveis. Por mais difícil que seja, resistir à tentação de tentar construir em todas as características desde o início. Como 37signals de forma tão eloquente: " Construir uma metade do produto, não um produto meia-burro ".

4. Considerações sobre design de móveis

Agora que o terreno tenha sido concluída, é hora de começar a parte divertida: projeto real! As etapas de projeto e princípios básicos da área de trabalho design do site aplica para projetar móveis, com a adição de algumas importantes considerações de design móvel. Os dispositivos móveis são dispositivos pessoais com telas pequenas, sempre ligado, tem conexões lentas e intermitentes são usados ​​principalmente quando o usuário é - você adivinhou - móveis.
Isto traz-nos à grande "C" do celular: Contexto. Usuários móveis não são cativos, como usuários de computador são. Um usuário de desktop usando o seu site está sentado confortavelmente, e em um cenário de pior caso, pode ser, simultaneamente, ouvir música e de forma intermitente tweeting. Eles são, porém, não fazendo tudo o que com uma mão, enquanto caminhava ao redor. Imagine um usuário móvel a tentar encontrar as direções usando um telefone minúsculo com conectividade intermitente, enquanto tira pendurados e balançando em um trem do metrô com condições sub-ótimas de iluminação, ensurdecidos pelo barulho de rodas sobre trilhos - que lhe dá algum contexto de uso. Simplificando, o contexto é sobre o meio ambiente e condições de utilização, incluindo distrações, multitarefa, movimento, as condições de iluminação e conectividade pobre como você pode ver no vídeo abaixo:

Projetando para Mobiles: Usuários & Contexto da Niek Dekker sobre Vimeo .
Em Tapworthy - Projetando iPhone Apps Grande, furúnculos autor Josh Clark baixo mentalidade do usuário móvel a uma das três possibilidades:

• Microtasking: Usando o telefone para curtos períodos de atividade.
• Local: Descobrir o que está ao redor do usuário.
• Bored: Usando o telefone para distração / entretenimento.

Manter todos esses fatores em mente, aqui estão algumas considerações específicas de design móvel para prestar atenção ao projetar para a Web móvel:

Design para ecrãs mais pequenos

De tela grande de um designer para pequenos laptops e telas móveis
A diferença mais visível entre um dispositivo móvel e um ambiente de trabalho é o tamanho da tela. Durante anos, temos vindo a aumentar a resolução de tela mínima de projeto para nós (lembre-se os dias de "otimizado para 640 x 480"?). Tamanhos de tela do telefone móvel têm também vindo a aumentar, mas até mesmo a tela do lindo do iPhone 4 ainda é pequeno em comparação com um padrão de 1024 × 768 design de secretária (projetado por alguém usando um 2560 × 1440 display). Isso fica mais complicado quando você fator na faixa de tamanhos de tela utilizado por seus usuários móveis. E não vamos esquecer que alguns smartphones pode mudar a orientação e "seus usuários esperam que o site para redimensionar em conformidade. Mesmo que muitos navegadores smartphone hoje pode miniaturizar websites desktop, eles inadvertidamente quebrar a experiência do usuário, tornando os usuários de zoom in e out, o que nos leva à abordagem tradicional de criar um site separado para dispositivos móveis.
Bryan Rieger aborda a questão do design para vários tamanhos de ecrã com um processo de quatro etapas:

• Definir grupos de dispositivos por telas agrupamento com larguras semelhantes em conjunto, resultando em um número razoável de grupos,
• Criar um design de referência padrão que irá adaptar-se a telas menores e maiores,
• Definir regras para conteúdo e adaptação de projeto para exibi-la bem e
• Optar por padrões da web e um layout flexível.

Enquanto você deve idealmente ser projetar para dispositivos móveis utilizados por seus usuários, para uma lista mais genérica de navegadores para apoiar, seguir as recomendações Peter-Paul Koch de apoiar Safari do iPhone, o Opera Mini, Android WebKit, BlackBerry (WebKit e mais velhos para os EUA), Nokia WebKit (Europa).
A outra abordagem defende um único site, que atende a todos os dispositivos, móvel ou não, baseado em Lucas W de móveis Primeiro princípio (ver apresentação ). Móveis Primeiro começa com um projeto para dispositivos móveis, que podem então ser progressivamente melhorado para sites desktop. Para vê-lo em ação, dê uma olhada no Yiibu de
prova de conceito do site com base em Primeiro Mobile.
Selecionar sua abordagem de design não é uma opção preto e branco. Pense sobre o que irá funcionar melhor para sua situação. Independentemente da abordagem escolhida, ainda existem outras considerações que vão para a construção de um Web móvel.

Simplificar a navegação

Sem um mouse para apontar e clicar, os usuários móveis têm que confiar em minúsculos teclados, trackballs e sensível ao toque para navegar sites para celular. Adicionar na telinha com a necessidade de completar as tarefas com rapidez e eficiência, e navegação clara e intuitiva torna-se crucial:

• Uma abordagem comum que trabalha para as páginas início da maioria dos sites é uma lista de links para as principais características e conteúdos, priorizados com base nas necessidades do usuário. Estes muitas vezes acabam sendo apresentado na vertical em vez do modelo horizontal usado em sites desktop.
• Reduzir o número de categorias e níveis de navegação, e reorganizar com base na prioridade, apresentando as categorias mais importantes primeiro.
• Use etiquetas clara, concisa e consistente para a navegação em todo o site.
• Fornecer acesso atalhos de teclas para telefones recurso, assim os usuários podem digitar um número do teclado (0-9) para rapidamente acessar um link (AA e exemplos CNN abaixo).
• Ao projetar para o toque, certifique-se o tamanho da torneira (largura ou altura) para o item de navegação é de pelo menos 30 pixels.
• Fazer ligações óbvias, e fornecer claro e imediato feedback visual para mostrar o link selecionado.
• Ao exibir os links de navegação principal em páginas internas, coloque-os na parte inferior em vez do topo, para evitar ter de usuários guia por todos eles para chegar ao conteúdo principal na tela (CNN exemplo abaixo). Se não exibir todos os links, a abordagem da Southwest de listar links importantes (Home, reservas de ar e verifique Vôo In) nas telas secundárias funciona bem.
• Na parte inferior da página inicial do celular, oferecer um link para o site completo que os usuários possam mudar para o site desktop, e vice-versa.
• Breadcrumbs não são normalmente não usados ​​em sites de móveis desde navegação geralmente não é tão profunda que os usuários precisam de um back trilha.

American Airlines, CNN, e Sudoeste simplificar a navegação móvel

Priorizar Conteúdo

Seja sucinto. Menores tamanhos de tela requerem ainda mais atenção cuidadosa com o conteúdo exibido para o usuário. Coloque no chapéu do seu editor e cortar conteúdos desnecessários, em seguida, corte um pouco mais. Quando estiver pronto, priorizar o conteúdo e exibir o conteúdo mais importantes primeiro.

Site móvel da Amazônia prioriza o que ele oferece aos usuários na página inicial

Minimizar a entrada de usuário

Tendo usado minúsculos teclados numéricos e telas sensíveis ao toque nessas DataBank Casio relógios para mais de 20 anos (sim, eu admito), eu sei a dor envolvida com a introdução de dados em telas minúsculas. Os telefones têm característica tedioso teclados numéricos para entrada, enquanto os smartphones têm teclados minúsculos, seja real ou virtual, que estão sujeitas a gordura dos dedos erros.

• Mantenha o seu URL mais curto possível, tendo em mente, os usuários de telefone característica tem que pressionar uma tecla várias vezes para a maioria dos alfabetos (tecla for pressionada por "com" são 222-666-6). Seguem as convenções de nomenclatura que URL usuários estão acostumados, como m.site.com ou mobile.site.com.
• Use mecanismos de entrada alternativos sempre que possível. Enquanto os aplicativos podem usar as capacidades do dispositivo de entrada, incluindo movimento, câmera, giroscópio, e voz, sites móveis estão lentamente começando a usar alguns desses recursos, como geolocalização.
• Limite de entrada para os campos essenciais. Por exemplo, se o registro é necessário, limitá-la aos campos mínimo exigido, e utilizar alternativas mais curtos, como um código postal em vez de cidade e estado. Volkswagen móveis captura de geolocalização, mas não usá-lo quando tentar agendar um test drive. Não só isso, a forma móvel é mais longa e mais tedioso do que a um desktop.
• Selecione a melhor opção de entrada móvel (por exemplo, permitindo aos usuários escolher entre uma lista de opções é muitas vezes mais rápido do que digitar).
• Usar os valores padrão inteligentes. Site móvel do NJ Transit lembra suas seleções passado e padrões a data para a data de hoje.
• Quando os usuários precisam fazer o login, oferecer a opção de ficar conectado, especialmente desde que os dispositivos móveis são pessoais e geralmente não partilhado.

NJ Transit usa geolocalização, lembra-se de seleções e padrões para a data de hoje

VW pede localização, mas não consegue usá-lo (a forma móvel também é mais do que a versão desktop). Ver imagem maior

Projeto para a Conectividade Intermitente

Mesmo com provedores de serviços móveis a implantar-se mais rápido G-velocidade, conectividade móvel permanece intermitente e nem abordagem velocidades de banda larga estamos tão acostumados em nossas conexões com e sem fio (nem mesmo telefone de Justin Bieber 6G !). Os usuários pagam para acesso à internet em seus celulares, e nem todos têm planos de dados ilimitados, assim como designers móvel, devemos pensar pequeno quando projetando para celular:

• Manter os tamanhos de página pequena para que eles possam carregar rapidamente e estão dentro das limitações de memória da maioria dos telefones.
• Remover código desnecessário, comentários e tags opcionais.
• Reduzir imagens em tamanhos e resoluções apropriadas para dispositivos móveis.
• Minimizar o número de imagens incorporadas para reduzir o número de solicitações HTTP e para acelerar o tempo de carregamento da página.

Consistência oferecer Cross-Channel e Integração

Quando você cria um site para celular, você passar para multi-canal território e, com isso, a necessidade de manter uma experiência de usuário consistente e integrada em todos os canais.

• Equilíbrio de forma e função. Continental Airlines tem um minimalista, a abordagem sem frescuras, usando apenas um logotipo para sua marca visual, enquanto a Southwest faz o seu site para celular um pouco mais visual com cores e ícones.
• Manter a continuidade. Ao assinar em no site da Amazon móvel, os usuários podem visualizar e gerenciar seu carrinho de compras, listas de presentes e ver e ordens de pista, como fariam no site completo. Outro bom exemplo da criação é Kindle para a web que, quando lançado, permitirá que você continue lendo um ebook Kindle onde você parou, independentemente do dispositivo que você usado pela última vez. Seria também sincronizar sua biblioteca, favoritos, notas e destaques.
• Estender a experiência do usuário. Sephora usuários móveis podem olhar para cima comentários e avaliações de produtos (UPC ou pelo nome) quando tentando decidir entre dois ou mais produtos na loja.
• Construir uma experiência de usuário consistente. Citibank vai utilizadores do site completo, para o site smartphone ou um iPhone app ter a mesma experiência do usuário em todos esses canais (embora alguns usuários de telefones recurso não pode usar o site em todos).

Forma de equilíbrio e função; Sephora estende a experiência para o contexto móvel

Outras Considerações

• Detectar se os usuários estão usando um navegador móvel e encaminhá-los para o site móvel (com um link em que a tela para mudar para o site completo).
• Não confie em tecnologia que não é universalmente suportado por dispositivos o seu público como Java, JavaScript, cookies, Flash, frames, pop-ups e refresca auto.
• Se você deve fazer o deslocamento do usuário, fazê-los rolar em apenas um sentido (a maioria dos sites de rolagem vertical).
• Use curto, títulos descritivos para suas páginas para bookmarking fácil e recall.
• Embora existam defensores para a criação de sites separados móvel para telefones celulares, smartphones e iPhones (sim, seu próprio site), outros já passaram por este caminho e estão optando por um único site móvel. Facebook, uma das propriedades mais visitadas móveis, recentemente decidiu unificar seus sites para celular em uma interface .

5. Prototype Review & Refine

O processo de prototipagem rápida (de design melhor e mais rápido Com Prototipagem Rápida )
Prototipagem é importante em um processo iterativo centrado no usuário processo de design, permitindo aos designers rapidamente visualizar partes do site de revisão, com os usuários e refinar o projeto. Protótipo e, muitas vezes através do processo de design, começando com esboços em papel de baixa fidelidade, refinando-os em wireframes médio fidelidade e posteriormente em projetos de alta fidelidade, continuamente testes com usuários e interagindo com base no seu feedback.
Confira o seu código para o cumprimento, validando seu site móvel usando o W3C mobileOK Checker ou mobiReady para descobrir e corrigir possíveis problemas que os usuários podem enfrentar. emuladores móvel e simuladores são úteis durante o desenvolvimento, mas nada bate testar seu site em dispositivos reais que seus usuários está usando.

Melhorias em curso

Seu trabalho não é feito quando você lançar o seu site móvel - que você acabou de um círculo completo. É hora de monitorar o uso do site e feedback dos usuários para identificar as alterações e pedidos de novas funcionalidades, além de todos os recursos que não o fizeram na primeira versão. Avaliar periodicamente o seu site móvel em relação aos concorrentes através de um scorecard (amostra do Yankee Group [ pdf ]) para identificar áreas potenciais de melhoria.

Em Conclusão

A internet móvel é diferente, e pode ser assustador, mas o processo de design é similar o suficiente para designers da Web para facilitar em design móvel. Concepção do site móvel perfeito é uma tarefa impossível, mesmo para especialistas, mas usando um iterativo centrado no usuário processo de design pode ajudar a criar a melhor experiência para nossos usuários com a sua ajuda.

Recursos

• Estatísticas navegador (drill down para celular): http://gs.statcounter.com/
• Resumo do navegador do mercado móvel: http://www.quirksmode.org/mobile/mobilemarket.html
• Lista de browser móvel e conselhos de teste: http://www.quirksmode.org/blog/archives/2010/04/mobile_browsers.html
• Dados móveis e tendências por Nielsen: http://blog.nielsen.com/nielsenwire/category/online_mobile/
• HTML5 capacidades de móveis
• TIME 50 Melhores Websites: The Mobile Edition (apps mais de web): http://techland.time.com/2010/08/25/times-50-best-websites-the-mobile-edition/
• Móveis Melhores Práticas Web: http://www.w3.org/TR/mobile-bp/
• O Ano Em 2010 Mobile comentário: http://www.comscore.com/Press_Events/Presentations_Whitepapers/2011/ 2010_Mobile_Year_in_Review

Ferramentas

• Web móvel Nokia Modelos:
  http://www.forum.nokia.com/Develop/Web/Mobile_web_browsing/Web_templates/
• 8 Tools For Easily Creating a Mobile Version of Your Website (Mashable):
  http://mashable.com/2010/12/16/create-mobile-site-tools/
• HTML5 Mobile Boilerplate Template: http://html5boilerplate.com/mobile

Livros

• Designing the Mobile User Experience by Barbara Ballard
• Mobile Web Design by Cameron Moll
• Strategic Mobile Design: Creating Engaging Experiences by Joseph Cartman and Richard Ting
• Mobile Design and Development: Practical Concepts and Techniques for Creating Mobile Sites and Web Apps by Brian Fling