Equalizador de produto

Tabela de conteúdos

Uma ferramenta visual para ideação de produtos

A questão da diferenciação de negócio está muito em minha mente esses dias. Fiz uma pequena ferramenta pra ajudar a pensar sobre diferenciação, usando o conceito de equalizadores e graus de diferenciação.

TLDR: use aqui.

Eu me deparei com esse conceito pela primeira vez em 2005, quando ainda era um jovem desenvolvedor morando na Alemanha. Era o blog de Kathy Sierra, Creating Passionate Users, e ela estava falando sobre ideias inovadoras. Mais precisamente, como você, eu e todos podem ter ideias inovadoras, sem necessidade de genialidade.

A ideia é pensar sobre as dimensões essenciais de comparação entre o seu produto e a concorrência, e decidir como seu produto deve ser diferente do padrão. As expectativas padrão do usuário são o que você quer desafiar se quiser se destacar e ser notado. Leia o artigo original, vale a pena. A autora itera na construção de um equalizador, com algumas ilustrações. Lembro que alguém escreveu um em Javascript alguns dias depois, mas acabou quebrando conforme os navegadores evoluíram e se perdeu nos ventos da internet… até hoje.

Eu recriei os sliders em HTML5 e Javascript, e postei aqui. Espero que seja útil para você ao pensar sobre seu produto, recurso ou ideia de negócio, para brincar nos estágios iniciais. Ficou assim:

É muito rudimentar, eu sei, mas é o que eu consegui codificar em um único dia (e isso foi em 2022, antes de ter IA pra tudo). Fique por aqui para aprender como foi feito.

Implementação
#

Na minha prova de conceito de simulação, experimentei o Vite e o Preact.

Vite é um ambiente de desenvolvimento local muito inteligente que aproveita o suporte a módulos ES nos navegadores para servir seu código com recompilação mínima e fornecer substituição de módulo hot. Em alguns pontos, achei mais fácil salvar o código no editor para vê-lo ser aplicado na página do que mexer com as Dev Tools.

Preact é uma biblioteca de 3kb que funciona como React, mas não requer transpilação. Vite pode lidar com a transpilação, mas estou totalmente vendido na ideia de “apenas use o DOM”. Escrever HTML principalmente semântico faz todo o sentido para mim.

<div class="slider-value">
  <input type="range" name="value"
    value={model.value}
    title={model.title} min="-5" max="5" step="1" />
</div>

Outra coisa interessante sobre o Preact é o pacote Signals, que você tem que instalar separadamente, mas acho que é o santo graal das UIs reativas:

se você ler o valor, você renderizará novamente quando ele mudar
se você escrever no valor, você acionará novas renderizações.

Cada slider é apoiado por um Model que envolve um sinal, e a lista é outro sinal. Quando a lista muda, renderizamos novamente. Quando um modelo muda, renderizamos novamente. Aqui está uma parte do modelo, que é alimentado para o DOM que você viu acima para o slider.

class SliderModel {
  _state
  constructor({ title = '', description = '', value = 0 } = {}) {
    this._state = signal({ title, description, value })
  }
  _setState(override) {
    this._state.value = { ...this._state.value, ...override }
  }
  get title() { return this._state.value.title }
  set title(val) { this._setState({ title: val }) }
}

E em vez de encadear mudanças com useState(), posso simplesmente declarar o estado computado. Veja como as áreas de texto na seção de explicação atualizam seus placeholders conforme você altera o título do modelo:

  const title = useComputed(() => model.title || 'Untitled')
  const placeholder = useComputed(() => `explanation for ${title}`)

Espero que isso seja útil para você! Você pode conferir o código-fonte no github. Me diga o que você acha.

Implementação#

Implementação
#