Category Archives: Wireframes

High Fidelity Wireframes

Erinnert ihr euch an unsere Diskussion “Wie viel Design soll ein Wireframe zeigen”? Stephen Turbeck meint: viel mehr, als wir Projekteingeborenen meinen.

Insbesondere, wenn es ans Testen geht, behindert abteilungsbezogene Blindheit den Erfolg. Damit Probanden denken, dass sie verstehen, was wir Entwickler meinen, empfiehlt er folgendes Maß an High Fidelity:

  • Make a header bar with the company branding. It should look like the site they are used to, showing the company logo.
  • Use color. Hyperlink color is a basic requirement.
  • Put a web browser frame around the image (or at least the first page).
  • Use real form elements, not drawn replicas of them.
  • Create a template or library of real form elements (feel free to share yours in the comments below).
  • Avoid lorem ipsum. Instead, use: “Descriptive text that will explain this product.” to avoid confusion about greeked text.
  • Use accurately sized fonts (this also keeps you honest about what can fit on the page).
  • Use real detail such as products names and data. Especially on transactional tools with expert users, users care about what they are reading and recognize and use data like account numbers. It may not be important to us, but they have expectations that need to be met

Trivial, nicht? Aber wahr. Natürlich können wir auch Clikdummies basteln. Als nächstes gewiss.