Aparelhos touchscreen: Design para a web mobile – parte 2

Mobile touchscreen

Imagem ilustrativa: Ipad mini e Galaxy s3

Continuando com a série sobre o design para a web mobile. Hoje vou falar sobre a interação com aparelhos touchscreen e como lidar com o conteúdo em telas menores, sem perder acessibilidade e usabilidade.

Quebrando mitos dos mobiles

A primeira fase para se desenvolver uma interface para mobile é quebrar os falsos paradigmas que foram introduzidos a este assunto. Abaixo listo com base em 2 artigos uma série de considerações que podem tornar o seu design mobile frustrante para o usuário.

Vou reduzir o conteúdo assim ficará mais simples para o usuário interagir.

Este ledo engano pode ocorrer inúmeras vezes em um projeto mobile. A limitação das pequenas telas induz ao designer querer fazer uma versão com menos funcionalidade ou conteúdo. Porém para um usuário que procura determinada informação, não encontrá-la se torna extremamente frustrante. E de fato é muito difícil saber o que realmente seu usuário vai buscar. Por isso é importante organizar a informação de forma a ficar agradável para o usuário e não removê-la.

A internet móvel é lenta e o usuário está na rua com pressa

Isso pode em alguns casos ser verdade. Mas podemos ver através de uma pesquisa do Google que a maior parte das pessoas acessam a internet de casa, onde está disponível uma internet de maior velocidade. Além disso em casa muitas vezes têm-se disponível um computador para acessar a versão desktop.

Ok. Vou criar uma versão mobile separada que se adéqua aos mobiles.

Isso pode até ser um começo, mas o ideal é que na mesma URL seja encontrada de forma agradável todo o conteúdo e funcionalidade, seja estando no mobile ou no desktop. Não importa se você utiliza técnicas responsivas ou só a versão mobile, o importante é facilitar o acesso completo ao seu site ou aplicativo web.

As telas touchscreen

Com os problemas acima resolvidos, vamos tratar da interação com os dispositivos touchscreen. Sejam eles smartphones, tablets e etc, é importante pensar que estes dispositivos contam com inúmeras formas de interação, mas nota-se como principal: o uso do toque e gestos, para realização de determinadas ações. Sendo assim, toda interação deve ser planejada para ser agradável e intuitiva ao realizá-la com as pontas dos dedos.

Humm… ponta dos dedos. Ao contrário dos desktops que possuem mouse para fazer interações visuais, o mobile interage com os dedos e estes são bem mais largos que a seta do seu mouse e sua precisão também é prejudicada. Ou seja, é necessário pensar em botões, formulários e links que se adequem à essa nova realidade.

Estados de toque

Mostre ao seu usuário que ele está tocando ou focando uma área interativa através de mudança de cor ou iluminação. Mostre de forma clara os resultados de um gesto e que ações estão habilitadas ou desabilitadas.

Em gestos, como o de arrastar um item, mostre o que está sendo arrastado e para onde ele pode arrastar. Guie seu usuário à uma ação correta através da sua interface.

Formulários com touchscreen

Formulários difíceis possivelmente serão abandonados. Isto não é exclusividade do mobile, mas o formulário se torna ainda pior, já que a digitação em teclados virtuais causam muito mais erros que em um teclado convencional. Por isso tente simplificar o máximo e busque opções de preenchimento. O HTML5 possibilita algumas facilidades, como tipos de input de texto que definem teclados somente de números, letras etc. Radios e check boxes podem ser simulados como botões que ligam e desligam possibilitando um tamanho maior ao item.

Se possível utilize de comandos por gestos ou comando de voz para agilizar a navegação. O comando de voz para preenchimento de formulário facilita muito a vida dos usuários de aparelhos touchscreen.

Concluindo

O pensamento para mobile deve ser diferente mas não restritivo. O público está migrando para esse novo modo de interagir e a menos que você queira ficar para trás é bom começar a pensar nesta nova mídia.

Referências

http://tableless.com.br/mitos-sobre-dispositivos-moveis/#.UWxUn7XFUwA
http://developer.android.com/design/style/touch-feedback.html

Veja também

https://blog.dialhost.com.br/design/design-para-a-web-mobile-parte-1/

DialHost possui estrutura com servidores prontos para hospedar seu site ou aplicativo web.

Felipe Moraes
Felipe Moraes

Gerente de desenvolvimento na DialHost, Designer Gráfico formado pela Universidade FUMEC, Minas Gerais e Pós graduando em Branding pelo Centro Universitário UNA, possuo interesse em design de interação e interfaces. Trabalha com programação e criação para web, desde 2006. Apreciador de Bacon, Pudim e music Tag.

