Design der Preisdarstellung im Online Shop

Das Webdesign eines Online Shops erfordert auch das genaue Vorgehen bei der Preisdarstellung. In kaum einem anderen Land die Darstellung von Preisen in der Werbung und den Medien so kompliziert und undurchsichtig geregelt, wie in Deutschland. Würde man allerdings wirklich alles nach Vorschriften machen, wäre wohl unter jedem kleinem Bild des Produktes ein ein gigantischer Textblock in dem folgende Angaben stehen würden:

  • Umsatzsteuer
  • Versandkosten
  • Grundpreis – je Mengeneinheit
  • Reduzierter Preis
  • Endpreis

Die gesetzliche Grundlage wäre dafür „PAngV“ – Preisangabenverordnung.

„Design der Preisdarstellung im Online Shop“ weiterlesen

Webdesign Logout Seite

Es gibt viele Tutorials und Richtlinien für gute das Design von guten Login Seiten, aber mir sind wenige untergekommen für gute Logout Seiten. Aus meiner eigener Erfahrung als Webdesigner kann ich nur sagen, dass insbesondere dieser wortwörtlich „letzter“ Seite zu wenig Zeit und Konzeptionsgedanken eingeräumt wird. Dem möchte ich mit dem Beispiel einer einfachen, aber vom Hören Sagen einer sehr erfolgreichen Logout Seite von web.de entgegen treten. Erfolgreich ist aus Sicht der Click-through Zahlen auf das Werbemittel:

Webdesign Logout Seite
  • Als erstes fällt die komplette Farblosigkeit des Interfaces – es ist nur in leichten Grautönen gehalten, mit einer schwarzen Schrift. So kann jedes Werbemittel seine uneingeschränkte Farb- und Formwirkung entfalten.
  • Es gibt ein einziges Werbemittel!!! Es gibt nichts besseres für die Werbung, als keine unmittelbare Konkurenz um die Gunst der Aufmerksamkeit des Users zu haben. Es ist eine enorm wichtige und mit Sicherheit eine schwere Entscheidung von web.de nur ein einzigen Banner zu zeigen. Es wurde garantiert alles durchgetestet und anstelle von mehreren hat sich herauskristalliesiert, dass nur mit einem Werbemittel die meisten Klicks erzielt werden.
  • Die eigenen Services wurden dezent aber bewusst an wichtigsten Punkten positioniert: das Suchfeld zentriert und der Web.de Startseite wurde sogar ein eigenes Button gewidmet. Der Bereich „Jobs“ scheint für das Unternehmen von besonderer Bedeutung zu sein, denn es ist das einzige Wort in der unteren Leiste, was als fett ausgezeichnet ist.

Unterm Strich: weniger ist mehr! Wie schon ein bekanntes Zitat sagt: „Ein Designer hört mit seiner Arbeit nicht dann auf, wenn es nichts mehr hinzuzufügen ist, sondern dann wenn man nichts mehr wegnehmen kann!“.

Web Design Tipps – Nummer 1

Regeln sind nicht wirklich das, was im Leben als Spassquelle Nummer Eins bekannt ist. Manchmal jedoch ist man wirklich froh darüber, denn die Regeln können auch wie bei einem Spiel, ein mal festgelegt eine wahre Spielwiese bieten und für den richtigen Spielspass sorgen (für Designer besonders wichtig).

Die folgenden 12 Design Tipps für Webseiten stehen natürlich nicht so felsenfest wie die berühmten 10 Gebote eines sehr oft verkauften und gelesenen Buches, doch sie stellen eine gute Basis für die Entwicklung gut funktionierender Webseiten. In diesem Artikel wird der Tipp Nummer 1 vorgestellt, die anderen werden folgen.

Web Design Tipp Nummer 1: „Kenne Deinen User“
Verschaffen Sie sich so viele Informationen über Ihre zukünftigen User wie nur möglich.  Daraus können wichtige Schlüsselfragen bezüglich des Designs beantwortet werden. Wie zum Beispiel das Prozentanteil der User mit einem DSL Anschluss, was wiederum bei der Entscheidung hilft, ob man große Dateien, wie viele Fotos, Grafiken oder Flashdateien  Ihre Webseite vertragen kann. Ein in Zukunft immer wichtigerer Faktor ist mit Sicherheit der Anteil der älteren Bevölkerung. Nicht nur die Schriftgröße hängt davon ab, sondern auch eine einfache Navigation mit einem klaren „Weg zurück“ und natürlich das gesamte Erscheinungsbild, bzw. die Art des Designs wird für ein jüngeres Publik ein ganz anderes Konzept aufweisen. Beim Design eines Onlineshops hat das Vertrauen schaffen gegenüber einem älteren und oft auch kritischerem Publikum einen höheren Stellenwert als es für die User der neuen, jungen Generation, die mit dem Internet aufgewachsen ist. Je mehr Informationen Sie über die Zielgruppe sammeln können umso besser!

