Por que o cursor do mouse é levemente inclinado e não reto?

 (ux.stackexchange.com)
2 pontos por GN⁺ 2024-02-05 | 1 comentários | Compartilhar no WhatsApp
  • O cursor de mouse inclinado de hoje é explicado como o resultado de um formato que se consolidou na época do Xerox PARC, quando era mais fácil de desenhar e reconhecer em telas de baixa resolução
  • O cursor inicial de Douglas Engelbart era uma seta para cima, e a resposta mais bem avaliada diz que ele mudou, nas máquinas do Xerox PARC, para uma seta inclinada parecida com a atual
  • Em telas de pixels de baixa resolução, linhas a 0 grau e 45 graus pareciam relativamente suaves mesmo sem antialiasing, o que tornava mais fácil criar um ponteiro com ponta bem definida do que uma seta reta para cima
  • A postura de apontar para a tela com a mão direita, o contraste de direção em telas com muitos elementos horizontais e verticais, e o ângulo de uso de ponteiros físicos também são citados como razões auxiliares
  • Há uma explicação de que alinhar a origem do cursor ao canto superior esquerdo reduzia o cálculo da posição do clique, mas nos comentários ela é contestada com base em fontes e em exemplos do Xerox Alto

O cursor inclinado consolidado no Xerox PARC

  • O mouse e o cursor iniciais foram criados por Douglas Engelbart, e sua primeira forma era uma seta apontando para cima
  • Depois, nas máquinas do Xerox PARC, o cursor mudou para uma seta inclinada
  • Com a baixa resolução das telas da época, desenhar um lado da seta como uma linha vertical e o outro como uma diagonal de 45 graus era mais fácil e também mais identificável
  • Essa explicação se baseia em documentos relacionados ao mouse óptico do Xerox PARC e em materiais sobre a história das GUIs

Ângulos que aparecem bem na grade de pixels

  • Em telas baseadas em pixels retangulares, é difícil representar uma ponta de seta nítida sem antialiasing
  • Linhas horizontais e verticais a 0 grau, e linhas a 45 graus, são direções típicas que parecem relativamente suaves em uma grade de pixels
  • Muitos cursores em forma de seta usam essa característica, com um lado formado por uma linha vertical e o outro por uma linha de 45 graus
  • Nesse caso, a bissetriz central da seta fica inclinada cerca de 22,5 graus
  • Como a identificabilidade da ponta é mais importante que a da cauda, a nitidez da cabeça da seta tem prioridade

O debate sobre o ponto de clique e o cálculo da origem

  • Uma resposta considera que, como a origem do bitmap do cursor ficava no canto superior esquerdo, inclinar a seta para a esquerda poderia reduzir o cálculo da posição do clique
  • Essa explicação citava um post do Reddit como fonte, mas nos comentários houve contestação de que o post era uma cópia de uma resposta do Yahoo! Answers sem referências citadas
  • Comentários de contestação apontam que o Xerox Alto também tinha cursores cujo hotspot não era (0,0)
    • Um cursor de cruz dentro de um círculo e um cursor de seta apontando para a direita são mencionados como exemplos
  • Segundo outro comentário, implementações de cursor geralmente têm um campo de hotspot, o que permite cursores como uma mira em cruz
  • Também é levantada a estimativa de que o custo de cálculo era pequeno o bastante para caber confortavelmente no intervalo de atualização do mouse, mesmo pelos padrões dos anos 1970

Interpretações ligadas ao formato da mão e a ponteiros reais

  • Várias respostas veem a seta inclinada como parecida com o formato da mão ao apontar para a tela com a mão direita
  • Essa interpretação é tratada mais como uma explicação baseada em experiência subjetiva do que como evidência histórica
  • Há também uma resposta centrada em um ambiente voltado para destros, acrescentando que, no passado, ao inverter os botões esquerdo e direito do mouse, a seta passava a apontar na direção oposta
  • Outra resposta explica que ponteiros físicos também costumam ser usados inclinados em cerca de 30 a 45 graus, em vez de espetar a tela perpendicularmente, e que esse ângulo conduz o olhar até a ponta
  • Há ainda a opinião de que uma seta reta para cima pode dar a sensação de apontar para a região superior em geral, e não para um ponto específico

