Freecodecamp: Benutzerkonto/Benutzerinfo-Seite verbessern

Ich grabe sowohl 2 als auch 3. Lange Zeit wusste ich nicht einmal, dass es unten Optionen gibt, also denke ich, dass dies eine große Verbesserung wäre!

@ltegman, was meinen Standpunkt beweist. Ich bezweifle, dass viele von seiner Existenz wissen, denn kaum jemand denkt daran, so weit nach unten zu scrollen.

Danke für dein aufmerksames Feedback, @pmbenjamin. Hier meine Gedanken:

• Wir verwenden keine Dropdown-Menüs, daher ist Nr. 1 out.
• Wir haben vor einigen Monaten bewusst unsere alten Kontoverwaltungs- und Code-Portfolio-Seiten zusammengeführt und sowohl das Profilbild als auch die Brownie-Punktzahl auf dieselbe Code-Portfolio-Seite verwiesen. Ich tat dies als konzertierte Anstrengung, um Seiten zu vereinfachen und Verwirrung zu reduzieren (da weder der Brownie-Punktestand noch das Profilbild Ihnen explizit sagen, wohin sie Sie führen werden).
• Nachdem wir nun alles in "Herausforderungen" und "Projektherausforderungen" zusammengefasst haben, gibt es nur noch zwei Tabellen. Wir könnten diese als zusammengebrochene Akkordeons strukturieren, um den vertikalen Raum, den sie einnehmen, zu reduzieren.

@QuincyLarson Ich stimme Ihren Gedanken
Muss diese Art von Änderung (zB UI/UX) von einem Kernteammitglied (wie Berkeley) vorgenommen werden?
Oder kann ich da mal reinschnuppern?

@QuincyLarson Zusammenklappbare Tische klingen für mich nach einer guten Idee. Ich denke, sie sollten standardmäßig auf unserer eigenen Seite minimiert werden, damit wir schnell zu den Kontoeinstellungen gelangen, ohne zu viel zu scrollen.

Ich würde auch vorschlagen, Nicht-Code-Herausforderungen aus dem Code-Portfolio zu entfernen. Das beinhaltet:

• Alles in Treten Sie der Free Code Camp Community bei (5 Artikel)
• Alles in Vorbereitung für den Erfolg (4 Artikel)
• Alles, was mit "Get Set" beginnt (3 Artikel)

@pmbenjamin Nein, es ist zu gewinnen.

Verweis auf mögliches Unterproblem: #6452

Gut gedacht, ich unterstütze @alistermada mit diesen Elementen, die aus dem Portfolio entfernt werden.

Folgen Sie diesem und allen Portfolio-Threads, um zu sehen, ob wir gemeinsam eine bessere Version entwickeln können.

Ja, siehe #6452! Ich denke, die Verwendung der Karte wäre perfekt dafür. Ich liebe die neue Karte an der Seite des Bildschirms. Ich bin mit dem Quellcode von FCC nicht vertraut, daher weiß ich nicht, wie einfach es wäre, die Karte wiederzuverwenden. Es würde sich vorstellen, dass es Code austrocknen würde.

Ich denke, dieser Ansatz wäre eine intuitive Funktion für UX. Als ich zum ersten Mal die Seite eines anderen Campers besuchte, nahm ich an, dass die Karte den Fortschritt dieses Campers widerspiegeln würde, nicht meinen.

Hey, ich habe mit @hallaathrad gesprochen und wir hatten die Idee, ein neues Design für die Profilseite zu machen.
Also habe ich mich hingesetzt und ein Mock-Up gemacht.

Die linke Seite ( Seitenleiste ) und das FCC-Aktivitätsboard werden fixiert, und nur der Herausforderungsteil davon würde scrollen. Wir können sie auch, wie @QuincyLarson sagte, in zusammengeklappte Akkordeons für eine bessere UX verwandeln. Außerdem hätte jede der Schaltflächen einen Hover-Effekt, der sie vollfarbig machen würde.
Jedes Feedback ist willkommen, wie wir es verbessern können.

:+1:

@nightwalkerkg Ich mag diese Seitenleiste sehr. Das einzige klebrige Wicket, wie @hallaathrad bereits

Nun, das Handy ist kein Problem, da ich derjenige wäre, der das Design kodiert, so wie es jetzt ist (eine Sache übereinander), abgesehen von den visuellen und funktionalen Verbesserungen.

Obwohl ich tatsächlich versucht bin, das Profil als Seitenleiste zu verwenden.
hahaha Überlastung der Seitenleiste. Wir bauen langsam die Grundlagen für eine mobile FCC-App.

