Interface Design


Übersicht Scribble Tools

Es ist eine Weile her, dass ich was über Scribble Tools geschrieben habe. In der Zwischenzeit hat sich vor allem in Sachen Mobile und Responsive Design Konzeption einiges getan, deswegen möchte ich euch eine Übersicht aller Scribble Tools vorstellen, die ich aktuell einsetze. Eine Anmerkung noch vorab: Bis auf Papier und eine iPad App arbeite ich zum Scribbeln komplett unter Windows:

Scribbles mit Stift und Papier oder am Whiteboard

Die ersten groben Ideen zu einem Produkt sammle ich fast immer „offline“ mit Stift und Papier. Nachdem ich die ersten 2-3 Hauptansichten des Produkts grob skizziert habe, steige ich auf „Online“ Tools um.

  • Ideen sammeln: Mit Stift und Papier kann ich mich auf die Produktidee konzentrieren, ohne von irgendwelchen technischen Problemen abgelenkt zu werden (die ja immer auftreten, wenn man am PC arbeitet… ;-). Zu Stift und Papier greife ich auch, wenn ich mich während der Feinkonzeption an einem komplexen konzeptionellen Problem festgebissen habe. Dann wirkt eine „Bildschirmpause“ oft Wunder.
  • Arbeiten in der Gruppe: Gestaltet man einen Entwurf in einer Gruppe, bieten sich Flipchart oder Whiteboard an, damit alle gut sehen können.
  • Ideenfindung mit dem Kunden: In der direkten Zusammenarbeit mit dem Kunden haben einfache, handgezeichnete Scribbles den Vorteil, dass sie mehr Raum für Diskussionen lassen. Sieht ein Entwurf zu aufwändig und perfekt aus, trauen sich Kunden häufig nicht, Änderungswünsche zu äußern.
Scribble mit Papier und Stift

Scribble mit Papier und Stift

Schnellcheck Papier Scribbles

  • Für erste Ideen, schnelle Grobentwürfe und Gruppenarbeit
  • Sehr günstig!
  • Positiv: Ablenkungsfrei, schnell und günstig
  • Negativ: Änderungen sind aufwändig, Elemente können nicht mehrfach benutzt werden

 

Powerpoint Scribbles

Powerpoint setze ich ein, wenn ich Grobentwürfe im Rahmen einer Präsentation vorstelle. Auch wenn es absehbar ist, dass es mehrere Abstimmungsrunden zu einem Grobentwurf gibt, nutze ich Powerpoint, um die Änderungen leichter einpflegen zu können.

  • Grobentwürfe in Präsentationen: Soweit es möglich ist, bereite ich für die erste Abstimmung mit dem Kunden bereits grobe Entwürfe vor. Vor allem für Kunden, die nicht täglich mit IT-Themen zu tun haben, ist es damit leichter, die Anforderungen an das Produkt zu formulieren. Auch die weiteren konzeptionellen Schritte lassen sich leichter ableiten. Da ich für Abstimmungstermine ohnehin immer eine Powerpoint Präsentation vorbereite, kann ich mich innerhalb einer Anwendung bewegen, wenn ich hier auch die Scribbles erstelle.
    Scribble Powerpoint

    Scribble Powerpoint

  • Grobe Prozess- oder Strukturentwürfe: Auch erste Skizzen für Prozesse und Strukturen, wie z.B. Bestellabläufe oder Seitengerüste lassen sich schnell und einfach in Powerpoint darstellen.

Schnellcheck Powerpoint Scribbles

  • https://products.office.com/de- de/professional
  • Für Grobe Scribbles im Rahmen von Präsentationen, Grobentwürfe für Abläufe und Strukturen
  • ab ca. 500,- EUR aktuelle Version Microsoft Office Paket, Office 2010 reicht aber auch (100,- EUR).
  • Positiv: Schnell und übersichtlich, kann direkt in Präsentationen verwendet und bearbeitet werden, Vielzahl anderer Verwendungsmöglichkeiten.
  • Negativ: Keine vordefinierten Scribble-Elemente, geringe Wiederverwertbarkeit von Elementen

 

Axure

Axure ist für große Projekte mittlerweile meine erste Wahl. Das Programm ist komplett darauf ausgelegt, umfangreiche Webprodukte und Apps zu scribbeln. Die Einarbeitung fällt relativ leicht. Auch dynamische Elemente lassen sich leicht erzeugen.

  • Für Oberflächen-Feinkonzept in umfangreichen Projekten, da es eine Menge Zeit spart:
    • Für Standard Interface-Elemente gibt es Vorlagen
    • Elemente, die man häufiger verwendet, kann man einmal zentral anlegen und danach wiederverwenden
    • Für dynamische Elemente, wie die Navigation, gibt es fertige Elemente. Damit fällt viel manueller Pflegeaufwand weg.
    • Es gibt Mechanismen, um das Verhalten von responsive Designs einfach im Prototyp zu zeigen.
  • Interaktive Prototypen: Mit wenig Aufwand kann man aus seinen Scribbles einen interaktiven Prototypen erstellen, den man für die Abstimmung mit dem Kunden nutzen kann oder für Usability-Tests.
  • Einfaches Teilen von Prototypen: Prototypen können direkt auf einen Server von Axure hochgeladen werden. So haben auch Kunden schnellen und einfachen Zugriff auf die Prototypen.