Explicações auxiliares sobre percepção visual e obstrução da tela

  • Uma resposta sugere que o cursor inclinado também pode ser vantajoso do ponto de vista da percepção visual de baixo nível
  • As áreas visuais V1 e V2 processam características de baixo nível como cor, brilho, tamanho e orientação
  • Como as telas têm muitos elementos horizontais e verticais, uma linha inclinada pode se destacar mais por ter uma direção diferente do entorno, produzindo um efeito pop-out
  • Essa resposta cita como referências o estudo de 1988 de Treisman e Gormican e Visual Thinking for Design, de Colin Ware
  • Nos comentários, há a reação de que isso pode ser separado da causa histórica real, mas é uma razão auxiliar interessante

Exemplos de cursores retos e de outros formatos

  • Algumas interfaces menos conhecidas usaram cursores de seta reta
  • Nos comentários, também é mencionado que o ponteiro de dedo usado em links no navegador tem formato reto
  • Há comentários dizendo que alguns aplicativos modernos também usam setas retas
  • O cursor em forma de mão incluído na pergunta parece ter um ângulo menor que a seta quando aparece sobre botões, mas as respostas do texto tratam principalmente da história e do formato do cursor de seta padrão

Leituras relacionadas

1 comentários

 
GN⁺ 2024-02-05
Opiniões no Hacker News
  • É meio assustador que uma das respostas mais votadas a essa pergunta (188 pontos) esteja completamente errada. Ela explica que o hotspot (0,0) simplificava o cálculo de atualização da posição do cursor, porque não era preciso somar um deslocamento (X,Y)
    https://ux.stackexchange.com/a/52349/43259
    Mas a seta nunca foi o único cursor. Mesmo o primeiro Macintosh tinha muitos cursores, como o I-beam de texto e vários tipos de mira, e era possível definir um cursor arbitrário fornecendo bitmap, máscara de transparência e posição do hotspot
    Esses cursores também aparecem no Inside Macintosh Volume I original e em trabalhos anteriores do PARC
    https://web.archive.org/web/20230114223619/https://vintageap...
    Na página 50 do PDF (página I-38 do documento) há cursores de exemplo, e na página 158 do PDF (página I-146 do documento) há detalhes dos pixels e posições de hotspot de vários cursores. Um fato curioso é que o hotspot do cursor de seta não era (0,0), mas (1,1)
    Fico curioso se alguém sabe explicar o porquê. Acho que eu sabia antigamente, mas faz tanto tempo que a memória sumiu
    Essa página também traz a definição da estrutura Cursor: um registro com data, mask e hotSpot; Point é basicamente um par de coordenadas vertical·horizontal, conforme definido na página I-139
    O assustador não é alguém ter tido a ideia de que (0,0) economizava algumas instruções. Até você perceber que diferentes formatos de cursor precisam de hotspots diferentes, é uma hipótese bem plausível. O realmente assustador é que 188 pessoas votaram naquela resposta
    • Só assusta no começo; depois você se acostuma. Em todas as mídias sociais, incluindo o HN, há pessoas que não sabem muito concordando que uma resposta que soa plausível está certa
      Um amigo contador recebe votos negativos quando corrige como os impostos realmente funcionam, e minha esposa linguista também recebe votos negativos quando explica que “línguas não funcionam assim”. Não é assustador, é comum
    • Dá para ver algo parecido no código-fonte do Apple Lisa: https://info.computerhistory.org/apple-lisa-code
      A página do Stack Overflow linkada é, na prática, quase pura especulação
      História não é um conjunto de quebra-cabeças lógicos, e sim o trabalho de montar documentos e evidências. Como não vi, nos documentos da época, nenhuma base para afirmar intenção, a pergunta ainda não tem resposta
      Uma evidência decisiva seria algo de uma fonte importante anterior a mais ou menos 1988 (Microsoft/Xerox/Apple) com um nome de arquivo como cursor.bitmap ou código como declare cursor_default = [ [ 1, 0 ... ] ];, e acima disso um comentário explicando por que aquele estilo de cursor foi escolhido. Fontes menores como Acorn, Digital Research, Quarterdeck, NeWS, VisiOn e MIT Athena(X) também seriam aceitáveis
      Encontrar a história da caneta óptica e depois defender o estilo do cursor do mouse com base nela é trabalhar de trás para frente a partir de uma hipótese; é fraco e não descarta outras possibilidades. É preciso ser rigoroso
    • A seta tem um contorno branco, então o hotspot fica na ponta da seta preta, em (1,1)
    • Posy tem um vídeo incrível sobre a história dos cursores de mouse e também oferece um pacote de cursores feito por ele
      https://www.youtube.com/watch?v=YThelfB2fvg
      http://www.michieldb.nl/other/cursors/
    • Eu disse a mesma coisa 10 anos atrás: https://news.ycombinator.com/item?id=7253841
      Provavelmente é bem possível que eu diga a mesma coisa de novo daqui a 10 anos
  • Não li todo o material sobre o tema, mas imagino que o motivo de o cursor ser inclinado seja o mesmo motivo de ele ser inclinado para a esquerda
    Humanos são seres que criam e usam ferramentas, então, com o tempo, uma ferramenta passa a parecer uma extensão do corpo. Isso vale mesmo quando a ponta da ferramenta está separada da mão mecanicamente ou virtualmente, e esta ferramenta parece ter sido projetada como uma ferramenta de destro segurada na mão direita e entrando na tela
    Se não for esse o motivo da direção da inclinação, não há razão para ela não ser inclinada no sentido oposto. Se você for destro, experimente usar um cursor em que o lado direito fica à frente. Ele não só parece esquisito; a sensação também é estranha, como uma ferramenta segurada na mão esquerda
    Não sei se isso afeta canhotos. Sou canhoto, mas usar o mouse com a mão esquerda sempre me pareceu estranho, e não sei se isso é por causa da inclinação
    • Sou canhoto e sempre usei o mouse com a mão esquerda, mas nunca senti que a inclinação do cursor fosse estranha ou errada
      Uso mouse de computador de várias formas há mais de 30 anos, então pode ser que eu simplesmente tenha me acostumado tanto que a estranheza desapareceu. Talvez canhotos que estejam começando a usar mouse achem a inclinação do cursor estranha
    • O que importa é com qual mão você usa o mouse. Escrevo e faço a maioria das coisas com a mão esquerda, mas uso o mouse com a direita, e não parece estranho
    • Em vez de “não li tudo sobre o assunto”, neste caso bastaria ler a segunda resposta da página linkada. Ainda assim, parece que os dois comentários captam alguma coisa
    • Ninguém pergunta por que ele aponta para cima, mas o motivo é o mesmo. Normalmente a mão fica abaixo da altura dos olhos
      Em teoria, o cursor mais intuitivo poderia ser uma mira, mas usei um e não gostei
    • A sensação de estranhamento por parecer uma ferramenta segurada na mão esquerda dura pouco. Sou destro, mas desenvolvi lesão por esforço repetitivo (LER/RSI) no pulso usando o mouse com a direita, então uso com a esquerda há mais de 10 anos e não tenho problema
      O cérebro é extremamente adaptável. Por exemplo, nós nos adaptamos muito rápido até a ver o mundo de cabeça para baixo

