Como o design do Yandex.Avto foi criado

Historicamente, pouca atenção foi dada às interfaces dos sistemas de mídia internos do veículo. A programação está sendo atualizada, mas o início dos anos 2000 ainda é sentido. Nos últimos anos, muitas tecnologias cresceram no mundo automotivo. Havia toneladas de dados, recursos de software expandidos e, em geral, havia carros com eletricidade e os primeiros drones foram embora. Mas as interfaces das unidades principais na massa permaneceram no mesmo nível .

A falta de inovação em multimídia incorporada nos últimos anos gerou ofertas de gigantes da mídia global, e o Yandex não é exceção.

A idéia de fazer algo para a indústria automobilística não surgiu do nada. É impossível ficar longe quando a empresa possui Mapas, Navegador, Música, Clima, Pesquisa, tecnologia de voz e muito mais; se você combinar tudo isso, algo útil poderá nascer.

Procure um produto futuro

O que é necessário ao volante? Quantas pessoas - tantas opiniões, mas geralmente todos precisam de serviços de navegação, música e recomendação. A primeira coisa que eles fizeram foi escrever os cenários de acesso ao sistema ao volante: colegas e conhecidos entrevistados, solicitações de recursos coletadas de usuários do produto e experiência pessoal da equipe. Em seguida, sistematizamos um enorme conjunto de cenários - e obtivemos uma tabela de conhecimentos sobre o produto.




Em cada cenário, os serviços envolvidos e seus tipos de gerenciamento são indicados.

Vale a pena notar que todos os drivers não podem ser cortados sob um pente. Um acabou de chegar ao volante e o segundo se considera um especialista em direção. Suas demandas enquanto dirige são bem diferentes. Todos os cenários podem ser divididos em vários grupos, dependendo da experiência de condução:

• O iniciante (até 1 ano), devido à pouca experiência, é bastante restrito nas solicitações de interface e geralmente na liberdade de ação. Ele segue atentamente o volante e a estrada, por isso é melhor não incomodá-lo.
• Um experiente (de 1 a 5 anos) já dominou, o horizonte de seus interesses é mais amplo, mas isso também é uma armadilha. Permitir que tudo seja perigoso: o motorista se distrairá da estrada.
• Um profissional (a partir dos 5 anos) já visitou todos os problemas e sabe o preço de um erro. É difícil de surpreender, difícil de balançar e, ao longo dos anos, ele desenvolveu seus hábitos de interface.

O que é um sistema de navegação e entretenimento? Para uma pessoa que está dirigindo, essa é realmente uma entidade secundária, que distrai a viagem.


Coloque a interface Y. Avto na direção

Quase todas as partes do corpo estão envolvidas simultaneamente na condução de um carro: pernas, olhos, ouvidos, mãos ...

Quanto mais experiência, mais calma você agir, melhor perceberá o fluxo de informações e mais ousadamente criará suas solicitações.

Como distinguir um iniciante de um profissional? Nisso, a experiência dos motoristas que usam a interface nos ajudará ao longo do tempo. Tendo estudado ações e cenários frequentes, você pode avaliar uma pessoa e se adaptar a ela. Para não ficar confuso ao projetar, escolhemos uma maneira simples: fomos guiados pelos scripts do iniciante.

Se você analisar as consultas básicas, o esqueleto do produto pode ser composto de três componentes:

1. Navegação
2. Acompanhamento musical.
3. Serviços de suporte e consultoria.

De fato, o carro leva você do ponto A ao ponto B. Você conhece a estrada ou precisa de uma rota - você dirige e, ao mesmo tempo, há um enorme fluxo de informações dinâmicas: manobras, sinais, avisos, recomendações, dados de tráfego ...


O fluxo de dados dinâmicos durante a rota

É muito barulhento durante a condução. O barulho de outros carros, a operação do motor, o atrito das rodas no asfalto, uma janela aberta - tudo se funde em um fluxo monótono, que às vezes deprime e até cala a boca. Portanto, a bordo do carro desde o aparecimento do rádio, há música. Agora, a escolha da música é bastante grande - por isso é difícil agradar a todos os gostos requintados. Portanto, falando de música, colocamos o conceito de um conjunto de entidades que a reproduzem. Rádio FM, música do navegador, AUX, Bluetooth, pen drive, Yandex.Music e outras fontes, todos juntos - um enorme processador de música que você precisa considerar.