@SaintPeter Wir können die Seitenleiste in eine Navigationsleiste verwandeln.
http://www.roblukedesign.com/trunk/trunk.html

Hmm, obwohl ich diese Idee sehr mag, befürchte ich, dass es verwirrend und inkonsistent wäre, dieses Feature hinzuzufügen, wenn wir bereits das Feature für die Karte und den Chat haben.

Es wäre jedoch schön, diese beiden zu so etwas zu migrieren, obwohl dies zu diesem Zeitpunkt des Projekts nicht möglich ist. vielleicht mittelfristig.

@hallaathrad ich meinte es für die mobile Ansicht. Nicht im Allgemeinen.

hm, ich höre zu. Dies ist definitiv machbar, nicht unbedingt durch Hinzufügen eines weiteren Moduls, sondern durch eigene Codierung (ich habe etwas Ähnliches zuvor mit nur ein paar jquery-Zeilen gemacht).

Ok, als Erweiterung zu besprechen. Konzentrieren wir uns vorerst auf ein responsives allgemeines Design

Es gibt jetzt zu viele Herausforderungen bei FCC und Leute, die mehrere Hundert von ihnen abgeschlossen haben, haben eine wirklich lange Profilseite.
Wir müssen die Fuzzy-Suche wie die Karte auf der Profilseite implementieren, um schneller zu der Herausforderung zu gelangen, die wir erneut aufgreifen möchten.

Möchten Sie es ausprobieren und Ihren Ansatz einreichen? @xRahul

@hallaathrad Klar! Mal sehen was mir einfällt..

@xRahul ,

@atjonathan noch nicht.. Ich habe zuerst etwas Frontend gelernt, bevor ich die Benutzeroberfläche der Site modifiziere. Werde aber bald damit anfangen!

Ich denke, wir sollten beim einspaltigen Layout bleiben. Anstatt eine Seitenleiste hinzuzufügen, sollten wir uns darauf konzentrieren, den Platz an der Spitze des Portfolios effektiver zu nutzen. Ich denke, unsere Onboarding- und Kontokonfigurationsziele sollten im Vordergrund stehen.

Ich denke auch, dass die Suche auf der Code-Portfolio-Seite unnötig ist. Personen können scrollen oder Strg+f verwenden. Es ist in Ordnung, ein wirklich langes Code-Portfolio zu haben, solange wir eine klare Hierarchie haben und die wichtigsten Dinge ganz oben stehen - was sie derzeit sind.

@QuincyLarson , ich werde dies zusammen mit dem Hinzufügen des Bios von github aufgreifen. Sie werden gut zusammenarbeiten :smiley:

@QuincyLarson mein vorgeschlagenes Redesign:

_ Bitte verwerfen Sie die Schriftprobleme: Ich habe mir nicht die Mühe gemacht, sie abzugleichen oder die richtigen zu verwenden :stuck_out_tongue_closed_eyes: _

@atjonathan das sieht solide aus. Wir könnten auch einen Teil des Onboardings hierher verlegen. Die folgenden Herausforderungen könnten Schaltflächen oben mit Häkchen oder +1-Punkte-Symbolen daneben sein:

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