Scribble Axure

Scribble mit Axure

Schnellcheck Axure Scribbles

  • http://www.axure.com/buy
  • Feinkonzeption auch umfangreicher Projekte, interaktive Prototypen
  • 289,- US$ Standard Version, Pro Version 589,- US$. In der Pro Version könnt ihr Anmerkungen in die Scribbles eintragen und im Team an Projekten arbeiten.
  • Positiv: Einfache Bedienbarkeit, viele Konzeptionsvorlagen, Elemente wiederverwendbar, automatische Navigation, Prototypen einfach erstellen.
  • Negativ: Bei Kunden noch nicht sehr verbreitet. Falls die Anforderung besteht, Quelldateien weiternutzen zu können, ggf. Kompatibilitätsproblem.

 

Visio

Visio hat mir jahrelang treue Dienste für Scribbles geleistet. Der Vorteil ist, dass man das Programm für weit mehr als Scribbles einsetzen kann. Viele Kunden arbeiten zudem schon mit diesem Programm, so dass sie eure Scribbles bei Bedarf weiter bearbeiten können. Der Nachteil ist der Preis. Die Shapes für Benutzeroberflächen sind leider nur in der Professional Variante enthalten, die in der aktuellen Version 740,- EUR kostet. Ich selbst arbeite noch mit der 2010 Version, die völlig ausreicht und um einiges günstiger ist. Zum Kauf dieses Programms würde ich euch nur raten, wenn ihr noch andere Funktionen in Visio nutzt oder eure Kunden mit diesem Programm die Scribbles weiter bearbeiten wollen.

  • Scribbles für Benutzeroberflächen: Wie ihr in den Screenshots unten sehen könnt, hat Visio Professional etliche Shapes für grundlegende Elemente von Benutzeroberflächen. Standardoberflächen könnt ihr damit problemlos gestalten. Es gibt allerdings keine Hilfsmittel, um dynamische oder web-spezifische Elemente zu erstellen. Die Bedienung ist nicht annähernd so komfortabel, wie in Axure.
    Scribble Visio

    Scribble Visio

  • Use Case Diagramme, Workflows und Sitemaps: Neben Scribbles setze ich Visio für folgende weitere Konzeptionsaufgaben ein: Use Case Diagramme, Workflows und Sitemaps.
    Visio Workflow

    Visio Workflow

    Visio Use Case Diagramm

    Visio Use Case Diagramm

Schnellcheck Visio Scribbles

 

OmniGraffle für iPad

Die OmniGraffle App fürs iPad nutze ich, um Scribbles für Apps und mobile Webseiten zu erstellen. Man hat ein besseres Gefühl für das Format und die Dimensionen, wenn man direkt auf dem späteren Ausgabegerät entwirft. Mit einem Preis von 50,- € ist das die teuerste App, die ich jemals gekauft habe. Der Preis ist aber vertretbar, da die Bedienung der App komfortabel ist und man auch noch viele andere Diagrammarten gestalten kann (z.B. als Ersatz für Worksflows und Sitemaps in Visio).

Scribble Omnigraffle für iPad

Scribble Omnigraffle für iPad

Schnellcheck OmniGraffle Scribbles

  • https://www.omnigroup.com/omnigraffle
  • Scribbles für mobile Apps und Webseiten
  • 49,- EUR
  • Positiv: Einfache Bedienbarkeit, universelles Tool für vielfältige Aufgaben. Direkter Bezug zum Ausgabegerät.
  • Negativ: Medienbruch, falls Entwürfe am PC weiter verwendet werden.

 

Photoshop

Photoshop war zwar das erste Programm, das ich für Scribbles verwendet habe, heute benutze ich es dafür fast nicht mehr. Warum? Die Bearbeitung von Scribbles in Photoshop ist wesentlich aufwändiger, als z.B. in Axure. Photoshop bietet auch nur wenig spezifische Unterstützung für die Erstellung von Scribbles. Heute nutze ich es nur noch dann, wenn das Screendesign die konzeptionellen Überlegungen beeinflusst, z.B. wenn nur ein einzelnes Seitenelement neu gestaltet wird oder das Screendesign (aus welchen Gründen auch immer) vor der Konzeption steht.

