Human-Computer Interaction Curs 1arthur/HCI/Lecture Notes/Curs.01.pdf · Gandirea Aspecte organizatorice ... Utilizat ca platforma de test in cadrul programului "Smart Ship" Echipat

Cursul 01

Arthur Molnar

Introducere

Aspecteorganizatorice

Cateva exemple

Evolutiaconceptului deHCI

Elementefundamentale

Model HumanProcessor

Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Human-Computer InteractionCurs 1

Arthur Molnar

Universitatea Babes-Bolyai

[email protected]

March 4, 2015

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Overview

1 IntroducereAspecte organizatoriceCateva exempleEvolutia conceptului de HCIElemente fundamentaleModel Human Processor

2 OmulVedereaAuzulSimtul tactilMiscareaMemoriaGandirea

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Aspecte organizatorice

Am pornit de la presupunerea ca doriti ceva ... ”altfel”

Am preluat si am extins cursul din anii trecuti

Am incercat sa fac un curs, interesant, interactiv, ancoratin lumea reala

Prezenta nu este obligatorie

Cursurile le gasiti pe cs.ubbcluj.ro/ arthur/HCI

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea


Competente

Crearea de interfete user-friendly

Experienta de lucru in echipa

Prototipizare multi-platforma pentru un sistem ales de voi

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea


Bibliografie

Pentru examen

Alan Dix, Janet Finlay, Gregory D Abowd, Russell Beale -Human-Computer Interaction, Prentice Hall, third edition,2004

Ce este inclus in prezentarile de la curs

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea


Bibliografie

Alte surse

Donald A. Norman - Emotional Design - Why we love (orhate) everyday things, Basic Books, 2004

Martijn van Welie - Task-based User Interface Design,2001

Donald A Norman - The design of everyday things, BasicBooks, 1988

Fabio Paterno - Model-based design and evaluation ofinteractive applications, Springer, 1999

Jennifer Tidwell - Designing Interfaces: Patterns forEffective Interaction Design, O’Reilly, 2005

Jacob Nielsen - Usabaility Engineering, Academic Press,1993

The Internet (citation where needed)

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea


Modul de evaluare: 0.25 * Lab + 0.75 * Proiect

Lab

Activitate de laborator traditionala

Proiect

Veti elabora o documentatie si un prototip GUI pentru unsistem gandit de voi

Echipe de 3-5 persoane

Prezentare in cadrul laboratorului si la curs

In restanta = Examen scris

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea


De ce Human-Computer Interaction?

Informatica este un domeniu foarte nou

Este larg raspandita ideea ca standardele de calitateacceptate nu sunt potrivite

Evolutia tehnologiei face ca uneori sa nu o stim utiliza

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Cateva exemple

American Airlines Flight 965

Zbor intre Miami si Cali (Columbia) cu un Boeing 757

159 pasageri si 8 membri ai echipajului

Pilotul trebuia sa introduca un punct nou de navigare cunume de cod ”ROZO”

El alege din lista primul care incepe cu ”R” si arefrecventa corecta

Punctul nou este ROMEO, la 150 mile de cel dorit

Avionulse loveste de munti

Rezultatul oficial: Eroare de navigatie, cu factordeterminant inadaptarea pilotilor la sistemul demanagement al zborului

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Cateva exemple

USS Yorktown (CG-48)

Utilizat ca platforma de test in cadrul programului ”SmartShip”

Echipat cu 27 de CPU-uri Pentium Pro care controlaumotoarele, sistemele de armament si alimentare

Introducerea unui 0 intr-un camp al unei baze de date adus la un buffer overflow

Nava a ramas blocata (”dead in the water”) cel putin 2h45m.

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Cateva exemple

Care e problema?

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Cateva exemple

Care e problema?

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Evolutia conceptului de HCI

Conceptul incepe sa fie folosit la inceputul anilor 80

Primele preocupari legate de bunastarea oamenilor inmediul in care lucreaza Al Doilea Razboi Mondial 1949Societatea de Cercetari in Ergonomie

