Um

Leetcode ist die weltweit führende Online-Programmierplattform, auf der Menschen das Lösen von Programmierproblemen üben und sich auf technische Interviews vorbereiten können. Leetcode arbeitet nach einem Abonnement-Geschäftsmodell (35 $ für einen Monat, um weitere Probleme freizuschalten).

Leetcode wurde 2015 eingeführt und hat seinen Erfolg gezeigt.

Derzeit hat es im letzten Monat (April 2022) etwa 20.000.000 Besuche.

Laut seiner eigenen Website hat es jetzt über 5.000.000 registrierte Benutzer.

Warum Leetcode

Als früherer Softwareentwickler verwende ich Leetcode seit 4 Jahren. Die Gesamterfahrung ist fließend. Aber es gibt einige Punkte, die mich frustrieren.

Als ich vor einer Woche eine Stunde damit verbrachte, eine tägliche Herausforderung zu lösen, aber feststellte, dass es nicht zählte, war ich so enttäuscht, dass ich beschloss, einige Verbesserungen vorzunehmen.

Hauptziele

• Verschaffen Sie sich ein tiefes Verständnis der Schmerzpunkte, mit denen Leetcode-Benutzer derzeit konfrontiert sind.
• Versuchen Sie, mögliche Lösungen für die bestehenden Probleme vorzuschlagen.

UX-Forscher, Produktdesigner

Projektdauer

2 Wochen

Stufe 1: 19. Mai – 26. Mai, Entdecken und Definieren

Stufe 2: 27. Mai – 1. Juni, Entwurf und Bewertung

Projekttyp

Individuelles Projekt

—

Zielgruppe

Ich habe Profile von hochrangigen Benutzern überprüft und Blogs durchsucht, in denen „Leetcode“ erwähnt wurde, und fand heraus, dass die Benutzer sehr spezifisch sind – Softwareentwickler oder solche, die es werden wollen.

Grundsätzlich lassen sich Nutzer in zwei Untergruppen einteilen:

• Personen, die sich auf technische Vorstellungsgespräche vorbereiten. Sie nutzen Leetcode intensiv für 1–3 Monate, mehrere Stunden pro Tag.
• Menschen, die Algorithmen und Datenstrukturen lernen. ZB CS-Studenten. Sie haben die Angewohnheit , jeden Tag Probleme zu lösen , 1 Stunde oder weniger pro Tag .

Da die Pain Points zu stark voneinander getrennt sind, klassifiziere ich sie nach nutzerbezogenen Schnittstellen.

1. Ein Problem finden – Problemseite
2. Lösen Sie ein Problem – Codierungsseite
3. Tägliches Problem – Täglicher Herausforderungskalender und Streak
4. Diskutieren
5. Benutzerprofil

Dann lassen Sie uns in die Benutzererfahrung eintauchen.

Navigation

Wie in der Sitemap gezeigt wird (die gleiche Farbe weist auf verwandte oder ähnliche Inhalte hin), ist die Architektur von Leetcode unlogisch.

Hauptprobleme:

• Die Homepage ist unter dem Leetcode-Symbol versteckt, aber diese Seite besteht aus vielen sehr detaillierten Informationen, die zur Seite Wettbewerb und Probleme gehören.
• Die Problemseite besteht aus 5 verschiedenen Funktionstypen , die nichts miteinander zu tun haben.

Ich habe die 60 am besten bewerteten Posts (4 Seiten) unter der Registerkarte „Leetcode-Feedbacks“ und 50 Seiten mit Kommentaren im Post mit dem Titel „Feedback for new UI“ gesammelt. Nachdem ich Posts ohne Informationen entfernt hatte, erhielt ich 59 Benutzerkommentare in einer Tabelle.

40 % der Kommentare beschweren sich über die Programmierseite . Sie wiesen darauf hin, dass es zu voll und der Codierungsbereich zu klein für Laptop- Benutzer ist.

22% der Kommentare auf der Profilseite . Sie forderten aktuelle Wettbewerbsrankings, aktuelle und alle Posts sowie Datenschutzeinstellungen an.

6 erwähnte die Problemseite . Sie schlugen vor, dass die Hierarchie des täglichen Problems zu niedrig sei und nützlichere Sortieroptionen wie das Sortieren nach Likes.

4 erwähnte die tägliche Herausforderung . Sie fragten, wie Zeittickets verwendet werden könnten, wo sie frühere Herausforderungen finden könnten, und äußerten Verwirrung darüber, wann die Einreichung nicht gezählt wurde.

***Zur Verdeutlichung: Die quantitativen Daten sagen nichts aus, sondern zeigen die hohe Häufigkeit der Probleme. Da es einige Kommentare gibt, für die Hunderte Male abgestimmt wurde, kommentieren Benutzer, die abgestimmt haben, möglicherweise nicht mehr.

Heuristische Evaluation

Ich führe eine heuristische Auswertung auf der Website hier durch: Analysetafel .

