Podcast – Webdesign Trends 2013

Neulich war ich zu Gast in der „Kreativwirtschaft“ und hatte eine sehr nette Plauderstunde mit Kollegen aus der gleichnamigen Branche zu den Webdesign Trends, welche uns 2013 in Atem halten werden. Thematisch ging es Gastwirt Jan Jursa hat in seinem neuen Podcast (http://abendsinderkreativwirtschaft.de) nicht so sehr um Kaffeelesen und hellseherische Fähigkeiten, sondern eher um den Austausch im Geiste der Frage „was haltet ihr eigentlich davon?“. Thematisch haben wir uns quer durch die Themenwelten des Vertical Scrolling, Parallax Scrolling, ISO 9241 und BYOD (Bring Your Own Device) diskutiert. Und wenn ihr wissen wollt, was Cover Flow und Tomb Raider gemeinsam haben: hört mal rein 😉

Podcastseite Abendsinderkreativwirtschaft oder auf iTunes abonnieren

Die weiteren Gäste waren: Diana Frank (@ffm_ux), Arno Bublitz (@abublitz) und Stephen Köver (@sk_ia).

Ich freu mich auf die nächste Folge!

UI-Stencils Schablone im praktischen Gebrauch

Die UI-Stencils bestehen aus aus einer Schablone aus Aluminium. Für Freunde der User Experience schon eine verlockende Sache: Man kann mit Papier arbeiten und trotzdem auf bewährte UI-Elemente zurückgreifen. Aber bringt das wirklich den Vorteil? Zugegeben: Das Mockup auf der Herstellerseite sieht klasse aus: es hat eine sehr kreative und gleichzeitig eine außerordentlich „stimmige“ Anmutung. Woher kommt das? Da hilft nur ein Selbstversuch 😉

Ich setze seit einigen Jahren auf Paper Prototypen und Sketch-boards. Bisher habe ich die Vorteile immer in folgenden Punkten gesehen:

• Anforderungen an die Oberfläche können unabhängig von Software-Vorgaben skizziert werden
• Der Skalierungsfaktor und damit einhergehend der Abstraktionsgrad der UI kann frei gewählt werden
• Das Erstellen der Zeichnungen ist eine sehr haptische Offline-Erfahrung

Ausgehend vom letzten Punkt erschien mir auch folgendes bemerkenswert: Änderungen sind zwar Möglich (Radiergummi), werden aber nicht in dem Maße vorgenommen wie am Bildschirm. Ich meine aber an mir selber beobachtet zu haben, dass ich mit einer viel höheren Konzentration an diesen PapierScreens sitze, so in etwa als würde man einen Brief mit der Schreibmaschine schreiben.

Meine Meinung zur Handhabung der UI-Stencils:

• Die Schablone ist recht stabil, sollte aber sorgsam gelagert werden damit sie nicht verknickt
• Besonders gut finde ich die Pixelangaben, zudem ist ein drei- und vierspaltiges Grid eingestanzt
• Am besten gefallen mir die Reiterformen und Button, diese lassen sich leicht handhaben
• Etwas hakelig sind die Icons. Mißlicher Weise sind die Proportition der zweiteiligen Formen falsch: die äußere Form ist stets für die durchaus schicke innere Form (z.B. der Smiley)

Beim ersten Arbeiten mit der Schablone ist der Einsatz natürlich ungewohnt. Interessant ist aber, dass ein doch sehr exaktes Arbeiten notwendig ist. Durch die graden Formen entstehen schnell harte Linien, an denen auf Bündigkeit geachtet werden muss. Ich bin mal gespannt auf den nächsten Einsatz im „echten“ Projekt. 🙂

Schöner bloggen mit dem iPhone

Da ausprobieren von iPhone-Apps erste Bürgerpflicht ist, habe ich mir die App „BlogPress“ für das iPhone angeschaut. Natürlich ist das Schreiben von langen Blog-Posts nicht so komfortabel oder zu empfehlen, dafür liegen aber andere Mobile-Szenarien auf der Hand:

• Einen kurzen Post oder ein Hinweis auf andere Meldungen mit Zitat bloggen.
• Ein Foto aufnehmen und kommentieren. Das zeigt sich erneut die Stärke der iPhone User Experience: durch die konsistente Oberfläche der Apps ist die Einarbeitungszeit miniaml.
• Einen Beitrag mit wenigen ändern oder Ergänzen.

Ein weiterer Vorteil der App ist noch die Unterstützung verschiedener APIs unter anderem auch Drupal. Dazu muss natürlich das Blog-Modul aktiviert sein 😉

—– Artikel wurde erstellt auf meinem iPhone

Position:Odeonstraße,Hannover,Deutschland

Muscle-Computer Interfaces Designstudie

Microsoft Labs haben eine sehr interesante Designstudie vorgestellt, in der die Mensch-Maschine Interaktionen durch Muskelreflexe initziiert werden. Bei näherer Betrachtung ein echt gutes Konzept! Klar, den breiten Alltagsmarkt zu erobern ist sicher Jedermanns (Firmas) Traum aber man denke an die große Zahl älterer oder eingeschränkter Personen, denen somit eine bessere Teilnahme am sozialen Leben und Lebenskomfort allgemein ermöglicht wird. Toll.

Google Chromium OS release – killing the desktop?

Vom neuen Chrome OS ist nun ein erstes Release draußen. Es basisiert auf dem dem Chrome-Browser und behandelt den eigenen Rechner als Website. Hier ein gutes Zitat was es zusammenfasst:

„An OS that is a browser Chrome OS is Google’s latest attempt to further its concept of browser-based computing, in which the traditional PC desktop is deemphasized in favor of a completely Web-based experience.“

Was haltet Ihr davon? ist das der richtige Schritt nach vorne zur Harmonisierung der Interaktionen?

Links:

http://googleblog.blogspot.com/2009/11/releasing-chromium-os… http://www.chromium.org/chromium-os/user-experience

Bing vs. Google: PixelPerfect copy or UX-Pattern?

Die neue Microsoft Suche „Bing“ ist ja in aller Munde. Grund genug mal einen Blick drauf zu werfen. Grundsätzlich kommt sie aufgeräumt daher und bietet bei den Multimedia-Results ein paar nette Feature, wie das Video-Preview. Das Auto-Load der Paging-Funktion hat mich zwar etwas irritiert aber nu ja, eine der Vorgaben war sicher auch es durch nette kleine Feature ordentlich krachen zu lassen. Im übrigen stehe ich dem ganzen M$-gequatsche recht emotionslos gegenüber, zumal auch google Konkurrenz nicht schadet 🙂

In der Tat aber bemerkenswert, dass die Screenaufteilung schon sehr verdächtig nach Google ausschaut. Das lohnt sich doch mal alles auf den OP-Tisch zu legen: für die Produktion von Webseiten nehmen wir das Plugin Pixel Perfect für Firefox. Damit lassen sich Screenshots/Grafiken als overlay zu einer Website  anzeigen. 

Das Ergebnis für einen Suchtreffer ist schon recht deutlich, die Transparenz ist bei 50%:

nun ja, ich würde mal sagen „PixelPerfect“ 😉

Die Frage sei erlaubt, was das wohl bedeutet. Sicher gibt es viele Studien die besagen das Suchergebnisse in einer bestimmten Form so aussehen sollten. Da ich ein schlechtes Gedächtnis habe, wollte ich den Screen mit der „alten“ msn-search abgleichen. Vergeblich: Bing ist im vollen Einsatz, die alte nicht (oder zumdest nicht ad-hoc) zu finden. Wie sieht es mit der globalen Oberflächenaufteilung aus? Auch hier: nicht nur die Proportionen, nein auch die logischen Gruppen (meiner Meinung nach der Kern eines guten UX-Patterns) sind sich ähnlich wie die Ikki-Twins:

hier nochmal der Link zum Screen des Bing-Google-Mashup ohne Overlay. Nebenbei zeigt sich beim Overlay deutlich, dass SocialWeb-Einträge bei google deutlich höher liegen. Da Fragt man sich aber schon: wie weit dürfen sich solche Angebote ähneln, wo ist die Grenze vom Pattern zur Kopie eines Business? Achso: die Werbeplätze sind selbstverständlich auch an den selben Stellen 😉

 

Jacob Nielsen kritisiert Twitter

Lesenswert ist das kurze aber aufschlussreiche Interview mit Jacob Nielsen, dem Altemeister der Usability:

If you care about productivity, don’t check your Twitter feed while you’re trying to get work done. Disruptions are deadly for productivity because it takes several minutes to reorient the brain every time you go off track looking at something else. Stick to checking updates once per day—for example, during lunch. All the tweets will still be there.

recht hat er. da mach ich doch glatt das tweetdeck aus.. 😉

http://www.usabilitynews.com/news/article5653.asp

Excellent formula for an idiot-proof breadcrumb

Im Vorfeld einer Präsentation sagte ein Coach zu mir: „Lass das Beispiel mit Hänsel und Gretel für die Breadcrumbs sein. Die Vögel haben die aufgegessen und dann standen sie da..“. OK, dachte ich mir nehme ich wohl besser den Begriff „Ariadnefaden„, der als äquivalent gilt. Da sich mißlicherweise nicht alle in griechischer Mythologie auskennen (das Labyrinth des Minotauros) war das auch sagen wir mal „suboptimal“ 😉

Steven Krug in Don’t Make Me Think gave an excellent formula for an idiot-proof breadcrumb.

• Breadcrumbs should be as close to the very top of the page as possible, out of the way.
• The font should be small in size.
• They should begin with “You are here:” in bold.
• Each link that follows should be underlined (to indicate that users can click it) and followed by a “>”.
• At the very end should come the unlinked, bold title of the page.
• See the image below for an example from my site, ThePinkCrow.com.

Toller Artikel zu „Better User Orientation through Navigation“
checkout 🙂

Prototyping – Anwendungsfälle und Problemstellungen

Die Folien stammen aus dem Vortrag beim Usability Stammtisch 30.04.2009 in Hannover. Eine Initiative des GC-UPA (Berufsverband der deutschen Usability und User Experience Professionals).

Die Folien zeigen Beispiele aus dem Bereich Prototyping, sowie methodische Problemstellungen dazu. Es wurde bei dem Termin zudem eine Demo der Software „Axure“ mit verschiedenen Anwendungsfällen gezeigt. Zugegeben: ohne den Vortag und die Demo sind die Folien sicher nur ein kleiner Teil, gleichwohl ober schön für die DOKU 😉

In den Gesprächen haben sich noch interessante Fragen ergeben:

– Wie kann man am effizientesten mit AXURE-Mastertemplates arbeiten? (vs. Widgets)

– Wie gestaltet man den Workflow im Team?

– Welche Literatur gibt es dazu?

zur Literatur:

Information Architecture for the World Wide Web, Peter Morville & Louis Rosenfeld

http://www.amazon.com/Information-Architecture-World-Wide-Web/dp/0596527349/ref=sr_1_1?ie=UTF8&s=books&qid=1241427379&sr=1-1

The Elements of User Experience, Jesse James Garrett

http://www.amazon.com/o/ASIN/0735712026/ref=nosim/jjgnet-20/

User Interface Design, Ben Shneiderman 

http://www.amazon.de/User-Interface-Design-Ben-Shneiderman/dp/3826607538/ref=sr_1_3?ie=UTF8&s=books&qid=1241427238&sr=8-3

Effective Prototyping for Software Makers, Jonathan Arnowitz et. al.

http://www.amazon.com/Effective-Prototyping-Software-Interactive-Technologies/dp/0120885689

Links:

http://www.ponton-lab.de

http://www.ux-hannover.de 

Die Folien stammen aus dem Vortrag beim Usability Stammtisch 30.04.2009 in Hannover; eine Initiative des GC-UPA (Berufsverband der deutschen Usability und User Experience Professionals).

Die Folien zeigen Beispiele aus dem Bereich Prototyping (zum Umgang mit Wireframes, Paper Prototypes, Sketchboards, Sticky notes), sowie methodische Problemstellungen dazu. Es wurde bei dem Termin zudem eine Demo der Software „Axure“ mit verschiedenen Anwendungsfällen gezeigt. Zugegeben: Ohne den Vortrag und die Demo sind die Folien sicher nur ein kleiner Teil, gleichwohl aber schön für die DOKU 😉

In den Gesprächen haben sich noch interessante Fragen ergeben:

• Wie kann man am effizientesten mit AXURE-Mastertemplates arbeiten? (Master vs. Widgets)
• Wie gestaltet man den Workflow im Team?
• Welche Literatur gibt es dazu?

zur Literatur:

• Information Architecture for the World Wide Web, Peter Morville & Louis Rosenfeld
• The Elements of User Experience, Jesse James Garrett
• User Interface Design, Ben Shneiderman 
• Effective Prototyping for Software Makers, Jonathan Arnowitz et. al.

 

Links:

http://www.ponton-lab.de

http://www.ux-hannover.de

Drop&Drop richtig umgesetzt bei yasssu.com

 

Der Podcast-Service yassu.com

Yo! Selten so gelacht – im positiven Sinne! Drag&Drop ist grade auf Webseiten sehr populär geworden. In den meinsten Fällen sind diese coolen Funktion aber nicht selbsterklärend (genug), gleichwohl es in einschlägigen Guidelines klare Anleitungen über die Stati im Drag&Drop Vorgang gibt (z.B. Anzeige der Drop-Fähigkeit, die leider auch bei yasssu.com fehlt).  Um so erfrischender die sehr explizite Darstellung mit den Händen! Der Service selber macht auch Spass. 

check out or opt-in 😉
http://www.yasssu.com