Neuer Anstrich – Redesign

Februar 6th, 2010

Am Auffälligsten ist wahrscheinlich die Farbgebung und die Dreidimensionalität. Allgemein sind wir auf dunklere Grautöne umgestiegen. Die Icons haben auch an Schwärze verloren, sie werden nur noch in 90% Schwarz dargestellt. Wodurch auch der Helligkeitskontrast zwischen Icons und Menüoberfläche reduziert wurde. Somit wirken die Icons nicht mehr so gewichtig. Um die Icons im normalen Zustand besser als klickbar identifizieren zu können, haben wir ihnen einen kleinen Lichtreflex verpasst. Befindet sich der Mauszeiger über einem Button, so bekommt dieser einen Rahmen, hier hat sich also nichts verändert. Die aktiven Buttons hingegen, haben einen sehr dunklen 3D-Look und ein 100% schwarzes Icon, ohne Lichtreflex, bekommen. Trennlinien sind nun als Einkerbungen aufzufinden um den neuen dezenten 3D-Look des Menüs und der Fenster zu unterstützen.

Shortcut-Menü

Die Buttonkonstellation hat sich um 45° gedreht, damit der Nutzer entlang der horizontalen bzw. vertikalen Achse fahren kann, ohne zwischen zwei Buttons zu gelangen. Das heißt, nicht mehr links unten, links oben, rechts unten und rechts oben sondern links, rechts, oben und unten. Die Outline in Kombination mit dem 3D-Look, der aktiven Buttons, wurde hier nicht übernommen. Aufgrund der sonst zu gewichtigen Wirkung mit dem schon vorhandenen 3D-Effekt des Shortcut-Menüs.

Design Part II

Februar 6th, 2010

Wir haben, trotz der großen Buttons, platzsparend gestaltet um eine möglichst große Arbeitsfläche dem Nutzer zu bieten. Bei der Farbwahl haben wir uns auf Grautöne beschränkt für eine klassische zurückhaltende Oberfläche. Durch die Anordnung und Gruppierung der Funktionen soll das Interface eine übersichtliche Struktur erhalten. Das Design unterstützt auch Schnellzugriffe für eine verbesserte und fexiblere Nutzung.

Designkonzept:

  • verschiede Bereiche innerhalb eines Fensters durch Linien getrennt
  • Drag and Drop Elemente in 3D
  • unterschiedliche Darstellung der verschiedenen Button-Zustände
  • hoher Helligkeitskontrast zwischen Icons und Menü-Hintergrund
  • Fenstergrößen individuell an den Inhalt angepasst
  • abgerundete Ecken

Die einzelnen Funktionsbereiche wurden durch Linien optisch voneinander getrennt. Bei den Malwerkzeugen wurden so die Hauptgruppen von den Untergruppen und die Malwerkzeuge von den Nachbearbeiterwerkzeugern getrennt. Elemente wie der Anfasser der Hauptleiste oder die aktiven Elemente der Schieberegler wurden durch 3D-Effekte hervorgehoben, um sie als greifbare Elemente kenntlich zu machen.

Bei unseren Buttons gibt es drei verschiedene Zustände. Der normale Zustand ist nur durch ein einfaches Icon gekenntzeichnet. Befindet sich der Mauszeiger über einen Button so bekommt er, zusätzlich zu dem Icon, einen Rahmen. Aktive Buttons werden durch ein Icon, einen Rahmen sowie einen dunkleren Grauton visualisiert.

Allgemein werden unsere Icons, wie schon erwähnt, schwarz dargestellt. Und stehen damit im Kontrast zu unserem hellgrauen Hintergrund. Dies soll die Erkennbarkeit unserer Icons steigern. Die Fenstergrößen sind individuell an den Inhalt angepasst um unnötigen Freiraum zu vermeiden.

Icons, Design Part I

Februar 6th, 2010

In der zuvor gezeigten Demonstration gab es viele Elemente der Gestaltung, zu denen wir noch nichts erzählt noch erläutert haben. Dies holen wir nun in den folgenden Blogs nach.

Wir haben unsere Icons entsprechend folgender Kriterien gestaltet:

  • einfarbig
  • kompakt/auf das Wesentliche reduziert
  • schnelle Wiedererkennung
  • erkennbar ohne Verwendung Text
  • zusammengehörig
  • eindeutig
  • auch in geringer Größe erkennbar

