Freecodecamp: ユーザーアカウント/ユーザー情報ページを改善する

私は2と3の両方を掘ります。長い間、一番下にオプションがあることすら知らなかったので、これは大きな改善になると思います！

@ltegmanは私の

思いやりのあるフィードバックをありがとう、@ pmbenjamin。 これが私の考えです：

• ドロップダウンメニューを使用していないので、＃1が出ています。
• 数か月前に古いアカウント管理ページとコードポートフォリオページを意図的に統合し、プロフィール画像とブラウニーポイントスコアの両方を同じコードポートフォリオページにポイントしました。 私はこれを、ページを簡素化し、混乱を減らすための協調的な取り組みとして行いました（ブラウニーポイントスコアもプロフィール画像も、どこに行くかを明示的に示していないため）。
• すべてを「チャレンジ」と「プロジェクトチャレンジ」にマージしたので、テーブルは2つだけになります。 それらを崩壊したアコーディオンとして構造化して、それらが占める垂直方向の不動産を減らすことができます。

@QuincyLarson私はあなたの考えに完全に同意します。
このタイプの変更（UI / UXなど）は、コアチームメンバー（バークレーなど）が行う必要がありますか？
それとも私はそれを刺すことができますか？

@QuincyLarson折りたたみ可能なテーブルは私には良い考えのように

また、コードポートフォリオからコード以外の課題を削除することをお勧めします。 これも：

• 無料コードキャンプコミュニティに参加するすべて（5項目）
• 成功のためのギアアップのすべて（4項目）
• 「GetSet」で始まるもの（3項目）

@pmbenjaminいいえ、それは

考えられるサブイシューの参照：＃6452

よく考えて、私は2番目の@alistermadaで、これらの要素をポートフォリオから削除しました。

これとすべてのポートフォリオスレッドに従って、より良いバージョンを一緒に考え出すことができるかどうかを確認します。

はい、＃6452をご覧ください！ マップを活用するのが最適だと思います。 画面の横にある新しいマップが大好きです。 私はFCCのソースコードに精通していないので、マップを再利用するのがどれほど簡単かわかりません。 それはそれがいくつかのコードを乾かすだろうと想像するでしょう。

このアプローチはUXにとって直感的な機能になると思います。 私が初めて別のキャンピングカーのページにアクセスしたとき、マップは私のものではなく、そのキャンピングカーの進歩を反映していると思いました。

ねえ、私は@hallaathradと話していて、プロフィールページの新しいデザインをするというアイデアがありました。
それで私は座ってモックアップをしました。

左側（サイドバー）とFCCアクティビティボードが固定され、そのチャレンジ部分のみがスクロールします。 @QuincyLarsonが言ったように、UXを向上させるためにそれらを折りたたまれたアコーディオンに変えることもできます。 また、各ボタンにはホバー効果があり、フルカラーになります。
改善方法についてのフィードバックは大歓迎です。

：+1：

@nightwalkerkg私はそのサイドバーが本当に好きです。 @hallaathradがすでに取り上げているように、唯一の粘着性のある改札はモバイルビューです。 それでも、これは現在の「一番下までスクロールする」バージョンよりもはるかに優れています。

まあ、モバイルは問題ではありません。私がデザインをコーディングするので、視覚的および機能的な改善を除いて、現在とほぼ同じです（互いに重なり合っています）。

私は実際にプロファイルをサイドバーにしたいのですが。
ハハハサイドバーの過負荷。 FCCモバイルアプリの基礎をゆっくりとまとめています。

@SaintPeterサイドバーをナビゲーションドロワーに変えることができます。
http://www.roblukedesign.com/trunk/trunk.html

うーん、私はそのアイデアが大好きですが、マップとチャット用の機能がすでにある場合、その機能を追加するのは混乱し、一貫性がなくなるのではないかと心配しています。

