Dit artikel beschrijft een lijst met usability richtlijnen die nog verder onderzocht worden. De richtlijnen zijn opgesteld door verschillende internetbronnen. @oeroek gaf mijn nog enkele aanvullingen die ik later zal noemen. Graag ontvang ik jullie mening en aanvulling over de onderstaande lijst.

Usability richtlijnen

1. Consistentie voor de gebruikers interface
Gebruik voor elke pagina een consistente lay-out. Maak, indien mogelijk, de lay-out ook consistent aan internetsite.

2. Eenvoudige data invoer
Het handmatig invoeren van data op de mobiel is een langzaam proces. Zorg daarom voor eenvoudige data-invoer, alleen op plaatsen waar het noodzakelijk is.

3. Effectief netwerk gebruik
Ga uit van een downloadsnelheid van 60 kb / sec en lager.

4. Mobiel onafhankelijk
Zorg dat de website bereikbaar is op elke mobiel met internetverbinding.

5. Dynamisch personalisatie
De mobiel is persoonlijk en maak daarom de website persoonlijk. Maak, indien mogelijk. gebruik van eerder opgeslagen gegevens.

6. Zorg voor eenvoudige interactiviteit
Een mobiel heeft geen muis en vaak een aangepast keyboard. Dit maakt de interactie ingewikkelder. Zorg voor eenvoudige interactie tussen gebruiker, mobiel en de website.

7. Toon alleen essentiële informatie
Elke pagina van een website heeft een bepaald doel. Geef alleen de informatie weer die bijdraagt aan dit doel.

8. Ontwerp mobiel vriendelijke lay-outs
Internet via de mobiel vraagt om een special ontworpen lay-out voor de mobiel.

9. Zorg voor instructie, daar waar nodig
Internet via de mobiel is vernieuwend, geef instructies voor het voltooien van taken.

10. Verbruik geen waardevolle tijd van de gebruiker
Internet via de mobiel is vaak een kleine stap in een groter proces. De gebruiker is doelgericht opzoek naar informatie. Zorg ervoor dat de gebruiker dit zonder omweg kan vinden.

11. Gebruik herkenbare, begrijpbare taal
Gebruik herkenbare en begrijpbare taal zodat de website eenvoudig in gebruik is.

12. Geef bruikbare, begrijpbare feedback
Geef feedback. De gebruiker weet hierdoor de status van de actie/pagina en welke acties hij/zij moet ondernemen.

13. Zorg dat de website zichtbaar is met weinig licht
Een mobiel wordt ook op donkere plaatsen gebruikt (bijv. in het donker op straat), een website moet in dat geval ook bruikbaar zijn.

14. Gebruik effectieve en eenvoudige leesbare kleurcombinaties
Zorg dat het contrast in kleur dusdanig groot is dat de gebruiker zonder moeite de website kan lezen en gebruiken.

15. Zorg dat gebruikersinterface voorspelbaar is
De interface acties moeten voorspelbaar zijn voor de gebruiker. Zo weet hij/zij precies wat er gaat gebeuren en welke informatie hij/zij kan verwachten.

16. Foutmeldingen moeten consistent zijn, duidelijk uitleg geven over het probleem en betrouwbare suggesties geven
Door de consistentie worden foutmeldingen herkenbaar. Daarnaast moet een foutmelding een oplossing of alternatieve oplossing bevatten voor het betreffende probleem.

17. Houd rekening met verschillende schermgroottes en browers. (Schermen: 96px, 128px, 176px, 240px, 320px)

18. Zorg dat de website doelgericht is i.p.v. branding en merk gericht
Zorg dat de website zich richt op het doel van de gebruiker per pagina i.p.v. branding, kleur en merk. Op dit moment is het gebruik van internet op de mobiel doelgericht, in de toekomst zal deze richtlijn veranderen.

19. Interactie met mobiele websites moet vanuit de gebruiker komen
Mobiele websites zijn user-driven, dat wil zeggen dat de content opgevraagd wordt door de gebruiker. Zorg ervoor dat de gebruiker informatie naar zich toe trekt i.p.v. dat de website ongevraagde informatie naar de gebruiker stuurt.

