Mobile Business Blog-Serie: Was bringt die Zukunft? Spannende Eindrücke von der „Mobile Experience Design & Usability“ Konferenz in Berlin

Slide aus Nick Fincks Präsentation

Nachdem wir in den letzten Wochen in unserer Blog-Reihe das Thema „Mobile“ vor allem aktuelle Aspekte betrachtet haben, möchten wir im heutigen Beitrag einen Blick in die Zukunft wagen. Wo bewegen wir uns mit der mobilen Technik hin und worauf … Weiterlesen

Wo find ich nochmal? Informationsarchitektur und Intranets

Der Entwicklungsprozess des einer Informationsarchitektur

Funktionen und Inhalte in eine einfach zu navigierende Struktur bringen, geschieht nicht per Zufall. Worauf muss man bei einer Intranet Informationsarchitektur besonders achten? Weiterlesen

15 Jahre e-Banking. Und noch alles fast gleich wie früher.

Entwicklung der Touchpoints im Banking Sector

Die Banken haben vielleicht noch nie so vielen Herausforderungen gegenübergestanden wie heute: Wiederaufbau des Vertrauens bei allen Stakeholdern, härtere Regulation durch die Regierungen, erhöhte Komplexität der Dienstleistungen durch laufend neue Vertriebskanäle, Kampf gegen digitale Megabrands im Zahlungsverkehr, die Kunden im … Weiterlesen

Mobile Business Blog-Serie – Die Mobile Website der Stadt Zürich: Umsetzung (Teil 3 von 3)

Bookmarking in der Anwendung

«Wäre ich Typograph, so könnte ich nicht mehr ruhig schlafen!» begrüsste mich Patrick Rossbund an diesem Morgen neckisch. Das neue Windows Mobile 7 Betriebssystem war endlich hier, aber die Menschentraube um meinen Schreibtisch herum versprach nichts Gutes. Eingebettete Schriften anzuzeigen war … Weiterlesen

Mobile Business Blog-Serie – Die Mobile Website der Stadt Zürich: Konzeption (Teil 2 von 3)

Bernd Jansen hat den Entwurf bereits entdeckt

Um die mobile Kultur von Zürich besser zu verstehen, haben wir zu Beginn das Züritütsch in unseren Prototypen eingesetzt. Neugierde und Spass wurden sofort geweckt, weil sich diese Idee nicht ganz ernst nahm und sie das Projekt «Mobile Website der … Weiterlesen

Mobile Business Blog-Serie – Die Mobile Website der Stadt Zürich: Ideen (Teil 1 von 3)

NAM-MobileZueri-05

Sowohl Interaction Designer bei Namics als auch Dozent für Typographie an der ZHdK zu sein war für mich der kleinere Spagat als der, zwischen Politik, Accessibility und Trend. Aber bekannterweise «entstehen Diamanten nur unter Druck» wie eine meiner Studentinnen kommentierte. Die mobile Website … Weiterlesen

Front/> Conference 2012 – Design meets Tech meets Understanding

Gastbeitrag von Bernard Richter, dem Gewinner unserer Frontendconference-Ticket-Verlosung

Als ich vor rund drei Wochen auf den Absenden Button für eine Teilnahme an der Front/>[1] Conference gesponsored von Namics klickte, war mein Wissen über Frontend Development und Design so ziemlich am Tiefpunkt angelangt. Jahre der ökonomischen Forschung hatten ihre Spuren hinterlassen und der Sprung ins kalte Wasser voll mit UX/UI Designern, Frontend/ Backend Entwicklern und Tech Evangelisten schien mir die einzige Möglichkeit mein Wissen wieder aufzufrischen.

 

Und meine Erwartung wurde mehr als übertroffen. Front/> bot in zwei Tagen eine geballte Ladung an professionellen Speakern und Referenten aus den Fachabteilungen verschiedenster Unternehmen, deren Begeisterung für ihr Thema den Raum erfüllte und die Leute mitriss. Teilnehmer hatten die Möglichkeit zwischen zwei parallelen Talks zu wählen dem Design und dem Tech Track. Seien es die Vorträge über das Gestalt Prinzip sowie die neue Microsoft Design Language aus dem Design Track oder die Vorträge über Crowdsourcing sowie spezielle JavaScript Bibliotheken (Backbone.js, D3.js) im Tech Track. Alle Vorträge waren lehrreich und interessant vorgetragen.

