Opdracht #7 – verslag desktopreview

tops

– Bovenaan staan duidelijk de stappen van het proces: adres, bezorgen tot betalen – Pascale Nottroth
Dit ga ik dus houden, ik wil onderzoeken hoe ik het nog duidelijker kan maken want blijkbaar geeft dit houvast aan de gebruiker

– Er zijn suggesties om mensen te prikkelen – Stefan Ramdhari
Suggesties zijn dus blijkbaar goed omdat ze mensen aanzetten tot kopen. Een designkeuze kan zijn om het blok groter te maken, of het op een prominentere plek te zetten.

– Suggesties zijn handig om tips te geven over de onderdelen van een modulaire smartphone – Stefan Ramdhari
Suggesties helpen bij het maken van de juiste keuze, ze kunnen misschien naast de gekozen producten staan zodat ze specifieker worden, of suggesties kunnen verplaatst worden naar het customizing gedeelte zodat ze eerder van pas komen.

Tips

– Er is geen grote knop aanwezig om te bestellen – Pascalle Nottroth
De weergegeven stappen zijn goed, maar blijkbaar zien mensen niet meteen hoe ze naar de volgende stap kunnen gaan. Deze knop kan subtiel, maar ook opvallend zijn, door kleur, vorm en grootte. De plek kan ook nog verschillen.

– Er is geen grote knop aanwezig om terug te gaan naar het customizing gedeelte – Carine Zilvold
Deze tip heeft dezelfde strekking als de bestelknop, en dezelfde designkeuzes. Deze knop moet  ook in de buurt van de bestelknop staan.

– Suggesties kunnen ook vervelend zijn, zet het misschien onder de gekozen producten in plaats van ernaast – Pascale Nottroth
Blijkbaar moet ik oppassen met de suggesties, die ook een top waren. Ik denk niet dat het verplaatsen van de suggesties naar beneden de goede oplossing is, ze vallen dan niet meer op. Als ik de suggesties specifieker maak en kleiner denk ik dat ze ook niet meer vervelend zijn.

Conclusie

Er zijn twee belangrijke elementen die aanpassingen nodig hebben. Dat zijn de stappen en de suggesties.

  • De stappen: belangrijkst omdat ze mensen door het proces helpen
    Wat moet er gebeuren: knoppen toevoegen waarmee de gebruiker terug en vooruit kan in het proces
  • De suggesties: Minder belangrijk omdat ze niet essentieel zijn voor het proces, maar kunnen ze de ervaring verbeteren.
    Wat moet er gebeuren: De suggesties moeten specifieker en vervolgens kleiner in de productlijst worden geplaatst.

Opdracht #5 – Analyse lo-fi/hi-fi schermontwerp methodes

Wireframing Software

MockFlow

Gebruikt om online in team-verband te wireframen. Wireframes kunnen interactief gemaakt worden.
Alleen geschikt voor het schetsen van pagina’s
Hi-fi
Ontwerp, testen en Prototyping omdat de wireframes interactief gemaakt kunnen worden.

Axure RP

Gebruikt voor het schetsen van wireframes op de desktop en om die snel om te zetten in visuele ontwerpen die interactief zijn.
Geschikt voor het schetsen van pagina’s en voor het documenteren van ontwerpkeuzes
HI-fi
Ontwerp, prototyping, testen omdat de wireframes interactief gemaakt kunnen worden.

Balsamiq Mockups

Gebruikt voor het maken van schetsachtige wireframes, op desktop en online in team-verband. Wireframes kunnen strak en interactief gemaakt worden.
Geschikt voor het schetsen van pagina’s, niet voor documentatie van ontwerpkeuzes
Lo-fi, om te zetten in Hi-fi
Ontwerp en testen, ze onthouden zich van prototyping omdat ze dat niet optimaal vinden.

Conclusie

Persoonlijk zou ik Balsamiq gebruiken omdat het offline en online gebruikt kan worden in teamverband. Het uiterlijk is schetsachtig, en dat is beter om aan de klant te laten zien dan de saaie grijze levenloze standaards wireframes die de meeste programma’s uitkotsen.
Axure is ook mooi omdat het wireframes een aanpasbaar uiterlijk kan geven maar het programma is voor mij te uitgebreid en te duur.