Design para a web mobile – parte 1

Dispositivos Mobile, Ipad, Galaxy S3, Lumia 920, GeeksPhone Peak, respectivamente

Imagem: Dispositivos Mobile, Ipad, Galaxy S3, Lumia 920, GeeksPhone Peak, respectivamente

O design de sites acessíveis para aparelhos móveis está cada dia mais importante.

Nos últimos posts criados, aqui no nosso  blog, falou-se muito sobre novos lançamentos de smartphones e o crescimento da utilização de mobiles para realizar tarefas, como ler e-mails. Baseado nesta onda começo a falar sobre o design para web em aparelhos móveis. Este assunto vem se tornando cada dia mais importante e já começa a se tornar fundamental em projetos para internet. Para começar essa série de posts vamos entender como e por que os mobiles estão tomando conta do espaço antes restrito aos computadores.

Interação mobile

Imagina você interagir com a internet utilizando sua própria voz, gestos, toques, utilizando uma câmera, etc. Agora imagina isso tudo integrado em apenas um aparelho, sem cabos, sem periféricos e quase sem peso nenhum. Estas características estão fazendo muitos usuários de computador deixar de lado o seu velho desktop para realizar tarefas em seus mobiles. A maior facilidade e rapidez, na hora de procurar alguma coisa ou realizar uma tarefa do dia a dia, proporcionada  por estes aparelhos fez o seu uso crescer mesmo em momentos onde se tem disponível o bom e velho computador.

Uma pesquisa realizada pela Google mostra que 96% dos entrevistados utilizam seus smartphones para realizar alguma tarefa, quando estão em casa. Ao contrário do que se mitifica, seu maior uso não está na rua onde os usuários estão com pressa e sua internet costuma ser lenta, mas sim em casa e no trabalho, onde talvez seja possível que se tenha uma internet mais rápida e o acesso à um computador.

Mobilidade

Esta palavrinha torna o uso da internet ainda mais mágico. Poder acessar e interagir no meio digital sem se preocupar com onde você está, de forma rápida e completa tomou o interesse da maioria dos usuários.  Seja no seu trabalho, na rua ou em um Navio, Basta ter conexão com a internet e você pode ver e-mails conversar com amigos e navegar pela internet. Afinal não é sempre que temos tempo ou paciência para sentar na frente de um desktop ou notebook para ver as atualizações do Facebook.

Acesso Mobile = Acesso desktop

O acesso à informação pelo mobile vem crescendo também pela possibilidade de se fazer por um smartphone ou tablet as mesmas coisas, ou até mesmo mais coisas, que antigamente se fazia em um computador convencional. Podemos ver como grandes sucesso, por exemplo, o aplicativo do facebook ou twitter. Apesar da mudança de interface e interação, é possível uma experiência completa das redes sociais independente do seu dispositivo. Em certos casos a interação se torna até mais completa devido a possibilidade de se utilizar a câmera integrada para enviar fotos, ou usando o gps para apontar o lugar de onde se fez o post.

Com tantas vantagens percebidas pelas pessoas, que agora estão migrando para os aparelhos móveis fica aquele ar de dúvida, será que os computadores tradicionais vão sumir em breve? Bem acredito que não, eles apenas perderão esta característica  de ser um grande canal multimidiático, social e pessoal, voltando a ser uma ferramenta de processamento e trabalho.

Fico por aqui neste primeiro post e volto na segunda parte para falar sobre características da interação com aparelhos touchscreen e algumas considerações para desenvolver uma interface para eles.

Referências:

http://tableless.com.br/mitos-sobre-dispositivos-moveis/#.UWxUn7XFUwA
http://tableless.com.br/seu-conteudo-agora-mobile/#.Ucxuk_nFWWF

Veja também

https://blog.dialhost.com.br/design/aparelhos-touchscreen-design-para-a-web-mobile-parte-2/

DialHost possui estrutura com servidores prontos para hospedar seu site ou aplicativo web.

Felipe Moraes
Felipe Moraes

Gerente de desenvolvimento na DialHost, Designer Gráfico formado pela Universidade FUMEC, Minas Gerais e Pós graduando em Branding pelo Centro Universitário UNA, possuo interesse em design de interação e interfaces. Trabalha com programação e criação para web, desde 2006. Apreciador de Bacon, Pudim e music Tag.

Design Thinking – Experimentação

