Hoe het ontwerp van Transistor tot stand kwam

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

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

Tekstomloop op het web in Photoshop

Bij het ontwerp van nieuwspagina’s of blogpagina’s op websites zie je vaak een foto links of rechts bovenaan het artikel. De tekst loopt dan mooi rondom de foto. Hieronder een voorbeeldje van wat ik bedoel, zoals te zien op www.typography.com:

Het is een vormgeving die natuurlijk ook heel vaak in offline media te zien is zoals kranten en magazines. In opmaakprogramma’s als InDesign is het daarom makkelijk gemaakt om een tekstomloop rond een afbeelding te creëren. Er is zelfs een volledig paletje aan gewijd met bijkomende tekstomloopopties.

Ook met HTML en CSS is zoiets heel eenvoudig te realiseren. In Photoshop daarentegen is het allemaal wat moeilijker. Logisch: Photoshop is er in de eerste plaats om foto’s te bewerken. En niet om teksten te zetten. Maar omdat zoveel ontwerpers opgegroeid zijn met Photoshop, is het toch voor velen onder ons het favoriete programma om websites in te ontwerpen.

Vandaar deze eenvoudige tip om het effect van een tekstomloop te bekomen in Photoshop:

• Teken met de pen de vorm van een tekstkader rondom je foto. Door te shift-klikken kan je trouwens perfect horizontale of verticale lijnen tekenen.
• Beweeg met het tekstgereedschap binnenin je padvorm. Als alles goed is zie je een bolle cursor.
• Klik in de padvorm om het pad om te zetten naar een tekstkader.
• Typ of plak je tekst in het tekstkader.

Je tekst zal nu mooi rond de foto lopen. Als je het tekstkader wil aanpassen dan kan je daarvoor de padgereedschappen gebruiken. Met de witte pijl kan je bijvoorbeeld de ankerpuntjes nog individueel verplaatsen.

Het is een beetje behelpen, maar het werkt wel.

Categorieën: Ontwerp, Typografie, Photoshop, Webomgeving,

1 reacties

Een Photoshoptip voor webdesigners

Sinds een paar weken werk ik met de nieuwste versie van Photoshop: CS4. Het programma heeft een aantal leuke nieuwigheden die vooral voor fotografen interessant kunnen zijn, zoals de mogelijkheid om lokale aanpassingen te doen op foto’s in Camera Raw.

Ook het nieuwe Content-aware scaling (of Zo schalen dat inhoud behouden blijft in het Nederlands) is erg handig wanneer je een foto buiten verhouding in een ontwerpje moet doen passen. Wie er nog niet van gehoord heeft moet zeker eens dit filmpje checken.

Vandaag ontdekte ik dat Content-aware scaling ook erg interessant kan zijn voor wie net als ik vaak websiteontwerpen maakt.

Ik werkte zopas aan een html-formulier en dan heb ik de gewoonte om standaard invulvelden via een screenshot in mijn ontwerp te plakken. En dan begint het natuurlijk: een textarea moet groter worden, een tekstveld moet smaller worden, een knop moet breder worden… vóór versie CS4 was dat vooral een vervelende kwestie van selecteren, verplaatsen, stukjes kopiëren en plakken. Want wie dat niet deed kwam uiteraard bedrogen uit:

Het invulveld hierboven is geschaald op de oude manier: via Bewerken > Transformatie > Schalen. Niet erg mooi en helemaal niet realistisch. Door Bewerken > Zo schalen dat inhoud behouden blijft (wat een naam voor een menu-item!) te gebruiken, kan je vrij makkelijk dit resultaat bekomen:

Dit ziet er wél scherp en realistisch uit! Ik ben verkocht. Nu is het nog aan pak makkelijker om formuliervelden tientallen keren te schalen terwijl het ontwerp vorm krijgt.

Tot slot nog een kleine tip: ik heb gemerkt dat het via Zo schalen dat inhoud behouden blijft beter is in stappen te schalen wanneer je een beduidend stuk groter of kleiner moet schalen. Probeer je het in 1 beweging dan durft Photoshop de randen wel eens een onrealistische wrong te geven.

Categorieën: Ontwerp, Photoshop,

9 reacties

De Helvetica’s van het internet

Arial, Verdana en Georgia: het zijn de Helvetica’s van het internet. Overgebruikt, onopvallend en leeggezogen van elke connotatie. Waarom vallen webdesigners altijd terug op deze 3 klassieke lettertypes? Het antwoord is helemaal niet spannend: het zijn de enige fonts die op nagenoeg elke computer geïnstalleerd zijn. En dus is de kans enorm groot dat jij ook deze tekst in Arial ziet, en de titels in Georgia.

Maar als we de aankondiging op de nieuwe Typekit website mogen geloven, dan staan we aan de vooravond van een typografische webrevolutie. Typekit, een online fontbibliotheek, zal het technisch en legaal mogelijk maken om als ontwerper webteksten in een arsenaal aan kwaliteitslettertypes te zetten. De bezoeker krijgt dan steevast het juiste lettertype te zien. Hoe het allemaal in zijn werk zal gaan, kan je lezen op de Typekit blog.

