Freecodecamp: Torne o desafio "Saiba como o FCC funciona" mais fácil de navegar (UX)

Criado em 3 ago. 2016  ·  15Comentários  ·  Fonte: freeCodeCamp/freeCodeCamp

Nome do Desafio

Aprenda como funciona o Free Code Camp

descrição do problema

Percorrer a apresentação de 12 slides é um pouco entediante, pois você precisa continuar pressionando "Ir para a próxima etapa" (em vez de pressionar as teclas de seta para navegar entre os slides). Os tamanhos das imagens também não são relativos à altura da tela, portanto, se a janela for pequena, você terá que rolar para baixo todas as vezes para ler o texto / alternar entre os slides.

Captura de tela

screen shot 2016-08-02 at 4 49 39 pm
screen shot 2016-08-02 at 4 49 28 pm
screen shot 2016-08-02 at 4 46 15 pm

help wanted UI

Comentários muito úteis

Eu também acho que este desafio poderia ser feito com algumas melhorias UX. Para começar, acho que todos esses desafios devem ser navegáveis ​​por meio das teclas de seta. O problema com a rolagem também é irritante. As imagens provavelmente poderiam ser menores.

cc / @ FreeCodeCamp / issue-moderators

Todos 15 comentários

Eu também acho que este desafio poderia ser feito com algumas melhorias UX. Para começar, acho que todos esses desafios devem ser navegáveis ​​por meio das teclas de seta. O problema com a rolagem também é irritante. As imagens provavelmente poderiam ser menores.

cc / @ FreeCodeCamp / issue-moderators

@atjonathan @oalhait sim - planejamos reduzir significativamente a duração deles. Se usássemos uma altura fixa para as imagens e seu texto, poderíamos eliminar grande parte da variabilidade na altura.

Acho que a melhoria mais imediata seria ir para o próximo desafio com as setas esquerda e direita.

Vou resolver o problema das setas esquerda / direita! Uma pergunta: onde encontro o html / css / js do desafio específico?

Olá @oalhait, obrigado por ajudar na UX.

Os desafios agora estão na infraestrutura de reação, a maioria das visualizações / controladores estão no /common/app , os desafios são arquivos json que estão no diretório /seed .

As visualizações são todas JSX, os estilos são MENOS

Dê uma olhada nas Diretrizes para Contribuição ., Boa correção!

E entre em contato com a sala de bate-papo dos

@oalhait - BTW - O link na descrição do problema aponta para localhost;)

@raisedadead obrigado pelas dicas, já estou
e @iamrudra HAHAHA

arrow
sugestões necessárias para -

  • o que fazer quando no final do desafio .. vá para o próximo desafio
  • o que fazer quando queremos que o usuário abra um link antes de prosseguir para o próximo desafio
  • o que fazer para o texto que mostra a numeração das etapas ... ou seja .. (4/12)
    @QuincyLarson @atjonathan

@sachinmour Oh - quando eu disse teclas de seta, quis dizer no teclado - não adicionar elementos de interface do usuário adicionais.

Em vez de adicionar botões adicionais, acho que seria melhor garantir que o botão da próxima etapa e os botões da etapa anterior estejam sempre no mesmo lugar (restringindo a altura das imagens / texto) para que você possa clicar neles repetidamente.

Mas queremos adicionar algumas teclas de atalho. As teclas de atalho estão localizadas em main.js

Quanto à sua pergunta sobre o que deveria acontecer se eles encontrassem uma etapa em que precisassem abrir um link antes de continuar, bem, clicar na tecla de seta simplesmente não os avançaria e, em vez disso, faria com que o botão "abrir link em uma nova guia" movesse de alguma forma chame a atenção para ele e notifique o usuário de que ele não pode avançar até clicar nele.

@QuincyLarson entendeu ..

10056
@QuincyLarson

O desafio está resolvido?

Isso ainda não funciona ?? Requer alguma ajuda?

Este problema está aberto como help wanted @ktajpuri , @ anush6533

Fizemos a transição para um conjunto menor de navegação na versão beta, acho que poderíamos fechar este @QuincyLarson ?

@raisedadead Sim - não acho que vale a pena melhorar neste ponto. Usamos apenas alguns desses desafios de slide, e eles são curtos - acho que o mais longo tem 4 slides.

Esta página foi útil?
0 / 5 - 0 avaliações