design thinking experimentação

Imagem Ilustrativa: Design Thinking experimentação

Há uns meses atrás comecei um série de posts falando sobre os três pilares do Design Thinking. Hoje finalizarei falando sobre a Experimentação, este é o último dos 3 pilares abordados, para se trabalhar o Design Thinking na elaboração de projetos de Design.

Mas primeiro vamos a um retrospecto. Em meu primeiro post falei um pouco sobre a empatia e a importância de se descobrir as necessidades do seu público na criação de um projeto. Para não delongar muito, deixo a referência do primeiro post desta série O Design e a empatia. No segundo, já falo sobre a colaboração e como é importante criar engajamento entre os colaboradores e até mesmo com o público consumidor do produto/serviço final. Confiram mais em Design Thinking e a colaboração.

Ok! Mas vamos a experimentação.

O que é a experimentação no Design Thinking

Na experimentação é onde coloca-se em prática tudo que foi discutido. Ao experimentar e testar possibilidades se torna possível inovar em diversos produtos e serviços. Além disso a experimentação durante toda a fase de desenvolvimento diminui ou até mesmo exclui as chances de erro e problemas seguintes no projeto ou produto/serviço que se está desenvolvendo. Apesar de parecer uma ideia simples, o mercado é falho neste processo e a falta de testes em modelos de negócios e produtos, supostamente inovadores está criando um mercado saturado de fiascos.

“A maioria das empresas ao desenvolver novas soluções se concentra tanto em seu processo interno de desenvolvimento que, quando a nova “solução” está quase pronta já se gastou muito dinheiro para não lança-la no mercado. Alguns testes são feitos nessa fase final e, muitas vezes, preparados para que sejam intencionalmente aprovados e “voilá”. Eis que surge uma nova proposta de serviço ou produto neste mercado saturado de soluções inúteis e de péssimo funcionamento.” – Luis alt, Especialista em Gestão de Design pelo Istituto Europeo di Design (IED).

Então o jeito é experimentar e testar todas as ideias possíveis, isso desde o começo do projeto. Quanto mais e quanto antes forem realizados testes, melhor será a sua visão de como solucionar diversos problemas e qual rumo tal produto poderá tomar dentro do negócio.

Monte protótipos e apresente-os a toda equipe, para que todos colaborem testando e dizendo o que está funcionando e que não está funcionando. Um protótipo, mesmo que rudimentar, feito com papel clips e um pouco de cola é mais eficaz do que um produto final sem testes. O importante é ter começado o processo e ter coletado opiniões que ajudam na resolução de diversos problemas.

Bem, volto novamente a citar uma frase de Luis alt, “Design Thinking não é uma nova religião ou algo que veio para substituir tudo que já existe. Certamente não é a única forma de fazer as coisas e trazer resultados para as empresas”.  O Design thinking porém traz uma metologia de empatia, colaboração e experimentação que ajuda na criação de um produto ou serviço que seja realmente desejável a quem utiliza e seja viável de se produzir depois de pronto.

Referências:

Experimente o servidor dedicado DialHost.

Felipe Moraes
Felipe Moraes

Gerente de desenvolvimento na DialHost, Designer Gráfico formado pela Universidade FUMEC, Minas Gerais e Pós graduando em Branding pelo Centro Universitário UNA, possuo interesse em design de interação e interfaces. Trabalha com programação e criação para web, desde 2006. Apreciador de Bacon, Pudim e music Tag.

Design Thinking e a colaboração

Design Thinking

Imagem: Ilustração Design Thinking e Colaboração

Há uns dias atrás, publiquei o post O Design e a empatia, onde falo um pouco sobre um dos pilares do Design thinking, a empatia. Hoje sigo falando um pouco mais sobre o assunto abordando o segundo pilar, a colaboração no processo de criação e inovação de produtos e serviços.

A Colaboração trabalha com o desenvolvimento em conjunto, onde cada colaborador ajuda ao outro dando ideias e sugerindo formas de resolver um problema. É importante dentro do processo de Design e no pensamento de um serviço não tentar adivinhar o que o seu cliente espera, ou necessita. Pergunte a ele, interaja com seu público, com as pessoas que trabalham em outros setores da empresa, fornecedores, parceiros e etc. Quanto mais pontos de vista forem abordados mais ampla é a visão do problema e as possíveis soluções.

