De auteur beschrijft een project uit zijn periode als UI-engineer bij Apple (2004-2006), waarbij hij de pagina voor het personaliseren van iPod-graveringen heeft verbeterd. In plaats van een simpel formulier, ontwikkelde hij een interactieve ervaring met een draaibare iPod en een live preview van de gekozen tekst.
Technische details:
- Animatie: Gerealiseerd via een reeks JPEGs aangestuurd door JavaScript.
- Tekstgeneratie: ImageMagick werd gebruikt om de tekst om te zetten in een 'gegraveerd' beeld.
- UI-meldingen: CSS-klassen zorgden voor een visuele 'yellow fade' bij wijzigingen in verzendtijden.
Hoewel de gebruikte technieken naar huidige maatstaven verouderd zijn, bood het in 2005 een innovatieve gebruikerservaring binnen de beperkingen van de toenmalige browsertechnologie.
Apple iPod Graveermachine
Van 2004 tot 2006 werkte ik bij Apple als UI-engineer voor hun online store. Onderdeel van mijn functie was het prototypen van concepten die een interactieve sprankeling aan de website konden toevoegen.
Het project: Personaliseer je iPod
Een van deze projecten was een verbetering van de pagina "Personaliseer je iPod", waar klanten twee regels tekst konden opgeven om op de achterkant van de iPod die ze bestelden te laten graveren.
In het oorspronkelijke ontwerp bood de pagina geen interactie buiten een eenvoudig formulier. Ik heb dit uitgebreid door de volgende elementen toe te voegen:
- Een draaibare iPod;
- Een live "gegraveerde" preview van de tekst van de klant;
- Een markering van eventuele wijzigingen in de verzendtijden.
Technische uitvoering
Ik animeerde de iPod door een reeks JPEGs te doorlopen met behulp van JavaScript. De gravering werd gemaakt met ImageMagick; deze software nam de tekst van de gebruiker en genereerde een "gegraveerd" beeld dat over de achterkant van de iPod werd geplaatst. De markering van de verzendtijd werd gerealiseerd door CSS-klassen te wisselen om de achtergrondkleur te veranderen, in de stijl van een klassieke gele vervaging (yellow fade).
Reflectie
Er is een oude, werkende demo beschikbaar als je dit zelf wilt uitproberen.
Hoewel we tegenwoordig overduidelijk veel betere manieren hebben om dit soort zaken aan te pakken, leken deze oplossingen in 2005, met de toenmalige beperkte browsertechnologie, een beetje magisch.
***
Als je vragen, opmerkingen of correcties voor dit bericht hebt, stuur ze dan per e-mail naar mij.
Apple iPod Graveermachine
Van 2004 tot 2006 werkte ik bij Apple als UI-engineer voor hun online store. Onderdeel van mijn functie was het prototypen van concepten die een interactieve sprankeling aan de website konden toevoegen.
Het project: Personaliseer je iPod
Een van deze projecten was een verbetering van de pagina "Personaliseer je iPod", waar klanten twee regels tekst konden opgeven om op de achterkant van de iPod die ze bestelden te laten graveren.
In het oorspronkelijke ontwerp bood de pagina geen interactie buiten een eenvoudig formulier. Ik heb dit uitgebreid door de volgende elementen toe te voegen:
- Een draaibare iPod;
- Een live "gegraveerde" preview van de tekst van de klant;
- Een markering van eventuele wijzigingen in de verzendtijden.
Technische uitvoering
Ik animeerde de iPod door een reeks JPEGs te doorlopen met behulp van JavaScript. De gravering werd gemaakt met ImageMagick; deze software nam de tekst van de gebruiker en genereerde een "gegraveerd" beeld dat over de achterkant van de iPod werd geplaatst. De markering van de verzendtijd werd gerealiseerd door CSS-klassen te wisselen om de achtergrondkleur te veranderen, in de stijl van een klassieke gele vervaging (yellow fade).
Reflectie
Er is een oude, werkende demo beschikbaar als je dit zelf wilt uitproberen.
Hoewel we tegenwoordig overduidelijk veel betere manieren hebben om dit soort zaken aan te pakken, leken deze oplossingen in 2005, met de toenmalige beperkte browsertechnologie, een beetje magisch.
***
Als je vragen, opmerkingen of correcties voor dit bericht hebt, stuur ze dan per e-mail naar mij.
Groetjes,