Scribble Photoshop

Scribble Photoshop

Schnellcheck Photoshop Scribbles

  • http://www.adobe.com/de/products/photoshop.html
  • Scribbles, wenn das Screendesign schon feststeht
  • 23,79 pro Monat im Abo für die Vollversion. Zum reinen Scribbeln reicht aber auch Adobe Photoshop Elements für einmalig rund 80,- €
  • Positiv: Pixelgenaue Entwürfe, viele Grafikfunktionen
  • Negativ: Höherer Zeitaufwand für Erstellung, da keine Scribble-Optimierung

 

Fazit: Welches Scribble Tool empfehle ich?

Wenn ihr viele Scribbles erstellt…

legt euch Axure zu. Das Preis-Leistungsverhältnis ist klasse und es beschleunigt eure Arbeit ungemein.

Wenn ihr nur gelegentlich Scribbles erstellt…

nutzt das, was ihr schon habt: Powerpoint, Photoshop, Visio, Gimp, was auch immer. Denn dann lohnt sich die Anschaffung eines zusätzlichen Tools meistens nicht. Vor etlicher Zeit hatte ich auch mal das völlig kostenlose Scribble Plugin Pencil für Firefox vorgestellt. Damit kommt man auch sehr weit.



Neue Kundenwebseite online: www.form-nails.de

Unter www.form-nails.de und www.trinitybeauty.de ist heute die neue Webseite des Nagelstudios FormNails in Ettlingen online gegangen. Die Seite stellt das Nagelstudio vor und enthält einen Online-Shop für den Vertrieb von Trinity Beauty Produkten. Alle Inhalte der Website und des Online-Shops sind auch als optimierte Version für Smartphones verfügbar.

Webseite FormNails Ettlingen

Inhalte und Eckdaten des Projekts:

  • Beratung bei der Auswahl des Webdesigns
  • Entwurf der Seiten- und Inhaltsstruktur
  • Auswahl von vorhandenen Fotos, Fotografieren fehlender Motive
  • Anpassung der Website für die Anzeige auf mobilen Geräten
  • Einrichten des Online-Shops
  • Training der Kundin, so dass sie die Website zukünftig selber pflegen kann
  • Domain- und E-Mail-Einrichtung
  • Social Media Beratung
  • Erstellt mit dem Jimdo Homepage-Baukasten
  • Projektstart: 17.03.2014, Abnahme: 28.03.2014

Gut sichtbare AGB Checkbox

Hey, mal wieder ein Blogpost. Hatte die letzte Zeit nur auf meiner Facebookseite gepostet, weil es so bequem ist. Nachdem die Pagefeeds aber zunehmend untergehen, werde ich mich wieder häufiger im Blog äußern (hier ist ein Artikel zum Thema Facebook Page Algorithmen).

Bin heute auf ein nettes Detail gestoßen: am Ende des Bestellprozesses von buttinette.de bekommt man einen Tipp eingeblendet, wenn man mit der Maus über den „Kaufen“ Button fährt und die AGB noch nicht angeklickt hat. Prima Methode zur Fehlervermeidung beim Abschicken des Formulars:

AGB nicht angeklickt Tipp

Krasses Gegenteil hierzu: die Bahn Ticketbestellung. Hier muss man zunächst die Nutzungshinweise zum Kauf eines Onlinetickets bestätigen und auf einer späteren Seite die AGB. Beide Checkboxen gehen aber derart auf der Seite unter, dass ich, obwohl ich die Seiten regelmäßig nutze, oft vergesse einen der Haken zu setzen:

Bahn Buchung AGB 1

Bahn Buchung AGB 2

Woran liegt es? Die Elemente mit den verpflichtenden Angaben sind genauso gestaltet, wie der Rest des Inhalts. Es gibt keine optische Hervorhebung, anhand der Benutzer erkennen kann, dass für diese Elemente eine Eingabe erforderlich ist. Im ersten Beispiel kommt hinzu, dass die Checkbox mitten in der Seite platziert ist, und nicht am Ende. Die meisten Benutzer schauen sich in der Regel aber nur den Anfang und das Ende einer Seite genauer an, der Rest wird überflogen. Dazu ist es eher ungewöhnlich, dass man in der Mitte eines Bestellprozesses überhaupt eine verpflichtende Angabe machen muss.

Besser würde es durch:

  • Hintergrundfärbung der Elemente entfernen, die nur Daten anzeigen (Adressdaten, Reisedaten,…)
  • Verpflichtende Elemente am Ende der Seite platzieren, bevorzugt in der Nähe des „Abschicken“ Buttons wie im Buttinette Beispiel
  • Angaben, die der Kunde aktiv bestätigen muss, am Ende des Bestellprozesses bündeln.

