//search something?


Touch ist Touch und Maus ist Maus! Timepicker UI re-visited

In letzter Zeit bin ich häufiger mal auf den Wunsch gestossen “…das muss so aussehen & funktionieren wie auf dem iPhone…”

Nun gut, denke ich mir, die Leute sind begeistert von der intuitiven Bedienbarkeit und dem Nutzungserlebnis und hätten dies gern auf ihre Webseite übertragen.
Problem: Das iPhone ist ein Touch Interface , die meisten Webseiten eher nicht. Sie werden mit Maus und /oder Tastaur – also über völlig andere Eingabegeräte- bedient.
Was auf dem iPhone mit den Fingern ganz intuitiv ist, kann sich am Bildschirm mit einer Maus oder der Tastatur als Eingabegerät als ganz schön kniffelig und nutzerunfreundlich herausstellen.
Mit der Maus interagiert der Nutzer doch schliesslich ganz anders als mit den Händen.

Gerade kürzlich hatte ich eine interessante Diskussion zu dem Thema – es ging um einen Timepicker. Dieser soll so aussehen wie auf dem iPhone.

(weiterlesen…)

Diese Icons verlinken auf Bookmark Dienste bei denen Nutzer neue Inhalte finden und mit anderen teilen können.
  • del.icio.us
  • MisterWong
  • Bloglines
  • Facebook
  • Technorati

Design Links April 2010

linluv

Tech
e-commerce at its best, Magento kam sah & siegte, zumindest bei den meisten
+++Getting started: Magento for Designers Part 1
+++Magento for Designers Part 2

Einführung zu HTML 5
+++Introduction to HTML5

Man kennt das ja, – sauber anfangen zu schreiben, alles ist schön strukturiert und gegen Ende sieht’s dann aus wie…naja. – Einmal CSS aufräumen, bitte:
+++CSS Cleanup
+++Prime CSS erzeugt aus deinen HTML Klassen und IDs ein Starter Stylesheet

UX & Design
+++The Characteristics of successful User Interfaces
+++Designing with the Mind in Mind

SXSW Panel Links (thx @missmoss for sharing!)
+++Get Stoked On Web Typography Wrap Up
+++Beauty in web design Part 1, 2 und 3

Work & Process
+++Pain Free Design Sign Off (gibt es auch als podcast)
+++Reasons Designers Fail to Remain Motivated, and 5 Ways to Fight Back

Diese Icons verlinken auf Bookmark Dienste bei denen Nutzer neue Inhalte finden und mit anderen teilen können.
  • del.icio.us
  • MisterWong
  • Bloglines
  • Facebook
  • Technorati

Wireframes Artikel

webstandards-mag
Zum Download und lesen gibt es hier meinen Artikel über Wireframes & Prototyping aus dem Webstandardsmagazin Ausgabe 03/2009.
Viel Spass bei der Lektüre. :)

+++Wireframes und Prototyping im Interfacedesign – Webstandards Mag 03/09

Diese Icons verlinken auf Bookmark Dienste bei denen Nutzer neue Inhalte finden und mit anderen teilen können.
  • del.icio.us
  • MisterWong
  • Bloglines
  • Facebook
  • Technorati

Hot, Hotter, Hotgloo -Online Wireframing Tool

How to HotGloo Ad from HotGloo on Vimeo.

HotGloo ist ein wirklich kleines feines Online-Tool zum Erstellen von Wireframes und klickbaren Prototypen.
Man kann Sitemaps anlegen, Master Templates erstellen, klickbare Links erstellen, eigene Widgets hinzufügen, zusammen daran arbeiten und auch einen PDF Export gibt es.
Zur Zeit ist HotGloo noch in der Beta & daher frei. :)

HotGloo-Blog
HotGloo Tutorials& How-to’s auf Vimeo

Diese Icons verlinken auf Bookmark Dienste bei denen Nutzer neue Inhalte finden und mit anderen teilen können.
  • del.icio.us
  • MisterWong
  • Bloglines
  • Facebook
  • Technorati

Was Webdesigner vom Industrial Design lernen können