Hoera! Eindelijk zullen ook websites net als boeken, tijdschriften en affiches in prachtige letters verschijnen. Niet via onhandige javascript- of flashtrucjes, maar dankzij het eenvoudige @font-face css-principe. Ik kijk uit naar zoveel moois. Lettervormen die iets vertellen over de inhoud van de website, die een gevoel kunnen versterken en die bijdragen tot een betere ervaring van het internet.

Alleen vrees ik ook de keerzijde van de medaille. Hoelang zal de experimentale fase duren waarin blogs en websites van hobbyisten in de meest onleesbare lettertypes gezet zullen worden? Een Impact voor leestekst en een goedgekozen Comic Sans – dat is toch schoon meneer – voor de invulvelden?

Hoewel Arial, Verdana en Georgia al lang niet meer tot de verbeelding spreken, één ding moeten we ze wel toegeven: ze zijn verdomd goed leesbaar op schermen. Ze leggen de nadruk op de tekst en de inhoud en daar gaat het in de meeste gevallen om.

Het wordt een uitdaging voor iedereen om op een goede manier met de nieuwe mogelijkheden om te gaan. Komt er ooit een dag waarop we met weemoed terugblikken op het oude driefontsinternet?

Categorieën: Ontwerp, Typografie, Opinies, Webomgeving,

4 reacties

Over titels en witruimte

Op het web is het vaak wat behelpen wanneer het op typografie aankomt. Letters en teksten worden door de verschillende browsers en platformen anders weergegeven. En zowat elke tekst is dan nog eens vrij updatebaar door de webmaster. Als ontwerper is het dan ook moeilijk om webtekst voor elke eindgebruiker met zekerheid mooi vorm te geven.

Neem nu even de titel van dit heel eenvoudig ontwerp voor een nieuwspagina:

De titel ziet er goed uit. Maar wat als een klant via het contentmanagementsysteem van zijn site een langere titel ingeeft? Dan kan er wel eens een typografisch probleempje optreden:

Zoals je ziet verschuift het laatste woord van de titel naar een nieuwe regel. Omdat dat laatste woord heel kort is, bestaat die regel uit teveel witruimte. De titel staat daardoor helemaal niet meer mooi en is minder makkelijk te lezen.

Een oplossing

Shaun Inman schreef al in 2006 een makkelijk te implementeren php-functie die het probleem gedeeltelijk oplost door een harde spatie (non-breaking space) tussen de laatste twee woorden van de titel te plaatsen. Die zorgt er voor dat die twee altijd op dezelfde regel blijven. Het resultaat zie je hieronder:

Ongetwijfeld veel beter. Alleen kan het in bepaalde gevallen ook minder goede resultaten opleveren. Als het laatste woord lang genoeg is zoals in het voorbeeld hieronder, dan is het soms niet nodig om de harde spatie te gebruiken die je in het voorbeeld ziet toegepast:

Uiteraard is die laatste titel niet per sé slecht gezet, maar ik hou niet zo van de vele witruimte op beide regels. Ook de volgende situaties komen wel eens voor:

In dit laatste voorbeeld is de tweede regel langer dan de eerste regel en dat is natuurlijk best helemaal te vermijden: het lijken twee titels te zijn, of een titel en een onderschrift.

Een aanpassing

Eén van mijn laatste projecten was het ontwerpen en ontwikkelen van een nieuwswebsite waar dagelijks meerdere artikels gepost worden. Omdat ik vrij veel met een van de bovenstaande titelproblemen te kampen had, heb ik een kleine en eenvoudige aanpassing aan Inmans php-functie toegevoegd.

Ze laat me toe om een parameter op te geven: bestaat het laatste woord uit minder dan x-aantal tekens dan wordt er automatisch een harde spatie tussen het laatste en het voorlaatste woord geplaatst. Is het laatste woord een lang woord dan kan het dus eventueel alleen op de laatste regel staan.

Ik heb het gevoel dat dit in de meeste gevallen een mooier gezette titel oplevert. Het aantal tekens kan ik hoger instellen wanneer de kop veel ruimte in de breedte inneemt en lager wanneer de titel in een smalle ruimte gezet is.

Wil je het zelf eens proberen op je website? Download gerust de php-functie of de ExpressionEngine plugin. Extra suggesties of aanpassingen zijn trouwens meer dan welkom.

Categorieën: ExpressionEngine, Ontwerp, Typografie, Opinies,

2 reacties

Een dynamisch schuifregister in code

In een vorige blogpost kon je lezen over het hoe en waarom van een schuifregister. In dit artikel vatten we de koe bij de horens en gebruiken we CSS en jQuery om een dynamisch schuifregister te maken. Voor wie op hete kolen zit: dit is het resultaat en hier vind je een iets stijlvollere variant.