Speed4Projects Website Redesign – Teil6: Konzept, Abstimmung und … Online!!! 1

Erst mal vorweg: die Seite ist online: http://speed4projects.de! :-) Klar, der letzte Feinschliff fehlt noch, aber das Hauptziel haben wir erreicht: seit heute hat Wolfram Werbung für die Seite geschalten und die Hauptseiten sind online.

Was ist seit dem letzten Schritt passiert? Nachdem das Basisdesign feststand, habe ich mich an das Website-Konzept (Pflichtenheft, Feinkonzept, wie auch immer ihr es nennen wollt) gemacht, die Entwürfe mit den Entwicklern abgestimmt und dann, ja dann wurde die Seite eben umgesetzt. Hier die Details zu den einzelnen Schritten:

Konzept

Der eine oder andere mag sich wundern, wozu man ein Konzept braucht, wenn man eine fertige Photoshop-Datei hat. Ich bin ein großer Anhänger dieser Form von Dokumentation, weil sie den Designer dazu bringt, sich im Detail Gedanken über sein Design und die Funktionalität zu machen. Zusätzlich reduziert es den Kommunikationsaufwand und die Anzahl von Korrekturen während der Umsetzung.

Folgende Inhalte sind im Konzept enthalten:

  • Strukturen (Sitemap, Seitenstruktur, Navigationskonzept,…)
  • Funktionsbeschreibungen (Suche, Registrierung, Login,…)
  • Design (Farben, Schriften, Bemaßungen, Beschreibung von Detailelementen, Grafiken,…)

Strukturen
Dieses Kapitel beschreibt den Grundaufbau der Seite. An dieser Stelle sollte man klare Bezeichnungen für alle Elemente einführen und diese durchgängig verwenden, z.B. auch in Dateinamen und in den Photoshop-Dateien.

Übersicht Seitenelemente Startseite

Funktionsbeschreibungen
Hier werden alle Funktionalitäten der Website beschrieben. Auch wenn es der 10. Registrierungsprozess ist, den ihr entwerft, es wird aufgrund der technischen Gegebenheiten immer wieder Abweichungen in den Lösungen geben, so dass es sich auf jeden Fall lohnt, auch die Funktionen zu beschreiben, deren Gestaltung scheinbar selbstverständlich ist. An dieser Stelle ist eine enge Abstimmung mit den Entwicklern erforderlich, um möglichst früh zu klären, welche Funktionalitäten umsetzbar oder welche Lösungen eventuell schon implementiert sind.

In diesem Kapitel arbeite ich bewusst mit Scribbles statt mit Reinzeichnungen. Das spart Zeit und ist bei Nachbesserungen schneller zu ändern. Zusätzlich zu den Scribbles gibt es eine kurze Beschreibung des Standardablaufs (eine Art reduzierte Use-Case-Beschreibung), sowie Anmerkungen zu Besonderheiten. Hier zum Beispiel die Beschreibung des Logins:

Interface Konzept Login

Design
Das dritte Kapitel enthält alle Informationen rund um das Thema Design. Da ich zur Optimierung der Schrift mit HTML-Dummys gearbeitet habe, habe ich die entsprechenden CSS-Formatierungen gleich mit ins Konzept gepackt:

Beispiel Schriftartentest

Auch bei den Beschreibungen der Einzelelemente habe ich zu den Bemaßungen möglichst viele Detailinfos mitgegeben – was zu leuchtenden Entwickleraugen geführt hat. ;-)

Beispiel Bemaßungen von Einzelelementen

Abstimmung

Die Programmierung der Website wurde von der werkraum GmbH in Karlsruhe übernommen. Beim ersten Treffen haben mir die Entwickler die Rahmenbedingungen des technischen Systems erläutert und ich ihnen den Design-Ansatz. Das zweite Treffen fand unmittelbar vor Beginn der Programmierung statt. Hier sind wir das Konzept noch mal im Detail durchgegangen und haben letzte Fragen geklärt. Dann ging es los…

Qualitätssicherung, Nachbesserungen und Online-Gang

Konzept übergeben und das war’s? Nö, auch während der Umsetzung ist unsereins keineswegs arbeitslos:

  1. Rückfragen der Entwickler: Ein Konzept ist nie so eindeutig und fehlerfrei, dass es ohne Rückfragen umgesetzt werden kann (außer man steckt Unmengen an Aufwand in die Überprüfung, aber wer will das schon bezahlen…). D.h. während der Umsetzung ist ein direkter Draht von den Entwicklern zum Designer notwendig, um missverständliche Passagen oder Fehler zu klären.
  2. Qualitätssicherung: Als UX-Designer sollte man während der Umsetzung nicht nur mit dem Pixellineal unterwegs sein, sondern die Website als Ganzes aus Sicht des Besuchers überprüfen: Passen alle Abläufe zusammen, stimmt die Performance, usw. Hier bitte vorher mit der Entwicklung klären, welche Seiten tatsächlich schon für eine Überprüfung bereit sind. Nichts ist schlimmer als ein Kommentar zu einer halbfertigen Seite „da fehlt aber noch was“. ;-)
  3. Inhalte: Dieser Punkt gehört sicher nicht zu den Kernaufgaben eines UX-Designers, in diesem Fall habe ich Wolfram allerdings dabei unterstützt, die bisherigen Inhalte seiner Website in das neue System umzuziehen. Bei dieser Gelegenheit konnten wir etliche Standards für Formatierungen und Strukturen der Texte festlegen und auch inhaltlich noch etwas nacharbeiten.

