Ein reales Beispiel für Bottom-Up-Schätzung

Lassen Sie uns betrachten, wie ein erfahrener Frontend-Webentwickler die Bottom-Up-Schätzung für eine nicht responsive Startseite angehen würde (siehe Bild):

Was haben wir auf dieser Seite? Da ist eine Kopfzeile. Es gibt sechs Abschnitte, zwei in voller Breite und vier kleinere Halbbreiten-Abschnitte. Kein Fußbereich, scheint einfach genug. Außerdem wäre das Seitenlayout auch eine eigene Einheit.

Haben Sie bemerkt, dass wir gerade drei Einheiten dieser Seite identifiziert haben, die auch in Aufgaben umgewandelt werden können?

Layout
Kopfzeile
Innere Abschnitte (größere und kleinere, aber im Grunde sehr ähnlich und können kombiniert werden)

Wir empfehlen dringend, für diese Einheiten Aufgaben zu erstellen und die Entwicklungszeit, die für jede aufgewendet wurde, vielleicht mit einer Projekt-/Aufgabenverfolgungssoftware Ihrer Wahl zu messen. Wir verwenden Active Collab Projektmanagement-Tool und empfehlen es sehr. Später können Sie die Schätzungen mit der tatsächlich benötigten Zeit zum Abschluss einer Einheit vergleichen und, falls nötig, analysieren, was bei Ihrer Schätzung schiefgelaufen ist, sodass Sie Schätzungen für ähnliche Einheiten in der Zukunft anpassen können.

Wir werden nun jede dieser Einheiten zerlegen. Beginnen wir mit dem Layout:

Es ist nicht responsiv in dem Sinne, dass es mobile und Tablet-Größen unterstützen sollte, aber da es den gesamten Bildschirm abdecken sollte, müssen Sie Prozentwerte für die Elemente statt Pixel verwenden. OK, also hätten wir eine Kopfzeile in voller Breite oben und einen Inhalts-Wrapper, den wir für andere Elemente verwenden können. Im Inhalts-Wrapper können wir alle Abschnitte mit float: left versehen, wobei die größeren 100% Breite und die kleineren 50% Breite haben würden. Angenommen, Sie verwenden ein Grunt Boilerplate wie unser Orange Boilerplate, könnte es ungefähr 5 Minuten dauern, es zu initiieren, Node.js Abhängigkeiten zu installieren, weitere 5 Minuten, um ein grundlegendes LESS CSS Layout einzurichten. Die Seite verwendet benutzerdefinierte Schriftarten, und wir haben die Webfont-Dateien nicht, also müssen wir sie selbst konvertieren aus der generischen Schriftdatei und diese mit LESS CSS importieren. Das dauert normalerweise nicht mehr als 10 Minuten, aber wenn es ein Problem mit der Datei gibt, die wir haben, müssten wir Alternativen betrachten. Lassen Sie uns 20 Minuten dafür ansetzen.

Beachten Sie, dass, obwohl die Schätzung für diese Einheit nicht hoch sein wird und vielleicht irrelevant erscheint, Sie durch die Aufteilung in Abschnitte gerade eine Analyse aller Dinge durchgeführt haben, die Sie tun müssen, um die Webseite einzurichten. Im Wesentlichen haben Sie gerade die Arbeit geplant, die Sie für diese Einheit erledigen müssen. All das, während Sie die Schätzung durchführen. Sie haben Zeit in der Ausführungsphase gespart und potenzielle Probleme identifiziert, bevor Sie eine einzige Zeile Code geschrieben haben. Das ist nur ein weiterer Vorteil der Bottom-Up-Schätzungstechnik.

Schätzung des Layouts abgeschlossen: 30 Minuten

Weiter zur nächsten Einheit, der Kopfzeile:

Sie hat einen wiederholenden Hintergrund, den wir aus der PSD ausschneiden müssten, weil der Designer ihn nicht als separate Bilddatei bereitgestellt hat (wie üblich). Außerdem müssen wir das Logo und den benutzerdefinierten Facebook-Button ausschneiden. Allein die Photoshop-Arbeit wird 10 Minuten dauern. Das Logo und die Buttons können absolut positioniert werden und müssten Links sein. Also würde das HTML und Styling insgesamt 5 Minuten für beides dauern. Das Menü hat gleich breite Elemente und Zwischenräume, die knifflig sein könnten. Einige davon haben auch Unter-Menüs, also verwenden wir am besten verschachtelte ul > li Elemente. Das dauert normalerweise 10-20 Minuten, aber lassen Sie uns 20 Minuten dafür ansetzen, wegen der Ränder und der Positionierung des Unter-Menüs. Das Unter-Menü ist ähnlich und hat einen Pfeil oben, also lassen Sie uns auch dafür 20 Minuten ansetzen. Ich habe keine Ahnung, ob es bei Hover oder Klick angezeigt werden sollte, lassen Sie uns das überprüfen; aber es ändert die Schätzung nicht viel. Bei näherer Betrachtung könnte das Styling des Abstands zwischen den Menüelementen und der Schriftgrößen tatsächlich weitere 20 Minuten für Menü und Unter-Menüs in Anspruch nehmen. Was sollte der FB-Button tun? Gefällt die Webseite, was JS benötigen würde, oder verlinkt sie nur auf die FB-Seite? Nicht dokumentiert.

