ISA - learning photography app
Developed within an experimental design class in cooperation with Luca Gruber
Entstanden im Kurs experimentelles Gestalten in Zusammenarbeit mit Luca Gruber
Intro
Einleitung
The app concept ISA (iso, shutterspeed, aperture) was developed under the topic " Designing Learning Experiences " in the class Experimental Design, which should simplify the learning of the basic principles of photography.
The correlations between exposure time, aperture and speed are often very difficult for beginners to understand. Therefore, the focus of the design was on communicating these correlations. Gamification and community features motivate the user to continue using and practicing the app.
With an innovative control of the three basic values of the camera, the process of adjustment is accelerated and automated.
The correlations between exposure time, aperture and speed are often very difficult for beginners to understand. Therefore, the focus of the design was on communicating these correlations. Gamification and community features motivate the user to continue using and practicing the app.
With an innovative control of the three basic values of the camera, the process of adjustment is accelerated and automated.
Unter dem Thema "Lernerfahrungen gestalten" im Kurs experimentelles Gestalten entstand das App-Konzept ISA (iso, shutterspeed, aperture), welches das Erlernen der Grundprinzipien der Fotografie erleichtern soll.
Die Zusammenhänge von Belichtungszeit, Blende und Empfindlichkeit sind für Anfänger oftmals sehr schwer nachzuvollziehen. Daher lag der Fokus beim Entwurf auf der Vermittlung dieser Zusammenhänge. Gamification und Community- Features motivieren die Nutzer die App weiter zu benutzen und zu üben.
Mit einer innovativen Steuerung der drei Grundwerte der Kamera wird der Prozess des Einstellens beschleunigt und automatisiert.
Die Zusammenhänge von Belichtungszeit, Blende und Empfindlichkeit sind für Anfänger oftmals sehr schwer nachzuvollziehen. Daher lag der Fokus beim Entwurf auf der Vermittlung dieser Zusammenhänge. Gamification und Community- Features motivieren die Nutzer die App weiter zu benutzen und zu üben.
Mit einer innovativen Steuerung der drei Grundwerte der Kamera wird der Prozess des Einstellens beschleunigt und automatisiert.
Process
Prozess
After the goal of the project has been set, was started with fast prototypes and wireframing models. At the same time I became familiar with the programs "Sketch", "Flinto" and "Adobe Experience Design". After the structure of the application had been determined, the design of the exercises was started. First, the connections between the three basic functions of a camera were analyzed.
Exposure time: Control the amount of light and motion blur.
Film speed: Control of light sensitivity and grain/noise of the image.
Aperture: Control the amount of light and depth of field.
Afterwards, the basic functions were abstracted, tasks formulated and the design of the app begun.
Nach der Zielsetzung des Projekts, wurde mit schnellen Prototypen und Wireframing Modellen begonnen. Parallel arbeitete ich mich in die Programme "Sketch", "Flinto" und "Adobe Experience Design" ein. Nachdem die Struktur der Applikation fest stand, wurde mit der Gestaltung der Aufgaben begonnen. Hier wurden zunächst die Zusammenhänge der drei Grundfunktionen einer Kamera aufgeschlüsselt.
Belichtungszeit: Kontrolle über die Lichtmenge und Bewegungsunschärfe.
Filmempfindlichkeit: Kontrolle über die Lichtsensitivität und Körnung/Rauschen der Aufnahme.
Blende: Kontrolle über die Lichtmenge und Tiefenschärfe.
Anschließend wurden die Grundfunktionen abstrahiert und Aufgaben formuliert und die Gestaltung der App begonnen.
During the design process I learned to create user interfaces in Sketch and animations in Flinto. With the live preview on the computer, as well as the possibility to test the projects directly on the iPhone, it was possible to check the concepts quickly and accelerated the workflow immensely.
Während des Entwurfsprozesses lernte ich Benutzeroberflächen in Sketch und Animationen dieser in Flinto zu erstellen. Mit der Livevorschau auf dem Rechner, sowie der Möglichkeit die Projekte direkt auf dem iPhone zu testen, ermöglichten ein schnelles Überprüfen der Konzepte und beschleunigten den Workflow ungemein.
Control
Bedienung
Besides the exercises, the main focus was on the control of the virtual camera in the app. First, current solutions were reviewed and analyzed. Mostly they mimic a classical camera with skeuomorphistic representations of the control elements or use an abstract depiction. However, the controls always occupy a very large area of the screen, reducing the most important part - the "viewfinder image".
Neben den Aufgaben lag der Hauptfokus auf der Bedienung der virtuellen Kamera in der App. Zunächst wurden aktuelle Lösungen betrachtet und analysiert. Meist imitieren diese eine klassische Kamera mit skeuomorphistischen Darstellungen der Bedienelemente oder nutzen eine abstrahierte Darstellung. Jedoch nahmen die Bedienelemente immer einen sehr großen Bereich des Bildschirms ein und verkleinert somit den wichtigsten Teil - das "Sucherbild".
Since iPhone 7 and the "Taptic Engine" haptic feedback is possible by short vibration pulses. This can be used to provide keystrokes and the actuation of virtual buttons with a haptic feedback and thus give the impression of a physical button.
Force-Touch is an additional technology that allows an added level of input. Our camera settings combine these two technologies to provide a very large viewfinder image and fast operation.
Pressing the viewfinder image hard will bring up the control panel at that position on the display. Therefore it does not need any adjustment for left- or right-handed users.
The circular control panel is divided into a button in the middle and four polar arranged mode areas. By swiping with your finger from the centre of the control panel into one of the mode areas, it is preselected. If you swipe to the left, you get to the ISO settings, to the right the exposure time and to the top the aperture setting. A fourth field for the focus is reserved below. If the user remains within the circle with his finger, the mode areas can be changed. Only when the user leaves the circle in the direction of the mode, the parameters of the mode can be changed. At the same time, increasing vibration gives the user feedback that he is approaching the limit of the circle. The modulation of the vibration allows a haptic image of the virtual UI. Once the user has chosen one of the modes and swiped over the outer boundary ring, he can change the mode settings by sliding his finger up or down. In the case of the aperture, the iris can be closed by swiping up and opened downwards. As soon as the setting has been confirmed by releasingthe screen, the menu can be called up by pressing the display firmly again. The feedback from the vibration motor allows the user to fully concentrate on the subject without paying much attention to the interface.
Pressing the viewfinder image hard will bring up the control panel at that position on the display. Therefore it does not need any adjustment for left- or right-handed users.
The circular control panel is divided into a button in the middle and four polar arranged mode areas. By swiping with your finger from the centre of the control panel into one of the mode areas, it is preselected. If you swipe to the left, you get to the ISO settings, to the right the exposure time and to the top the aperture setting. A fourth field for the focus is reserved below. If the user remains within the circle with his finger, the mode areas can be changed. Only when the user leaves the circle in the direction of the mode, the parameters of the mode can be changed. At the same time, increasing vibration gives the user feedback that he is approaching the limit of the circle. The modulation of the vibration allows a haptic image of the virtual UI. Once the user has chosen one of the modes and swiped over the outer boundary ring, he can change the mode settings by sliding his finger up or down. In the case of the aperture, the iris can be closed by swiping up and opened downwards. As soon as the setting has been confirmed by releasingthe screen, the menu can be called up by pressing the display firmly again. The feedback from the vibration motor allows the user to fully concentrate on the subject without paying much attention to the interface.
Seit dem iPhone 7 und die "Taptic Engine" sind haptische Feedbacks durch kurze Vibrationsimpulse möglich. Dies kann dazu genutzt werden, Tastenanschläge und das Betätigen von virtuellen Knöpfen mit einer haptischen Rückmeldung zu versehen und somit den Eindruck von einem physischen Button zu erwecken.
Force-Touch ist eine weitere Technologie, welche eine zusätzliche Ebene des Inputs ermöglicht. Unsere Kameraeinstellungen verknüpft diese beiden Technologien und ermöglichen so ein sehr großes Sucherbild, sowie eine schnelle Bedienung.
Durch einen kräftigen Druck auf das Sucherbild, wird das Bedienfeld an diesem Punk auf dem Display hervorgerufen. Somit braucht es keine Anpassung an Links- oder Rechtshänder.
Das kreisförmige Bedienfeld gliedert sich in einen Button in der Mitte und vier polar angeordnete Modusfelder. Durch das wischen mit dem Finger aus der Mitte des Bedienfeldes in eines der Modusfelder, wird dieses vorgemerkt. Wischt man nach links, so kommt man in die Einstellungen der ISO, rechts die Belichtungszeit und nach oben für die Blendeneinstellung. Ein viertes Feld für den Fokus ist unten vorgemerkt. Bleibt der Nutzer mit seinem Finger innerhalb des Kreises, so können die Modusfelder gewechselt werden. Erst wenn der Nutzer den Kreis in Richtung des Modi verlässt, können die Parameter des Modus verändert werden. Gleichzeitig bekommt der Nutzer durch ein zunehmendes Vibrieren die Rückmeldung, dass er sich der Grenze des Kreises nähert. Die modulation der Vibration ermöglicht ein haptisches Abbild, des virtuellen UI. Nachdem der Nutzer sich für eines der Modi entschieden hat und über den äußeren Begrenzungsring gewischt hat, kann er durch das ziehen des Fingers nach oben oder unten die Einstellungen des Modus verändern. Im Fall der Blender, kann so durch das Hochwischen die Blende geschlossen und nach unten geöffnet werden. Sobald die Einstellung durch Loslassen bestätigt wurde, kann durch ein erneuten festen Druck auf das Display das Menu aufgerufen werden. Durch die Rückkopplung durch den Vibrationsmotor, kann der Nutzer sich voll auf das Motiv konzentrieren ohne besonders auf das Interface zu achten.
Durch einen kräftigen Druck auf das Sucherbild, wird das Bedienfeld an diesem Punk auf dem Display hervorgerufen. Somit braucht es keine Anpassung an Links- oder Rechtshänder.
Das kreisförmige Bedienfeld gliedert sich in einen Button in der Mitte und vier polar angeordnete Modusfelder. Durch das wischen mit dem Finger aus der Mitte des Bedienfeldes in eines der Modusfelder, wird dieses vorgemerkt. Wischt man nach links, so kommt man in die Einstellungen der ISO, rechts die Belichtungszeit und nach oben für die Blendeneinstellung. Ein viertes Feld für den Fokus ist unten vorgemerkt. Bleibt der Nutzer mit seinem Finger innerhalb des Kreises, so können die Modusfelder gewechselt werden. Erst wenn der Nutzer den Kreis in Richtung des Modi verlässt, können die Parameter des Modus verändert werden. Gleichzeitig bekommt der Nutzer durch ein zunehmendes Vibrieren die Rückmeldung, dass er sich der Grenze des Kreises nähert. Die modulation der Vibration ermöglicht ein haptisches Abbild, des virtuellen UI. Nachdem der Nutzer sich für eines der Modi entschieden hat und über den äußeren Begrenzungsring gewischt hat, kann er durch das ziehen des Fingers nach oben oder unten die Einstellungen des Modus verändern. Im Fall der Blender, kann so durch das Hochwischen die Blende geschlossen und nach unten geöffnet werden. Sobald die Einstellung durch Loslassen bestätigt wurde, kann durch ein erneuten festen Druck auf das Display das Menu aufgerufen werden. Durch die Rückkopplung durch den Vibrationsmotor, kann der Nutzer sich voll auf das Motiv konzentrieren ohne besonders auf das Interface zu achten.
Result
Resultat
Following a walkthrough through the app prototype. This prototype was designed in Sketch and animated in Flinto. Due to the narrow time frame, the UI was designed for a display size - iPhone 7+. However, the interface is designed so that it can be easily adapted to other screen sizes.
It was a very exciting process. For the first time we dealt with the design of an app and tested the animation of transitions. The latter in particular pushed us and the application possibilities to their limits.
Nachfolgend ein Walkthrough durch den App-Prototypen. Dieser Prototyp wurde in Sketch gestaltet und in Flinto animiert. Das UI wurde auf Grund des schmalen Zeitrahmens auf eine Displaygröße - iPhone 7+ - angelegt. Das Interface ist aber so gestaltet, dass es sich an andere Bildschirmgrößen gut anpassen ließe.
Es war ein sehr spannender Prozess. Zum ersten Mal setzten wir uns mit der Gestaltung einer App auseinander und erprobten das Animieren von Übergängen. Gerade letzteres führte uns und die Möglichkeiten der Applikation an die Grenzen.