Wie eingangs bereits erwähnt, sind wir mit den Überarbeitungen noch nicht zu 100% fertig. Ich möchte trotzdem schon mal jetzt allen Beteiligten für die tolle Zusammenarbeit danken und wünsche Wolfram mit seiner neuen Seite viel Erfolg! :-)

Verwandte Artikel Speed4Projects Website Redesign


Speed4Projects Website Redesign – Teil3: Seitenstruktur

Jetzt muss ich doch mal wieder einen kurzen Zwischenstand durchgeben, sonst ist das Redesign fertig, bevor ich auch nur einen Blogpost geschrieben habe. ;-) Momentan arbeite ich an 3 Strängen parallel: Logo Redesign, Design der Website und Aufbau der Inhalte. Um letzteres wird es heute gehen, weil es auch als Vorarbeit für das Website Design notwendig ist.

Ich hab mir also zunächst angeschaut, welche Inhalte sich auf der aktuellen Website befinden. So sieht der aktuelle Sitetree aus:

Folgende Änderungen werde ich daran vornehmen:

  • Critical Chain Projektmanagement stärker in den Vordergrund rücken
  • Einen eigenen Punkt „Unternehmen“ einführen
  • Begriffe der Hauptnavigation intuitiver gestalten (aktuelle Begriffe wie „µProject“ und „MPM Simulator“ erfordern zu viele Vorkenntnisse, um als Einstiegspunkte in der Seitenstruktur geeignet zu sein)

Die Hauptseiten werden sich stärker am klassischen Aufbau einer Unternehmenswebsite orientieren und ohne Vorkenntnisse verständlich sein. „Critical Chain“ bildet hier eine Ausnahme, allerdings wird der Begriff auf der Startseite deutlich als Hauptthema eingeführt und auch als Produktname verwendet. So sehen also die Hauptseiten aus, die gleichzeitig die erste Ebene der Navigation bilden werden:

Die drei bisherigen Hauptseiten „Mikroprojektmanagement“, „High-Speed-Pyramide“ und „MPM-Simulator“ werden in den Bereich Know-How verschoben. Gleichzeitig bekommen die neuen Bereiche „Critical Chain“ und „Unternehmen“ eine detailliertere Unterstruktur:

Komplette neue Seitenstruktur

Auf dieser Grundlage kann ich jetzt das Navigationsdesign, also Aussehen und Funktionalität, definieren, sowie die Inhaltsstruktur der Seiten angehen.

Verwandte Artikel

Speed4Projects Website Redesign – Teil2: Klärung der Anforderungen

Nachdem ich die Bestandsaufnahme erledigt habe, mache ich mich gemeinsam mit dem Kunden daran, die genauen Anforderungen an das Redesign festzulegen.

Wolfram erläutert mir dazu zunächst aus seiner Sicht, welche Ziele er mit der Webseite verfolgt, welche Zielgruppen er sieht und wo er sich Veränderung für die Seite wünscht. Zur Verfeinerung einzelner Punkte, wie Logogestaltung, Navigationsdesign, Typographie, schauen wir uns gemeinsam etliche Webseiten an, die wir im Vorfeld als Beispiele zusammengetragen haben. Um die Verkaufsargumente auf der Webseite optimal aufbereiten zu können, erläutert mir Wolfram zusätzlich die Methode und deren Einsatz beim Kunden.

Betrachten wir zunächst die beiden Hauptzielgruppen:

Zielgruppen

1. Geschäftsführer mittelständischer Unternehmen

Persona: Chef Mittelstand

Ziel des Kunden

Lösung akuter Probleme und Optimierung seines IT-Projektmanagements

Anlass für Besuch der Website
Mehr über die Seriosität von Speed4Projects erfahren nach Empfehlung oder Erstkontakt. Sicherheit gewinnen, dass es sich lohnt, Zeit und Geld zu investieren.

Ziel Speed4Projects
Geschäftsführer nimmt Kontakt auf oder vertieft den Kontakt

