Karl Weber | 1695409 | Concept Diary – App Porn

Synopsis

Vanaf het begin van mijn seminar wist ik dat ik iets wilde gaan doen met een onderwerp omtrent softwareontwikkeling. Tot op dit punt heeft mijn gehele studie in het teken gestaan van ontwerpen, maar ik wilde meer leren over hoe applicaties werken. Om beter te begrijpen hoe zijn werken wilde ik ervaren hoe het is om een applicatie te ontwikkelen. Gedurende mijn proces viel mij op dat er niet veel aandacht was voor de interacties die een applicatie goed laten werken en prettig laten voelen. Om aandacht te geven aan deze sexy interacties heb ik besloten mijn tijd te besteden aan het ontwikkelen van deze interacties.

Inleiding

Technologie, hoe iets werkt en wat daar de impact van is fascineert mij al een lange tijd. Het zijn onderwerpen die leidend zijn geweest bij mijn profilering binnen het CMD-vakgebied. Binnen het CMD-domein houd ik mij voornamelijk bezig met het ontwerpen van mobiele applicaties. Een sub domein waarin vele gebruikers interacties in terugkomen. De vraag hoe het werkt, komt daar geregeld bij terug en is ook nu leidend geweest tijdens mijn seminar. Gedurende mijn studie heb ik vooral vanuit een design rol gefunctioneerd, maar om meer mijn verdieping op te zoeken betreft hoe het werkt. Heb ik gekozen mij tijdens seminar te verdiepen in de ontwikkeling van mobiele applicaties.

Context, Scope en Definitie

Tegenwoordig heeft bijna iedereen een smartphone. Zo ongeveer 3.5 biljoen mensen anno 2020 (Statista, 2019). Dagelijks gebruiken we apps om met elkaar contact te blijven, voor het kijken van nieuws, entertainment en ontspanning. We gebruiken zo vaak apps dat 90% van de tijd die we besteden met onze smartphone gebruikt wordt in apps. Enkele van deze apps zijn Facebook Messenger, Facebook, WhatsApp, Tik Tok, Instagram, Snapchat, Netflix en Spotify. (App Annie, 2019)

Alle bovengenoemde apps vervullen allemaal een andere taak, maar toch hebben ze veel gelijkenissen. De apps zitten vol met kleine interacties om de gebruikers te voorzien van een zo prettig mogelijke gebruikerservaring. Deze zeer waardevolle interacties worden door gebruikers vaak over het hoofd gezien als je ze vraagt wat ze goed vinden aan een bepaalde app. Ze hebben vaak niet door dat ze aanwezig zijn tot je ze erop wijst. Als een app goed werkt praten ze vaak over wat het allemaal kan, maar vergeten daarbij dat een groot deel van die ervaring eigenlijk niet is wat het allemaal kan, maar de manier waarop je het allemaal kan. Vaak is het een combinatie van interacties en animatie die zorgen dat apps op een net wat fijnere manier werken.

Hart micro animatie die getriggerd wordt bij het liken van een post op instagram (bron: medium)

Mijn doel tijdens seminar is deze kant van apps uitlichten. Ik wil mij hierbij focussen op de interacties die een apps fijner maken om te gebruiken. De vraag die hier centraal staat “Welke componenten spelen een belangrijk rol bij de ervaring van applicatie? ”. Voor het beantwoorden van deze vraag heb ik een aantal deelvragen opgesteld.

Eerst heb ik uit gezoemd om een beeld te krijgen van hoe ik een applicatie kan ontwikkelen.

  • Met welke technologie stacks is mogelijk een applicatie te ontwikkelen?
  • Hoe ontwikkel je een hybride applicatie voor mobiel?
  • Waar moet je opletten bij het ontwikkelen van een applicatie?

Focus op pleasurable “The App Porn”

  • Wat zijn interacties in een applicaties?
  • Wat is het nu van deze interactie? Wat is de meerwaarde?
  • Hoe verhouden deze interactie zich tot de gebruikerservaring?
  • Hoe denken gebruikers over deze interacties?

Groepspagina icon micro animatie om aan te geven dat er een nieuwe functie is in de facebook app (bron: medium)

Methode en Aanpak

Aan het begin van het project was voor mij een ding duidelijk. Ik wil me bezig houden met een onderwerp rondom de ontwikkeling van applicaties of software. Afgelopen jaren heb ik bij opdrachten vanuit de studie alleen kunnen werken vanuit de rol als ontwerper. Als mijn laatste project voor ik start met afstuderen wil ik mij nog verdiepen in softwareontwikkeling.

