//search something?


The 4 questions to ask in a cognitive walkthrough

Super Artikel über Cognitive Walkthroughs auf Userfocus. Cognitive Walkthroughs sind eine bekannte Methode, um Interaktionsprobleme in einem frühen Stadium des Designprozesses eines Interfaces herauszufinden.

“The cognitive walkthrough is a formalised way of imagining people’s thoughts and actions when they use an interface for the first time. Walkthroughs identify problems that new users will have when they first use an interface. You select one of the tasks that the design is intended to support and then you step through the task, action by action, seeing if you can identify any problems with the interface.”

http://www.userfocus.co.uk/articles/cogwalk.html

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

Mentale Modelle und Designprozesse im User Centered Design

“If we want users to like our software we should design it to behave like a likeable person: respectful, generous and helpful.” (Alan Cooper)

Das Web entwickelt sich immer mehr zur Plattform für sogenannte Apps - webbasierte Anwendungen (auch bekannt als SaaS = Software as a Service), die der Software ähneln, die wir auch tagtäglich auf unserem Computer benutzen.
Der einzige Unterschied besteht also darin, das diese Anwendungen in einer browser-basierten Umgebung genutzt werden, und oder mit Sprachen geschrieben werden, die jeder Browser versteht (z.B. HTML in Kombination mit JavaScript).
Dies hat den Vorteil, das diese Anwendungen plattformübergreifend genutzt werden können - also nicht speziell für verschiedene Betriebssysteme entwickelt werden müssen und keinen Platz auf Festplatte verbrauchen.

Webbasierte Anwendungen wie Doodle, die z.B dazu dienen, um Termine mit mehreren Teilnehmern zu koordinieren, Intranets oder Wikis, die dem Wissensaustausch innerhalb von Unternehmen oder Organisationen dienen und die eventuell noch spezielle, auf die Bedürfnisse der Nutzer zugeschnittene Funktionen beinhalten, online Flugbuchungssysteme und viele andere webbasierte Anwendungen bedürfen einer von Grund auf völlig anderen Planung und einem anderen Designprozess als beispielsweise herkömmliche B2B Webseiten, die z.B ausschliesslich der Präsentation eines Unternehmens dienen.

Es geht darum, diese webbasierten Anwendungen sehr nutzerfreundlich zu gestalten und den Nutzer/den Menschen in das Zentrum der Anwendung zu stellen.
Diesen speziellen, auf den Nutzer zugeschnittenen Designprozess dahinter, nennt man User-Centered Design (UCD).

Interaktion = Kommunikation!
…und was haben mentale Modelle jetzt damit zu tun?

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

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.

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

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.

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:

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.

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.

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