ただし、プロジェクトのこの時点では実行不可能ですが、これら2つをそのようなものに移行することをお勧めします。 多分中長期的に。

@hallaathrad私はモバイルビューのためにそれを意味しました。 一般的ではありません。

うーん、聞いています。 これは間違いなく実行可能なことであり、必ずしも別のモジュールを追加するのではなく、自分でコーディングすることで実行できます（以前、jquery行を数行使用して同様のことを実行しました）。

わかりました、拡張機能として説明します。 とりあえず、応答性の高い一般的なデザインに焦点を当てましょう

現在、FCCには非常に多くの課題があり、何百もの課題を完了した人々は非常に長いプロフィールページを持っています。
プロフィールページの地図のようなあいまい検索を実装して、再検討したい課題にすばやく到達する必要があります。

それを試してみて、あなたのアプローチを提出してみませんか？ @xRahul

@hallaathradもちろんです！ 私が思いつくことができるものを見てみましょう。

@xRahul 、これでどこにでも来たことがありますか？ 素晴らしいアイデアだと思います。

@atjonathanはまだ..サイトのUIを変更する前に、最初にフロントエンドを学習してきました。 でもすぐに始めようとしています！

1列のレイアウトに固執する必要があると思います。 サイドバーを追加するのではなく、ポートフォリオの上部にあるスペースをより効果的に使用することに焦点を当てる必要があります。 オンボーディングとアカウント構成の目標は、目立つようにする必要があると思います。

また、コードポートフォリオページでの検索も不要だと思います。 スクロールするか、control + fを使用できます。 明確な階層があり、最も重要なものが最上位にある限り、非常に長いコードポートフォリオを持っていても問題ありません。

@ QuincyLarson 、githubからBIOSを追加するとともにこれを取り上げます。 彼らは一緒にうまく機能します：smiley：

@QuincyLarson私の提案した再設計：

_フォントの問題を破棄してください：私はそれらを一致させたり、正しいものを使用したりしませんでした：stuck_out_tongue_closed_eyes： _

@atjonathanこれはしっかりしているように見えます。 オンボーディングの一部をここに移動することもできます。 次の課題は、横にチェックマークが付いている上部のボタン、または横に+1ポイントのアイコンである可能性があります。

https://www.freecodecamp.com/challenges/configure-your-code-portfolio
https://www.freecodecamp.com/challenges/join-a-campsite-in-your-city
https://www.freecodecamp.com/challenges/learn-what-to-do-if-you-get-stuck
https://www.freecodecamp.com/challenges/read-coding-news-on-our-medium-publication
https://www.freecodecamp.com/challenges/join-our-forum
https://www.freecodecamp.com/challenges/watch-coding-videos-on-our-youtube-channel
https://www.freecodecamp.com/challenges/join-our-linkedin-alumni-network
https://www.freecodecamp.com/challenges/commit-to-a-goal-and-a-nonprofit

次に、最初の2つの開始チャレンジ（https://www.freecodecamp.com/challenges/learn-how-free-code-camp-worksとhttps://www.freecodecamp.com/challenges/create-a）をマージできます。 -github-account-and-join-our-chat-rooms）を/ welcomeに置くことができる1つの課題に

これにより、「はじめに」と「成功への準備」のセクションを完全になくすことができます。

コードポートフォリオでこれらの要素を最もよく視覚化できると思いますか？ おそらく、モックや関数プロトタイプを作成できますか？

@QuincyLarsonは素晴らしいですね、Photoshopで試してみましょう...

@QuincyLarson 、私はこのようなものを想像します：

@atjonathanこれはしっかりしているように見えます。 ただし、プロファイルの完了をゴーストボタンにする必要はないと思います。 LinkedInのやり方は次のとおりです。

一部の人は非常に長い名前を持ち、ユーザー名は最大15文字になる可能性があることに注意してください。

皆さん、あなたは機能性に焦点を合わせすぎており、美学やユーザーエクスペリエンスにはあまり焦点を当てていないと思います。

