WordPress Backend Design Studie

wpbackendhighvorschau

Zu einer guten Software zählt auch immer ein intuitives und gut bedienbares User Interface (UI) mit einem benutzerfreundlichen Design. Ich habe mir Gedanken zum WordPress Backend UI gemacht und bin zu dem Schluss gekommen: Es geht besser! Deshalb habe ich mich an Photoshop gesetzt und ein neues UI für WordPress entwickelt.

wpbackendhighvorschau

Prolog

WordPress Version 1.0 / 2.0 / 3.2
WordPress Version 1.0 / 2.0 / 3.2

Im WordPress-Backend gab es bereits mehrere, teils gravierende Design-Sprünge. Heutzutage scheinen Redesigns im Backend seltener zu werden. Warum ist das so?

Zum Einen, denke ich, liegt es daran, dass sich das UI eingespielt und bewährt hat, und zum Anderen liegt es an der drastisch gestiegenen Anzahl der Nutzer. Ein neues UI oder Design bedeutet immer auch eine Umgewöhnung für den Nutzer. Der Mensch ist ein Gewohnheitstier, und für die meisten Menschen ist eine Umgewöhnung mühsam.

Wann lohnt sich diese Mühe?

Eine Umgewöhnung kann dann weniger schlimm, sein wenn man den Nutzer an die Hand nimmt und versucht, das Vorhandene besser bedienbarer und intuitiver zu machen. Der Nutzer muss den Vorteil erfahren.

Die neue WordPress Version 3.8 steht im Dezember vor der Tür. In dieser Version soll sich das Design des Backends ändern. Toll! Oder?

Ich höre schon jetzt die meisten Entwickler aufschreien: „Bloß nicht! Arbeitet lieber an der Performance und macht den Core schlanker.“
Auf die eine Art und Weise mögen sie recht haben. Dennoch halte ich es für wichtig, alle 2-3 Jahre das Design aufzufrischen und evtl. auch mal ein paar neue, gewagte und dennoch sinnvolle Neuerungen umzusetzen.

Prominente Beispiele für ein komplett umgekrempeltes UI bieten zum Beispiel Microsoft mit Windows 8 oder Apple mit iOS 7.
Windows und Apple sind natürlich zwei Paradebeispiele. In beiden Fällen waren die Nutzer überrascht, geschockt oder erfreut. In der Vergangenheit gab es keine Produkte aus demselben Segment, die so sehr diskutiert und analysiert wurden.

Es ist spannend, diese Entwicklung zu betrachten. Schauen wir, was die Zukunft noch zu bieten hat.

WordPress 3.8 a.k.a MP6

WordPress selber hat eine Arbeitsgruppe die sich speziell mit dem Backend beschäftigt. Bei den Leuten drüben im Blog kann man das Arbeiten am Backend wunderbar mitverfolgen und diskutieren.

Ich habe den Prototypen des neuen Designs schon seit ein paar Wochen per Plugin auf einem Testsystem laufen. In erster Linie kann man sagen, dass es sich ein wenig angenehmer arbeiten lässt. Aber warum nur ein wenig? Ganz einfach: weil es mehr oder weniger „nur“ einen Feinschliff gab.

Der Kontrast der Sidebar wurde enorm erhöht. Die Sidebar kommt nun in dunklen Grautönen mit grauen Icons und einer dahinter gesetzten weißen Schrift daher. Hier fehlt mir ein wenig die Harmonie. Mir sind die Kontrastunterschiede zwischen dem Sidebar-Hintergrund und der weißen Schrift zu hoch.
Dies hätte ruhig ein wenig weicher und somit angenehmer für das Auge ausfallen können. Im Content-Bereich haben sich ebenfalls die Kontraste der einzelnen Elemente geändert, sowie einige Farben und Schriften.

Alles in Allem fühlt man sich im Backend weiterhin zu Hause. Was mich allerdings persönlich stört ist, dass das Backend immer noch (oder gar mehr) altbacken wirkt.