Ergonomia preocupata de caracteristicile fizice aleutilizatorilor si masinilor si de modul in care acesteaafecteaza perfomanta

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Evolutia conceptului de HCI

Ergonomia factori umani (human factors)

In timp, studiile de ergonomie incorporeaza tot mai multeaspecte cognitive

Odata cu raspandirea calculatoarelor dezvoltarea unui noudomeniu de cercetare (aspecte fizice si psihice)-interactiune om-masina (Man-Machine Interaction)

In timp, MMI CHI (Computer-Human Interaction) HCI(Human Computer Interaction)

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

HCI concepte fundamentale

In studiul HCI nu ne limitam la un utilizator careinteractioneaza cu un calculator

Utilizator un individ, un grup de indivizi sau o multimede utilizatori care interactioneaza secvential pentru unasau mai multe parti din proces

Computer orice tehnologie care poate insemna uncalculator desktop pana la un sistem la scara larga, unsistem de control al proceselor sau un sistem integrat

Sistemul poate sa includa si parti neautomatizate (altioameni)

Interactiune orice comunicare intre utilizatori si computer

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

HCI, un domeniu interdisciplinar

Ideal, proiectantul unui sistem interactiv ar trebui sa aibaexpertiza in:

Psihologie (posibilitati cognitive, perceptie, rezolvare deprobleme)Ergonomie (capacitati fizice)Sociologie (contextul interactiunii)Inginerie soft (realizarea efectiva a sistemului)Design grafic (prezentari estetice ale UI)

Echipe multidisciplinare

Practic: psihologie+inginerie soft

Stiinta sau creativitate? - arhitectura

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Elemente fundamentale in HCI

Utilizator

Computer

Interactiune

Utilizatorul psihologie cognitiva

Pentru a proiecta ceva pentru cineva trebuie intelesecapacitatile si limitarile saleFurnizeaza informatii despre aspecte esentiale ininteractiune: perceptia, modul de memorare ainformatiilor, procesare si rezolvare de probleme,manipulare de obiecte reprezentate simplificat - modele

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Model Human Processor

Dezvoltat de Card, Moran si Newell (1989)

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea



1 Capacity overflow: information overload

2 Integration: common message?

3 Contention: conflicting channels

4 Comprehension

5 Multitasking input/output

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea


3 subsisteme

Perceptiv trateaza stimulii din mediul inconjuratorMotor controleaza actiunile fiziceCognitiv - realizeaza procesarile necesare pentru a leconecta pe cele doua anterioare

Fiecare subsistem are propriul procesor si memorie

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea


Schematic

Informatia este receptionata memorata procesatarezultatele transmise spre exterior

Trebuie sa studiem

I. Canalele de I/OII. MemoriaIII. Procesarea (rezolvarea de probleme, invatare, erori!!!)

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Canalele de I/O

Interactiunea se realizeaza prin informatie care seprimeste/transmite

Informatia primita este output-ul de la calculator estereceptionata prin simturi precum vazul, auzul, atingerea,gustul, mirosul (mai putin exploatate deocamdata)

Informatia transmisa este inputul pentru calculator serealizeaza prin actiuni motorii efectori (degete, ochi, cap,sistem vocal)

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Vederea

Activitate complexa cu limitari fizice si perceptuale

Este principala sursa de informare pentru majoritateapersoanelor

Se realizeaza in doua faze:

Perceptia fizica a stimulilorProcesarea si interpretarea stimulilor

Exista proprietati fizice ale ochiului care fac ca anumiteobiecte sa nu poata fi vazute

Capacitatile interpretative ale procesorului vizual permitconstructia de imagini din informatii incompletecompensarea, dar e posibil sa apara si iluzii

Contextul este foarte important in interpretarea imaginilor

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Iluziile

Punctul orb al fiecarui ochi este locul unde nervul opticintalneste retina

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Iluziile