20. Ervaringen met mobiele websites moeten overeenkomen aan voorgaande ervaringen met eerdere technologie (bijvoorbeeld: internet)
Veel mensen hebben geen tot weinig ervaring met internet via de mobiel. Om herkenbaar te zijn kun je gebruik maken van eerdere technologie-ervaringen (bijv. sfeer, interactie en eenvoudige functionaliteit van websites).

21. Interactie met mobiele websites zijn vaak kleine stappen van een veel groter proces
Mobiele websites worden vaak gebruikt als kleine stap in een groter proces. Bijvoorbeeld: Vertrektijden opzoeken voor een treinreis. Houd hier rekening mee!

Usability gericht op elementen

22. Toon de hoofdnavigatie niet op elke pagina, dit neemt te veel beeldruimte in beslag

23. Onderscheid (duidelijk) geselecteerde items van niet geselecteerde items (bijv. navigatie)

24. Plaats standaard surfknoppen (back & forward).

25. Gebruik geen disabled inputveld voor informatie die niet aangepast kan worden.

26. Gebruik geen fixed font-sizes en kleine fonts.

27. Gebruik een duidelijke navigatie structuur.

28. Gebruik typografisch hiërarchie.

29. Grote buttons creëren meer een actie gevoel.

Bronnen
http://sw.nokia.com/id/34762388-9434-4c42-9c5e-3e545b0975ea/S60_Platform_Visualization_and_Graphic_Design_Guideline_v1_0_en.pdf
http://www.2c.nl/nl/over_2c/nieuwsbrief/2007-10/item4.php
http://mobile.emerce.nl/2007/04/tien_moets_voor.html
http://ww.drucker-associates.com/MUE.htm
http://www.cameronmoll.com/archives/000428.html
http://www.photo-router.com/?q=node/9
http://msdn2.microsoft.com/en-us/library/ms854765.aspx
http://www.usability.com/news/article3008.asp
http://www.developertutorials.com/tutorials/miscellaneous/7-usability-guidelines-for-websites-on-mobile-devices-8-01-29/page2.html
http://yuiblog.com/blog/2007/10/02/challenges-of-interface-design-for-mobile-devices/
http://www.giantant.com/publications/mobile_context_model.pdf
http://sender11.typepad.com/sender11/2008/01/prototyping-mob.html

Deze blogpost beschrijft een aantal literatuurbronnen, die ik ga onderzoeken. Daarnaast ga ik de huidige generatie mobiele websites analyseren en zal ik uiteindelijk een usability test uitvoeren. Wat vind je van de lijst? Ontbreekt er nog een website?

Literatuurstudie

• DotMobi Mobile Web Developer’s Guide
• Screen resolution detector
• .Mobi Wikipedia
• Small surfaces
• Mobile applications
• Mobile usability guidelines
• Mobile world congress
• London gets free .mobi domain
• Mobile webdesign: tips & tricks
• Mobile webdesign: the series
• Make your site mobile-friendly in Two minutes
• W3C Mobiel richtlijnen
• Tips and techniques for mobile web design
• A List Apart: Put your content in my pocket

Mobiele websites

• Smartphone & Pocket PC magazine: Mobile
• Eternal Egypt
  

Het artikel dient als naslagwerk en beschrijft de voorbereiding, het logo-ontwerp richtlijnen, de toelichting van de richtlijnen en de onderzoeksfeiten.

Waarom een logo?
De identiteit van een organisatie wordt voor 90% gevormd door de mensen, de producten, de markt, communicatie met klanten. De andere 10% is voor het logo en de huisstijl. Die 10% is nodig om te zorgen dat de juiste boodschap gecommuniceerd blijft worden en dat iedereen op één lijn blijft zitten.

Voorbereiding

1. Onderzoek het bedrijf, het product, de branche, de doelstelling en vooral de doelgroep.
2. Onderzoek logo’s van concurrenten.
3. Werk het logo uit op papier.

