Zur Agentur | UX Showcase

0 Kommentare | 17. November 2016, Oliver Schmid

UX Prototyp für Kreditkartenzahlung

UX prototyp und Interaction Design für Kreditkartenzahlung

Für Kreditkartenzahlung in einer App hat die Agentur Webgarten ein Benutzerfreundliches Interaction Design und einen UX Prototypen entwickelt. Ziel war es, bei Zahlungen die Abbruchquote massiv zu senken. Unsere Gedanken dazu:

  • Keine unnötigen Abfragen wie „Halter Name“ oder „Kartentyp“
  • Automatische Erkennung des Kartentyps sowie Anzeige des passenden Logos
  • Clear field Buttons
  • Echtzeitvalidierung
  • Die aktiven Felder werden hervorgehoben
  • Dezimale Tastatur wird verwendet
  • Option zum Scannen der Karte
  • Secure Icon vermittelt Vertrauen
  • Selbstaktivierender Button
  • Frage ob die Kreditkartendaten für den nächsten Kauf gespeichert werden sollen nach der Bezalung um unnötige Ablenkung während dem Zahlvorgang zu vermeiden

Hier gibt es mehr UX Design Showcases der Agentur Webgarten

0 Kommentare | 27. Mai 2015, Oliver Schmid

Neue Bezeichnungen für den Beruf Webdesigner

Das Arbeitsgebiet des Webdesigners hat sich in den letzten Jahren stark erweitert. Neben dem klassischen Desktop werden für zahlreiche neue Geräte User Interfaces entwickelt. Dazu zählen Tablets, Smartphones, Fernseher und mittlerweile auch Uhren. Entsprechend haben sich innerhalb des eigentlichen Webdesign Bereichs neue Bezeichnungen und Berufe etabliert. Treiber dieser Entwicklung waren vor allem grosse Firmen wie Apple und Google, welche für die einzelnen Teilbereiche früh spezialisierte Designer beschäftigt haben und mit ihren Applikationen auf mobilen Geräten den Begriff User Experience (UX) geprägt haben. Heute sind vor allem folgende Begriffe in Verwendung:

UX Designer

Dies umfasst den ganzen Bereich, also das ganze User Experience einer Anwendung. Es beinhaltet den Usability Bereich, User Research, UCD Analyse, Usability Testing, UI Design und Interaction Design. Wobei für die beiden letzten Begriffe meist nachfolgende Spezialisten eingesetzt werden. Der UX Designer arbeitet mir Mockup Tools, Organigrammen, FlipCharts, Bleistift usw.

Interaction Designer

In der Schweiz taucht dieser Begriff oft als Nachfolger für den klassischen Webdesigner auf. Das eigentliche Interaction Design ist dann allerdings lediglich ein sehr kleiner Teil des Aufgabengebiets. Die Hauptaufgabe besteht meist aus 90% UI Design. Gemäss Stellenbeschreibungen von Apple ist jedoch der Interaction Designer mit dem Motion Designer verwandt und arbeitet auch mit ähnlichen Tools um Prototypen zu erstellen. Er gestaltet Interaktionen, Übergänge, Animationen usw.. Ein Beispiel ist unser Prototyp für eine App. Der Interaction Designer arbeitet mit Programmen wie Pixate, Orgami, Motion usw..

UI Designer

Die meiste Zeit verbringen viele Webdesigner / Interaction Designer mit User Interface Design (UI Design). Trotzdem taucht der Begriff UI Designer bei uns relativ selten auf. Der UI Designer gestaltet die Benutzeroberfläche einer Website oder App. Er arbeitet mit Programmen wie Sketch, Photoshop oder Illustrator.

GUI oder UI? Früher wurde häufig die Abkürzung GUI verwendet, für Graphical User Interface. Während heute einfach nur von UI für User Interface gesprochen wird. Die genauen Gründe sind unklar. Möglicherweise weil UI breiter gefasst ist. Heute gehören zu einem User Interface nicht nur die grafische Darstellung, sondern auch Sound und Haptik (Apple Watch).

3 Kommentare | 22. März 2011, Oliver Schmid

Bereit für HTML5?

Das HTML5 Logo