In den beginne was er HTML

We starten met een eenvoudige htmlpagina: een artikel met daaronder lezersreacties. Als je de bron van die webpagina bekijkt, dan zie je dat ik de plaatsen waarnaar het register moet verwijzen heb aangeduid met een id en een class. In dit geval gaat het om twee h1-tags, maar je zou evengoed een combinatie van andere htmltags kunnen gebruiken:

jQuery maakt het wat pittiger

jQuery maakt voor elk element met de class ‘registerknop’ een aanduiding in het schuifregister. Hoe dat in zijn werk gaat kan je hieronder meevolgen. Tussen de code vind je heel wat uitleg, maar ook straks kom ik er nog even op terug.

Zoals je kan zien zoeken we eerst de hoogte van de schuifbalk ten opzichte van de browservensterhoogte. We trekken 41 pixels af van de hoogte van het browservenster omdat dat de ruimte is die de pijltjes van de schuifbalk zelf innemen op een Mac:

Die ingenomen hoogte varieert trouwens een beetje op Windows én de plaatsing is anders. Om goed te zijn zou je die waarde (41) dus moeten laten afhangen van het besturingssysteem van de gebruiker, maar zover heb ik het in dit voorbeeld niet gedreven. (Het kan dus zijn dat dit schuifregister niet helemaal accuraat werkt op Windows computers!)

Soit, terug naar het stukje code van hierboven: nadat we enkele vaste waarden in variabelen hebben opgeslagen, gaat het script op zoek naar elk html element met registerknop als class. Als zo’n element gevonden wordt dan wordt een htmllijst aangemaakt (ul) waarin per registerknop een list item (li) verschijnt. De htmllijst is makkelijk vorm te geven met CSS en kan ontelbaar veel list items bevatten. Zoals je kan zien in het stukje code kan je het schuifregister ook via accesskeys bedienen. (De code hiervoor is weliswaar niet waterdicht.)

De plaatsing van elk list item wordt in het voorlaatste regeltje code afgehandeld.

Plaatsing en vormgeving met CSS

Hoewel we jQuery gebruiken om de plaatsing van elk list item via CSS in te stellen, is de belangrijkste opmaak toch wel apart in een stylesheet terug te vinden. De CSS die nodig is om het schuifregister vorm te geven heb ik telkens in de head sectie van de htmlpagina geplaatst:

Het meest opmerkelijke stukje is hier het instellen van de fixed position. Hierdoor blijft elk list item mooi in positie staan als de schuifbalk schuift.

De andere CSS-code die ik in een externe stylesheet heb geplaatst is niet zo belangrijk voor het schuifregister op zich maar zorgt voor de opmaak van de rest van de pagina-elementen. We mogen onszelf nu trouwens wel al eens op de borst kloppen: dit is ons resultaat.

Meeschalen met het browservenster

Het komt aardig in de buurt maar mist nog iets: als de gebruiker het browservenster kleiner of groter maakt, dan klopt de aanduiding van het schuifregister niet meer. Maar met behulp van een vleugje jQuery kunnen we dit makkelijk oplossen: we gieten onze code in een functie toonRegister() die we uitvoeren wanneer het venster geschaald wordt.

Belangrijk is dat we hierbij telkens eerst het schuifregister ook verwijderen om na verloop van tijd geen honderden schuifregisters te zien. Ik schreef hier de welluidende functie verbergRegister() voor:

Dit is het resultaat. Schaal gerust je browservenster eens door de rechterbenedenhoek vast te nemen en te verslepen. Je zal zien dat de plaatsing van de aanduidingen in het schuifregister telkens mee aangepast wordt aan de nieuwe afmetingen van het venster. Nice!

Een vleugje finesse

Eigen aan blogs en dynamische websites is dat je als ontwerper niet kan voorzien hoe lang de teksten zullen zijn die je klant op zijn website plaatst. Nu lijkt het een beetje onnozel om een schuifregister te hebben op een pagina waar niet gescrold moet worden (deze bijvoorbeeld). Wat meer is: de aanduidingen zijn niet meer helemaal juist. Daarom heb ik nog een bijkomende controle toegevoegd in het stukje javascriptcode die er voor zorgt dat het schuifregister niet getoond wordt wanneer alle belangrijke elementen duidelijk zichtbaar zijn op de pagina:

Het resultaat

Dit is het resultaat van het experiment. Bekijk ook deze iets stijlvollere variant. In de broncode vind je nog eens alle code op een rijtje.

Het is een makkelijk aanpasbaar en stijlbaar schuifregister geworden. De gebruiker kan bovendien heel snel doorheen de pagina navigeren met behulp van accesskeys.

Ik ben benieuwd naar jullie bevindingen. Vind je zo’n schuifregister duidelijk en gebruiksvriendelijk? Of denk je dat het net verwarrend werkt?

Categorieën: Ontwerp, Ontwikkeling, jQuery, Webomgeving,

7 reacties