Anfangs hatten wir uns überlegt die Icons durch verschiedene Farbgebungen zu gruppieren. Zum Beispiel: Icons aus der Kategorie Werkzeuge, alle in einer Farbe und Icons aus der Kategorie Navigation, alle in einer anderen Farbe. Obwohl die Aussage der Icons unabhängig von der Farbe ist, wirkte die Farbgebung jedoch sehr bunt und auffällig. Egal wie dezent die Farbgebung auch war, es wirkte stets unruhig. Sie hätte wahrscheinlich eine sehr viel jüngere Altersgruppe angesprochen. Darum entschieden wir uns die Icons in schwarz darzustellen.

Bei der Gestaltung haben wir unnötige Details weggelassen. Nur Elemente die für die Erkennbarkeit notwendig waren, wurden dargetellt. Darum haben wir zum Beispiel für die Darstellung der Pinsel uns auf die Pinselspitzen beschränkt und haben auf Dreidimensionalität verzichtet.

Damit die Icons als zusammengehörig erkannt werden, haben wir auf eine einheitliche Gestaltung geachtet. So haben wir zum Beispiel, die meisten Werkzeug-Icons von links unten nach rechts oben gehen lassen.

Für die Erkennbarkeit bei Darstellungen in geringer Größe und um die Icons nicht zu schwer wirken zu lassen, wurde für ausreichend große Zwischenräume gesorgt.

Kurze Demonstration

Februar 5th, 2010

Hier eine kurze Demonstration wie unser Interface in Aktion aussieht.

http://www.youtube.com/watch?v=V5xijkjbDgk

Shortcut-Menü für die Schnellen

Februar 5th, 2010

Das Shortcut-Menü wird über eine integrierte Taste des Stiftes eines Grafiktabletts geöffnet. Es ist in vier Bereiche eingeteilt. Dargetellt wird das Shortcut-Menü über einen in vier Bereiche unterteilten Kreis (Pie-Menü). Mittelpunkt des Shortcut-Menüs ist beim Öffnen die Position der Maus.

Die vier Bereiche:

1. Werkzeuge
Über den Werkzeug-Button gelangt man zu den acht zuletzt ausgewählten Werkzeugen mit Größeneinstellungsmöglichkeit.

2. Navigation
Über den Navigations-Button gelangt man zu den sieben Navigationsfunktionen (siehe Bild).  Die selben Funktionen wie in der Hauptleiste.

3. Nachbearbeiter
Über den Nachbearbeiter-Button gelangt man zu den drei Nachbearbeiterwerkzeugen (Pipette, Radiergummi, Schaber) mit Größeneinstellungsmöglichkeit.

4. Farben
Über den Farbe-Button gelangt man zu den acht Farben der Farbhistorie. Dabei gilt auch hier die Einstellung der „letzten acht Farben“ oder „selbst definierte Farben“.

Die vier Bereiche werden durch das Icon der zuletzt verwendeten Funktion des entsprechenden Bereiches dargestellt. Die Unterfunktionen der Menüpunkte werden jeweils in einem, unter dem Hauptkreis liegendem, größeren Kreis angeboten. Es gelten in dem ganzen Shortcut-Menü die allgemeinen Regeln der Menüauswahl. Das heißt, bei einem „Doppelklick“ auf einen der vier Hauptbereiche, wird das abgebildete Werkzeug sofort ausgewählt und das Shortcut-Menü geschlossen. Dies geschieht ohne das sich das Untermenü öffnet. Nur bei der Farbauswahl passiert weder ein Iconwechsel, noch kann die Farbe mit einem „Doppelklick“ ausgewählt werden, da hier kein Werkzeugwechsel stattfindet.

Eine weitere Anregung zu einem anderen Menüaufbau bekamen wir von dem Herrn Tille. Diese ist jedoch mit einigen Problematiken verbunden. Die Idee war, kein Rundes Untermenü zu benutzen, sondern in eine Richtung orientiertes Menü aufzubauen. Das man sich z.B. nicht von oben nach unten und wieder hoch bewegen muss. Sondern sich vom Mittelpunkt des Kreises aus nur in eine Richtung bewegen muss. Der Nachteil dieses Menüaufbaus, wollen wir nun in einem kleinen Beispiel erläutern.

Der Nutzer befindet sich in der linken oberen Ecke. Er möchte das Shortcut-Menü aufrufen. In diesem Menü will er die Funktion links oben auswählen. Aufgrund der Positionierung, würden die Unterpunkte nicht mehr auf dem Bildschirm zu sehen sein. Wenn das Shortcut-Menü beim Aufrufen schon einen Abstand zum Bildschirmrand einhalten würde, müsste es sich wegen dem hohen Platzbedarf des Untermenüs relativ mittig positionieren.

Da wir diese Applikation für ein Grafiktablett konzepiert haben, wird mit einem Stift gearbeitet und nicht einer konventionellen Maus. Für die Nutzung mit einem Stift ist ein kreisförmiges Menü von Vorteil. Der Nutzer kann so das Menü mit einer Bewegung aus dem Handgelenk bedienen. So muss nicht der gesamte Arm, wie es bei dem anderen Menüaufbau der Fall wäre, bewegt werden.

Interaktionen, die Fortsetzung

Februar 5th, 2010

Wir haben uns drei allgemeine Arten der Interaktion überlegt:

1. Beim Berühren des Grafiktabletts mit dem Stift werden gegebenenfalls die Menü-Inhalte angezeigt, aber noch nicht ausgewählt. Dies ermöglicht eine einfache Korrektur indem der Stift von dem Button gezogen wird (Skizze 3).

2.  Mit „on release“ wird eine gewünschte Funktion ausgewählt.

3. Mit einem „Doppelklick“ wird die gewünschte Funktion ausgewählt und das Menü geschlossen.

Werkzeugmenü

Das Werkzeugmenü bietet acht verschiedene Malwerkzeugsarten, drei Nachbearbeiterwerkzeuge und zwei Buttons für die Werkzeuggröße und die Schmierzettel-Funktion. Jedes Malwerkzeug beinhaltet entweder mehrere Köpfe/Spitzen oder eine Einstellmöglichkeit der Härte. Diese Unterfunktionen sind jeweil, nach Auswählen von einem Malwerkzeug mit einfachem Klick,  unterhalb der Malwerkzeuge sichtbar. Die Härte lässt sich über einen Schieberegler einstellen.

Farbhistorie

Die aktuell ausgewählte Farbe, befindet sich immer in dem großen Kästchen. Durch den „Switch-Button“ bei der Farbauswahl, ist es möglich zwischen seinen acht selbst definierten und den acht zuletzt verwendeten Farben zu wechseln. Die letzten verwendeten Farben werden von links nach rechts und dann von oben nach unten in den Kästchen platziert. Wird eine neue Farbe ausgewählt, rutschen die Farben alle um ein Kästchen weiter. Um selbst Farben definieren zu können wird die aktuell ausgewählte Farbe per Drag and Drop in eines der kleinen Kästchen reingezogen. Ist das Kästchen bereits mit einer Farbe gefüllt, wird diese ersetzt und bleibt solang in der Farbhistorie bis sie wieder ersetzt wird. Durch Anklicken eines der kleinen Farbkästchen wird die Farbe des großen Kästchens und somit auch die aktuelle Farbe ersetzt.

Ebenen

Um im Ebenen-Menü eine neue Ebene zu erstellen, drückt man auf den „+“ – Button. Diese neue Ebene wird automatisch über die zuletzt ausgewählte Ebene platziert. Nun ist die neue Ebene aktiv. Um die Ebenen neu zu positionieren, können die Ebenen per Drag and Drop an die gewünschte Stelle gezogen werden. Ist die Anzahl der Ebenen so hoch, dass sie die Bildschirmbegrenzung überschreiten würden, erscheinen zwei „Scroll-Buttons“. Bei einmaligem Drücken auf einen „Scroll-Button“ werden die Ebenen um eins in die entsprechende Richtung geschoben. Bei gehaltenem Druck auf einen „Scroll-Button“ werden, mit erhöhter Geschwindigkeit, die Ebenen verschoben.

Interaktion mit dem Interface

Februar 5th, 2010

Um unser Interface besser mit dem Grafiktablett bedienen zu können, haben wir uns für große Buttons, die durch Icons gekennzeichnet sind, entschieden. Sie sollen dem Nutzer eine schnellere Bedienung ermöglichen. Dies haben wir als Basis für unsere Interaktionen verwendet.

Skizzen zu unseren Interaktionsideen:

Skizzen

Die Skizzen sind teilweise überholt, aber dennoch gut zur Veranschaulichung.

Die Schmierzettelfunktion (Skizze 1)  ist für das schnelle Testen eines Werkzeugs ohne in der Arbeitsfläche zu interagieren. Die Drehfunktion (Skizze 2) ermöglicht es, die Arbeitsfläche um eine ausgewählte Stelle zu drehen. Es ist eine Art Anleitung wie die Zoom-Funktion zu bedienen ist. Der Schieberegler (Skizze 3) kommt bei Funktionen zum Einsatz, die viele Abstufungen bieten. Zum Beispiel die Größe/Härte eines Werkzeugs oder die Helligkeit bei der Farbauswahl. Die Zoom-Funktion (Skizze 3) benutzt die ausgewählte Stelle als Mittelpunkt des Zoom-Vorgangs. Das visuelle Feedback (Skizze 2) ist eine Ergänzung der Zoom-Funktion.

