4.1 Llenguatges, comunicació, interacció i diàlegs

Diversitat de llenguatges

• visuals
• gestuals
• orals
• escrits
• .....

Comunicació

• coneixements comuns
• suposicions comuns

Característiques (desitjables) dels llenguatges

• eficiència
• completud
• regles sintàctiques naturals
• consistència
• extensibilitat
• re-alimentació en els diàlegs
• tolerància als errors

Significat i forma en la comunicació

• Significat del llenguatge és el sentit (felicitat)
• Forma és la expressió externa per a assolir el significat ("sóc feliç", somriure, "I am happy")

• Conceptual: Han de quedar definits el model global de l'usuari, objectes, accions, propietats, relacions; moltes vegades s'expressa unificadament mitjançant una metàfora global.
• Semàntic o funcional: Descriu de forma detallada els significats del sistema en termes conceptuals (p.e., entrades, sortides, possibles errors, ...)
• Sintàctic: Defineix les formes concretes com s'articulen les unitats de la interfície per a realitzar una tasca determinada
• Lèxic: Defineix les dependències precises de dispositius i mecanismes per a especificar la sintaxi

Shneidermann recomana als dissenyadors

• determinar la funcionalitat del sistema estudiant el domini de tasques de l'usuari
• crear una llista d'accions i objectes per a les tasques
• abstreure aquesta llista en un conjunt d'accions i objectes de la interfície
• representar la sintaxi de baix nivell
• crear una taula de comunitats d'usuaris i freqüència de les tasques, determinar jerarquies de comunitats d'usuaris
• avaluar accions destructives i preveure reversibilitat
• identificar condicions d'error i preparar missatges
• dreceres per a usuaris experts

4.2 Estils de diàleg persona - ordinador

WYSIWYG

• What you see is what you get
• Exemple típic els processadors de text: en la pantalla hi ha el que hi haurà desprès al paper
• Això té avantatges clares
• Però també limitacions (la difícil correspondència entre dos entorns, conceptes no representables, ...)
• De vegades (fulla de càlcul) el programa és més que el que hi ha

Manipulació directa

• Objectes, relacions, ... representats visualment + operacions mitjançant interacció directa amb aquestes representacions
• Molt potent i fàcil d'aprendre
• Per a usuaris experts pot ser lent; altres vegades les instruccions poden ser més útils

Estil icònic

• llenguatge té una representació per icones (elements pictòrics)
• reconèixer, recordar, discriminar són les qüestions de la representació icònica
• icones tant per objectes com instruccions
• icones poden tenir dinàmica, re-alimentant l'usuari
• problemes d'identificació, d'arrels culturals
• guies sobre icones
• utilitzar representacions familiars
• limitar el nombre d'icones
• combinar icones per a crear nous objectes o accions
• afegir informació detallada
• fer-los distingibles del fons
• estudiar efectes 3D, animació
• considerar els diferents nivells
• lèxic
• sintàctic
• semàntic
• pragmàtic
• dinàmic

Altres estils

• Instruccions
• Menús
• Llenguatge natural
• Quadres pregunta-resposta
• Entorns virtuals
• ...

• Els videojocs són un excel·lent exemple d'interfície atractiva visualment, on les instruccions són accions físiques amb re-alimentació immediata en la pantalla, sense sintaxi que recordar.
• Les interfícies amb estil de manipulació directa, ... lleven problemes de memoritzar sintaxi als usuaris, i també lleven ansietat.

4.3 Tècniques de diàleg

4.3.1 Menús

• Menús simples
• Binaris (per lletres, botons de selecció, botons de ràdio)
• Múltiples (id)
• Pull-down, pop-up
• Scrolling
• Permanents (toolbars, palettes)

• Successions, menús múltiples
• per a situacions més complexes

• Arbres, grafs acíclics i cíclics, mapes de menús
• profunditat vs amplària (els usuaris s'estimen més, menús més amplis amb menys profunditat)
• agrupament semàntic
• ordenació dels ítems és important (per temps, ordre numèric, propietats, ... relacionades amb la tasca; si no hi ha ordre natural relacionat amb la tasca, altres criteris poden ser ordre alfabètic, més utilitzats primer, ...)
• agrupar ítems és important també

• Disposició visual
• títols, i camins en menús estructurats
• terminologia consistent i familiar en els ítems
• subratllat
• indentació
• separadors

4.3.2 Formularis

• Guies de disseny
• Títol significatiu
• Instruccions comprensibles
• Agrupament i ordenació lògiques
• Adequació visual
• Etiquetes familiars si és possible
• Terminologia i abreviatures consistents
• Visibilitat de l'espai i fronteres
• Moviment del cursor adequat
• Correcció d'errors per a caràcters individuals i camps
• Prevenció d'errors
• Missatges per a valors inacceptables
• Missatges explicatius
• Senyal de compleció

4.3.3 Caixes de diàleg

• Guies de disseny intern
• Títol significatiu
• Successió ordenada
• Estil consistent visual, consistència de terminologia
• Botons estàndard
• Prevenció d'errors

• Guies de disseny extern
• Aparició i desaparició suaus
• Frontera petita però distingible
• Aparició prop del lloc adient
• Possibilitat de cancel·lar i missatge de completar
• Fàcils de fer desaparèixer

4.3.4 Finestres

• Disseny de finestres individuals
• títols
• marcs
• scroll
• accions
• Disseny de finestres múltiples
• nombre fixat, lloc, ...
• arbitràries
• cascades
• avantatges i inconvenients

• Coordinació de finestres

4.3.5 Missatges d'error

• És important evitar
• to de condemna a l'usuari
• genericitat (p.e. WHAT? or SYNTAX ERROR)
• obscuritat (e.g. FAC RJCT 004004400400)
• Exemples de millores especificant més

• Exemples de to constructiu (noteu que les majúscules empitjoren el to destructiu)

En general, els missatges hostils o terminologia violenta molesten als usuaris:

• ERROR FATAL, PROGRAMA AVORTAT, ERROR CATASTROFIC
• termes negatius com IL·LEGAL, ERROR, INVÀLID, DOLENT

Les frases han d'estar centrades en el control de l'usuari

• suggerint control de l'usuari sobre el programa
• donant control sobre la quantitat d'informació que doni el sistema
• ajuda contextual pot ser important

4.3.6 Visualització (display) en general

• Categories de disseny
• elegància i senzillesa: unitat, refinament i adequació
• escala, contrast i proporció: agrupament, jerarquia, relació i equilibri
• mòdul i programa: focus, flexibilitat i consistència de les aplicacions
• imatge i representació: immediatesa, generalitat, cohesió i caracterització
• estil: distintivitat, integritat, comprehensió i adequació

• Disposició de camps
• separació
• organització
• etiquetes i dades
• caixes?
• Resultats experimentals
• forma estructurada superior a narrativa
• etiquetes de dades, agrupament, indentació i subratllat, alineació
• sols informació rellevant a les tasques
• consistència en localització, estructura, terminologia
• similaritat per a tasques similars

4.3.7 Color

• Pot servir per a reforçar o suavitzar la visualització, accentuar aspectes, discriminar subtilment, reforçar la organització lògica, provocar emocions, ...
• Guies d'utilització
• conservadorisme, limitar el nombre i força
• suport a les tasques, control de l'usuari
• consistència en la codificació
• respectar els costums
• simultaniar les tasques

4.3.8 Modes

4.4 Suport i assistència a l'usuari, documentació, formació

Exemples

Hi ha altres formes

• notes per a començar
• tutories introductòries, a fons
• referència ràpida
• ajuda contextual
• ....

Nota

La preparació de manuals es pot beneficiar del disseny centrat en els usuaris

• centrar-se en les tasques, accions, ...
• centrar-se en les tasques freqüents, diferenciar els usuaris, ...
• ensenyar la jerarquia d'objectes, el model conceptual
• reforçar la sintaxi
• ....

La preparació de manuals (escrits) és un procés

• començar des del principi del disseny, generant documentació
• testejar amb els usuaris
• refinar
• les fases poden ser:
• Prototipus
• Esborrany
• Editat
• Revisat
• Fase de test de camp
• Publicació i test massiu
• Revisió
• Manteniment
• no oblidar
• Taula de continguts i índex de paraules (obligatori)
• Glossaris per a clarificar termes
• Annexes de missatges d'error

Sistemes Online

Avantatges

• Informació disponible amb l'ordinador, sense necessitat de paper
• Possibilitats que no tenen els escrits d'animacions, indexat, cerca de text, ...
• Baix cost d'actualització

Desavantatges

• Problemes de dificultat de llegir, de poca informació en pantalla
• Dificultats de navegació
• Interferència amb l'ús dels programes

Tipus de sistemes

• llistes d'instruccions, ítems de menú
• sensitius al context
• globus
• assistents
• ...

Avantatges potencials

• adaptats a l'usuari, i a l'ús
• progressivitat, adaptació a la tasca
• ....

Guies

• fàcil d'accedir i fàcil per a retornar
• especificitat
• control de l'usuari
• no ha de ser un substitutiu d'un disseny d'interfície dolent
• transformar bé els manuals en online: canviar formats per a pantalla
• utilitzar els recursos (hipertext, cerques, contextualitat, indexat, bookmarks, història ...)
• tutories, demos (utilitzar multimèdia)

Suport online

• xarxes e-mail
• FAQs
• fòrums
• news

4.5 Dispositius

4.5.1 Teclat

Disposició del teclat (màquines d'escriure)

• 1870, QWERTY (Sholes)
• Resultat de temps de disseny amb els usuaris, evitar bloqueig de lletres, les dels parells més usats separades
• Alternatives: Dvorak més usades millor col·locades (evitar bloqueig ja no és necessari) (1920), guanys 10%; ABCDE, fàcil de retenir. No han estat acceptades

Altres

• tamany, separació, concavitat, mate (llum)
• conservar "mecànica": desplaçament, força, realimentació auditiva i tàctil
• algunes són més grosses, necessiten indicadors, ...
• bon exemple de les qüestions de disseny
• tecles de funció (on), teclat numèric addicional
• tecles de moviment (disposició, repetició, ...)

4.5.2 Dispositius per a senyalar

Tasques

• seleccionar (d'un conjunt de coses, en un menú, identificar un fitxer o directori, una part d'un dibuix, ...)
• posicionar (un punt en un espai, una finestra, desplaçant un bloc de text o una part d'un dibuix, ...)
• orientar (indicar una direcció de l'espai, rotar un objecte, ...)
• camí (per ràpida successió de seleccions, posicions i orientacions, ...)
• quantificar (especificant valors en una escala, ...)
• també utilitzat en text, ...

Exemples de dispositius

• directes:
• llapis de llum (permet apuntar a un punt de la pantalla, i du botó de control)
• pantalla tàctil (tocant amb els dits, operacions semblants a ratolí, dificultats, ...)
• indirectes
• ratolí amb botons, molt popular
• trackball
• joystick
• tauleta gràfica
• touchpad (pantalla tàctil + visibilitat en pantalla)

Comparar dispositius

• factors humans (errors, aprenentatge, precisió, rapidesa, satisfacció, ...)
• altres (cost, durabilitat, espai, pes, ergonomia, ...)
• els directes són més ràpids però menys precisos, les tauletes són molt útils quan no s'ha d'utilitzar el teclat, ratolí molt ràpid, tecles de cursor útils quan hi ha molta mescla de teclejar i senyalar

Llei de Fitts

• Temps per a senyalar amb precisió = C1 + C2*index de dificultat + C3*log (Distància /Amplària)

4.5.3 Veu i so

El reconeixement de veu pot utilitzar-se per a entrada

• limitacions en la tecnologia actual, soroll ambient, canvi d'usuari
• molt interessant per a discapacitats, per a canvi de paradigmes, quan les mans estan ocupades
• per a tasques diferents (entrada de dades per veu, edició per teclat, ...)

• problema de soroll en ambients compartits
• poc "humana", intel·ligent, millorant

• tons com a entrada i sortida
• re-alimentació, avisos, ...
• context

4.5.4 Imatge i Vídeo, Impressores

• Avantatges: rapidesa, tamany, resolució, silenci, no hi ha paper, poc cost, fiabilitat, gràfics i animació
• Possibles problemes de salut
• generalment són dispositius RGB basats en CRT, o LCD (baixant cost i millorant); LEDs, pannells de plasma

• els scanners juntament amb OCR poden servir per a entrada de text

Les impressores són també dispositius de sortida

•  Actualment hi ha molta varietat: matricials, tinta, termals, làser, fotogràfics, ...
• Paràmetres de variabilitat són: rapidesa, cost, tamany, silenci, qualitat, varietat d'entrades i sortides, ...

4.6 Guies més detallades de disseny

• Diàleg senzill i natural
• Parlar el llenguatge de l'usuari
• Minimitzar la càrrega de memòria de l'usuari
• Consistència
• Re-alimentació
• Sortides clarament marcades
• Dreceres (pels usuaris experimentats)
• Missatges d'errors bons
• Prevenció d'errors
• Ajuda i documentació

4.6.1 Principi 1 (i més bàsic): Conèixer l'usuari i l'ús

Perfils d'usuari o d'ús

Primerencs

Experts ocasionals

Experts usuals

...

Característiques dels usuaris

Edat

Gènere

Capacitats/discapacitats

Educació

Antecedents culturals o ètnics

Formació

Motivació

Metes

Personalitat

....

Perfils de tasques

Descomposició en tasques de nivell intermig i accions atòmiques seguides de freqüències d'ús

Matriu usuaris - tasques

4.6.2 Dissenyar d'acord amb les següents regles

Analitzar els estils d'interacció

Manipulació directa

Selecció per menú

Formularis

Llenguatges de comandaments

Llenguatge natural

Consistència

Terminologia

Finestres automàtiques (prompts)

Menús

Finestres d'ajuda

Color

Diagramació

Tipus de lletra

...

Subministrar re-alimentació informativa (i no insultant!)

Dissenyar de forma tancada els diàlegs

Agrupar seqüències d'accions

Principi, mig i final dels diàlegs

Preveure l'error i gestionar-ho de forma senzilla

Permetre la reversibilitat d'accions

Recolzar el control dels usuaris

Reduir la càrrega de memòria

Permetre als usuaris experts dreceres específiques

4.6.3 Visualització

Organitzar la visualització i entrada de dades

De forma consistent

Facilitant l'assimilació eficient

Minimitzant la memòria

Control de l'usuari

Compatibilitzant l'entrada i visualització

Cridar l'atenció de l'usuari

intensitat

marcat

tamany

tipus de lletra

color

so

moviment

4.6.4 Equilibrar automatització i control

Agents (knowbots) i modelització de l'usuari

Els agents haurien de conèixer a l'usuari: inferir tasques repetides, desenvolupar tasques amb poca guia, reaccionar davant situacions noves, ...

Alternativament: fer seguiment de l'usuari, adaptar el sistema a l'usuari

Les dues coses són molt complicades

Control de l'usuari

Dona satisfacció

Millorar les decisions per pannells de control (estils, visualització, ...)

Referències

---