Richtlijnen voor logo’s

1. Ontwerp een onderscheidend logo.
2. Ontwerp een simpel logo
3. Ontwerp een zwart-wit logo
4. Ontwerp een logo in één kleur (niet essentieel, maar wel herkenbaar)
5. Ontwerp een schaalbaar logo.
6. Gebruik de product- of bedrijfsnaam.
7. Gebruik geen standaard font.

Toelichting van de logorichtlijnen

Voorbereiding
1. Onderzoek het bedrijf, het product, de branche, de doelstelling en vooral de doelgroep.
Dit vooronderzoek geeft inzicht in de klant, de opdracht en de doelgroep. De informatie is input voor kennis over de juiste boodschap en de juiste doelgroep. Nu ben je in staat om het logo relateren aan het bedrijf.

2. Onderzoek logo’s van concurrenten.
Een logo moet zich onderscheiden van zijn concurrenten om zo herkenbaar te zijn. Vergelijk de logo’s van concurrenten en kopieer niets van deze logo’s.

3. Werk het logo op papier uit.
Computerprogramma’s bevatten effecten en tools die een belemmering vormen voor het creatief denken. Het schetsen van logo’s is een creatief denken en uitwerken op de computer is rationeel denken. Werk daarom eerst het logo uit op papier om creatievere oplossingen te vinden. Doe dit ook wanneer je slecht kunt tekenen, het gaat namelijk om de visualisatie van verschillende logo’s.

Richtlijnen
1. Ontwerp een onderscheidend logo.
Om op te vallen binnen een branche dient het logo uniek te zijn ten opzichte van de concurrentie. Daarom is het concurrentieonderzoek essentieel voor het logo-ontwerp  (zie voorbereiding punt 2).

2. Ontwerp een simpel logo
Om herkenbaar te zijn moet een logo simpel zijn. Hoe complexer het logo, des te langer een persoon nodig heeft om een logo te onthouden.

3. Ontwerp een zwart-wit logo
Een logo wordt afgedrukt, maak een logo daarom geschikt voor one-color-printing. Het gaat hier om zwart-wit en niet om grayscale. Het komt vaak voor dat een logo ontworpen wordt in zwart-wit en pas na goedkeuring ingekleurd wordt.

4. Ontwerp een logo in één kleur
Kleur een logo in met één kleur. In 2008 is het niet echt actueel meer, maar toch is een één kleurig logo eerder te herkennen en goedkoper bij het afdrukken.

5. Ontwerp een schaalbaar logo
Ontwerp het logo op vector basis en maak het logo schaalbaar van businesscard tot billboard formaat.

6. Gebruik de product- of bedrijfsnaam.
Voeg een product- of bedrijfsnaam toe voor extra branding van het product. In 2008 worden er nog weinig logo’s geïntroduceerd zonder naam.

7. Gebruik geen standaard font.
Gebruik een font wat past bij de uitstraling van het bedrijf / product.

De logo’s die onderzocht zijn in dit onderzoek

Onderzoek
De richtlijnen komen voort uit een kleinschalig onderzoek uitgevoerd door Bas Bakker tijdens het afstuderen in Communicatie & Multimediadesign aan De Haagse Hogeschool. Dit onderzoek is uitgevoerd om logo richtlijnen te verifiëren op betrouwbaarheid.

Hier volgen een aantal onderzoeksfeiten.
- Voor het onderzoek is gebruik gemaakt van logo’s van: KPN, IBM, Nike, HP, Adidas, CNN en Vodafone.
- Logo’s zijn vergeleken met directe concurrenten van de bedrijven.
- Logo’s zijn nagetekend om eenvoud te simuleren.
- Logo’s zijn zwart-wit gemaakt om one-color-printing te simuleren.
- Het aantal kleuren van het logo zijn onderzocht.
- De teksten van logo’s zijn vergeleken met de standaard fonts: Times New Roman, Arial, Verdana.

