Considerações sobre design de aplicativos móveis para designers da Web
Em todos os lugares que você vira esses dias, as pessoas estão falando sobre aplicativos para dispositivos móveis . Apps para isso, aplicativos para isso.
As estatísticas também foram surpreendentes. Um estudo recente de Agitação mostrou que os consumidores gastaram 81 minutos por dia usando aplicativos móveis, em comparação com 74 minutos de navegação na web.
À medida que mais pessoas começarem a gastar tempo em apps em comparação com a Internet, talvez você esteja se perguntando se o design de aplicativos para dispositivos móveis é uma área que você deve começar a explorar e como as suas habilidades de design da Web são transferíveis.
Neste post, fizemos check-in com vários especialistas no campo para obter suas perspectivas. Unindo-se a nós estão Robin Nixon, Aaron Maxwell, Sarah Lynn, Mike Gualtieri, Josh Clark e JD Biersdorfer.
Robin Nixon
Robin Nixon é um autor técnico e desenvolvedor web, e é o autor do novo livro HTML5 para iOS e Android: um guia para principiantes .
sQue conselho você daria para os web designers que estão pensando em entrar na área de design e desenvolvimento de aplicativos para dispositivos móveis?
Na minha opinião, a maneira mais rápida de entrar no desenvolvimento de aplicativos é garantir que você esteja atualizado com os padrões mais recentes de HTML (versão 5) e CSS (versão 3) e seja o mais fluente possível com JavaScript, porque em breve É provável que haja soluções para escrever um único aplicativo da Web que possa ser transformado em aplicativos nativos para todos os aplicativos iOS, Android, Web OS, Windows Phone e muito mais. Isso evitará que você tenha que aprender várias linguagens complexas e ambientes de desenvolvimento, como Java, Objective C, .NET e assim por diante, e o tempo necessário para transportar um projeto para vários dispositivos diferentes.
Por exemplo, com uma base sólida em HTML, CSS e JavaScript, você pode facilmente criar ótimos aplicativos da Web que também podem ser transformados em aplicativos independentes usando as informações do meu livro HTML5 para iOS e Android ou há produtos disponíveis na Internet para ajude a agilizar o processo.
Com a Microsoft agora afirmando que os aplicativos do Windows 8 serão criados em HTML e JavaScript, há ainda mais razões para garantir que você tenha um forte conhecimento dessas tecnologias, particularmente porque a Microsoft está se movendo para o conceito de uma única interface de usuário até 2015 o visto agora no Windows Phone 7 - e especialmente a sua próxima atualização do Mango).
Como são transferíveis as habilidades na web?
As habilidades da Web são altamente transferíveis para o desenvolvimento de aplicativos, se você estiver usando as três tecnologias de HTML, CSS e JavaScript para criá-las. Mas se você planeja adotar a rota nativa e escrever seus aplicativos em Objective C (para iOS) ou Java (para Android), precisa de mais experiência de programação do que de desenvolvimento web, e há uma curva de aprendizado bastante acentuada para cada .
Felizmente, para a grande maioria dos aplicativos, é possível usar tecnologias da Web para obter resultados semelhantes à criação de código nativo. É somente quando você chega a funções de tempo crítico, como os requisitos de alta taxa de quadros de jogos de ação rápida, que você precisa retornar ao idioma nativo de um dispositivo ou sistema operacional.
Na sua opinião, quais aplicativos você acha que são bons exemplos de um aplicativo bem projetado?
Eu realmente não gosto de mencionar quaisquer aplicativos em particular como representando um bom design, pois há muitos deles, mas desde que você fez a pergunta, sem dúvida, um aplicativo excelente é Theodore Gray's Os elementos , que é uma exploração 3D interativa de todos os elementos, na qual você quase pode imaginá-los tocando, pois você pode girar cada amostra, movendo-os com as pontas dos dedos e até visualizá-los em 3D. Para mim, este é um exemplo de onde um eBook (que é o que realmente é) se torna muito mais do que um simples livro para a tradução de livros eletrônicos (que a maioria dos outros eBooks são), levando os livros a um nível totalmente novo.
Os elementos
Como você vê esse tempo no web design?
Robin Nixon: Acredito que neste momento é o momento mais emocionante para programadores e desenvolvedores desde o início dos anos 80, quando os microcomputadores surgiram pela primeira vez. Uma vez que o PC assumiu o trono de computação, apenas os Macs e o sistema operacional Linux ofereceram alguma concorrência real (e pouco disso). Mas agora as guerras do sistema operacional estão ativadas novamente, desta vez impulsionadas pela utilização exponencial de dispositivos móveis como telefones e tablets, e o download fenomenal de aplicativos para eles, o que significa que há um mundo de oportunidades por aí. Na minha opinião, "há ouro neles colinas."
Aaron Maxwell
Aaron Maxwell é o fundador do Mobile Web Up, um design da web para celular agência.
O que os web designers devem pensar ao embarcarem na área de aplicativos da web?
Muitos dos mesmos conceitos ainda se aplicam. Como designer, pense em quais ações você deseja que o usuário possa realizar - quais experiências você deseja que elas possam ter. Esse foco geralmente é o melhor lugar para começar.
Os menus são mais eficazes quando não sobrecarregam com muitas opções. Organize-se em uma estrutura hierárquica de detalhamento, com não mais que uma dúzia de opções em cada nível. Considere se o uso de uma navegação com guias ajudará o usuário a realizar rapidamente a ação diferente de que precisam.
O espaçamento de elementos é complicado no celular. Extra padding é uma técnica muito útil na área de trabalho para agrupamento semântico; você pode colocar um grupo de widgets, imagens ou caixas de texto juntos e distingui-los de um grupo diferente apenas pela separação do espaço vertical e horizontal.
Mas em uma tela de celular, você só tem muito espaço para trabalhar. Assim, o designer deve ser mais econômico com a maneira como os elementos são separados espacialmente, preenchendo apenas alguns pixels, em vez de dezenas. Isso pode funcionar incluindo outras sugestões. Cantos arredondados ao redor de um perímetro ajudam a sugerir agrupamento. E diferentes cores de fundo também podem comunicar uma mudança de contexto.
O que você omite é pelo menos tão importante quanto o que você coloca. Pense nisso da seguinte forma: cada item que você adiciona ao menu de configurações, por exemplo, tem um custo em complexidade adicional, no tempo e na atenção do usuário. Considere cuidadosamente se algum recurso ou elemento vale a pena, especialmente considerando o tipo de ambientes de alta distração que os aplicativos móveis tendem a ser usados.
Na sua opinião, quais aplicativos exemplificam um bom design?
É importante estudar outros aplicativos móveis de grande sucesso para descobrir o que é eficaz. Veja os nomes famosos: Facebook, Skype, qualquer que seja o cliente Twitter mais popular esta semana. Pergunte aos seus amigos e familiares quais aplicativos eles usam mais e tente descobrir o motivo. (Dica: eles podem não saber conscientemente o porquê, portanto, perguntar diretamente a eles não ajuda muito.) Padrões de interface do usuário móvel.
Sarah Lynn
Sarah Lynn é um web designer e criativo e proprietário da Sarah Lynn Design.
Como você sugere que os designers aprendam sobre design de aplicativos móveis?
Descobri que algumas das melhores maneiras de aprender a projetar aplicativos são pesquisando o mercado. Veja alguns dos aplicativos que estão por aí, analisando sua funcionalidade, os elementos que eles utilizam que já fazem parte das ofertas do telefone e como eles poderiam ser melhorados para serem mais fáceis de usar. Estude as interações de diferentes elementos e como diferentes aplicativos se comparam. Muitas empresas já dedicaram tempo para fazer testes extensivos de usuários. Aprenda com o que eles já desenvolveram e encontre maneiras de desenvolvê-los e torná-los melhores.
Existem muitos livros excelentes para você começar. Uma que eu recomendo é um livro de Suzanne Ginsburg intitulado Criando a experiência do usuário do iPhone . Se é claro que você está interessado no mercado de iOS. Ele fala sobre o teste do usuário e como planejar um design de aplicativo. Um ótimo lugar para começar quando você não tem certeza sobre o processo de criação de um aplicativo.
Aprender como obter feedback do usuário e planejar muito o papel antes de ir para o computador é uma grande habilidade para qualquer designer de aplicativos (ou designer interativo em geral). Outra ótima maneira de aprender é entrar em contato com um designer de aplicativos que já está produzindo um ótimo trabalho. Peça-lhes para ser um mentor e dar-lhe quaisquer indicações que estejam dispostos a oferecer. A maioria dos designers está disposta a passar alguns momentos do seu tempo, se você pedir muito bem. Obtenha feedback de seus amigos e outros designers que você conhece. Mostre a eles seus protótipos e receba o feedback deles.
Na sua opinião, como são transferíveis as habilidades de design da Web para o design de aplicativos?
Um pouco transferível. Eu diria que cai mais no reino do design de interação como um todo. Que engloba ambos.
Há muitas coisas diferentes que você precisa considerar, no entanto, devido ao tamanho dos dispositivos, requisitos das diferentes plataformas e, simplesmente, devido à maneira como os usuários interagem com os aplicativos em comparação a um site. Os perfis de usuários de dispositivos móveis podem variar um pouco, desde o típico usuário móvel em trânsito até o usuário móvel que simplesmente fica com preguiça de pegar o laptop e usa seus aplicativos enquanto fica em casa (inclusive eu). padrões e design para se adequar a diferentes estilos de vida podem ser semelhantes, de certo modo, ao design de um website. Não importa qual o meio que você está sempre procurando para projetá-lo em torno de seu público-alvo.
Aprender a pensar em um formato menor e muitas vezes menos flexível pode ser um desafio. O mesmo vale para pensar sobre paisagem vertical e como você pode adaptar seu aplicativo para trabalhar nos dois sentidos. Aproveitar as ferramentas internas do dispositivo móvel é outra razão pela qual a pesquisa é tão importante quando se trata de projetar aplicativos. É quase melhor escolher uma plataforma e aprender os detalhes dela, em vez de tentar aprender todas. Pode ser muito assustador e esmagador se você tentar aprender tudo de uma vez.
Assim como qualquer novo meio, requer a vontade de aprender e manter-se atualizado com o mercado acelerado para ter sucesso.
Mike Gualtieri
Mike Gualtieri, é analista principal da Forrester Research e autora do novo relatório, Práticas recomendadas para design de aplicativos para dispositivos móveis .
O que um designer de aplicativos precisa dar atenção especial ao projetar uma boa experiência do usuário?
As expectativas do usuário são maiores para aplicativos para dispositivos móveis do que para websites. Os aplicativos para iPhone da Apple trouxeram o design de cachet para aplicativos móveis. Além disso, os recursos de toque e gesto fornecem novas maneiras de interagir com aplicativos. O primeiro passo para criar ótimos aplicativos é entender melhor os usuários do que eles mesmos. A pesquisa quantitativa e qualitativa tradicional é importante para criar personas (pessoas fictícias que representam seus usuários). O excelente design vem da imaginação - o designer imaginando o que um usuário acharia útil, utilizável e desejável no contexto do aplicativo.
Para aplicativos móveis em particular, os designers devem considerar as cinco dimensões do contexto de design móvel: localização, locomoção, imediação, intimidade e dispositivo.
Fonte: Forrester Research, Inc.
Que conselho você daria para os web designers pensarem em seguir nessa direção?
Faça. Design de aplicativos móveis para smartphones e tablets é uma oportunidade crescente. Todo mundo precisa de um ótimo design. Existem três caminhos para o desenvolvimento de aplicativos móveis:
- Aplicativos nativos. Se você tem habilidades em Javascript, então você tem algumas habilidades de programação. Não se deixe intimidar pelo Objective C para iPhone ou Java para Android. Percorra um livro em qualquer um deles e você será capaz de ter uma ideia rápida se isso for algo que você possa resolver. Nem todos os web designers poderão participar sem mais treinamento.
- HTML5. Apps
- Híbrido. É um aplicativo nativo que renderiza HTML5 dentro dele.
Todos esses caminhos de desenvolvimento exigem design.
Josh Clark
Josh Clark é designer, desenvolvedor e autor de Tapworthy: Criando ótimos aplicativos para iPhone e Melhores apps para iPhone: o Guia para Discriminação de Downloaders .
Que conselho você daria para os web designers interessados em migrar para o design e o desenvolvimento de aplicativos? O que eles precisam aprender?
Em termos das tecnologias atuais de design, pode até não haver necessidade de aprender muito mais. Você pode fazer algumas interfaces de aplicativos impressionantes usando nossos amigos HTML, CSS e JavaScript testados e comprovados. Eu não estou falando apenas de aplicativos tradicionais da web aqui, mas também dos chamados "aplicativos híbridos". São aplicativos cujas interfaces são projetadas com HTML, mas entregues como aplicativos nativos para as várias lojas de aplicativos. É como distribuir seu aplicativo da web por meio da loja de aplicativos. Para web designers, essa é uma maneira acessível de começar a projetar aplicativos da web sem aprender uma linguagem de programação.
Jonathan Stark escreveu dois ótimos livros que oferecem uma visão geral de como fazer isso, usando um projeto de código aberto chamado PhoneGap, que agrupa seu aplicativo da web em seu próprio navegador como um aplicativo nativo: Construindo aplicativos para iPhone com HTML, CSS e JavaScript e Criando aplicativos para Android com HTML, CSS e JavaScript .
Aqui está a coisa: enquanto você pode fazer coisas notáveis com HTML5 e CSS3, essas tecnologias simplesmente não conseguem se igualar ao polimento e entusiasmo dos aplicativos do Real McCoy, software criado com a linguagem nativa do dispositivo. Se você deseja criar aplicativos com gráficos arregalados, animações, widgets nativos e acesso total a todo o dispositivo, é melhor deixar você nativo. Isso significa que você precisa codificar aplicativos do iPhone em Objective-C, aplicativos Android em Java e assim por diante. Estas são linguagens de programação sem brincadeira e podem representar uma escalada íngreme para os web designers aprenderem. Se você seguir esse caminho, pode querer associar-se a um programador mais experiente para ajudar a tornar seus projetos mais reais. Enquanto isso, experimentar com o design de aplicativos com HTML, CSS e Javascript pode ser uma ótima maneira de se familiarizar com a plataforma e até criar protótipos rápidos para aplicativos nativos.
Quanto ao processo de design propriamente dito, o design de experiências móveis difere de maneiras importantes do design de desktop. As duas pegadinhas para os recém-chegados são ergonomia e contexto.
Para dispositivos com tela sensível ao toque, você tem problemas ergonômicos honestos a serem enfrentados. Você está projetando uma interface para dedos e polegares, e isso significa que você tem que considerar questões de conforto, onde seu polegar naturalmente descansa na tela? Mais do que isso, existem problemas de visibilidade. Quando você está trabalhando uma interface à mão, obviamente está obscurecendo a tela. Isso significa que você precisa projetar seus controles para que eles não interfiram no conteúdo. Ambas as considerações - conforto e visibilidade - explicam por que a maioria dos smartphones com tela sensível ao toque exibe seus principais controles e navegação na parte inferior da tela. É aí que o seu polegar descansa ao usar o telefone com uma mão, e isso também significa que você pode trabalhar com os controles sem atrapalhar o conteúdo. Isso é exatamente o oposto do que estamos acostumados na área de trabalho, onde os menus e controles primários vão para o topo da tela.
A outra área que é nova a considerar é o contexto. Como e onde as pessoas usarão esse aplicativo? Como isso afeta suas prioridades e os recursos que você deve colocar na frente e no centro? Você tem que ter cuidado aqui. Um mito evoluiu de que há apenas um tipo de usuário móvel: apressado, apressado, distraído. Esse é certamente o caso, às vezes, mas não o tempo todo. O celular não é apenas em movimento: está no sofá, na cozinha, esperando no aeroporto por um vôo atrasado. Todas essas situações são momentos em que seu público tem muita atenção de sobra e pode realmente gastar tempo com seu aplicativo. Ao mesmo tempo, os dispositivos móveis também podem fazer mais do que os computadores de mesa porque estão carregados com todos esses sensores que efetivamente lhes dão superpoderes: GPS, microfone, câmera, toque, giroscópio, bússola. Esse contexto de dispositivo define como seu público-alvo usa o smartphone e espera usar seu aplicativo.
Tudo isso significa que você deve considerar como o contexto do dispositivo afeta as prioridades do usuário, e essas prioridades provavelmente serão diferentes das prioridades de desktop. Mas há um truque complicado para isso: você não pode confundir esse contexto com a intenção do usuário. Há um instinto comum para simplificar demais os aplicativos móveis, para torná-los lite de desktop. Isto é errado. Fazemos tudo em nossos telefones atualmente, e toda vez que você diz: "As pessoas não querem fazer isso no celular", você está errado. Todos nós já tivemos essa experiência quando você acessa um website em seu smartphone e acessa a versão para celular do site, onde eles removeram exatamente o recurso ou conteúdo que você está procurando. Só porque você está em uma tela pequena, raramente significa que você quer fazer menos. É como dizer que só porque um livro de bolso é menor, devemos remover capítulos. Não confunda o conteúdo do dispositivo com a intenção.
O que estou dizendo é que acredito que, na maioria dos casos, aplicativos e sites móveis devem ter conteúdo e recursos temáticos semelhantes aos de seus primos de desktop. A apresentação e a prioridade podem muito bem mudar para se adequar às mentalidades móveis, mas o conteúdo deve ser quase sempre o mesmo. De fato, em muitos casos, as versões para dispositivos móveis devem fazer mais, porque os dispositivos são capazes de mais. É por isso que o aplicativo móvel da Amazon pode fazer coisas que o site não pode fazer: escanear códigos de barras, por exemplo, para procurar itens.
Para web designers, isso significa que você precisa começar a pensar de maneira mais flexível sobre como construir websites. Fazemos isso errado há mais de 15 anos, construindo sites apenas para navegação na área de trabalho. Não é para isso que a web foi projetada. Ele foi projetado para ser neutro em plataforma, para ser exibido em qualquer tipo de tela ou dispositivo. Você simplesmente não sabe como seu site será visto agora. Existem vários dispositivos, todos com diferentes formatos que podem acessar seu site agora, e isso significa que é importante criar sites que possam se adaptar a qualquer dispositivo. Para a maioria de nós, essa é uma nova maneira de pensar sobre a criação de websites - não é uma questão de gerar um site para dispositivos móveis separado e um site separado para computadores. Em vez disso, isso significa criar um único site que se adapte elegantemente às restrições e recursos de cada dispositivo.
Nós somos muito afortunados aqui no planeta Terra que vivemos ao lado do cara mais inteligente do universo sobre como projetar este tipo de website responsivo, e seu nome é Ethan Marcotte. Ethan acabou de escrever um ótimo livro chamado Web design responsivo que descreve como criar sites que adaptam seu design e recursos para qualquer dispositivo. Ele é um gênio, e você pode ser um gênio também, lendo o livro dele. Este material é tão importante para a saúde e o futuro do nosso ofício quanto a campanha de padrões web da última década. Todo web designer deve reservar algumas horas para reverter esse livro.
JD Biersdorfer
JD Biersdorfer é um jornalista de tecnologia e autor de vários livros sobre gadgets, incluindo Melhores aplicativos para iPhone .
Na sua opinião, o que contribui para um aplicativo bem projetado e uma boa experiência do usuário?
Depois de analisar entre 400 e 500 aplicativos para o livro Best iPhone Apps, acho que os aplicativos que funcionam melhor são aqueles em que a interface do usuário foi especificamente projetada para a tela pequena do telefone e não para aplicativos que usam a abordagem desktop ícones e menus) e tente empinar demais no espaço. Um bom aplicativo também é um aplicativo estável - bem testado e relativamente livre de falhas.
Existem alguns aplicativos específicos que vêm à mente por serem bons exemplos de design?
Embora eu não tenha incluído no livro na época porque eu achei bagunçado e cheio de problemas, o "AccuWeather" redesenhou seu aplicativo para iPhone em um programa meteorológico realmente maravilhoso com gráficos grandes e coloridos e uma interface bastante intuitiva para que você não o fizesse. tem que cavar em torno de várias telas apenas para ver o quão quente é - e quão quente será. Os aplicativos gratuitos e pagos diferem um pouco no design, mas ambos usam os mesmos elementos visuais para transmitir rapidamente as condições do tempo.
AccuWeather
Eu também gosto do aplicativo “Kayak” para as coisas que os desenvolvedores colocam nele, além da parte usual de reserva de voo e hotel. Por exemplo, há uma seção que você pode tocar para descobrir quanto cada companhia aérea cobra para você despachar as malas, outra para descobrir que lojas e restaurantes estão no aeroporto em que você está preso, um conversor de moedas e até uma lista de verificação para fazer É um aplicativo de viagem prático e completo que é fácil de navegar.
Em termos de notícias, eu ainda acho que o aplicativo “BBC News” é ótimo para os headlines dos hounds. Os criadores do aplicativo conseguem encontrar uma maneira legível de colocar nove notícias principais (com manchetes e pequenas imagens) na tela inicial, junto com um banner do Breaking News e um botão para tocar para que você possa ouvir a transmissão ao vivo da BBC Radio. É muito fácil editar as categorias de notícias que você deseja seguir e há links para vídeos e clipes de áudio pré-gravados que você pode transmitir, como o breve vídeo Resumo de Notícias Mundiais.
Este post foi trazido a você pelo offset impressão de folhetos companhia, panfletos do dia seguinte.
Quais são suas experiências com o design de aplicativos para dispositivos móveis? Quais aplicativos você acha que demonstram bons princípios de design e interface de usuário? Deixe-nos saber nos comentários abaixo.