O que é Design?
De•sign [də zajn] é um método de resolver problema.

Design ux ui. Segundo John Kane, um renomado designer:

“Design são muitas coisas, executadas de diferentes maneiras, mas as funções são sempre as mesmas. Design pode ajudar a solucionar um problema visual ou físico.”

Para explicar melhor, podemos notar os três objetos a seguir:

Cadeiras

Ambos possuem a mesma função: sentar, porém o design influência no conforto.
O terceiro item, por exemplo é uma caixa de madeira que embora não seja destinada para sentar, em determinada situação pode cumprir bem a função.

O que é mais importante? Design ou Código

Muitos desenvolvedores responderiam facilmente que em uma aplicação o mais importante é o código e sua estrutura, mas engana-se.Um aplicativo bem sucedido leva em consideração que o design e o código possuem igual importância e é sobre esse assunto que iremos abordar nesse post.

Para entender a relação de importância entre o design e o código, vamos usar como exemplo uma situação cotidiana na vida de todos programadores: fazer café.
A seguir, temos os itens necessários para fazer café devidamente relacionados com os itens fundamentais para a criação de uma boa aplicação:

Comparação: fazer café x fazer software

Como podemos perceber, o Design está para Água assim como o Desenvolvimento (código) está para a Caneca.. Se tivermos uma idéia para um aplicativo, ela não será realizada se não houver investimento e o envolvimento de programadores e design. Caso qualquer um desses itens seja em menor quantidade o sucesso do aplicativo será comprometido. Seguindo a mesma forma de raciocínio, para fazer um bom café precisamos de café, açúcar, caneca e água. Se algum desses itens for utilizado em uma quantidade menor que a necessária, o café não ficará tão bom como esperado.

Além disso, para produzir seja um café ou um aplicativo, precisamos do envolvimento das PESSOAS.

Colaboradores comprometidos

As pessoas envolvidas, devem manter um dialogo constante, buscando sempre alinhar as ideias em prol de um objetivo único: Desenvolver um bom aplicativo.

Funciona da seguinte forma: no inicio do projeto cada pessoa tem em mente um produto final, se essas pessoas começarem a colocar em prática suas ideias, sem que antes haja uma conversa entre os envolvidos, é bem provável que o resultado final não agrade a nenhum deles.

Com reuniões periódicas fica mais fácil identificar as dúvidas de cada pessoa, alinhando as idéias e produzir um aplicativo com funções bem determinadas que agrade a todos, pois isso foi discutindo anteriormente.

Conversas entre a equipe são fundamentais para o bom desenvolvimento do projeto

User Experience (UX)

O termo User Experience foi definido por Donald Norman, quando ele era Vice-Presidente do Advanced Technology Group da Apple, pois ele acreditava que definições como Interface de Usuário e Usabilidade limitavam o entendimento sobre o que o trabalho dele representava.

“Eu inventei o termo, porque eu pensei que interface humana e usabilidade eram muito restritos. Eu queria cobrir todos os aspectos da experiência da pessoa com o sistema, incluindo gráficos de desenho industrial, a interface, a interação física e o manual.”Donald Norman

A seguir o conjunto de fatores que juntos originam a Experiência do Usuário:

A Experiência que o usuário tem com o aplicativo é definida por um ciclo, ilustrado e definido a seguir:

Ciclo de etapas que representam a experiência do usuário

– Inicio da Utilização:
Por algum motivo o usuário cria uma necessidade de utilizar o aplicativo.

– Expectativa: 
Uma expectativa de satisfação em relação ao comportamento do aplicativo é automaticamente criada.

– Proximidade:
O aplicativo deve ser planejado, pensando  em que situação o usuário irá utiliza-lo, ou seja, o quão perto ele está do serviço. O usuário utiliza o aplicativo de dentro do carro? Ele está na mesma cidade do serviço? A proximidade relativa entre o serviço prestado pelo aplicativo e o usuário deve ser levado em consideração pois faz parte da experiência do usuário.