Bronnen
http://www.creativelatitude.com/logo_notions/logo_notions_0506.html
http://secretgeek.net/logo_rules.asp
http://www.analoga.com.uy/en/articles/logo-designs-simplicity-rules.html

Foto door: Sighlentj

Waarom maak je een debriefing?
Een debriefing is een terugkoppeling van jouw opdrachtinterpretatie, om communicatiefouten in ontwikkeling vroegtijdig te voorkomen. De interpretatie is opgebouwd uit feiten uit de opdrachtbriefing en de eigen probleemanalyse. Mochten deze feiten niet juist zijn, dan kan de opdrachtgever hierop wijzen. Zo bespaar je onnodige kosten door onnodige fouten die ontstaan in de communicatie.

Waarom een probleemanalyse uitvoeren?
Een opdrachtgever weet toch heel goed wat hij wil? Precies, daarom lijdt een opdrachtgever aan tunnelvisie en ben jij als externe partij in staat om het overzicht te houden (helikopterblik). Het kan bijvoorbeeld zo zijn dat jouw opdrachtgever een website wil met een chatbox, terwijl de doelgroep bestaat uit 65 plussers die nooit chatten. Aan jou de taak om geen chatbox te adviseren aan de opdrachtgever.

Debriefing onderdelen
Een debriefing bevat tenminste de onderstaande onderdelen.

• Aanleiding van de opdracht.
• Achtergrondinformatie van de opdracht.
• Opdrachtgever.
• Opdrachtnemer (+ contactgegevens).
• Probleemstelling van de opdracht.
• Doelstelling van de opdracht.
• Acties en verantwoordelijkheden van de betrokken partijen.

Hoe maak ik een plan van aanpak? Wat is de juiste aanpak van mijn project? Hoe communiceer ik dit op de juiste manier? Dit artikel beschrijft het stramien voor een plan van aanpak (PvA), met dit stramien is iedereen in staat om de basis van een project te omschrijven.

Wanneer zet je een plan van aanpak in?
Een PvA zet je in wanneer je het gevoel krijgt dat het project gestructureerd moet worden, dit komt vaak voor bij grotere projecten. Een omvangrijk project loopt namelijk eerder uit tot chaos dan een kleiner project, daarnaast is het voor een klein project niet rendabel (tijd / kosten) om een PvA uit te werken.

Procedure van het plan van aanpak
Het PvA wordt een succes door het plan intern of extern te itereren, hiermee bedoel ik het terugkoppelen naar de opdrachtgever en/of projectleden. Voor de betrokkenen wordt het project concreet en eventueel voegt men aanvullende afspraken toe. Het PvA vormt de basis van het project en zorg er voor dat iedereen akkoord is, voordat het project daadwerkelijk start.

Plan van aanpak stramien

1. Probleemstelling: De centrale vraag van de opdracht. Welk probleem wordt er opgelost?

2. Opdrachtomschrijving: Omschrijving situatie, aanleiding, probleem.

3. Opdrachtgever

4. Opdrachtnemer

5. Visie: Met welke visie wordt de opdracht uitgevoerd? Waar sta je voor als opdrachtnemer? Zo staat de website-ontwerper Perception, voor het ontwerpen van de website die geld verdienen.

6. Projectdoelstellingen: Welke doelstellingen stelt de opdrachtgever? Zijn deze specifiek, meetbaar, acceptabel, realistisch en tijdsgebonden?

7. Projectmethodiek: Welke stappen / fases doorloop je tijdens dit projectt.

8. Projectrollen van de betrokken partijen: Verschillende verantwoordelijkheden.

9. Projectprincipes
- Producteisen
- Doorlooptijd van het project
- Kwaliteitsaspect
- Politieke lading
- Consequenties bij het mislukken
- Investeringsbeslissing
- Belangrijke relaties in het geding
- Invloed op het werk van mensen
- Gevolg op de bedrijfsprocessen
- Betrekking op het operationele niveau
- Betrekking op het tactische niveau
- Bekendheid in middelen
- Bekendheid van het domein (de omgeving van de klant)