Es ist soweit, ab sofort setzt Webgarten alle Kundenprojekte mit HTML5 um, sofern nicht explizit etwas anderes gewünscht wird.
Offiziell empfiehlt das W3C zwar noch XHTML, allerdings gibt es keinen wirklichen Grund dafür. Der W3C Validator kann bereits sehr gut mit HTML5 umgehen. Als Vertrauensbeweis habe ich die eigene Website bereits mit HTML5 umgesetzt. Ein weiterer Vertrauensbeweis erbringt niemand geringerer als Google. Hier wird HTML5 schon länger eingesetzt, was ein Blick in den Quellcode von Google beweist. Und da Google selber HTML5 verwendet dürfte das Unternehmen auch nicht abgeneigt sein, HTML5 Dokumente gut positioniert im Suchresultat anzuzeigen. Die semantische Auszeichnung könnte Google bei der Einschätzung sogar helfen.

Anwender zeitgemässer Browser sollen von neuen Funktionen profitieren, sofern diese bei alten Browsern keine Probleme verursachen.

So sieht ein HTML5 Dokument aus:

<!DOCTYPE html>
<html>
<head>
<meta charset="urf-8">
<h1>Ich bin supersexy HTML5 Code
<ul>
<li>Und verzichte auf unnötige Dinge
<li>Weniger ist mehr!

Die End-Tags braucht es nicht mehr und beim body kann sogar das Start-Tag weggelassen werden.

Die Vorteile von HTML5

  • Schlanker Code und schnellere Ladezeiten
  • Semantische Auszeichnung (Neue Selektoren wie: nav, head, aside, menu, article usw.)
  • Zahlreiche neue Funktionen, welche teilweise schon genutzt werden können
  • Für die Zukunft gerüstet, es braucht künftig keine Umstellung mehr da HTML5 fliessend wächst

Lesetipp zu HTML5

Das HTML5 Buch kann ich empfehlen. Es hat mir als Vorbereitung für das Redesign von Webgarten gedient und mich definitv von HTML5 überzeugt.

Nachtrag: HTML5 versus XHTML

6 Kommentare | 18. März 2011, Oliver Schmid

Speed Optimierung für Websites

Leopard

Google hat längst bestätigt, dass die Geschwindigkeit einer Webseite nun auch ein Faktor für die Platzierung einer Website im Suchergebnis ist. Zudem hat Google eine eigene Firefox Erweiterung (Google Page Speed) für Firebug herausgegeben, welche den Programmierer bei der Optimierung helfen soll. Gut möglich, dass dieser Faktor noch an Einfluss gewinnen wird. Gemäss dem Chef Technicker der Firma Blaze Software sei Google bezüglich Geschwindigkeit absolut fanatisch.
Auch wenn der Geschwindigkeitsunterschied vielleicht nicht direkt bemerkt wird, so bleibt einem eine schnelle Website unbewusst doch in besserer Erinnerung und man besucht sie gerne wieder. Technisch gesehen braucht eine optimierte Website weniger Server Ressourcen und verursacht weniger Traffic.

Meine Erfahrung mit Speed Optimierung?

Kürzlich habe ich die Website der Webagentur Webgarten (ruhig mal testen) neu erstellt. Da Design und Inhalt übernommen wurden konnte ich mich voll auf einen sauberen, zeitgemässen und speed optimierten Code konzentrieren. Danach war die Website 2x schneller beim ersten Aufruf und 20x schneller beim zweiten Aufruf (gemessen mit PageTest). Am Server wurde nichts verändert. Hier meine Tipps:

  1. Geschwindigkeit hängt nicht vom CMS ab. Wer eine wirklich schnelle Website will muss eine Cache Erweiterung verwenden. Diese produziert regelmässig ein statisches HTML File aller Seiten. Dieses wird dann beim Aufruf der Webseite angezeigt. Dadurch wird das langsame „on the fly zusammenbauen“ der Website verhindert. Die Website wird massiv schneller und benötigt weniger Rechnerleistung.
  2. Progressive Enhancement: Nutzer neuer Browser sollen von neuen Funktionen profitieren können solange diese auf alten Browsern keine funktionalen Probleme verursachen. Ich verwende HTML5, welches einige kürzere Tags zulässt.
  3. Um unnötige Requests zu vermeiden verwende nur je ein JavaScript und CSS File. Im HTML Code sollen alle Kommentare und Umbrüche entfernt werden. Zudem sollte man das CSS komprimieren.
  4. JavaScript und CSS sollten auf der Seite nur eingebunden werden, wenn diese wirklich benötigt werden. Es macht keinen Sinn, wegen eines Formulars die ganzen CSS Anweisungen auf allen Seiten zu laden. Auch ein JS Framework wie jQuery muss nur dann geladen werden, wenn es auch gebraucht wird!
  5. Optimierung mit Google Page Speed. Einfach die Seite mit dem Plugin testen und den Anweisungen folgen. Hier kann einiger Aufwand anfallen. Alle Punkte müssen am Ende grün sein!
  6. Testen mit PageTest
  7. Überwachen mit Google Webmasters Tools