Analoog Wireframen

Schetsen met potlood

Gebruikt voor de eerste stappen in het ontwerpen, het is gemakkelijk en snel. Vooral individueel, maar kan je ook makkelijke aan anderen laten zien.
Geschikt voor het schetsen van pagina’s, het interactief maken is moeilijk omdat je dan dingen moet verschuiven en vastleggen met video. Dat leidt af van het echte proberen.
Zowel hi-fi als lo-fi
Ontwerp, prototyping en testen als je dingen gaat schuiven en vastleggen.

Whiteboard

Gebruikt om ideeën uit te schetsen, dat kan individueel maar het whiteboard is ideaal om met een groep mensen te doen.
Geschikt voor het schetsen van pagina’s, als je het interactief maakt moet je een video maken omdat je dingen dan wil uitvegen.
Zowel hi-fi als lo-fi
Ontwerp, prototyping als je een video maakt en testen eigenlijk niet.

Met stickies

Gebruikt om prototypes te maken waarbij je papiertjes met schetsen op een bord kunt plakken. Je kunt ze verwisselen, verschuiven of weghalen dus kun je testen wat de gebruiker doet met jouw ontwerp.
Hi-fi
Ontwerp, prototyping en testen

Conclusie

Al deze technieken zijn best handig, maar wel in verschillende situaties. Als ik individueel begin maak ik altijd eerst schetsen met potlood, maar in een groep is het handiger om op een whiteboard te werken. Als je je ontwerpen wilt laten testen zijn stickies heel handig omdat je van te voren al je states en transitions kunt vastleggen en zo een scenario door kunt lopen met een gebruiker.

Presenteerbare wireframes

HTML/CSS

Gebruikt om hele websites mee te maken, maar ook handig voor prototypes die als ze goedgekeurd worden meteen klaar zijn voor gebruik.
Geschikt voor het interactief maken van prototypes.
Hi-fi
Prototyping en testen

Photoshop

Gebruikt om pagina’s te ontwerpen, maar je kunt er geen interactieve prototypes mee maken. Dit is vooral handig om de klant een indruk te geven van het product met mockups.
Geschikt voor het ontwerpen van pagina’s
Lo-fi of Hi-fi
Ontwerpen

Fireworks

Gebruikt om pagina’s te ontwerpen en ze vervolgens interactief te maken.
Geschikt voor het ontwerpen van pagina’s en het interactief maken van de ontwerpen om te prototypen
Hi-fi
Ontwerpen, prototyping en testen.

Conclusie

Om ontwerpen te presenteren aan de klant vind ik Photoshop het handigst, je maakt heel snel ontwerpen die er gelikt uit zien en de klant is onder de indruk. Als de klant iets anders wil kun je dingen toch snel aanpassen. Het is niet interactief, maar om de hele applicatie te testen gebruik je gemakkelijker een papieren prototype omdat er daar geen digitale grenzen bij zijn en kleine dingen kun je in html en css uitproberen.
Fireworks vind ik niet fijn omdat het een extra stap tussen photoshop en html/css betekent die heel veel tijd en geld kost. Het is veel gemakkelijker om een papieren prototype te maken en de visuele ontwerpen los te presenteren.

Opdracht #4 – verslag intervie

Welke schetsen heb ik gekozen?
Ik heb twee schetsen gekozen die een mogelijkheid tonen om onderdelen en typen onderdelen te selecteren. De eerste schets is enkel visueel, de tweede schets is ook ruimtelijk en bied de mogelijkheid om ook de plaatsing van onderdelen aan te passen.

schets09   schets01

Wie heb ik geinterviewd?

Mijn broertje, omdat ik weet dat hij de vragen die ik stel snel zal begrijpen. Hij heeft mijn ontwerp nog nooit gezien en weet waarschijnlijk alleen uit het nieuws wat een modulaire smartphone is.