Sistemul perceptiv nu este intotdeauna o sursa sigura deinformare

Iluziile optice demonstreaza faptul ca lucrurile nu suntintocmai cum le vedem

Modul in care sunt compuse figurile geometrice afecteazamodul in care le percepem

Figurile geometrice nu sunt percepute asa cum suntdesenate tendinta este de a percepe marit liniile orizontalesi de a percepe redus liniile verticale (un patrat trebuiedesenat ca dreptunghi pentru a-l vedea patrat)

Liniile desenate orizontal par mai subtiri decat celeverticale

Simetria paginilor este afectata de iluziile optice percepemcentrul paginii putin sub pozitia lui reala optical center

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Iluziile

Iluzia Ponzo, demonstrata in 1911 arata ca omul judecadimensiunea unui obiect tinand cont de fundalul acestuia

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Citirea

Perceptia si procesarea textului caz special

Etape

Perceptia sablonului cuvantuluiDecodificarea sablonului pe baza reprezentarii interne alimbajului

Cuvintele nu sunt citite caracter cu caracter un cuvant eperceput la fel de repede ca si un caracter pe baza formeicuvantului

PrIn iNLaturAReA indicIIlOr lEgatE dE foRmAcUvinTeLor (modificand literele mici in litere mari) scadeacuratetea si viteza de citire

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Exemplu

Studiu

Pe bzaa uonr sudtii a ueni uvetsniariti egzlene, nu areintortmapa in ce odnrie satu liertele itnr-un cvunat. Imatporntetse ca pmria si umtlia lireta sa fie la lcoul pitovrit. Rtseulleilretor pot sta in ocire odrnie si tustoi ptoi ctii. Atsa e psboiilprnteu ca noi ctiim cunelvite irngtei si nu letira cu ltirea

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Sistemul vizual

Eroare?

The quick brownfox jumps over thethe lazy dog

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Culorile in HCI

Culorile impact major in dezvoltarea UI

Daca nu pozitiv, atunci negativ

Folosirea corecta a culorilor poate imbunatati procesul dememorarea si formarea de modele mentale corespunzatoare

Culorile primare: rosu, verde, galben, albastru atasarea desemnificatii culorilor sporeste usurinta in utilizare

Numarul magic: 5 +/- 2 culori intr-o interfata

Pentru concepte diferite, folositi culori diferite, nu nuantediferite

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Diferente culturale - culori


Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Combinatii de culori

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Combinatii problematice

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Designing with blue

Combinatii de culori care difera prin albastru

Exista probleme atunci cand albastrul si galbenul suntfolosite in cadrul graficelor legate de

LizibilitateViteza de raspunsLocalizare spatialaPerceptia formelor geometrice

Exista mai putini fotoreceptori pentru albastru decatpentru verde si rosu si nu exista deloc fotoreceptori pentrualbastru in zona de acuitate maxima

Recomandare frecventa: Pure blue should not be used forfine detail or background

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Lizibilitate

Dificila la orice dimensiune a fonturilor

Alte combinatii care difera prin albastru

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Exemplu alegere fericita de culori

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Recomandari privitoare la utilizarea culorilor

Folositi cu grija (zgarcenie) culorile:

Pot face lucrurile mai greu de intelesMai multe culori=mai multa informatie

Limitati numarul de culori (4- maxim 7)

Constientizati puterea de codificare a culorilor

Poate face recunoasterea mai usoara daca diferentele suntclare si cunoscute

Faceti posibil ca utilizatorul sa poata renunta cu usurintala culorile din interfata

Proiectati mai intai fara culori: dispozitia obiecteloreste esentiala, culorile sunt folosite doar pt a imbunatati

Folositi schimbarea de culori la schimbarea starii sistemului

Alegerea nepotrivita a culorilor poate fi mai rea decat lipsaacestora

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Lizibilitate

Textul care trebuie citit trebuie sa aiba un contrast sporit(recomandabil text negru pe fundal alb sau galben pal), deevitat fundalul gri