– Consciência:
O usuário observa as partes necessárias do sistema? ou está distraído com alguma imagem produzida pelo aplicativo?

– Conexão:
O usuário é capaz de fazer conexão entre a necessidade e a função da aplicação? Os sinais emitidos pelo programa correspondem a expectativa criada pelo usuário?

– Ação:
O usuário é capaz de agir? ou há incompatibilidade entre a forma de agir e a ação necessária? Ou seja, o que o usuário pensa em fazer para atingir tal ação, corresponde a ação a ser feita no aplicativo?

– Resposta:
O aplicativo exibe respostas as ações? é uma resposta esperada? (feedback) Satisfaz a necessidade?

– Avaliação:
O usuário compara as repostas obtidas pelo aplicativo com a expectativa criada. Com base nessa comparação o usuário decide se irá iniciar um novo ciclo ou se a expectativa não foi atendida possivelmente o usuário não irá mais utilizar o aplicativo.

User Interface (UI)

Uma interface de usuário é o sistema que as pessoas interagem com uma aplicação. Inclui componentes de hardware (físico) e software (lógico). As UI existem para vários sistemas, e fornecem um meio de interação:

* Entrada: permite o usuário manipular o sistema;
* Saída: permite ao sistema responder as ações do usuário

Exemplos e observações:

Pequenos cuidados com a Interface, possibilitam ao usuário uma maior experiência com a aplicação.

Navegação: Springboard
Utilizado para navegação no menu principal, ideal para organizar as opções de forma igualitária. Possibilita, por exemplo, colocar notificações em um determinado item do menu, conforme indicado na imagem a baixo:

Navegação: Springboard

Navegação: Aba

Também utilizado para navegação no menu principal, o sistema de abas ao contrário da Springboard reduz o número de opções no menu, sendo interessante no máximo 4 opçoes, porém sua vantagem é o número reduzido de toques na tela para acessar qualquer item, uma vez que a barra estará sempre disponível para ser acessada independente da tela do aplicativo que você esteja. Também possibilita o sistema de notificações.

Navegação: Aba

Formulário para cadastro:
Conforme podemos observar nas imagens a seguir, o melhor local para colocar os títulos de cada campo do cadastro é no conteúdo do campo, no formato de placeholder ou a cima do campo.

Formulário para cadastro

Colocar o título de cada campo de cadastro ao lado do campo, não é uma boa prática de design pois em determinadas situações o texto pode sobrepor o campo de cadastro ou ficar truncado, conforme podemos notar nos dois exemplos a baixo:

Formulário para cadastro ERRADO

Feedback

Fornecer feedback a cada ação do usuário é uma forma de mante-lo informado possibilitando assim uma maior experiência por parte do usuário. É muito comum o usuário realizar uma ação e pensar que o aplicativo travou ou não realizou tal ação pois nada foi “exibido” na tela como feedback.

Feedback

Ação: botão de Atualizar (update)

Evite utilizar botões de atualizar para aplicação. Movimentos com gestos são mais eficientes, melhorando a experiência do usuário. Uma boa prática é colocar o movimento de rolagem da Tabela para atualiza-la, conforme mostrado a baixo:

Ação: atualizar (update)

Ação: Tutorial

Exibir tutoriais quando o aplicativo é executado pela primeira vez, reduz a possibilidade do usuário não obter uma boa reação as suas ações. Uma vez que o usuário sabe como o aplicativo se comporta, fica muito mais fácil a utilização. A baixo, na primeira imagem podemos notar que todas as funções do aplicativo são explicadas, já na segunda imagem, desenhos de dedos informam como o usuário deve se comportar no jogo.

Ação: Tutorial

Espero que essas pequenas dicas de design, experiência do usuário e interface gráfica possam auxiliar no resultado final do aplicativo, pois afinal de contas, conforme citado anteriormente são detalhes fundamentais.

Num próximo post iremos abordar tipos de design mais utilizados, como por exemplo o FLAT e também técnicas de design mais voltado para o ambiente iOS e Android. Espero ter ajudado, em caso de dúvidas ou sugestões deixe seu comentário.