Deze les: -‐ Bespreken 2 websites -‐ Gestaltpsychologie -‐ Epicenter design -‐ opdracht : wat moet er voor volgende week af zijn?
Opdracht • Met zijn twee-en • 5 min • Zet de volgende behoeftes van de mens (volgens gedragswetenschapper Maslow) in de juiste volgorde
-‐ BehoeAe om ergens bij te horen en behoeAe aan liefde -‐ CogniCeve behoeAen aan willen weten, willen begrijpen en exploreren van het onbekende -‐ EstheCsche behoeAen aan schoonheid, symmetrie en structuur -‐ Sociale behoeAen aan erkenning, goedkeuring van anderen en het behalen van succes en competenCe -‐ BehoeAe aan veiligheid en zekerheid met zo min mogelijk gevaar -‐ BehoeAe aan fysiologische bevrediging: honger, dorst, beweging -‐ BehoeAe aan zelfverwerkelijking, inclusief de piekervaringen
1 BehoeAe aan zelfverwerkelijking, inclusief de piekervaringen 2 EstheCsche behoeAen aan schoonheid, symmetrie en structuur 3 CogniCeve behoeAen aan willen weten, willen begrijpen en exploreren van het onbekende 4 Sociale behoeAen aan erkenning, goedkeuring van anderen en het behalen van succes en competenCe 5 BehoeAe om ergens bij te horen en behoeAe aan liefde 6 BehoeAe aan veiligheid en zekerheid met zo min mogelijk gevaar 7 BehoeAe aan fysiologische bevrediging: honger, dorst, beweging
Interface design is design for humans. What if we trans-‐ lated Maslow’s model of human needs into the needs of our users? It might look something like this :
An interface must be funcConal The interface must be reliable An interface must be usable. What if an interface could help you complete a criCcal task and put a smile on your face? > That would be an experience you’d recommend to a friend; that would be an idea worth spreading!
Gestaltpsychologie 5 wetten die beschrijven hoe mensen waarnemen De Gestaltpsychologen waren vooral gericht op de visuele percepCe. Gestalt is een Duits woord en betekent zoveel als "georganiseerde" of "gehele" vorm. Het kwam op rond 1930 in Duitsland onder leiding van Max Wertheimer Theorie: http://www.vanseodesign.com/web-design/gestalt-principles-ofperception/
1. De wet van de nabijheid DINGEN DIE ZICH DICH BIJ ELKAAR BEVINDEN WORDEN ALS GROEP GEZIEN. DINGEN DIE ZICH VER VAN ELKAAR BEVINDEN WORDEN ALS ONAFHANKELIJK WAARGENOMEN
! Een goed gebruik van witruimte heeft een behoorlijke impact op de leesbaarheid van teksten. Mensen onthouden 20% meer van een tekst als er voldoende witruimte is.
2. De wet van de overeenkomstigheid DINGEN DIE OP ELKAAR LIJKEN WORDEN GEGROEPEERD. DINGEN DIE VEEL VAN ELKAAR VERSCHILLEN WORDEN ALS APARTE ELEMENTEN WAARGENOMEN
! Overeenkomst kan kleur, vorm, beweging of grootte zijn. De overeenkomstigheid van achtergrond kleur is een van de meeste effectieve manieren om items te groeperen.
De wet van overeenkomstigheid is een van de belangrijkste gebruiksvriendelijkheidsprincipes. De verklaring is simpel. Als dingen zich altijd hetzelfde gedragen, hoeven mensen zich geen zorgen te maken over wat er zal gebeuren. Op basis van vorige ervaringen weten ze wat er gebeurt. Bv hyperlinks. Er is eenmaal bepaald dat een hyperlink standaard blauw en onderstreept is en zich in hetzelfde venster opent.
3. De wet van geslotenheid DINGEN DIE OMRAND WORDEN DOOR EEN LIJN WORDEN ALS GEHEEL GEZIEN.
4. De wet van de continuïteit DINGEN DIE IN EEN DOORGAANDE LIJN OF KROMMING ZIJN GEPLAATST WORDEN DOOR ONZE WAARNEMING GEGROEPEERD onafgebroken en netjes afgewerkte figuren verkiezen boven onsamenhangende figuren
Dit leert ons dat volledige geslotenheid niet noodzakelijk is om toch volledigheid te kunnen waarnemen. Met andere woorden, de mens vult zelf ontbrekende informatie in.
5. De wet van eenvoud DINGEN WORDEN WAARGENOMEN IN DE MEEST EENVOUDIGE VORM. > minste cogniCeve inspanning gaat voor
De wet van eenvoud leert ons dat we alleen het meest voor de hand liggende zien. Complexiteit in webdesign moet dan ook zoveel mogelijk worden vermeden. Volgens Jakob Nielsen is eenvoud zelfs het belangrijkste gebruiksvriendelijkeidsprincipe. Des te minder je bezoekers laat zien, des te minder hoeven ze te scannen en te begrijpen en des te groter de kans dat ze de juiste keuze maken.
SamenvaYend: • Zet elementen die bij elkaar horen ook bij elkaar. • Geef terugkerende elementen op je pagina een consistente vorm en kleur. • Creëer (denkbeeldige) lijnen en zorg voor zoveel mogelijk horizontale en verCcale uitlijning. • Houd je webpagina’s zo eenvoudig mogelijk, voorkom complexe opbouw.
Conclusie: Vormgeving is niet per definitie ongrijpbaar. De mens heeft behoefte aan orde en groepering. Groeperen helpt ons de wereld om ons heen te ordenen
http://www.frankwatching.com/archive/2008/09/04/geef-contentde-juiste-vorm-gebruiksvriendelijkheid-en-esthetiek-vanwebpaginas/
Opdracht [ met z’n twee-en] [ tijdsduur: 15- 30 minuten] [ beschrijving: Zoek naar websites/voorbeelden van de 5 wetten van de gestaltpsychologie : maak hier een screenshot van en beschrijf welke wet je hier duidelijk herkent.]
Ons beeldveld is veel minder compleet dan wij denken! De hersenen zijn graag zuinig en efficiënt!
http://www.youtube.com/watch?feature=player_embedded&v=IGQmdoK_ZfY#!
De conclusie die getrokken kan worden is dat wij, wanneer wij ons focussen op een bepaald detail, andere in het oog springende details over het hoofd zien. We begrijpen nu waarom sommigen mensen iets niet hebben gezien en kunnen nu beter begrijpen waarom sms'en en autorijden niet samengaan!
Zelftest: linker of rechter hersenhelft actief? http://www.dailytelegraph.com.au/news/wacky/the-right-brain-vs-leftbrain/story-e6frev20-1111114577583 Zelftest: Spot the fake smile http://www.bbc.co.uk/science/humanbody/mind/surveys/smiles/ index.shtml Zelftest: Can you read faces? http://www.bbc.co.uk/science/humanbody/mind/surveys/ faceperception1/index.shtml
Handig om te weten: Mensen beschikken over een verrassend vermogen om gezichten te herkennen! Hoe komt dat? De hersenen hebben zich gespecialiseerd in wat belangrijk voor ons is! We hebben het niet voor niks over het smoel van een auto, een website enz.
The Devil’s in the Details
Epicenter Design (uit boek Ge+ng Real) Start from the core of the page and build outward Epicenter design focuses on the true essence of the page – the epicenter – and then builds outward. This means that, at the start, you ignore the extremiCes: the navigaCon/tabs, footer, colors, sidebar, logo, etc. Instead, you start at the epicenter and design the most important piece of content first. Whatever the page absolutely can’t live without is the epicen-‐ ter. For example, if you’re designing a page that displays a blog post, the blog post itself is the epicenter. Not the categories in the sidebar, not the header at the top, not the comment form at the boYom, but the actual blog post unit. Without the blog post unit, the page isn’t a blog post. Only when that unit is complete would you begin to think about the second most criCcal element on the page. Then aAer the second most criCcal element, you’d move on to the third, and so on. That’s epicenter design.
Opdracht • Met z’n twee-‐en • 10-‐15 min • Lees : hYp://37signals.com/svn/archives/000737.php • Ga naar hYp://www.publiekeomroep.nl/ Maak een schets van waar het epicenter zich volgens jullie bevind En wat op de 2e plaats komt en wat op de 3e plek enz Doe hetzelfde met: hYp://www.neuzenroode.nl/wereld/ hYp://www.eelkeverschuur.nl/
Voor volgende week : Research Jouw doel: zoek minstens 3 sites die ditzelfde doel nastreven en kijk welke elementen in het design dit doel ondersteunen maak screenshots van deze sites en benoem de elementen Jouw doelgroep: Ga je doelgroep beter leren kennen: maak een moodboard of board op pinterest van de leefwereld van jouw doelgroep. ( bv welke sites bezoeken ze, waar wonen ze, welke auto hebben ze, waar gaan ze op vakantie, welke boeken/tijdschriften lezen ze, wat eten ze enz.) Jouw onderwerp: Zoek naar allerhande beelden die iets te maken hebben met je onderwerp. Maak hiervan een moodboard of board on pinterest. Maak ook een mindmap over het onderwerp