Einfluss auf das Redesign
In der Regel hat die Zielgruppe wenig Zeit, keine vertieften Kenntnisse im Bereich Projektmanagement, emotionaler Ersteindruck hat großen Einfluss auf die Bewertung des Services, d.h. die Website muss schnell und einfach überzeugen:

  • Startseite muss die wichtigsten Kaufargumente überzeugend präsentieren und weiterführende Links zur Vertiefung des Themas anbieten
  • Kaufargumente und Methode müssen kurz, übersichtlich und leicht verständlich dargestellt werden und relevante Fragen klären: Löst die Methode die Probleme meines Unternehmens? Wie ist die Vorgehensweise? Wie lange dauert es, bis ich erste Erfolge sehe?
  • Vertrauen in die Methode und das Unternehmen muss geschaffen werden: Referenzen, Erfolgszahlen, seriöser Auftritt


2. Leiter von Project Offices, Programmmanager, Seniorprojektleiter

Persona: Projektleiter


Ziel des Kunden
Wege finden, um seine IT-Projekte sicherer und besser abliefern zu können, um erfolgreicher zu sein

Anlass für Besuch der Website
Fachliche Weiterbildung; Herausfinden, ob Critical Chain Project Management eine Lösung für aktuelle Probleme bietet und damit zum persönlichen Erfolg beitragen kann.

Ziel Speed4Projects: Kontaktaufnahme, Vermittlung eines Akquisegesprächs mit einer höhergestellten Führungskraft oder Geschäftsführung. Verwendung der bereitgestellten Materialien und Informationen. Weiterempfehlung des Unternehmens und der Methode.

Einfluss auf das Redesign
Verkaufsargumente überzeugend und zur Weiterverwendung in Entscheidungsvorlagen aufbereiten, komplexe Inhalte (Methoden, Werkzeuge, Videos, Wiki-Einträge, Einführungen, Vorträge, Veröffentlichungen) übersichtlich und anschaulich verfügbar machen.

Allgemeine Anforderungen

Zusätzlich zu den zielgruppen-spezifischen Anforderungen haben sich folgende allgemeine Anforderungen für das Website Redesign ergeben:

Inhaltliche Überarbeitung
  • Critical Chain Project Management stärker ins Zentrum der Website rücken, Methode und Komponenten der Beratung verdeutlichen, Rahmenbedingungen für die Einführung deutlich machen
  • Ein Teil der Materialien und Informationen sind öffentlich als Teaser zugänglich. Weiterführenden Inhalte werden in einen geschlossenen Mitgliederbereich verlagert, der für Besucher nach einer kurzen Registrierung zugänglich ist. Im Idealfall sollen Besucher bei der Registrierung Gründe für den Besuch angeben und sich im Idealfall für den Newsletter registrieren.
  • Fachliche Inhalte neu strukturieren: weniger breiter Themenzugang, detailreiche Inhalte auf unterste Ebene der Informationsarchitektur
Gestalterische Überarbeitung
  • Logo: Wunsch: Visualisierung eines Projektdiagramms
  • Farben: rot als Farbe soll bleiben, sonst schwarz, grau, weiß
  • Design: leicht, schlicht, seriös
  • Usability: einfache und schnelle Bedienung, klassische Bedienung ohne Experimente, kein Flash
  • Schriftart: bisher Avantgarde, muss nicht beibehalten werden, auf jeden Fall aber serifenlose Schrift
  • Bildsprache: Verzicht auf übermäßigen Einsatz von Agenturfotos (siehe Nielsen-Studie zur Verwendung von Agenturfotos), einheitlicher Stil für Illustrationen
  • Technologie: Typo3
Nächste Schritte
  • Webstatistik-Analyse der bisherigen Seite
  • Analyse der bisherigen Informationsarchitektur, Neugestaltung der Infoarchitektur
  • Logo-Studien erstellen
Verwandte Artikel

Speed4Projects Website Redesign – Teil1: Bestandsaufnahme 5

Wolfram Müller hat sich dankenswerter Weise bereit erklärt, dass ich das Redesign seiner Website hier im Blog dokumentieren darf. Ihr könnt also an allen Phasen teilhaben und gerne auch eure Kommentare dazu abgeben.

Es geht im Folgenden um die Seite http://speed4projects.net. Speed4Projects bietet Beratung rund um das Thema Management und Beschleunigung von IT-Projekten an. Das ist die aktuelle Startseite der Website:



Als ersten Schritt des Redesigns führe ich eine Bestandsaufnahme der vorhandenen Website durch. Diesen Punkt erledige ich vor dem ersten ausführlichen Kundengespräch, um den Ist-Zustand möglichst unvoreingenommen bewerten zu können.

Logo

Bisheriges Logo Speed4projects

