Freecodecamp: 「FCCの仕組みを学ぶ」チャレンジをナビゲートしやすくする(UX)

作成日 2016年08月03日  ·  15コメント  ·  ソース: freeCodeCamp/freeCodeCamp

チャレンジ名

フリーコードキャンプの仕組みを学ぶ

問題の説明

(スライド間を移動するために矢印キーを押すのではなく)「次のステップに進む」を押し続ける必要があるため、12スライドのスライドショーを実行するのは少し面倒です。 画像サイズも画面の高さに比例しないため、ウィンドウが小さい場合は、テキストを読んだりスライドを切り替えたりするたびに下にスクロールする必要があります。

スクリーンショット

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

最も参考になるコメント

また、この課題はいくつかのUXの改善で実現できると思います。 まず、これらの課題はすべて、矢印キーを使用してナビゲートできる必要があると思います。 スクロールの問題も厄介です。 画像はおそらく小さくすることができます。

cc / @ FreeCodeCamp / issue-moderators

全てのコメント15件

また、この課題はいくつかのUXの改善で実現できると思います。 まず、これらの課題はすべて、矢印キーを使用してナビゲートできる必要があると思います。 スクロールの問題も厄介です。 画像はおそらく小さくすることができます。

cc / @ FreeCodeCamp / issue-moderators

@ atjonathan @ oalhaitはい-これらの長さを大幅に短縮する予定です。 画像とそのテキストに固定の高さを使用すると、高さのばらつきを大幅に減らすことができます。

最も差し迫った改善は、左矢印と右矢印を使用して次のチャレンジに進むことだと思います。

左/右矢印の問題を取り上げます! ただし、1つの質問:特定のチャレンジのhtml / css / jsはどこにありますか?

こんにちは@oalhaitUXを手伝ってくれてありがとう。

課題は現在reactインフラストラクチャにあり、ほとんどのビュー/コントローラーは/common/app 、課題は/seedディレクトリにあるjsonファイルです。

ビューはすべてJSXで、スタイルは少ないです

貢献するための

そして、 Contributorsチャットルームに連絡してください。 援助のために。

@ oalhait-ところで-問題の問題の説明にあるリンクはローカルホストを指しています;)

@raisedadeadヒントをありがとう、私は今それに
@iamrudraHAHAHAおっと、私のローカルインスタンスで表示していました

arrow
に必要な提案-

  • チャレンジの最後に何をすべきか..次のチャレンジに進む
  • 次のチャレンジに進む前にユーザーにリンクを開いてもらいたい場合の対処方法
  • ステップの番号付けを示すテキストをどうするか...すなわち..(4/12)
    @QuincyLarson @atjonathan

@sachinmourああ-私がキーボードで意味した矢印キーを言ったとき-追加のUI要素を追加していません。

ボタンを追加するのではなく、次のステップボタンと前のステップボタンが常に同じ場所にあることを確認して(画像/テキストの高さを制限することにより)、それらを繰り返しクリックできるようにする方がよいと思います。

ただし、いくつかのホットキーを追加したいと思います。 ホットキーはmain.jsにあります

先に進む前にリンクを開かなければならないステップに遭遇した場合にどうなるかについての質問については、矢印キーをクリックしても先に進まず、代わりに[新しいタブでリンクを開く]ボタンが何らかの方法で移動します。それに注意を向け、クリックするまで進むことができないことをユーザーに通知します。

@QuincyLarsonはそれを手に入れました。

10056
@QuincyLarson

課題は解決しましたか?

これはまだ機能しませんか? 助けが必要ですか?

この問題は、オープンであるhelp wanted @ktajpuri、@ anush6533

ベータ版ではより小さなナビゲーションセットに移行しました。この@QuincyLarsonを閉じることができると思いますか?

@raisedadeadはい-

このページは役に立ちましたか?
0 / 5 - 0 評価