Het interview
Interviewer: Ik heb een aantal schetsen gemaakt, en die zijn bedoeld voor een applicatie om een modulaire smartphone te customizen.
Correspondent: (knikt begrijpend)
Interviewer: Ik ga je twee schetsen laten zien en dan wil ik er achter komen of dat jij meteen begrijpt hoe alles werkt.
Correspondent: Oké.
Interviewer: De eerste is deze (laat eerste schets zien), wat denk je dat je er mee kan?
Correspondent: Uhm, ik zie hier een keuzemenu waarmee ik de resolutie van een camera kan bepalen. En waarschijnlijk kan ik ook het type wifi-antenne, batterij en schermtype bepalen, door naar de zijkanten te gaan.
Interviewer: Naar de zijkanten?
Correspondent: Jaa…
Interviewer: kun je vertellen hoe je denkt dat het werkt?
Correspondent: Waarschijnlijk door op de pijltjestoetsen te klikken en door te klikken kun je ook selecteren.
Interviewer: Oké, en hoe kun je dan een ander type resolutie kiezen?
Correspondent: Waarschijnlijk door op het hele vak te klikken, dus het maakt niet uit waar in het vak je klikt, of je nou op het vinkje, de lens of de  tekst klikt.
Interviewer: En begrijp je ook waar alle iconen voor staan?
Correspondent: Ja, ik zie een camera, een antenne, een batterij en een telefoon. Ik neem aan dat het om het scherm gaat want dat is meestal de voorkant van de telefoon.
Interviewer: En denk je dat je zo je hele telefoon kunt aanpassen?
Correspondent: (kijkt even omhoog) Ik denk het wel. Ik kan niet alle opties zien, ik mis wel een processor hier, maar voor de rest wel.
Interviewer: Hoe denk je dat je bij een processor kunt komen als die niet meteen zichtbaar is maar die er wel is.
Correspondent: Door op de pijltjes te klikken.
Interviewer: Oké, dan heb ik nog een ander ontwerp, een meer 3d-ontwerp (laat schets zien) Hoe denk je dat dat werkt?
Correspondent: (denkt na) Ik zie keuzes voor antenne, camera en batterij, op dit moment ben ik mijn camera aan het selecteren, door op de pijltjes te klikken kan ik wisselen tussen type camera, ik neem aan dat er dan een mooie animatie te zien is waarbij de volgende op mij af komt en de vooraanstaande voorbij mij gaat dan komt de volgende tevoorschijn. Wat ik op dit moment aan het kiezen ben kan ik veranderen door bijvoorbeeld op de antenne of de batterij te klikken.
Interviewer: En hoe denk je dat je onderdelen groter of kleiner kunt maken?
Correspondent: Misschiiiien, kan ik er mee slepen? (kijkt bedenkelijk)
Interviewer: En wat gebeurd er dan als je sleept?
Correspondent: Dan wordt de module waarmee ik aan het slepen ben groter en de module daarnaast of daaronder wordt kleiner.
Interwiewer: En zou je ze op zo’n manier ook kunnen verwisselen? Hoe zou dat werken?
Correspondent: Waarschijnlijk kan ik ze dan verslepen.
Interviewer: En wat gebeurd er dan met het onderdeel dat daar boven of onder staat.
Correspondent: Daar gebeurd niks mee, tot op het moment dat ik de module die ik aan het verslepen ben loslaat, en dan verwisselen ze van plek.
Interviewer: Bedankt, dat was het.

Analyse

Wat werd er begrepen?
Eerste schets: De proefpersoon zag meteen dat er een resolutie voor een camera bepaald kon worden. Daarna zag hij dat er ook andere onderdelen aangepast konden worden door op de icoontjes te klikken en dat er met de pijltjes door onderdelen gebladerd kon worden.

Tweede schets: Welke onderdelen, welke geselecteerd, hoe wisselen van types binnen onderdeel. Door op andere onderdelen te klikken kunnen die ook aangepast worden.

Wat werd juist anders begrepen?
Eerste schets: De persoon zag niet meteen wat er met het telefoon icoon bedoeld werd, nam aan dat dat het scherm was.
Tweede schets: De proefpersoon verwachtte een animatie. Door te slepen kunnen blokken vergroot en verkleind worden, maar door slepen kunnen blokken ook verplaatst worden.