Wir haben auch die Kopfzeile geplant und zwei fehlende Dokumentationsstücke identifiziert.

Schätzung der Kopfzeile abgeschlossen: 1 Stunde 15 Minuten

Als Nächstes der innere Abschnitt:

Das HTML ist für diese recht einfach, ein h-etwas Element für den Titel, p Element für den Untertitel und ein Button. Das sind nicht mehr als 20 Minuten, um den Text für alle sechs Abschnitte einzufüllen. Das LESS CSS ist eine andere Geschichte. Wir müssen abdeckende Hintergründe für jeden einrichten (20 Minuten), die Schriftarten stylen und auch seltsame und ungleichmäßige Ränder an allen Untertiteln hinzufügen (das könnte eine Stunde dauern). Da ist auch der benutzerdefinierte Button, der wahrscheinlich auch anderswo verwendet wird, also sollten wir ihn wiederverwendbar machen (30 Minuten). Die Buttons sind nur Links, also zumindest das ist einfach. Zuerst müssen wir die Hintergrundbilder aus Photoshop ausschneiden, also gehen dafür auch 10 Minuten drauf. Wir können den Buttonpfeil als SVG ausschneiden und eine Icons-Webfont erstellen, die wir wahrscheinlich auch für andere Seiten verwenden werden. Das sind 20 Minuten.

Schätzung der inneren Abschnitte: 1 Stunde 40 Minuten

Also, für die gesamte Startseite haben wir eine anfängliche Schätzung von 205 Minuten. Wir haben einige fehlende Dokumentationen und wenn wir unvorhergesehene Probleme berücksichtigen, müssten wir wahrscheinlich einen 20%igen Puffer hinzufügen. Das sind 205 * 1.2 = 246 Minuten, was aufgerundet 4 Stunden Endschätzung ergibt.

Ich hoffe, dieses reale Beispiel hat Ihnen die Vorteile der Bottom-Up-Schätzungstechnik verdeutlicht. Dies ist der ideale Fall, wenn Sie mit einem erfahrenen Webentwicklungsteam arbeiten. Wenn das nicht der Fall ist, können Sie diese Technik trotzdem verwenden. In diesem Fall empfehle ich, sie mit der Trotačka-Schätzungstechnik zu kombinieren, die wir in unserem vorherigen Artikel besprochen haben 4 wesentliche Projekt-Schätzungstechniken.

Im Wesentlichen ist der Prozess ähnlich, aber anstatt eine Schätzung pro Einheit zu geben, müsste der Entwickler drei geben – die beste, die wahrscheinlichste und die schlimmste Schätzung. Die schlechteste Schätzung lässt den Entwickler über all die Dinge nachdenken, die beim Styling, der JavaScript-Plugin-Implementierung oder Ähnlichem schiefgehen könnten. Psychologisch – die Freiheit, jede Zahl, die er für den schlimmsten Fall möchte, einzugeben, gibt Ihnen eine zusätzliche Genauigkeitsschicht bei der Berechnung der Schätzung mit einer der Trotačka-Schätzungsformeln.

Es dauert länger, funktioniert aber gut, um die Genauigkeit zu verbessern, besonders bei komplexeren Projekten. Zusätzlich zur Verwendung der Trotačka-Schätzung sollten Sie auch darüber nachdenken, ein größeres Pufferbudget für unvorhergesehene Probleme einzuplanen.

Sie finden die Three-point-Schätzungswerkzeuge in unserem vorherigen Artikel, die Ihnen bei Ihren Schätzungen helfen können. Wenn Sie es noch nicht getan haben, empfehle ich Ihnen, den Artikel über Three-point-Schätzung und andere Projekt-Schätzungstechniken zu lesen, der besser zu Ihrer Organisation oder Projektphase passen könnte als die Bottom-Up-Schätzung.

Insights

Case Studies

Playerhunter

Windows of Freedom

AI-Assisted Development