//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

User Experience Design for Non-Designers

Sehr schöne Ausführungen zum Designprozess von interaktiven Produkten von Shawn Konopinsky

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

Keynote Kung-Fu: How to wireframe like a ninja

Love this. So how do YOU wireframe?

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

Colorscheme Tools für Designer

Farben sind ja nicht ganz unwichtige Informationsträger. Sei es darum sich einfach nur mal inspirieren zu lassen, oder die passenden Kombinationen zu einer vorgegebenen zu Farbe finden - bei der Gestaltung immer ganz nützlich: diverse Colorschemetools & Pickers, die helfen, Farbharmonien herzustellen.

Adobe Kuler -
kuler
Der Klassiker, lässt eigentlich keine Wünsche offen, man kann eigene Farbschemen erstellen, nach versch. Kriterien wie z.B . Komplementärfarben, oder Abstufungen. Exportfunktion für die Paletten in Illustrator und Photoshop vorhanden.
Mir gefällt an Kuler, das es hauptsächlich mit Emotionen arbeitet, man kann also nach Schlagwörtern suchen wie z.B “early morning” - super zur Inspiration.
Gibt es übrigens auch als Desktop AIR Applikation.

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

What’s behind? Zielorientiertes Denken im UI Design.

Kurzer Einblick in UID Gedankenprozesse und mein Senf dazu.

Wenn ich z.B eine für eine Software einen Interaktionsprozess / Designlösung gestalten soll, muss ich wissen, welch übergeordneter Workflow dahinter steht.

Mir reicht es also nicht , die puren Tasks/Aufgaben zu kennen, (User X gibt hier etwas ein dann soll dies und jenes passieren und er soll dahin kommen…) sondern ich muss eigentlich wissen, aus welchen Gründen User x das & das eingibt und was im Großen und Ganzen dahintersteckt, ich muss diesen mir erstmal völlig fremden & neuen Workflow (mitunter auch einen Ablauf in einer Firma) komplett verstehen und verinnerlichen sowie durchspielen:
Warum tut User X das? Wie sind die internen Zusammenhänge? Wer hat noch 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

User Experience Best Practices.

Nick Finck über UX Basics & Best Practices.

via IA TV

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

It’s all about Research

DIY User Research & Design Research For Everyday Projects

Zwei Präsentationen von Leisa Reichelt, die wirklich sehr informativ sind, wie ich finde :)
Zur User-Research…Wie betreibt ihr das so? Gar nicht? Wenn’s passt: Familie/Freunde/Kollegen? Event.- falls vorhanden - Guerilla-mässig bei den Hotlines der Unternehmen nachhaken, welche Anliegen so die “beliebtesten” sind? Oder gar richtig professionell?
Meine Erfahrung im Real-Alltag ist, das das Budget/Zeit (auch trotz Aufklärung) leider für sowas oft gar nicht da ist. Sinn machen würde es nur zu oft, da die Änderungen die nach dem Launch manchmal noch durchgeführt werden sollen, teilweise fast vorhersehbar sind/waren.

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

Interaction Design Process

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

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?

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