Interior Designer App
Asım Oğuz, Dominik Pegler, Sophia Pum
HCI — Moodle — jitsi
Inhaltsverzeichnis
Termine
DONE M1: Problemanalyse
DONE M1: Präsentation Dominik Sophia Asim
DONE M2: Low-fidelity Prototypen
DONE M3: Erstellung der App
DONE M4: Usability Evaluierung, Weiterentwicklung, und Abschlussbericht
DONE M4: Präsentation
DONE Abschlussgespräch
Abschlussbericht
Team
| Asım Oğuz | Dominik Pegler | Sophia Pum | |
|---|---|---|---|
| Studium | Informatik | Psychologie | Informatik |
| Semester | 4. Sem. Bachelor | Letztes Sem. Bachelor | 4. Sem. Bachelor |
| Programmiererfahrung | Java, JS, C#, C++ | Python, Julia | Java, C++ |
| Interessen | Design | Problemlösen | Design |
Projektbeschreibung
Problemstellung:
Stellen Sie sich vor, Sie wollen ihre Wohnsituation verändern, Sie ziehen in eine neue Wohnung oder Sie planen sogar ein Haus zu bauen. Um sich inspirieren zu lassen, durchforsten Sie einschlägige Fachmagazine: Welcher Einrichtungsstil, welche Möbel würde meinen Vorstellungen entsprechen?
Ein Problem hierbei ist, zu verstehen, welche Gestaltungsmöglichkeiten der jeweilige Raum bietet und wie Möbel sinnvoll angeordnet werden sollten. Im Regelfall werden hierzu eine Vielzahl an Scribbles und Handskizzen gezeichnet. Auf diesen Vorgang sind Innenarchitekten und Designer spezialisiert. Ein gern verwendetes Hilfsmittel sind Zeichenvorlagen und Skizzenlineale, welche Basismaße für Möbel und anderer einrichtungsrelevanter Darstellungen beinhalten.
Dieses Projekt soll eine Raumplanungs-App erstellen, welche diese Vorgänge auch Laien zugänglich macht. Zum Besprechen beim Café, zum schnellen Visualisieren von Raumlösungen und zum Auswählen verschiedener Einrichtungsstile (e.g. minimal / rustikal / gemütlich).
- Aufgabenstellung und Ziele:
- Machen Sie Interviews mit potentiellen Nutzer*innen als Requirementanalyse
- Basierend auf dieser Datenerhebung überlegen Sie sich mehrere Zielgruppen und deren spezifische Anforderungen (e.g. Personas)
- Erstellen Sie einen Prototypen der es
- ermöglicht Skizzen leicht und schnell veränderbar nachzubilden und
- Empfehlungen für bestimmte Stile / Raumgrößen / andere Kategorien zur Verfügung stellt
- Evaluieren Sie die App mit Nutzer*innen
Meilenstein M1
Literaturrecherche
Autor: Dominik PEGLER
Automated interior design using a genetic algorithm (Kán & Kaufmann, 2017)
Kán und Kaufmann von der TU Wien stellen in dieser Arbeit aus dem Bereich des Automated Interior Design ein Verfahren vor, das auf Basis von vorgegebenen Informationen wie Raumgröße in der Lage ist, virtuelle Räume automatisch und selbstständig mit Möbeln und Einrichtungsgegenständen zu befüllen.
Dabei werden deren jeweilige Position und Ausrichtung im Raum so gestaltet, dass sie ästhetischen, ergonomischen und funkionellen Anforderungen optimal Rechnung tragen. Diese Anforderungen nennen sich Interior Design Guidelines.
Sie wurden für dieses Verfahren in mathematische Ausdrücke übersetzt und in eine Kostenfunktion integriert. Mittels eines Genetischen Algorithmus (GA) wird diese Kostenfunktion auf ein Minimum optimiert. Zusätzlich eweitert dieses Verfahren auch die Optimierung auf den transdimensionalen Raum: dadurch wird die automatische Auswahl von Gegenständen möglich. Ebenfalls optimiert wird die Zuordnung von Materialien zu den Möbeln und Einrichtungsgegenständen, um ein einheitliches Design und eine harmonische Farbgestaltung zu erreichen.
In einer Wahrnehmungsstudie wurde festgestellt, dass dieses Verfahren tatsächlich in der Lage ist, lebenswerte und sinnhafte Innenarchitekturen zu generieren. Im Vergleich zu von professionellen Designern generierten Layouts schnitten die automatisch generierten Layouts gut ab, wobei Küchen deutlich besser und Schlafzimmer deutlich schlechter bewertet wurden als jene der professionellen Innenarchitekten.
Augmented reality uses in interior design (Sandu, M., & Scarlat, I. S., 2018)
Weil Möbel zunehmend über Online-Shops gekauft werden und sich viele Kunden in der Folge nicht vorstellen können, wie neue Möbelstücke in ihrem Zuhause aussehen würden, lösen viele Unternehmen dies mit dem Einsatz von Augmented Reality (AR) in ihren Applikationen.
AR-Anwendungen sind in der Lage, die virtuellen Möbel auf dem Anwendungsbildschirm in eine physische Umgebung einzubetten, virtuelle Markierungen im Raum zu machen und über diese Größe und Größenverhältnisse im Koordinatensystem des Raums zu ermitteln. Der Benutzer kann also virtuelle Möbel auf dem Bildschirm auswählen und an einer beliebigen Stelle im Raum platzieren. Wesentlicher Bestandteil bei AR-Anwendungen ist dabei die Kamera des Smartphones.
In dieser Arbeit werden verschiedene AR-Anwendungen für Interior Design analysiert, dabei Vor- und Nachteile erhoben und in Folge eine AR-Anwendung vorgeschlagen, die die meisten aktuellen Probleme der Innenraumgestaltung löst.
Als Software-Frameworks für Augmented Reality wird ArToolKit vorgestellt, ein vielfach verwendetess und minimales Open-Source-Framework. Das ARToolKit-Tracking funktioniert wie folgt:
- Kamera nimmt Videos der realen Welt auf und sendet ans Programm
- Programm durchsucht alle quadratischen Formen in den Videos
- Wird ein Quadrat gefunden, errechnet die Software die Position der Kamera relativ zum schwarzen Quadrat.
- Sobald die Position der Kamera bekannt ist, wird das Modell aus dieser Perspektive gerendert.
- Modell wird auf dem Video der realen Welt gezeichnet (auf einer quadratischen Markierung).
- Das fertige Bild wird am Display angezeigt, auf dem virtuelle Gegenstände über die reale Welt gelagert sind.
Als App, die auf AR-Technologien aufbaut, wird IKEA place application genannt. Sie soll helfen, den Entscheidungsprozess beim Kauf von Einrichtungsgegenständen zu erleichtern. Bei ihr liegen die Fehlerbereich bei wenigen Zentimetern. Die App ist auch in der Lage, physische Objekte im Raum zu erkennen und etwas Ähnliches aus dem Online-Shop vorzuschlagen. Als Nachteil der IKEA-place-app wird genannt, dass Objekte manchmal völlig inkorrekt oder in inkorrekter Größe platziert. Ein weiterer Nachteil ist, dass nur Gegenstände aus dem IKEA-eigenen Store ausgewählt werden können.
Eine weitere Applikation ist die Houzz-App. Im Gegensatz zur IKEA-App kann diese App besser flache Oberflächen erkennen, was die genannten groben Fehler verringern kann. Obwohl auch diese App nicht ohne Nachteile auskommt (Freezing, uneinheitliches Cross-Device-Verhalten), ist sie einer von den Autoren gestarteten Umfrage zufolge beliebter als die App von IKEA. Das wird vor allem auf das Design zurückgeführt.
Als eine den Autoren nach sehr gute Lösung wird auch noch die App Homerstyler Interior Design genannt. Diese erlaubt auch Größenänderungen der Objekte in Echtzeit, vordefinierte leere Räume zu wählen und diese nach Belieben zu gestalten. Einziger Nachteil dieser App ist der Umstand, dass kein kompletter Raum-Scan möglich ist und nach der Umfrage ist sie wenig populär und liegt hinter jener von IKEA.
Der Lösungsvorschlag der Autoren wäre eine App, die die Möglichkeit bietet, nach dem Scan der Umgebung bestimmte Objekte oder alle Objekte entfernen zu können. Damit lässt sich ein Raum leichter oder von Grund auf neu gestalten. Es wäre auch eine Neuheit, da diese Funktion zum Zeitpunkt des Artikels in keiner Smartphone-Anwendung verfügbar war. Die Autoren schildern am Ende auch noch kurz, wie ein Algorithmus dafür aussehen könnte.
Inter AR: Interior decor app using augmented reality technology (Moares, R., Jadhav, V., Bagul, R., Jacbo, R., Rajguru, S., & K, R., 2020)
In diesem Artikel beschreiben die Autoren die Vorgänge, die in AR-basierten Interior-Design-Applikationen stattfinden. Ausgangspunkt sind hier zwei Algorithmen, die die reale Umgebung erfassen: der sogenannte Harris-und-Stephens-Ecken-Detektor-Algorithmus und der SLAM-Algorithmus (surface localization and mapping) zur Erfassung der Oberflächen.
Die Autoren nennen weiters fünf häufig verwendete Methoden von AR:
Markerbasierte AR (marker-based AR)
Verwendet visuelle Marker wie QR/2D-Codes oder NFT-Marker (tatsächliche Gegenstände). Nach der Markererkennung und der Kalkulation der Position und Ausrichtung wird der virtuelle Gegenstand platziert.
Ortsbasierte AR (location-based AR)
Diese Form der AR ist weit verbreitet und verwendet anstelle von Markern die im Gerät verbauten Sensoren zur Bestimmung der Position.
Projektionsbasierte AR (projection-based AR)
In diesem Verfahren wir Licht vom Gerät auf die Umgebung geworfen. Die Ergebnisse lassen Rückschlüsse über Position, Ausrichtung und Tiefe von Objekten zu.
Outlining AR
Diese Methode funktioniert mittels spezieller Kameras, die es ermöglichen Aufnahmen der Umgebung bei schlechten Lichtverhältnissen zu machen. Diese Methode hat Ähnlichkeit mit der projektionsbasierten AR und kommt in Parkassistenten von Autos zur Anwendung.
Überlagerungs-AR (superimposition-base AR)
Teilweise oder sogar vollständige Ersetzung der realen Umgebung eines Objekts durch eine virtuelle Umgebung desselben Objekts.
Im Rahmen dieses Artikels wurde eine AR-Applikation mittels markerloser AR erstellt. Für die 3D-Modelle wurde das Google Cardboard SDK verwendet.
Dabei wurden folgende Einschränkungen genannt: (1) Nicht alle Android-Geräte unterstützen AR-Technologien vollständig. Es gibt zwar Workarounds, doch sind diese nicht immer präzise. (2) Möbelobjekte werden aus dem Backend importiert und lokal gespeichert. Aufgrunddessen gibt es keine Photogrammetrie, mit der die Anwendung das Bild in ein 3D-Objekt konvertieren kann. (3) Die Anwendung erlaubt aufgrund der begrentenz Funktionen der Google Entwicklertools keine Platzierung von zwei oder mehr Objektinstanzen auf einer einzelnen Oberfläche.
Nichtsdestotrotz zeigte das Projekt, dass der Benutzer die virtuellen Möbel nach den eigenen Vorstellungen anpassen und in der realen Welt arrangieren kann. Über die Smartphone-Kamera kann der Benutzer die Oberflächen erkennen, die Möbel über die App auswählen und nach Wunsch auf dem Bildschirm platzieren. Eine Verknüpfung mit AI könnte für verschiedene Zwecke in Zukunft eine Rolle spielen.
Die Arbeit soll helfen, Menschen die Möglichkeit zu geben, selbst Designer zu sein und ihr Zuhause nach eigenen Vorstellungen zu gestalten. Ein solches System hat den Autoren nach viele Vorteile, weil dadurch auch bereits bekannte Limitationen von Möbelhäusern wie z.B. begrenze Auswahl an lagernden Möbelstücken an Gewicht verlieren.
Quellen
- Kán, P. & Kaufmann, H. (2017). Automated interior design using a genetic algorithm. Proceedings of the 23rd ACM Symposium on Virtual Reality Software and Technology, 1– 10. https://doi.org/10.1145/3139131.3139135
- Moares, R., Jadhav, V., Bagul, R., Jacbo, R., Rajguru, S., & K, R., Inter AR: Interior decor app using augmented reality technology (2020). Social Science Research Network. https://papers.ssrn.com/abstract=3513248
- Sandu, M., & Scarlat, I. S. (2018). Augmented reality uses in interior design. Informatica Economica, 22(3/2018), 5-13. http://dx.doi.org/10.12948/issn14531305/22.3.2018.01
Konkurrenzprodukte
Autorin: Sophia PUM
Die wahrscheinlich bekannteste Interior-Design-App auf dem Markt ist Houzz (Abb. 2). Mit Millionen von qualitativen Bildern von Badezimmern, Wohnzimmern, Küchen, Möbeln und wo weiter bietet sie den Nutzenden viel Inspiration und die Möglichkeit sich einen Eindruck von verschiedenen Einrichtungen und Farbkombinationen zu schaffen. Praktisch ist die Funktion, dass man sich eigene persönliche Entwürfe speichern kann. Außerdem kann man sich auch mit einer User-Community austauschen und gegenseitig inspirieren.
Der größte Vorteil der App ist die große Menge an Bildern von Gestaltungsmöglichkeiten in verschiedenen Stilen, die sie beinhaltet. Nutzer verwenden Sie vor allem um sich Inspiration zu holen.
Ein Nachteil ist, dass sich die App Großteiles auf die Einrichtung von Häuser und Hausbau spezialisiert. Obwohl sie angibt für alle Wohnungen geeignet zu sein, findet man auf den Fotos auch hauptsächlich große, helle Räume. Das ist vor allem für junge Leute, die oft in kleinen Wohnungen oder WG-Zimmern wohnen unpraktisch.
Generell ist die App nicht wirklich auf junge Leute ausgerichtet und könnte sich in der Hinsicht verbessern. Denn diese nutzen oft schon bekannte Apps wie Instagram oder Pinterest zur Inspiration. Für sie hat es dann wenig Sinn eine zusätzliche App herunterzuladen, die nicht einmal ihre Wünsche abdeckt. Das ist meiner Meinung nach definitiv ein Nachteil, denn gerade Anfang 20 ziehen viele Menschen um und wären potentielle Nutzerinnen und Nutzer einer Einrichtungs-App.
Abbildung 2: Houzz App
Ikea Place ist die Einrichtungs-App vom Möbelhaus Ikea (Abb. 3). Mithilfe einer Augumented-Reality-Technologie kann man sehen wie die Ikea-Produkte in den eigenen Räumlichkeiten aussehen würden. Die Gegenstände werden dreidimensional und maßstabsgetreu nachgestellt. Zusätzlich gibt die App auch Tipps zur Einrichtung. Das Ziel der App ist es, dass sich jeder von zuhause aus einen besseren Eindruck von den Möbeln machen kann.
Der größte Vorteil der App, ist meiner Meinung nach, dass alle Funktionen und Produkte von Ikea ist. Man kann sich die Möbel von zuhause aus ansehen und hat durch die moderne Technologie einen guten Einblick drauf, wie sie in die Wohnung passen würden. Im Ikea-Onlineshop kann man die Produkte im Anschluss sofort bestellen und sich liefern lassen. So erfolgt das Einrichten rasch und unkompliziert.
Allerdings hat Ikea hauptsächlich Möbel im modernen-skandinavischen Stil und Nutzende haben nicht die Möglichkeit verschiedene Gestaltungsarten auszuprobieren. Außerdem kann man nur eine beschränkte Anzahl der Ikea-Produkte in der Ikea Place App verwenden.
Abbildung 3: Ikea Place App
Auch bei Homestyler Interior Design & Deko-Ideen (Abb. 4) kann man Fotos von seinen Räumlichkeiten in die App laden und mit einer großen Menge an Farben, Materialien und Möbel bearbeiten und umgestalten. Sie bietet eine gute Einsicht darauf, wie sich gewisse Änderungen im Raum machen würden. Auch hier gibt es eine User-Community zum Austausch von Ideen und Entwürfen.
Die App bietet viele Gestaltungsmöglichkeiten und ist einfach zu handhaben. Sie enthält 3D-Modellen von Möbeln verschiedener Marken, und bietet so die Möglichkeit viele verschiedene Stile auszuprobieren
Ein Feature an dem es der App aber fehlt, ist die Möglichkeit einen leeren Raum zu erstellen um seine Ideen komplett neu zu entfalten.
Abbildung 4: Homestyler App
Nutzer- & Kontextanalyse
Nutzeranalyse
Autor: Dominik PEGLER
- Aufgaben der Nutzer
- Schnelles und unkompliziertes Skizzieren von Innenarchitekturen
- Schnelle und unkomplizierte Visualisierung der gestalteten Innenarchitekturen
- Die eigenen Vorstellungen anderen Personen einfach und anschaulich zu kommunizieren
- Ziele der Nutzer
- Zeit- und Kostenersparnis, weil keine Beratung durch Innenarchitekt*in nötig ist und die App an Ort und Stelle hilfreich ist
- Konkretere Vorstellungen zu entwickeln
- Bessere und nachhaltigere Entscheidungen zu treffen
- Potenzielle Probleme mit dem System
- Die User fühlen sich von der App nicht angesprochen.
- Die Funktionalitäten oder Auswahlmöglichkeiten sind zu eingeschränkt, z.B. gibt es nur eine bestimmte Art von Möbeln oder Objekten, die über die App darstellbar sind, oder es gibt technische Limitationen mehre virtuelle Objekte gleichzeitig darzustellen.
- Die User sehen den Nutzen nicht (wegen Art des Aufbaus der App nicht klar ersichtlich)
- App bringt keinen Zusatznutzen zu bereits vorhandenen Tools
- User können Aufbau und Logik des Programms nicht nachvollziehen
- Zu lange Ladezeiten (bei mobilen Apps noch wichtiger als bei Webapps!)
- Freezing oder Absturz der App
- Smartphone genügt den Anforderungen nicht
- Userpfade:
Wie können User die App downloaden?
Über den jeweiligen Appstore oder über einen Link, der von einer dritten Person zugesendet wird.
Welche Hilfestellungen werden mit der App mitgeliefert?
Eigener Menüpunkt, der zu einer mobilen Hilfeseite mit Problem-Kategorien und einer Suchfunktion führt.
Wie sieht die Erstbenutzung aus?
Es sind keinerlei Registrierungen notwendig. Die Nutzer gelangen sofort in ein Menü, in dem sie die gewünschte Aktion auswählen können. Es sollte möglich sein, bereits 5 Bildschirmberührungen ein Ergebnis zu bekommen. Zum Beispiel mittels Defaulteinstellungen.
Was sind die Anreize, die App wiederzuverwenden?
Gute Ersterfahrungen sind der wichtigste Grund, die App wiederzuverwenden. Die Ersterfahrung muss bereits den Nutzen der App demonstrieren und zu einem Erfolgserlebnis führen.
- Nutzergruppen
Die User teilen sich auf viele große Gruppen auf, da es sich beim Thema Wohnen um etwas handelt, das jeden von uns betrifft und die meisten Menschen in der Lage sind, ihre Wohnsituation selbst zu gestalten. Aus diesem Grund sind Kinder und Jugendliche unter 15 Jahren sind mit großer Wahrscheinlich weniger stark vertreten, ebenso sehr alte Personen und Personen mit starken neurobiologischen Beeinträchtigungen.
- Kategorienbildung nach Alter und Fachwissen
Vorteil: Alter und Expertise hängen stark mit der Art der Nutzung von Smartphones (Phänomen aus den letzten 15 Jahren) und speziellen Tools zusammen. Alter ist einfacher zu erfassen als Smartphone literacy.
ID Nutzergruppe J Jüngere Menschen (15–35 Jahre) ohne professionellen Background im Bereich Innenarchitektur M Menschen im mittleren Alter (36–60 Jahre) ohne professionellen Background A Ältere Menschen (60–80 Jahre) ohne professionellen Background JM+ Menschen im jungen oder mittleren Alter mit professionellem Background A+ Ältere Menschen mit professionellem Background - Mögliche andere Kategorienbildung
- Bildung
- Einkommen
- Smartphone/Computer literacy
- Kategorienbildung nach Alter und Fachwissen
Kontextanalyse
- Benutzer hat keine Vorstellung von möglichen innenarchitektonischen Designs
- Benutzer hat keine professionellen Kenntnisse und keine Tools zur Veranschaulichung zur Hand
- Benutzer hat auch sonst keine ergänzenden Hilfsmittel wie Zeichenstifte und Papier zur Hand
- Benutzer besitzt ein Smartphone auf dem aktuellen Stand der Technik
- Bedarf zur Verwendung der App
- entsteht außerhalb von professionellen Settings
- kann fast an jedem Ort und Situation entstehen
Personas
Primäre Persona #1
Autor: Asım OĞUZ
Abbildung 5: "Tobias Ebner"
- Name: Tobias Ebner
- Typ: Idealist
- Credo: Mit minimalem Aufwand maximalen Erfolg erreichen
Background:
Tobias Ebner, der 25 Jahre alt ist, hat vor kurzem seine Ausbildung abgeschlossen und arbeitet nun als Vollzeit Grafik Designer. Da er jetzt ein höheres Budget zur Verfügung hat will er aus der WG ausziehen und zum ersten mal in seinem Leben alleine leben. Wie sein Job es auch vermuten lässt mag Tobias Ebner gut durchdachte Designs, daher ist es ihm auch wichtig vor dem Umzug alles so gut wie möglich durch zu planen. Tobias Ebner erleichtert sich immer die Arbeit in dem er sich nützliche Tools findet.
- Abneigung: Zeitverlust
- Männlich, 25 Jahre
- Nationalität: Österreich
- Familienstand: Single
- Beruf: Grafik-Designer
- Berufserfahrung: 1 Jahr
- Einkommen: EUR 30.000 / Jahr
- Nutzung mobiler Geräte: 8h / Tag
- Verwendete Technologien: Android Smartphone, iPad, Windows-Laptop, Windows-Desktop-PC
Primäre Persona #2
Autorin: Sophia PUM
Abbildung 6: "Carina Winkler"
- Name: Carina Winkler
- Typ: Rational
Background:
Carina Winkler ist 32 Jahre alt, verheiratet und arbeitet als Ärztin in einer Arztpraxis in Wien. Nun möchte sie ihren Traum verwirklichen und gemeinsam mit ihrem Mann eine eigene Arztpraxis eröffnen. Außerdem wollten sie und ihr Ehemann schon lange aus ihrer kleinen Wohnung in der Wiener Innenstadt ausziehen und in ein Haus außerhalb der Stadt ziehen. Ihr Plan ist es, ein Haus mit Arztpraxis und privatem Wohnbereich einzurichten. Da beide beruflich viel zu tun haben und sich zusätzlich nicht zu viel mit dem Umzug stressen wollen, freuen sie sich über jede Art von Unterstützung. Ihr Wunsch ist ein Umzug der unkompliziert sowie stressfrei verläuft, aber trotzdem ihre Wohnträume erfüllt. Sie ist bereit, sich Zeit zu nehmen und den Umzug inklusive der Einrichtung gut zu planen, damit es zu keinen unüberlegten Entscheidungen kommt und sie mit dem Endergebnis langfristig zufrieden ist. Carina ist offen dafür Neues auszurobieren, solange es zu einer effizienteren Problemlösung beiträgt und keine zusätzlichen Schwierigkeiten bedeutet.
- Ziele:
- Ein unkomplizierter, effizienter Umzug
- Eine Einrichtung, die langfristig gefällt
- Neues ausprobieren, ohne viel zu riskieren
- Motivation:
- Übersichtlich organisierte Pläne
- Praktische Herangehensweise
- Abneigung:
- Strukturlosigkeit
- Unüberlegte und hektische Entscheidungen
- Weiblich, 32 Jahre
- Nationalität: Österreich
- Familienstand: Verheiratet
- Beruf: Ärztin
- Berufserfahrung: nicht bekannt
- Einkommen: EUR 60.000 / Jahr
- Nutzung mobiler Geräte: nicht bekannt
- Verwendete Technologien: iPhone, iPad, Windows-Laptop, Windows-Desktop-PC
Sekundäre Persona:
Autorin: Sophia PUM
Abbildung 7: "Felix Schuster"
- Name: Felix Schuster
- Typ: Rational
Background:
Felix Schuster ist 20 Jahre alt und zum Studieren nach Wien gezogen. Er hat ein günstiges WG-Zimmer im Internet gefunden und zieht das erste Mal von zuhause weg. Felix ist extravertiert und viel unterwegs, entweder zum Lernen auf der Bibliothek oder er unternimmt etwas mit Freunden. Sein Wohnraum dient hauptsächlich zum Schlafen und er ist selten zuhause. Er möchte sich sein Zimmer schön einrichten und sich darin wohlfühlen, allerdings hat es für ihn keinen hohen Stellenwert und dient auch nicht zur Selbstverwirklichung. Er möchte flexibel bleiben und wird voraussichtlich nur für ein paar Jahre dort wohnen, somit will er nicht zu viel Zeit oder Geld mit der Gestaltung seines Zimmers verschwenden. Grundsätzlich ist er aber ein offener und moderner Typ und probiert auch gerne Neues aus, allerdings mag er es gerne unkompliziert und bequem.
- Ziele:
- Ein unaufwändiger Umzug
- Eine minimalistische Einrichtung, die das Nötigste abdeckt
- Neues ausprobieren, ohne zu viel zu riskieren
- Motivation:
- Interessiert an modernen Trends
- Bequeme Herangehensart
- Spontane Entscheidungen
- Abneigung:
- Strenge Pläne und Vorschriften
- Eingeschränkte Möglichkeiten
- Männlich, 20 Jahre
- Nationalität: Österreich
- Familienstand: Single
- Beruf: Student
- Berufserfahrung: nicht bekannt
- Einkommen: -
- Nutzung mobiler Geräte: nicht bekannt
- Verwendete Technologien: Android Smartphone, Windows-Laptop
Negative Persona
Autor: Asım OĞUZ
Abbildung 8: "Sabine Gruber"
- Name: Sabine Gruber
- Typ: Guardian
- Credo: Der beste Weg ist der, den man kennt
Background:
Sabine Gruber ist eine 64-jährige Verkäuferin, die schon seit mehr als 20 Jahren im selben Geschäft in derselben Stelle arbeitet. Sabine Gruber ist verheiratet und lebt mit ihrem Ehemann zusammen in Wien. Das Umsteigen auf Neues fällt ihr sehr schwer und daher mag sie es auch nicht, Neues auszuprobieren. Wenn sie mal etwas findet, das ihr gefällt, hält sie sehr lange daran fest, seien es Gegenstände als auch Designs.
- Abneigung: Etwas Neue ausprobieren
- Weiblich, 64 Jahre
- Nationalität: Österreich
- Familienstand: Verheiratet
- Beruf: Verkäuferin
- Berufserfahrung: 37 Jahre
- Einkommen: EUR 22.000 / Jahr
- Nutzung mobiler Geräte: 2h / Tag
- Verwendete Technologien: iPhone
Aufgabenanalyse
Die Aufgabenanalyse veranschaulicht in Form von Use-Cases für die primären Personas die Wichtigkeit der einzelnen Aufgaben, die die User haben, um zum Resultat zu kommen.
Autor: Asım OĞUZ
| Task\User | Carina Winkler | Tobias Ebner |
|---|---|---|
| App downloaden | + | + |
| Raum fotografieren | + | + |
| Möbel scannen | ~ | ~ |
| Vorhandene Möbel auswählen | + | + |
| Raum gestalten | ~ | ~ |
| Design abspeichern | + | + |
Projektmanagement
Autor: Dominik PEGLER
Für das Projekt-Management haben wir auf github eine einfache HTML-Seite erstellt, auf der man sich über den aktuellen Stand des Projekts informieren kann und die nächsten wichtigen Termine wie Meilensteine und Präsentationen bekommt. Über das gesame Projekt wird hier Buch geführt, außerdem entsteht im selben github-Repository der Source-Code der App. All diese Dinge sind öffentlich zugänglich.
Team
Das Team besteht aus Asim Oguz und Sophia Pum, beide studieren im 4. Semester des Bachelorstudiums Informatik, sowie aus Dominik Pegler, Student im letzten Bachelor-Semester Psychologie. Für die Aufteilung der Tätigkeiten sind wir so vorgegangen, dass wir untereinander vorab abgeklärt haben, über welches Wissen und welche Fähigkeiten jedes Mitglied der Gruppe verfügt und was es im Laufe der Lehrveranstaltung verbessern möchte. Sophia Pum ist kreative Ideengeberin im Projekt und auch wesentlich in die Umsetzung involviert, da sie bereits einige Programmiererfahrung hat. Asim Oguz hat viel Erfahrung mit JavaScript und wird in der React-Entwicklung eine ganz wichtige Rolle spielen, dazu zeigt er viel Interesse für Design. Dominik Pegler bringt Wissen aus seinem Psychologie-Studium mit und interessiert sich viel für Daten und Programmierung. Er wird neben dem Projektmanagement auch in die Programmierung und Datenverarbeitung involviert sein. Da wir alle drei flexibel sind, ergibt sich die Aufgabenverteilung bei uns im Team nicht von selbst, sondern kann kurzfristig bestimmt und je nach Bedarf angepasst werden.
Ziele
Ziel ist es, ein schlüssiges Konzept einer Anwendung und einen soliden Prototypen zu entwickeln und dabei die Interaktion für die User so simpel wie nur möglich zu gestalten. Idealerweise können wir das Projekt später in die Realität umsetzen oder zumindest Teile davon. Ein weiteres Ziel ist es, dass wir uns im Laufe der Entwicklung mit uns noch weniger bekannten Technologien beschäftigen und zu Erkenntnissen kommen, die zu neuen Ideen führen.
Nicht-Ziele des Projekts
Zu unseren Zielen zählt es nicht, bereits Bestehendes zu wiederholen, auch möchten wir vermeiden, dass wir Funktionen implementieren, die keinen zusätzlichen Nutzen bringen.
Bisherige Aufgabenverteilung
| Aufgabe | Person |
|---|---|
| Literaturrecherche | Dominik Pegler |
| Konkurrenzanalyse | Sophia Pum |
| Nutzer- & Kontextanalyse | Dominik Pegler |
| Personas: 1 primär, 1 negativ | Azim Oguz |
| Personas: 1 primar, 1 sekundär | Sophia Pum |
| Aufgabenanalyse | Azim Oguz |
| Projektmanagement | Dominik Pegler |
Präsentation M1
Notizen zum Konzept
- automatische Gestaltung (Algorithmus) vs. manuelle Gestaltung (Benutzer) vs. Hybridform?
- Alleinstellungsmerkmale?
- z.B. Einbindung von Secondhand-Plattformen wie willhaben.at (Anbieter kann dort die wesentlichen Maße eintragen, App benötigt dann nur noch 2–3 Bilder, um den Gegenstand realistisch zu erfassen => Image-Processing-Schritt nötig zum Hochrechnen von Bildern mit niedriger Qualität oder der nicht sichtbaren Stellen)
- Oder auch die Möglickeit, die eigenen Möbel als Objekte schnell mit der App zu erfassen und diese digitalen Möbel and Freunde, Bekannte oder Interessenten zu schicken.
- Möglichkeit, die eigenen Möbel auch in eine andere, virtuelle oder reale, Umgebung einzubetten. Zum Beispiel, wenn man die eigenen Möbel verkaufen möchte.
- Weitere Beispiel-App: Roomle https://apps.apple.com/us/app/roomle-3d-ar-room-planner/id732050356
- Grundriss-Modus
- Kritik von Usern: Mühsam Grundrisse zu erstellen, Wände richtig in die Länge zu ziehen, kein Zwischenspeichern möglich, keine Zurücktaste
- Nichtkommerzieller Charakter der App
Meilenstein M2:
Ideensammlung
Autor*innen: Dominik Pegler, Sophia Pum
Um eine Vielfalt an Ideen möglichst umfangreich und vollständig abbilden zu können und dabei nicht den Überblick zu verlieren, haben wir uns für eine Mind-Mapping-Technik entschieden. Im ersten Schritt haben wir uns gefragt, worum es sich bei unserem Projekt überhaupt handelt. Die Antworten darauf bildeten sozusagen die erste Ebene unserer Mindmap. In den Folgeschritten wurde diese erste Ebene erweitert und um neue, darunterliegende, Ebenen ergänzt. Beim Grad der Ausdifferenzierung der einzelnen Knotenpunkte haben wir uns kein Limit gesetzt. Wir wollten erstmal nur sehen, welche Aspekte in uns mehr Wunsch nach Detailreichtum auslösten.
Die weitere Strukturierung der Mindmap erfolgte zwei Tage später. Die folgenden drei Aspekte möchten wir als für uns wichtig festhalten.
- Es handelt sich um eine mobile App. Das bedeutet, dass wir den Fokus besonders auf Simplizität der Bedienoberfläche und möglichst verzögerungsfreie Rückmeldungen der Applikation an den User legen werden. Mit Simplizität meinen wir konkret eine minimale Anzahl an verschiedenartigen Screens, Text nur dort, wo es wirklich nötig ist und es keine aussagekräftigen Icons gibt. Um die Aufmerksamkeit der User nicht auf das Interface zu lenken, sondern davon weg auf deren Aufgaben, vermeiden wir auch Hell-Dunkel- sowie Farbkontraste überall dort, wo es nicht notwendig ist. Wir denken hier an maximale Anzahl von 3 verschiedenen Farben. Die User sollen das Gefühl haben, durch die App "hindurchzublicken". Es soll ein Werkzeug sein und nicht die ganze Aufmerksamkeit der User erfordern.
- Für das Design haben wir unterschiedliche Motivationen. Die Hauptfunktionen aller Prototypen sollen das Einscannen, Umgestalten und Einrichten von Räumen sein. In allen Entwürfen möchten wir es ermöglichen, diese Funktion mit nur wenigen Klicks einfach zu erreichen. Aussagekräftige Icons und Bilder sowie wenig Text und eine reduzierte Anzahl von ScreensGenerell wollen wir alle Prototypen klar und minimalisitsch designen, um eine übersichtliche und simple Struktur zu bewahren. Bei der Gestaltung der Nutzeroberfläche haben wir uns unter anderem von ähnlichen Apps inspirieren lassen. Weiters soll es bei jedem Prototyp verschiedene Lösungen geben, wie man gespeicherte Möbel durchschauen kann. Eine Möglichkeit würde das über einen zusätzlichen Menüpunkt lösen, bei dem man Möbel scannen, speichern und durchsuchen kann. In einer weiteren Möglichkeit könnte es einen zweiten Punkt geben, in dem man gespeicherte Räume ansehen und bearbeiten kann. Eine dritte Möglichkeit wäre es noch, die Gestaltungsobjekte beim Raum selbst designen zu können. All das möchten wir in Prototypen-Gestaltung versuchen miteinzubeziehen.
- Die Funktion des Scannens eigener Gegenstände möchten weiterhin im Projekt behalten, da es für uns ein essenzieller Bestandteil des Konzepts ist und unserer Meinung nach ein wichtiges Argument für die Verwendung der App darstellt. Andere Anbieter erlauben es nur, Gegenstände aus entweder dem eigenen Produktkatalog oder zumindest aus einer limitierten Anzahl an Marken und Beispielmöbeln zum Gestalten der Räume zu verwenden. Wir sehen diese Funktion nicht nur als reine Funktion, sie ist auch nicht mal wesentlich für das UI, aber als potenziell eigenständige Plattform zum Austausch von Gegenständen, insbesondere von Möbelstücken. Auch wenn dies bereits ein Projekt im Projekt darstellt, wollen wir wollen wir versuchen, diese Funktionalität bei Designentscheidungen immer im Hinterkopf zu behalten.
Low-Fi-Prototypen
Prototyp von Sophia
Autorin: Sophia Pum
Es gibt zwei Start-Screens (Abb. 9), zwischen die man durch wischen navigieren kann. Am ersten Screen sieht man den Schriftzug „Start Designing“ mit einer kurzen Beschreibung darunter, was einem erwartet und einem Button „Raum Designen“. Als Hintergrund würde ich ein schlichtes Bild eines minimal gestalteten Raums einfügen. Danach erscheinen vier Felder zum Auswählen, die jeweils mit einem Titel und einem Icon gestaltet sind. Die ersten beiden Felder „Kamera“ und „Fotoalbum“ ermöglichen einen entweder direkt mit der Kamera oder mithilfe gespeicherten Albumfotos den Raum einzuscannen und anschließend zu bearbeiten. Ist der Raum fertig eingescannt kann man mithilfe des Menü-Buttons rechts oben Möbel platzieren und andere Umgestaltungen wie z.B. Wandfarbe ändern durchführen. Mit dem Feld „Leerer Raum“ kann man einen komplett neuen Raum erstellen und gestalten und unter „gespeicherte Räume“ findet man bereits bearbeitet Räum und kann diese weiter anpassen.
Abbildung 9: Prototype Sophia: Screens 1 – 2
Am zweite Start Screen, den man durch einmal nach links wischen sehen kann, steht „Discover Ideas“, auch eine kurze Beschreibung und einen Button mit „Katalog durchstöbern". Hier würde ich als Hintergrundbild ein Foto von einem schlichten Möbelstück oder ähnliches platzieren. Betätigt man den Button kommt man zu einem Screen (Abb. 10) mit Fotos und Ideen. Oben ist eine Slideshow mit fertig gestalteten
Abbildung 10: Prototype Sophia: Screens 3 – 4
Wohnräumen, die zur Inspiration dienen sollen. Man kann sie durch wischen steuern oder anklicken und durch eine Fotogalerie navigieren (Abb. 11). Unter der Slideshow steht „Wohnideen“ und darunter findet man verschieden Kategorien, die durch Icons und Namen dargestellt werden und verschiedene Möbelstücke anzeigen lassen. Unter „Meine Möbel“ kann man selbst Möbel einscannen und in der App abspeichern.
Abbildung 11: Prototype Sophia: Screens 5 – 6
Prototyp von Asım
Autor: Asım OĞUZ
Abb. 12 zeigt eine simple Startseite, auf der man gleich den ersten Schritt sieht den man machen muss. Und zwar einen Raum zum Gestalten auswählen.
Abbildung 12: Prototype Asım: Screen 1
Auf Abb. 13 gibt es zwei Möglichkeiten einen Raum auszuwählen:
Raum fotografieren
Bei diesem Schritt wird die Kamera geöffnet und der User kann den gewünschten Raum fotografieren und das Bild importieren.
- Einen Raum aus den Vorhandenen Designs auswählen
Abbildung 13: Prototype Asım: Screen 2
Abb. 14: Falls man einen Raum aus den Vorhandenen Designs auswählen möchte werden die als Liste die man durchscrollen kann angezeigt. Durch einen Tab kann man ein Design auswählen.
Abbildung 14: Prototype Asım: Screen 3
Nach dem ein Raum ausgewählt wurde besteht auf Abb. 15 die Möglichkeit Möbel zu importieren. Dies geschieht in dem man auf das "+" Button klickt.
Abbildung 15: Prototype Asım: Screen 4
In Abb. 16 kann man durch das Berühren eines Möbelstückes dieses in den Raum importieren.
Abbildung 16: Prototype Asım: Screen 5
Abb. 17: Der Schritt zum Möbel importieren wird mehrmals ausgeführt bis man alle gewünschten Möbel sieht. Die Importieren Möbel können durch zeihen durch den Raum bewegt und an die gewünschte Position gebracht werden. Sobald der Raum nach Wunsch gestaltet wurde kann man ihn mit dem Export Button in die Galerie abspeichern.
Abbildung 17: Prototype Asım: Screen 6
Prototyp von Dominik
Autor: Dominik Pegler
Mein Ziel war es, eine grobe Skizze einer Interior-Designer-App anzufertigen, die vor allem auf die Punkte aus der Mindmap abzielt, die eine einfache Bedienung und ein reduziertes UI forcieren.
Die Abb. 18 stellt den Erstkontakt der User mit der App dar. Die App fragt die User, was sie denn jetzt machen möchten und gibt ihnen dabei zwei Optionen: (1) eine Seite mit früheren Projekten aufzurufen oder (2) ein neues Projekt zu beginnen ("start scanning"). Man könnte hier bereits einen Button für Einstellungen integrieren, in diesem ersten Designvorschlag fehlt dieser jedoch noch.
Abbildung 18: Prototype Dominik: Screen 1
Gehen wir davon aus, dass ein User oder eine Userin den Button mit der Kamera angetippt hat, so finden wir uns in Abb. 19 wieder – im Scanprozess. Um die App mit möglichst großer Menge an Daten zu versorgen, werden die User gebeten, sich im Raum herumzudrehen. Die App gibt vor, welche Bereiche im Raum noch mehr Scandurchgänge benötigen, um ein präzise Berechnung der Raummaße möglich zu machen. Eine Statusleiste zeigt den Fortschritt im Scanprozess an. Die User können den Scanprozess jederzeit mit Berührung des X-Buttons abbrechen. Ansonsten ist dieser beendet, wenn die App ausreichend Informationen zur Berechnung des Raums hat, visualisiert durch das Symbol mit dem Häkchen und der knappen Message "finished!".
Abbildung 19: Prototype Dominik: Screens 2 – 3
Nach dem erfolgreichen Scanprozess teilt die App den Usern mit, zu welchem Ergebnis sie gekommen ist (Abb. 20). Sie möchte vom User nur noch kurz wissen, ob sie ihre Arbeit gut gemacht hat und die Maße des Raumes stimmen. Ist das der Fall, betätigt der User oder die Userin den Button mit dem Häkchen und gelangt ins Menü zur Auswahl der Gegenstände, die man im Raum platzieren kann. Man kann hier über ein Suchfeld nach Objekten suchen oder durch eine Liste an Objekten (selbst erstellte wie auch Beispiel-Objekte) scrollen.
Abbildung 20: Prototype Dominik: Screens 4 – 5
Hat man sich für ein Objekt entschieden (Abb. 21), wird dieses Objekt am Bildschirm angezeigt. Man kann dieses dann über die Pfeil-Buttons drehen und damit von verschiedenen Seiten betrachten. Tippt man erneut auf das Objekt, wird es dem Raum hinzugefügt. Dabei ermittelt die App eine freie Stelle und platziert das Objekt im Raum. Die User können das Objekt durch Antippen und Ziehen im Raum bewegen. Weitere Prototypen-Skizzen sollen an diese erste Studie anknüpfen und die gezeigten Funktionalitäten mit mehr Detailreichtum demonstrieren.
Abbildung 21: Prototype Dominik: Screens 6 – 7
Evaluierung der Prototypen
Prototyp von Sophia
- Feedback von Person A (Autor: Asım OĞUZ)
Die erste Seite dieses Prototypen sieht zu leer aus diesem würde ein Hintergrundbild weiterhelfen. Der zweite Screen ist simpel und verständlich alle Funktionen sind ersichtlich, diese Seite ist gut designt, jedoch könnte man vielleicht bei der Kamera dazu schreiben, dass man scannt und nicht fotografiert. Auf der Scan Seite ist unklar wie man den Scan abschließt bzw. beendet. Es ist unklar was man nach dem Scannen machen muss. Wie fügt man Möbel hinzu? Wie speichert man ab? Diese fragen bleiben unbeantwortet. Die letzte Seite, die mit Wohnideen, ist eher wie eine Desktop Webseite aufgebaut, daher sind die Bilder zu klein. Hier würde es helfen die Abstände zwischen den Bilder zu verkleinern, dadurch würde man Platz gewinnen, welches man für die Vergrößerung der Bilder benutzen kann.
- Feedback von Person B (Autorin: Sophia PUM)
Dieser Prototyp ist auch sehr minimal gestaltet und obwohl ein klare Design gut passt könnten, vor allem die ersten beiden Home-Screens, etwas lebhafter gemacht werden, z.B. durch Bilder oder Farben. Das Menü beim „Raum Designen“ wird durch die vier Felder gut dargestellt. Durch die Wörter und Icons ist klar welche Funktion dahinter steckt. Allerdings ist es nicht ganz nachvollziehbar was genau jetzt passiert wenn man z.B. auf „Kamera“ drückt. Beim Raum bearbeiten ist das Icon um Möbel einzufügen nicht sehr optimal, bzw. fehlt dafür eine Beschreibung. Der Katalog ist schön und sehr übersichtlich gelöst. Eventuell sind es zu viele Fotos auf einmal, was sich vielleicht dem sonstigen minimalistischen Design widerspricht.
- Feedback von Person C (Autor: Dominik Pegler)
Die interviewte Person zeigte sich zunächst über den Satz "Start Desiging" am Startbildschirm irritiert, fand sich dann aber relativ schnell im Design zurecht.
Am zweiten Bildschirm war die Bedeutung der Icons nicht ganz klar. Inbesondere fragte die Person nach der Bedeutung von "Kamera" und "Fotoalbum": "Warum sollte ich jetzt auf Fotoalbum klicken? Mir ist das nicht klar." Es wäre vielleicht gut, eine kurze Beschreibung anzufügen oder zumindest einen sprechendere Untertitel, welche Funktion mit diesen Buttons ausgelöst werden.
Zum Gesamteindruck meinte der Testuser, dass das UI insgesamt sehr nüchtern sei und er es für eine App dieser Art gerne etwas bunter und kreativer hätte. Auf der anderen Seite sei es aber auch wiederum cool, dass das Design so aufgeräumt wirkt.
Während der Beurteilung dieses Prototypen kamen dem Testuser auch Ideen für Erweiterungen: So könnte man beispielsweise auch Pflanzen integrieren, und eine Art "Randomfunktion", bei der ein Zufallsartikel (der dann bei einem Webshop gekauft werden kann) automatisch im Raum platziert wird, für Überraschung sorgen könnte.
Prototyp von Asım
- Feedback von Person A (Autor: Asım OĞUZ)
Das erste was an diesem Prototypen auffällt ist die Navbar mit dem Namen “Interior Designer”, diese ist auf allen Seiten der App zu sehen, jedoch verschönert dies das Design nicht und sollte weggelassen bzw. überarbeitet werden. Weiters ist die Farbe für die Hintergründe auf den ersten zwei Seiten nicht gut aussehend und sollte durch ein passendes Foto ersetzt werden. Die zweite Seite ist zu simpel gehalten und ein bisschen unverständlich, das Icon, welches zum Auswählen aus den Vorhandenen Räumen gedacht ist, lässt vermuten, dass man in die eigene Galerie kommt. Hier sollte das Icon geändert und eine Beschriftung hinzugefügt werden. Die Seiten zum auswählen der Räume und Möbel sind durch die großen Bilder übersichtlich, jedoch würde diesen Seiten eine Kategorisierung bzw. eine Suchfunktion weiterhelfen.
- Feedback von Person B (Autorin: Sophia PUM)
Oberfläche ist einfach und minimal gestaltet. Obwohl es wenig Text gibt, ist in jedem Screen im Großen und Ganzen klar welche Funktionen es gibt, denn das Design simpel ist, den Gewohnheiten der NutzerInnen und Nutzer entspricht und keine verspielten Details beinhaltet. Die Startseite und der zweite Screen könnten durch Fotos oder ähnliches etwas ansprechender gestaltet werden. Das Icon für „Select a Room“ stellt die Funktion auch nicht ganz optimal dar. Auch wenn man dann den Raum einrichtet, wären ein paar kurze Stichworte zur Beschreibung sinnvoll. Der Schriftzug „INTERIOR DESIGNER“ der auf jedem Screen abgebildet ist, sollte vielleicht überarbeitet werden, er wirkt etwas dominant und es wäre besser in z.B. durch ein Icon/Logo zu ersetzen.
- Feedback von Person C (Autor: Dominik Pegler)
Der Testuser fand die Schriftart zum Schriftzug "INTERIOR DESIGNER" nicht so passend. Sie wirke wackelig und vermittle Unsicherheit. Dabei solle die App einem ja Sicherheit bei einer Entscheidungsfindung geben.
Zum Prozess der Auswahl von Raum und Möbelstück meinte der Testuser, dass es nicht ganz klar sei, wie die Abmessungen zustande kämen, wie der Platz berechnet werde, ob die Proportionen stimmen würden und wie viele Restplatz übrig bliebe, nachdem man das Möbelstück platziert hat. Hier würde sich der Testuser ein paar Maßangaben wünschen.
Zum letzten Screen meinte der Testuser, dass nicht klar sei, wofür die beiden Buttons (Das Plus-Symbol und das Upload-Symbol) stehen und worin sie sich unterscheiden.
Der Gesamteindruck wurde als nüchtern bewertet. Es fehle etwas, das einen einlädt kreativ tätig zu werden und den Spaß am Gestalten vermittelt. Als konkretes Beispiel wurden dabei Animationen (Vorhang auf) während der Ladezeiten genannt.
Prototyp von Dominik
- Feedback von Person A (Autor: Asım OĞUZ)
Die erste Seite dieses Prototypen sieht zu leer aus diesem würde ein Hintergrundbild weiterhelfen. In der Seite, die zum Scannen des Raumes dient, gibt es einige Aspekte die unklar sind. Wird der Scan automatisch beendet? Wenn nicht fehlt ein Button um dies zu machen. Was macht das Button “X”? Bricht dies den ganzen Vorgang ab oder beginnt man von Anfang an zu scannen? Dem würde eine Beschriftung weiterhelfen. Und falls dieser Button den Vorgang abbricht würde ein “Try Again” Button gut passen. Die Seite zum auswählen von Möbeln ist sehr übersichtlich und verständlich und daher passend. Auf der letzen Seite sind gar keine Buttons. Kann man da keine weiteren Möbel mehr hinzufügen? Wie exportiert man den Raum? Diese Fragen sind unklar.
- Feedback von Person B (Autorin: Sophia PUM)
Auch hier ist die Nutzeroberfläche sehr übersichtlich und klar gestaltet. Gut an diesem Entwurf ist, dass es trotz dem minimalen Stil kurze Beschreibungen gibt, die die Bedienung für die Nutzerinnen und Nutzer einfacher machen. Die Texte sind kurz und knapp, das ist angenehm für den Benutzer, denn man kann sie schnell lesen und sie beinhalten nichts Überflüssiges. Der Screen „Choose Object“ ist mit dem Drop-Down-Menü auch sehr einfach zu bedienen, denn diese Art von Menü ist jedem Internet-Nutzer bekannt. Hier wäre vielleicht eine Möglichkeit die Möbel zu sortieren oder zu filtern sinnvoll.
- Feedback von Person C (Autor: Dominik Pegler)
Der Testuser war nicht ganz einverstanden mit der Formulierung des Satzes "This your room?" Er würde das anders formulieren. Außerdem sei nicht klar, was die Phrase "start scanning" am Startbildschirm bedeute. Falls das ein neues Projekt sei, sollte es auch so benannt werden, sagte der Tester.
Des Weiteren sollte der Button für das "Neue" oben sein und der Button für das "Alte", also die alten Projekte, unten. Das sei intuitiver und kenne der Testuser aus anderen Apps.
Die Rückmeldungen der App mit "turn around" und "finished" mit dem Häckchen fand der Tester wiederum gut. Nicht so klar war die Bedeutung des "X" und des Häkchens am Bildschirm mit dem Satz "this your room?". Der Tester konnte sich keine Vorstellung machen, was nun passieren würde, wenn er das "X" antippt. Er fragte: "Muss ich dann selber abmessen gehen?"
Der berichtete Gesamteindruck war, dass das UI frisch aussieht (zumindest von der Farbgebung her) und der Designvorschlag etwas konkreter ist, was die Raum-Abmessungen und Auswahl von Einrichtungsgegenständen betrifft.
Anpassung der Prototypen
Autor*innen: Dominik PEGLER, Sophia PUM, Asım OĞUZ
Prototyp von Sophia
- Scanseite überarbeiten
- Screen 6 für mobile Geräte anpassen (simpler)
- Funktion implementieren, um Möbel hinzuzufügen (Button, Menü usw.)
- Kurze Hinweistexte unter die Buttons, damit Funktion klarer
Prototyp von Asım
- Mehr Beschreibung am 2. Screen
- Möbel in Kategorien gliedern
- Suchmöglichkeit integrieren
- Navigationsleiste sollte je nach Screen unterschiedlich
- Infoliste für jeden Screen, um sichtbar zu machen, wo man sich gerade befindet
- Kurze Beschreibung zu den einzelnen Möbeln und Kategorien
- Anordnung der Bilder überbearbeiten
- Schriftzug „INTERIOR DESIGNER“ überarbeiten (eventuell Logo)
Prototyp von Dominik
- Während des Scanvorgangs mehr Informationen
- Abbruch-Button farblich besser kennzeichen
- Statusleiste besser hervorheben
- Button implementieren für zusätzliche Möbel in bereits gestaltetem Raum
- Button implementieren für Export des fertigen Raumes
- Startscreen ansprechender gestalten
- Hintergurndbild
- Anordnung der Buttons umkehren
- Funktion hinzufügen um gespeicherte Möbel zu
- kategorisieren
- sortieren
- filtern
Zusätzliche zielgruppenspezifische Anpassungen für alle 3 Prototypen
- Farbenfroheres Design implementieren
- Hintergrundbilder und Wallpapers implementieren
- Default-Schriftarten festlegen
- Farbpalette festlegen
Meilenstein M3
Konzept
Autor: Dominik PEGLER
“Es handelt sich um keine Augmented-Reality-App. Wir lesen die Realität ein und speichern sie für später ab. Anschließend bearbeiten wir diese Realität, bis wir zum gewünschten Ergebnis kommen. Weil wir nachhaltige Ergebnisse möchten, können diese nicht im selben Augenblick entstehen und erarbeitet werden, wenn die Kamera eingeschaltet ist, wie es bei AR der Fall ist. Durch die Trennung von Scan- und Entscheidungsprozess sollen aus der Hüfte geschossene Entscheidungen vermieden und der Nutzer bei einer gut durchdachten Planung unterstützt werden. Netter Nebeneffekt: Die Kamera muss nur zum Scannen eingeschaltet werden, das spart Ressourcen.”
Aufgrund der kurzen Entwicklungsdauer von wenigen Wochen und der Unerfahrenheit allerq Teammitglieder im Bereich der Frontend-Entwicklung kann der vorliegende Prototyp nur eine erste grobe Skizzierung unserer Vorstellungen von dieser Applikation sein. Wir sind jedoch zuversichtlich, dass er diese Vorstellungen bereits gut repräsentiert sowie für Außenstehende klar und verständlich kommuniziert.
Die für uns wesentlichen Eigenschaften, auf die wir uns in der Entwicklung konzentrieren wollten, waren das User-Interface und die Demonstration der beiden Basisfunktionen, nämlich der des Scannens von Räumen und des Einfügens von virtuellen Objekten in diese folglich ebenso virtuellen Räumen.
Dabei haben wir sechs für das Userinterface und die Basisfunktionen wichtige Bildschirme definiert, die wir in dieser Arbeit realisieren wollten, sowie einen zusätzlichen Bildschirm für die Applikationseinstellungen. Diese sieben "Screens" sind:
- HomeScreen
- RoomScanScreen
- RoomScanConfirmScreen
- RoomSelectScreen
- RoomScreen
- ObjectSelectScreen
- SettingsScreen (Abb. 23)
Ihre Funktionen lassen sich am besten durch typische Navigationsabfolgen beschreiben:
- User startet die App, gelangt zum HomeScreen (Abb. 22) und findet dort 3
große Buttons:
- Scan New Room
- My Rooms
- My Objects
Abbildung 22: M3 Prototype: HomeScreen
Abbildung 23: M3 Prototype: SettingsScreen
- User entschließt sich zum Scannen eines neuen Raumes und tippt "Scan New Room" an.
Abbildung 24: M3 Prototype: RoomScanScreen (derzeit nur iPhone)
- User befindet sich jetzt im RoomScanScreen (Abb. 24), die Kamera des Geräts schaltet sich ein, es erscheinen visuelle Indikatoren, die den Scanprozess unterstützen sollen. Die Simulation des Scanprozesses dauert im Prototypen etwa 25 Sekunden. Anschließend wird der RoomScanScreen geschlossen.
Abbildung 25: M3 Prototype: RoomScanConfirm
- User ist nun im RoomScanConfirmScreen (Abb. 25) angelangt, sieht eine Skizze eines Raumes mit Meter- und Quadratmeterangaben vor sich, darunter zwei Buttons, mit denen sich das Scanresultat bestätigen oder ablehnen lässt. In der fertigen Applikation führt das Bestätigen zu einem "Speichern"-Dialog, im Prototypen zurück zum HomeScreen. Das Ablehnen führt sowohl in der fertigen App wie auch im Prototypen zurück zum HomeScreen.
Abbildung 26: M3 Prototype: RoomSelectScreen
- User befindet sich wieder im HomeScreen und wählt dort diesmal "My Rooms"
- Im RoomSelectScreen (Abb. 26) wird eine Liste an Räumen angezeigt. Diese Liste kann auch durchsucht werden. Als Hilfe werden user auch Preview-Bilder der gelisteten Räume angezeigt. Im Unterschied zum Prototypen sollen hier auch weitere Details wie Anlagedatum, letzte Bearbeitungsdatum angezeigt werden. Außerdem soll es auch möglich sein, Kategorien zu bilden und Räume zu löschen, umzubenennen oder zu duplizieren (Swipes nach links oder rechts). User kann im Prototypen einen Raum auswählen. Wird das gemacht, wechselt die App in den nächsten Bildschirm.
- User gelangt in den RoomScreen (Abb. 27) und findet sich damit im gerade ausgewählten Raum wieder. In der fertigen Applikation wird es möglich sein, sich im Raum herumzubewegenm verschiedene Perspektiven wie Grundrissperspektive einzunehmen und Objekte maßgenau manuell oder per Algorithmus anzuorden. Im Prototypen wird das mit einem einfachen Bild des Raumes und drei runden Buttons simuliert. Ein Button dient dem Hinzufügen von Objekten, einer dem Entfernen aller Objekte und ein weiterer speichert das Projekt bzw. den Raum in dieser Anordnung ab. Im Prototypen wird das Speichern mittels eines Pop-up-Dialogs simuliert. Über den Button mit dem Plus-Symbol, der für das Hinzufügen neuer Objekte steht, gelangt man in den nächsten Screen.
Abbildung 27: M3 Prototype: RoomScreen
- User ist im ObjectSelectScreen (Abb. 28). Dieser Screen ähnelt dem RoomSelectScreen. Es soll hier eine Art "Bibliothek der Objekten" entstehen und Objekte sollen in der fertigen Applikation die zentrale Rolle einnehmen. Die Funktionalität des Prototypen beschränkt sich jedoch noch auf das Durchsuchen und Auswählen der Objekte. Hat user ein solches ausgewählt, führt die Navigation zurück in den RoomScreen (Abb. 29) und das Objekt wird mittig im Bild platziert.
Abbildung 28: M3 Prototype: ObjectSelectScreen
- Zuletzt kann user den Raum speichern (Abb. 30) oder abbrechen. In beiden Fällen gelangt man wieder in den HomeScreen.
Abbildung 29: M3 Prototype: RoomScreen (Objekt hinzugefügt)
Abbildung 30: M3 Prototype: RoomScreen (Speicher)
Designentscheidungen
Autor: Dominik PEGLER
Personas
Wir haben darauf Wert gelegt, dass die Applikation minimal gehalten werden kann, wenig Text und mehr Icons zum Einsatz kommen können, da man von unseren primären Personas erwarten kann, dass sie ein hohes Verständnis für moderne Technologien mitbringen und ein Mehr an Hinweistexten und Navigationsassistenz für sie als störend und das UX beeinträchtigend empfunden würde. Da unsere Personas relativ dyanmisch ihre Umwelt gestalten und Wohnortewechsel bei ihnen selbst sowie auch in ihrem Freundes- und Bekanntenkreis regelmäßig stattfinden können, gehen wir außerdem davon aus, dass unsere Applikation von ein und derselben Person häufiger benutzt wird. Vieluser würden sich durch Features, die den Einstieg in die App zwar erleichtern, aber später keinen Nutzen mehr bringen, wahrscheinlich in ihrer Zielerreichung, dem schnellen Zusammenstellen von Raumlösungen, gehindert sehen.
Farbwahl
Wir haben außerdem versucht, Farben so zu verwenden, dass sie durch Hervorhebung bestimmter Elemente Bedeutung für die Navigation durch die App haben. Daher wollten wir Farben überall dort vermeiden, wo sie keinen wirklichen Zusatznutzen bringt oder sogar der Usability im Weg steht.
Die App soll auch eine Akzentfarbe enthalten, die der App Identität verleiht. In Statusleisten, Logos und Menüs verwenden wir diese. Wir haben hier die Farbe Dunkelgrün gewählt, um eine Farbe zu verwenden, die Natur und Natürlichkeit symbolisiert und eine jüngere Generation in Form unserer Personas anspricht, die dem Thema Umweltschutz und Nachhaltigkeit stärker emotional verbunden ist. Im weieren Verlauf der Entwicklung soll diese Thematik stärker herausgearbeitet werden und so auch eine stärkere Abgrenzung zu Konkurrenzprodukten stattfinden.
Probleme mit Rot-Grün-Kontrasten wollen wir vermeiden, indem wir diesen im Falle von Confirm-Decline-Situationen auch noch passende Icons zur Seite stellen. Die Farben sind hier angeführt:
- Appfarbe/Akzentfarbe: Farbe A
- Hintergrundfarbe: Weiß: #ffffff
- Hauptfarben: 4 Farben
Farbe A (dunkelgrün): #303E14
██████████Farbe B (rot / decline / cancel / danger): #ff9999
██████████Farbe C (grün / accept / okay): #8cd9b3
██████████Farbe D (gelb / extra features): #d9d98c
██████████
Konsistenz
App-Komponenten: Im Sinne eines konsistenten Designs wurden die einzelnen Komponenten aus nur möglichst einer Library verwendet. Komponenten wie Buttons, Textfelder, Inputfelder haben wir bevorzugt aus der Library "React Native Elements" importiert, Icons wurden von "FontAwesome" verwendet.
Abbildung 31: Beispiel-Components react-native-elements: Solid, Clear, Outline
Projektmanagement
Autor: Dominik PEGLER
Es wurden auf github für das Projekt eine Organisation mit den drei Mitgliedern sowie ein Repository für die App und ein weiteres für die Projektdokumentation angelegt. Die Programmieraufgaben werden so verteilt, dass die Personen möglichst unabhängig voneinander arbeiten können. Den Zwischenstand des geschriebenen Codes (z.B. "HomeScreen.js") laden Sophia und Asım zumindest einmal am Tag in den GoogleDrive-Folder des Projekts oder direkt in eigenen Branch auf Github. Von dort wird der Code wenn funktionstauglich von Dominik in Branch "main" übernommen. Ziel dabei ist, dass Main-Branch immer eine funktionstaugliche App ohne Fehler oder Warnungen enthält.
Aufgabenverteilung:
(siehe GoogleSheet)
Abgabe
zip / .tar.gz File mit
- 3 Ordnern
- Dokumente
- Screenshots und Beschreibung des Prototyp hinsichtlich Funktionen, Inhalte und Interaktionen (pdf, ca. 2-3 Seiten Text und Screenshots)
- Beschreiben Sie die Arbeitsverteilung Punktabzug!)
- Source
- App (Kompilierte Version der App)
- Dokumente
- README-Datei in dieser Struktur: http://vda.univie.ac.at/Teaching/HCI/21s/materials/README_M3.md
Meilenstein M4
Abstract
The aim of this project was to develop a first prototype of a mobile application for the simple creation of sketches in the field of interior design. In the following, the development process from hand sketches up to prototypes created with the react-native framework is shown and problem situations and optimization options are discussed. With a strong focus on simplicity this project delivered a solid prototype of a user interface which, due to the complexity of the requirements in the area of interior design and the associated technologies still to be implemented, such as augmented reality, has to be evaluated again at a later stage.
Motivation
Problem
Imagine you are moving out to a new place or you want to redesign a room of yours. What options do you have while designing? How well will the furnitures fit in your room? Will the style match your expectations? These are just some of the many questions that will pop out if you have a room designing process ahead of you. The typical solution for this would be just imagining it, making sketches by hand or just trying it out, but this would be too much expenditure and that is the reason why the interior designer app should be used.
Tasks of the app
The main purpose of the app is to minimize the effort to design a room and not just a room but specifically the room that you need to get designed, that is why the app allows you to scan rooms. This leads to you having the exact room you need and eases the transformation from design into reality. There is also the option to choose a pre-existing room just in case you want to try out new styles or want to experiment a little. Once a room is selected the user has the possibility to import furnituters and arrange them as they wish until the room has the desired design. And as soon as the room is finished it can be saved in the form of an exported image.
Users
The user spectrum for this app is actually pretty wide. Everyone who is able to handle mobile devices and has some interest in designing or redesigning is a potential user this also leads to that the app has to be designed in a way that it can be used by the whole spectrum. Our target group are people from the age of 18 – 40, as well as modern people who are interested in new solutions. The users we want to reach, are familiar with new technologies and open to try new things. They also should be interested in design and are willing to take their time to experiment around. Still the target group is be practical and wants to find the most efficient but convenient solutions.
(Asım Oğuz)
Related work
There are already quite a few Interior Design Apps on the market, like we have already analyzed in the Konkurrenzanalyse in Milestone 1. Those include some really good systems with a lot of features. In order to stand out from these Applications we tried to make a simple and well-structured solution, which concentrates on the main features while keeping everything minimal. The main things we focused on was the room scanning and setting up rooms with furniture. We also put a big focus on a simple and straight-forward design.
Simply scanning a room, saving the scan and adding furniture afterwards is how user can design their own room. We also discussed realizing the scanning process via Augmented Reality, so that the user can make quick and real-time changes to their room. However, we figured that this is not the best solution for us and the user, since it not good for planning long-term interior designs and hard to implement for us, who lack in front end programming experience.
We discussed some different solutions for our app during Milestone 2, the low-fi prototyping. All of us developed a unique idea of how we could realize our app. Some things we all had in common was a screen for room scanning, a screen for setting up a room and a home screen for navigation. As mentioned before those ended up being our main features. A functionality which we also talked about was a photo library of rooms and furniture for inspiration. Many existing apps, similar to ours include something like that, but we decided against it, since it is not necessary to have in our app.
All of us have hardly any to no experience with UI or App programming. Neither has anyone of us worked on something similar to our interior design app. All of us made our first frontend programming experiences during A2 of the Human-Computer-Interface VU, where we implemented a simple Application to search for musicians and display related information. Even though it is the only work which relates to our App, we could get some of use of it. For example the navigation via buttons on the home screen.
(Sophia Pum)
Design
The main design aspect we have decided on from the beginning of the project, was to keep everything simple and clean. All of us agreed, that a minimalistic and abstract design would fit the best for our system, our target group and the whole concept of our app. We wanted to keep everything straightforward, from the functionalities and to the design. Furthermore, we also thought a clear design is important for our app, since there are already a few similar products on the market, so we needed an uncomplicated appearance in order to make users interested and stay with our app.
Home Screen
The Home Screen (see fig. 32) is the first screen which users will see when they open the app. From our own experience we know, that people will not stay long if they get overwhelmed by text, pictures and icons. So we tried to avoid that by simply adding a clear and light-toned background picture, our minimal logo and a simple and uncomplicated navigation.
Abbildung 32: HomeScreen
Scan Screen
We wanted the Scan Screen to be pretty self-explanatory and designed it very simple by adding arrow icons, which should help guiding the user through the scan process. During earlier prototyping steps, we thought of including more specific text introductions, to explain the scanning to the user, but we decided against it. Firstly, because it is not a difficult step to do and secondly because our target group are rather young people, that we expect to have some knowledge of modern technologies. However after carrying out the interviews, the feedback included, that a short instruction would be nice, in order to avoid confusion and provide a simple overview. So we added a process bar, and a short statement, which tells the user to turn around in the room.
Abbildung 33: ScanScreen
Room and Object Screen
The Object and the Room Select Screen (fig. 35) are designed pretty similar. The rooms and objects are simply listed with a picture and a title. The user can navigate through that list, via scrolling by simply swiping up and down. We chose this solution, because it is a very common feature in modern apps, so our target group should be familiar with it. The Room Screen (fig. 34) itself is designed very abstract, with no text, just the icons. This might get the user confused in the first place, but they will quickly be able to understand everything, by clicking around a bit. We also decided on simple icons, without any fancy details, so the user should easily identify the symbols and have an idea of what will happen.
Abbildung 34: RoomScreen
Abbildung 35: RoomSelectScreen
Overall
All in all keeping the design simple and consistent was not always easy, even though it might sound like that. During early prototyping steps we soon realized that everyone has a different interpretation of a minimal design and that it is important to precisely analyze what aspects are essential for a smooth user experience and what we could skip on. (Sophia Pum)
Implementation
The app was developed in react-native which is an open-source JavaScript library that is used for building mobile user interfaces. While implementing the app we have not used any templates and the only toolkit used was expo-camera. This was necessary to be able to get access to the camera of the device and be able to implement the ScanScreen. React-native allows for development for both android and IOS at the same time so the interior designer app is available for both of these platforms. The main problem of ours was the missing knowledge about developing in react-native or ReactJS. None of us had ever used this framework before so it was not easy to adapt to the new required developing style needed by react-native, this led to us needing to do a lot of research. An example for this would be when to use absolute and when to use relative positions for the react elements. Using the wrong style led to unexpected results which took quite some time to resolve. Our main problem solving method was research and there is a lot of content about react-native online so we were almost always able to find a solution. We also had a really great communication in the team. This was maybe the result of us just being a three person team, but thanks to communication we did not have to deal with the problems by ourselves and could help eachother out. (Asım Oğuz)
Evaluation
There were eight participants who were included in the study varying in age, profession and gender. Because of our wide spectrum of possible users we had the goal to choose the participants from different groups to be able to represent all of our target group. The participants were provided with the app and were requested to answer a total of 23 questions doing 5 different tasks. While choosing the tasks we tried to cover the whole app. The following section shows these tasks: Scanne einen Raum ein und bestätige den Scan. Wähle einen Raum Gestalte den Raum Wähle ein Objekt aus Ändere die Einstellungen
And finally after all these tasks were completed we asked for a general review of the app.
The result
The feedback we got from almost all of our participants was that the app was designed in a clean and easy to use way. This was a purpose of ours so it can be said that we have reached a goal regarding design. Most of the negative feedback was regarding the scanscreen which is understandable because this is a unique feature of our app and the users are not used to a task like this but in the end they all succeeded in using it so it can be said that they needed some time and adaptation to this. A detailed result about improvement ideas is shown in an external table. (Asım Oğuz)
(Lösungsvorschläge zu Feedbacks)
Reflection
The most important lessons we have learned were not regarding programming but they were about planning and designing of the app. We have learned that design is an iterative process so this means no matter how well you think about everything in the end there will be points that have to be optimized. Another important point we learned was the significance of letting the users test the app. Since we were involved in the development process from the beginning every screen and every function was clear and understandable for us but this was not the case for the users. Thanks to the interviews we were able see the odd things in the app and adjust them. So for future works we will have in mind to include users in the design process from the beginnig. (Asım Oğuz)
The work separation is shown in an additional spreadsheet file ("Arbeitsaufteilung M4").
Conclusions and future work
Due to the goal of creating an application for use in the area of interior design and the complexity and variety of necessary technologies that come with it, especially in the backend, it could not be assumed from the start that we would create much more than a highly simulation-heavy user interface which would serve as the basis for further work. We think we reached our goals for the most part. The current immplementation is already well prepared for the expected increase in complexity in the further course, in that the interface is based on a design that is as simple as possible and already equipped with familiar style elements. So we expect that at least from the interface side, the amount of possible problems for users in dealing with the application can be kept low. Negative criticism from the user study suggested minor adjustments rather than major concept changes, which will also be included in the next releases. In the following sections we want to discuss possible further work.
Simplicity doesn't just have advantages
Certain functions have not been considered because of the strong focus on simplicity. This applies, for example, to the storage of rooms or objects. The app currently only offers the option of saving a room in the last configuration and overwriting the original room. Here we should provide more flexibility and enable users to duplicate rooms, rename them and save them in multiple configurations (i.e. with different objects and arrangement options). The concept of "rooms" and "objects" should therefore be expanded to include a concept of "projects", which contain all these different configurations. The concept of rooms, like that of objects, would then be limited in its definition to simple 3D models.
Cross-device and cross-platform development
Another essential aspect that needs to be dealt with immediately on the user interface is converting the layout into a cross-device and cross-platform-compatible layout. In the current implementation, some elements are still "hard-coded" for the sake of faster implementation and are not completely reliable in being able to adapt flexibly to all possible conditions such as screen sizes.
Research on available technologies
In future work, however, we no longer want to devote ourselves completely to the UI, but instead do more research to explore which technologies (such as augmented or virtual reality) would be suitable for the purpose. Since these determine the functionality of the app and thus define its feasibility and usefulness, the focus should be placed here in order not to invest in a project that cannot be implemented with the currently available technologies.
Purpose of the application
Another focus will be on working out the distinguishing features to existing interior design solutions. This includes, for example, an "open" approach in the sense of a free and open exchange of digital objects, which, in addition to a mobile app, could lead to a separate platform for object exchange. We want to enable users to decide on the best possible and therefore most sustainable configuration for their living environment. We want the right pieces of furniture to find their way to the right people and not end up on second-hand platforms or in the garbage dump in a short time.
(Dominik Pegler)