Design de app de casa inteligente: redesign da tela inicial, antes e depois

Um app de casa inteligente tem uma única missão na tela inicial: mostrar em qual cômodo você está e deixar você mudar o que está ligado, com um toque. O primeiro rascunho abaixo tem todos os controles, mas lista oito linhas idênticas com linhas de status minúsculas, esconde os cômodos em texto sublinhado e deixa as cenas para o final, como seis botõezinhos. Parece uma página de configurações, então usar o app dá a sensação de configurar, não de viver.

A correção mantém todas as funções e muda a forma de mostrá-las. O cômodo vem primeiro, os dispositivos viram tiles que acendem quando ligados, e as cenas viram pílulas ao alcance do polegar.

A tela inteira, antes e depois

Rascunho júnior

Corrigido

Na esquerda, nada lidera. O cabeçalho, a faixa de estatísticas, seis links, um banner de foto, oito linhas e seis botões têm todos o mesmo peso. As linhas de dispositivos são o maior bloco, e todas são igualmente grandes, então uma TV desligada parece tão importante quanto o termostato que está aquecendo.

Na direita, a tela responde a duas perguntas em ordem: onde estou e o que está ligado. A foto é o cômodo, não um banner sobre o app. O estado é carregado pela cor, então o usuário lê a grade num relance.

O que mudou, medido

Correção 1: diga o cômodo, depois o que está ligado

Antes

Depois

Um cabeçalho com ícone de menu, My Home, mais, configurações e um sino com ponto vermelho, uma faixa de clima com 18°C Nublado, Interno 22°C, Umidade 44%, Energia 3,2 kWh, seis links de cômodos sublinhados e um banner de foto com Haven, contra Living Room em tipografia grande e em negrito com 22° · 3 luzes acesas embaixo, sobre a foto do cômodo, com um mais e um menu de três pontos.

O cabeçalho do rascunho tenta ser um painel de controle. Ele carrega três ações, uma linha de clima em quatro partes e uma saudação dizendo que a casa está "funcionando bem", o que não é informação. O usuário já sabe que nada está errado, porque nada está piscando.

A correção dá um assunto à tela. "Living Room" é o título, e uma linha embaixo traz os dois fatos que as pessoas checam: a temperatura e quantas luzes estão acesas. As três luzes são o Floor Lamp, o Ceiling Light e o Shelf Light que já estão ligados no rascunho, então nada foi inventado. Clima, umidade e energia abrem pelos três pontos, e o sino e a engrenagem vão para o Perfil.

Esse é o padrão que o Apple Home usa: um nome de cômodo com seu estado ao vivo no topo.

Regra para reaproveitar: coloque o lugar primeiro e uma linha de estado ao vivo embaixo. Mova o resto para trás de um menu.

Correção 2: abas de cômodos simples que deslizam

Antes

Depois

Seis links sublinhados em uma fileira: Living Room, Bedroom, Kitchen, Bath, Garage, Office, contra Living Room em branco e negrito e Bedroom, Kitchen e Bathroom em cinza, saindo pela borda direita.

Texto sublinhado parece um link num parágrafo, não uma escolha entre cômodos. Seis deles também ocupam a largura toda, então o usuário não sabe qual cômodo está aberto. O sublinhado é a ferramenta mais barulhenta da página para o elemento mais quieto.

Abas simples resolvem os dois problemas. O cômodo selecionado é branco e os outros são cinza, então o cômodo atual é o único brilhante. A fileira sai pela borda direita de propósito, o que mostra que ela desliza e deixa a lista crescer além de seis cômodos sem um novo layout. Bathroom e Office estão a um deslize de distância, e Garage abre pelos pontos.

Regra para reaproveitar: mostre a seleção com cor, não com sublinhado, e deixe uma fileira de opções sair pela borda.

Correção 3: tiles em vez de linhas

Antes

Depois

Oito linhas idênticas com ícone, nome, uma linha de status cinza como On, 80%, Warm White e um pequeno interruptor âmbar ou cinza à direita, contra tiles largos e arredondados em duas colunas: Floor Lamp e Thermostat em branco com ícones âmbar, TV e Speaker escuros com ícones brancos, e Ceiling Light e Blinds começando abaixo.

As linhas custam mais caro. Cada uma exige que o usuário encontre uma linha de 9 px, leia "On | 80% | Warm White" e depois encontre um interruptor de 30 x 18 para tocar. Oito delas são uma coluna de texto sem nada que separe os dispositivos ligados dos desligados.

Um tile é um botão. O tile inteiro é a área de toque, o nome é 14 e o estado é 12, e a cor faz o trabalho do interruptor: branco com ícone âmbar é ligado, escuro com ícone branco é desligado. O usuário escaneia oito dispositivos de uma vez e vê que dois estão ligados nas primeiras linhas. Os tiles também passam por baixo da barra de abas flutuante, o que diz ao usuário que a lista continua.

