Hoe het ontwerp van Transistor tot stand kwam

12 Jan 2010•

In een vorige blogpost kon je meer lezen over de release van Transistor, een iPhone app waarmee je de Belgische radiozenders kan streamen. In deze blogpost wil ik graag even stilstaan bij het designproces van het programma.

Het uitgangspunt van Transistor was dat we (David als developer en ik als ontwerper) een radio-applicatie wilden ontwikkelen waarmee gebruikers naar de meest populaire Belgische radiozenders kunnen luisteren. Er was uiteraard al de radio-app radio.be, maar wij wilden het ietsje grafischer aanpakken. Ik wilde vooral ook een heel erg duidelijke en gebruiksvriendelijke gebruikersomgeving ontwerpen. Daarom kozen we voor weinig features en instellingen, gewoon rechttoe rechtaan radio streamen. Less is more!

Het iPod navigatiewiel

Als belangrijkste navigatiemiddel wilden we werken met het bekende iPod navigatiewieltje. We gingen er van uit dat de meeste gebruikers van een iPhone of iPod Touch ook ooit al eens een klassieke iPod hadden gezien. Ze wisten dus meer dan waarschijnlijk wel hoe zo’n iPod navigatiewiel te gebruiken. Het kon hen een positief gevoel van herkenning geven.

Dieter Rams

In het begin wilden we vooral dat Transistor het sentiment van een oude transistorradio zou oproepen. Ik ben toen op zoek gegaan naar voorbeelden van goed ontworpen radio’s. Het is waarschijnlijk geen toeval dat ik snel bij Dieter Rams ben terecht gekomen. Rams is een Duits productdesigner die vooral bekend is door zijn werk voor elektronicaproducent Braun AG in de jaren 1950 tot 1990. Het is een publiek geheim dat het werk van Rams ook een directe inspiratiebron is voor de designers bij Apple. Hieronder vind je enkele van zijn mooie radio-ontwerpen:


Van Rams naar Transistor

Vooral de kleuren en het ontwerp van dat laatste radiootje vond ik sterk en bruikbaar. Geïnspireerd volgden enkele vlugge schetsen op papier. Daarna startte ik Photoshop op en vrij snel ontsproot het eerste ontwerp voor Transistor:



De positie van het navigatiewiel en het venstertje spreken voor zich. Het kleur doet denken aan dat van een witte iPod. De kleuren en het uitzicht van de frequentieband zijn geïnspireerd op de radio’s van Dieter Rams.

Functioneel denken

Bij het ontwerpen van een gebruikersomgeving moet je natuurlijk ook altijd functioneel gaan denken. Het leek me logisch dat het draaien van het wiel ook de frequentieband zou doen bewegen, net zoals je vroeger aan een knop kon draaien om een radiofrequentie te zoeken. De donkere overlay duidt dan de geselecteerde radiozender aan.

Als er geen radiostream beschikbaar is, dan brandt het lampje linksonder rood. Als de radiostream aan het inladen is, dan flikkert het lampje en als de radio afspeelt dan brandt het lampje groen.

België is Vlaanderen en Wallonië

Ik moest ook nog een manier vinden om een onderscheid te maken tussen de Nederlandstalige en de Franstalige zenders. Zoals je kan zien loste ik dat op door twee knoppen onder het schermpje te plaatsen. Tik je op de FR knop dan verschijnen de Franstalige zenders, klik je op de NL knop dan zie je uiteraard de Nederlandstalige zenderlijst verschijnen.

Problemen bij het eerste ontwerp

Na bespreking en enkele revisies werd het duidelijk dat het eerste ontwerp enkele belangrijke problemen had:

• Belangrijke radiozenders van het andere taalgebied zitten verstopt. Hoewel de taalknoppen vrij duidelijk lijken, kan het gebeuren dat een gebruiker niet meteen een anderstalige zender vindt.
• Om de klassieke radiolook te behouden moest ik de radiologo’s aanpassen naar het Braunoranje. Dat maakt ze minder snel herkenbaar voor de gebruiker. Daarbij komt dat het eigenlijk not done is om de kleuren van een logo te veranderen.
• Het groene lampje dat de status van de stream aangeeft, staat een beetje te ver van de zenders: het oog van de gebruiker moet een sprongetje maken van logo naar lampje en terug. Dat werkt verwarrend.

Ontwerp 2: even finetunen

In een volgende ontwerp werd vooral het probleem van de taalkeuze opgelost:



In plaats van twee knoppen te voorzien kon ik gewoon de frequentieband gebruiken om het onderscheid te maken: aan de ene kant de Franstalige zenders en aan de andere kant de Nederlandstalige zenders!