Se recomanda atentie sporita nevoilor utilizatorilor maivarstnici dupa 45 ani majoritatea oamenilor sufera de oreducere a transmisiei luminii in ochi

Se recomanda folosirea fonturilor suficient de mari pentrua putea fi citite pe monitoare standard.

Caracterele mai mari vor fi folosite pentru informatiile carese doresc a fi afisate, mai degraba decat pentru etichete siinstructiuni (utilizatorii le vor recunoaste)

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Fonturi

http://www.urbanfonts.com/

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Fonturi

Font vs. TypefaceDistinctia este evidenta odata ce ne gandim la tiparireatraditionalaExemplu de typeface: GaramondExemplu de font: bold Garamond 8ptFontul se turna in metal, fonturile similare ca aspect (darmarime si caracteristici diferite consitituie un typeface)

http://www.fastcodesign.com/3028971/whats-the-difference-between-a-font-and-a-typeface

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Fonturi

In lumea digitala se refera la modul de reprezentare asimbolurilor

Fonturile sunt descrise in forma vectoriala pentru apermite randarea independent de marime si rezolutie

Fonturile TrueType, standard dezvoltat de Apple siMicrosoft permit afisarea caracterelor pe ecran siimprimanta in forma WYSIWYG

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Fonturi

Dimensiunea unui typeface

Nu toate typefaces sunt create la felProportional vs Monospace

http://en.wikipedia.org/wiki/Typeface

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Fonturi

Aspecte ce tin de dimensiunea unui font

http://en.wikipedia.org/wiki/Typeface

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Fonturi

Proportional vs MonospaceProportional respecta faptul ca unele litere ocupa mai multspatiu pe orizontalaDar Monospace? - Incercati sa setati IDE-ul vostrupreferat sa folosesca font proportional :)

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Fonturi

Toate fonturile de mai jos sunt de 12pt. Ele difera princaracteristicile de proportionalitate (ascent, descent, ...)

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Fonturi

Serif versus Sans-Serif

http://en.wikipedia.org/wiki/Serif

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Fonturi

Avantajele fonturilor serif

Ghideaza fluxul orizontal al ochilor in timpul citirii

Creste spatierea dintre litere si cuvinte sprijinindlizibilitatea

Sporeste contrastul si diferentele dintre litere usurandidentificarea

Leaga caracterele in cuvinte intregi (sporeste coeziunea)

Sunt preferate de catre cititori

Sans serif sporeste oboseala

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Fonturi

Avantajele fonturilor sans serif

Serifii sunt un artefact

Sans serif sunt mai potrivite pentru paginile web (infunctie de rezolutie, serifurile sunt greu de reprodus)

Sunt preferabile in cazul copiilor care invata sa citeasca(mai usor de recunoscut)

La dimensiuni mici ale fonturilor sunt mai usor lizibile


Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Fonturi

Avantajele fonturilor sans serif

Serifii sunt un artefact


Sunt preferabile in cazul copiilor care invata sa citeasca(mai usor de recunoscut)

La dimensiuni mici ale fonturilor sunt mai usor lizibile


Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Fonturi

Ce conteaza de fapt - PPI (pixels per inch)Cate puncte de rezolutie pot fi desenate pe un inch( 25.4mm)

Versiunile traditionale Windows erau setate pe 96 PPI, intimp ce OS X utiliza 72 PPI (corespondenta custandardele de tipar)

Problema era datorata randarii corecte a fonturilor pedisplayurile vremii

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Fonturi

Studiu de caz - Verdana vs. Calibri

VerdanaIntrodus de Microsoft in 1996Destinat pentru a afisa informatii pe ecranele vremii(monitoare 14” CRT, 60 PPI)Textul ramane lizibil la marime de 8 pixeli

CalibriIntrodus de Microsoft in 2007Destinat pentru a afisa informatii pe ecrane LCD cuanti-aliasing (ClearType)Ocupa mai putin spatiu ca Verdana

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Fonturi

