05. Ergonomia de Elementos

• The Wealth of Nations was written

  1776
• Rationality in classical economic theory is a flawed assumption as people usually don't act rationally
• If you add up marginal utility for each unit you get total utility
• DESIGN DE INTERAÇÃO E UI/UX AULA 5
• Prof.ª Margarete Klamas
• É o momento de conhecermos as recomendações do Google e seus colaboradores para o desenvolvimento de projetos em Android. A Google disponibiliza um material muito amplo para auxiliar desenvolvedores na criação de suas aplicações.
• O chamado design de materiais (Material Design), desenvolvido pelo Google, em 2014, envolve aspectos expressivos que envolvem intuição e fluidez, que abordam as possibilidades de utilização dos elementos. É baseado na realidade, com o objetivo de tornar a aplicação mais próximo possível do mundo real. Foi batizado de Material Design.
• Veremos os componentes comuns, como: barra de aplicativos, botões, menus, listas, elementos para inputs e sobre cores para o material.
• Iniciaremos abordando os elementos essenciais do layout. Vimos na aula anterior a orientação de que a barra do aplicativo deve possuir 54dp de altura, mas lembramos que essa medida pode variar. O elemento que não pode variar é a barra de status.
• Barra de Status


  Altura de 24dp
• Barra do Aplicativo


  Altura de 56dp
• Lista


  Altura de 88dp
• A barra superior do aplicativo exibe informações sobre a página aberta do aplicativo na tela do usuário. Pode ter uma variação, conforme ação do usuário.
• Recomendações do Google para a barra de aplicativos


  • Posicionar a navegação na extrema esquerda
  • Posicionar quaisquer títulos à direita da navegação
  • Posicionar as ações contextuais à direita da navegação
  • Posicionar um menu flutuante (se usado) à direita
• Título da página


  • Container
  • Ícone de navegação (opcional)
  • Título (opcional) – Utilizar H6
  • Itens de ação (opcional)
  • Menu flutuante (opcional)
• Barra de aplicativos no iOS

  Títulos centralizados
• No iOS as barras de aplicativos são chamadas barras de navegação.
• Tipos de botões


  • Botão de texto – Text button (ênfase baixa)
  • Botão com contorno – Outlined button (ênfase média)
  • Botão contido – Contained button (alta ênfase)
  • Botão de alternância – Toggle button
• Um elemento obrigatório no botão é rótulo do texto e pode haver um ícone opcional. Se não houver texto, é necessário ter um ícone que indique o que o botão faz.
• Por padrão, o Material Design usa rótulos de texto de botão em letras maiúsculas. Isso distingue o rótulo do texto do texto ao redor. Se um botão de texto não usa letras maiúsculas para o texto do botão, encontre outra característica para distingui-lo, como cor, tamanho ou posicionamento.
• Recomendações Google para botões

  • Uso de letras maiúsculas
  • Quebrar linha
  • Indicação da ação mais importante
  • Evitar dois botões posicionados lado-a-lado se não tiveram a mesma cor de preenchimento
  • Evitar colocar um botão embaixo do outro
  • Não separar elementos dentro do botão
  • Evite usar rótulos extensos em botões
• Hierarquia de botões


  • Botão flutuante com destaque maior, mudando formato
  • Botão com ênfase
  • Botão com ênfase baixa
• Estado de botões


  • Disponível
  • Desabilitado
  • Sobre
  • Focado
  • Pressionado
• Tipos de botão


  • Botão com fundo
  • Botão com ícone
  • Botão com contorno
  • Texto - Link
  • Botão acoplado
• É essencial, na arquitetura da informação, inserir elementos que permitam acessar links. Os elementos que recebem links podem ser textos, listas suspensas (menus) e até caixas de navegação.
• Os menus exibem listas de links. O menu pode exibir diretamente as opções, ou pode exibir opções a partir de seleções (subitens).
• Posicionamento dos menus


  • Container
  • Texto
  • Divisor
  • Ícone principal
• Os menus laterais bloqueiam a interação com o resto do conteúdo de um aplicativo com uma tela. Eles são dispostos um nível acima da IU do aplicativo e não afetam a grade de layout da tela. Eles são principalmente para uso em dispositivos móveis, onde o espaço da tela é limitado.
• Listas são recursos visuais que auxiliam na diagramação do layout. Tanto para textos quanto para imagens.
• As listas podem ter no máximo três linhas
• Procure separar as listas com uma linha divisória para facilitar a visualização.
• As listas podem assumir comportamentos, como transições, podendo passar de listas a containers. Pode deslizar com gestos (arrast
• Menus laterais


  Bloqueiam a interação com o resto do conteúdo de um aplicativo com uma tela. Eles são dispostos um nível acima da IU do aplicativo e não afetam a grade de layout da tela. Eles são principalmente para uso em dispositivos móveis, onde o espaço da tela é limitado.
• Menus laterais podem estar fechados ou abertos
• Listas


  Recursos visuais que auxiliam na diagramação do layout, tanto para textos quanto para imagens
• Listas podem ter no máximo três linhas
• Procure separar as listas com uma linha divisória para facilitar a visualização
• Listas


  • Podem assumir comportamentos, como transições, podendo passar de listas a containers. Podem deslizar com gestos (arrastar com o dedo)
  • Podem apresentar avatar ou miniaturas
• Recomendações de medidas feitas pelo Google para listas com uma, duas e três linhas
• Listas permitem exibir imagens de forma organizada, além de permitir comparações entre os itens expostos