Von klobig zu fesselnd: Die UI-Reise
(Informieren Sie sich über Erster Teil und Zweiter Teil zuerst!)
(Oder fahren Sie fort mit Vierter Teil!)
Willkommen zurück, Macher und Innovatoren! Dies ist Teil 3 unserer Blogserie "Badge Challenge", in der wir die Entwicklung unseres "Smart Badge" von Root3 Labs beschreiben.
Wir haben uns bereits mit dem frühen Designprozess und der Herstellung befasst, aber heute tauchen wir in die digitale Welt der Benutzeroberfläche (UI) ein. Es war ein langer Weg von der klobigen Demosoftware bis zur sauberen Badge-Benutzeroberfläche, die wir heute haben, also lesen Sie weiter, um zu sehen, wie wir es geschafft haben!
Das Display, das wir verwenden würden, wurde mit einer eigenen Demosoftware geliefert, und so begannen wir mit der Entwicklung der Software für den Badge. Es wurde jedoch schnell klar, dass die Demosoftware bestenfalls klobig war. Sie war für einen größeren Bildschirm konzipiert, fühlte sich aber auf unserem kleinen, runden Display beengt und unhandlich an. Wir hätten zwar eine funktionale Benutzeroberfläche hinbekommen, aber es wäre so gewesen, als ob wir versucht hätten, auf einem klobigen Touchscreen in der Größe einer Briefmarke im Internet zu navigieren. Wir wussten, dass wir es besser können!
Wir versuchten es mit dem Drag-and-Drop-UI-Builder des Herstellers, um die Dinge zu beschleunigen, aber er erwies sich als unflexibel und kostspielig und wurde schnell zu einer Sackgasse. Die Entschlüsselung der Eigenheiten des ursprünglichen Codes nahm eine ganze Woche in Anspruch. Die komplexe, verschachtelte Codestruktur war eine weitere Sackgasse, die unsere Programmierarbeit verlangsamte.
Aber wir machten weiter, entschlossen, diese klobigen UI-Knochen in etwas Funktionelles und Sauberes zu verwandeln. Es war definitiv nicht einfach, aber wir lieben Herausforderungen hier bei Root3 Labs.
"In bestimmten Momenten fühlte es sich beängstigend an, sicher. Brian Bock, UI-Designer bei diesem Projekt, zugegeben. "Anfangs haben wir nicht wirklich an all die zukünftigen Herausforderungen gedacht. Zunächst schien alles ganz einfach zu sein, aber als wir dann tiefer in die Software und die Programmierung eindrangen, wurde die Frist etwas knapper. Zum Glück konnte ich mich auf den Input von Christina und Chris verlassen, vor allem auf Chris' Fachwissen. Wir haben bei diesem Projekt sehr viel zusammengearbeitet, und ich glaube nicht, dass wir es sonst so schnell hätten umsetzen können."
Gestaltung einer benutzerfreundlichen Benutzeroberfläche:
Wir mussten das einzigartige kreisförmige Layout des Ausweises und die Einschränkungen bei der Bedienung mit nur einem Finger berücksichtigen. Die ersten Bearbeitungen der klobigen Demosoftware waren zwar funktional, aber weit von unseren Vorstellungen entfernt. Glücklicherweise ist Chris, unser elektrischer Leiter, so etwas wie ein Software-Assistent und konnte uns beim Brainstorming helfen.
Zunächst versuchten wir, den Bildschirm in vier Quadranten für verschiedene Funktionen zu unterteilen, dann wechselten wir zu einem Modell mit Registerkarten und zogen sogar verschiedene Wischgesten in Betracht. Letztendlich haben wir uns für eine "unsichtbare Schaltfläche" in der Mitte entschieden, die eine "Diashow" mit Seiten wie Kontaktinformationen, QR-Codes und dem Logo auslöst.
Ursprünglich wollten wir die herkömmliche Website-Benutzeroberfläche nachbilden, aber der Blick über den Tellerrand führte uns zur besten Lösung für das Problem. Die ursprüngliche Benutzeroberfläche war zwar funktional, aber nicht für den kleinen Bildschirm und die Interaktion mit einem Finger optimiert. Sie erinnerte uns eindringlich daran, dass das Medium die Benutzeroberfläche prägt. Diese Änderung der Denkweise bedeutete, dass wir nicht mehr versuchen mussten, ein Webbrowser-Erlebnis auf eine völlig andere Leinwand zu pressen. Eine Tastatur- und Mausschnittstelle würde auf einem kleinen Touchscreen niemals funktionieren, und ein einzelner Finger würde auf einem auf einen winzigen Kreis geschrumpften Webbrowser nicht gut funktionieren.
Die endgültige Schnittstelle mag einfach erscheinen, da die Navigation mit einem einzigen Tippen erfolgt. Aber dieses einfache Antippen des Bildschirms blättert durch jede Seite und bietet ein reibungsloses und intuitives Erlebnis für die Nutzer. Bei dieser Reise ging es nicht nur um Funktionalität, sondern auch darum, Grenzen zu überwinden und sie in innovative Lösungen zu verwandeln. Wir haben gelernt, dass die besten Benutzeroberflächen entstehen, wenn man die einzigartigen Eigenschaften des Geräts und des Benutzers versteht.
Das ist kein Fehler, sondern eine Funktion!
Unsere Suche nach einer benutzerfreundlichen Benutzeroberfläche war nicht ohne Hürden. Aber hey, wir sind Root3 Labs! Wir haben uns jeder Herausforderung gestellt und Umgehungsmöglichkeiten und Lösungen gefunden, die die Brillanz unseres Ausweises untermauern.
Während der Entwicklung stießen wir auf eine Reihe von Eigenheiten, wie z. B. eine Software-Macke, die sich als "Geisterklick" in der oberen linken Ecke des Bildschirms manifestierte. Es wäre ein unwillkommenes Phantomtippen gewesen, wenn es dort etwas zu klicken gegeben hätte. Aber unsere findigen Ingenieure sehen überall Möglichkeiten! Wir haben diesen "Bug" in ein Feature verwandelt, indem wir ihn in einen automatischen Bildschirmwechselzyklus umgewandelt haben. So kann man aus Zitronen Limonade machen (oder in diesem Fall aus Pixeln Magie)!
Wir hatten noch viele andere kleine Knoten zu entwirren, bevor diese Reise zu Ende war. Der Versuch, die Bildschirme in der richtigen Größe für das kreisförmige Layout zu bekommen, war bestenfalls knifflig. Das Hinzufügen neuer Bilder und das Ersetzen vorhandener Bilder erforderte einige komplexe Dateiformat-Zaubereien, ein Prozess, bei dem sich Chris wieder einmal als unschätzbar wertvoll erwies. Wir mussten sogar zu QR-Code-Flüsterern werden und sicherstellen, dass die Auflösung auf dem Bildschirm hoch genug für diese dichten Informationsquadrate war.
Es gab eine Einschränkung, die uns wirklich aus der Bahn werfen konnte. Das Display arbeitete mit einem statischen Bild, das einmal auf den Bildschirm geladen wurde. Dynamische Daten, wie Live-EKG-Messungen, schienen ein ferner Traum zu sein. Die Demosoftware bot zwar vorgefertigte Diagramme und Temperaturmesswerte, aber das waren statische Schnappschüsse und nicht die Echtzeit-Magie, die wir uns vorgestellt hatten. Diese Hürde sollte zum Sprungbrett für die nächste Phase werden und uns dazu bringen, innovative Lösungen zu finden, um dynamische Daten auf unserem Badge zum Leben zu erwecken.
Die Zukunft ist hell (und dynamisch):
Die unsichtbare Taste und unsere Funktion "Geisterklick" zeugen von unserer Fähigkeit, Einschränkungen in innovative Lösungen zu verwandeln. Aber seien wir ehrlich, ein einziges Antippen wird nicht ewig ausreichen. Wenn wir uns überlegen, Funktionen wie EKG-Messungen und andere dynamische Daten hinzuzufügen, stellt die Vorliebe des aktuellen Displays für statische Bilder ein Problem dar.
Selbst unsere aktuelle, benutzerfreundliche Schnittstelle hat ihre Grenzen. Stellen Sie sich vor, Sie müssten versuchen, eine EKG-Anzeige oder komplexe Anpassungsoptionen auf einen Bildschirm zu quetschen, der mit einem einzigen Fingertipp bedient wird. Das wäre nicht schön, und die Tap-to-Page-Funktionalität könnte mit neuen Funktionen inkompatibel werden.
Diese Herausforderungen sind mehr als nur Hürden; sie sind Sprungbretter für die nächste Phase der Entwicklung. Wir suchen aktiv nach Lösungen für die Anzeige dynamischer Daten, wie EKG-Messwerte, die über statische Bilder hinausgehen. Auch Software-Updates aus der Ferne sind auf unserem Radar, um sicherzustellen, dass alle Ausweise ohne physische Eingriffe auf dem neuesten Stand bleiben. Jede Herausforderung ist eine Gelegenheit, Grenzen zu überschreiten und ein noch vielseitigeres und benutzerfreundlicheres Smart Badge-Erlebnis zu schaffen.
Begleiten Sie uns auf dem nächsten Schritt:
Wir haben einen langen Weg zurückgelegt, von der klobigen Demosoftware bis zur heutigen intuitiven Benutzeroberfläche des Smart Badge. Aber das ist erst der Anfang! Besuchen Sie uns im vierten Teil, in dem wir diese Blogserie abschließen werden! Wir werden uns ansehen, wie es mit dem Smart Badge weitergeht, und mögliche Anwendungen und innovative Funktionen erkunden, an denen wir in Zukunft arbeiten wollen.
Sie fragen sich, wie Sie Ihr Produkt bekommen können?
Entwicklungsprozess richtig?
German 
English