Werden die Kunden für all den Aufwand bezahlen?

Bei meiner Site habe ich wohl etwa 2 Tage für Speed Optimierung eingesetzt. Bei komplexeren Projekten kann der Aufwand sogar noch wesentlich grösser werden. Insbesondere die Cache Erweiterung kann in Kombination mit anderen Erweiterungen Probleme verursachen.
Oft findet der Kunde seine eigene Website bereits schnell, denn diese ist intern längst gecached oder die Website liegt sogar auf einem Server innerhalb des eigenen Firmennetzwerk.
Soll man den Aufwand trotzdem betreiben? Ja, ich denke man sollte es dem Kunden als Option offerieren. Will er über die Website Umsatz generieren wird er wohl künftig darum nicht herumkommen. Ist die Website nur da um die Adresse nachzuschlagen benötigt er sicher keine Speed Optimierung. Was denkt ihr darüber?

Es ist wie wenn ein Formel1 Fahrer vor dem Rennen nochmals das letzte Staubkorn entfernt. Es mag überflüssig erscheinen, aber es kann am Ende zwischen Sieg und Niederlage entscheiden.

10 Kommentare | 11. Mai 2010, Oliver Schmid

Die besten Zitate für Webdesigner

Zitate für Webdesigner

Die Bedeutung von Zitaten

Die Bedeutung einzelner Zitate wurde mir während des Schreibens dieses Blogs bewusst. Zitate beschreiben einen komplexen Sachverhalt auf einfache verständliche Weise und bleiben in Erinnerung.

Mit wenigen Worten bringen es gute Zitate exakt auf den Punkt.

Neue Website mit Zitaten für Webdesigner

Um diese wertvollen Aussagen angemessen zu präsentieren habe ich nun eine eigene Website (Offline) erstellt. Wichtig war mir dass das Zitat im Vordergrund steht und als einzelne Seite per Link versendet werden kann. Keine Elemente sollten das Zitat stören und von ihm ablenken. Dazu habe ich den Titel und den Autor des Zitats beim Aufruf der Site verborgen. Erst nach einer Mausbewegung erscheinen diese dezent. Um auf einen „Weiter“ Knopf verzichten zu können habe ich einen Tooltip eingesetzt sowie den Link auf die ganze Fläche gelegt. Dabei kam das Javascript Framework RightsJS zum Einsatz.

Habe ich wichtige Zitate vergessen oder habt ihr eigene Zitate? Ich freue mich über eure Vorschläge.

Nachtrag: Mit dem gleichen Template habe ich eine Sammlung von Warren Buffett Zitaten aufgebaut.

8 Kommentare | 21. April 2010, Oliver Schmid

Die Zauberformel für Designer

Das Buch Visual Display of Quantitiv Information von Edward Tufte ist definitv ein Muss für jeden Webdesigner und Programmierer. Es bestätigt meine Überzeugung, dass der Design Grundsatz „Form Follows Function“ zu Schönheit führt. Edward Tufte hat die Zauberformel (data-ink ratio) für Designer erfunden. Für den intelligenten Designer durchaus zu vergleichen mit der Relativitätstheorie von Albert Einstein.

Zauberformel für Designer: Data-ink ratio

Der „data-ink ratio“ bei Chart Grafiken sollte möglichst hoch sein. Also das Verhältnis von Informationen welche Daten enthalten (data-ink) zu Informationen ohne Daten (data-junk). Erstrebenswert ist ein möglichst grosser Anteil an data-ink. Das ist die Fläche die sich verändert wenn die Daten sich ändern, es ist die nicht entfernbare Core Grafik.

Alle Elemente ohne Daten nehmen den Daten die Aufmerksamkeit. Sie lenken ab wie Tufte in zahlreichen Beispielen aufzeigt.

Ein weiteres Beispiel sah ich in einer Präsentation von Ryan Singer, ich habe es hier nachgestellt:

Einige Statements aus dem Buch von Tufte:

  • Graphical excellence is that which gives to the viewer the greatest number of ideas in the shortest time with the least ink in the smallest space
  • Above all else show the data
  • Maximize the data-ink ratio
  • Erease non-data-ink and redundant data-ink
  • Induce the viewer to think about the substance rather than about methodology, graphic design, the technology of graphic production, or something else
  • As the art bureaucracy grows, style replace content
Every bit of ink on a graphic requires a reason. And nearly always that reason should be that the ink presents new information.

Redesign einer Chart Grafik

  • Hier haben wir eine durchschnittliche Chart Grafik,
    so wie wir diese häufig antreffen.

    Redesign einer schlechten Chart Grafik

  • Die Box kann entfernt werden.

    Chart Grafik, etwas besser, aber noch nicht gut

  • Die vertikale Achse kann entfernt werden.

    Chart Grafik, noch etwas besser

  • Sogar ein Teil der Balken kann entfernt werden,
    um eine weisse Linie erscheinen zu lassen.

    Redesign Chart, jetzt schon viel besser

  • Nun können auch die schwarzen Markierungen weggelassen werden.
    Die Zahlen schieben wir näher an die Balken.

    Sehr gute Chart Grafik

  • Die horizontale Line kann auch weggelassen werden,
    da das Ende der Balken den Abschluss markieren.

    Die Perfekte Chart Grafik

Der content-pixel ratio für Webdesigner

Das Buch wurde vor 35 Jahren geschrieben. Können Webdesigner daraus etwas lernen? Ja, sehr viel sogar! Die Grundregeln sind noch immer gültig, vielleicht mehr denn je.

Für uns Webdesigner gilt aber der „content-pixel ratio“. Ink wurde zu Pixeln und Daten zu Content. Somit ist es also erstrebenswert, wenn die Fläche an Inhalt möglichst wenig „inhaltsloser“ Fläche (Dekorations Elemente) gegenüber steht. Denn jedes unnötige Element nimmt dem Inhalt die Aufmerksamkeit. Für uns heisst die Formel also:

Zauberformel für Webdesigner: Content-pixel ratio

Folgende Webdesig Regeln können wir daraus ableiten:

  • Jeder Pixel braucht einen Grund um am entsprechenden Ort zu sein. Und dieser Grund sollte immer die Darstellung neuer Information sein.
  • Lösche alle unnötigen Elemente
  • Es gibt keine gleich wichtigen Elemente. Weniger wichtige Elemente müssen schwächer dargestellt oder entfernt werden.
  • Die Inhalte müssen bereits vor der Erstellung des Designvorschlages existieren
  • Schönheit entsteht durch das attraktive Verhältnis verschieden langer Abstände. Man beachte den Goldenen Schnitt.
  • Ist man mit den Design nicht zufrieden beginnt man besser neu als dass man unnötige Dekorationselemente zufügt
  • Mache das Design für den Nutzer, nicht zu deiner Selbstverwirklichung
  • Verzichte auf unnötige Verpackungen (Boxen, Container)
Gestalte den Inhalt und nicht das „Rund um den Inhalt“

Praktische Anwendung im Webdesign Bereich

Für die Website meiner eigenen Agentur konnte ich diese Philosphy 2005 konsequent umsetzen. Technisch zwar bereits veraltet (Table Layout), das Design jedoch zeitlos und immer noch aktuell und ich sehe keinen Grund daran etwas zu ändern. Man beachte den Data-Pixel ratio auf den Subseiten wie dieser (Offline).

Leider ist solch eine radikale Umsetzung bei Kundenprojekten selten möglich. Der Kunde denkt man spare mit einem minimalen Design Aufwand oder man könne mit Rahmen, Schatten und Boxen den schwachen Inhalt kaschieren. In 90% der Fälle liegt der Inhalt aber noch gar nicht vor. Statt auf den Inhalt konzentriert man sich dann auf das „Rund um den Inhalt“.

Weitere Informationen

Bitte beachte auch meinen Blogbeitrag zur Typografie. Und wer das Buch von Edward Tufte jetzt noch immer nicht bestellt hat ist selber Schuld.

Folge uns per Twitter | Facebook Fan werden
© 2016 by Webgarten GmbH, Haldenstrasse 5, CH - 6340 Baar, Schweiz, +41 (0)41 500 07 67