Dann könnte ich die ersten beiden Einstiegsherausforderungen zusammenführen (https://www.freecodecamp.com/challenges/learn-how-free-code-camp-works und https://www.freecodecamp.com/challenges/create-a -github-account-and-join-unser-chatrooms) zu einer Herausforderung, die wir unter /welcome stellen könnten

Dies würde es uns ermöglichen, die Abschnitte „Erste Schritte“ und „Ausrüstung für den Erfolg“ vollständig zu eliminieren.

Wie könnten wir diese Elemente Ihrer Meinung nach am besten im Code-Portfolio visualisieren? Vielleicht könnten Sie einen Mock oder einen funktionsfähigen Prototypen erstellen?

@QuincyLarson klingt großartig, lass mich das in Photoshop ausprobieren ...

@QuincyLarson , ich stelle mir so etwas vor:

@atjonathan das sieht solide aus. Ich glaube jedoch nicht, dass die Profilvervollständigung eine Geisterschaltfläche sein sollte. So hat LinkedIn es gemacht:

Denken Sie daran, dass einige Leute sehr lange Namen haben und dass Benutzernamen bis zu 15 Zeichen lang sein können.

Leute, ich denke, Sie konzentrieren sich viel zu sehr auf die Funktionalität und viel weniger auf die Ästhetik und das Benutzererlebnis.

Ich habe die Elemente in Karten getrennt, um die Navigation zu erleichtern. Im Moment sieht es so aus, als hätten Sie eine leere Seite genommen und einfach die Elemente darauf geworfen.

Ich habe den Fortschrittsbalken für den Profil-Update-Fortschritt verwendet und gebe den Benutzern Tipps, was sie tun müssen. Sie können auch eine Liste verwenden, die LinkedIn verwendet, um Tipps zu geben, wie sie ihr Portfolio verbessern können. Geben Sie ihnen nicht nur die Möglichkeit dazu.

(Sie können auch einfach eine Liste mit einem Symbol auf der linken Seite und Text auf der rechten Seite erstellen, was dem Benutzer fehlt)

Ich habe die Schaltflächen unter die Profilkarte gelegt und sie in einer Zeile platziert, um keinen Platz zu verschwenden.

@stefanivic , ich grabe das: gem:. @QuincyLarson Was denkt Ihr Gehirn?

Niemand fragt mich, aber ich würde @stefanivic zustimmen. UX sollte bei der Entscheidungsfindung dieses und jedes Produkts oberste Priorität haben. Vielleicht möchte er sich noch einmal in diese Kommentarrunde einmischen?

(und hoffentlich wird dieses Problem nicht wieder inaktiv).

@hallaathrad , wenn @QuincyLarson zufrieden ist, kann ich das zusammen mit #8943 sofort umsetzen

: +1: @stefanivic

@atjonathan Sie können definitiv mit der Implementierung von #8943 beginnen - was wir hier besprechen, ist nur die Konfiguration der Elemente auf der Seite.

@stefanivic Dein Mock sieht gut aus. Ein paar Anmerkungen:

• Es ist erwähnenswert, dass das Bios von GitHub maximal 161 Zeichen lang sein darf.
• Sie haben ein Feld für den Standort weggelassen.
• Vielen Dank für das Auftauchen dieser LinkedIn-Karten.

@stefanivic Bist du gut genug mit Bootstrap und Jade, um diese Ansicht selbst umzusetzen? Auf diese Weise können wir sehen, wie Ihre Vision bei allen verschiedenen Ansichtsfenstergrößen aussehen würde.

@QuincyLarson ja, ich benutze beide die ganze Zeit. Ich springe drauf, das einzige Problem ist, dass ich jetzt Prüfungen habe, also kann es zwei, drei Tage dauern. :P

@stefanivic OK - großartig! Viel Glück bei Deinen Prüfungen. Vielen Dank, dass Sie uns so schnell wie möglich die funktionierenden responsiven Ansichten zur Verfügung stellen.

Okay alle, sorry für die Wartezeit. Ich hatte nicht viel Zeit, um die FCC einzurichten und es in der Realität zu tun, also habe ich es mit CodePen gemacht, nur damit Sie sehen können, wie es mit der responsiven Ansicht umgeht.
http://codepen.io/nightwalkerkg/full/XKjVXz/

@QuincyLarson irgendwelche Updates dazu?

@QuincyLarson was

@stefanivic ,
Willst du es schaffen?

Hier war es schon länger ruhig! Ich habe mir gerade die Live-Version angeschaut. Die Schaltflächen wurden nach oben verschoben. Es gibt jedoch immer noch einen großen Unterschied zur Version von @stefanivic . Um ehrlich zu sein, gefällt mir sehr gut, wie das, was auf der Live-Site läuft, aussieht. Der einzige Nachteil für mich ist, dass es viel Platz benötigt. Bleiben wir bei der Live-Version oder bei der neuen Version? Sollten die anderen in dieser Ausgabe vorgeschlagenen Verbesserungen noch geprüft werden?

Dieses neue Design setze ich gerne um, wenn wir uns darauf einig sind. Ich persönlich denke immer noch, dass der Vorschlag von @stefanivic eine Verbesserung gegenüber dem aktuellen Design ist.

Mir gefällt, wie viel kompakter der Vorschlag ist. Ich bevorzuge auch die Tasten wie sie derzeit sind. Aus Konsistenzgründen wäre es wahrscheinlich gut, den aktuellen Schaltflächenstil zu verwenden. Ich denke, das Vergrößern des Textes könnte die Lesbarkeit wirklich verbessern. Der Text hier ist kleiner als an den meisten Stellen auf FreeCodeCamp. Quincy hat sich zuvor über die Erhöhung der Schriftgröße bei FCC geäußert .

@systimotic ja - Bootstrap 4.0 erhöht die Standardschriftgröße auf 17px, was meiner Meinung nach eine ziemlich gute Größe ist. Wir werden dies später implementieren, nachdem es stabil ist.