Prototipação: User Interfaces (UI) para sistemas embarcados

Este post faz parte da série Pontos chave na prototipação de dispositivos embarcados. Leia também os outros posts da série:

No artigo anterior, discutimos sobre as possíveis plataformas de hardware e modalidades de software para prototipação com embarcados. Durante a construção de um protótipo, provavelmente será necessário desenvolver interface com o usuário. Essa interface tem um papel muito importante na apresentação do protótipo e na demonstração de sua usabilidade. Neste artigo, apresentamos algumas instruções sobre como realizar um design intuitivo, considerando algumas diretrizes de design de UI.

Principais orientações e princípios para design de UI 

Claridade: os elementos da interface devem oferecer significado claro de seu uso e propósito. Usar cores e fontes mais chamativas para o que é mais importante na interface. Usar dicas visuais para guiar os usuários a encontrarem as informações que desejam. Reduzir a quantidade de textos para serem lidos utilizando imagens descritivas. 

UI
Figura 1: Exemplo de interface clara com imagens descritivas e fontes mais chamativas para as informações principais. Fonte: https://www.sophialis.com/site/ 

Ação preferencial: para qualquer ação que o usuário precisar tomar, é necessária uma preferência que deve ficar explícita e compreensível ao usuário. 

Contexto: as opções de controle/edição do objeto devem estar próximas a ele. 

UI
Figura 2: Exemplo de contextualização na interface, em que as opções de controle estão ao lado do objeto a ser controlado (lista ativa determinada imagem à esquerda). Fonte: https://govoll.com/  

Configurações padrões: as configurações padrões devem ser previamente definidas para oferecer maior praticidade aos usuários. 