Buchstabieren mit flickr!

Ein sehr abgefahrenes Tool hat ein gewisser Erik Kastner mit Hilfe von PHP und Javascript programmiert. Man gibt einfach ein Wort oder einen Namen in die Eingabemaske und die Online Software sucht in der Datenbank von flickr nach passenden Fotos pro Buchstabe. Die Ergebnisse sind sehr überzeugend, hier sind ein paar Beispiele mit dem Namen Dimitri:
Buchstabieren mit flickr!

Das Tool finden Sie unter diesem Link: http://metaatem.net/words/. Das Interessante, man kann sich den Code zum Anzeigen dieser Fotos einfach rauskopieren und in die eigene Webseite einbauen. Durch das Klicken auf einen einzelnen Buchstaben wird dieser durch ein neues Foto ausgetauscht.

Klickfreies Interface Design

Kann man ein Interface bedienen ohne ein einziges mal klicken zu müssen??? Diese Frage wird nicht theoretisch, sondern als pures Erlebnis auf www.dontclick.it celebriert. Alle Navigationselemente dieser Webseite lassen sich über einfaches Bewegen der Maus steuern – es reicht nur den Mauszeiger über die Links zu positionieren, damit sich dessen Inhalte angezeigt werden. Wer es nicht glauben, soll am besten es ausprobieren! Witzigerweise erscheint bei einem Fehlklick(wenn man doch aus Gewohnheit auf etwas klickt) immer eine sehr markante Meldung „Sie haben keinen autorisierten Klick ausgeführt, bitte sagen Sie warum Sie es getan haben!!! :-))) Aus Versehen oder haben Sie es tatsächlich gewollt?“ Sehr, sehr nett.

Klickfreies Interface Design

Digitalisierung der Archive

Ein interessantes Interview zum Thema Digitalisierung der Archive gibt es bei welt.de:

„Nach dem Buchdruck mit beweglichen Lettern markiert die Digitalisierung eine technische Revolution, die weitaus radikaler wirkt als Gutenbergs Erfindung. Die Information hat sich vom Informationsträger gelöst. Sie kann beliebig vervielfältigt und über das Internet verbreitet werden. Andererseits sind digitale Informationen flüchtig, sozusagen brüchiger als das brüchigste saure Papier und anfällig für Veränderungen, auch Verfälschungen.“

Wer schon seit vielen Jahren mit den Computern zu tun hat kennt womöglich das Problem der Archivierung. Die Dateien, die man vor vielen Jahren erstellt hat sind nur mit einem großen Aufwand oder teilweise gar nicht mehr zugänglich. Mit einer rasenden Geschwindigkeit sich aktualisierende Programmversionen und Betriebssysteme machen die eigenen Dateien zu fast ganz verschlüsselten, weil von aktueller Software nicht zu verstehenden Bit und Byte Schrotthaufen. Und wer kann schon garantieren, dass die digitalen Videoaufnahmen der Kinder noch in 15 oder 20 Jahren überhaupt abspielbar sind? Besonders bei dem Chaos der Video Codecs…

Design for All – niemand will ein Produkt für alte Menschen kaufen