Se quase todo mundo precisar de navegação e música, o restante dos serviços a bordo poderá variar dependendo da pessoa. Alguém gosta de olhar as estatísticas de um carro e tirar conclusões, alguém não pode viver sem um navegador ou gosta de rodar vídeo da Internet em um navegador. Estas são preferências individuais, portanto, têm uma prioridade mais baixa, pois não são necessárias para viajar.

Se você analisar a viagem em seus componentes, o caminho do ponto A ao ponto B no cenário arquitetural da interface será semelhante a este:


Caminho da interface do driver

Conceito de nascimento

Reunimos oportunidades futuras e estudamos a ergonomia do uso da interface - e a imagem do produto ficou mais clara. Um pensamento não saiu da minha cabeça: o motorista tem muito pouco tempo para se distrair com o sistema. Ele terá que segurar o volante com a mão esquerda e alcançar a tela com o dedo direito. Fazer com que ele escolha apenas os aplicativos certos e depois alterne entre eles não é mais tão simples. E se ele quiser seguir o caminho simultaneamente e mudar a música? E se, pelo contrário, ele sabe o caminho, mas precisa de avisos sobre câmeras e manobras, mas ao mesmo tempo é um amante da música e está cansado de ouvir rádio FM? Existem muitos cenários, e cada um deles é puramente pessoal.

Assim, nasceu a hipótese de combinar serviços. E se tirarmos dos aplicativos apenas o que uma pessoa precisa agora e exibir essas informações em widgets com diferentes focos? Se as informações parecem iguais, é difícil se concentrar em apenas uma coisa. Algo da abundância de entidades sempre será necessário agora. Daí os dois formatos de widgets que são inseridos em fitas e invertidos verticalmente em um círculo.


O princípio de combinar duas fitas de widget

• Um widget grande duplica parcialmente a funcionalidade do aplicativo e permite que você não entre nele novamente.
• Um pequeno widget de contexto com funcionalidade simplificada e apenas as informações mais importantes do aplicativo.

Combinando os dados dos principais serviços na tela, obtemos uma ferramenta flexível que pode organizar diferentes drivers.

Mais é mais. Se você aprender as ações frequentes do usuário e acumular uma história, poderá personalizar os widgets para cada uma. Seja uma combinação repetida de widgets ou seu conteúdo que lhe interessa, tudo depende da pessoa e da situação na estrada. Ao mesmo tempo, se você não deseja combinar serviços, sempre pode entrar no modo de tela cheia de um widget ou aplicativo.

Design de Interface

Decidiu sobre as sensações e começou a trabalhar em estreita colaboração com a interface. Era importante decidir o que e quando mostrar. Grade, acentos, informações de dosagem, mecânica, restrições - tudo correu em paralelo. Para esse design, importantes limitações foram claramente definidas durante o desenvolvimento:

• Área mínima para pressionar a tela (com o dedo estendido). Isso afetou o tamanho mínimo do texto, o tamanho dos botões importantes, o aumento da área de cliques e o ar ao redor dos elementos e texto clicáveis ​​da interface.
• A dependência de online e offline deixou claro que você precisa mostrar e se comunicar em um momento com o usuário para não enganá-lo.
• O carro se move ou não - depende disso limitar ou não o uso da interface. Descobriu-se que até agora tudo é relativo - tanto na política de preocupações com automóveis quanto em nossa atitude para com o motorista. Por um lado, pode ser limitado durante o movimento, mas quão moral é isso, certo? Por outro lado, um passageiro entediado também pode sentar-se em um carro ... O tempo e a pesquisa lhe dirão a abordagem correta.

Esboços rápidos de protótipos de estados do sistema

Uma das tarefas mais importantes é lidar com a navegação de rotas. O navegador já sabe ou eventualmente acumula uma história. Você pode se lembrar das localizações frequentes do usuário e tirar conclusões onde ele está. Por exemplo, surgiu a idéia de coletar um resumo detalhado de onde você está e para onde (possivelmente) planeja ir. Se for segunda de manhã e você estiver em casa, parece que é hora de ir trabalhar. E se você estiver em Elatma no dia de folga - essa é uma história completamente diferente ...

Ao mesmo tempo, vale a pena distinguir entre cenários quando você já está dirigindo por uma rota desconhecida e quando a rota não é necessária. Em um caso, é importante ver um mapa com a estrada; no outro, apenas notificações sobre o que vem pela frente são suficientes.


Abordagens para os widgets do Navegador

A multivariância da essência da música dividia tudo em dois padrões. Um para rádio FM com uma iteração evolutiva da escala de rádio, o segundo com uma bela capa que pode ser mostrada não apenas para Yandex.Music, mas também para músicas de uma unidade flash ou telefone conectado por Bluetooth. O nome correto do artista e da música é suficiente para deixar a solicitação on-line para procurar a capa.


