Hochwertiges Screendesign

Die Zielgruppe des 19″-Touch-Displays von GIRA ist besonders, denn die zentrale Steuereinheit („Home-Automation“) wird sicherlich nicht in jeder Mietswohnung anzutreffen sein.

Das Interface hat eine reduziert und hochwertig wirkende Anmutung, was wiederum auch dem Design-Selbstverständnis von GIRA entspricht. Es besitzt fast keine verzierenden Elemente, wenn man mal von den Lichtreflexen und den feinen Haarlininen und Highlights absieht. Aber wozu soll es auch verzieren? So wie es ist, dient es in jedem Heim als Funktionseinheit und integriert sich in die jeweilige Ausstattung.

Das besondere ist – fast wie bei einem IPhone oder IPad – es selbst. Wobei: das Iphone hat neben der hohen Funktionalität noch weitere Merkmale, die es besonders werden lassen, ganz egal wie sich die Nutzer sonst kleiden oder mit welchen Dingen sie sich sonst umgeben.

Es gibt dazu auch ein App für das Iphone, die passt prima zu Apple-Produkten, aber das stand aus meiner Sicht bei der Screengestaltung nicht im Vordergrund.

Das neue Gerät kommt wohl Anfang 2011 auf den Markt, und so sehen Screens die man im Netz findet aus:
G_touch

(Bild: Gira-Homepage und Presseartikel)

Eine Übersicht diverser Screens findet man auf der Seite Smart-Home-Design:

Gi_klein

Ein Video in Aktion hier

Mediathek
Ein weiteres Beispiel für eine in dunklen Tonwerten gehaltene Anwendung ist die Mediathek beim SWR-Fernsehen. Man kann die Darstellung auch umschalten („zur besseren Lesbarkeit“). Da könnte man gut testen, welche Darstellung hinsichtlich Anmutung und Lesbarkeit besser funktioniert.