Mijn start niveau betreft softwareontwikkeling is, nul ik heb hier nog geen ervaring mee. Om goed te starten met seminar moet ik dus eerst duidelijk in kaart brengen wat de mogelijkheden zijn voor het ontwikkelen van een applicatie. Om dit duidelijk te krijgen zal ik starten met deskresearch. Het doel van het onderzoek zal zijn; in kaart brengen welke ontwikkel platformen en technieken er zijn. Als ik hier zelf een duidelijk beeld van heb ben ik van plan contact op te nemen met developers uit mijn netwerk. Ik zal hun om sturing vragen voor het uitzetten van mijn onderzoek. Met de input van developers hoop ik voldoende informatie te hebben verzameld om te werken aan een eerst proof of concept. Ik moet redelijk in de begin fase duidelijk krijgen of mijn gestelde doelstelling realistisch is om binnen dit tijdspad uit te voeren. Op basis van een positieve uitkomst zal ik een besluit maken verder te gaan met het onderwerp en mijn exploratieve onderzoek doorzetten d.m.v deskresearch, expert gesprekken en experimenteren.


Snapchat easter egg – Pull to Refresh (bron: snapchat)

App Analyse – Componenten (bron: eigenwerk)

Uitvoering en Experimenten

Afgelopen periode ben ik na een expert interview gestart met een proof of concept ontwikkelen. Hierna heb ik enorm veel geëxperimenteerd met het Cordova framework en verschillende CSS en JS frameworks.


Device simulator – Alle apps (bron: eigen werk)

In deze fase stond mijn concept rondom apps ontwikkelen met een specifieke functie. Na deskresearch ben ik begonnen met experimenten met de native functionaliteiten. Door uitgebreid de documentaties van Cordova en de individuele extensies te hebben gelezen en te hebben geëxperimenteerd. Heb ik verschillende apps weten te bouwen met native functionaliteiten, waaronder:

  • Camera
  • Notificaties
  • Vibratie
  • Lamp van de telefoon

Camera app (bron: eigen werk)
LINK: Code video Camera app

Notificaties app (bron: eigen werk)
LINK: Code video Notificatie app

Vibratie app (bron: eigen werk)
LINK: Code video Vibratie app

Lamp app (bron: eigen werk)
LINK: Code video Lamp app

Vervolgens heb ik onderzoek gedaan naar waar bestaat een applicatie uit en hoe ontwikkel ik deze componenten? Een component was een navigatie voor het wisselen van pagina’s. Dit kon niet alleen met Cordova hier voor moest er gebruik gemaakt worden van een Single Page Application (SPA). Hier heb ik geëxperimenteerd met verschillend SPA’s. Elke SPA functioneerde anders en maakt gebruik van een andere code variatie van Javascript.

Geëxperimenteerd met de volgende SPA’s:

  • SPA Jquery Mobile
  • SPA Vanilla JS
  • SPA JS import ES5
  • SPA ReactJS

Alle SPA experimenten (bron: eigen werk)

SPA Jquery mobile (bron: eigen werk)

SPA ReactJS (bron: eigen werk)

GUI interace componenten ontworpen in Sketch (bron: eigen werk)

Bij het experimenteren kwam naar voren dat het ene SPA veel fijner aan voelde als het ander. ReactJS voelde als native (wordt daarom ook gebruikt door onderander Facebook, Instagram en Twitter). Dit inzicht heeft de basis gevormd voor mijn concept “App Porn”.

Logo concept App Porn (bron: eigen werk)

De kleine fijne interacties die gebruikers vaak over het hoofd zien.

  • Hoe vlot de app reageert bij een touch input
  • Het net iets langer blijven scrollen van de pagina
  • De kleine bounce die er ontstaat bij het iets te ver door scrollen
  • Het elastische effect dat ontstaat bij een pull to refresh
  • De microanimatie bij interactie van de gebruiker

 Satisfying feeling that is App Porn (bron: giphy)

Fastclick op touch event  (bron: eigen werk)

Zonder fastclick op touch event  (bron: eigen werk)

Smooth scrolling aan (bron: eigen werk)

Zonder smooth scrolling (bron: eigen werk)

Met scroll bounce  (bron: eigen werk)

Zonder scroll bounce  (bron: eigen werk)

Click event animatie inspiratie  (bron: medium)

Click event icon micro animatie (bron: dribbble)

Route switching event eigen ontwikkelde CSS geanimeerde icons v1  (bron: eigen werk)
LINK: Code video Animated icon app v1

Route switching event eigen ontwikkelde CSS geanimeerde icons v2 (bron: eigen werk)
LINK: Code video Animated icon app v2

Evaluatie en conclusie

Afgelopen periode was voor mij ontzettend leerzaam. Ik heb voor het eerst een hele periode kunnen experimenteren met development waarbij ik ben erachter gekomen hier ook veel voldoening uit te halen. Afgelopen periode was het soms erg last, waarbij het tijdens het developen vaak niet lukte en ik met handen in mijn haar zat. Ik snapte dan niet waarom het niet werkte, maar bleef dan toch stug doorzetten, omdat ik het werkend wilde krijgen. Vaak met een succes momenten erna. Dit is ook het fijne wat ik vond aan seminar. De vrijheid te hebben om zelf te ondervinden, maar dit was tegelijkertijd ook de keerzijde. Gedurende het traject liep ik vaak vast. Ik vond het erg last een richting te kiezen ondanks dat ik mijn middel al redelijk snel had vast had gesteld. Graag had ik mijn richting eerder vast gesteld, zodat ik hier meer mee had kunnen experimenteren. Wat ik meeneem naar mijn volgende project (afstuderen) is simpel weg gewoon starten. Mijn vorige seminar heb ik veel twijfels gehad. Nu ook, maar deze keer ben ik gewoon begonnen met produceren.