Hoe zou ik mijn ontwerp daarop aan kunnen passen?
Het telefoon icoon gebruiken het scherm, en voor de kleuren en patronen op de voorkant aparte iconen maken.
Duidelijker maken hoe blokken vergroot/verkleind en van plek kunnen veranderen. Nadenken over animaties.

Opdracht #3 – schetsen van assets

Ik heb schetsen gemaakt voor een applicatie die het samenstellen van een modulaire smartphone mogelijk moet maken. Onder elke schets staat kort een toelichting.

schets05

De klassieke manier van selecteren met formulier elementen. In deze schets kan eerst een onderdeel geselecteerd worden, die vervolgens toegevoegd wordt aan de lijst van onderdelen die de gebruiker in zijn/haar telefoon wilt. schets06

Dit is een visuele weergave van de lijst hierboven, waarbij meteen duidelijk wordt dat de onderdelen in de telefoon komen. Onderdelen zouden vanuit een keuzelijst in de telefoon geschoven kunnen worden. schets07

Om het mogelijk te maken om te spelen met de plaatsing van onderdelen heb ik een schets gemaakt waarbij de onderdelen in een 3d-weergave staan. De pijlen geven aan dat onderdelen in en uit de groep geschoven kunnen worden.

schets08

Een manier om een laag binnen de telefoon te selecteren. De bovenste laag is de voorkant van de telefoon,daaronder is een laag met bijvoorbeeld de processor en de batterij, en achteraan zit de achterkant van de telefoon.

schets09

 

Een minder ruimtelijke interface, waarbij onderaan een onderdeel geselecteerd kan worden. Met de pijltjes kan gebladerd worden in alle onderdelen. Als een onderdeel geselecteerd is kan boven een type onderdeel geselecteerd worden.

 

 

schets10\

Dit is een andere versie van de schets hierboven, met in plaats onderaan de onderdelen links een lijst met tabs. Het type onderdeel kan nu gekozen worden door te bladeren met de pijltjestoetsen.

schets01

In deze schets heb ik het selecteren van onderdelen en types gecombineerd met het verplaatsen en vergroten/verkleinen van onderdelen. De schets geeft weer dat zodra een onderdeel is geselecteerd (door er op te klikken) er een type kan worden gekozen met behulp van de pijltjesknoppen. schets02

Een methode om een kleur te kiezen voor de behuizing van de telefoon. Het kiezen van een kleur gebeurd simpelweg door het klikken op een kleur.

schets03

 

Deze schets laat zien hoe uit een lijst een patroon voor op de behuizing kan worden gekozen. Als een patroon gekozen is wordt deze getoond op een afbeelding van de telefoon.

 

schets04

Deze schets combineert het kiezen van een patroon met het kiezen van een kleur. Het patroon kan gekozen worden door te bladeren met de pijltjestoetsen, de kleur kan gekozen worden door te schuiven met een schuifje en in het vak een plek te kiezen waar de kleur donkerder of lichter is.

 

Opdracht #2 – Analyse feedback tentoonstelling

  • Groene tape achter verpakkingen wegwerken.
    Dit is het belangrijkst omdat het er onverzorgd uitziet. Ik heb dit zelf geconstateerd.
  • Platgedrukte verpakkingen vervangen door onaangetaste verpakkingen.
    Dit is punt komt op de tweede plaats omdat het een tip is van de docent.
  • Naast voedselverpakkingen ook bijvoorbeeld technologieverpakkingen toevoegen
    Dit is een idee van Jay. Ik vond dit ook belangrijk omdat het de verzameling uitgebreider en diverser maakt, maar dat is niet het belangrijkst omdat de verzameling al uitgebreid en divers was.
    Uiteindelijk heb ik wel technologiehandleidingen gebruikt omdat ik geen technologieverpakkingen had. (Die op de poster pasten.)
  • Meer vormgeving en titels toevoegen, zodat het geheel meer op een poster lijkt.
    Dit ga ik niet uitvoeren omdat het een echte verzameling moet blijven met geen onnodige afleidingen eromheen.Bovendien bleek in de les dat de categorieën al duidelijk zonder titels te herkennen zijn en dat tegenstellingen tussen elementen meteen opvallen.