swrme
(Bild: http://swrmediathek.de/index.htm)

Posted in Beispiele, Designkonzept. Tags: , , , , , , . Kommentare deaktiviert für Hochwertiges Screendesign »

Screendesign: Hell vs. Dunkel

Hell vs. Dunkel
Nicht erst seit Adobe Lightroom oder der Bridge tauchen wieder dunkle Fonds (Hintergründe) im Screendesign auf. Für die Lesbarkeit ist das nicht immer optimal, auch wenn der Grundsatz, das große Bildschirmflächen „strahlungsarm“ zu gestalten sind das Ziel ist. Die Schrift sollte dabei jedoch nicht zu hell gewählt werden, das bereitet dem Wahrnehmungssystem sonst auch Probleme.

Helle Screens wirken andererseits teilweise „billig“, dunkle Sreens können eine „schmutzige“ Anmutung haben, beides gilt es i.d.R. zu vermeiden. Ein anderer Aspekt: helle Screens zeigen teilweise auch die Herkunft der Gestalter aus dem Print-Bereich…

Anders gesagt: Jedes Pixel das leuchtet, kann eine falsche oder ablenkende Information beherbergen.

Meine erste Empfehlung:

  • visuelle Leitmotive festlegen und ggf. Mood-Charts erstellen
  • darauf basierende, unterschiedliche Screen- und Layout Entwürfe erstellen, auch hell/dunkel.
  • „Test or die“: testen Sie aus, welche Wirkung Ihrem Ziel entspricht

Noch ein Vorteil: Hochwertige Anmutung
Die Screens können auf einem dunklen Hintergrund sehr hochwertig ausgestaltet wirken. Hier ein paar Beispiele:


(Bachelorarbeit C.Basler 2010 Flash&Papervision3D)


(
Screenshot „OpenTV-Browser“ von Soyter, T./Müller, P.)
http://www.thomas-soyter.de/wp/
Siehe auch den blog des Projektseminars Applicationdesign des Studienganges Informationsdesign aus dem WiSe 2009/2010:
https://idblog.hdm-stuttgart.de/appdesign/


Processing-Application aus dem SoSe 2010 von Krüger, K./Steinau, C..
Momentan noch unter:
http://mars.iuk.hdm-stuttgart.de/~kk052/applet/

AEG_Haustechnik
(Screenshot der AEG-Haustechnik Website)

http://www.aeg-haustechnik.de/

Meine zweite Empfehlung/Gestaltungshinweise:

  • Große Hintergrundflächen in strahlungsarmen Farben anlegen
  • Hell-dunkel-Kontrast prinzipiell wichtig – aber nicht maximal ausreizen
  • Helle und leuchtende Farben gezielt und sparsam einsetzen – auf Verweildauer achten
  • Helle Schrift auf dunklem Grund „säuft“ ab, daher auf Strichstärke und Laufweite achten
Posted in Designkonzept. Tags: , , , . Kommentare deaktiviert für Screendesign: Hell vs. Dunkel »

Screendesign

Heute und letzte Woche hatten wir neben den Gesprächen zum Informations- und Interaktionskonzept die ersten Ideen zum Designkonzept oder Screendesign.

Bei den Gruppen heute hatte ich ein paar Beispiele gezeigt, die ich den Anderen nicht vorenthalten möchte, da man daran recht gut zeigen kann, um was es geht.

Screendesign – Gestalten Sie!
Zunächst: Trauen Sie sich! Sie haben das Interaktionskonzept erstellt, nun geht es darum eine optimale Gestaltung auszuleiten. Dabei sollte man aber in diesem Seminar nicht dauernd auf vermeintlich perfekte Usability achten. Es geht insbesondere darum, dass Sie Varianten erstellen können, neue Wege im Interfacedesign gehen lernen, aber auch historische Pfade kennen. Und: Der Usability-Engineer kann nur das testen, was schon gestaltet wurde.

Bandbreite: Variation als gestalterische Fähigkeit
Nun zwei Beispiele, die erklären sollen, was ich meine. Der erste Screen zeigt die Oberfläche einer Lern-Anwendung von Pearson-Education/Addison-Wesley zu ActionScript3. Diese Anwendung ermöglicht eine redundante Navigation, einige Menupunkte sind ständig, andere nur nach Nutzerinteraktion anwählbar.

Interfacedesign als Teil des Screendesigns
Formal zeichnet sich die Gestaltung zur die kantigen Buttons und durch ein etwas unregelmäßiges Raster aus. Die Farbe rot dominiert zudem, der Fond (Hintergrund) ist eher dunkel und daher strahlungsarm gehalten. Die Formen und Details sind stark an die aktuelle CreativeSuite von Adobe angelehnt, weisen jedoch durch die klaren Formen auch klassische Züge auf.

Addison_Wesley_klassisch

Ganz anders die Web-Anwendung des Mode-Labels „George, Gina & Lucy„. Schrille Farben, höchst dynamische Typo-Navigation und weitere typografische Spielereien vermitteln jedenfalls keine Klassik. Ob die Anwendung gut oder schlecht bedienbar ist, möchte ich hier nicht besprechen, wohl aber die extreme Haltung der formalen Elemente.

In diesem Sinne:
gehen Sie an die Grenzen und zeigen Sie, was möglich ist!

georgeginalucy_advanced

Reduziert vs. Normal
Einige Gruppen versuchen die Komplexität für bestimmte Nutzungskontexte zu reduzieren. Ein Beispiel von vielen, bei dem das auch angewandt wird zeigt die Backup-Anwendung „Genie Backup Assistant“ von LaCie. Entscheidend aus meiner Sicht ist, dass auch aus formalen Gründen der Wechsel nachvollziehbar sein sollte.

Warum die wichtigen Elemente weniger Kontrast als der Wechsel-Button aufweisen, erschliesst sich mir nicht völlig. Diese wenig hilfreiche Gestaltung zieht sich auch bei der Interaktion durch, sobald man die Button-Bereiche berührt, highlighten diese in durch eine viel zu geringe Tonwertänderung. So lieber nicht. Wenigstens wurde die 3D-Ansicht der großen Icons zumindest durchgehalten.

Genie_einfach Genie_normal

Posted in Beispiele, Designkonzept. Tags: , , . Kommentare deaktiviert für Screendesign »

Feinkonzept: Wireframes digital

Feinkonzept

Das Feinkonzept liefert uns die Interaktionsabläufe für die jeweilige Anwendung. Um das Feinkonzept zu visualisieren, eignen sich u.a. Wireframes. Viele erstellen die Wireframes heute digital, was meist einen Geschndigkeitsvorteil verspricht. Ich verwende digitale Wireframes dann, wenn die Interaktionsabläufe schon relativ konkret sind. Für die ersten Annäherungen an die Abläufe ist man händisch meist schneller (dafür auch ungenauer) unterwegs.

Wichtig ist, dass man bei den Wireframes das Interaktionskonzept schnell und möglichst umfassend löst. Das bedingt, dass man viele Versionen erstellt – daher müssen die Wireframes ja wie in der Vorlesung erwähnt einfach, ohne “Gestaltungseffekte” erstellt werden. Den Abstraktionsgrad bestimmt man selbst – erklären muss man die Dinger sowieso.

Die Art der Darstellung der Wireframes soll also keine Gestaltung des Endproduktes vorgaukeln – manche Auftraggeber denken sonst, die Anwendung schaut genau so aus…

18 Wireframe-Werkezeuge

Auf dem blog-Eintrag von Dainis Graveris werden 18 Mock-Up-Tools für digitale Wireframes vorgestellt – eine aktuelle und umfassende Übersicht. Hier der Link als URL: http://www.1stwebdesigner.com/design/wireframing-mockup-prototyping-tools-plan-designs/

Persönlich nutze ich gerne das Pencil-Project direkt im Firefox und balsamiq, aber testen und entscheiden Sie selbst.

(Bild: balsamiq)

pencil

(Bild: Screenshot Pencil-Project als Firefox-Add-on)

Posted in Feinkonzept. Tags: , , . Kommentare deaktiviert für Feinkonzept: Wireframes digital »

Interfacedesign-Patterns

Es gibt ein paar hilfreiche tools, um schnell passende Interface- und Interaktions-Patterns zu finden. Manche dieser tools sprechen auch von Informationdesign-Patterns. Seis drum, hier die Links:

Quince
Sehr umfangreich, die Beschreibungen der Rationale ebenfalls. Klasse.

http://quince.infragistics.com/UX-Design-Patterns.aspx

quince

Patternbrowser
Nicht voll befülltes System von der FHP (Potsdam), aber gute Beispiele. Testen.

http://www.patternbrowser.org

patterns_fhp

Ein drittes Beispiel fehlt noch – da geht der Server gerade nicht – liefere ich aber nach.

Posted in Beispiele, Designkonzept, Feinkonzept. Tags: , , . Kommentare deaktiviert für Interfacedesign-Patterns »

Geschützt: Designkonzept Folien

Dieser Inhalt ist passwortgeschützt. Um ihn anzuschauen, gib dein Passwort bitte unten ein:

Posted in Designkonzept. Tags: , , . Kommentare deaktiviert für Geschützt: Designkonzept Folien »

Nächste Termine

Folgende Planung für die nächsten Wochen:

  • 08.11.10 Einzel-Gruppenbesprechung (Projektbesprechungen) Analyse/Ausblicke Konzeption
  • 15.11.10 Projektbesprechungen Grobkonzept
  • 22.11.10 VL Designkonzept und freies Arbeiten/ggf. Besprechungen
  • 29.11.10 Projektbesprechungen Feinkonzept/Designkonzept (Gruppen 1-5)
    Parallel mit den anderen Gruppen: Einführung in After-Effects in W323
  • 06.12.10 Projektbesprechungen Feinkonzept/Designkonzept (Gruppen 6-10)
    Parallel mit den anderen Gruppen: Einführung in After-Effects in W323
Posted in Allgemein. Tags: . Kommentare deaktiviert für Nächste Termine »

Geschützt: Feinkonzept 2: Wireframes (und Hinweise zur Analyse)

Dieser Inhalt ist passwortgeschützt. Um ihn anzuschauen, gib dein Passwort bitte unten ein:

Posted in Feinkonzept. Tags: , , , . Kommentare deaktiviert für Geschützt: Feinkonzept 2: Wireframes (und Hinweise zur Analyse) »

Geschützt: Feinkonzept 1: Infoarchitektur und Sitemaps

Dieser Inhalt ist passwortgeschützt. Um ihn anzuschauen, gib dein Passwort bitte unten ein:

Posted in Feinkonzept. Tags: , , . Kommentare deaktiviert für Geschützt: Feinkonzept 1: Infoarchitektur und Sitemaps »

Anwendungen für das Re-Design

Anwendungen und Gruppen
Wir haben am letzten Termin folgende Gruppen und Anwendungen für das Re-Design bestimmt. Die Analyse kann beginnen!

Evers/Dudarenko: Brenn-Programm
http://www.ashampoo.com/de/eur/pin/2610/Brenn_Software/Ashampoo-Burning-Studio-10

Borger/Borchardt: Internetradio-Player
http://www.phonostar.de/phonostar_player/

Kolar/Rohrer: Bilder-Viewer
http://www.irfanview.de/

Altenburg/Goldschmitt: Rezeptverwalter

Schultze/Hopfgartner: AV-Konverter
http://www.mysupersoft.com/superavconverter.htm

Brkovic/Frank: Medienverwalter
http://www.shareware.de/filmcenter/

Grossmann/Johnke: MP3-Verwalter
http://www.peter-ebe.de/MP3Find/features.html

Claußen/Hofrichter: Pixel-Bildbearbeitung
http://portableapps.com/apps/graphics_pictures/gimp_portable
blog der beiden: http://letone.de/appdesign

Erstein/Micu: Icon-Pixelbearbeitung
http://www.axialis.com/iconworkshop/

Leppert/Mürder: Dateisynchronisierung
http://www.allwaysync.com/

Posted in Allgemein. Tags: , . Kommentare deaktiviert für Anwendungen für das Re-Design »