bubblechair1
Diese Sache beschäftigt mich schon etwas länger.:
Nochmals angeregt durch einen Post vom UX Magazine, welcher auf das phantastische Portfolio des Industrial Designers Damjan Stanković verweist, finde ich das wir UI Designer vom klassischen Industrial Design nur dazulernen können & sollten: Denn sind wir Interfacedesigner/Web-UX Pros nicht sowieso viel viel näher am Industrial Design als am Grafikdesign?

(weiterlesen…)

Diese Icons verlinken auf Bookmark Dienste bei denen Nutzer neue Inhalte finden und mit anderen teilen können.
  • del.icio.us
  • MisterWong
  • Bloglines
  • Facebook
  • Technorati

Nutzerfreundliche Formular-User-Interaktion

form
Formulare sind wichtig. Man findet sie bei Logins, in Registrierungsprozessen, beim Bestellen in Onlineshops und zur simplen Kontaktaufnahme. Und es gibt kaum etwas nervigeres, als das zeitintensive Ausfüllen eines Formulars, um dann hinterher – nach getaner Arbeit festzustellen- das der Name keine Sonderzeichen beinhalten sollte, das Passwort zu kurz ist, und man aus Versehen die E-Mailadresse irgendwie falsch eingetippt hat, und man den ganzen Schmodder nochmals wiederholen muss. Schlimmstenfalls sind ALLE Datensätze weg. Ja das gibt es auch heute noch.
(weiterlesen…)

Diese Icons verlinken auf Bookmark Dienste bei denen Nutzer neue Inhalte finden und mit anderen teilen können.
  • del.icio.us
  • MisterWong
  • Bloglines
  • Facebook
  • Technorati

CSS Gradients-Generator

grad

Webkit unterstützt ja bislang als einziger Browser die CSS 3 Eigenschaft “Gradient” // Property: -webkit-gradient (Farbverläufe linear & radial)
So kann man hübsche Buttons also in Zukunft ganz ohne Grafiken basteln – wie gesagt funktioniert das ganze leider ausschliesslich ab Safari 4 – also bei der Anwendung der Eigenschaft bitte niemals vergessen einen Fallback mit einer Hintergrundfarbe für die Browser zu schreiben, die das nicht unterstützen.

Wer nun auf jeden Fall per CSS seine Farbverläufe gestalten möchte, dem sei der Gradient Generator von den Westciv Tools empfohlen. Einfach die gewünschten Farbwerte & Einstellungen wählen, und den CSS-Code generieren lassen.

Ich persönlich finde ja ein 1px breites Hintergrundbild, welches wenigstens browserübergreifend funktioniert, momentan immer noch die bessere Wahl – trotzdem ein nettes Tool, welches man sich ja mal vormerken kann und mit rumspielen kann ;)

http://webkit.org/blog/175/introducing-css-gradients/
http://westciv.com/tools/gradients/

Diese Icons verlinken auf Bookmark Dienste bei denen Nutzer neue Inhalte finden und mit anderen teilen können.
  • del.icio.us
  • MisterWong
  • Bloglines
  • Facebook
  • Technorati

Links oder rechts? Magentos Registrierungs Usability

magento-register
Heute eine kleine Umfrage…. Bei Magento, dem derzeit wohl beliebtesten Open-Source Shopsystem, stolpere ich immer wieder, wenn ich das Frontend gestalte, über diese Hürde:
(weiterlesen…)

Diese Icons verlinken auf Bookmark Dienste bei denen Nutzer neue Inhalte finden und mit anderen teilen können.
  • del.icio.us
  • MisterWong
  • Bloglines
  • Facebook
  • Technorati

7 gute Gründe für Wireframes & Prototyping im Interfacedesign

balsamic_mockups1

„Design is a Process – much more than making things look pretty“

Angeregt durch verschiedene Diskussionen, ob Wireframes zum Gestaltungsprozess einer Webseite denn von Nöten sind, oder eher als Zeitverschwendung angesehen werden und man lieber sofort einen komplett fertigen Gestaltungsvorschlag mit Farben, Schriftarten und Blümchen abliefert, habe ich mir mal meine Gedanken dazu notiert.
(weiterlesen…)

Diese Icons verlinken auf Bookmark Dienste bei denen Nutzer neue Inhalte finden und mit anderen teilen können.
  • del.icio.us
  • MisterWong
  • Bloglines
  • Facebook
  • Technorati