Der Firmenname und das Logo sind das Erste, was ich mir an einer Website anschaue. An diesen beiden Komponenten kann man recht deutlich ablesen, in welchem Stadium der Corporate Identity Findung sich eine Firma befindet. Hat eine Firma ihre Corporate Identity noch nicht gefunden, steht dieser Punkt noch vor dem eigentlichen Redesign der Website, denn nur daraus lässt sich ein Webdesign ableiten, dass das Unternehmen angemessen repräsentiert.

Das aktuelle Logo von Speed4Projects veranschaulicht grundsätzlich schon jetzt den Kerngedanken des Unternehmens: Der Pfeil nach rechts steht für Bewegung nach vorn, rot symbolisiert Dynamik und Schnelligkeit. Was verändert werden sollte, ist die Gestaltung des Logos: das Highlight über dem Pfeil ist wenig professionell gestaltet, Formgebung und Typografie lassen sich interessanter einsetzen.

Design



Headergrafik Speed4Projects

Auf den ersten Blick wird deutlich, dass die Website in die Jahre gekommen ist und eine gestalterische Auffrischung vertragen kann. Beibehalten werden kann die grundlegende Farbgebung in weiß/grau/schwarz mit roten Akzenten. Ausgetauscht werden sollte dagegen auf jeden Fall die Headergrafik. Die Gestaltung der Inhaltsboxen sollte ebenfalls überarbeitet werden.

Navigation



Schauen wir uns zunächst die Bedienung und die Gestaltung an. Mit einer horizontalen Navigation, platziert unterhalb des Keyvisuals ist man auf jeden Fall auf der sicheren Seite, da Besucher sie dort leicht finden. Die Bedienung der Hauptnavigation ist ebenfalls recht einfach: Anklicken des Hauptpunkts öffnet die Navigation der 2. Ebene. Die aktuell geöffnete Seite wird in der Navigation deutlich hervorgehoben. Der graue Verlauf im Hintergrund findet sich auch in aktuellen Designs.

Angepasst werden sollte auf jeden Fall die Gestaltung der 2. Navigationsebene, da sie momentan schwer wahrzunehmen ist: Die Schrift ist zu klein und es besteht kein grafischer Bezug zum Hauptnavigationspunkt. Optional kann ein Indikator ergänzt werden, der den Benutzer darauf hinweist, welcher Hauptnavigationspunkt über eine Unternavigation verfügt.

Aus inhaltlicher Sicht, sollte die Navigation komplett überarbeitet werden. Die aktuellen Hauptnavigationspunkte ergeben momentan nur ein unscharfes Gesamtbild über das Angebot der Firma. Die meisten Begriffe lassen nur wenige Rückschlüsse darauf zu, was auf den entsprechenden Seiten zu finden ist.

Startseite

Die Kernkompetenz der Firma wird in der Überschrift und im ersten Absatz der Startseite deutlich kommuniziert. Positiv ist ebenfalls, dass ein realer Ansprechpartner mit Bild und Kontaktdaten dargestellt wird. Dass die Website bearbeitet und das Unternehmen damit aktiv ist, erkennt der Besucher an den Verweisen auf aktuelle Veranstaltungen.

Verbessert werden kann die inhaltliche Hinführung auf das Thema „Chritical Chain Project Management“. Da der Begriff vielen Besuchern nicht bekannt sein dürfte, sollte er besser in Erläuterungen eingebettet werden. Um die Verkaufskraft der Website zu erhöhen sollte die Methode und die Verkaufsargumente im Einleitungsabsatz deutlicher und wenn möglich kürzer herausgestellt werden. Weiterführenden Links sollten insgesamt besser strukturiert werden.

Inhalte

Ein großer Vorteil der Website ist, dass sie bereits jetzt über viele und vor allem qualitativ hochwertige Inhalte verfügt. Was sich noch verbessern lässt, ist die Struktur der Inhalte. Hier sollten Hierarchie und Gesamtzusammenhang der einzelnen Themen deutlicher werden.

Typografie und Schreibstil

Beispiel Typografie Speed4Projects

Die Texte sind in übersichtliche Absätze gegliedert und durch die Textgröße gut lesbar. Die gewählte Schriftart gibt der Seite einen sehr nüchternen Charakter.

Die Texte sind in wissenschaftlichem Stil geschrieben. Hier gilt es eine Differenzierung im Sprachstil herauszuarbeiten, so dass auf den Einstiegsseiten dem Erstbesucher ein schneller und einfacher Einstieg in das Thema ermöglicht wird, Profis dagegen auf den Unterseiten Detailinformationen im jetzigen Stil präsentiert bekommen.

Fazit

Die Grundsubstanz der Website ist durchaus solide. Aus rein funktionaler Sicht gibt es nur wenige Punkte zu bemängeln. Aus gestalterischer Sicht ist die Website nicht mehr zeitgemäß und sollte aufgrund des Einsatzes im professionellen Umfeld überarbeitet werden.