Procura a aplicação de rádio FM

Do conceito ao lançamento

O pré-conceito definiu um conjunto básico de aplicações a bordo. A partir do zero, foi necessário desenvolver o rádio FM, chamadas, configurações e um sistema de atualização de aplicativos.

Do Yandex, foram utilizados o Navegador, Rádio, Clima, Navegador e assistente de voz. Com esses caras, foi necessário adaptar as versões móveis do Android ao tamanho da tela da unidade principal (1024 × 600 px), levando em consideração as regras de clicabilidade e legibilidade dos elementos.


Composição preliminar do sistema

É importante notar que os aplicativos móveis são projetados para funcionar no telefone e você o segura em suas mãos a uma pequena distância dos olhos. No carro, a tela é duas a três vezes mais. Tudo deveria ter se tornado maior. Em um mundo ideal, valia a pena desenvolver aplicativos do zero, levando em consideração a ergonomia e os cenários dos drivers. Mas lançar o produto é uma tarefa impossível. Esse processamento foi deixado para o desenvolvimento do sistema.

Cenários

Em seguida, trabalhamos com layouts, focando em cenários básicos. Vamos imaginar uma imagem ideal do mundo: existe uma conexão, nosso usuário com a história. Terça de manhã, hora de ir trabalhar. O motor arranca e o sistema sabe:

• Locais de viagem (as pessoas vão trabalhar nos dias de semana e pela cidade nos fins de semana).
• A música mais recente.
• Pontos selecionados no navegador.
• Dados da penalidade e conta de estacionamento.

O motorista vai trabalhar pela centésima vez e, provavelmente, conhece o caminho sem um navegador. Então, basta que ele veja apenas os limites de velocidade, as câmeras a caminho, o gradiente de engarrafamentos e manobras para não perder a curva. No caminho, pode ser necessário receber uma ligação, alternar músicas e, entre os casos, visualizar a previsão do tempo para a noite. Perto do trabalho, será necessário estacionar.

Pretendemos ser o protótipo mais simples que refletiria as ações básicas:



Um cenário não é suficiente. É necessário verificar os usuários que precisam apenas de um navegador e até a tela cheia, assim como aqueles que gostam de assistir filmes em engarrafamentos e aqueles que precisam apenas de música. É importante a aparência da tela inicial antes de começar a se mover e o que é combinado na tela.

Tendo viajado com a equipe com os primeiros protótipos no carro, garantimos que o mínimo na estrada seja um navegador (na zona principal) e um tocador de música com a capacidade de selecionar uma fonte (à direita). Tudo o resto é individual.

Assistente de voz

Chegou a hora de estabelecer a capacidade de controlar a voz. A voz no carro é um elemento de controle de interface promissor, enquanto as mãos estão ocupadas pelo volante. "Vamos lá para fora ..." ou "Ligue o rádio ..." - tudo isso deve funcionar sem tirar as mãos do volante e os olhos da estrada. É importante que o motorista perceba com visão periférica e entenda por um sinal sonoro que o assistente de voz está ativado e você pode perguntar.


Exemplo de jogo com Alice na cidade

Formulamos outro princípio de trabalho: não duplique as respostas do assistente com o texto, porque ele se distrai da estrada. Faz sentido exibir apenas os comandos do motorista para que você possa verificar se eles são reconhecidos corretamente.

Modo diurno

Se você olhar para o painel do carro, o modo noturno parecerá mais familiar, pois os torpedos geralmente são pretos ou escuros. Mas a tela preta da tarde começa a refletir a luz e fica opaca; é inconveniente ler o texto nela. Uma tela brilhante ou dispersão de filme fosco, brilho inicial fraco e contraste da tela - todos juntos tornam o modo noturno inutilizável.

O modo noturno do layout foi desenvolvido originalmente em três cores (preto, branco e sotaque) com diferentes estados de transparência. A mudança da noite e do dia deveria ter ocorrido sem confusão desnecessária. Estamos ligados à mecânica pronta do substrato do mapa no navegador e obtemos uma dependência automática do tema da interface no amanhecer e no pôr do sol.


Estilos de texto para temas de interface diurnos e noturnos

Comunicação a bordo

A interface é completamente dependente dos dados da Internet do servidor e do sinal do GPS, então tivemos que descobrir o status dos widgets na tela principal. A máquina nem sempre está em contato, às vezes a conexão fica lenta - e o estado da interface pode ser diferente.


Dependência de widgets no status da rede