WP 3.6 / 3.8 / Fallstudie
WP 3.6 / 3.8 / Fallstudie

Warum altbacken? Die Abstände sind für mein Auge viel zu klein geraten. Schriften sind teilweise zu grau, zu dick, zu klein. Der gesamte Schriftschnitt wirkt einfach altmodisch. Die Icons sehen gegenüber der Schrift unproportional groß aus. Alles wirkt einfach in die Jahre gekommen und eingesperrt.

Alternatives WordPress Backend UI

Natürlich ist die Idee eines anderen WordPress UI nicht neu. Viele engagierte Entwickler haben sich schon an neuen Entwürfen versucht und diese sogar per Plugin zugänglich für die Öffentlichkeit gemacht.

Leider ist es nicht einfach ohne weiteres möglich, einen eigenen Backend-Style zu schreiben und diesen dann in WordPress zu integrieren. Dies geht nur über den Umweg als Plugin, und hierbei entstehen oft Konflikte mit WordPress selber oder mit anderen Plugins.

Dennoch will ich euch zwei nette Entwürfe nicht vorenthalten: das schicke Retina Press oder das DP Dashboards Plugin.

Die Umsetzung meines Entwurfs

Da ich selbst gern mit Photoshop arbeite, HTML & CSS schreibe und mich dazu noch recht gut mit der flexiblen Weblayouts und dem Verhalten mobiler User auskenne dachte ich mir: Mensch das geht doch besser!

Also hab ich mich hinter den Rechner geklemmt und Photoshop gerockt. Nach sechs Stunden hatte ich etwas Greifbares, dass viel Potenzial zum Ausarbeiten bietet, wenn man sich die Zeit dafür nimmt. Für einen ersten Prototypen sollte es ausreichen.

Zuerst habe ich mir die Proportionen und die einzelnen Ausrichtungen der Elemente angeschaut, um sie besser auszurichten, ohne dabei das UI maßgeblich zu verändern. Der Nutzer soll seine Elemente ja an gewohnter Stelle wiederfinden.

Nach der Ausrichtung bin ich in die einzelnen Elemente gegangen und hab mich gefragt, wie man das ein wenig „moderner“ und klarer designen kann.
Hier habe ich ein paar Sachen umgesetzt, die ich mir auch von WordPress wünschen würde: Eine breitere Sidebar, mehr Innenabstand der einzelnen Menüelemente, eine klare Schrift und Font-Icons.

Der Inhalt

Das Dashboard wird am wenigsten benutzt und am meisten gebraucht. Warum? Vielleicht weil wir kaum relevante Elemente auf dieser Seite finden?
Ich würde mich zum Beispiel öfter und länger im Dashboard aufhalten, wenn ich gut aufgewertete Statistiken finden würde, die dazu noch schick visualisiert sind. Oder wenn man mit QuickPress auch Pages oder Post Types verfassen könnte.

Generell sollte man versuchen, eine Priorität im Dashboard anzustreben.

  1. Sidebar
  2. Info/Event-Boxen (QuickPress/Stats)
  3. News- oder Warnungsboxen (WP-Blog etc.)
Die von mir entwickelte Fallstudie
Die von mir entwickelte Fallstudie

Es ist nur ein rohes Konzept. Ich hoffe, dass ich euch damit inspirieren kann. Gern könnt Ihr es als Inspirationsquelle für andere spannende Projekte nutzen. Fühlt euch frei! Ich freue mich über eure Meinung!

Die Zukunft des WordPress-Backends

Wenn man die Schritte von den WordPress Entwicklern beobachtet, kann man schon jetzt ein paar Anhaltspunkte dafür finden, dass das Backend immer mehr in den Hintergrund rücken wird und sich die meisten Änderungen im Frontend abspielen werden. Ich freue mich sehr darauf.

Bonus

So könnte es in einer mobilen Version ausschauen

So könnte die Fallstudie im mobilen Einsatzbereich aussehen.
So könnte die Fallstudie im mobilen Einsatzbereich aussehen.

Beitrag teilen

Author Avatar

