Programa 1 – Desenvolvimento de Front-end – André Luis

Do Responsive Webdesign passando pelas grelhas e focando a usabilidade

Para o primeiro programa falamos com André Luis, Front-end engineer e especialista em usabilidade.
Entrevista gravada a 22-jan-2014 com a duração de 48:39 (download)

A incontornável necessidade de disponibilizarmos o conteúdo dos nossos websites e aplicações web para uma panóplia cada vez maior de dispositivos, alterou os nossos métodos de trabalho, a forma como apresentamos maquetes, as ferramentas essenciais para a construção dos websites e levou ao desenvolvimento de novas tecnologias, técnicas e métodos de trabalho.

O Processo

Iniciamos a conversa com o André pelos cargos já ocupados no Sapo e Uniplaces, Quality Assurance/Usability expert & Frontend Engineer e  Lead Frontend Engineer & User-Centered Designer, respectivamente, e o motivo da complexidade do nome das suas funções em cada uma das empresas.

Segundo o André, esta necessidade foi imposta pelas múltiplas frentes existente num produto web, assim como a necessidade de existir flexibilidade nas funções desempenhadas dentro de uma organização, que poderão partir da experiência de utilização, passar pela programação e terminar na implementação da solução de front-end.

Nesse sentido considera o papel de front-end engineer hoje em dia uma actividade desenvolvida em conjunto com o designer, sendo impensável a separação completa dos papeis e falta de comunicação entre estes dois pontos fundamentais no desenvolvimento de um produto web.

Falamos de seguida do processo de desenvolvimento de um novo produto web, que, e frisando que cada projecto é um caso independente, começa tipicamente pela reunião de kick-off e pela partilha dos objectivos e informações sobre o projecto, sendo a exploração inicial do mesmo desenvolvida pela equipa de design com o possível apoio de um especialista em UX e origina a criação dos primeiros wireframes para validação interna e primeiros testes com utilizadores ainda com protótipos em papel. Este formato permite-nos ter a segurança de já termos o nosso projecto avaliado pelo seu possível público alvo.

Os desafios e as soluções

Abordando o responsive webdesign, discutimos que hoje em dia é quase impossível assegurarmos a definição completa de como o produto vai ser visualizado por todos os seus utilizadores. Isto leva à utilização de conceitos como o “progressive enhancement”, que permite-nos obter um produto com aspectos diferentes em diversos equipamentos e não limita os utilizadores dos dispositivos com maior capacidade a experiências básicas porque têm que ser passíveis de serem replicadas em igual formato para todos os equipamentos.
Torna-se assim muito importante o teste e validação das propostas mais dissonantes de forma a conseguirmos comparar as implementações mais dispares.

Outra técnica abordada foi o “mobile first”, que nos permite tomar as decisões mais difíceis logo à cabeça e utilizar as funcionalidades disponíveis nos telemóveis na nossa interface, ao invés de termos de estar a cortar componentes. Para o André Luís, na era que vivemos não faz sentido criar conteúdos diferenciados para mobile e desktop, sabendo que, hoje em dia a utilização dos equipamentos móveis para a navegação na internet é muito mais recorrente e num formato muito mais similar ao que ocorre no habitual PC.

Sobre a relação entre cliente e “técnico” destacou a necessidade de uma correcta comunicação e compreensão de parte a parte, e que o contacto claro e recorrente com o cliente, assim como o feedback constante, são factores essenciais para o correcto desenvolvimento de um projecto.

Frameworks

Abordando as diversas ferramentas, plugins e frameworks disponíveis hoje em dia, para o André Luís, é essencial pesar correctamente a sua utilização, sendo necessário um equilíbrio entre o controlo que pretendemos ter da nossa aplicação e a velocidade de implementação do nosso projecto. Tendo isso em  mente, na sua opinião, a principal vantagem da criação da própria framework ou grelha é a possibilidade de controlo total da plataforma e a capacidade de aumentar as especificidade das soluções criadas.

Falando do caso específico do Sapo, foi criada uma framework própria tendo sido aproveitada a existência de uma biblioteca de código interno extensa e com valor. Esta criação permitiu uma maior evolução nas soluções criadas e que desta forma fazem mais sentido para a equipa.