Zoals je kan zien staat het statuslampje nu ook rechtsboven. Dat leek me logischer omdat je als iPhonegebruiker gewend bent om ook voor de netwerk- en batterijstatus bovenaan op je scherm te kijken.

Kleuren

In het tweede ontwerp zijn ook de kleuren aangepast: weg van de iPodkleuren en volledig richting de Braunkleuren. Mede door het weglaten van de taalknoppen ziet alles er al een pak rustiger en duidelijker uit.

Problemen bij het tweede ontwerp

Ook het tweede ontwerp had enkele duidelijke problemen:

• Het probleem van de oranje logo’s blijft bestaan (zoals hierboven omschreven).
• Het statuslampje staat logischer gepositioneerd maar staat nog altijd te ver van de zenders waardoor het oog van de gebruiker nog altijd sprongetjes moet maken om te zien of een zender goed ontvangen wordt.
• Als de taalaanduiding helemaal aan het uiteinde van de frequentieband staat zoals in het ontwerp te zien is, hoe kan een gebruiker dan weten welke taal aan welke kant van de band staat? De gebruiker zal heus geen zin hebben om de volledige band te doorlopen om dan te ontdekken dat zijn favoriete zender eigenlijk aan de andere kant te vinden is.
• Ondertussen hadden we na hele simpele tests ook nog een bijkomend probleem ontdekt: Het navigatiewiel was een beetje te klein voor mijn grote vingers!

Achteraf gezien bood dit tweede ontwerp dus niet meteen de juiste oplossingen voor de problemen van het eerste ontwerp. Al was het positieve wel dat de interface er eenvoudiger uit zag: minder knoppen.

Ontwerp 3: weg van de Braunkleuren

“Als we de logo’s in hun oorspronkelijke kleuren moeten houden, dan houdt het Braunoranje geen steek meer en dan laten we de Braunkleuren best helemaal vallen.”, dat was de redenering achter het derde ontwerp:

En dus opteerde ik, zoals je kan zien, voor logo’s in grijswaarden en kleuren. De applicatie zelf werd volledig omgebouwd naar de kleuren van een zwarte iPod.

Weg met het statuslampje!

Het probleem van het statuslampje kon ik ongelooflijk eenvoudig oplossen: ik haalde het gewoon weg! Visuele feedback over streamen en bufferen kon anders en beter aangepakt worden: het logo van het radiostation dat ingeladen werd, licht vanaf nu op in kleur. Een flikkering tussen zwart-wit en kleur betekent dat een connectie wordt gemaakt en een blijvend kleurlogo betekent dat de radiostream voor dat station wordt afgespeeld.

Het oog van de gebruiker kan dus blijven rusten op het radiologo. Dat maakt alles plots veel eenvoudiger en duidelijker. Bovendien blijkt het ook heel erg logisch. Dat ik daar niet eerder aan had gedacht!

Om het gevoel van een oude radio toch nog te behouden, probeerde ik even met een glasplaatje boven de actieve zender.

De taalaanduiding

Ook voor de taalaanduiding vond ik een eenvoudige oplossing: als je Transistor voor de eerste keer opstart, dan zie je het midden van de frequentieband. Daar verschijnt meteen een aanduiding: Nederlandstalige zenders aan de linkerkant en Franstalige zenders aan de rechterkant. Je kan de aanduiding zien op het ontwerp hieronder. Ook dat leek me duidelijk en logisch.

Probleem van het navigatiewiel

Door de problemen in de vorige ontwerpen met het te kleine navigatiewiel, speelde ik even met het idee om het navigatiewiel te laten varen. In plaats daarvan zou ik een Braunachtig luidsprekerpatroontje gebruiken.


Ik vind het op zich nog altijd een mooi ontwerp maar het impliceert dat de gebruiker moet scrollen door te schuiven in de frequentiezoeker zelf. Wie dat doet, bedekt met de vinger automatisch deels de zenderlijst wat het navigeren bemoeilijkt. En ik kan me inbeelden dat vele gebruikers iets functioneel verwachten van het luidsprekerpatroontje. Mooi maar niet bruikbaar. Skippen dus.

Ontwerp vier: groter is duidelijker

Voor het vierde ontwerp liet ik het minder geslaagde glas vallen en maakte ik het schermpje een stukje groter. Ik positioneerde het wat beter ten opzichte van de randen van de iPhone en maakte meteen ook de logo’s groter en duidelijker.



De taalinformatie liet ik ook zakken zodat die in het midden van het schermpje komt te staan. Duidelijker kan niet.

De infoknop is er ondertussen ook bijgekomen op een minder opvallende plaats: wie de knop nodig heeft zal hem ongetwijfeld wel vinden. (Wie op de infoknop klikt, krijgt minder belangrijke informatie te zien over Transistor, samen met een regio-instelling.)

Volumeregelaars

