Runde oder Ecken?

Eine alte Diskussion: sollen Ecken eckig sein oder rund? Es gibt aus meiner Sicht zweifelhafte Studien, den kognitiven Aufwand herauszuarbeiten. Der scheint bei runden Ecken geringer zu sein – doch zu welchem (ästhetischen) Preis? Das Beispiel SKODA zeigt, neben anderen tiefgehenderen Problemen, wie altbacken und leblos man mit runden Ecken arbeiten kann. Formales „downlight“ ist für mich die Seite mit den eckigen Tabellen innerhalb der runden Rahmen: skoda_rund_eckig Dank an das designtagebuch Auch nicht besser das Beispiel unten links: Große Radien können sehr kindhaft und plump wirken, teilweise wirkt das dann nicht präzise, obwohl ja digital erstellt, was wiederum Auswirkungen auf den Content oder das Produkt hat. Bestenfalls wirken die Rundungen – wie im Artikel über Steve Jobs/Apple beschrieben – „friendly“. relocationsand Rund ja, aber bitte mit Fingerspitzengefühl (siehe Apple im MAC OS) und mit guten Argumenten: RUND = interaktiv ECKIG = statisch (Lesetext…) Ob das auch immer durchzuhalten ist, muß man prüfen, meist klappt das dann auch nicht recht. Gestalterisch maximal bedenklich ist aber der langweilige Wechsel von positiv/negativ-Radien sowohl bei Skoda als auch bei  dieser Dialogbox: dialogbox Fazit: Interfacegestaltung heisst abwägen von allen Vor- und Nachteilen hinsichtlich Formalästhetik, Bedeutung, Vorwissen, Historie und Trends undsoweiter. Interfacegestaltung stellt die Balance zwischen primärer Information (Dialogbox, Aktuelles…) und sekundärer  Information (das könnte Sie auch interessieren…) her.

Beispiel-Clickthrough für Multitouch

Anbei ein Ausschnitt der im Sommer/Herbst entstandenen Bachelorarbeit bei uns am Studiengang Informationsdesign von K.Rahn & V.Ziegler „Touch&Find“. Die Arbeit behandelt das Thema Mediensuche über ein Multitouch-System und erstreckt sich von der Theorie, Recherche, Konzeption, Gestaltung bis hin zur exemplarischen Ausarbeitung. Link zum PDF:touch_and_find_proof_of_concept Die Seiten zeigen einen Teil des Interface- & Interaktionskonzeptes als sog. „proof-of-concept“, hier nicht als Animation gelöst, sondern „klassisch“ über einzelne Frames in Photoshop. Es gab auch ein begleitendes blog dazu. touchandfind
Posted in Designkonzept. Tags: , , , . Kommentare deaktiviert für Beispiel-Clickthrough für Multitouch »

Where Wireframes Are Concerned

Ein guter Artikel im UX-Magazine der die Diskussion des Einsatzes von Wireframes beleuchtet. Insbesondere in den Kommentaren sieht man, wie unterschiedlich die Agenturen/UX-Designer/Konzepter die Wires einsetzen. Die Verständlichkeit beim Kunden hatten wir ja auch schon thematisiert. uxmag wire

Interface- & Interaktionspatterns

Für die Design-Schritte nach dem Feinkonzept hier ein paar wertvolle Links: Diese interaktiven Pattern-Browser sind sinnvoll als Übersicht bei Analyse, Konzeption und Gestaltung: http://interface.fh-potsdam.de/infodesignpatterns/patterns.php infodesignpatterns-300x215 http://www.patternbrowser.org interfacepatterns-300x211 Das Projekt QUINCE bietet eine Übersicht diverser Interaction-Patterns. Mit oder ohne Silverlight2-Installation. http://quince.infragistics.com/UX-Design-Patterns.aspx quince2 Eine Sammlung klassischer Patterns findet man hier: http://www.welie.com/patterns/index.php pattern Das relativ neu erschienene Buch hat eine sehr gute Homepage mit einer aktuellen Sammlung von Patterns: http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns designingwebinterfaces
Posted in Designkonzept. Tags: , , . Kommentare deaktiviert für Interface- & Interaktionspatterns »

Anregungen zu Konzeption und Gestaltung

Zwei interessante Beispiele zu der aktuellen Projektphase bei uns: Gesamtprozess http://www.achtung-interaktiv.de zeigt den gesamten Entwurfsprozess anhand eines HTML/JS-Clickers auf. Fein. achtung Wireframes In diesem blog sieht man die Konzeption und Gestaltung einer IPhone-App. Zu beachten ist, dass mir die Wireframes für unsere Zwecke zu grob gehalten sind, bzw. sollte man beim Entwurf der Interaktionen sehr genau hinschauen und  bspw. mit Handskizzen „nachweisen“: geht / geht nicht. Dann kann man hinterher als Extrakt auch gerne die Wires als Übersicht zusammenfassen. wireframe_web2-300x199
Posted in Feinkonzept. Tags: , , , . Kommentare deaktiviert für Anregungen zu Konzeption und Gestaltung »

Apps-Beispiele: Anregungen für bessere Applikationen

Die Seite von Aviary bietet diverse Online-Applikationen im grafischen Bereich. Eine Anlyse des Interfaces ist sicherlich gewinnbringend. aviary Centigrade hat eine kleine Galerie zum Umgang mit Icons und Interface-Patterns. demo Und noch ein Beispiel, dass mit Design „hin und wieder“ nur das Addieren und Verändern von Features auf Produkten gemeint ist – die Applikation hat aber „wenigestens“ das IPhone-Feeling… http://www.tanner-tailor.de/configurator/index taschen
Posted in Designkonzept, Feinkonzept. Tags: , , , . Kommentare deaktiviert für Apps-Beispiele: Anregungen für bessere Applikationen »

Wireframes, Mockups & Prototyping

Im Abschnitt Feinkonzept werden ja dann als Endergebnis u.a. unsere Interaktionen in Wireframes „gemeisselt“. Anbei ein paar Anregungen und natürlich Links. 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. Bei meinem Kollegen Oliver Wrede der FH Aachen bin ich dabei in seiner Sammlung auf alte und neue bekannte digitale Tools gestossen. Look & feel! wire Das tool IPLOTZ finde ich sehr brauchbar, kostenlos und online, aber halt zunächst ohne Collaboration… iplotz balsamiq-Mockups ist auch fein: balsamiq Dann findet man hier noch was: http://www.evolus.vn/Pencil/ Das ist nett, denn das ist nur ein Add-on für den Firefox, mit dem man aber schnell&einfach ein Konzept darstellen kann. pencil http://tinyurl.com/chuvag http://www.uxmatters.com/mt/archives/2007/03/wireframing-with-patterns.php
Posted in Feinkonzept. Tags: , , , , . Kommentare deaktiviert für Wireframes, Mockups & Prototyping »