Nada foi cortado. O Ceiling Light, o Shelf Light, o Blinds e o Air Purifier do rascunho ficam atrás de "All 8" em Accessories, então todo dispositivo continua acessível.

Regra para reaproveitar: quando cada item tem estado ligado e desligado, mostre o estado com a própria cor do item e faça o cartão inteiro ser o alvo.

Correção 4: pílulas de cena de verdade

Antes

Depois

Um pequeno rótulo SCENES sobre seis botões cinza iguais em letras maiúsculas: Movie, Sleep, Away, Morning, Party, Reading, contra uma fileira de pílulas arredondadas com ícones: Movie acesa em branco, Sleep e Away escuras, a próxima saindo pela borda.

As cenas são a melhor parte de um app de casa inteligente, porque um toque muda o cômodo inteiro. No rascunho elas ficam no fim, sob oito linhas, como seis botões cinza idênticos. Parecem um formulário, e nenhum diz qual cena está ativa.

A correção sobe as cenas, logo abaixo das abas de cômodos, e dá um ícone a cada uma. Elas têm 44 de altura, então funcionam com o polegar, e a cena ativa fica acesa em branco. Party aparece ao deslizar as pílulas e Reading está na aba Scenes.

Regra para reaproveitar: coloque a ação de maior valor onde está o polegar e mostre qual está ativa.

As correções menores

• Toda função permanece. Ceiling Light, Shelf Light, Blinds e Air Purifier ficam atrás de All 8. Clima, umidade e energia abrem pelos pontos do cabeçalho. Sino e engrenagem vão para o Perfil, que leva o ponto de aviso.
• Margens iguais. O rascunho tem 14 px à esquerda e 12 px à direita. A tela corrigida usa uma única margem nos dois lados.
• Um só destaque. O âmbar aparece apenas nos ícones dos tiles ligados e na aba ativa. No rascunho, ele está em todo interruptor e em vários ícones.
• Uma camada de escurecimento chapada. Uma camada preta de 52% cobre a foto, sem degradê e sem brilho, então o abajur continua legível e os livros escurecem.
• Menos abas. Quatro abas em uma barra flutuante de 62 px substituem cinco abas com ícones preenchidos e de contorno misturados.
• Escala tipográfica. O texto vai de 12 a 34 pt, com rótulos de aba de 10 pt, no lugar dos 9 a 15 px do rascunho.

Audite sua própria tela de casa inteligente

Pegue o arquivo do Figma

O arquivo grátis tem o rascunho júnior, a tela corrigida e cada parte como componente.

Arquivo grátis do Figma

Redesign de tela de casa inteligente, antes e depois

As duas telas e cada parte como componente do Figma. Grátis, somente visualização, duplique para os seus rascunhos.

Abrir no Figma

FAQ

Como deve ser desenhada a tela inicial de um app de casa inteligente?

Comece com o nome do cômodo e uma linha de estado ao vivo, como "22° · 3 luzes acesas". Mostre os dispositivos como tiles de duas colunas onde a cor significa ligado, coloque as cenas em pílulas perto do topo e mova clima e configurações para trás de um menu.

Um app de casa inteligente deve usar tiles ou listas para os dispositivos?

Tiles, para uma tela inicial. O tile inteiro é a área de toque e a cor mostra o estado num relance. Uma lista serve bem para uma visão longa de configurações ou histórico.

Como mostrar que um dispositivo está ligado em um app de casa inteligente?

Com o próprio tile: um cartão branco com ícone âmbar para ligado e um cartão escuro com ícone branco para desligado, assim ninguém precisa ler uma linha de status ou procurar um interruptor pequeno.

Onde as cenas devem ficar em um app de casa inteligente?

Perto do topo, sob as abas de cômodos, como pílulas que o polegar alcança, com a cena ativa acesa. As cenas mudam um cômodo inteiro com um toque, então não devem ficar sob oito linhas.

Quantas abas um app de casa inteligente precisa?

Quatro bastam: Home, Scenes, Automations e Profile. Os cômodos ficam nas abas deslizáveis da tela inicial.

Por que não sublinhar nomes de cômodos em um app de casa inteligente?

Sublinhado parece link em texto. Abas simples, com o cômodo selecionado em branco e os outros em cinza, mostram qual cômodo está aberto e deixam a fileira deslizar.

Fontes

• As duas telas são nossas, desenhadas e medidas no Figma. O app, Haven, e seus dispositivos são inventados. Os números são consistentes: três luzes estão acesas nas duas telas, o Floor Lamp está em 80% e o termostato está em 22° nas duas.
• Padrão estudado: Apple Home, com nome do cômodo e seu estado no topo, tiles para acessórios e cenas como pílulas. Os tamanhos de texto seguem o iOS (12 a 34 pt, rótulos de aba de 10 pt).
• Os ícones são da Phosphor (MIT). Fotos do Pexels: Yusuf P e Jan Vee.
• Publicado primeiro como carrossel no App Brainy.