Hieronder is de poster te zien zoals die is nadat ik de aanpassingen hierboven heb uitgevoerd.

verzameling

Responsive Font-size met ‘%’ ‘px’, ‘em’ of ‘rem’

Stel dat je een website bezoekt op je desktop. Het normale lettertype grootte op een desktop is 16 pixels, maar veel webdesigners schalen dat naar beneden omdat de website op meerdere types schermen bekeken moet worden. Het gevolg is dat je met je ogen veel te dicht op je scherm gaat zitten om de tekst nog te lezen. Dezelfde situatie maar dan andersom doet zich voor als je de website op een mobiel bekijkt. Omdat de letters nu supergroot zijn moet je je mobiel bijna een meter van je gezicht afhouden om comfortabel te kunnen lezen. Op dit moment denk je misschien, zou het niet veel mooier zijn als de grootte van het lettertype zich aanpast aan de grootte van het scherm dat je op dat moment gebruikt. Nou, dat kan.

Sinds versie 3 van css is het mogelijk om zogenaamde media-queries te gebruiken op je website. Je kunt dan per type scherm instellen wat de website moet laten zien. Hieronder een voorbeeld van hoe je stylesheet eruit zou kunnen zien als je een desktop, een tablet en een mobiel wilt ondersteunen, dat mobile-first doet, en je pixels gebruikt om je lettergrootte in te stellen.

h1 { font-size: 16px;}

h2 { font-size: 12px;}

p { font-size: 10px;}

 

@media all and (min-width: 980px) {

h1 { font-size: 20px;}

h2 { font-size: 14px;}

p { font-size: 12px;}

}

 

@media all and (min-width: 1260px) {

h1 { font-size: 24px;}

h2 { font-size: 18px;}

p { font-size: 16px;}

}

Probleem opgelost? Niet dus. Want versies 8 van Internet Explorer en lager ondersteunen geen pixels als eenheid om lettergroottes mee in te stellen. En anno 2014 zijn er nog steeds legio bedrijven die een verouderde versie van internet explorer gebruiken. En wie neemt hen dat kwalijk, met hun eigenwijze systeembeheerders die niets zien in vernieuwing (lees: extra werk).

Nu komt de eenheid ‘em’ in beeld. Em wordt gebruikt als relatieve eenheid, zodat Internet Explorer je webpagina netjes kan schalen. Wanneer je de standaard lettergrootte van het document op 16px laat staan, zal een h1 element met een lettergrootte van ‘1.5em’ anderhalf keer zo groot zijn als 16 pixels, 22 pixels dus. Alleen het vervelende em is dat het als basis lettergrootte niet de standaard lettergrootte van het document neemt, maar de lettergrootte van het omvattende element. Heb je dus een standaard lettergrootte van 16 pixels, een div element met een lettergrootte van 0.8em, en daarin een p element met een lettergrootte van nog eens 0.8 em, dan wordt je lettergrootte in pixels 16 * 0.8 * 0.8 = 10,24 pixels, en dat slaat natuurlijk nergens op. Laat staan dat het makkelijk is om mee te rekenen. Eigenlijk schiet je met ‘em’ dus niets meer op dan wanneer je procenten gebruikt om je lettertypes te schalen, wat net zo min is aan te raden.

En daarom is er in versie 3 van css nog iets nieuws uitgevonden. De eenheid ‘rem’, wat staat voor root-em. Met rem hoef je niet steeds rekening te houden met de lettergrootte van het omvattende element, maar hoef je maar één keer de lettergrootte van het document in te stellen waarna je dat rem overal x aantal keer kunt vergroten of verkleinen.

Als je bovendien de lettergrootte van het document op 62.5% instelt kun je heel gemakkelijk zien op welk aantal pixels de lettergrootte uitkomt,  want want 16px * 0,625 = 10 pixels. 2.4rem is dan gewoon 24 pixels als je het omrekent. Wanneer je je website vervolgens responsive maakt wordt alles nog makkelijker omdat je alleen de lettergrootte van je document hoeft aan te passen, de rest wordt automatisch mee geschaald. Hieronder laat ik zien hoe je stylesheet er dan uitziet. Speciaal voor browsers die rem niet ondersteunen heb ik nog wel het aantal pixels ingesteld. Daarna stel ik steeds het aantal rem in zodat nieuwe en moderne browsers een relatieve lettergrootte gebruiken.

 