Die westliche Welt wird alt. Schon im Jahr 2030 wird jeder Deutsche seinen 60. Geburtstag feiern. Produkte-Designer, Architekten und Dienstleister müssen diese Zielgruppe entdecken und begreifen. Doch die wenigsten Unternehmen reagieren auf den demographisch bedingten Wandel in der Gesellschaft. Und die wenigen Versuche, Telefone mit riesigen Tasten anzubieten floppten reihenweise, weil niemand als alt abgestempelt werden will. Auch der Testlauf eines Supermarktes für Alte in Österreich musste schließen, weil sich die älteren Menschen dort unwohl gefühlt haben und das Ganze als ein Ghetto für Senioren empfanden. Jung bleiben ja, aber alt werden die anderen. Die neue Strategie der Hersteller geht in die Richtung „Vital – bewahren was man hat“. Das war der Name der ersten Creme von Beiersdorf für reifere Haut. Viele 60-Jährige fühlen sich mindestens fünf Jahre jünger und wollen nicht als Senioren angesprochen werden. Bisher war die Wortmarke „Für Senioren“ ein Garant für den Flopp bei jedem Produktstart. Interessanterweise boomt genau diese Produktreihe bei den Herstellern von Haustierfutter. Das Bewusstsein ist da, dass man dem alternden Kater eine angepasste Ernährung geben sollte. Dagegen sich selbst einzugestehen, dass es die Zeit für den seniorengerechten Wohnungsumbau ist, ist viel schwieriger. So versucht ein Badezimmer-Hersteller die altersgerechte Dusche mit bodengleichem Einstieg auch als eine Designer-Dusche aus hochwertigen Materialien an den Markt zu bringen.

Das gute seniorengerechte Produkt-Design sollte immer eine Lösung für mehrere Generationen sein. Als alt abgestempelt, das will keiner. In der Architektur sollte man sensibler gegenüber vertikaler Erschließung der Häuser werden. Laut einer Umfrage, wünschten sich die meisten im Alter in einem Bungalow zu wohnen. Alle Wohnflächen auf einer Ebene. Was niemand will, ist eine voreingenommene Behandlung als Behinderter. Ein Haus, eine Wohnanlage und jedes Produkt braucht ein Design für lebenslange Nutzung.

Nintendo Wii Controller Design

Design der neuen Spielkonsole von Nintendo bietet eigentlich nichts bahnbrechendes. Doch der Controller eröffnet neue Dimensionen für das Gaming. Aus der minimalistischen Bewegung eines kleinen Joysticks wird eine echte 1:1 Bewegung des Körpers abverlangt. Es geht sogar soweit, dass man beim Boxspiel unter Vewendung von zwei Controllern gleichzeitig den Gegner schweißtreibend in die Knie zwingen muss.

Die Wii-Fernbedienung gleicht einer TV-Fernbedienung und ermöglicht jedem eine intuitive Steuerung durch physische Bewegung. Bis zu vier Wii-Fernbedienungen lassen sich kabellos über Bluetooth-Technologie mit der Konsole verbinden. Diese empfängt ihre Signale aus bis zu 10 Metern Entfernung. Sowohl die Wii-Fernbedienung als auch der Nunchuk verfügen über dreiachsige Bewegungssensoren. Die Wii-Fernbedienung enthält zusätzlich einen Lautsprecher, ein Rumble-Feature sowie einen Erweiterungsanschluss. Die Wii-Fernbedienung hat einen Netzschalter, ein Steuerkreuz sowie die Knöpfe A, B, Minus, Home, 1 und 2.

Wii Sports: Der innovative Titel, der für Nintendos neue Konsole Wii auf den Markt kommt, lässt sich schon gar nicht mehr als Sportsimulation bezeichnen. Denn simuliert wird hier laut Hersteller gar nichts! In allen Spielvarianten von Wii Sports bewegen sich die Gamer genauso, wie sie es beispielsweise auch auf dem Tennisplatz, der Golfanlage oder im Baseballstadion täten: Sie schwingen die Wii Remote wie ein Tennis-Racket, ein Golf-Eisen oder einen Baseballschläger und pfeffern Bälle durch den virtuellen Raum. In den Controller integrierte Bewegungssensoren machen dies möglich. Auf der Illustration kann man die Lösung sehen. Noch nie hat ein Sportspiel so viel Spieltiefe und Realismus geboten und war zugleich so einfach zu handhaben.

Nintendo Wii Design Motion Controller TECH

Handy Design Studie von BenQ

„Tastaturloses“ Design Konzept von einem Handy hat BenQ vorgestellt: die Oberflächen sind zwar vollkommen glatt, aber vollflächig als Touchscreen verwendet. Es erlaubt eine theoretisch unbegrenzte Anzahl an unterschiedlichen Bedienungselementen. Und natürlich auch die Möglichkeit, die gesamte zur Verfügung stehende Fläche als Monitor zur Darstellung von Fotos und Videos. Die Herausforderung an die Designer ist wohl, die Steuerung und das Switchen zwischen den Modi nicht zu kompliziert zu machen. Wenn sich das Konzept durchsetzt wäre evtl endlich ein einziges elektronisches Multifunktionsgerät möglich: ein Handy, mp3 Player, PDA, Fernbedienung, Diktiergerät, Kamera und, und und…

