TROCHA PSYCHOLOGIE A KOGNITIVNÍ VĚDY TOMÁŠ BOUDA KISK 2016 INTERAKCE ČLOVĚK-POČÍTAČ Tomáš Bouda HCI na KISK HLAVNÍ ZDROJ Design with the mind in mind -Book -Video - USER INTERFACE DESIGN GUIDELINES •iOS Human interface guidelines •Android Design Principles •Windows Design • •Často protichůdné cíle: •Jas obrazovky X výdrž baterie •Multi-funkcionalita X Easy to learn •WISIWIG X přístupnost pro zrakově hendikepované • Tomáš Bouda HCI na KISK User interface guidelines nestojí na racionálním základě… Potřebujeme základy psychologie a kognitivní vědy. USER INTERFACE DESIGN GUIDELINES (HEURISTIKY) •Viditelnost stavu systému •Spojení mezi systémem a reálným světem •Uživatelská kontrola a svoboda •Konzistence a standardizace •Prevence chyb •Rozpoznání místo vzpomínání •Flexibilní a efektivní použití •Estetický a minimalistický •Pomoc uživatelů poznat, pochopit a vzpamatovat se z chyb •Nápověda a návody Zdroj: NIELSEN: http://www.nngroup.com/articles/ten-usability-heuristics/ Tomáš Bouda HCI na KISK Zásady použitelnosti – návody se do jisté míry moc neliší a vychází z psychologie a kognitivní vědy. 1.Viditelnost stavu systému – systém by měl vždy dát uživateli vědět co se právě odehrává 2.Spojení mezi systémem a reálným světem – komunikace systému s uživatelem by se měla odehrávat uživatelsky příjemným způsobem (srozumitelný jazyk bez odborných termínů) 3.Uživatelská kontrola a svoboda – uživatelé při práci se systémem dělají chyby a potřebují proto únikový východ pro návrat do předchozího stavu. 4.Konzistence a standardizace – uživatelé by neměli být nuceni přemýšlet jestli různé termíny znamenají to stejné, proto se doporučuje dodržovat obecné zásady. 5.Prevence chyb – vyvarovat se chybovým hlášením bezpečným designem, který bude preventivně působit proti problémům 6.Rozpoznání místo vzpomínání – uživatel by neměl být nucen vzpomínat si na provádění operací v systému, instrukce by měly být v systému vždy viditelně umístěny 7.Flexibilní a efektivní použití – umožnění zrychlení práce se systém pro pokročilé uživatele 8.Estetický a minimalistický design – bez nepotřebných informací 9.Pomoc uživatelů poznat, pochopit a vzpamatovat se z chyb – chybové hlášky by měly být uváděny v přirozeném jazyce a měly by navrhovat řešení 10.Nápověda a návody – všechny informace se musí dát lehce vyhledat, nápověda by měla obsahovat postupy v krocích PRAVIDLA DESIGNU VYCHÁZÍ Z KOGNITIVNÍ PSYCHOLOGIE •Jak lidé vnímají? •Jak se učí? •Jak chápou? •Jak si zapamatovávají? •Jak přeměňují záměry na akce v reálném světě? •Nielsen, Schneiderman, Molich nebo Norman jsou původně prof. a doktoři v oblasti kognitivní psychologie. - Tomáš Bouda HCI na KISK VNÍMÁME TO, CO OČEKÁVÁME 3 faktory •Minulost: naše zkušenosti •Přítomnost: aktuální kontext •Budoucnost: naše cíle Tomáš Bouda HCI na KISK MINULOST A ZKUŠENOST Jste architekt a zrovna stavíte univerzitní kampus. Právě zadavateli předkládáte první navržený půdorys stavby. Jedná se o řadu pěti budov. V budově zcela vpravo by měla být kavárna. Díky tvaru budovy bude kavárna pěkně osvětlená. Tomáš Bouda HCI na KISK (Zkušenost – minulost) Now imagine that instead of a real estate manager, you are meeting with an advertising manager. You are discussing a new billboard ad to be placed in certain markets around the country. The advertising manager shows you the same image, but in this scenario the image is a sketch of the ad, consisting of a single word. In this scenario, you see a word, clearly and unambiguously. When your perceptual system has been primed to see building shapes, you see building shapes, and the white areas between the buildings barely register in your perception. When your perceptual system has been primed to see text, you see text, and the black areas between the letters barely register. Tomáš Bouda HCI na KISK (zkušenost, minulost) PŘÍTOMNOST - KONTEXT Tomáš Bouda HCI na KISK Kontext – přítomnost Vizuální percepce se může zdát jako proces konstruující se směrem zespodu – rozeznáváme jednoduché prvky (rohy, línie, úhly) pak vzory a následně význam objektu. Vizuální percepce – například čtení však může být ovlivněno i „shora“. Např. okolí (kontext) může mít vliv na to, jaké písmeno vnímáme. Toto ovlivňování může být i mezi odlišnými smysly. Vše je dílo kontextu – rozeznávání obrazů, tváří, zvuků apod. BUDOUCNOST - CÍLE Úkol: Najděte mi základní informace o studiu na MU. BUDOUCNOST - CÍLE •Fenomén koktejlové párty. •Jsou mezi nářadím nůžky? • • • • • • •Starší lidé jsou více orientování na cíle než děti. Tomáš Bouda HCI na KISK 1. Koktejl párty efekt: čím víc se nudíte, tím víc posloucháte, co si říkají u vedlejšího stolu, ztrácíte cíl a hledáte nový. 2. Nůžky 3. Děti se nechají rychle vyrušit, těkají, ale jsou lepší pozorovatelé. (Např. vemte dospělého a dítě a dejte jim úkol přinést něco z dílny. Pak se jich zeptejte, co v lednici ještě dalšího bylo. Dítě vám začne povídat o všech těch úžasných věcech, které v dílně vidělo. Pokud se vůbec vrátí a nebo už bude haluzit s nějakýma věcma v dílně.) TAKE AWAY MESSAGE #1: Rozumějte uživatelským cílům. Tomáš Bouda HCI na KISK VNÍMÁME STRUKTURU •Základní teorie: Gestalt – psychologický směr •Principy Gestaltismu: •Zákon blízkosti – tendence vnímat podobné objekty jako skupiny nebo série •Zákon podobnosti – smíšené skupiny podobných a odlišných objektů vidíme po skupinách •Zákon pokračování/směru – v obrazcích hledáme čáry s nepřerušeným pokračováním •Zákon výstižnosti – tendence vidět nejjednodušší tvar •Zákon dobrého tvaru – tendence symetricky doplňovat obrazce •Vnímání figury a pozadí – schopnost mysli zaměřit pozornost na popředí a ignorovat zbytek •Společný pohyb – schopnost zaměřit se na objekty, které se pohybují stejně. Tomáš Bouda HCI na KISK Holistické – vnímání automaticky převádí části, úhly, čáry do větším obrazců a struktur ZÁKON BLÍZKOSTI Tomáš Bouda HCI na KISK Řady a sloupce. ZÁKON BLÍZKOSTI Tomáš Bouda HCI na KISK Tady jsou rámečky, hodně expertů však sází na oddělení pouze blízkostí, protože se tak omezuje vizuální smog a přesicení a také nároky na kódování. Tomáš Bouda HCI na KISK ZÁKON BLÍZKOSTI Špatně – vypadá to jako vertikálně propojené. Tomáš Bouda HCI na KISK ZÁKON BLÍZKOSTI Špatně – vypadá to jako vertikálně propojené. ZÁKON PODOBNOSTI Tomáš Bouda HCI na KISK ZÁKON PODOBNOSTI Tomáš Bouda HCI na KISK Elsevier - Daleko od sebe. ZÁKON POKRAČOVÁNÍ/SMĚRU Tomáš Bouda HCI na KISK ZÁKON POKRAČOVÁNÍ/SMĚRU Tomáš Bouda HCI na KISK ZÁKON UZAVŘENOSTI Tomáš Bouda HCI na KISK Někdy vidíme i to, co na obrázku není. Např. bílý trojúhelník vpravo. ZÁKON UZAVŘENOSTI Tomáš Bouda HCI na KISK I částečně viditelný dokument vidíme jako celý. Nikoli jako část. Tomáš Bouda HCI na KISK ZÁKON UZAVŘENOSTI Smart lock iPhone ZÁKON DOBRÉHO TVARU Vidíme ty nejběžnější tvary. Tomáš Bouda HCI na KISK Tomáš Bouda HCI na KISK Vidíme jednoduché kostky. Podobně jsme schopno ve 2D prostředí vidět 3D obraz. Tomáš Bouda HCI na KISK VNÍMÁNÍ FIGURY A POZADÍ Objekt na podkladu vidíme jako blíže. Vše kolem je v pozadí. VNÍMÁNÍ FIGURY A POZADÍ M. C. Escher Zaleží však na naší zaměřené pozornost. Co nás upoutá. Každého pravděpodobně něco jiného. M. C. Etcher VNÍMÁNÍ FIGURY A POZADÍ Zaleží však na naší zaměřené pozornost. Co nás upoutá. Každého pravděpodobně něco jiného. M. C. Etcher SPOLEČNÝ POHYB Tomáš Bouda HCI na KISK To, co se pohybuje, je spojené (Zákon podobnosti, zákon uzavřenosti) SPOLEČNÝ POHYB http://www.gapminder.org/ Tomáš Bouda HCI na KISK To, co se pohybuje, je spojené (Zákon podobnosti, zákon uzavřenosti) TAKE AWAY MESSAGE #2: Při designu mysleme na základní principy gestaltu. Tomáš Bouda HCI na KISK VIZUÁLNÍ PERCEPCE Tomáš Bouda HCI na KISK Sítnice •Tyčinky (funkční jen v případě šera) •Čípky (barvy) - 3 druhy, reagují na frekvenci světla Tyčinky jsou funkční jen v šeru (kampování, ve tmě, když chodíte po pokoji, při svíčkách u romantické večeře) Tři druhy čípků – R, G, B -Dnes je využíváme výhradně (umělé osvětlení apod.) -(L) Nízká frekvence (větší vlnová délka) – nejcitlivější (žlutá a červená -(M) Střední frekvence (střední vlnová délka) – méně citlivé -(H) Vysoká frekvence (malá vlnová délka) – velice málo citlivé A – citlivost oka B – citlivost technického zařízení – kamera (RGB) Mozek – vizuální kortex – vzadu na mozku VIZUÁLNÍ PERCEPCE Tomáš Bouda HCI na KISK Rozlišujeme kontrasty Zelené jsou shodné. Nalevo se nám však zdá zelená tmavší. Napravo světlejší. Našim předkům to umožňovalo rozpoznávat tmavého leoparda i v noci (pravý obrázek). VIZUÁLNÍ PERCEPCE Tomáš Bouda HCI na KISK Rozlišujeme kontrasty Edvard H. Adelson C:\Users\pc012\Disk Google\DropBox\KISK\HCI\01Prezentace\2015\Designing with the mind in mind\stín1.JPG C:\Users\pc012\Disk Google\DropBox\KISK\HCI\01Prezentace\2015\Designing with the mind in mind\Stín3.JPG The checker shadow illusion is an optical illusion published by Edward H. Adelson, Professor of Vision Science at MIT in 1995. 1.mozek zvyšuje lokální kontrast – pole B je tak světlejší než černá pole kolem. 2.Mozek moc neřeší postupné barevné přechody – dopad stínu 3.Hrany barevných bloků napovídají mozku, že se musí měnit barvy. VIZUÁLNÍ PERCEPCE Tomáš Bouda HCI na KISK Schopnost rozlišovat barvy závisí na jejich zobrazení. -Čím bledší, tím hůře rozpoznatelné -Velikost barevnách bloků -Vzdálenost barevných bloků The checker shadow illusion is an optical illusion published by Edward H. Adelson, Professor of Vision Science at MIT in 1995. 1.mozek zvyšuje lokální kontrast – pole B je tak světlejší než černá pole kolem. 2.Mozek moc neřeší postupné barevné přechody – dopad stínu 3.Hrany barevných bloků napovídají mozku, že se musí měnit barvy. VIZUÁLNÍ PERCEPCE Tomáš Bouda HCI na KISK Schopnost rozlišovat barvi závisí na jejich zobrazení. 1.Světle žlutou někteří nevidí. 2.Malá legenda je špatně rozeznatelná. VIZUÁLNÍ PERCEPCE Tomáš Bouda HCI na KISK Externí faktory: •Různé displeje •Displeje ve stupních šedi •Úhly pohledu •Slunce – nejdříve ruší barvy, u displeje je tak displej ve stupních šedi. 4. Bankomat za denního světla. VIZUÁLNÍ PERCEPCE – RADY PRO DESIGN Tomáš Bouda HCI na KISK •Rozlišuj sytost a jas • •Používej barvy, které se liší • •Nepoužívej barvy nevhodné pro zrakově hendikepované a slabozraké (tmavě červená a černá, tmavě červená a tmavě zelená, světle zelená a bílá – Inflow) • •Používejte společně s barvami také symboly. Rozlišuj sytost a jas – používej kontrast, když děláš design, podívej se na aplikaci v modu stupních šedi, zda je vše dobře vidět, bude to OK i v barvě. Používej barvy, které se liší. VIZUÁLNÍ PERCEPCE – RADY PRO DESIGN Tomáš Bouda HCI na KISK TAKE AWAY MESSAGE #2: Lidé rozlišují kontrast. Tomáš Bouda HCI na KISK VIZUÁLNÍ PERCEPCE – PERIFERNÍ VIDĚNÍ Tomáš Bouda HCI na KISK •Rozlišení oka a kamery není stejné. • -6 mil. čípků na sítnici -Žlutá skvrna – místo kde je nejvíce čípků -Ze žluté skvrny nejvyšší rozlišení obrazu -Informace z periferie sítnice – kompresovaná informace VIZUÁLNÍ PERCEPCE – PERIFERNÍ VIDĚNÍ Tomáš Bouda HCI na KISK •Pokus s palcem • -Na periferii od place máme rozlišení jeden bod velikosti melounu -Jak ale můžeme sledovat okolí? -Oči se pohybují 3 x za sekundu – proto vidíme okolí -Periferní vidění nám umožňuje rozhodovat se, kam se podíváme, přitahují nás pohyby a barvy – již od člověka neadrtálského. VIZUÁLNÍ PERCEPCE – PERIFERNÍ VIDĚNÍ Tomáš Bouda HCI na KISK D:\Users\180601\Downloads\Wikipedia-spotlight (1).jpg Jsme schopni predikovat, co přijde. Vizuální kortext informace rozposílá do dalších částí mozku. VIZUÁLNÍ PERCEPCE – PERIFERNÍ VIDĚNÍ Slepá skvrna – mozek si domýšlí a obraz kompenzuje. Tomáš Bouda HCI na KISK VIZUÁLNÍ PERCEPCE – PERIFERNÍ VIDĚNÍ Tomáš Bouda HCI na KISK Umožňuje nám rozhodovat se, kam se podíváme. • • • Díváme se na KJ, ale vidíme také datum zpotřeby VIZUÁLNÍ PERCEPCE – PERIFERNÍ VIDĚNÍ Tomáš Bouda HCI na KISK Upozorňuje na nebezpečné věci (pohyb, barva). • • Díváme se na KJ, ale vidíme také datum zpotřeby VIZUÁLNÍ PERCEPCE – PERIFERNÍ VIDĚNÍ – DESIGN Tomáš Bouda HCI na KISK VIZUÁLNÍ PERCEPCE – PERIFERNÍ VIDĚNÍ – DESIGN Tomáš Bouda HCI na KISK Error dávejte tam, kam se lidé dívají. • • • 1.lidé hledají informace na webu ve tvaru F (z horního levého rohu do pravého spodního rohu). VIZUÁLNÍ PERCEPCE – PERIFERNÍ VIDĚNÍ – DESIGN Tomáš Bouda HCI na KISK Používejte symboly • • • VIZUÁLNÍ PERCEPCE – PERIFERNÍ VIDĚNÍ – DESIGN Tomáš Bouda HCI na KISK Vyhraďte si na error červenou barvu. • • • 1.V případě, že je korporátní barva červená, tak použijte jinou výraznou barvu – zelenou. VIZUÁLNÍ PERCEPCE – PERIFERNÍ VIDĚNÍ – DESIGN Tomáš Bouda HCI na KISK 1.V případě, že je korporátní barva červená, tak použijte jinou výraznou barvu – zelenou. VIZUÁLNÍ PERCEPCE – PERIFERNÍ VIDĚNÍ – DESIGN Tomáš Bouda HCI na KISK 1.V případě, že je korporátní barva červená, tak použijte jinou výraznou barvu – zelenou. VIZUÁLNÍ PERCEPCE – PERIFERNÍ VIDĚNÍ – DESIGN Tomáš Bouda HCI na KISK Napovídejte • • • 1.V případě, že je korporátní barva červená, tak použijte jinou výraznou barvu – zelenou. VIZUÁLNÍ PERCEPCE – PERIFERNÍ VIDĚNÍ – DESIGN Tomáš Bouda HCI na KISK Vyskakovací okna – uživatel error musí řešit. Používejte zvuk – upozornění na nestandardní událost. Označte error pohybem • • • 1.V případě, že je korporátní barva červená, tak použijte jinou výraznou barvu – zelenou. VIZUÁLNÍ PERCEPCE – PERIFERNÍ VIDĚNÍ – DESIGN Tomáš Bouda HCI na KISK Pozor: uživatelé si mohou na error zvyknout. Mozek se blikání, pohyb, vyskakovací okna bude snažit po nějaké době upozadit. • • • TAKE AWAY MESSAGE #3: Pohyb a barva ovlivňují to, kam se člověk dívá. Tomáš Bouda HCI na KISK DĚKUJI ZA POZORNOST TOMÁŠ BOUDA BOUDATOMAS@GMAIL.COM KISK 2016 KOMUNIKACE ČLOVĚK-POČÍTAČ