10. Projectuitgangspositie
- Benodigde software
- Benodigde hardware
- Beschikbare rapportages
- Ideeën van medewerkers

11. Resultaten
- Milestones
- Op te leveren producten (deliverables)

12. Activiteiten

13. Detailplanning

Handig?  Schrijf je in voor de RSS feed.

1. Opdrachtgever bepaalt de richting
Er is altijd een opdrachtgever betrokken bij het realiseren van een website. In het ergste scenario ben jijzelf de opdrachtgever. De opdrachtgever geeft een doelgroep aan in een interview / gesprek dat je voert. De opdrachtgever heeft namelijk een visie over het product en heeft verstand (door bijv. onderzoek) van de branche. Het is jouw verantwoordelijkheid om deze doelgroep te controleren. Spreek dit natuurlijk wel even af (lees: uren, kosten!).

2. Marktonderzoek om de doelgroep te bepalen
Het doel van het marktonderzoek is het controleren van de doelgroepvisie, om zo de juiste personen met de website te benaderen. Het totale onderzoek bestaat uit 4 kleinere onderzoeken die de criteria van de opdracht vergelijken met de doelgroep (bijv. betaling via creditcard. Heeft men een creditcard?). Je onderzoekt de volgende markten: potentiële markt, beschikbare markt, toegestane beschikbare markt en de uiteindelijk de doelmarkt (doelgroeprichting).

2.1. De potentiële markt
Alle mensen die interesse kunnen hebben voor jouw product / dienst. Als voorbeeld voor de onderzoeken gebruiken we bol.com. Voorbeeld: De potentiële markt voor bol.com bestaat uit mensen die een ooit een boek, elektronica, software, hardware, games muziek, dvd’s of een mobiel willen kopen.

2.2. De beschikbare markt
Een segment van de potentiële markt: Klanten die geïnteresseerd zijn, een bepaald inkomen hebben en het product kunnen aanschaffen. Voorbeeld: Klanten die via internet opzoek zijn naar een product (boek, elektronica, software, hardware, games muziek, dvd’s). Bol.com heeft geen minimaal besteedbedrag per bestelling.

2.3. De toegestane beschikbare markt
Een segment van de beschikbare markt: Klanten die producten mogen kopen door hun leeftijd of door andere criteria. Voorbeeld: Klanten die beschikking hebben over internet, e-mailadres en een afleveradres.

2.4. De doelmarkt
Een segment van de toegestane beschikbare markt: Klanten die de website zullen gebruiken. Doelgroep voor bol.com: Klanten met beschikking over internet, e-mail en een afleveradres die via internet opzoek zijn naar een product voor zichzelf of als cadeau voor een ander. (In aanraking komen met bol.com is geen probleem door de naamsbekendheid.)

3. Doelgroep analyseren
Nu we een doelgroeprichting hebben kunnen we dit onderzoeken. Het doel van de doelgroepanalyse is de doelgroep controleren, segmenteren en meer informatie winnen. Voor de analyse gebruik je technieken als: interview, deskresearch, focusgroepen, personas, etc. Deze technieken bespreek ik later in een ander artikel. Het is echter wel belangrijk om deze stap niet te vergeten en niet klakkeloos van de doelmarkt uit te gaan. Zonder doelgroepcontrole bestaat de kans dat je de website ontwikkeld voor een doelgroep die niet juist is.

4. Bronnen
http://www.bol.com
Het marketingplan, Marian Burk Wood
http://www.sxc.hu

Inspiratiebronnen

• Mensen; wat ze zeggen en wat ze doen.
• Nieuwsbronnen; kranten, tv en nieuws websites.
• Te volle RSS readers (te vol is belangrijk!).
• Blogs, Twitter en andere websites.
• Nederlandse boeken (andere talen zijn lastiger, maar kan wel).

Rationaal vs creatief denken
Rationaal en creatief denken staan lijnrecht tegenover elkaar. Rationaal denken is logisch denken en creatief denken is verzinnen. Om iets te verzinnen moet je in een creatieve sfeer zijn. Ben je in een rationele sfeer (bijv. wanneer je net een detailrapport hebt geschreven) is het lastig om weer naar creatief over te schakelen. De sfeer zit in de manier van denken, die manier van denken moet je aanpassen om een creatieve sessie te starten.

Manier om in een creatieve sfeer te komen

• Doe iets creatiefs; spelletje, tekenen, ect.
• Creëer een plaatst waar je creatief denkt en creëer een plaats waar je rationeel denkt. Houdt deze twee gescheiden.
• Teken een mindmap van jezelf of iets anders.
• Schrijf op een A4 alles op wat er binnen schiet (braindump).

Hoe gebruik ik de inspiratiebronnen

• Ik scan de titels artikelen van blogs en de titels in de RSS reader. Door het scannen van titels ontstaan veel associaties en daardoor veel ideeën. Daarom moet een RSS reader ook (te) vol zitten. Is dit niet het geval? Dan ga je artikelen lezen en ben je weer in rationele sfeer.
• Probeer internetassociaties maken met de titels, artikelen, problemen. Vraag aan jezelf: Hoe kan ik dit presenteren op internet?
• Lees boeken en maak daarbij ook associaties met internet. Dit gaat wel ten kosten van het lezen.

Verwerken van associaties

• Schrijf associaties en ideeën op.
• Elke idee is goed! Evalueer pas wanneer je weer rationeel denkt.
• Ga door tot je geen zin of tijd meer hebt. Zorg er vooral voor dat het leuk en prettig is.

Probeer door oefenen controle te krijgen over de manier van denken. Het wordt hierdoor eenvoudiger om een manier van denken aan te passen als het nodig is. En ook voor denken geldt: oefening baart kunst.

Hoe kies je een methodiek?

• Je kunt handig het project uitvoeren met de methodiek.
• Voordelen en nadelen tegen elkaar opwegen.
• Tijdinschatting van het project en de methodiek.
• Overleg met de opdrachtgever voor de keuze.

Rapid Application Development (RAD)

• Iteratief ontwikkelen
• Fases: definitiestudie, pilot ontwikkeling, invoering
• Definitiestudie eenmaal in het project doorlopen
• Vergelijkbaar met IAD
• http://en.wikipedia.org/wiki/Rapid_application_development  

System Development Methodology (SDM)

• Linear model, de waterval methode.
• Elke mijlpaalproduct is het toegangsbewijs voor een volgende fase
• Terugkeren naar een vorige fases is uitgesloten.
• http://nl.wikipedia.org/wiki/System_Development_Methodology  

Joint Application Development (JAD)

• Samenwerking van ontwikkelaars en gebruikers.
• Gebruikers en ontwikkelaars moeten volgens JAD op eigen kennis het systeem ontwikkelen.
• Veel overleg en daardoor tijdrovend.
• http://en.wikipedia.org/wiki/Joint_application_development  

Rational Unified Proces (RUP)

• Fases: inceptiesfase, elaboratiefase, constructiefase, transitiefase.
• UML is een belangrijk onderdeel van RUP
• http://nl.wikipedia.org/wiki/Rational_Unified_Process  

Iterative Application Design (IAD)

• Iteratief ontwikkelen
• Fases: definitiestudie, pilot ontwikkeling, invoering.
• Grote betrokkenheid van gebruikers / opdrachtgever
• http://nl.wikipedia.org/wiki/IAD 

Extreme programming (XP)

• Ontwikkelaars reviewen elkaars code
• Testen bij elke aanpassing van het systeem (maakt gebruik van een test unit) 
• KISS: keep it simple stupid
• Klant is onderdeel van het ontwikkelteam
• http://nl.wikipedia.org/wiki/Extreme_Programming  

Jesse James Garrett (JJG)

• Overlappende fasering binnen het project.
• Fasering: strategy, scope, structure, skeleton, visual design.
• Gericht op gebruikers (user experience)
• http://en.wikipedia.org/wiki/Jesse_James_Garrett