Nick Jantschke ist Artdirector und Gesellschafter der MarketPress GmbH und der Stil-Etage GmbH. In seiner Freizeit trinkt er gern Kakao, schraubt an Fahrrädern und beschäftigt sich mit allem was mit Musik zu tun hat. Spannend sind für Nick alle Design-relevanten Themen, bei denen er mit Herzblut dabei ist.

Ähnliche Beiträge

plugintest

Plugins angetestet: WooCommerce Dropdown Cart - Warenkorb-Vorschau für deinen Shop

von Nick

Mit einem Warenkorb-Widget können deine Kunden jederzeit sehen, was sie bereits in den virtuellen Einkaufswagen gelegt haben. Das Plugin WooCommerce Dropd ...

Weiterlesen
woocommerce-themes-rabatt

Aktion: 20% Sommer-Rabatt auf unsere WooCommerce-Themes

von Nick

Es wird Sommer, und da solltest du eigentlich nicht vor dem Rechner sitzen. Aber du kannst ab morgen bis Sonntag sparen: Mit 20 Prozent Discount auf unsere ...

Weiterlesen
woonews16

WooCommerce Wochenrückblick #16: Code Snippets, Slider und schicke E-Mails

von Nick

WooCommerce um eigene Funktionen zu erweitern, das muss nicht schwer sein. Produktinformationen lassen sich mit wenig Aufwand deutlich aufwerten, und die E ...

Weiterlesen
email-designer-banner

Neues Plugin: E-Mail Designer für WooCommerce

von Nick

Die E-Mail-Benachrichtungen an deine Kunden, die WooCommerce verschickt, sehen nicht wirklich professionell aus. Das kannst du nun einfach und schnell änd ...

Weiterlesen

Kommentare