Em seguimento do ponto anterior foi destacado que as grandes desvantagens da criação de uma solução própria é a necessidade de criarmos a própria comunidade e um maior investimento de tempo na criação e manutenção da nossa própria biblioteca.

Para o André, havendo tempo, e numa perspectiva de longo-prazo, a melhor solução é a criação da própria grelha e a construção da sua própria biblioteca recorrendo a pequenos componentes e ferramentas como o Gridpak da Erskine Design.

Para o nosso convidado, a aventura no responsive webdesign ainda não terminou, desde a criação do conceito até aos dias de hoje foram identificadas novas necessidades e foi surgindo uma maior necessidade para o controle de todos os componentes.
Foi destacado que, neste momento a simplificação dos elementos e uma maior uniformização entre a interface móvel e desktop é o caminho ideal para uma correcta abordagem ao “responsive webdesign”, sendo este apelo à simplicidade tanto do designer como do engenheiro.

Testes

Os testes efectuados pelo André às aplicações web criadas são diversos, do eye tracking, passando pelo card sorting até aos questionários, toda a informação reunida permite testar a forma como um utilizador vai utilizar o website.

Voltando ao assunto “responsive”, para ele, o teste por equipamento é um caminho errado a tomar, a velocidade como são lançados novos equipamentos e com novas funcionalidades não permite uma concepção correcta da aplicação para todos os dispositivos. Como o que hoje é standard amanhã deixa de ser, a preocupação deve centrar-se no interface e não nos “breakpoints” por dispositivo.

Falando da sua própria experiência o André contou-nos o que aconteceu no Sapo em 2013, que é um exemplo disso, pouco tempo antes do lançamento do projecto, saiu o novo equipamento da Apple, o macbook pro retina, rapidamente foram testar no equipamento ainda numa loja da Apple e como o desenvolvimento considerou a utilização de imagens vectoriais e imagens para diferentes tipos de resolução numa perspectiva de futuro o projecto funcionou correctamente num novo equipamento com uma resolução na altura, nada habitual.

Quando abordamos a diferença entre o público nacional e internacional e utilizando a uniplaces como elemento de comparação, foi destacado que verificaram algumas desactualizações em algumas áreas do globo, sendo o grande problema que encontraram a “great firewall of china” e as diferenças culturais existentes nos diversos países, por exemplo o vermelho, é uma cor extremamente mal interpretada pelo público Árabe.

Perguntas Rápidas:

• Expectativas para os próximos 12 meses a nível de web?

  • Vejo a acontecer, uma evolução da web com produtos melhores a surgirem todos os dias mas também uma relutância ou desconhecimento em relação a algumas tendências desde responsive webdesign à independência de resolução
  • Vejo com bastante agrado o regresso à simplicidade de interface e de ecrã como o Medium, Readbility, Branch ou The Verge ou Polygon que está a publicar conteúdos com direcção gráfica. Promovendo o consumo de informação confortávelmente no próprio website
• Qual a app mobile que não dispensarias?
  • Downcast
• Qual a ferramenta de desenvolvimento mais indispensável para o teu dia-a-dia?
  • Browser (uma resposta cliché, pelo próprio)
• Um podcast fundamental?
  • Pixel Recess e Stuff you missed in history class
• Sugestão de próximo convidado
  • Dinis Correia

Ligações Referidas:

Livros:

• Mobile First – Luke W. – http://www.abookapart.com/products/mobile-first
• Responsive Webdesign – Ethan Marcotte – http://www.abookapart.com/products/responsive-web-design
• The manual – http://buy.alwaysreadthemanual.com/

Exemplos de estudos sobre Internet em Portugal:

• Estudo Obercom 2012
• 1.5em;">Estudo LINI 2010
• 1.5em;">Estudos Netpanel

Outros Links:

• 1.5em;" href="http://fivesecondtest.com">http://fivesecondtest.com
• http://survs.com
• http://futurefriendlyweb.com
• 1.5em;" href="http://html.adobe.com/edge/inspect/">http://html.adobe.com/edge/inspect/