HTML5 ist zur Zeit in aller Munde. Mit dem folgenden Eintrag möchten wir unsere Sicht und Erfahrungen etwas näher erläutern.
Im Grunde genommen ist HTML5 – es handelt sich um die fünfte Revision von HTML aus dem Jahre 1997 – noch gar nicht fertig entwickelt. Folglich ist HTML5 noch kein offizieller Standard und trotzdem kann man bereits viele HTML-Bestandteile verwenden. So kann man z.B. dank Syntax-Features neu auch Audio- und Video-Files direkt im Browser abspielen, dank dem Geolocation-API ist es möglich, den ungefähren Standort zu bestimmen, mit Local Storage ist es neuerdings möglich grössere Datenmengen lokal (auf dem Client) zu speichern und zu guter Letzt die Offlinefähigkeit von Anwendungen.
Webapps sind dank der Weiterentwicklung der Webtechnologien durch Apple, Mozilla, Google & Co. ganz klar zu einer echten Alternative geworden. Insbesondere die Internetbrowser von Mozilla (Firefox) und Webkit-Browser (Chrome, Safari) haben betreffend Performance und Leistungsfähigkeit enorme Fortschritte verzeichnet und machen durch die schnelle Adaption neuer Features diese Vorteile einer breiten Masse sofort zugänglich. Ein gutes Beispiel ist unser Multi-Touch-Projekt für die Schweizerische Post (siehe Link weiter unten).
HTML, CSS und JavaScript sind etablierte Technologien mit viel vorhandenem Knowhow in der Branche. Hinzu kommt der gute Support für mobile Devices, wodurch es möglich ist geräteunabhängige Apps (auch für TVs) – jedoch abhängig vom Internetbrowser – zu entwickeln.
Unsere Erfahrungen
In den vergangenen 1.5 Jahren haben wir einige HTML5-Projekte erfolgreich abgeschlossen. Von der kleinen Anwendung bis hin zu einer sehr umfangreichen Finanzberaterapplikation für PostFinance haben wir HTML5 Anwendungen entwickelt. Für die Zukunft sehen wir den Browser als Plattform und als vollwertige Alternative für native Desktop- und Mobile-Applikationen. Zudem denken wir, dass Hybrid-Anwendungen ein sehr grosses Potential haben.
Mit den unten stehenden Projektlinks können Sie sich über einige unserer Lösungen informieren und von den Möglichkeiten moderner Webtechnologien überzeugen – achten Sie insbesondere auf die Videos.
- PostFinance BPlus – eine iPad Finanzberatungsapplikation
- Avaloq – eine Financial Planning Multi-Touch App
- Die Schweizerische Post – Multi-Touch App “Die Geschichte der Post”
- Swiss Post International – Multi-Touch App “Wertschöpfungskette der Verlangsbranche”
- Swiss Post Logistics – Multi-Touch App “Prozesskette der internationalen Distribution”
- SC Bern – Hybrid-App
HTML5 ist es!
Um auf die Frage “Ist HTML5 die richtige Technologie für unser Projekt?” zurück zu kommen; dann lautet die Antwort: “ja”.
Durch unser breites Portfolio an HTML5 basierenden Projekten, besitzen wir das nötige Knowhow um Projekte mit neuen Web Technologien effizient umzusetzen.
Bei Fragen und Anregungen:
Bei der Kinect Lösung konnte man durch einfache Gesten durch die einzelnen Themen durchnavigieren. Überzeugen Sie sich selbst mit dem unten stehenden Video.
Für die Multi-Touch Lösung haben wir die 12 Themen in freien Elementen, die man mit einfachen Gesten aufpinchen kann dargestellt (siehe Bild auf der rechten Seite).
Während eines Kick-Off Meetings im Januar 2011 kam uns die Idee, dass man die Kinect Technologie für neue Zwecke einsetzen könnte. Wir stellten uns ziemlich rasch animierte Werbung in Schaufenstern vor und welche Vorteile dies mit sich bringen würde. Also haben wir uns eine Xbox Kinect Kamera gekauft und angefangen bestehende Libraries zu erweitern und die Events der Kamera einem Webbrowser zu übergeben. Man kann ganz einfache Werbebilder oder z.B. einen Vorsorgerechner, wie man es im unten stehenden Video sieht einbauen. Wir haben das Ganze in einen Webservice integriert und die ersten Resultate bestaunt.
Überzeugen Sie sich selbst in unserem Video.
Wie könnte das nun in einem Schaufenster aussehen? Man kann die Bilder auf einem LCD TV oder mit einer Beamerprojektion laufen lassen.
Sollten wir Ihr Interesse geweckt haben, so kontaktieren Sie uns unter:
kontakt@randomreality.ch
Angefangen hat alles Mitte 2009, als Florian Westermann, mit einem Schuhkarton, einer Apple iSight Webcam, einem Glas und einem Architektenpapier einen ersten Low Budget Touchscreen baute. Die Webcam erkannte bei direktem Kontakt mit dem Glas die dunkeln, scharfgezogenen Fingerspitzen. Die Hand und der Arm und alles weitere waren durch das Architektenpapier völlig in einer diffusen Unschärfe, und wurde somit von der Software nicht getrackt.
Die Lösung war jedoch mehr ein grosses Mutli-Touchpad, da sich noch kein Bildschirmbild darstellen lies auf dem Gerät.
Die Möglichkeiten einer solchen Interaktion faszinierte uns so, das wir gewollt waren in diese innovative Technologie weiter zu investieren und zu forschen. Durch das iPhone und andere mobile Touchscreen-Geräte kam Multi-Touch in aller Munde. Wir planten einen grösseren Touchscreen, mit eingebauten Bildschirm – ein richtiger Touchscreen eben.
Nach einer gigantischen Planungs- und Vorarbeit kam die Box Schritt für Schritt vorwärts. Das Tracking funktioniert mit der sogennanten FTIR (Frustrated Internal Reflection) System. An jeder Seite eines 20mm hohen Plexiglasses wurden hunderte einzelne Infarot LED’s angebracht, diese Infarotstrahlen reflektieren sich innerhalb des speziell Plexiglass “Endlighten”. Eine Highspeed Infarot Kamera erkannt bei einem Tap auf den Screen, den Finger als leuchtenden Punkt.
Das Videobild wurde mittels einem HD Beamer über ein Spiegel ebenfalls auf das Plexiglas bestrahlt. Durch eine spezielle Projektionsfolie auf dem Plexiglas blieb das gebeamte Bild, an der Folie hängen.
Während der gesamten Produktionsphase gab es immerwieder Rückschläge: überhitzte Beamer, teure falsch verklebte Rückprojektionsfolie, Probleme mit der Elektronik der Infarot LED’s und einige Hindernisse mehr mussten wir überwinden. Ende 2009 war es soweit, und unser RR TOUCH ONE, konnte erfolgreich fertiggestellt werden und faszinierte bereits die ersten Kunden.
Schnell waren die Schwachpunkte einer solchen Lösung ersichtlich:
- Starke Hitzeerzeugung wegen dem Beamer
- Lautstarke Lüfter im Beamer und 4 im Boden der Box
- Trackingprobleme bei wechselnden Lichtverhältnissen
- Beamerbild Qualität im Vergleich zu LCD/TFT Dispalys schlecht
- Grosse, schwere und unflexible Box
Diese erkannten Punkte, wurden zu unserem Massstab für eine neue Lösung. Ziel war ein flaches Gerät, folglich durch den Einsatz eines LCD-Displays, das möglichst lautlos und langlebig ist.
Anfangs stand wieder die Recherche- und Planungsphase. Schnell stand die einzige Mögliche Variante fest: Ein FullHD LED TV als Bildschirmbild, darüber ein Touchscreen Overlay, das ein Infarot-Gitterraster über das TV Bild legt. Dadurch lassen sich bis zu 32 Touch-Points erkennen, ohne Ghost-Points!
Durch einen glücklichen Kontakt nach China, bestand plötzlich die Möglichkeit Komponenten direkt beim Hersteller zu beziehen. In der Anfangseuphorie dachten wir sogar, an eine komplette Produktion in China – was sich jedoch nach einem Prototypen als illusorisch herausstellte. Der Touchscreen glich mehr einem uralten Röhrenfernseher und hatte nicht das Mindeste gemeinsam mit unseren CAD Zeichnungen und 3D Renderings.
Als Schlussfolgerung importieren wir die nötigen Komponenten. Die vollständige Herstellung und Produktion des Rahmens bis zur Montierung erfolgte in der Schweiz.
Mehr dazu auf: www.touchslim.ch
Ein Versuch den Entwicklungsprozess für eine gute Usability und deren Vorteile kurz und bündig zu vermitteln.
Was ist Usability [juseybility]?
Der Begriff Usability stammt aus dem Englischen und setzt sich aus zwei Wörter zusammen: to use (benutzen) und ability (die Fähigkeit). Ziel der Usability ist eine hohe Effektivität, Effizienz und Zufriedenstellung bei der Benutzung eines interaktives Produktes. Kurz gesagt: die Gebrauchstauglichkeit einer Software.
Usability ist ein Teil des User Experiences, die den kompletten Prozess zur Entwicklung einer gebrauchstauglichen Lösung meint, den wir Ihnen hier vorstellen.
Iterativer Entwicklungsprozess
Wichtig bei der Entwicklung einer ergonomischen Software ist die Iteration. Dabei orientieren wir uns an der ISO-Norm 9241-210. Dabei steht immer der Benutzer und seine Bedürfnisse im Vordergrund. Unsere Entwicklungszyklen:
1. Analyse & Konzeption
Um die entwickelnde Software auf den Benutzer zuschneiden zu können, ist es wichtig, sogenannte Nutzungskontexte zu definieren. Diese beinhalten spezifische Merkmale der Benutzer, deren Arbeitsaufgaben sowie organisatorische und physische Umgebungen. Diese Informationen können durch Nutzerinterviews, Workshops und Fokusgruppen erarbeitet werden und enden als abgeleiltete Anforderungen.
2. Gestaltung
Anhand der Anforderung seitens Benutzer wird nun die Anwendung gestaltet. Der effizienteste Weg ist die Erarbeitung statischer oder interaktiven Prototypen (z.B. Wireframes). Das Erstellen von Wireframes benötigt weniger der Zeit im Vergleich zu einem tradtionellen Design, da diese nur schematische Darstellungen sind. Auf Änderungen und Bedürfnisse des Kunden kann rasch reagiert werden. Die unfertig wirkende Art der Wireframes haben den grossen Nutzen, dass die Benutzer offene Feedbacks erteilen.
Erst nach erfolgreicher Abnahme des Wireframes, legen wir mit der Detailgestaltung los. Dabei beachten wir immer vorhandene Styleguides und Vorgaben seitens Kunde.
3. Evaluation
Mittels verschiedenen Evaluationsmethoden kann nun die Gestaltung von Nutzer oder Experten getestet werden.
Mit tatsächlichen Benutzern können Usability-Tests vorgenommen werden die anhand von Aufgaben das Produkt testen und kritische Nutzungssituationen sofort aufzeigen.
Usabilty Experten können eine sogennante Expertenevaluation durchführen. Als Grundlage für die Beurteilung dienen Usability-Normen (DIN EN ISO 9241-10) aber auch andere Usability-Richtlinien und „State-of-the-Art“-Empfehlungen. Das Resultat dabei sind direkte Designempfehlungen.
Die Normen dienen nicht zu einer Vereinheitlichung aller Software-Entwicklungen, sondern führt zur Vermeidung von Nutzungsprobleme. Es sind plattformunabhängige Empfehlungen, eine Art Referenzdokument, die keine konkreten Lösungen vorschreiben und der Kreativität, dem Individualismus und der Einzigartigkeit einer Software freien Spielraum offen lassen.
Einige Fakten
- Die Beseitigung eines Problems kostet nach Veröffentlichung 100 mal mehr als in der Designphase. Jeder Euro in Usability spart 10-100 Euro (IBM 2003)
- Dell: Beachtung grundlegender Usability-Regeln erhöhte den Umsatz der Dell Website von 1 auf 34 Mio. $; Zeitraum 24 Monate, von 1998-2000 (Quelle: Businessweek, USA)
- IBM (2006) rechnet nach, dass die Verbesserungen an ihrem Intranet (hausintern als “BluePages” bezeichnet) jedem Mitarbeiter 72 Minuten monatliche Arbeitszeiteinsparung gebracht hat. Bei der Größe von IBM entspricht das geschätzen 194 Millionen $ im Jahr.
Florian Westermann ist nach einem praxisorientierten Seminar an der Fraunhofer Academy am Fraunhofer Institut in Sankt Augustin Zertifizierter Usability Engineer.
Bei Fragen zu unserem Vorgehen, Referenzprojekten mit Usabiltiy-Vorgehen, wenden Sie sich an:
Martin Schilling, CEO randomreality gmbhMobile: 079 444 77 91
E-Mail: kontakt@randomreality.ch
XING Profil
Elf rohe iPads, genügend Strom-Kabel und eine gute Mischung technischer Komponente – aus diesen Zutaten entstand die Sushi-Bar an den i-days im Verkershaus Luzern. Unter dem Motto “Informatik bewegt die Schweiz” fanden vom 18. November bis 21. November 2010 die i-days statt, während dieser Sondershow präsentierten Firmen, aus der Schweizer Informatik-Branche, einem breiten Publikum auf anschauliche und spielerische Weise die Welt der Informatik.
Die Sushi App
Im Auftrag der Agentur Advertising, Art & Ideas (adart) realisierte die randomreality eine technische Spielerei für den Stand der Credit Suisse. Im Zentrum des Messestandes befand sich eine klassische Sushi-Bar mit dem bekannten Förderband. Anstelle von Tellern mit Sushi auf dem Förderband, bewegten sich darauf verschiedene Themengebiete wie z.B. “Schnupperlehre”, “IT-Lehre”, “Career Start Program” oder ein Wettbewerb.
Mit Hilfe der iPads wurde der Informationsgehalt des entsprechenden Themengebiets visualisiert und erweitert. Es gab auch interaktive Elemente wie z.B. einen Wettbewerb mit Sofortpreisen.
Entgegen unserem Firmennamen (randomreality) war zusätzlich die Aufgabe die Themenangebote synchron zum Band auf den iPads anzuzeigen. Dies um die Verbindung zwischen der physischen, tastbaren Welt und dem digitalen Abbild auf dem iPad zu vertiefen und den einen, oder anderen aufmerksamen Besucher doch ins Staunen zu versetzen.
Eins, Zwei, Drei, Vier…
Die exakte Synchronisation stellte sich zudem für uns als grosse, aber äusserst spannende Herausforderung dar. Als Software-Hersteller für Mobile-Apps und Webapps ist es eine besondere Aufgabe eine Lösung mit analogen Sensoren (Lichtschranke) entwickeln zu dürfen. Auf einmal musste man sich mit externer Speisung und Volt-Werten herumschlagen, diese Werte mussten natürlich zusätzlich vom Server eingelesen und verarbeitet werden.
Dank den Signalen der Lichtschranke konnte der Mac Mini den Takt, die Geschwindigkeit des Bandes, als auch das letzte “Menü”, dass an der Lichtschranke vorbeigefahren ist, genau berechnen. Diese Informationen wurden danach an die iPads weitergeleitet, damit diese das korrekte Themengebiet zur korrekten Zeit anzeigen konnten.
Die moderne Web-Applikation fürs Fitnessstudio
Im August dieses Jahres führten wir mit Daniele Pauli einen Workshop durch, um seine Anforderungen an eine Web-Applikation zu definieren. Daniele Pauli ist einer der der gefragtesten Fitnesstrainer der Schweiz; er hat u.a. eines der härtesten Personenschutz-Ausbildungscamps in Israel absolviert. Bereits 2007 hat Daniele Pauli mit der Betreuung von Hochleistungsportlern begonnen. Unter anderem trainiert er verschiedene NLA-Eishockey-Spieler, olympische Bobfahrerinnen und hilft Ihnen, mit seiner Erfahrung, die Kondition in allen Facetten umfassend und messbar zu steigern. Für sein vor kurzem eröffnetes Fitnessstudio im Zürcher Seefeld wollte er eine Web-Applikation, welche für ihn, als auch für seine Kunden unkompliziert, effizient und voller neuer Möglichkeiten sein sollte. Kurzum: Pauli wollte in jeder Hinsicht neue Massstäbe setzen.
Das Ergebnis unserer Arbeit ist xerciseapp
Als Software as a Service, kurz SaaS, sorgen wir für Unterhalt und Ausbau der technischen Infrastruktur. Der Kunde muss sich nicht mehr um Backups, Upgrades oder Security Patches kümmern, wie das bei herkömmlichen Anwendungen der Fall ist. Zeitaufwändige lokale Server und Arbeitsplatzinstallationen fallen weg – Aufwand und Unterhaltskosten sinken.
Alles, was der Kunde braucht, sind ein Computer und eine Internetverbindung. Autorisierte Personen, in diesem Falle das Fitnesscenterpersonal, können auf das Dashboard zugreifen – den Mittelpunkt der Applikation. Auf dem Dashboard sehen sie als erstes die Anzahl der anwesenden Kunden, den Tagesumsatz, den durchschnittlichen Tagesumsatz der letzten 30 Tage und die durchschnittliche Trainingszeit. Dank innovativem Design hat man mit nur einem Mausklick alle gewünschten Details auf dem Schirm.
xerciseapp wird vom Fitnesscenter abonniert. Abgerechnet wird mit einer monatlichen Pauschale oder mit einem festgelegten Betrag pro Kunde. Bei einem attraktiven Preismodell sehen wir für Software as a Service im Fitnessbereich eine interessante Zukunft . Wir freuen uns auf ihre Kommentare, Anregungen, Ideen und (An-)Fragen.
Und wer weiss….
Nicht nur für die Angestellten bietet xerciseapp neue Möglichkeiten: so können die Kunden des Studios über xerciseapp Trainingspartner suchen oder sich einer von Pauli persönlich gecoachten Gruppe anschliessen. Das eigene Abo kann verwaltet oder Statistiken z.B. zur Auslastung des Studios abgefragt werden.
Bei Fragen und Anregungen:
Mit dem iPad die innovativsten Kundenberatungsgerspräche durchführen.
Faszination Multitouch
Durch die Einführung des iPhone im Jahr 2007 entstand die grosse Faszination von Multitouch-Applikationen. Bis zum heutigen Zeitpunkt sind mehr als 300’000 Apps im iTunes App Store von Apple verfügbar. Das im Jahr 2010 vorgestellte iPad von Apple soll an den Erfolg vom iPhone anknüpfen und dadurch den Markt von mobilen Tablet-Endgeräten revolutionieren. Ein Vorteil vom iPad liegt am grossen Bildschirm der dazu einlädt, dass der Berater und der Kunde die Präsentation papierlos und nur mit Hilfe des iPads durchführen können. Die Tatsache, dass der Kundenberater die Interaktion direkt am Bildschirm vor den Augen des Kunden macht, verhilft das gleiche Vertrauen wie eine Papierberatung mit dem Kunden aufzubauen. Die Erfahrungen mit elektronischen Hilfsmittel bei Beratungen haben gezeigt, dass ein Notebook das nur vom Berater ersichtlich ist, eine Art Barriere zwischen Kunde und Berater aufbaut. Sämtliche durchgeführte Multitouch Studien zeigen ganz klar auf, dass die Mensch-Maschinen-Schnittstelle durch Multitouch Gestiken optimiert bzw. reduziert wird. Dies wirkt sich zudem positiv auf das Markenimage aus.
Die at-point ag hat bereits über 14 Monate Forschung in die Bereiche Mulitouch Geräte und Anwendungen investiert und durfte für ein grosses Schweizer Finanzunternehmen einen Advisory Workplace in Form einer iPad Applikation entwickeln.
Kompletter Beratungsprozess
Dem Finanzinstitut war es wichtig, dass der gesamte Beratungprozess mit unserer Lösung abgedeckt wird. Im Konkreten bedeutet dies, dass der Berater auf dem zentralen Bankensystem den zu beratenden Kunden auswählen und einen Termin für das Gespräch setzen kann. Anschliessend kann der Kundenberater die Kundenfinanzinformationen gesichert auf das iPad übertragen. Was nun folgt ist die Analyse der Kundenfinanzinformationen direkt und intuitiv auf dem iPad, der Kundenberater hat somit sämtlich für ihn relevante Informationen und kann das Kundenberatungsgespräch mit den Schwerpunkten auf Produkt- und Dienstleitungsebene vorbereiten entsprechend elektronisch den Ablauf des Gespräches erfassen.
Beim Termin mit dem Kunden wechselt der Kundenberater in den Präsentationsmodus und somit werden nur noch für den Kunden zugängliche Daten dargestellt. Im Präsentationmodus zeichnet sich die Anwendung darauf aus, dass die Kundenvermögensdaten holistisch verfügbar sind und die Möglichkeit bei Kundenbedarf durch “Drilldown” immer tiefer in das Detail der einzelnen Produkte vorzudringen.
Während dem Beratungsgespräch kann der Kundenberater die Produkte und Dienstleistungen welche an dem Kunde interessiert ist mit einem einfachen klick markieren und gegebenenfalls mit Textinformationen ergänzen.
Am Ende des Kundenberatungsgespräch erstellt die Anwendung eine Fazit welches wieder sicher an das Bankensystem übermittelt wird und die Daten automatisch auf dem iPad löscht.
Unsere Lösung
Die innovative iPad Applikation richtet sich an Kundenberater im Privat- und Geschäftskundenbereich zur Vorbereitung, Durchführung sowie Nachbearbeitung von Beratungsgesprächen. Durch eine verschlüsselte Übermittlung sind alle Kundendaten auch unterwegs mit mobilem Internet, jederzeit sicher abruf- und übermittelbar. Das einfache, nach Usability Standarts entwickelte User Interface, ermöglicht eine intuitive Bedienung, die fast ohne Schulung erlernbar ist. Durch diese Effizienz reduzieren sich Schulungs- und Supportkosten.
Die iPad Applikation bildet den üblichen Beratungsprozess ab. Dabei umfasst die Vorbereitung folgende Elemente:
- Die Terminübersicht mit Tages- und Wochenansicht ermöglicht dem Kundenberater seine Beratungsgespräche optimal zu organisieren
- Das Kundenbuch mit Kontakt- und Adressinformationen
- Die Detailansicht zeigt Softfacts, die momentan genutzten Produkte, Dienstleistungen und deren Werte, Rentabilität, letzte Kontakte und Pendenzen
- Markierung von bereits vorhandenen oder neuen Produkten und Dienstleistungen mittels verbalen Ankern: “Anbieten”, “Markieren”, “Akzeptiert”, “Abgelehnt” und “Keine Markierung”
Während dem Kundengespräch stehen dem Berater folgende Elemente zur Verfügung:
- Erfassung von Softfacts des Kunden seinem Umfeld
- Komplette Portfolioübersicht inkl. Fremdbanken ermöglicht dem Kunden eine Zusammenfassung über sein Vermögen
- Präsentation in holistischer Darstellung
- Multitouch Gesten (z.B. für die Live-Kalkulation von Renditen)
- Informationen der Produkte und Dienstleistungen gemäss Datenblätter
- Eingebauter Web-Browser um die Banken-Webseite für zusätzliche Informationen aufzurufen
- Diverse Tools (z.B. Fondsberater, Finanzrechner, Zeichnungstool, etc.) ermöglichen das Beraten ohne zusätzliche Hilfsmittel oder Dokumente
- Automatisch generiertes Fazit mit der Möglichkeit zusätzliche Beschreibungen hinzuzufügen, orientiert sich nach den Markierungen
Nach dem Gespräch hat der Berater die Möglichkeit zur Nachbearbeitung des Termins. In diesem Schritt hat er folgende Möglichkeiten:
- Nachbearbeitung der Softfacts und des Fazits
- Sichere Synchronisation der Kundendaten mit dem Backend-System
Unsere Leistungen
Zusammen mit dem Kunden wurden auf Basis von mehrtägigen Workshops die Zielsetzungen der umzusetzenden Anwendung definiert. Der erste Workshop hatte die Zielsetzung, dass die Kundenberatern ihre Wünsche in Bezug auf die iPad Anwendung aufzählten und entsprechend detaillierte deren Funktionsumfang schilderte. Auf Basis des ersten Workshops wurde ein Wireframe erstellt, das den Bertaungsprozess in Form von GUIs mit sämtlchen Elemenenten und Intarktionselementen darstellt. Die darauf folgenden Workshops dienten noch dazu, die Details zu verfeinern und nachzubessern. Das Design der Anwendung erfolgt auf der siebten Version des Wireframe worauf zwei Unterschiedliche Designsvarianten im Vordergrund standen.
Die Entwicklung der nativen iPad App welche in Objective-C geschrieben wurde, basierte auf den Grundlagen der Workshops, dem Wireframe, den Designvorschlägen und den Rahmenbedingungen des Kunden.
Bei Fragen und Anregungen:
