G t ltG t lt LL !!GestaltGestalt LawsLaws!!

Interacción HombreInteracción Hombre--MáquinaMáquinaInteracción HombreInteracción Hombre MáquinaMáquina20082008--11

Proceso de Diseño Proceso de Diseño (Ventana Virtual)(Ventana Virtual)Proceso de Diseño Proceso de Diseño (Ventana Virtual)(Ventana Virtual)Datos Funciones del Sistema Acciones de Usuario

Modelo de Datos Descripción de Tareas

Funciones V t Vi t l

Usabilidad

Casos Uso

SemánticasVentana Virtual

FuncionesPlan de Página Funciones Navegación

Funciones Presentación

Presentación

Pruebas de UsabilidadPROTOTIPO

PresentaciónPresentaciónPresentaciónPresentación• EmergenceEmergence• Reification• Multistability• Invariance

Percepción

• Closure• Similarity• Proximity• SimmetryBuena Forma • Simmetry• Good Continuation• Common Fate

Buena Forma

• Balance• Simplicity• Unity• Focal point• “Relaciones!”

Otras Leyes

• Interfaz• Tabla contenidoEjemplos • Títulos• Documentos

Ejemplos

PercepciónPercepciónPercepciónPercepción

Surgimiento /Surgimiento / EmergenceEmergenceSurgimiento / Surgimiento / EmergenceEmergence

Generativo /Generativo / ReificationReificationGenerativo / Generativo / ReificationReification

Estabilidad /Estabilidad / MultistabilityMultistabilityEstabilidad / Estabilidad / MultistabilityMultistability

Percepción Invariante /Percepción Invariante / InvarianceInvariancePercepción Invariante / Percepción Invariante / InvarianceInvariance

“Buena Forma” /“Buena Forma” / PrägnanzPrägnanzBuena Forma / Buena Forma / PrägnanzPrägnanz

Cierre /Cierre / ClosureClosureCierre / Cierre / ClosureClosure

SimilaridadSimilaridad // SimilaritySimilaritySimilaridadSimilaridad / / SimilaritySimilarity

Proximidad /Proximidad / ProximityProximityProximidad / Proximidad / ProximityProximity

Simetría /Simetría / SimmetrySimmetrySimetría / Simetría / SimmetrySimmetry

Continuidad /Continuidad / GoodGood ContinuationContinuationContinuidad / Continuidad / GoodGood ContinuationContinuation

MovimientoMovimiento ParaleloParalelo / Common / Common FateFate

Alarma

Forma

Consiencia

Forma

Centro de VisiónCentro de Visión

Leyes RelacionadasLeyes RelacionadasLeyes RelacionadasLeyes Relacionadas

BalanceBalanceBalanceBalance

Simplicidad /Simplicidad / SimplicitySimplicitySimplicidad / Simplicidad / SimplicitySimplicity

Unidad /Unidad / UnityUnity && HarmonyHarmonyUnidad / Unidad / UnityUnity & & HarmonyHarmony

Punto focal / Focal PointPunto focal / Focal PointPunto focal / Focal PointPunto focal / Focal Point

Relación y Superposición de Relación y Superposición de LeyesLeyes

Relación y Superposición de Relación y Superposición de LeyesLeyes

Relación y Superposición de Relación y Superposición de LeyesLeyes

Otras ConsideracionesOtras ConsideracionesOtras ConsideracionesOtras Consideraciones

EjemploEjemploEjemplo…Ejemplo…

EjemploEjemploEjemplo…Ejemplo…

EjemploEjemploEjemplo…Ejemplo…

EjemploEjemploEjemplo…Ejemplo…

EjemploEjemploEjemplo…Ejemplo…

Ejemplo 2Ejemplo 2Ejemplo 2…Ejemplo 2…

Introduction & Basic Concepts 7The role of requirements 8Project types 11Contents of the specification 13

Functional details 85Complex and simple functions 85Tables and decision tables 88Textual process descriptions 90Contents of the specification 13

Problems observed in practice 16Domain level and product level 18The goal–design scale 20Typical project models 24

Textual process descriptions 90State diagrams 92State-transition matrices 94Activity diagrams 95Class diagrams 98Typical project models 24

Data requirement styles 30The hotel system example 30The data model 30Data dictionary 37

Class diagrams 98Collaboration diagrams 102Sequence diagrams 103Special Interfaces 107Reports 107y

Data expressions 39Virtual windows 42Functional requirement styles 45Human/computer – who does what? 45

pPlatform requirements 108Product integration – ordinary customers 110Product integration – main contractor 114Technical interfaces 115

Context diagrams 46Event list and function list 47

Quality requirements 117Quality Factors 118

Ejemplo 2Ejemplo 2Ejemplo 2…Ejemplo 2…

Introduction & Basic Concepts ------------ 7The role of requirements -------------------------- 8Project types----------------------------------------11Contents of the specification 13

Functional details------------------------------85Complex and simple functions ------------------85Tables and decision tables------------------------88Textual process descriptions 90Contents of the specification---------------------13

Problems observed in practice -------------------16Domain level and product level -----------------18The goal–design scale-----------------------------20Typical project models----------------------------24

Textual process descriptions ---------------------90State diagrams--------------------------------------92State-transition matrices --------------------------94Activity diagrams----------------------------------95Class diagrams -------------------------------------98Typical project models----------------------------24

Data requirement styles ---------------------30The hotel system example------------------------30The data model-------------------------------------30Data dictionary-------------------------------------37

Class diagrams -------------------------------------98Collaboration diagrams ------------------------- 102Sequence diagrams ------------------------------ 103Special Interfaces---------------------------- 107Reports -------------------------------------------- 107Data dictionary 37

Data expressions -----------------------------------39Virtual windows -----------------------------------42Functional requirement styles ------------45Human/computer – who does what?------------45

Reports 107Platform requirements -------------------------- 108Product integration – ordinary customers---- 110Product integration – main contractor -------- 114Technical interfaces ----------------------------- 115p

Context diagrams ----------------------------------46Event list and function list------------------------47

Quality requirements ----------------------- 117Quality Factors----------------------------------- 118

Ejemplo 3Ejemplo 3Ejemplo 3…Ejemplo 3…

Ventas de Productos

H f t i ió l tHay una fuerte variación en las ventasdel año. . .

Ejemplo 3Ejemplo 3Ejemplo 3…Ejemplo 3…

Ventas de ProductosH f t i ió l tHay una fuerte variación en las ventasdel año. . .

Ejemplo 4Ejemplo 4Ejemplo 4…Ejemplo 4…

Bibliografía & ReferenciasBibliografía & ReferenciasBibliografía & ReferenciasBibliografía & ReferenciasThomas Thomas GeisGeis : “: “ISO ISO StandardsStandards forfor UsabilityUsability: : Painful Restrictions or Helpful Painful Restrictions or Helpful Guidelines?Guidelines?”. ”. TÜV TÜV SecureSecure iTiT GmbHGmbH, 2002., 2002.

Dempsey Chang, Laurence Dooley and Dempsey Chang, Laurence Dooley and JuhaniJuhani E. E. TuovinenTuovinen: “: “Gestalt Gestalt Theory in Visual Screen Design Theory in Visual Screen Design –– A New Look at an Old A New Look at an Old SubjectSubject”. ”. MonashMonashUniversityUniversity, , AustralianAustralian 2002.2002.

St L h “St L h “G t lt I hi d th P i f S bj tiG t lt I hi d th P i f S bj tiSteven Lehar: “Steven Lehar: “Gestalt Isomorphism and the Primacy of Subjective Gestalt Isomorphism and the Primacy of Subjective Conscious Experience: A Gestalt Bubble ModelConscious Experience: A Gestalt Bubble Model”” The The SchepensSchepens Eye Eye Research Institute, Boston 2004. Home Page: Research Institute, Boston 2004. Home Page: http://sharp.bu.edu/~slehar/webstuff/bubw3/bubw3.htmlhttp://sharp.bu.edu/~slehar/webstuff/bubw3/bubw3.html ((páginapágina visitadavisitada enenhttp://sharp.bu.edu/ slehar/webstuff/bubw3/bubw3.htmlhttp://sharp.bu.edu/ slehar/webstuff/bubw3/bubw3.html ((páginapágina visitadavisitada en en abrilabril de 2008)de 2008)

TheThe GestaltGestalt PrinciplesPrinciples: : http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gehttp://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gestaltprinc.htmstaltprinc.htm ((páginapágina visitadavisitada en en abrilabril de 2008)de 2008)

Luis CarlosLuis Carlos DíazDíaz: “: “NotasNotas dede ClaseClase”” InteracciónInteracción HombreHombre MáquinaMáquina””Luis Carlos Luis Carlos DíazDíaz: : NotasNotas de de ClaseClase InteracciónInteracción HombreHombre--MáquinaMáquina luisdiaz@javeriana.edu.coluisdiaz@javeriana.edu.co Universidad Javeriana, Bogotá. 2008Universidad Javeriana, Bogotá. 2008