Como podemos ver a colaboração é um ato em grupo, social, e envolve muitas vezes uma cocriação. A cocriação nada mais é do que criar em conjunto. É uma criação que envolve a colaboração de muitas pessoas, sejam elas do planejamento, da produção, da gerência ou o cliente. Esta metodologia se torna extremamente eficaz pois engaja as pessoas que participam do processo, afinal qual pai não defende seus filhos. A criação colaborativa cria a sensação de que um determinado produto é meu também.”Eu participei, o resultado obtido só foi possível por que teve o meu envolvimento”.

O engajamento causado pelo ato de se trabalhar de forma colaborativa, pode ser visto pelo sucesso de projetos como o Fiat Mio. O projeto teve milhares de contribuições de diversas pessoas, e foi responsável por desenvolver um carro conceito baseado na estrutura do Creative Commons. Para fechar o post com chave de ouro, deixo os links de uma entrevista dada pela Professora e consultora, Denise Eler. Os vídeos falam sobre o conceito de cocriação.

Benefícios da Cocriação – Emprego e Renda – Parte 1

httpv://youtu.be/s-EspowY1lQ

Benefícios da Cocriação – Emprego e Renda – Parte 2

httpv://youtu.be/maE3CbpEySI

Deixo também a referência para o Blog da Denise Eler, onde podem encontrar muito mais sobre esse assunto:
http://www.eler.com.br/

Hospedagem DialHost, qualidade e desempenho com planos a partir de R$9,90/mês.

Felipe Moraes
Felipe Moraes

Gerente de desenvolvimento na DialHost, Designer Gráfico formado pela Universidade FUMEC, Minas Gerais e Pós graduando em Branding pelo Centro Universitário UNA, possuo interesse em design de interação e interfaces. Trabalha com programação e criação para web, desde 2006. Apreciador de Bacon, Pudim e music Tag.

O Design e a empatia

Empatia

Imagem Ilustrativa: empatia

Há uns dias atrás, navegando pela internet encontrei um vídeo sobre design thinking que abordava o assunto Empatia como o primeiro passo para desenvolver um projeto de design e resolver problemas. O assunto me chamou bastante atenção pois revela porque antes mesmo de se pensar um produto ou serviço é preciso ter empatia para obter bons resultados no processo de criação dos mesmos. Mas o que  é empatia, e como ela pode ajudar no processo de design no meu trabalho ou nos meus produtos/serviços.

O que é empatia

Para ajudar nessa tarefa de definir o que é empatia, me auxílio de um post de Denise Eler, designer de estratégias, consultora da Isvor FIAT e professora da universidade Fumec. A empatia se define como a capacidade de tratar uma pessoa como ela gostaria de ser tratada, é entender o problema de uma pessoa se colocando no lugar dela. Em outras palavras, como diz o apresentador do vídeo mencionado é “Calçar os sapatos do outro. Ver o mundo pelos olhos da outra pessoa. Sofrer quando o outro também sofre. Ficar feliz com a felicidade de outra pessoa.” Difícil isso não? Sim e esta dificuldade acaba por deixar designers tensos com clientes que não costumam entender a proposta abordada nos projetos.  Bem antes de passar para o próximo passo deixo o vídeo da palestra que inspirou este POST.

httpv://www.youtube.com/watch?v=T63se0UMz_U

Como isso pode ajudar?

Ter empatia ao desenvolver qualquer projeto permite ao designer e a toda equipe entender o problema, como pensa o seu cliente ou uma outra equipe que ajudará no desenvolvimento de tudo. É preciso saber como funciona a mente de um engenheiro, um programador, o CEO de uma empresa, ou seja entender os envolvidos no processo. Para isso é importante colocar o design na esfera estratégica do negócio e utilizar da empatia com estes envolvidos na tomada de decisões. Com essas decisões tomadas em conjunto fica bem visível as possíveis ações seja na criação de uma interface ou interação, por exemplo.

Como podemos concluir a empatia é uma característica que se desenvolve no trabalho em equipe, no mapeamento dos problemas e dos envolvidos. Por isso este se torna o primeiro passo do pensamento de design.

Referências: http://www.eler.com.br/index.php/pilares-do-design-thinking-parte-1-empatia/

Conheça os planos que atendem as suas necessidades. Hospedagem DialHost, planos a partir de R$9,90.

Felipe Moraes
Felipe Moraes

Gerente de desenvolvimento na DialHost, Designer Gráfico formado pela Universidade FUMEC, Minas Gerais e Pós graduando em Branding pelo Centro Universitário UNA, possuo interesse em design de interação e interfaces. Trabalha com programação e criação para web, desde 2006. Apreciador de Bacon, Pudim e music Tag.