Was man, unter vielen anderen Dingen, von der Konferenz mitnehmen konnte, möchte ich hier mal auflisten:

(mehr …)

Herausforderungen Internationaler Intranets [Vortrag]

Anlässlich der diesjährigen Schweizer IT-Messe und -konferenz mit dem neuen Titel ONE (ehem. Aiciti, Orbit, IEx etc.) haben Benjamin Hörner und ich internationale Intranets unter die Lupe genommen. Der Vortrag zeigt Problematiken auf, die aufgrund der Grösse, Komplexität und Heterogenität dieser Intranets die üblichen Herausforderungen übersteigen.

Dabei wurden 4 aus unerer Sicht besonders interessante Aspekte herausgegriffen

– Informationsüberflutung
– Mehrsprachigkeit
– Dezentralisierung von Standorten
– Heterogenität der Kulturen

und deren Lösungsansätze diskutiert.

Hier gibt’s die Präsentation zum Download: Herausforderungen internationaler Intranets [pdf, 23.3 MB]

und zum Durchblättern…

 

Die Abkürzung zum Produkt

L-Navigation war gestern: Namics entwickelte für Phoenix Contact ein innovatives Navigationsprinzip, das Platz spart und neue Features im Flyout bietet. Ohne Ladezeiten. Ohne Zwischenseiten. Einfach schneller zu einem von 50.000 Produkten.

Es gibt sie seit den ersten grafischen Betriebssystemen: Die Rede ist von der L-Navigation – der vertikalen Anordnung von Inhaltsstrukturen. Gerade im Rahmen komplexer Inhaltsgefüge ermöglicht sie heutzutage kein benutzerfreundliches Interfacedesign mehr. Häufig stößt man auf Projekte – gerade im E-Commerce-Bereich – bei denen es unmöglich ist, jede Menüebene auf übersichtliche 7–9 Punkte zu reduzieren. Dann sind innovative Navigationskonzepte gefragt, die schnelles und dynamisches Bewegen innerhalb einer Internetseite ermöglichen und ohne Umwege zum Ziel führen. Solch eine entwickelten wir für Phoenix Contact.

50.000 Produkte. Eine Navigation.
Vor eine besondere Herausforderung stellte uns der Marktführer von elektrischer Verbindungstechnik und Automation: Für die Internetseite von Phoenix Contact bildete Namics rund 50.000 Produkte in einer neuartigen Navigation ab. Das Ergebnis konnte sich sehen lassen: Mit nur drei Klicks und ohne Ladezeiten kommt der User bis zum gesuchten Produkt.

Screenshot Navigationsmenü Produktnavigation

Gründe gegen die L-Navigation.
Schon in den frühen Phasen der Konzeption war klar, dass eine klassische L-Navigation, wie das Unternehmen sie bisher einsetzte, nicht zielführend ist. Gründe gegen diese Form der Navigation sind im Allgemeinen:

1. Überflüssige Ladezeiten, da jede Seite aufgerufen werden muss

2. Enormer Platzbedarf, der dem Content Raum nimmt

3. Ästhetisch nicht ansprechende Darstellung bei mehr als zwei Menüebenen

Wir waren froh, in Phoenix Contact einen Kunden gefunden zu haben, der den Nutzen erkannt hat, Zeit und Geld in die Entwicklung eines neuen Navigationsprinzips zu investieren.

(mehr …)

Webdesign Trends für 2012

1. Mobile First / Tablet First
Da immer mehr Nutzer mit mobilen Geräten auf bestehende und neue Webinhalte zugreifen, sollen diese primär auch darauf ausgerichtet sein. Die allerwichtigsten Use Cases müssen auch auf der mobilen Website benutzerorientiert erledigt werden können – deshalb lohnt es sich, gerade bei Redesigns und Relaunches die Informationsarchitektur und die Benutzerführung auf Benutzer mit mobilen und touchbasierten Endgeräten auszurichten.