html { font-size: 62.5%)

h1 { font-size: 16px; font-size: 1.6rem;}

h2 { font-size: 12px; font-size: 1.2rem;}

p { font-size: 10px; font-size: 1.0rem;}

 

@media all and (min-width: 980px) {

html { font-size: 80%; }

}

@media all and (min-width: 1260px) {

html {font-size: {font-size: 100%;}

}

Hieronder staat bij bron 3 een link naar een webpagina waarbij ik het lettertype op deze manier responsive heb gemaakt. Als je de pagina op een desktop opent kun je het venster verkleinen en vergroten om eens te kijken welk effect dat heeft op de grootte van het lettertype.

Bronnen

1. http://www.w3schools.com/css/css_font.asp
2. http://snook.ca/archives/html_and_css/font-size-with-rem
3. http://www.daniel-dewit.nl/wp-content/Responsive%20design/index.html

On scroll footer

Voor mijn werk liep ik tijdens het bouwen van een website voor een klant tegen een probleem met een footer aan. De klant wilde graag dat de footer altijd te zien was ondanks hoe groot of hoe klein het scherm van de gebruiker was. Hij kwam zelf met het voorstel om de gehele website te verkleinen, maar dat is natuurlijk niet mooi in verband met leesbaarheid en ruimtegebruik. Na wat hersenwerk bedacht ik me dat sommige website een dynamische header gebruiken, die kleiner wordt als je naar beneden scrollt op de webpagina, maar wel altijd bovenin zichtbaar blijft.

Het leek me de ideale oplossing omdat principe op de footer in de website van de klant te los te laten. Echter tot mijn verbazing bleek dat er talloze jquery scripts waren voor zulke dynamische headers, maar geen enkele voor een dynamische footer. Na wat zoekwerk bleek dat de oorzaak lag bij jquery, die wel een functie voor scrollTop hadden, maar geen functie voor scrollBotttom die nodig is voor een dynamische footer. Gelukkig was de oplossing zoals altijd op internet te vinden, en was er al iemand geweest die in één regeltje code een vervangen voor scrollBottom had geschreven. Met behulp van dat stukje code kon ik toen mijn eigen script schrijven, dat heel simpel de class van de footer aanpast zodra je de onderkant van de pagina hebt bereikt. Zo kun je de footer twee uiterlijken geven, een grote voor de onderkant van de pagina en een kleine voor als de gebruiker niet aan de onderkant van de pagina is en er weinig ruimte beschikbaar is.

$(document).ready(function() {
    if ($(document).height() > $(window).height()) {
        $("#footer").addClass("footersmall");
    }
    else {
        $("#footer").addClass("footerbig");
    }    
    $(window).scroll(function() {
        var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();
        if (scrollBottom > 170) {    
            $("#footer").addClass('footersmall').removeClass('footerbig');
            $(".footerspace").css('display', 'block');        
        } else {  
            $("#footer").addClass('footerbig').removeClass('footersmall');
            $(".footerspace").css('display', 'none');        
        }
    });     
});

Een aantekening bij het script is wel dat de footer twee statische hoogtes nodig heeft wil dit script goed werken. Zodra de footer namelijk kleiner wordt zal er onzichtbare ruimte onder de pagina toegevoegd worden, en die moet hetzelfde zijn als de hoogte van de grote footer. Ook is er een vaste waarde die bepaald vanaf welk aantal pixels scrollen vanaf de onderkant de gebruiker een kleinere footer krijgt voorgeschoteld. Maar als je al die waarden goed hebt ingesteld krijg je een footer die vloeiend groter of kleiner wordt afhankelijk van hoever de gebruiker naar beneden scrollt, en dat loont.

Een werkend voorbeeld is te zien op http:www.vizoverwarming.nl/, de website van de klant waar ik het script voor geschreven heb.

Update: Inmiddels is de werking van het script niet meer te zien op de website van de klant.