50 Usability-Probleme wurden in 6 wichtigen Benutzeroberflächen entdeckt: Home, Explore, Problems, Discuss, Profile und Editor.

Und ich habe sie mit Wichtigkeits- und Schwierigkeitswerten (1–5) priorisiert. Sie können die priorisierten Usability-Probleme hier überprüfen .

—

Hier ist eine typische frustrierende User Journey

Wenn ich versuche, eine tägliche Herausforderung zu lösen:

• Das Problem mit der Zeitzone nervt. Die Frist zur Lösung des heutigen Problems ist 17:00 Uhr. Es informiert mich jedoch nicht, wann die Frist abgelaufen ist, während ich sie noch gelöst habe.
• Es wurde mir nicht mitgeteilt, ob meine Einreichung für die tägliche Herausforderung zählte. Als ich mit dem Codieren fertig war und es erfolgreich übermittelt hatte, stellte ich fest, dass nichts passiert war. Und ich kehrte zum täglichen Herausforderungskalender unter der Problemseite zurück und stellte nur fest, dass der Tag verpasst wurde.

• Nach dem Einlösen von Zeittickets gibt es keine Anweisungen, wo es zu verwenden ist
• Dann öffne ich ein verpasstes tägliches Problem. Ich weiß nicht, ob ich es nachgeholt habe, bis ich es erfolgreich eingereicht habe. Ich leide unter Unsicherheit .

• Die „Ähnliche Probleme “ unter der Problembeschreibung befindet sich ganz unten und ist standardmäßig eingeklappt. Nachdem ich darauf geklickt habe, brauche ich eine zweite Schriftrolle .
• Ich habe berichtet, dass ich das Problem schon einmal in einem Interview gesehen habe, aber die falsche Firma ausgewählt habe. Ich habe festgestellt, dass es keine Schaltflächen gibt, um mein fehlerhaftes Verhalten abzubrechen .

• Der Codierbereich ist nach dem Erweitern des Panels „Konsole“ zu klein .
• Ich habe „Autocomplete“ ausprobiert und bin gescheitert, weil es Premium ist.
• Das Konsolenfenster ist kurz in der Höhe. Und die Ein- und Ausgabebereiche sind so klein. Ich muss viel scrollen und mein Kurzzeitgedächtnis nutzen.
• Und da das Eingabefenster so kurz ist, hoffe ich manchmal darauf zu scrollen, finde aber, dass das Ausgabefenster versehentlich gescrollt wird.

• Die Lösungsseite hat horizontales und vertikales Scrollen , was mit einer Maus schwer zu bedienen ist.
• T der Lösungsteil und der Kommentarbereich haben unterschiedliche Breiten, was nicht konsistent ist .

• Der Diskussions-Tab öffnet direkt eine neue Seite an Ort und Stelle, ohne mich mit einem Symbol anzuzeigen, was nicht meinen Erwartungen entsprach. Da die Weiterleitung auf eine neue Seite die von uns eingegebenen Informationen verlieren kann, wird dies die Benutzer erschrecken.
• Aufgrund der kleinen Schriftart, der hellen Farbe und der langen Textzeilen ist die Diskussionsseite für Benutzer, insbesondere für alte Benutzer, schwer lesbar. (Ein Benutzer erwähnte, dass er auf 175 % zoomen muss, um den Text lesen zu können.)
• Und es gibt keine Option für mich, Beiträge nach Sprache zu filtern – nur Tags, die von Benutzern angepasst werden, damit Sie Tags wie „C++“ und „C plus plus“ finden können. Das macht es mir schwer, die beliebtesten C++-Lösungen zu finden.

• Kein Sucheintrag auf der „Codierseite“ . Ich muss zurück zur „Problemseite“ gehen und nach unten zur Problemliste scrollen, um nach einem Problem zu suchen . Es gibt nur die Schaltflächen „Weiter“, „Zurück“ und „Liste“, die ich nie benutze, aber Platz beanspruche.

• Beim Herausfiltern von Problemen auf der Seite „Probleme“ entspricht das Ergebnis nicht den Erwartungen der Benutzer , da immer das tägliche Problem angezeigt wird.
• Die Paginierung: Wenn Sie feststellen, dass die Seitengröße zu groß ist, müssen Sie nach unten scrollen, um die Paginierungseinstellung zu ändern.
• Inkonsistenz und Duplikat: Algorithmus-Tags werden hier auch Themen genannt und auf einer Seite doppelt angezeigt.

Inspirationen von Wettbewerbern

Ich habe beliebte Online-Programmierplattformen auf dem Markt analysiert: Geekforgeeks, Interviewbit, HackerRank und Codesignal. Nachdem ich ihre wichtigsten Benutzeroberflächen mit denen von Leetcode verglichen hatte, fasste ich einige Punkte zusammen, die ich als Referenz für das Design nehmen würde.

Problemseite:

• Das Anzeigen von Ergebnissen auf einer Scrolling-Seite ist beliebter als Paginierung. Laut Jacob's Value wird das mentale Modell der Benutzer durch das am häufigsten verwendete Layout beeinflusst.
• GeekforGeeks und InterviewBit zeigen die Anzahl der Ergebnisse , die den Bedingungen entsprechen, was für mehr Systemsichtbarkeit sorgt.
• Wenn mehrere Tags in einer Filteroption ausgewählt werden , filtern andere Wettbewerber Ergebnisse heraus, die mit einem der Tags übereinstimmen .
• GeekforGeeks und InterviewBit unterstützen die Suche nach Firmennamen und Themen

• Registerkarte Problembeschreibung: Geekforgeeks zeigt das Verhältnis akzeptierte Lösung/Einreichung als Genauigkeit an, was den Benutzern besser dient, indem manuelle Berechnungen reduziert werden
• Registerkarte „Problembeschreibung“: Geekforgeeks zeigt verwandte Kurse und verwandte Interviewerfahrungen, um Benutzer zu Kursen und Artikeln zu leiten.
• Registerkarte "Diskussieren": InterviewBit und Geekforgeeks zeigen die Diskussionen der Benutzer auf dieser Seite an, anstatt die Benutzer auf eine neue Seite umzuleiten.
• Hackerrank und Codesignal bieten eine Rangliste von Benutzerlösungen
• In Hackerrank und Codesignal können Benutzer die Lösungen anderer Benutzer nach Sprache filtern.

**Nur Geekforgeeks und Leetcode haben eine tägliche Problemfunktion.

• Geekforgeeks zeigt „das Problem von heute“ in einem großen Panel über der Liste aller Probleme mit einem Countdown an.

Obwohl einige Schmerzpunkte wirklich voneinander getrennt sind, gibt es einige kritische Probleme, die Benutzer daran hindern, ihre Ziele zu erreichen, und die an erster Stelle stehen sollten:

• Wie können wir den Codierungsraum vergrößern und gleichzeitig sicherstellen, dass Benutzer alles, was sie benötigen, gleichzeitig in einem Fenster haben (Eingabe und Ausgabe von Testfällen, Konsole, Lösung, Lösung/Diskussion anderer)?
• Wie können wir sicherstellen, dass Benutzer sich über ihren aktuellen Status und den nächsten Schritt im Klaren sind, wenn sie eine tägliche Herausforderung lösen oder nachholen?
• Wie können wir die Benutzerfreundlichkeit aller Problemlisten verbessern, um sicherzustellen, dass Benutzer erfolgreich filtern/suchen/sortieren?

• Wie können wir die Lesbarkeit der Diskussionsseite verbessern? Und wie könnten wir mehr Benutzer ermutigen, sich an der Diskussion zu beteiligen?
• Wie können wir die Profilseite informativer gestalten? Und wie könnten wir die Motivation für die Benutzer erhöhen, an einem Wettbewerb teilzunehmen?

• Schreibtischforschung, um Benutzerfeedback zu überprüfen und sich in die Benutzer hineinzuversetzen. Daraus habe ich gelernt, dass die Benutzer Usability-Probleme auf anderen Seiten ertragen können, sich aber am meisten um die Kernfunktionen kümmern, mit denen sie die meiste Zeit verbringen. Und das Benutzer-Feedback kann viele Emotionen und Stimmungen beinhalten.
• Heuristische Auswertung, um Details zu finden, die Designprinzipien gehorchen. Daraus habe ich gelernt, dass es wichtig ist, immer sicherzustellen, dass die Benutzer verstehen, wo sie sich befinden und was ihre Aktionen verursachen können. Systemtransparenz ist entscheidend. Und erwarten Sie immer, dass Benutzer eine Aktion versehentlich ausführen, und bieten Sie Optionen zum Abbrechen an.
• Die Architektur der Website-Information ist für Designer von entscheidender Bedeutung, um zu verstehen, warum diese Website auf diese Weise organisiert ist und welche Navigation besser passt. Denken Sie immer daran, was Benutzer auf dieser Seite finden möchten, und stellen Sie sicher, dass Benutzer es mit 3 Klicks finden können. Stellen Sie außerdem bei Inhalten, die mehr Benutzer verwenden sollen, die Auffindbarkeit sicher, indem Sie sie in einem geeigneten Bereich platzieren.
• Mitbewerberanalysen sind gut für Designer, um sich einen Überblick über bestehende Lösungen und Märkte zu verschaffen.

Im nächsten Artikel werde ich den Designprozess vom Skizzieren, einem Mid-Fi-Prototyp mit Screenshots, bis hin zu einem funktionierenden High-Fi-Prototyp, der mit Code implementiert wird, durchgehen.

(Ich hätte nie gedacht, dass ich eines Tages wegen eines Redesign-Projekts wieder anfangen muss zu programmieren :)

Wusstest du, dass du bis zu 50 Claps für einen Artikel geben kannst?

Einfach ein paar Sekunden halten. Ich hoffe, Ihnen gefällt diese Fallstudie!