Einen hervorragenden Überblick und Einstieg in das Thema ist bspw. bei Luke Wroblewskis ‚Mobile First‚ zu finden.

 

2. Responsive Web Design
Wer diesen Artikel auf einem kleinen Screen liest, der sieht den Inhalt optimiert auf die verfügbare Breite:

Sämtliche Namics Blogs wurden mit responsive Layouts versehen, d.h. der Inhalt passt sich immer der verfügbaren Bildschirmbreite an.

Damit künftig nicht für alle gängigen Bildschirmgrössen zugeschnittene Layouts festgelegt und programmiert werden müssen, können diese mit responsive Layouts im Web zur Verfügung gestellt werden. Dabei werden gewisse Schranken festgelegt. Beim unter-/überschreiten dieser Schranken passt sich dann der Inhalt automatisch an den Screen an.

Zig Showcases und Beispiele für Responsive Design finden sich bspw. bei mediaqueri.es:

 

3. Flash wird komplett durch HTML 5 and CSS3 ersetzt
Nachdem Adobe bekanntgegeben hat, dass Flash für Mobile Geräte nicht mehr weiterverfolgt werden wird, scheinen langsam aber sicher auch die Stunden der Desktop-Version des Flash-Players zu verrinnen. Immer mehr Webauftritte und Apps kommen ohne Flash aus und setzten stattdessen auf HTML5 und CSS3. Im Web existieren zig Websites, welche die Möglichkeiten von HTML5 und CSS3 aufzeigen: z.B. hier, hier und hier.

Ist Ihr Browser für HTML5 bereit? Jetzt den Test machen!

4. Onepagers
Die Benutzer auf Websites wissen, wie man scrollt und können ohne Probleme auch Inhalte erreichen, welche – z.B. auf einer Startseite – nicht im sichtbaren Bereich sind (siehe dazu u.a. UX Myth N0 #3: People don’t scroll). Mit diesem Wissen können auf einer Start- oder Unterseite diverse Inhalte angeboten werden. Keine Sorge – sie werden gefunden und erreicht. Einen Schritt weiter gehen die Onepager- oder Single Page Websites. Hier wird der gesamte Inhalt auf einer (1) Webseite zur Verfügung gestellt. Der Benutzer erreicht Inhalte entweder durch Scrollen und/oder durch eine Navigation, welche die Inhalte anpeilt.

Inspiration gibt’s z.B. hier oder hier.

Ein prominentes Beispiel ist die Nike Better World Website, welche zusätzlich den sog. Parallax-Effekt einsetzt (Inhalt und Hintergrund bewegen sich unterschiedlich schnell und schaffen so einen dreidimensionalen Effekt):

5. Webfonts
Kein neuer Trend – eher ein anhaltender. Dank Webfonts können Websites mit den passenden Schriften versehen werden – sofern der jeweilige Einsatz Sinn macht. Da man so nicht mehr auf das Rendern von Titeln als Bilder oder Flash-Files angewiesen ist, kann die eigene Corporate Identity ohne weiteres auch im Web eingehalten und gelebt werden. Das bedeutet aber nicht, dass im Web automatisch das ganze Schriftbild ans CI/CD angepasst werden muss. Die Lesbarkeit auf Computerscreens muss nachwievor im Fokus der Designer sein. So sieht Fliesstext in Frutiger vielleicht in einer gedruckten Broschüre tiptop aus – der Einsatz im Web muss aber vorher genau geprüft werden.

Showcases für Typographie mit Webfonts z.B. hier und hier.

 

6. IE6 wird eingemottet
„It’s time to say goodbye“, erklärt Microsoft selbst auf der eigens dafür eingerichteten Website. Ab Januar 2012 sollen die User mit dem überalterten Browser (v.a. in China und Indien) mittels der üblichen automatischen Updates in Windows auf eine neue Version gebracht werden.