UI
Figura 3: Exemplo de configurações padrões,em que as opções de estilo são selecionadas por padrão, não obrigando o usuário a configurar a interface antes de sua utilização. 
Fonte: GUI Demo: Vehicle Data Logger (https://www.embedded-wizard.de/demo/vehicle-data-logger)   

Ações guiadas: guiar somente as ações realmente necessárias e informar claramente o que precisa ser feito, evitando causar impactos negativos na interface. É importante não complicar as tarefas dos usuários, fazendo com que ele precise executar passos extras para alcançar seu objetivo. É necessário evitar que o usuário precise descobrir como executar uma funcionalidade não disponível claramente, ou que sejam necessárias ferramentas externas para obter o objetivo desejado. 

UI
Figura 4: Exemplo de ação guiada, em quena caixa de busca está escrito exatamente o que deve serfeito “Filtre por um local“.Fonte: Covid-19 | News App, por Levi Rodrigues(https://dribbble.com/shots/10974148-Covid-19-News-App

Feedback: prover feedbacks claros e constantes sobre as ações que os usuários realizam. A UI deve estar constantemente dando feedbacks eficientes sobre as ações requisitadas pelos usuários, fazendo com que cada ação do usuário tenha uma resposta imediata do sistema mesmo que seja um aviso de que a resposta levará um tempo. É importante atentar-se para que tarefas que consomem muito tempo executem em background e não atrapalhe ou bloqueie o usuário a realizar suas tarefas. O usuário deve ser capaz de cancelar as operações que requerem muito tempo para serem executadas a qualquer momento, e serem informados previamente do tempo aproximado dessas operações irão demorar. 

Facilitação: ações mais complexas precisam ser quebradas em pequenos passos para facilitar a realização destas pelo usuário. Facilitar o aprendizado sobre como usar a interface adotando consistência nas ações a serem executadas para garantir que o usuário se sinta no controle, seguro do que está fazendo e não sente necessidade de aprender a usar uma interface complexa. 

UI
Figura 5: Exemplo de facilitação, com a quebra da ação de inscrição em pequenos passos e de feedback constante em cada passo. Fonte: https://webapp.pucrs.br/inscricao-siproex/ 

Consistência: todos elementos devem indicar para o usuário exatamente onde eles estão. Os esquemas de cores, fontes e formas devem ser usados para intuitivamente indicar as funções importantes da interface. Também é importante manter a consistência dos controles já conhecidos pelos usuários (e.g. Para abrir arquivo normalmente são utilizados duplo clique), usando sugestões visuais já conhecidas pelo usuário, como abstrações do mundo físico e funções já amplamente utilizadas pelos dispositivos.  

UI
Figura 6: Exemplo de consistência, em que a cada ação o esquema de cores e formas são usados para indicar ao usuário em que local da interface ele está. 
Fonte: GUI Demo: Washing Machine (https://www.embedded-wizard.de/demo/washing-machine

Regra dos três cliques: os usuários devem ser capazes de executar qualquer ação da interface em no máximo três interações (eg. toques na tela, botões físicos).  

Conforto ao usuário: utilizar uma linguagem simples e inclusiva e pensar sempre em acessibilidade,desenvolvendo uma interface que considera possíveis limitações da população. É importante evitar jargões tecnológicos e linguagem muito técnica. Além disso, precisamos considerar que os usuários irão cometer erros e que o tratamento desses erros não seja custoso ao usuário. 

UI
Figura 7: Exemplos de conforto ao usuário, com uma linguagem simples, um esquema de cores tom pastel e elementos intuitivos como por exemplo, categorias clicáveis e botões ativados por touch.  
Fonte: Banlek App (https://apps.apple.com/br/app/banlek/id1476312119

Além das instruções descritas, Jeff Johnson [Johnson, 2007] apresenta alguns princípios básicos para o desenvolvimento de UIs, os quais podem ser resumidos como: 

  • Foco nos usuários e nas tarefas que estes irão realizar, e não na tecnologia: é importante definir quem serão os usuários, entender suas necessidades, definir as tarefas que precisam ser realizadas,além do contexto em que estas serão executadas para desenvolver uma interface intuitiva, concisa e adaptada ao contexto. 
  • Considerar primeiro funcionalidade e depois apresentação: antes de desenvolver a UI, é necessário definir os conceitos e as interações entre eles. Assim, é importante determinar primeiro quais conceitos serão visíveis aos usuários, quais dados serão manipulados pela interface, e quais os controles e configurações serão disponibilizados antes de definir como será a apresentação destes. 
  • Focar nas funcionalidades mais comuns, as quais serão usadas pela maioria dos usuários, deixando-as mais visíveis e de fácil acesso. Quanto mais frequente a funcionalidade será usada pelos usuários, mais visível e de fácil o acesso ela deve ser. 
  • Entregar informações aos usuários, e não somente dados. Os dados a serem apresentados ao usuários devem ser estruturados de forma a representar informações significativas. É importante se atentar também em como apresentar essas informações, levando em consideração durante o design quais são as mais significativas em cada interação e precisam de destaque, como apresentá-las de forma concisa e facilmente compreendidas.  
  • Os testes de usabilidade devem ser realizados preferencialmente com os usuários finais da UI.Estes testes são úteis para encontrar os aspectos da interface que causam dificuldade para os usuários usarem e entender a origem dessa dificuldade para ajudar a solucionar o problema.  Dessa forma, é necessário realizar correções para melhorar a usabilidade baseadas nas experiências dos usuários ao utilizarem a UI. 

Durante o design de UI para embarcados há outros conceitos a serem considerados, uma vez que eles possuem recursos limitados, e então, interações com o usuário também limitadas. Um conceito muito importante é a micro-interação, sendo definida como um momento de execução do sistema que considera um único caso de uso [Saffer, 2013]. Na seção seguinte detalhamos esse conceito e apresentamos alguns exemplos. 

Design de UI em embarcados: micro interações

Uma micro interação consiste em uma funcionalidade de baixa complexidade que executa somente uma tarefa, devendo ser intuitiva e não demandar instruções ou ajuda para realizá-las. Por isso, é importante que funcionem de acordo com as expectativas dos usuários de como elas devem funcionar. Essa definição e seus aspectos são muito relevantes para construção de protótipos, uma vez que um protótipo geralmente foca em poucas micro-interações para provar um conceito.  

A estrutura de uma micro-interação é estabelecida como [Saffer, 2013]: 

Figura 8: Estrutura de uma micro-interação Fonte: adaptado de [Saffer, 2013]

O trigger: inicia a micro-interação, pode ser físico ou virtual. Seve estar visível e claro ao usuário; 

  • Regras: como ela funciona e qual seu objetivo, identificando as ações que devem ser executadas ea ordem de execução; 
  • Feedback: clarifica as regras de acordo com a necessidade, sendo apresentadas ao usuário somente quando necessário para ajudá-los a entender como a micro-interação funciona; 
  • Loops e modos de operação: meta regras que afetam a interação, unindo as micro-interações.Estas incluem as mudanças de operação do dispositivo ou repetições durante a interação. 

Exemplo de trigger: em que o play inicia a micro interação de preparar o café. 

Figura 9: Exemplo de trigger
Fonte: GUI Demo: Coffee Machine  
(https://www.embedded-wizard.de/demo/coffee-machine)  

Exemplo de regra: somente usuários cadastrados como médicos e previamente autorizados podem acessar o histórico médico do paciente. 

Figura 10: Exemplo de regra
Fonte: GUI Demo: Pulse Oximeter  
(https://www.embedded-wizard.de/demo/pulse-oximeter

Exemplo de feedback: notificação de mensagem/email apresentada na tela da interface do eScooter que pode ser clicada para visualizar mais detalhes. 

UI
Figura 11: Exemplo de feedback
Fonte: GUI Demo: eScooter (https://www.embedded-wizard.de/demo/escooter)

Exemplo de loop: ao listar os pedidos finalizados no aplicativo Shopee, é apresentada a opção Compre de Novo, o que conecta com a micro-interação de realizar pedido. 

Figura 12: Exemplo de loop

Um tipo de embarcado muito presente no cotidiano das pessoas é o wearable, sendo encontrado na forma de smartwatches, activity trackers. Devido ao seu uso cotidiano e presença em diversas atividades do dia a dia das pessoas, há algumas preocupações adicionais em relação ao design da interface com o usuário. Discutimos sobre essas questões e paradigmas de design específicos para wearables a seguir.

Design de UI em wearables

Wearable é um dispositivo embarcado que pode ser vestido pelo usuário (smartwatches, activity trackers, smart glasses, etc.). Assim como os demais embarcados, estes envolvem preocupações com consumo de bateria, formas de conectividade, comportamento dos sensores. Entretanto, há maior preocupação com a experiência UX e outros aspectos como proteções eletrônicas e mecânicas para resistir a uso severo, as quais podem ser limitantes para seu uso. 

Liz Stinson no artigo 5 Smart Rules for Designing Wearables That Make Sense [Wired, 2015] destaca os seguintes aspectos relevantes durante o design: 

  • As informações e o uso deve ser facilmente e rapidamente compreendidos; 
  • Apresentar diferentes modos de interação (e.g, visual, áudio); 
  • Evitar uma grande quantidade de informações para o usuário lidar; 
  • Cuidado nos dados privados do usuário que serão apresentados; 
  • Devem funcionar offline. 

Sullivan [Sullivan, 2016] descreve os seguintes fatores humanos para serem considerados também durante o design de um wearable

  • Input: a entrada de dados é limitada nesses dispositivos. É importante considerar formas mais interativas como interface usando voz, reconhecimento de gestos. É possível obter input passivo se o dispositivo conter sensores como acelerômetro, temperatura. 
  • Output: pode ser ativo, como notificações, lembretes e informações apresentadas na tela; ou passivo, como vibração, mudança de padrões dos leds, e outras formas que não causam interrupção das atividades do usuário. 

Sullivan também discute outros aspectos para serem considerados durante o design de wearables. Um destes é o paradigma de design conhecido Double Diamond. Seus criadores pertencem ao Conselho do Design Council do Reino Unido, propondo um modelo de design criativo útil para qualquer problema, ajudando a encontrar soluções mais efetivas. Este modelo consiste basicamente em divergir e convergir ideias e é definido em quatro fases [Medium, 2020]:

https://www.draw.io/?open=Wb!yfgPmrSgfkmjpGNPaiPxSCrQuTpS71NOrLodbj2ewa8dF-u34yTaRp-5D_imia2c%2F01KBTMFXS3M5VOJC7BDJFL45BFUOE5HCF5&local-data=%7B%22type%22%3A%22OneDrive%22%2C%22id%22%3A%2201KBTMFXS3M5VOJC7BDJFL45BFUOE5HCF5%22%2C%22driveId%22%3A%22b!yfgPmrSgfkmjpGNPaiPxSCrQuTpS71NOrLodbj2ewa8dF-u34yTaRp-5D_imia2c%22%2C%22lastModifiedDate%22%3A%222021-10-01T15%3A45%3A51Z%22%2C%22pageId%22%3A%22wlyC4GCVkPA4UQlPfvhu%22%2C%22layers%22%3A%5B0%5D%7D
Figura 13: Paradigma de designDouble Diamond Fonte: feito pelos autores. Baseado em [Sullivan, 2016] e [Medium, 2020].

  • Descobrir: nesta fase é importante levantar o maior número de ideias possíveis, e então, somente na próxima fase, avaliá-las. Deve-se realizar uma grande quantidade de pesquisas para conhecer o problema a fundo.
  • Definir: nesta fase são agrupadas as ideias a fim de encontrar o principal desafio do projeto, ou seja, qual problema será resolvido primeiro. 
  • Desenvolver: nesta fase é realizado o desenvolvimento das possíveis soluções para os problemas que foram levantados, focando nos principais cenários criados (de preferência, no máximo 4). Ao final da fase, os protótipos já devem ser desenvolvidos e os testes iniciados.
  • Entregar: momento de decidir e entregar a melhor solução encontrada até o momento. Ainda devem ser realizados testes, sendo estes os mais abrangentes possíveis. Ao final desta fase, um único protótipo é entregue.

Esse processo das quatro fases do modelo Double Diamond não é linear, podendo convergir e divergir por várias vezes quanto necessário. Com isso, essa metodologia permite melhoria contínua do projeto, solucionando os problemas reais dos usuários e gerando soluções mais completas e duradouras. Isso se alinha com as necessidades de design para wearables, uma vez que estes serão de uso intenso por um longo período.

Próximos passos

Neste artigo apresentamos algumas instruções de design de UI para embarcados. Essa etapa pode ser essencial durante o desenvolvimento de um protótipo, dependendo de sua aplicação. No próximo artigo iremos focar em uma aplicação específica envolvendo embarcados: Internet das coisas (IoT). IoT tem sido um tema cada vez mais presente no mercado, se popularizando a partir do surgimento de embarcados cada vez menores e mais baratos. Assim, no próximo artigo serão discutidas questões pertinentes sobre prototipação e desenvolvimento em IoT.

Referências 

[Johnson, 2007] Jeff Johnson. GUI bloopers 2.0: common user interface design don’ts and dos. Elsevier, 2007. 

[99designs, 2014] 99designs, por Peter Vukovic. 7 unbreakable laws of user interface design. 2014. URL: https://en.99designs.com.br/blog/tips/7-unbreakable-laws-of-user-interface-design/amp/. Acesso em: 1 de outubro de 2021. 

[99designs, 2021] 99designs, por Nahla Davies. User interface design: 4 rules you need to know. 2021. URL: https://en.99designs.com.br/blog/web-digital/user-interface-design/. Acesso em: 1 de outubro de 2021.

[Saffer, 2013] Dan Saffer. Microinteractions: designing with details. ” O’Reilly Media, Inc.”, 2013. URL:https://microinteractions.com

[Wired, 2015] Wired, por Liz Stinson. 5 Smart Rules for Designing Wearables That Make Sense. 2015. URL: https://www.wired.com/2015/08/5-principles-designing-wearables/. Acesso em: 1 de outubro de 2021.

[Sullivan, 2016] Scott Sullivan. Designing for wearables: Effective UX for current and future devices. “O’Reilly Media, Inc.”, 2016. [Medium, 2020] Editorial Aela.io. 15 anos do Double Diamond e Sua Importância em UX Design!. URL: https://medium.com/aela/double-diamond-como-utilizar-essa-metodologia-na-pr%C3%A1tica-5dc8a5d878bb. Acesso em: 1 de outubro de 2021.

Outros artigos da série

<< Prototipação: Plataformas de hardware e software para sistemas embarcados

Cientista da computação e analista de dados, com Ph.D. em ciência da computação, na área de Aprendizado de Máquina e Reconhecimento de Padrões, pela Unicamp.

Trabalho com P&D no Instituto Eldorado, atuando no departamento de embarcados e em Edge Analytics.

Sou engenheiro eletricista formado pela Faculdade de Engenharia de Guaratinguetá (FEG - UNESP) e trabalho com Android embarcado em Campinas-SP.
Curioso e viciado em tecnologia, sempre busco me aprimorar na área de sistemas embarcados (modalidades bare-metal, RTOS, Linux embarcado e Android embarcado).

Para mais informações, acesse minha página no Facebook:https://www.facebook.com/pbertoleti

Licença Creative Commons Esta obra está licenciada com uma Licença Creative Commons Atribuição-CompartilhaIgual 4.0 Internacional.

Receba os melhores conteúdos sobre sistemas eletrônicos embarcados, dicas, tutoriais e promoções.

Home » Software » Prototipação: User Interfaces (UI) para sistemas embarcados
Comentários:
Notificações
Notificar
guest
0 Comentários
Inline Feedbacks
View all comments
Talvez você goste:

Séries



Outros da Série

Menu