https://theguardian.com/education/2012/nov/12/improbable-res...

  • Falta as respostas do Stack Overflow não mencionarem Alan Kay. Foi Alan Kay quem criou o cursor de mouse inclinado no PARC e, quando recebeu essa pergunta, respondeu assim:
    “Fui eu que desenhei o formato do cursor de mouse do PARC. Porque, na grade de 16x16 pixels de 1 bit que o Alto do PARC usava para o cursor, deixar um lado da seta na vertical e o outro inclinado produzia uma ponta de seta decente. Também projetei e criei muitas das primeiras fontes bitmap. E então, como acontece com muitas coisas na computação, aquilo acabou ficando.”
    ¹ https://jameshk.com/mouse-cursor

  • É hora de assistir ao meu vídeo favorito do Posy (Michiel de Boer) no YouTube, Mouse cursor history (and why I made my own)
    https://www.youtube.com/watch?v=YThelfB2fvg
    Ele passa pela história do cursor de mouse e por alguns problemas dos cursores padrão, e também mostra cursores históricos que não eram inclinados
    É um ótimo vídeo curto que faz a internet parecer valiosa, e também é do criador do Posy’s Cursor Pack: http://www.michieldb.nl/other/cursors/

    • Não tenho certeza se é preciso. Por exemplo, ele mostra o cursor do IIGS como o cursor de “Color mode” do Lisa
      Também não aborda o ambiente NeXT, DPS, diferenças de DPI, seu próprio cursor de seta preto e branco, nem como esse cursor de fato chegou ao Mac OS X, em vez de aos cursores posteriores ao System 1
    • No Windows, uso esse conjunto. Ele é bonito, e no Ubuntu uso este port para Linux
      https://github.com/simtrami/posy-improved-cursor-linux

  • A verdadeira pergunta é por que o cursor do Windows parece imperfeito
    https://mspoweruser.com/wp-content/uploads/2020/04/windows-c...

    • A página da web[0] de onde essa imagem veio, e a página do Reddit[1] que por sua vez foi a fonte dela, fazem uma analogia vaga com o fenômeno real[2] do equilíbrio óptico, mas não explicam de forma convincente por que ele se aplica a esse caso específico
      Outra explicação é que essa imperfeição intencional foi mantida para combinar com a imperfeição inevitável que existia quando o gráfico original do cursor era desenhado como pixel art de 1 bit, muito pequeno e de baixa resolução. Estamos acostumados com a aparência ligeiramente torta, então ela parece correta. Em tamanho normal, a diferença quase não é perceptível de qualquer forma
      [0] https://mspoweruser.com/why-windows-10s-asymmetrical-cursor-...
      [1] https://old.reddit.com/r/TIHI/comments/fwnep0/thanks_i_hate_...
      [2] editado, obrigado a jusuhi
    • O cursor atual de alta resolução parece uma versão ampliada do cursor original. Talvez seja por compatibilidade, já que ainda há muitos monitores usando escala de 100%
    • Continua me incomodando o problema de pequenas dicas de ferramenta ficarem encobertas sob o cursor e não poderem ser lidas, e, quando você tira o cursor, a dica desaparece. É algo que um dia poderia ser corrigido de verdade
    • Acho que é porque o Windows foi feito com pouca atenção aos detalhes e sem senso estético. Por exemplo, lembro claramente que, quando o Windows XP saiu, alguns dos ícones padrão não estavam alinhados corretamente na mesma linha de base. Isso foi corrigido em um service pack posterior
    • Uma explicação que vi em algum lugar dizia que, assim, o cursor parece mais equilibrado

  • Aos motivos que considero plausíveis — não cobrir o alvo apontado e imitar o gesto de apontar com o dedo — eu acrescentaria mais um: quase tudo que aparece na tela é perpendicular ao eixo x ou ao eixo y. Por isso, um cursor inclinado se destaca no meio do restante do conteúdo
    Além disso, em uma peculiaridade bem ao estilo Amiga, o cursor de mouse inicial do Amiga era inclinado a 45° em relação ao eixo x, ao contrário dos cursores mais agudos de outras GUIs populares. Ele também tinha uma ferramenta integrada para criar cursores de mouse personalizados, da qual eu gostava muito. Exemplos podem ser vistos em http://toastytech.com/guis/amiga12.html

    • O estilo curto e atarracado do ponteiro de seta original do Amiga talvez se devesse ao fato de que sprites de hardware só eram possíveis em baixa resolução, e linhas em degraus 2:1 não ficavam muito bonitas
      No Amiga OS 2.0, ele mudou para um estilo mais pontudo, mas ainda inclinado a 45°. Só com o AGA do Amiga 1200/4000 é que foi possível usar um ponteiro de mouse de alta resolução
    • A configuração de hotspot também estava incluída
      Como no ponteiro de mouse do Macintosh, o ponto de clique não era (0,0), mas (1,1). No editor da página linkada, ele é o ponto laranja dentro da área cor de pele

  • Um motivo convincente é que, quando você aponta algo com o cursor, ele não deve cobrir o alvo apontado. Se o cursor fosse invertido ou centralizado, cobriria parte do botão ao ficar sobre ele
    Isso pressupõe que o usuário se aproxime pelo canto inferior direito, o que em si pode ser consequência do formato do cursor. Ainda assim, acho mais forte a teoria da direção de leitura para explicar por que se tende a aproximar pelo canto inferior direito

  • No início eu também pensava assim, mas, ao verificar como o mouse é usado na prática, isso não parece se encaixar muito bem. Fico curioso se é só comigo
    Primeiro, em mais de 95% do uso comum de desktop, o alvo em que se quer clicar ainda não está debaixo do mouse, então não há nada a encobrir. Você move o mouse até o alvo e, quando chega lá, já tomou a decisão de clicar, então o que está embaixo não importa
    Segundo, se o mouse estiver em cima de algo que preciso ler, costumo tirar o cursor dali. Mesmo quando ele vira um cursor em forma de I sobre texto. Qualquer cursor normalmente tem espessura de linha e altura maiores do que os traços das letras renderizadas abaixo, então sempre encobre alguma coisa. Ou seja, mesmo que o cursor não estivesse inclinado, ele apenas cobriria a mesma área em uma posição um pouco diferente, e no uso real quase não faz diferença
    A direção de aproximação depende de onde está o cursor e de onde está o alvo. Seria interessante transformar dados de uso cotidiano em um mapa de calor, mas, olhando rapidamente para coisas usadas com frequência, como a barra de tarefas inferior e a barra de abas do navegador no topo, os alvos de clique estão tanto à esquerda quanto à direita da tela, e o cursor pode estar em qualquer lugar. Pode haver uma direção de aproximação um pouco mais comum, mas acho que a diferença não seria grande
    Por fim, softwares em que a obstrução pode realmente importar, como CAD, normalmente usam cursores personalizados, como uma mira de 1 pixel, não um cursor inclinado

  • Talvez seja uma imitação de uma caneta-tinteiro? Ao escrever com uma caneta-tinteiro, você a segura assim, e o cursor é uma ponta de caneta virtual
    https://youtu.be/U9mWKwXfF6s?t=155s

    • Se for assim, quem usa mouse para canhotos não deveria usar um cursor inclinado para o lado oposto?

  • É o Xerox PARC de novo. Dá a impressão de que tudo o que temos hoje foi inventado lá. Como pôde ser tão bem-sucedido e influente?

  • O ponto essencial de um ponteiro é que ele precisa ser visualmente distinto daquilo para que está apontando
    GUIs comuns, em geral, têm bordas retas e certa simetria. Um cursor igualmente simétrico se mistura mais facilmente ao fundo e é mais fácil de perder de vista
    A direção para a qual ele está inclinado é secundária; o essencial é a irregularidade da inclinação, que contrasta com o restante da interface

    • Não sei se é porque estou ficando velho ou por causa do meu monitor novo com HDR/resolução 5120/níveis extremos de branco e preto, mas ultimamente eu vivia perdendo o cursor em telas brancas, então tive que mudar a cor do cursor de branco para verde