Natürlich ist die Idee nicht neu, doch scheitern bisher alle mit tausenden Funktionen überfrachteten Handys an der mangelhaften Steuerungsmöglichkeit. Durch die Flexibilität eines Touchscreens könnte der Weg zum ÜBER-Handy 🙂 endlich frei sein…

Design Touchscreen Handy

Websichere Schrift – Top websafe Fonts

Die richtige Schriftart ist für jede Webseite wichtig, denn sie beeinflußt die Art und Weise, wie die Leser eine Seite wahrnehmen (z.B. ernst und formal oder freundlich und lässig). Neben diesem gibt es auch wichtige praktische Kriterien. z.B. sind manche besser lesbar als andere, und einige sind mehr vorhanden.

Die Auswahlkriterien für die passende Schrift:
1. passt zum Charakter der Webseite
2. ist einfach auf einem Bildschirm zu lesen und
3. ist auf vielen Browsern und Betriebssystemen vorhanden

Websafe Fonts

Es gibt im Allgemeinen zwei Arten von Schriften: serif und san serif. Serif Schriften sind die, die feine Querlinien an den Extremitäten des Buchstaben haben. Sans serif („sans“, das französische Wort für „ohne“) sind Schriften, die nicht serifs haben. Die wohl am meisten verbreitete serif Schrift ist Times New Roman. Arial ist eine sans serif Schrift.

Kurze Bewertung der meist verbreiteten Web Schriften nach folgenden Kriterien: ihre Verbreitung, Lesbarkeit und Design:

Arial
Verbreitung: Sehr gut. Es ist vermutlich die am meisten verbreitetste sans serif Schrift. Sie ist die Standard-Schrift für Windows (Seit Version Windows 3.1)
Lesbarkeit auf dem Schirm: Nicht die schlechteste aber definitiv nicht die beste, besonders in den kleinen Größen, wenn es zu schmal und der Abstand zwischen den kleinen Buchstaben zu klein wird.
Design: Stromlinienförmig, moderner Look aber auch normal und langweilig.
Für Mac User: Ersatz zu Arial ist Helvetica.

Times New Roman:
Verbreitung: Sehr gut. Es ist vermutlich die am meisten verbreitetste serif Schrift. Es ist die Standard-Schrift für Webbrowser.
Lesbarkeit auf dem Monitor: Annehmbar für Schriftkegelgrößen von 12pt. und größer, aber schrecklich für kleinere Größen.
Design: Ernst, formal und altmodisch.

Verdana:
Verbreitung: Eine weit verbreitete serif Schrift, Verdana wurde zuerst mit Internet Explorer 3 ausgeliefert, als das rasante Wachstum des Internets eine neue Schrift verlangte, die einfach auf dem Bildschirm zu lesen war.
Lesbarkeit auf dem Monitor: Aussergewöhnlich gut. Die breiten Buchstaben sind auch in kleinsten Größen gut lesbar.
Design: Modern, freundlich und professionell.

Georgia:
Verbreitung: Gut. Es ist ein serif Schrift, die mit Internet Explorer 4 eingeführt wurde, wenn die Notwendigkeit nach einer serif Schrift mit viel besserer Lesbarkeit als Times New Roman offensichtlich wurde.
Lesbarkeit auf dem Monitor: Sehr gut. Es ist die beste serif Schrift für das online-Lesen, da sie speziell zu diesem Zweck gestaltet wurde.
Design: Modern, freundlich und professionell.

Schließlich erwähne ich noch kurz Courier New, sie ist eine serif Schrift, die auf den alten, mechanischen Schreibmaschinen populär war. Jetzt wird sie benutzt um Computercode darzustellen (wenn man HTML Code einer Webseite darstellen muss, passt diese Schrift wunderbar).

Aus der Usability Sicht ist der unangefochtene Sieger Verdana. Wenn man unbedingt eine serif Schrift benutzen muss, ist Georgia die beste Wahl. Arial bleibt eine gute Wahl für spezifische Teile vom Text, wie Schlagzeilen und Titel, wenn größere Schriftgrößen verwendet werden können.

Design Blog vom Designer

Offenlegung: Auf dieser Webseite finden Sie zum Teil Affiliate-Links. Das bedeutet, dass wir unter Umständen eine kleine Provision erhalten. Ohne zusätzliche Kosten für Sie. Damit helfen Sie uns weiterhin kostenlose Inhalte anzubieten. Vielen Dank!