Android vs. iOS: wat zijn de verschillen?
De ene persoon heeft liever een smartphone van Samsung, terwijl de ander zweert bij een iPhone. Waarschijnlijk heb je zelf ook een voorkeur voor één van de 2 besturingssystemen: Android of iOS. Maar wat maakt deze besturingssystemen zo verschillend? En waar moet je als designer rekening mee houden als je voor deze besturingssystemen ontwerpt? In dit artikel wordt er uitgelegd wat de kenmerken van Android en iOS zijn, welke ontwerprichtlijnen beide besturingssystemen toepassen en worden de verschillen van Android en iOS naast elkaar gelegd.
De bedoeling van dit artikel is om (beginnende) designers, die wellicht in de toekomst apps voor Android of iOS gaan designen, op weg te helpen. Door de ontwerprichtlijnen per besturingssysteem uit te leggen, is het duidelijker waar er in het design rekening mee gehouden moet worden. Mensen die simpelweg nieuwsgierig zijn naar de verschillen hebben ook baat bij het lezen van dit artikel.
De kenmerken van Android
Android is een besturingssysteem voor smartphones en tablets. Het is ontwikkeld door Google. Wereldwijd is Android momenteel het populairst in gebruik onder de smartphones. Er zijn verschillende merken die voor hun smartphones van dit besturingssysteem gebruik maken: Samsung, Huawei, Sony en nog veel meer. Al deze merken kunnen Android aanpassen naar hoe ze het zelf willen, dus het kan zijn dat het design er op een Samsung smartphone net ietsjes anders uitziet dan op een Sony smartphone. Wel is het uiteraard in de grote lijnen hetzelfde op alle smartphones die op dit besturingssysteem draaien.
Elk besturingssysteem heeft een eigen set met richtlijnen voor designs, ofwel ontwerprichtlijnen. Voor Android is dit Material Design. Material Design is een design language dat is gemaakt door Google. Het is sinds 2014 de standaard ontwerprichtlijn voor Android. Material Design is gebaseerd op de fysieke wereld. Niet in de zin van realistische designs die lijken op objecten in het echt, maar bijvoorbeeld door het toepassen van schaduwen in hun designs. Denk bijvoorbeeld aan een stuk papier: wanneer papier plat op de tafel ligt en je kijkt ernaar, is het papier en wat op het papier staat tweedimensionaal. Maar als je het papier optilt, zie je daar ook een schaduw onder. Material Design kan gezien worden als Flat Design met een aantal toevoegingen.
De kenmerken van iOS
De smartphones van Apple draaien op het iOS besturingssysteem. Apple heeft dit besturingssysteem ook zelf ontwikkeld. iOS is het op één na meest gebruikte besturingssysteem op smartphones in de wereld. Waarbij Android op meerdere merken smartphones gevonden kan worden, is dit bij iOS niet het geval. iOS is alleen beperkt tot een aantal apparaten van Apple. Dit zijn de iPhone en de iPod Touch. Omdat de iPod Touch een redelijk verouderd apparaat is en ook gaat verdwijnen binnen de lijn van Apple, zal dit ook niet verder behandeld worden in dit artikel.
De ontwerprichtlijnen waar iOS gebruik van maakt, heet Human Interface Guidelines. Zoals te verwachten, zijn deze ontwerprichtlijnen door Apple zelf samengesteld. De Human Interface Guidelines worden al sinds 1987 toegepast, maar over de jaren heen is het natuurlijk wel geüpdatet. Bij Human Interface Guidelines staat de mens centraal. Het is belangrijk om na te gaan hoe mensen denken en dingen aanpakken. Een belangrijk principe van deze ontwerprichtlijn is consistentie.
Laten we eens kijken wat dan precies de verschillen zijn tussen de ontwerprichtlijnen van iOS en Android…
Material Design (Android) & Human Interface Guidelines (iOS): de verschillen naast elkaar
Android en iOS hebben allebei hun eigen ontwerprichtlijnen gemaakt. Hier volgt een opsomming van een aantal belangrijke verschillen tussen Material Design en Human Interface Guidelines:
1 . Font
Android en iOS gebruiken allebei een andere standaard font door hun systemen heen. Terwijl Android vanaf het begin al gebruikt maakt van Roboto, gebruikt Apple vanaf 2015 de font San Francisco. Op het eerste gezicht lijken de 2 fonts erg op elkaar, maar bij Roboto zijn de letters iets langer en is er ietsjes meer ruimte tussen de letters.
2. Navigeren door het systeem
Bij een iPhone kan je niet op dezelfde manier door het systeem navigeren als bij een Samsung. Android smartphones hebben aan de onderkant van het scherm een navigatiebalk. Deze balk heeft 3 knoppen met allemaal 1 functie: Back, Home en Overview. iOS heeft slechts 1 knop om door het systeem te navigeren: de home knop (of bij de nieuwe modellen de Home Swipe). Bij het designen voor iOS zal deze dus in het design terug moeten komen. De terug knop kan bij een iPhone linksboven in het scherm gevonden worden.
3. (Primaire) knop
Knoppen worden bij iOS anders weergegeven dan bij Android. Voor knoppen maakt iOS gebruik van Flat Design, en Android uiteraard van Material Design. Dit uit zich vooral in het gebruik van schaduw bij knoppen door Android.
Ook zit er een verschil bij de plaatsing van primaire knoppen bij beide besturingssystemen. Zo wordt deze knop bij Android vaak rechtsonder in het scherm gezet, meestal als een floating action button. Ook hebben deze knoppen schaduw. Bij iOS wordt een primaire call-to-action knop bijna altijd rechtsboven in de hoek geplaatst.
4. Notification Box
Notification boxes worden gebruikt om de aandacht van de gebruiker te trekken. Er zijn 3 soorten: Snackbars, Banners en Alert Dialogs
De Snackbar message is typisch iets van Material Design. Het laat een korte beschrijving zien aan de onderkant van het scherm over een actie die is uitgevoerd. Deze notificatie zorgt er niet voor dat je moet stoppen met waar je mee bezig was en verdwijnt vanzelf weer van het scherm.
Een banner wordt laten zien aan de bovenkant van het scherm. Als jij bijvoorbeeld een berichtje krijgt via WhatsApp terwijl je op een andere app zit, krijg je zo’n banner message. Bij iOS zijn de vorm van deze berichten wat compacter en met ronde hoeken, terwijl bij Android de hoeken scherp zijn en de banner message wat groter is.
Als er iets is waar de gebruiker meteen op moet reageren, gebruikt iOS een Alert Message en Android een Dialog Message. De gebruiker kan niet verder met wat hij aan het doen was totdat er op één van de opties wordt geklikt. In principe doen ze allebei hetzelfde, maar er zijn verschillen in hoe ze eruit zien. Zo zijn bij de Dialog Message de opties aan de rechterkant uitgelijnd, en maakt iOS meer gebruik van ronde hoeken.
Is het ene besturingssysteem dan gebruiksvriendelijker dan de ander?
Kort gezegd: nee, niet per se. Uiteindelijk gaat het allemaal om persoonlijke voorkeur. Wel zal waarschijnlijk het grootste gedeelte van de mensen zeggen dat iOS gebruiksvriendelijker is dan Android. Bij een klein vragenrondje onder studenten (vijf deelnemers) van de opleiding CMD werd bijvoorbeeld al snel duidelijk dat zij vonden dat iOS gebruiksvriendelijker was dan Android.
Dit is waarschijnlijk te verklaren aan de hand van de simpliciteit van Apple. Bijvoorbeeld, Android staat er om bekend dat het makkelijk te customizen is. Als jij de voorkeur hebt voor een bepaalde web browser, is dit zo aan te passen. Maar wil je de web browser op iOS aanpassen, dan kan je alleen de standaarden die Apple voor je heeft uitgekozen gebruiken. Dit customizen kan handig zijn, maar veel mensen zitten helemaal niet te wachten op die opties. Het enige dat zij willen is een smartphone die doet waar hij voor is gemaakt: bellen, sms’en, en een verbinding maken met het internet om gebruik te kunnen maken van apps.
“It just works” -Steve Jobs
Omdat Apple zowel de hardware als de software maakt, sluit alles naadloos op elkaar aan. Hierdoor kan iOS precies worden afgesteld op de iPhone. Dit is bij Android niet het geval, omdat het door verschillende merken, die allemaal verschillende smartphones aanbieden, wordt gebruikt.
Slot
Nu je hebt gelezen waar de verschillen in de ontwerprichtlijnen van de 2 populairste besturingssystemen voor smartphones zitten, weet je waar je rekening mee moet houden als je voor Android of iOS een design maakt. Als je dit lijstje van verschillen nagaat bij jouw ontwerp, moet het goedkomen. Design erop los, maar let wel een beetje op de richtlijnen ;-). Succes met het maken van je ontwerpen!
Bronnenlijst
Tekst
https://m2.material.io/design/environment/light-shadows.html#shadows
https://www.unitedconsumers.com/blog/mobiel/android-vs-ios.jsp
https://www.marketingfacts.nl/berichten/material-design-wat-houdt-het-nou-eigenlijk-in/
https://www.unitedconsumers.com/blog/mobiel/android-vs-ios.jsp
https://nl.wikipedia.org/wiki/IOS_(Apple)
https://appinventiv.com/blog/ios-vs-android-app-design-difference/
https://www.ready4s.com/blog/android-vs-ios-comparing-ui-design
https://geniusee.com/single-blog/differences-in-ios-and-android-app-design
https://www.makeuseof.com/iphone-notification-alert-types-explained/
https://developer.apple.com/design/human-interface-guidelines/components/presentation/alerts/
https://designflyover.com/understanding-the-ios-and-android-ui-guidelines/
https://www.macworld.com/article/670535/iphone-vs-android-best-smartphone.html
https://developer.android.com/develop/ui/views/components/dialogs
Afbeeldingen
Bouchard, A. (2017, 16 maart). Banner message iPhone [Afbeelding]. iDB. Geraadpleegd op 26 november 2022, van https://www.idownloadblog.com/tag/banner/page/5/
Chmiel, J. (2020, 29 oktober). Material Design [Afbeelding]. Avenga. Geraadpleegd op 24 november 2022, van https://www.avenga.com/magazine/skeuomorphism-neumorphism/
Designflyover (2021, 24 maart). Other differences [Afbeelding]. Designflyover. Geraadpleegd op 26 november 2022, van https://designflyover.com/understanding-the-ios-and-android-ui-guidelines/
Gavriluk, V. (2021, 31 oktober). System Font [Afbeelding]. Arounda. Geraadpleegd op 24 november 2022, van https://arounda.agency/blog/ios-vs-android-app-ui-design-the-differences-explained
Gavriluk, V. (2021, 31 oktober). Different bars [Afbeelding]. Arounda. Geraadpleegd op 24 november 2022, van https://arounda.agency/blog/ios-vs-android-app-ui-design-the-differences-explained
Kennedy, E. (2021, 11 augustus). Primary call-to-action buttons [Afbeelding]. Learn UI Design. Geraadpleegd op 26 november 2022, van https://www.learnui.design/blog/ios-vs-android-app-ui-design-complete-guide.html
Kovoor, J. (2019, 20 september). iPhone backbutton [Afbeelding]. Saint. Geraadpleegd op 26 november 2022, van https://www.saintlad.com/fix-iphone-messages-back-button-not-working/
Romanychev, V. (2018). Banner message Android [Afbeelding]. Pushwoosh. Geraadpleegd op 26 november 2022, van https://help.pushwoosh.com/hc/en-us/articles/360000926826-How-to-show-a-notification-banner-on-Android-5-Android-Heads-up-notifications-
Shidlyali, A. (2022, 17 augustus). Floating action button [Afbeelding]. Geeks for Geeks. Geraadpleegd op 26 november 2022, van https://www.geeksforgeeks.org/floating-action-button-fab-in-android-with-example/
