Você deve estar pensando que tudo que está dentro do desenvolvimento de aplicativos para dispositivos móveis está relacionado às linguagens de programação apresentadas em aulas anteriores, não é mesmo? Pois bem, você teve acesso, também, ao material, no qual descobriu os componentes de desenvolvimento, e entendeu que temos toda a parte do Front-End, que é, precisamente, onde criamos nossa interface com o usuário, cujo nome correto é Interface Gráfica do Usuário (GUI, sigla em inglês). Segundo Deitel et al. (2015), a GUI apresenta um mecanismo amigável para interagir com um aplicativo, proporcionando look-and-feel, termo, da língua inglesa, muito utilizado na área de marketing (em português, significa aparência e comportamento).

Com isso em mente, o objetivo desta aula é trazer para você uma amostra dos tipos de componentes visuais de interface com o usuário e apresentar o processo de entrada e saída de dados dentro desses componentes e dos aplicativos móveis. Além disso, apresentaremos dois componentes bastante utilizados dentro do desenvolvimento para dispositivos móveis, o componente de multimídia e um componente especial, chamado WebView.

Imagine que para cada aplicativo que você for criar ser preciso criar novos elementos para que o usuário possa interagir com o App. O tempo e o trabalho, sempre que isso acontecesse, seriam incalculáveis e, provavelmente, desperdiçados por dois motivos: 1) você estaria sempre fazendo a mesma coisa, mesma parte técnica, e utilizando um tempo que poderia estar sendo utilizado para pensar no objetivo do aplicativo que está sendo criado; 2) você, no papel de usuário, para cada aplicativo que instalasse em seu smartphone teria que aprender como é o formato de um botão padrão, uma tabela,  como usar os dedos para deslizar a tela para baixo ou para cima (em relação aos meios de entrada e saída de dados) e como são as mensagens de alerta e resposta dos aplicativos às suas ações. Além disso, teria que entender qual é formato de uma simples caixa de texto onde digita seu login e senha.

Sendo assim, a solução deste problema de otimização de tempo e de curva de aprendizado, para o usuário utilizar seus aplicativos favoritos, está em uma espécie de padronização dos tipos de componentes visuais de interface do usuário, pois, com isso, mesmo você estando em seu Android ou iPhone, a sensação de utilização dos componentes e seus formatos, se não for idêntica, é de fácil aprendizado, resolvendo, assim, a questão dos problemas levantados.

Hoje, você vê bebês ou crianças, bem novinhas ainda, interagindo com o smartphone de um adulto e que eles sabem deslizar o dedo para cima ou para baixo na esperança de que algo aconteça naquele dispositivo de tanto o comportamento de entrada e saída e de interações com o dispositivo foi padronizado por meio de gestos e principalmente componentes visuais.

Nesta aula, você entrará em um case fictício de empresas que, provavelmente, conhece. Você é um(a) engenheiro(a) de software mobile no Facebook, que trabalha remotamente, de sua casa, diretamente para a empresa Meta (nome da empresa que possui os Apps Facebook, WhatsApp e Instagram), na Califórnia. Muito legal, não é mesmo? Mas, claro, nem tudo é felicidade neste caminho, nesta profissão e nestas empresas, certo?

A situação é a seguinte: você atua na criação de novos produtos dentro do Facebook, já participou de projetos, como grupos, álbuns de fotos e localização de amigos por perto, e, agora, foi chamado(a) para a nova ideia do CEO (Chief Executive Officer, ou, em português, algo como diretor executivo) da empresa. Nos rascunhos de tela de como essa nova ideia funcionaria, criou caixas de texto quadradas, diferentemente das utilizadas hoje, que são retangulares, e tabelas, com cores completamente diferentes das usadas pelo aplicativo, tudo isso em busca de um novo formato para a funcionalidade. Ah, e o toque final de inovação seria que, ao invés de clicar no campo no qual você inseriria informação, você deveria sempre clicar em um ícone de lápis que fica na frente deste campo.