Umfang?

November 26th, 2009

Um uns eine Übersicht über die einzelnen Funktionen zu verschaffen, haben wir die Funktionen in einer Sitemap aufgelistet und deren Zusammenhänge visuell dargestellt.

Persona

November 26th, 2009

Es ist leider nie möglich alle zufrieden zustellen. Deswegen gibt es Personas als Vertretung der Zielgruppe. Nach deren Wünschen und Bedürfnissen wird das Programm gestalten und umstrukturieren.

Wir möchten Ihnen eine Persona vorstellen für die wir dieses Programm so komfortabel wie möglich umgestalten wollen:

Jens_KohlerPersona: Jens Kohler

Alter: 34

Familienstand: Ledig

Beruf: Selbstständiger Illustrator in Stuttgart

Interessen: Besucht gerne Kunstgallerien, Waldspaziergänge, Schwimmen, Ölgemälde erstellen

Musikrichtung: Jazz, Rock

Ziele: Ein Kunstwerk zu erstellen welches berühmt wird

Jens ist ein erfolgreicher Illustrator. Sein Leben widmete er schon immer Grafiken und der Kunst. In seinem Beruf hilft ihm sein Interesse auf dem neusten Stand zu bleiben. Er liest auch gerne die Zeitschrift Dynamic Grafics während er gemütlich einen Kaffee trinkt.

Für Jens ist es schwer Freizeit und Beruf zu trennen, da Kunst auch gleichzeitig ein Teil seines Berufs ist. Als selbständiger Illustrator kann Jens sich seine Arbeitszeit auch größtenteils selbständig einteilen. In seinem Paint Club hört er mit seinen Freunden Jazz um in die richtige Pinselschwing-Stimmung zu kommen. Auch zuhause Malt er vielseitig. Dauernd muss er die verschiedenen Malwerkzeuge suchen und wenn er fündig geworden ist, kommt es auch schon mal vor, dass der Copic-Marker leer ist.

Er ist Technikaffin. Der Laptop ist sein täglicher Begleiter. Sowohl für seinen Beruf als auch zum Musikhören. Denn seine Stereoanlage gab vor paar Jahren den Geist auf als ihm sein Kaffe darüber gelaufen ist. Für seine Aufträge und auch in seiner Freizeit malt/zeichnet Jens oft an verschiedenen Orten. Ihn stört es, dass seine Tasche immer randvoll ist wegen dem Malwerkzeugen (Farbe, Copics, Bleistifte, Papier, Spitzer, Radiergummi, …) und seinem Laptop. Er hat schon Erfahrungen gemacht mit einem Graphiktablett und verschiedenen Zeichen-/Malprogrammen. Aber keines dieser Programme wurde seinen Anforderungen gerecht.

„Die Anderen“ – Benchmarking

November 26th, 2009

Um noch weitere Anregungen und Ideen für die Verbesserung von GIMP nach digitalen Mal-Aspekten zu bekommen, haben wir nach weiteren Mal-Programmen geschaut. Auf unserer Suche sind uns mehrere Programme begegnet. ArtRage (spezialisiert auf digitales Malen), Photoshop (GIMP sehr ähnliches Programm) und das wohl bekannte Mal-Programm Paint. Und auch diese nach positiven und negativen Aspekten ausgewertet.

Programme:

Möglichkeiten/Chancen (opportunity):

– Tintenwerkzeug: schnelle Bewegung = dünner Strich, langsame Bewegung = dicker Strich
Diese Werkzeugeigenschaften haben wir als sehr positiv bewertet. Als Chance darin sehen wir, diese Eigenschaften auch auf andere Werkzeuge zu übertragen.

– Reduzierter und auf digitales Malen spezialisierter Umfang
Die Oberfläche wird dadurch übersichtlicher. Der Nutzer kann sich darin besser zurecht finden.

– Dehnbare Arbeitsfläche
Durch die direkt dehnbare Arbeitsfläche sehen wir eine effizientere Nutzung. Die Größe kann auf die Bedürfnisse des Nutzers immer dynamisch angepasst werden. Auch wenn sich diese im Laufe des Mal-Prozesses ändert.

-Wissen aus der Realität auf Programm übertragbar
Eigenschaften wie Druck, Geschwindigkeit, Winkel und andere werkzeugspezifische Eigenschaften sollen von dem Programm so nah wie möglich an der Realität gehalten werden. Somit soll der Lerntransfer vom Stift zum Grafiktablett schnell ermöglicht werden.

Risiken (threat):

– Zu Spezifisch
Die Zielgruppe wird gering gehalten durch die Einschränkung an Möglichkeiten.