Cum se poate imbunatati afisarea textului pe ecran?

Rasterizare simpla

Rasterizare cu antialiasing general

Rasterizare cu antialiasing la nivel de subpixel pentruecrane LCD cu matrice RGB

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Fonturi


Rasterizare simpla



Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Fonturi


Rasterizare simpla



Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Paragraphs of Text

Tehnologia ClearType, implementarea Microsoft aanti-aliasingului folosind randare la nivel de subpixel

Se bazeaza pe cunoasterea aranjamentului de subpixelired, green blue din cadrul monitorului

Acestia pot fi controlati individual prin afisarea culorii rosii,verzi sau albastre pentru un pixel, sau a unei combinatii

Detalii despre ClearType in Windows 7http://bit.ly/1zP1xHo

http://en.wikipedia.org/wiki/ClearType

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Paragraphs of Text

Mai jos (1) Linie diagonala, (2) Antialiasing, (3) Identic,pe monitor color, (4) La nivel de subpixel

http://en.wikipedia.org/wiki/ClearType

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Fonturi

Marsul lent al progresului

PC-uri ”traditionale”

1995 - Monitor CRT de 14”, rezolutie 800x600 pixeli deci72 PPI2015 - Monitor LCD de 24”, rezolutie 1920x1080 pixelideci 92 PPI

Telefoane inteligente

2011 - Galaxy S2, 480x800 pixeli inseamna 217 PPI2014 - LG G3, 1440x2560 pixeli inseamna 538 PPI

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Auzul

Considerat secundar vederii, desi cantitatea de informatie pecare o primim prin auz este extrem de mare

Sistemul auditiv realizeaza o filtrare a sunetelor pe care leprimeste, permitand ignorarea sunetelor de fundal siconcentrarea atentiei asupra sunetelor importante cocktailparty effect

Sunetele nu sunt folosite la potentialul lor real inproiectarea UI, doar pt avertizari si notificari

Urechea poate diferentia schimbari subtile ale sunetelor sipoate recunoaste sunete familiare fara a impuneconcentrarea atentiei asupra sursei sunetului ar putea fifolosit pentru a furniza informatii despre starea sistemului

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Simtul tactil

Furnizeaza informatii relevante despre mediu

Foarte dezvoltat la persoanele cu dizabilitati

Aparatul tactil nu este localizat receptorul este pielea

3 tipuri de receptori senzoriali:

Termoreceptori (cald/frig)Receptori de presiuneMecanoreceptori (caldura/presiune/durere) importanti inHCI

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Miscarea

Ex: apasarea unui buton ca raspuns la o intrebare

Etape:

Stimulul este primit prin intermediul unor receptoritransmis la creier procesat muschii sunt actionatiFiecare etapa necesita timp:

Timp de miscare (varsta, starea de sanatate)Timp de reactie depinde de canalul pe care e primitstimulul (stimul auditiv 150ms, stimul vizual -200 ms,stimul dureros-700ms) combinarea lor determina unraspuns mai rapid

Timpul de reactie e foarte important in HCI

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Legea lui Fitt

Calculeaza timpul necesar deplasarii la o tinta de pe ecran(buton, optiune de meniu, iconita) in functie dedimensiunea tintei si distanta fata de tinta

a, b constante determinate empiric

D este distanta pana la tinta

S este suprafata tintei

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Legea lui Fitt

Recomandare

Tintele mai des folosite sa fie cat mai mari si distanta pana laele cat mai mica

Recomandare

Optiunile cele mai frecvent folosite sa fie cat mai aproape deinceputul meniului

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Legea lui Fitt

Recomandare

Tintele mai des folosite sa fie cat mai mari si distanta pana laele cat mai mica

http://www.androidbeat.com/2014/01/cyanogenmod-11-milestone-2-features-walkthrough/

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Legea lui Fitt

Recomandare

Optiunile cele mai frecvent folosite sa fie cat mai aproape deinceputul meniului