O Sr. Zuckerberg nem precisou escutar suas argumentações sobre o porquê dessas mudanças no comportamento da funcionalidade. Ele só pediu que o trabalho fosse refeito utilizando os componentes visuais e os tipos de interações que são utilizados não só pelo próprio Facebook, mas pelo Instagram e WhatsApp, pois, com seus componentes, o usuários poderiam “estranhar” e desaprender a utilizar as funcionalidades já consolidadas pela empresa e por outros aplicativos de mercado.

Esta situação não se restringe à uma única empresa, ou seja, acontece em todo o mercado de aplicativos para dispositivos móveis, pois, como visto no objetivo desta aula, o que mais os designers de interface gráfica em todo mundo procuram é proporcionar ao usuário a sensação de que já sabe usar determinado aplicativo, a sensação de look-and-feel.

Quando se fala em componentes visuais de interface, junto à entrada e saída de dados, existem dois termos/conceitos que precisará conhecer e entender, sendo eles: UI (User Interface, ou, em português, Interface do Usuário) e UX (User Experience, ou, em português, Experiência do Usuário). Essas duas siglas dão rumo às questões já citadas sobre componentes visuais de interface e entrada e saída de dados.

UI

A UI, ou Interface do Usuário, que se refere ao que é visto pelo usuário sobre o aplicativo (site, sistema etc.), segundo Grilo (2019), tem a ver com a tipografia, isto é, com a disposição dos elementos no desktop e, mais precisamente, nos dispositivos móveis e com as fontes e os tamanhos dos ícones utilizados. Desse modo, a tipografia está relacionada à aparência, mas, como veremos a seguir, esta (a aparência) não é o único elemento que influencia na boa experiência do usuário.

UX

Em português, a sigla UX significa Experiência do Usuário, e essa tradução, talvez, faça até mais sentido para você, que criará as telas de seu aplicativo para dispositivos móveis. Segundo Teixeira (2014), todos nós assumimos o papel de usuário no nosso dia a dia, com equipamentos de tecnologia, carros, Tvs, entre outros, e, para cada um desses produtos e serviços, temos uma experiência na utilização. Sendo assim, como você pode definir se seu componente visual ou seu aplicativo, como um todo, proporciona boa experiência ao usuário? Teixeira (2014, p. 1, grifo nosso) diz que, "[...] se você já passou nervoso na frente do caixa eletrônico porque ele não entregou o dinheiro que você estava esperando e não deu nenhuma explicação sensata sobre o motivo da recusa, você possivelmente teve uma péssima experiência enquanto usuário do caixa eletrônico". 

Ainda segundo Teixeira (2014, p. 2), “a experiência é positiva quando você consegue realizar a tarefa sem demora, frustração ou sem encontrar problemas no meio do caminho”. Por isso, a padronização e o uso de componentes visuais de interface na construção de aplicativos para dispositivos móveis são importantes.

Componentes visuais de interface com o usuário

Sempre com a intenção de trazer a sensação de “acho que já vi isso em algum lugar”, os componentes visuais, dentro do conceito de desenvolvimento de aplicativos para dispositivos móveis, têm como objetivo padronizar as estruturas com as quais o usuário tem contato na utilização tanto dos sistemas operacionais quanto dos aplicativos disponíveis.      

Por exemplo, seria impossível criar um aplicativo sem o menu “sanduíche”, que você está habituado a ver em todas as plataformas Android/Google, nos tempos atuais, ou não inserir a setinha para esquerda nos iPhones, que representa a ação de voltar à tela anterior, uma vez que esses dispositivos não têm o famoso botão voltar na tela do smartphone

A intenção de trazer familiaridade aos seus aplicativos facilita entender a aplicação de componentes visuais já preestabelecidos, ao invés de sempre criá-los conforme nossa vontade ou necessidade. em relação às plataformas, na maioria das vezes, esses componentes, nas plataformas nativas, são montados a partir de XML ou por meio de Framework, como o Cocoa Touch. Já na área do desenvolvimento híbrido, repete-se sempre o mantra das três tecnologias: HTML, CSS e JavaScript. independentemente de plataforma, pode-se classificar tais componentes em algumas categorias, chamadas Views. Sendo assim, pode-se ter, na maioria das vezes, dependendo de como a plataforma entende tal componente, seis grupos, sendo eles:

Dentro destas categorias, você pode encontrar, também, algumas subcategorias, que visam organizar os componentes para que você não precise sempre procurá-los no meio de todas elas. Essas subcategorias não diferem muito do que foi visto. 

Entrada e Saída de dados

Quando se fala em entrada e saída de dados, você precisa entender de que forma os dados abastecerão seu aplicativo e como esse abastecimento será exibido para seu usuário durante a utilização do mesmo. Sendo assim, você pode entender que toda ação de entrada no aplicativo, hoje, dá-se por meio de toque dos dedos, ao selecionamos um componente para digitação, uma imagem de nossa galeria para importação, a câmera, para tirar uma foto ou ler um QR-Code, ou, até mesmo, o recurso de voz, por exemplo. Já quando você pensar e vislumbrar aspectos de saída de dados, verá que eles têm muito a ver com os componentes que você utilizará para exibir as informações e os dados na tela do aplicativo e, também, para comunicar algumas ações e, até mesmo, enviar desses dados por meio de notificação no sistema operacional (e-mail, SMS, WhatsApp e/ou Telegram).

Multimídia

Assim como podemos utilizar componentes visuais básicos, como formulários, tabelas, listas etc., podemos também fazer uso de elementos multimídia, como sons e vídeos. Neste caso, faz-se necessário, do ponto de vista das plataformas, disponibilizar componentes visuais que satisfaçam essa necessidade, como, repetidamente, foi descrito nesta aula, do look-and-feel, no que diz respeito à utilização desses componentes. Por exemplo: como exibir um vídeo do YouTube de forma diferente do que você já viu em diversos sites e aplicativos ao longo de sua experiência como usuário?

WebView

Em vez de criar um aplicativo do zero, com toda a regra de negócio, Back-End, Front-End e todas as demais características e componentes já vistos em aulas anteriores, existe uma oportunidade utilizando o componente, ou classe, WebView. Segundo Developers ([2023b]), a WebView permite exibir páginas da web como parte do layout de seu aplicativo. Ela não incluirá recursos de um navegador em sua completude, como a barra de endereço e os botões de controle de navegação. Ela faz com sua página web, com design devidamente responsivo, seja exibida como um aplicativo. A vantagem disso é poder reutilizar o site e/ou sistema web como aplicativo para dispositivo móvel, ou seja, seu cliente poderá instalar “seu site” e tê-lo a um toque do usuário, em vez de abrir o navegador, digitar o endereço do site etc. Mas essa funcionalidade tem implicações, se a ideia ou o propósito do aplicativo seja abranger mais que um sistema web e utilizar recursos de um dispositivo móvel.

Agora que você já tem o conhecimento de todo conjunto de ferramentas que tem à disposição, já pode começar a construir e/ou conhecer todos os componentes visuais de interface que você tem em mãos para utilizar em seus projetos de aplicativos para dispositivos móveis. Não caia na armadilha de querer “reinventar a roda” quando o assunto for componentes visuais de interface ou entrada e saída de dados, pois, como pode ver, é um assunto bastante consolidado em relação à interface do usuário e, principalmente, à experiência do usuário na utilização do seu App.

Leve sempre em consideração a experiência do usuário, por exemplo, você, enquanto usuário de outros apps como faz agora mesmo, lendo este documento, por meio de seu dispositivo móvel ou computador pessoal, como avaliaria o tamanho da fonte? Está bom? O contraste das cores está agradável aos seus olhos? A letra que está sendo utilizada é de fácil entendimento? E, se possível, mostre a seu cliente ou alguém que não esteja envolvido na criação os seus protótipos, para que ouça a opinião de quem não está “seguindo” sua linha de raciocínio, pois isso faz com que seus aplicativos fiquem, de maneira geral, mais simples.

Como dito anteriormente, explore os componentes visuais existentes, pois, quando surgir uma necessidade e/ou uma ideia de layout para uma tela do aplicativo, você terá, logo, uma noção de qual componente utilizar e qual a entrada de dados que é comumente utilizada para esse componente. Além disso, saberá como a resposta a esta ação será apresentada ao usuário, ou seja, por meio de notificação, e-mail, alerta na tela etc.