12 Kommentare

  1. #1

    Schöne Studie! Wäre sinnvoll, wenn du diese dem MP6 Team zukommen lassen würdest – die entwickeln ziemlich schnell.

  2. #2

    Hallo Nick, toll gemacht. Generell gebe ich Dir Recht, dass endlich was an der “Kosmetik” gemacht werden muss. Du zitiertest ja iOS(7) als Fallbeispiel. Mich hat es da enorm gestört, dass einem ein Design aufdiktiert wird (welches mich gar nicht vom Hocker haut) und ich denke WordPress würde in der Tat gut dran tun eine Art Admin-UI-API einzuführen um ganz einfach Admin-Styles aufzubauen und einzuspielen ohne den laufenden Betrieb zu stören (Inkompatbilität Z.B.). So kann jeder Anwender selber aussuchen mit welchem Design er am besten Arbeiten kann oder ggf. sogar für Kunden eigene Admin-Styles entwerfen und implementieren. Aber auf jeden Fall gute Arbeit 🙂 Macht Lust auf mehr

  3. #3

    Definitiv besser als MP6, kann mich diesem Kontrastwahn auch nur entziehen. Als Plugin ganz nett, aber immer damit zu arbeiten, no way. Ich schließe mich hier dem Gino an, es sollte die neue Admin-UI als seperates Theme oder auch Plugin geben.

    Deine Designstudie gefällt mir da um Weiten besser, weniger Kontraste aber sehr gut gestaltetes Design. Kann man definitiv besser mit arbeiten. Sollte dieses Design in einer Form auf den Markt kommen, ich bin einer der Ersten, die das installiert 🙂

  4. #4

    Deine Designstudie gefällt mir. Schlicht, funktionell und übersichtlich. Auch ich würde es sofort installieren.

    In den letzten Jahren hat dieser Home-Sweet-Home-Stil überhand genommen. Nicht unbedingt bei WP.

    Aber warum überlässt man es dem User nicht sein eigenes Interface zu gestalten ? Ich stimme da Gino absolut zu. Ein Admin-Thema, das mir das Design überlässt in Verbindung mit einer UI-API würde ich mir wünschen.

    Vielleicht wäre es sinnvoll einen Wettbewerb auszuschreiben, in dem die Anwender die einzelnen Designs bewerten.

  5. #5

    Wie sagt man es höflich?
    Die Designstudie spricht für sich selbst: Der angemeldete User – mit Bild – ganz groß, viel Platz für den gleichen Inhalt, und selbst wenn sich die Breitformat-Bildschirme immer mehr durchsetzen, wo liegt der Mehrwert, um den Konservatismus bei UI-Konzepten zu überwinden?
    Ich sehe keinen Ansatz dafür in diesem Konzept.

  6. #6

    Gefällt mir vom Design her richtig gut.

  7. #7

    Hey,
    @Chris wir werden mal schauen in wie fern das bei den Jungs ankommt.

    @Gino ja da hast du recht. Es ist natürlich immer grenzwertig wenn man ein Design aufdiktiert wird. Es gib Leute den gefällt eben das neue iOS super und es gibt welche die es absolut schrecklich finden. Ich finde es aber gut den Schritt zu wagen, den besser geht immer und iOS hat in Sachen Design noch sehr sehr viel Potenzial 😉

    @julian Danke! Ja ich denke das mit dem Plugin wäre eine super Idee, hier müsste man das Backend aber an vielen vielen Stellen aufbiegen und eine API hinterlegen um es den Entwicklern relativ angenehm zu machen bei der Geschichte Sachen anzupassen. Das werden die Jungs mit Sicherheit nicht machen.

    @Reinhard Danke! Die Idee mit dem Designwettbewerb finde ich nicht mal schlecht. Zumindest soweit bis die User abgestimmt haben, dann kann man immer noch optimieren und Userstimmen einholen auch Design kann Open Source sein 🙂

    @Karl Es ist mit Sicherheit kein Mehrwert für den Entwickler. Es ist ehr ein Mehrwert für den Täglichen Nutzer, dem der Redaktionelle Texte pflegt und täglich blogt. Meiner Meinung nach sollte man sich Wohlfühlen, egal ob das in seiner Küche ist, im Wohnzimmer oder im Backend von WordPress. Ich denke durch ein größeres Bild (was du oben ansprichst) gibt es einen gewissen Sozialen Aspekt wieder. Mensch und Maschine wird auf einer Harmonischen Art mehr zusammen geführt und das ist ja auch der Sinn eines User Interfaces. Auch habe ich viel mehr Platz in der Breite der Sidebar und der einzelnen Menü Elementen gewählt weil man sich dadurch nicht mehr ganz so eingeengt fühlt. Wir haben doch heutzutage viel Platz bzw. können wir uns den Adaptiv schaffen, warum also nicht nutzen wenn das Auge sich darüber freut? Meine Meinung.

    Danke nochmals an alles Leser und Kommentatoren!

  8. #9

    Ich finde das Design sehr schön, aber als Designstudie ist sie doch nur dann sinnvoll, wenn sie auch eingebracht wird. Das Dashboard wird gerade überarbeitet, die Theme-Auswahl (THX38) auch, und mit MP6 das Backend komplett. Auch die Widget-Sektion wird gerade überdacht. Wenn, dann jetzt einbringen, wo noch Entwürfe gesucht werden. Ist dieser Prozess abgeschlossen, wird es deutlich schwerer werden …

  9. #12

    Hej!

    Wem die Designstudie gefällt, der kann sich gern mal das Theme Düsseldorf anschauen.
    Das Theme basiert auf diese Studie und wurde speziel für den Blog und Shop (WooCommerce) gebrauch Entwickelt.

    Schaut es euch einfach mal an 😉

    https://marketpress.de/shop/themes/wordpress-theme-duesseldorf/

    Beste Grüße
    Nick

3 Pingbacks

  1. Design-Studie: So schön könnte das WordPress-Backend aussehen » t3n
  2. MP6 – der aktuelle Plan für WordPress 3.8 » WordPress Deutschland News
  3. Blogprojekt-Podcast #40 - Blog-Relaunch Rückblick > Blog-Design, Podcast > Blogprojekt

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML Tags verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">