http://blogs.msdn.com/b/b8/archive/2011/10/11/reflecting-on-your-comments-on-the-start-screen.aspx

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Memoria

3 tipuri de memorie:

SenzorialaDe scurta durata (de lucru)De lunga durata

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Memoria senzoriala

Zona tampon pentru stimulii primiti de la simturi

Exista cate o zona de memorie senzoriala pt fiecare canal:memorie iconica, memorie ecoica si memorie tactila

Se suprascrie in mod continuu cu informatiile noi primite

Informatiile din memoria senzoriala sunt transferate inmemoria de scurta durata prin atentie (sunt filtrati doarstimulii importanti) influentata de modul de prezentare ainformatiei si de scopurile noastre (daca sunt clare)

George Miller, 1956

Capacitate limitata 7 +/- 2 fragmente de informatie

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Memoria de scurta durata

Zona tampon pentru stimulii primiti de la simturi

Folosita pentru a retine informatii pentru scurt timp (ex:35 x 6=?) sau in citire, pentru a retine inceputul uneipropozitii

Accesul e foarte rapid 70 ms

Informatia poate fi retinuta max 200 ms

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea


Exercitiu

Incercati sa memorati cat mai multe cifre din urmatoareasecventa:

265397620853

Exercitiu

Repetati experimentul pentru urmatoarea secventa:

0040 732 215 754

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea


Principiul 7 +/- 2 - gresit aplicat deseori in proiectareaUI:

Meniuri cu cel mult 7 optiuniDoar 7 iconuri intr-o bara de meniuMaxim 7 elemente intr-o listaMaxim 7 taburi intr-o interfataMaxim 7 optiuni intr-un meniu derulant

In cazul interfetelor la linia de comanda e importantnumarul parametrilor /optiunilor

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea


Exemplu de supraincarcare a memoriei:

phone banking

Utilizatorii puteau plati facturi sau verifica soldul printelefon probleme de securitate

Utilizatorii trebuie sa furnizeze raspunsuri la o combinatiedin urmatoarele intrebari:

Codul postal, numele de fata al mameiLocalitatea nasteriiPrima/Ultima scoala urmataO parola formata din 5-10 litereO adresa memorata (nu adresa)

Intrebarile sunt alese aleator la fiecare apel

Rezultatul?

Unii utilizatori uita informatiile si le noteaza pe hartie

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Memoria de lunga durata

Retine cunostinte achizitonate din experienta, reguliprocedurale, cam tot ce stim

Are capacitate mare

Accesul destul de incet 1/10 s

Informatiile se uita mai greu

Posibilitatea de reamintire este aceeasi dupa 5 minute/1ora/cateva zile

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea


Informatiile trec din memoria de scurta durata in memoriade lunga durata prin repetare

Daca informatia nu are semnificatie greu de memorat

Atentie

Urmeaza un exercitiu

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea




Memorati urmatoarele cuvinte

incredere, varsta, frig, logica, idee, valoare, trecut, mare

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea




Memorati urmatoarele cuvinte

Barca, pom, pisica, copil, farfurie, biserica, flacara, cap

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea




Rezultatul

Sunt mai usor de retinut cuvintele care reprezinta obiecte,decat cele care reprezinta concepte

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea


In practica

Majoritatea aplicatiilor cu care interactionam conturi =user+parola

Parole cuvinte usor de decoperit

Parola unica complexa periculos

Recomandarea: parolele sa fie formate din litere si cifrealeator intocmai ceea ce este cel mai dificil pentruoameni!!!!

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea


http://xkcd.com/936/

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea


http://xkcd.com/936/

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea


Contraargument

https://www.schneier.com/blog/archives/2014/03/choosing secure 1.html

Nu refolositi parolele pentru lucruri importante

Intrebarea secreta nu trebuie sa fie mai usor de ghicitdecat parola

Folositi autentificarea bifactoriala

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Gandirea