De toekomst van …

Voor veder onderzoek naar hybride app ontwikkeling beveel ik studenten en professionals aan eerst zich te verdiepen in een SPA voor je start. Deze ga je nodig hebben bij alle iets complexere apps. Daarbij raak ik ReactJS aan. Ondanks er wel echt een learning curve heeft is het echt de moeite om te leren.

Bronnen

Apache. (z.d.). Apache Cordova. Geraadpleegd op 16 februari 2020, van https://cordova.apache.org/

App Annie. (2019, 1 juni). State of Mobile 2019 – App Annie. Geraadpleegd op 18 maart 2020, van https://www.appannie.com/en/go/state-of-mobile-2019/

Apple. (z.d.). Themes – iOS – Human Interface Guidelines – Apple Developer. Geraadpleegd op 16 februari 2020, van https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/

Buildfire. (2020, 21 februari). Mobile App Download and Usage Statistics (2019). Geraadpleegd op 25 maart 2020, van https://buildfire.com/app-statistics/

Facebook. (z.d.-a). Create react app. Geraadpleegd op 16 februari 2020, van https://create-react-app.dev/

Facebook. (z.d.-b). ReactJS – Create a New React App. Geraadpleegd op 16 februari 2020, van https://reactjs.org/docs/create-a-new-react-app.html

Freecodecamp. (2018). Medium claps [Foto]. Geraadpleegd van https://www.freecodecamp.org/news/want-more-claps-and-followers-how-to-make-a-clap-me-gif-in-5-minutes-db85a24950f6/

ftlabs. (z.d.). Ftlabs/fastclick. Geraadpleegd op 25 februari 2020, van https://github.com/ftlabs/fastclick

Google. (z.d.). States. Geraadpleegd op 16 februari 2020, van https://material.io/design/interaction/states.html

html5test. (z.d.). The HTML5 test – How well does your browser support HTML5? Geraadpleegd op 16 maart 2020, van https://html5test.com/

King, J. (2020, 29 januari). React onClick Event Handling (With Examples). Geraadpleegd op 16 winter 2020, van https://upmostly.com/tutorials/react-onclick-event-handling-with-examples

Likeve. (2019). Tab bar micro animation [Foto]. Geraadpleegd van https://dribbble.com/shots/5789938-Tab-bar-micro-interaction-design

Mozilla. (2019, 23 maart). CSS Animations. Geraadpleegd op 13 maart 2020, van https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations

Mozilla. (2020, 19 maart). SVG. Geraadpleegd op 16 maart 2020, van https://developer.mozilla.org/en-US/docs/Web

NPM. (2015, 26 januari). Npm: fastclick. Geraadpleegd op 6 februari 2020, van https://www.npmjs.com/package/fastclick

NPM. (2016, 17 september). Npm: cordova-plugin-flashlight. Geraadpleegd op 25 februari 2020, van https://www.npmjs.com/package/cordova-plugin-flashlight

NPM. (2017, 22 januari). Npm: cordova-plugin-tapticengine. Geraadpleegd op 25 februari 2020, van https://www.npmjs.com/package/cordova-plugin-tapticengine

NPM. (2019, 11 juli). Npm: cordova-plugin-camera. Geraadpleegd op 25 februari 2020, van https://www.npmjs.com/package/cordova-plugin-camera

Otto, M. J. T. (z.d.). Bootstrap. Geraadpleegd op 25 februari 2020, van https://getbootstrap.com/

Panchal, B. M. (2020, 16 januari). These Hybrid App Examples Will Transform Your Perspective Towards Mobile Apps. Geraadpleegd op 1 februari 2020, van https://www.excellentwebworld.com/hybrid-app-examples/

Speelman, V. (2018, 10 juni). The Nine States of Design. Geraadpleegd op 14 februari 2020, van https://medium.com/swlh/the-nine-states-of-design-5bfe9b3d6d85

Statista. (2019, 1 september). Smartphone users worldwide 2020. Geraadpleegd op 18 maart 2020, van https://www.statista.com/statistics/330695/number-of-smartphone-users-worldwide/

Suzuki, S. (2019, 25 juni). Microinteractions in Instagram. Geraadpleegd op 18 februari 2020, van https://medium.com/@shingo2000/microinteractions-in-instagram-9800542e7874

English Summary

From the start of my seminar I knew I wanted to do something with a topic that’s software related. Up until this point the entirety of my study was focused around designing. But I wanted to learn more about how apps work. To get a better understanding about how they work I wanted to experience how it is to develop an application. During my process I noticed that there was not much attention for the interactions that made an app feel and work great. To shine light on these sexy interactions I dedicated to spend my time developing these interactions.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *