• Save
Workshop 4Geloofwaardig Design
Upcoming SlideShare
Loading in...5
×
 

Workshop 4Geloofwaardig Design

on

  • 482 views

SintLucas Boxtel,

SintLucas Boxtel,
Mediavormgeving
Fase 2
Periode 2
Workshop Usability door Hester van de Vorst

Statistics

Views

Total Views
482
Views on SlideShare
459
Embed Views
23

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 23

http://sintlucas-2mv.ning.com 23

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • De user experience honeycomb (Peter Morville) Valuable = Waardevol Centraal staat dat uw website waarde moet creëren. Waarde voor de bezoeker. De waarde ontstaat door alle omliggende facetten in te vullen. Useful = Nuttig In alle gevallen moet uw website nuttig zijn. Met durf, creativiteit en kennis moet hier steeds aan gewerkt worden. Met vernieuwende oplossingen kunt u uw communicatiemiddel nog nuttiger maken. U kunt uzelf afvragen of uw website nuttig is en waarde creëert voor de bezoeker. Usable= Bruikbaar Een website moet gebruiksvriendelijk zijn. Zoals eerder aangegeven is gebruikervriendelijkheid onderdeel van de totale gebruikerservaring. Findable = Vindbaar Naast dat uw website vindbaar moet zijn voor zoekmachines moet de gebruiker/bezoeker die informatie kunnen vinden waar hij/zij naar op zoek is. Heldere navigatie, “highlights”, (diensten) overzichten en een zoekfunctie kunnen hier een bijdrage aan leveren. Voordat uw website wordt ontworpen moet de vindbaarheid binnen uw website uitgewerkt worden in een functioneel ontwerp. Credible = Geloofwaardig Uw website moet geloofwaardig overkomen. Niet alleen qua inhoud (content), maar moet dit ook uitstralen. Design matters! Een goed doordacht en “professionele” uitstraling schept vertrouwen in uw organisatie. Daarnaast versterken ook de andere genoemde facetten (vindbaarheid, toegankelijkheid etc) de geloofwaardigheid van uw website. Het straalt expertise uit. Accessible = Toegankelijk Uw website moet toegankelijk zijn voor iedereen. Houdt hier rekening mee. De drempel kan verlaagd worden door o.a. meerdere talen, grotere lettertypes voor slechtzienden, en geluidsfragmenten voor blinden en slechtzienden. Hiernaast moet de website ook toegankelijk zijn voor mensen met een tragere internetverbinding, kleinere beeldschermen en voor de meest gebruikte browsers (cross-browser). Desirable = Aantrekkelijk Uw website moet aantrekkelijk zijn. Er moet worden gezocht naar de juiste balans tussen de bruikbaarheid (usability) en design (emotion).
  • Op het internet worden we overspoeld met informatie. Miljoenen websites die allemaal om aandacht vragen - hoe komt het dat we de ene website wel vertrouwen en gebruiken, en de andere niet ? Het belangrijkste aspect dat hierop invloed heeft, is website credibility : in hoeverre vertrouwen bezoekers uw website ? Enkel een website met voldoende credibility zal bezoekers blijven trekken. Bovendien zal de conversion rate, het percentage van uw bezoekers dat ook effectief klant wordt, stijgen bij een verhoogde credibility.
  • Belangrijkste conclusie van het onderzoek: voor credibility baseren mensen zich meer op de 'oppervlakkige' eigenschappen van een website, dan op de inhoudelijk eigenschappen. Om te winnen aan credibility, is het volgens de bemerkingen van het onderzoek dat een site er 'professioneel, afgewerkt' uitziet. Elke vorm van 'amateurisme' wordt onmiddellijk afgestraft met een verlies aan geloofwaardigheid. ("The design is sloppy and looks like some adolescent boys in a garage threw this together.") Langs de andere kant worden websites die er te 'slick' en 'flashy' uitzien ook niet vertrouwd. ("It looks like it’s designed by a marketing team, and not by people who want to get you the information that you need.") Het tweede item waar aandacht aan geschonken wordt : informatiestructuur. Een goed gestructureerde, makkelijk navigerende site draagt sterk bij tot een verhoogde credibility. Dit komt niet echt als een verrassing. Een duidelijke informatiestructuur, impliceert voor de bezoeker een grote expertise. Derde belangrijkste punt is de focus van de informatie. Hier zijn de gegevens tweeledig. Een site die het moet hebben van informatieverstrekking (nieuwssites, informatiesites, zoeksites...) verhoogt zijn credibility door een zo breed mogelijk aanbod te hebben. Websites die meer transactioneel zijn (business sites, verkoopsites...) verhogen hun credibility door te focussen op het hoofdthema. Opvallend in het onderzoek is wel dat voor e-commerce websites (websites die commerciëel van inslag zijn), er een significante verschuiving is in bepaalde van bovenstaande cijfers. Waar gemiddeld 'Naam en reputatie' voor 14,1 % van de bezoekers belangrijk is, verhoogt dit op e-commerce sites naar 25,9 %. Uw off-line naambekendheid en reputatie spelen dus duidelijk mee. Ook 'Bias' wijzigt : van 11,6 % gemiddeld, naar 2,6 % bij e-commerce sites. Gebruikers verwachten van e-commerce sites dat ze onverdeeld positief zijn over de producten, en laten dit niet meespelen bij de beoordeling van de website credibility. Een ander interessant cijfer, is dat over 'achterdocht'. In het algemeen is 9,4 % van de gebruikers 'achterdochtig' bij het beoordelen van een website. ("I’m always wary of these type of sites.") Bij e-commerce sites verhoogt dit percentage naar 17,2 %. Het is dus duidelijk dat aandacht voor website credibility een belangrijk punt zou moeten zijn voor alle e-commerce sites. Bron: http://www.netlash.com/blog/detail/website-credibility
  • 1. Maak het makkelijk om de info op uw site te verifiëren. Uw website credibility verhoogt sterk als u ondersteund wordt door onafhankelijke derden. Vermeld referenties, citaten, artikelen, en link daar ook naar toe. Zelfs als de bezoeker die link niet volgt, is hij overtuigd van uw vertrouwen in uw materiaal. 2. Toon het off-line gezicht van uw bedrijf. Aantonen dat uw website staat voor een bona-fide, reëel bedrijf, is de makkelijkste manier om uw credibility te verhogen. Vermeld uw fysieke adres, geef een telefoonnummer en e-mail adres op. Ook andere technieken zijn mogelijk : toon een foto van uw kantoor, vermeld lidmaatschap van beroepsorganisaties... 3. Benadruk de expertise. Heeft u experts in uw team ? Zijn ze authoriteiten op hun gebied ? Vermeld dit, en vermeld alle referenties en credentials. Benadruk lidmaatschap van beroepsorganisaties. Langs de andere kant, link niet naar sites die geen credibility hebben. Dat straalt negatief af op uw bedrijf. 4. Toon een betrouwbaar en menselijk gezicht. Toon dat er echte mensen achter de website en het bedrijf staan. Foto's en bios van de medewerkers helpen hierbij. 5. Maak het makkelijk om contact te nemen. Vermeld uw telefoonnummer, uw fysieke adres, en uw e-mail adres. 6. Geef uw site een professionele look. Bezoekers beoordelen uw website heel snel enkel op visueel vlak. Geef uw website een professionele, verzorgde look, die aansluit bij uw doelgroep en het doel van de site. 7. Maak uw site makkelijk bruikbaar en nuttig. Laat uw interne organisatie of uw zucht naar de laatste nieuwe webtechnologie niet in de weg komen van het gebruiksgemak voor de bezoeker. Zorg voor een goede structuur, een duidelijke navigatie, en nuttige info. 8. Update regelmatig. Regelmatig nieuwe inhoud plaatsen verhoogt uw credibility. 9. Beperk reclame. Vermijd indien mogelijk reclame. Gebruik geen pop-ups. Als u reclame plaatst, maak dan een duidelijk onderscheid tussen inhoud en reclame. 10. Vermijd fouten, hoe klein ook. Schrijffouten, tikfouten, gebroken links, site off-line... Dit doet meer kwaad aan uw credibility dan u denkt. Bron: http://www.netlash.com/blog/detail/website-credibility
  • Aantrekkelijk: In 50 milliseconden tijd oordelen bezoekers of ze een website goed vinden of niet. De aantrekkelijkheid van het design speelt dus een grote rol.
  • Georgia en Arial zijn fonts die ontworpen zijn voor beeldscherm, ze hebben een grotere X-hoogte en zijn vaak opener dan fonts die gemaakt zijn voor print uitingen.
  • In de krant gebeurt het ook, tekst wordt verdeelt in kolommen uit onderzoek blijkt dat er regelbreedte zijn die in één keer door het menselijk oog overzien kunnen worden. Het aantal karakters is inclusief spaties. Als je hiermee rekening houdt kan dat bijdragen aan het gemak en de snelheid waarmee bezoekers de tekst op de website lezen. Het is belangrijk dat je belangrijke woorden accentueerd, zo zijn mensen sneller geneigd om deze te lezen, doe dit wel bewust wat alles accentueren werkt ook niet. Gebruik alles wat je doet met typografie consequent, dit is erg belangrijk voor de usability.
  • Elke gebruiker heeft een ander scherm, gelukkig wordt 1024x768 steeds meer standaard maar er komen ook applicaties bij zoals web op een pda of op mobile telefoon. Maak je website dus schaalbaar
  • En hou rekening met de rest....
  • Denk na over wat de klant belangrijk vind
  • Een grid zorg voor continuiteit en is duidelijk voor de gebruiker

Workshop 4Geloofwaardig Design Workshop 4Geloofwaardig Design Presentation Transcript

  • Lesopbouw
    • WS 1-wk50 Gebruikersperspectief
    • WS 2-wk51 Gebruiksvriendelijkheid
    • WS 3-wk 1 Informatie-architectuur
    • WS 4-wk 2 Ontwerp
    • WS 5-wk 5 Testen
    • wk 8 Theorie TOETS
  • nuttig aantrekkelijk bruikbaar vindbaar toegankelijk waardevol geloofwaardig totaal beleving
  • nuttig aantrekkelijk bruikbaar vindbaar toegankelijk waardevol geloofwaardig totaal beleving
  • Geloofwaardigheid Website Credibility
  •  
  • Waar schenkt de bezoeker het meeste aandacht aan (zie meer)
    • Design look 46,1 %
    • Informatiestructuur 28,5 %
    • Focus van de informatie 25,1 %
    • Achterliggend motief 15,5 %
    • Bruikbare info 14,8 %
    • Accuraatheid info 14,3 %
    • Naam en reputatie 14,1 %
    • Reclame 13,8 %
    • Vooroordelen 11,6 %
  • 10 tips voor het verhogen van credibility
    • Maak het makkelijk om inhoud te verifiëren
    • Toon het off-line gezicht van uw bedrijf
    • Benadruk de expertise
    • Toon een betrouwbaar menselijk gezicht
    • Maak het makkelijk om contact te nemen
    • Geef de site een professionele look
    • Maak de site makkelijk bruikbaar en nuttig
    • Update regelmatig
    • Beperk reclame
    • Vermijd fouten
  • “ In 50 milliseconde oordelen bezoekers of ze de site goed vinden, of niet”
  • Design =
  • Webdesign is 95% typografie
  • Welke letter kies je? Georgia Gill Sans Arial Impact Times Roman
  • Bodytekst  snel scannen
    • Verdelen in kolommen
      • ca. 66 karakters voor 1 kolom
      • Tussen 45 en 50 karakters voor meerdere kolommen
    • Accentueren van belangrijke tekst
      • Gebruik geen cursief (wel bold)
      • Ben consequent bv. bij gebruik van hyperlinks
  • Compositie
    • De juiste maat
    • Hiërarchie
    • Grid
  • Voor welk formaat ontwerp je? 1024 x 768 800 x 600 640 x 480 Motorola V3 176 x 220
  • 768 1024 650 960
  • Hiërarchie http://www.samatamason.com/main.asp 1 2 3
  • Opbouw http://www.samatamason.com/main.asp beeld menu omschrijving kop
  • Grid http://www.samatamason.com/main.asp
  •  
  •  
  • http://www.stopdesign.com/
  •  
  •  
  •  
  • Wat wordt jou compositie?
    • Welke elementen (flowchart)?
    • Wat wordt de hiërachie?
    • Wat wordt de vlakverdeling?
  •  
  • Kleur
    • Kleurpalet
    • RGB kleuren versus Pantone/pms
    • Kleur contrast
  • Kleur schema’s/paletten http://colorschemedesigner.com/
  • RGB versus Pantone/PMS
  • Goed contrast=goed leesbaar Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce viverra. Aliquam ipsum eros, nonummy vel, mattis et, sagittis venenatis, felis. Nullam sed tortor. Maecenas at est quis mi ornare dictum. Nam gravida odio vitae purus. Nulla enim. Morbi eu ante id ante suscipit viverra. Sed semper nunc et arcu. Donec sed lorem id dui semper pulvinar. Vestibulum molestie elit eu elit. Etiam est ipsum, pretium id, vulputate in, rutrum ut, felis. Sed risus. Nunc felis nisl, feugiat eu, venenatis sit amet, dictum a, massa. Nullam faucibus tincidunt sapien. Donec accumsan. Quisque at magna. Vestibulum nunc. In ut nisi. Sed odio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce viverra. Aliquam ipsum eros, nonummy vel, mattis et, sagittis venenatis, felis. Nullam sed tortor. Maecenas at est quis mi ornare dictum. Nam gravida odio vitae purus. Nulla enim. Morbi eu ante id ante suscipit viverra. Sed semper nunc et arcu. Donec sed lorem id dui semper pulvinar. Vestibulum molestie elit eu elit. Etiam est ipsum, pretium id, vulputate in, rutrum ut, felis. Sed risus. Nunc felis nisl, feugiat eu, venenatis sit amet, dictum a, massa. Nullam faucibus tincidunt sapien. Donec accumsan. Quisque at magna. Vestibulum nunc. In ut nisi. Sed odio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce viverra. Aliquam ipsum eros, nonummy vel, mattis et, sagittis venenatis, felis. Nullam sed tortor. Maecenas at est quis mi ornare dictum. Nam gravida odio vitae purus. Nulla enim. Morbi eu ante id ante suscipit viverra. Sed semper nunc et arcu. Donec sed lorem id dui semper pulvinar. Vestibulum molestie elit eu elit. Etiam est ipsum, pretium id, vulputate in, rutrum ut, felis. Sed risus. Nunc felis nisl, feugiat eu, venenatis sit amet, dictum a, massa. Nullam faucibus tincidunt sapien. Donec accumsan. Quisque at magna. Vestibulum nunc. In ut nisi. Sed odio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce viverra. Aliquam ipsum eros, nonummy vel, mattis et, sagittis venenatis, felis. Nullam sed tortor. Maecenas at est quis mi ornare dictum. Nam gravida odio vitae purus. Nulla enim. Morbi eu ante id ante suscipit viverra. Sed semper nunc et arcu. Donec sed lorem id dui semper pulvinar. Vestibulum molestie elit eu elit. Etiam est ipsum, pretium id, vulputate in, rutrum ut, felis. Sed risus. Nunc felis nisl, feugiat eu, venenatis sit amet, dictum a, massa. Nullam faucibus tincidunt sapien. Donec accumsan. Quisque at magna. Vestibulum nunc. In ut nisi. Sed odio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce viverra. Aliquam ipsum eros, nonummy vel, mattis et, sagittis venenatis, felis. Nullam sed tortor. Maecenas at est quis mi ornare dictum. Nam gravida odio vitae purus. Nulla enim. Morbi eu ante id ante suscipit viverra. Sed semper nunc et arcu. Donec sed lorem id dui semper pulvinar. Vestibulum molestie elit eu elit. Etiam est ipsum, pretium id, vulputate in, rutrum ut, felis. Sed risus. Nunc felis nisl, feugiat eu, venenatis sit amet, dictum a, massa. Nullam faucibus tincidunt sapien. Donec accumsan. Quisque at magna. Vestibulum nunc. In ut nisi. Sed odio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce viverra. Aliquam ipsum eros, nonummy vel, mattis et, sagittis venenatis, felis. Nullam sed tortor. Maecenas at est quis mi ornare dictum. Nam gravida odio vitae purus. Nulla enim. Morbi eu ante id ante suscipit viverra. Sed semper nunc et arcu. Donec sed lorem id dui semper pulvinar. Vestibulum molestie elit eu elit. Etiam est ipsum, pretium id, vulputate in, rutrum ut, felis. Sed risus. Nunc felis nisl, feugiat eu, venenatis sit amet, dictum a, massa. Nullam faucibus tincidunt sapien. Donec accumsan. Quisque at magna. Vestibulum nunc. In ut nisi. Sed odio.
  • Opdracht
    • Iedereen ontvangt een A3 met hierop een aantal grids
    • Ontwerp hierop 2 verschillende vlakverdelingen
    • Bespreek deze kort in de les
    • Gebruik deze als basis voor je Fusion webontwerp