Gandirea - procesul prin care folosim cunostintele pe care leavem pentru a trage concluzii noi

Deductiva

Inductiva

Abductiva

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Gandirea deductiva

Deriveaza concluzii logice din premisele existente (de lageneral la particular)

Gandire deductiva

Ipoteza 1 Daca este luni trebuie sa mergem la cursul de HCIIpoteza 2 Este luniRezultat Mergem la curs

Rezultatul deductiei logice poate sa intre in conflict cucunostintele noastre despre realitate

Apar coliziuni intre adevar si validitate oamenii aduc inpocesul de gandire informatii despre lume pentru a creascurtaturi in procesul de gandire

Poate fi folosita pentru a verifica validitatea informatiilorobtinute prin gandire inductiva

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Gandirea inductiva

Deriveaza concluzii logice din premisele existente (de lageneral la particular)

Gandire inductiva

Ipoteza 1 Un elefant pe care l-am vazut avea trompaRezultat Toti elefantii au trompa

Gandirea inductiva surprinde regularitatea, ceea ce estecomun, constant, invariantFaciliteaza extragerea si formularea unei concluzii generaledintr-o multitudine de cazuri particulare.Concluzia va ramne valabila pana cnd vom ntalni oexceptie-produsele gndirii inductive nu sunt definitive sinici absolut sigure, dimpotriva, ele pot fi oricnd puse indiscutie.Procesul nu este riguros, dar e folosit adesea in procesulde invatare despre mediul inconjurator

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Gandire inductiva vs. Gandire deductiva

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Experimentul lui Wason

Exercitiu: 4 carti fiecare are o cifra pe o parte si o culoare pecealalta. Cartile vizibile sunt un 3,8, rosu si maro. Care cartitrebuie intoarse pentru a testa urmatoarea premiza: daca ocarte are un numar par pe o parte, partea cealalta e rosie.

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Experimentul lui Wason

Exercitiu: 4 carti fiecare are o cifra pe o parte si o culoare pecealalta. Cartile vizibile sunt un 3,8, rosu si maro. Care cartitrebuie intoarse pentru a testa urmatoarea premiza: daca ocarte are un numar par pe o parte, partea cealalta e rosie.

Raspunsul corect: Se intorc cartile 8 si maro. Oamenii preferasa foloseasca dovezi pozitive, si nu negative.

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Gandirea abductiva

Folosita pentru a gasi explicatii ale evenimentelor pe care leobservam

Gandire abductiva

Ipoteza 1 Sam conduce cu viteza mare cand beaIpoteza 2 Sam conduce cu viteza mareRezultat Sam a baut

E folosita de oameni pana la identificarea unor probecontrare

Probleme in interactiunea cu sistemele: daca un evenimenturmeaza intotdeauna unei actiuni, utilizatorul va infera caevenimentul este generat de actiune, pana cand contrariuleste dovedit

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Rezolvarea de probleme

Procesul de gasire a unei solutii la o problema nefamiliara,folosind cunostintele pe care le avem

Curentul behaviorist oamenii rezolva probleme prinreproducerea raspunsurilor cunoscute, incercare-eroare

Curentul gestaltist rezolvare productiva (bazata pegandire si restructurare a problemei)/reproductiva (bazatape experiente anterioare) de probleme

Problem space theory - se concentreaza asupra spatiuluipoblemei compus din stari ale problemei

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Problem Space Theory

Rezolvarea problemei presupune generarea starilor folosindoperatori stare-tranzitie permisi

Problema are o stare initiala si un scop se folosescoperatorii pentru a ajunge de la starea initiala la scop

Spatiul problemei poate fi foarte mare alegereaoperatorilor euristici

Euristica: analiza mijloace-scopuri: starea initiala estecomparata cu scopul final si operatorul e astfel ales incatdiferenta dintre cele doua sa scada

Spatiul problemei este limitat de capacitatea de stocare amemoriei de scurta durata iar viteza de regasire ainformatiilor influenteaza eficienta metodei