Misschien heb je gemerkt dat Transistor geen volumeregelaar heeft. Dat was een bewuste keuze: wie een iPhone heeft, weet hoe je het volume kan wijzigen door de knoppen aan de zijkant van het toestel te gebruiken. Het leek ons dan ook onnodig om een aparte volumeregelaar toe te voegen aan Transistor zelf. Je kan gerust die van de iPhone gebruiken.

Testen maar!

Transistor had een duidelijke vorm gekregen en werkte goed. Tijdens de weken die volgden op het laatste ontwerp heb ik vooral veel mensen rondom me aangeklampt, hen mijn iPhone in de handen geduwd en hen gevraagd om Transistor (in bèta) eens te testen. Ondertussen hield ik hen natuurlijk nauwlettend in de gaten. Noem het gerust een soort van usabilitytest met onwetende testpersonen.

De resultaten waren heel gunstig. Eén probleempje kwam wel telkens opnieuw naar voren: minstens één op de twee gebruikers had niet meteen het navigatiewiel ontdekt en probeerde met de vingers op de frequentieband te duwen om zo te scrollen doorheen de radiozenders.

Dat was een schok. Vanaf dag 1 hadden we het idee opgevat om het navigatiewiel te gebruiken. We waren er ook van overtuigd dat het een leuke en goede manier van navigeren zou zijn. En nu we dichtbij de release van Transistor stonden, bleken mijn testgebruikers het wiel niet eens op te merken!

Terug naar Photoshop

De oplossing lag in het probleem: de testgebruikers merkten het wiel niet meteen op, dus moest het wiel duidelijker zichtbaar worden. Door het contrast te verhogen tussen de achtergrond en het wiel was het effect op nieuwe testpersonen heel erg positief.


Even terzijde: hoe feller de schermhelderheid van een iPhone is ingesteld, hoe lichter de kleuren en hoe duidelijker het contrast wordt. Voor onze testpersonen gebruikte ik altijd een iPhone waarvan de schermhelderheid op het minimum was ingesteld. Als de testpersonen op dat toestel het wiel opmerkten, dan zouden ze het zeker opmerken bij meer heldere iPhones.

Niets aan het toeval overlaten

Eén enkele testpersoon had toch nog niet meteen door dat het navigatiewiel gebruikt moest worden om door de zenders te navigeren. Toen hebben we beslist om voor alle duidelijkheid een kleine instructie te geven wanneer je Transistor voor de eerste maal opstart:



Ik geef toe dat ik er niet helemaal tevreden over ben: het bericht is een symbolische bekentenis: “Het is niet duidelijk dus geven we maar een instructie.” Het is ergens een toegeving van slecht ontwerp. Want als Transistor heel erg duidelijk was geweest, dan was de bovenstaande instructie overbodig geweest.

Leren uit de reacties

Maar goed, het bericht is er nu en Transistor is al een tijdje gratis beschikbaar in de iTunes App Store. Met succes trouwens! Ondertussen leer ik heel erg veel uit de reacties van de gebruikers. Ik kijk ook nauwlettend hoe ze met het ontwerp omgaan. Die feedback zal helpen om het ontwerp van een volgende versie nog beter te maken.

Voor mezelf was het ontwerpen van Transistor alvast een heel erg leuke ervaring. Programmeer je zelf een iPhone app en ben je nog op zoek naar een designer? Laat dan zeker wat van je horen!

Categorieën: iPhone, Transistor, Ontwerp,

9 reacties

Transistor: radio op de iPhone

21 Nov 2009•

Tussen klantopdrachten en freelancewerk door werkten David en ik de afgelopen maanden aan Transistor, onze eerste iPhone applicatie. David als developer, en ik als ontwerper.

Transistor is een eenvoudige radio app geworden waarmee je naar de meestbeluisterde Belgische radiozenders kan tunen op je iPhone en iPod Touch. Het programma is vanaf nu gratis beschikbaar in de iTunes App Store. Transistor is verkrijgbaar in het Nederlands, Frans en Engels en je kan er de onderstaande radiozenders mee streamen.

Nederlandstalige radiozenders:

• Radio 1
• Radio 2
• Studio Brussel
• Klara
• MNM
• Nostalgie
• Top Radio
• Be One

Franstalige radiozenders

• La Première
• Viva Cité
• Musiq3
• Classic 21
• Pure FM
• Nostalgie
• NRJ
• Fun Radio

Heb je dus zo’n fancy gsm of iPod, laat dan zeker eens weten wat je er van vindt. Het ontwerpen van de user interface van zo’n iPhone programmaatje was trouwens een erg leuke ervaring. Maar daar vertel ik je later wel eens meer over. En nu downloaden maar!

Categorieën: iPhone, Transistor, Ontwerp, Ontwikkeling,

6 reacties