Ich bringe an dieser Stelle gerne folgenden Vergleich: ein Trainingsanzug erfüllt auch grundlegende Bekleidungsanforderungen aber man würde ihn trotzdem nicht zu einem Geschäftstermin anziehen. Auch eine Website sollte in diesem Sinn Anspruch und Stil eines Unternehmens widerspiegeln.

Im nächsten Artikel erfahrt ihr mehr über das erste Gespräch mit dem Auftraggeber und die Klärung des Redesign-Umfangs.


Pencil: ein gutes, schnelles, kostenloses Scribble-Tool 1

Als eingefleischter Freund schneller PowerPoint oder Papier Scribbles und Erzfeind des Tools Balsamiq, wenn es in die Hände von gestaltungsunerfahrenen Leuten gerät, war ich sehr positiv überrascht, als ich mir das Firefox-Plugin „Pencil“ angeschaut habe – danke an Thea Nicolescu für den Tipp! :-)

Hier kurz die Vorteile im Überblick:

  • Schnelle und einfache Installation: Entweder als Firefox-Plugin oder als standalone Version für alle Plattformen
  • Kostenloses OpenSource Tool
  • Stabil und schnell
  • Gutes Set an vordefinierten Interface-Elementen (Web, Windows, Flowcharts,…)
  • HTML-Export für klickbare Prototypen

Und jetzt im Detail. Hier erst mal ein Blick auf die Anwendung. Die Elemente werden aus dem Panel links auf die Arbeitsfläche gezogen:

Pencil Tool - Anwendungsfenster

Es gibt Elementbibliotheken für verschiedene Anwendungszwecke und Stile. Hier zum Beispiel ein Website-Entwurf im Sketch-Stil:

Pencil Tool - Sketchy Style Website-Entwurf

Oder hier ein Entwurf für einen Windows-Dialog (das sieht für einen Entwurf schon fast zu perfekt aus…):

Pencil Tool - Entwurf Windows Dialog

Die Anordnung der Elemente funktioniert reibungslos. Es gibt viele Ausrichtungshilfen, die ich bei einem Tool dieser Art nicht erwartet habe, wie snap-to-element oder automatische Ausrichtungslinien (OK, die arbeiten nicht ganz zuverlässig, wenn der Entwurf viele Elemente enthält, das kann man aber verschmerzen, denn es geht ja nicht um pixelgenaue Layouts):

Pencil Tool - Ausrichtungshilfen

Die Bearbeitung der Beschriftungen findet inplace direkt am Objekt statt. Im Microsoft Office Stil bekommt man zusätzlich zur Textbearbeitung noch eine Minitoolbar mit den wichtigsten Formatierungswerkzeugen angezeigt:

Pencil Tool - Inplace Textbearbeitung

Diverse Einstellungen können per Kontextmenü direkt am Element vorgenommen werden, u.a. das Feststellen der Position oder die Reihenfolge der Elemente:

Pencil Tool - Eigenschaften der Objekte

Was ich noch nicht ausprobiert habe, ist der Export der Entwürfe in HTML (damit lassen sich dann auch Klickdummys erstellen) und eigene Formen anzulegen.

Werde bei der nächsten Gelegenheit mal versuchen, die Finger von PowerPoint zu lassen und stattdessen mit Pencil zu arbeiten. ;-)

Update 11.03.2015

Ich habe einen neuen Artikel zu diesem Thema geschrieben, in dem ich verschiedene Scribble-Tools vorstelle:

Übersicht Scribble-Tools vom 25.02.2015


Scribble Spielereien

Hier mal eine paar nette Scribble Gerätschaften, die Abwechslung zum leeren Blatt Papier und Bleistift bringen. Ob ich davon schon was nutze? Nein, aber der Finger kribbelt schon über dem Bestellknopf. Kann man doch auch alles auf Papier malen, oder? Ja, aber da kommt der Spieltrieb durch – auch das gehört zu gutem User Experience Design dazu ;-).

UX Pin – Paper Prototyping

http://uxpin.com

Sticky notes Prinzip, als Baukasten für Web und mobile Anwendungen, für $19,99 bzw. $14,99.

UI Stencils

http://www.uistencils.com

Blöcke mit vorgezeichneten Interfacerahmen und Schablonen für Interface-Elemente. Schablone fürs iPhone kostet $24,95, iPhone Sketch-Pad $12,95.

GUI Mags

http://guimags.com

Baukasten mit wiederbeschreibbaren GUI-Magneten zum Scribbeln am Whiteboard, $98.

App Sketchbook

http://appsketchbook.com

Skizzenblöcke mit vorgezeichnetem App-Rahmen für iPhone und iPad, jeweils $12.