Ex: puzzle

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Analogia

Suntem interesati de modul in care oamenii rezolva problemenoi

Sugestie: oamenii folosesc maparea cunostintelor dintr-

Ex: pasare-pene caine-?

Operatorii din domeniul cunoscut sunt transferati in scopulrezolvarii problemei noi

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Paragraphs of Text

Oamenii inteleg mai usor analogia atunci cand se folosescsituatii si termeni din acelasi domeniu

Analogia

Un medic trebuie sa distruga o tumora maligna folosind raze deintensitate sporita, dar acestea vor afecta si tesutul sanatoscare inconjoara tumora. Daca reduce intensitatea razelor,tumora nu va fi distrusa. Cum procedeaza?

Analogia

Un general ataca o cetate. Nu poate sa isi trimita toti oameniiodata pentru ca drumul este minat si va exploda la trecereaunui numar mare de oameni. Cum procedeaza?

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Modelele mentale

Suntem interesati de modul in care oamenii rezolva problemenoi

Un produs de succes este bazat pe un model conceptualcare permite utilizatorilor sa invete imediat cum safoloseasca eficient produsul

In timpul in care utilizatorii folosesc sistemul achizitioneazainformatii despre cum trebuie folosit si despre modul incare acesta functioneaza se contureaza un model mental

Modelul mental este folosit pentru a face inferente despremodul de realizare a sarcinilor cu sistemul si pentru areactiona cand apare ceva neasteptat sau cand neconfruntam cu un sistem cu care nu suntem familiari

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Modelele mentale

Oamenii inteleg mai usor analogia atunci cand se folosescsituatii si termeni din acelasi domeniu

Jay Wright Forrester profesor MIT

The image of the world around us, which we carry in our head,is just a model. Nobody in his head imagines all the world,government or country. He has only selected concepts, andrelationships between them, and uses those to represent thereal system.

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Modelele mentale

De ce gresim?

Cum putem evita greselile?

Tipuri de erori:

La modificarea unor aspecte in cazul sarcinilorautomatizateIntelegere (model) incorecta a sistemului sau situatieiModele mentale teorii legate de intelegereacomportamentului cauzal al sistemelorCaracteristici: partiale, instabile, inconsistente,nestiintifice, bazate pe superstitie mai degraba decatargumente riguroase, bazate pe o interpretare gresita(uneori) a probelorExista anumite conventii care ne ajuta sa interpretamlumea inconjuratoare incalcarea lor sprijin explicit ininteractiune

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Modelele mentale

Cum sa obtinem modele mentale mai bune?

Educare (manuale de utilizare, help, documentatii)

Feed-back util la actiunile utilizatorului

Modalitati usor de inteles si intuitive de utilizare asistemului

Instructiuni clare si usor de urmatAsistenta contextualizataHelp bine construit

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Modelele mentale

Cum functioneaza cuptorul cu microunde?

Cum se incalzeste mancarea?

De ce se spune ca mancarea este incalzita dinspre interiorspre exterior?

Care e diferenta dintre incalzirea clasica a mancarii si ceafolosind microunde?

Ce se intampla daca incalzim mancare in folie de aluminiu?

De ce nu e recomandat sa se incalzeasca mancarea pentrucopii la microunde?

Exista pericol de radiere de la microunde?

Cursul 01

Arthur Molnar

Introducere


Cateva exemple




Omul

Vederea

Auzul

Simtul tactil

Miscarea

Memoria

Gandirea

Modelele mentale

Cardul bancar

Ce informatii contine cardul bancar?

Informatia este actualizata la folosirea cardului?

Care e diferenta dintre incalzirea clasica a mancarii si ceafolosind microunde?

Bancomatul are inteligenta?

Documents

Human-Computer Interaction Curs 1arthur/HCI/Lecture Notes/Curs.01.pdf · Gandirea Aspecte organizatorice ... Utilizat ca platforma de test in cadrul programului "Smart Ship" Echipat