No primeiro lançamento em série da Toyota em setembro de 2017, a interface, que está sendo constantemente ajustada de acordo com o layout ao vivo, parecia já mais refinada. Introduziu o sistema de atualização mais simples para versões futuras.


Vídeo para o lançamento do Yandex.Auto

Desenvolvimento do projeto

Após o lançamento, novos horizontes de desenvolvimento se abriram. Ficou claro para onde ir a seguir, e a frente do trabalho ficou ainda mais ilimitada. Com o início da produção em série e das vendas de carros, surgiram as primeiras críticas. O Metric começou a pintar lentamente uma imagem do que está acontecendo. Mais adiante, no próximo programa de desenvolvimento, foram lançados o J. Drive, novas marcas de automóveis, suporte para o que é e uma grande lista de lista de compras.

Personalização

Ao trabalhar com marcas de automóveis, era necessário levar em consideração a personalização do fabricante. Ao comprar um carro, esperamos que todos os detalhes reflitam a marca. Os painéis, como regra, tentam manter o carisma do carro com fontes, setas, dispositivos. É claro que fazer uma interface para cada marca é problemático, mas encontrar elementos que possam apoiar o caráter geral do painel é bastante realista. Cor de destaque, cabeçalhos de fontes, ícones, ilustrações ...


Um exemplo da personalização proposta para a Renault

Começando com Yandex.Drive

As pessoas usam carros de compartilhamento de carros de maneira bem diferente dos carros pessoais. Basicamente, você precisa sentar-se rapidamente e ir de A a B, porque cada minuto custa dinheiro. Ficou claro que, neste caso, não é necessário fornecer a funcionalidade completa da versão original. Inicialmente, eles cortam o conjunto de aplicativos e acessam as configurações completas do sistema. As principais tarefas nessa direção foram lembrar o escolhido e efetuar o login, adicionando as habilidades de Alice, melhorando o regime diário.

Por mais de um ano, a versão para compartilhamento de carros se transformou, de fato, em uma vitrine com um número constante de usuários. Um grande fluxo de revisões e o comissionamento de novas unidades principais fizeram seus ajustes.

Por exemplo, o tema diário em carros diferentes caiu visualmente em alguns lugares devido às características físicas das telas. Como resultado, o regime diário foi refeito. Primeiro, tentamos aumentar o conteúdo de gordura e o tamanho da fonte, abandonando seus estados translúcidos.


A primeira abordagem à mudança de estilo

De acordo com os resultados da pesquisa de UX, os usuários do Yandex.Drive decidiram viver como um experimento sem o estado da tela principal, onde a parte central era anteriormente uma zona de widgets roláveis. Desde o lançamento, o modo de tela principal conseguiu desempenhar seu papel e agora está sendo refeito. Todas as alterações descritas já estão disponíveis nos carros de compartilhamento de carros a partir de maio de 2019.

Dispositivos próprios

Com o tempo, o interesse no projeto começou a crescer, e a equipe teve a ideia de criar um produto para todos. Unidades principais selecionadas para mais de 14 modelos e começaram a adaptar o produto a elas.


Garantia de qualidade para peneiras de unidade principal na fábrica de Caska na China

Nesta iteração, finalizamos as chamadas, configurações avançadas para a unidade principal, adaptamos a versão completa do Yandex.Music para Android, melhoramos o sistema de atualização e a interação com Alice. Mais detalhadamente sobre o que já está disponível para venda, está escrito no site Yandex.Avto.

É importante notar que esta versão pode ser considerada um sistema completo para um carro pessoal, que será atualizado e desenvolvido ao longo do tempo. Suporte para aplicativos atuais novos ou atualizados, melhorias na interface - tudo chegará a bordo em tempo hábil.


Visualização atual da interface GU à venda

O futuro

Graças às instalações em carros, ao lançamento do compartilhamento de carros e seus dispositivos, novos usuários são constantemente adicionados às métricas. Há muitas idéias sobre como melhorar o sistema e muitos desenvolvimentos; portanto, o plano está planejado para os próximos anos.

É importante que agora no mundo dos automóveis e sistemas de mídia incorporados seja formado um ambiente competitivo saudável, no qual haja um lugar para todos que fazem algo interessante.

Toda semana, informações sobre uma determinada tecnologia útil são exibidas, por isso precisamos manter o padrão. Os dados do carro e o suporte de suas funções ao longo do tempo levarão o produto a um nível totalmente novo de comunicação com o motorista.

Inscreva-se no canal de telegrama sobre design no Yandex t.me/yandexdesign