ナビゲーションを簡単にするために、カードの要素を分離しました。 今、あなたは空のページを取り、その上の要素を投げたように見えます。

プロファイルの更新の進行状況に進行状況バーを使用し、ユーザーが行う必要のあるヒントをユーザーに提供します。LinkedInが使用するようなリストを使用して、ポートフォリオを改善する方法のヒントを提供することもできます。 彼らにそれのためのオプションを与えるだけではありません。

（左側にアイコン、右側にユーザ​​ーが不足しているテキストを含むリストを作成することもできます）

プロフィールカードの下にボタンを配置し、スペースを無駄にしないように1行に配置しました。

@stefanivic 、私はこれを掘ります： gem:。 @QuincyLarsonあなたの脳はどう思いますか？

誰も私に尋ねませんが、@ stefanivicに同意します。 UXは、この製品およびすべての製品の意思決定プロセスにおいて最優先事項である必要があります。 たぶん、彼はこのラウンドのコメントに再び参加したいと思いますか？

（そして、この問題が再び非アクティブにならないことを願っています）。

@ hallaathrad 、 @ QuincyLarsonが満足している場合は、＃8943と一緒にすぐに実装を開始できます

：+1：@stefanivic

@atjonathan間違いなく先に進んで、＃8943の実装を開始できます。ここで説明しているのは、ページ上の要素の構成だけです。

@stefanivicあなたのモックはよさそうだ。 いくつかのメモ：

• GitHubのBIOSは最大161文字までしか使用できないことを指摘しておく価値があります。
• 場所のフィールドを省略しました。
• LinkedInカードを表示していただきありがとうございます。

@stefanivic BootstrapとJadeを使用して、このビューを自分で実装するのに十分ですか？ そうすれば、さまざまなビューポートサイズであなたのビジョンがどのように見えるかを確認できます。

@QuincyLarsonええ、私はいつも両方を使用しています。 私はそれに飛びつきます、唯一の問題は私が今試験を持っているということです、それでそれは2、3日かかるかもしれません。 ：NS

@stefanivic OK-素晴らしい！ あなたの試験で頑張ってください。 できるだけ早くレスポンシブビューをご利用いただきありがとうございます。

みなさん、お待たせしました。 FCCをセットアップして実際に実行する時間があまりなかったので、レスポンシブビューがどのように処理されるかを確認できるように、CodePenで実行しました。
http://codepen.io/nightwalkerkg/full/XKjVXz/

@QuincyLarsonこれに関する更新はありますか？

@QuincyLarsonこれについてどう思いますか？

@stefanivic 、これに対してプルリクエストを作成し
あなたはそれを作りたいですか？

ここはしばらく静かです！ ライブバージョンをチェックしました。 ボタンは上に移動しました。 ただし、 @ stefanivicのバージョンとはまだ大きな違いがあります。 正直なところ、ライブサイトの様子がとても気に入っています。 私の唯一の欠点は、それが多くのスペースを占めることです。 ライブのものに固執するのでしょうか、それとも新しいバージョンに固執するのでしょうか？ この問題で提案されている他の改善点を引き続き検討する必要がありますか？

同意すれば、この新しい設計を実装できてうれしいです。 個人的には、 @ stefanivicの提案は現在のデザインを改善したものだと思います。

私は提案がどれほどコンパクトであるかが本当に好きです。 私も現在のボタンが好きです。 一貫性を保つために、現在のボタンスタイルを使用するとよいでしょう。 テキストを大きくすると、読みやすくなると思います。 ここのテキストは、FreeCodeCampのほとんどの場所よりも小さくなっています。 クインシーは以前、FCCのフォントサイズを大きくすることについてコメントし

@systimotic yes-Bootstrap 4.0は、デフォルトのフォントサイズを17pxにブーストします。これは、かなり良いサイズだと思います。 これは、安定した後で実装します。