Cross Browser Testing mit Adobe Browserlabs

adobe-browserlabs

Neu ist die Idee ja nicht, das Webentwickler Webseiten in verschiedenen Browsern & unterschiedl. Betriebssystemen testen. Tools dafür gibt es einige: z.B. Browsercamp.com
Xenocode Browser Sandbox ( nur f. windows ), & IE Tester
(weiterlesen…)

Diese Icons verlinken auf Bookmark Dienste bei denen Nutzer neue Inhalte finden und mit anderen teilen können.
  • del.icio.us
  • MisterWong
  • Bloglines
  • Facebook
  • Technorati

CSS Color Replacement–Tool

css-color-editor

Intuitiver als die übliche „Search & Replace“ Methode im CSS Editor finde ich den „Replace CSS Colors–Editor“.
Ein nettes online Tool: Du lädst einfach das alte CSS File hoch, ersetzt das alte Farbschema durch ein neues deiner Wahl, und bekommst deinen neuen „Anstrich“ zum download angeboten. Perfekt um schnell mal einen Styleswitcher für die Webseite zu basteln.

http://css-color-replace.orca-multimedia.de

Diese Icons verlinken auf Bookmark Dienste bei denen Nutzer neue Inhalte finden und mit anderen teilen können.
  • del.icio.us
  • MisterWong
  • Bloglines
  • Facebook
  • Technorati

Usability Testing mit Silverback am Mac

1

Neulich bin auf meiner Suche nach guten Webdevelopment Tools für den Mac auf „Silverback“ gestossen.

Silverback ist ein low-budget Usability Testing Tool,  d.h. es testet die Benutzerfreundlichkeit einer Webseite, indem es die Mausaktivitäten und Augenbewegungen sowie die spachlichen Aussagen des Benutzers in Echtzeit  mit der integrierten iSight Kamera aufzeichnet, und den fertigen Film als .mov abspeichert – sodass man diesen hinterher auswerten kann.

(weiterlesen…)

Diese Icons verlinken auf Bookmark Dienste bei denen Nutzer neue Inhalte finden und mit anderen teilen können.
  • del.icio.us
  • MisterWong
  • Bloglines
  • Facebook
  • Technorati

„Machen Sie das mal schön!“ – Von Usability und anderen Ausserirdischen

Das kann ich auch!

Das es vielen freiberuflichen Webdesignern/Webworkern, gerade den Newbies unter uns, so schwer fällt mit Kunden erfolgreich zu kommunizieren liegt meines Erachtens daran, das das Web ein für jedermann zugängliches Medium ist.

(weiterlesen…)

Diese Icons verlinken auf Bookmark Dienste bei denen Nutzer neue Inhalte finden und mit anderen teilen können.
  • del.icio.us
  • MisterWong
  • Bloglines
  • Facebook
  • Technorati

Der Footer – Das Stiefkind der Webseiten?

Die meisten Webdesigner legen immer sehr viel Wert auf einen toll gestalteten Header (Kopfbereich) einer Webseite, aber was ist mit dem Footer (folglich der „Fuß“/ das Seitenende) der Seite? Frei nach dem Motto oben hui, unten pfui – da schaut eh niemand genau hin – wird dieses Element der Webseite oft genug sträflichst vernachlässigt.

(weiterlesen…)

Diese Icons verlinken auf Bookmark Dienste bei denen Nutzer neue Inhalte finden und mit anderen teilen können.
  • del.icio.us
  • MisterWong
  • Bloglines
  • Facebook
  • Technorati

CSS Sprites / Single-Image Rollover Effekte

sprites

An sich überhaupt nicht neu, aber viele kennen diese bestimmte Vorgehensweise zum Erzeugen eines grafischen MouseOver-Effektes doch noch nicht und arbeiten immer noch mit verschiedenen Background-Images oder gar mit JavaScript.

(weiterlesen…)

Diese Icons verlinken auf Bookmark Dienste bei denen Nutzer neue Inhalte finden und mit anderen teilen können.
  • del.icio.us
  • MisterWong
  • Bloglines
  • Facebook
  • Technorati