Guia Completa de Disseny Centrat en l'Usuari (DCU), UX i Usabilitat

Disseny Centrat en l'Usuari (DCU)

A continuació, es detallen els aspectes més rellevants del Disseny Centrat en l'Usuari (DCU).

Principis Fonamentals del DCU

• Inclusió activa dels usuaris: L'extensió de la participació dels usuaris i el moment en què se'ls ha d'involucrar depèn de la naturalesa de les activitats de disseny. Això també afavoreix l'acceptació del producte final, ja que els usuaris finals es poden sentir compromesos.
• Iteració de solucions potencials: Un disseny iteratiu implica el seguiment del feedback dels usuaris. A més, l'usuari ha d'intentar realitzar les tasques reals (factibles) utilitzant el disseny que presenta solucions potencials i, finalment, el seu feedback ha de servir per desenvolupar (o modificar) un nou disseny més endavant.

Holisme en el Disseny

L'holisme (és a dir, que és part d'un tot; en aquest cas, portar el disseny a investigar o implicar-se completament) és un concepte creat el 1926 per Jan Christian Smuts, que el descriu com "la tendència de la natura d'utilitzar una evolució creativa per formar un tot que és més gran que la suma de les seves parts".

Definició i Introducció al DCU (Tres Disciplines)

Es pot considerar com l'aplicació pràctica de la disciplina de la Interacció Persona-Ordinador (IPO), la usabilitat i l'experiència d'usuari (UX).

Interacció Persona-Ordinador (IPO/HCI)

La Interacció Persona-Ordinador (IPO), coneguda en anglès com Human-Computer Interaction (HCI), és definida per l'Association for Computing Machinery (ACM) com una disciplina relacionada amb el disseny, avaluació i implementació de sistemes informàtics interactius per a l'ús d'éssers humans, i amb l'estudi dels fenòmens més importants amb els quals està relacionada.

El DCU en Projectes: Filosofia i Enfocament

El DCU en projectes és una forma de planificar, gestionar i dur a terme projectes de creació i millora en la implementació de productes interactius. També és considerat una filosofia o enfocament de disseny segons el qual, qualsevol activitat ha de tenir en compte PER A QUI ES DISSENYA i el CONTEXT D'ÚS que ha de tenir.

Professionals del Disseny d'Interacció

La finalitat dels professionals del disseny d'interacció rau en l'aproximació a com dissenyar productes interactius que tinguin sempre en compte les necessitats i preferències de les persones.

Les 5 W i una H del DCU

• Què (What): Què és el disseny centrat en l'usuari, els seus orígens i disciplines relacionades.
• Per què (Why): Els objectius i beneficis del DCU.
• Com (How): Els principals mètodes del DCU, així com alguns recursos.
• Qui (Who): Els rols dels diferents professionals del món del DCU i els personatges més coneguts.
• Quan (When): Quan aplicar el DCU.
• On (Where): Empreses i àmbits on s'aplica el DCU.

Què és el Disseny Centrat en l'Usuari (DCU)?

1. És una aproximació al disseny de productes i aplicacions que situa l'usuari al centre de tot el procés. El DCU és el leitmotiv per garantir l'èxit del producte, tenint en compte l'usuari en totes les fases del disseny.
2. El terme neix al laboratori d'investigació de Donald A. Norman a la Universitat de Califòrnia de San Diego (UCSD). Es va expandir després de la publicació del llibre User-Centered System Design: New Perspectives on Human-Computer Interaction.
3. El DCU té una importància creixent en productes tecnològics i implica l'usuari en el desenvolupament i en totes les fases.
4. L'objectiu del DCU és la creació de productes que els usuaris trobin útils i usables, abastant les seves necessitats i tenint en compte les seves característiques.
5. Què és clau en el DCU? El procés i les etapes o fases, ja que ajuden a tenir en compte les persones que utilitzen els productes o sistemes interactius. Les etapes es duen a terme de manera iterativa fins a assolir els objectius desitjats.
6. Pilars del DCU: Es basa en un model de procés que es divideix en fases. Aquestes es realitzen de manera iterativa: Interacció, Usuaris i Etapes.

Fases en un Projecte de DCU

Les fases principals són: Recerca i anàlisi d'usuaris, Disseny i Avaluació.

Interacció com a Pilar del DCU

La interacció és un dels pilars clau del DCU.

Recerca i Anàlisi d'Usuaris

Aquesta fase (que inclou el mostreig) permet recollir els requisits d'usuari. És una etapa clau en qualsevol procés de DCU. Si no es coneix els usuaris que utilitzaran el producte, és impossible obtenir una resposta adequada a les seves necessitats i desitjos, tenint en compte les seves limitacions i característiques.

El context d'ús és un altre aspecte important. Les metodologies de DCU relacionades amb la recollida de requisits d'usuaris es basen en l'observació dels usuaris en el seu context natural. Aquesta consideració com a element clau és més rellevant amb les tecnologies mòbils i ubiques.

Disseny i Avaluació Iteratius

Les fases de disseny i avaluació són posteriors a la recerca d'usuaris i són essencialment repetitives. Els requisits d'usuari es tradueixen en perfils, persones (arquetips), escenaris o anàlisis de tasques. Tot això alimenta la fase inicial de disseny (disseny conceptual).

El disseny conceptual del producte o aplicació es plasma en maquetes o prototips (testers) que van evolucionant amb diferent grau de fidelitat. En aquest procés evolutiu es duen a terme les avaluacions dels dissenys.

El DCU és una aproximació empírica al desenvolupament de productes interactius. Per a cada tipus de projecte, el procés i els mètodes de DCU que s'utilitzin seran diferents i s'adaptaran a les seves característiques (temps disponible, pressupost, perfils involucrats). Però sempre hi haurà acostaments als usuaris i al context d'ús.

El DCU no és un procés genèric independent del projecte; està estretament vinculat a cada conjunt d'usuaris, funcionalitats i context.

Aspectes Clau a Tenir en Compte en el DCU

1. Saber i tenir en compte que l'usuari no ets tu ni el client: Centra la feina en l'usuari del producte, que són les persones que l'utilitzaran i per a les quals dissenyem. L'usuari final és la persona que realment acabarà interactuant amb el producte, no els intermediaris que permetran que l'usuari el pugui usar.
2. El DCU no és agnòstic (incrèdul al respecte): En el procés de DCU sempre es tenen en compte els requisits tant de l'usuari com del client, l'empresa i el producte. Són tres fonts de requisits que alimenten aquest procés de disseny.
3. El DCU no és enginyeria del programari i està allunyat del desenvolupament en cascada d'aplicacions.
4. El DCU no és màrqueting ni estudis de mercat. Les dues disciplines han d'interactuar i retroalimentar-se; no obstant això, l'aproximació a l'usuari i els objectius són diferents.
5. El DCU serveix per descobrir necessitats dels usuaris no cobertes fins al moment: Aquesta disciplina no s'ha de confondre amb el New Product Development propi del màrqueting.

Característiques del DCU

• Útil: El contingut i la informació han de satisfer les necessitats de l'usuari. Per això, el contingut, els sistemes, les imatges, les icones i tota classe de dissenys han de ser útils perquè l'usuari pugui trobar el que busca.
• Usable: La interfície ha de ser un lloc fàcil d'usar on l'usuari pugui navegar fàcilment per ella i obtenir tota la informació que necessita.
• Desitjable: El disseny de la pàgina web ha de crear la sensació de desig, on l'usuari navegui amb aquesta sensació. Per això, es busca un disseny emocional que arribi a les persones.
• Trobable: Una de les característiques clau perquè l'usuari trobi allò que vol. Trobar fàcilment els procediments i dissenys que acompanyin l'usuari a fer i obtenir el producte, servei o informació que desitgi.
• Accessible: Les interfícies han de ser accessibles per a qualsevol usuari, incloent-hi aquells amb discapacitats.
• Fiable: Analitzar com influeixen els elements de la web en els usuaris i preguntar-nos si creuen en el que diem de la web. Per això, cal observar i analitzar els usuaris per veure com els elements de la interfície influeixen sobre ells i si creuen en el contingut.
• Aporta valor: Les empreses amb ànim de lucre i les ONG han de millorar l'experiència d'usuari i la satisfacció envers elles com a resultat final.

Terminologia Relacionada i Conceptes de Valor del DCU

Factors Humans

Disciplina que estudia el paper dels humans en els sistemes persona-màquina i com aquests sistemes poden funcionar bé amb les persones, especialment en relació amb la seguretat i l'eficiència. Aquesta ha estat abordada des de la perspectiva de l'enginyeria i el disseny industrial i ha estat aplicada en sistemes industrials com els controls dels avions, els sistemes industrials i el disseny de cotxes.

Ergonomia

Concepte predecessor al d'IPO. S'usa sovint com a sinònim de factors humans. És la disciplina científica responsable d'entendre les interaccions entre humans i elements dels sistemes, així com la professió que aplica teories, principis, dades i mètodes per dissenyar amb l'objectiu d'optimitzar el benestar dels humans i el rendiment global del sistema persona-màquina. Aquesta associació divideix l'àmbit de l'ergonomia en ergonomia física, ergonomia cognitiva i ergonomia organitzacional.

Interacció Persona-Ordinador (IPO)

Disciplina que estudia la interacció dels humans amb ordinadors i com aquests poden ser dissenyats per ajudar les persones a usar-los eficaçment. La IPO pot considerar-se com un àmbit dels factors humans, aquell que s'ocupa dels factors humans dels ordinadors. És la intersecció entre informàtica, psicologia i disseny, així com altres camps com les ciències humanes i la informació. L'Association for Computing Machinery (ACM) defineix la IPO com la disciplina que s'ocupa del disseny, avaluació i implementació de sistemes informàtics interactius per ser usats per persones, tenint en compte l'estudi de tots els fenòmens relacionats amb aquest ús.

Experiència d'Usuari (UX)

El conjunt de sensacions, percepcions, raons i satisfacció d'un usuari que interacciona amb un producte o sistema. L'experiència d'usuari posa èmfasi en aspectes més relacionats amb l'experiència, l'afectivitat, el significat i els valors de la interacció persona-ordinador, encara que també té en compte les percepcions de l'usuari en relació amb els aspectes més pràctics com la utilitat, facilitat d'ús i eficiència d'un sistema. Al contrari de disciplines precedents, l'experiència d'usuari neix d'una perspectiva menys científica, més subjectiva i més centrada en el plaer que en el rendiment. És un terme molt usat en l'àmbit professional i empresarial.

Usabilitat

Característica de facilitat d'ús, essencialment aplicada al programari, però rellevant per a qualsevol artefacte humà. En general, un producte és fàcil d'usar quan respon bé a la tasca demanada. La facilitat d'ús pot ser quantificada pel temps que es triga a complir la tasca, pel nombre d'errors que es fan, per la rapidesa amb què s'aprèn a usar el sistema i per la satisfacció dels usuaris. L'enginyeria d'usabilitat es refereix al procés de recerca i disseny que assegura una bona usabilitat d'un producte.

Accessibilitat

Concepte relatiu al disseny de productes de manera que totes les persones, independentment de les seves característiques i contextos d'ús, puguin usar-los. L'accessibilitat aconsegueix que les interfícies d'usuari siguin fàcils de percebre, operatives i comprensibles per a persones amb un ampli ventall d'habilitats o amb diferents circumstàncies, entorns i condicions.

Arquitectura de la Informació (AI)

Disciplina que estudia l'organització de la informació i com estructurar-la de la manera més efectiva perquè les persones trobin i usin la informació. L'arquitectura de la informació està centrada en aspectes com la navegació, l'etiquetatge de les pàgines i les seccions, o l'organització general del contingut. L'associació més coneguda és l'Information Architecture Institute.

Disseny d'Interacció (IxD)

Camp d'estudi dels elements amb els quals l'usuari pot interactuar quan usa un ordinador o producte interactiu. L'objectiu és definir el comportament (interacció) d'un artefacte o sistema en resposta a les accions dels seus usuaris. Aquest disseny es focalitza en com l'usuari comunica o interactua amb el sistema i, per això, se centra en aspectes com el flux de la interacció, el diàleg entre persona i ordinador, l'estímul d'entrada amb la resposta i els mecanismes de retroalimentació. Aquest difereix del disseny gràfic en què el seu àmbit d'acció és el comportament, la comunicació o el diàleg presents en qualsevol mitjà. Difereix de l'arquitectura d'informació en el nivell de detall dels productes, per exemple, el comportament d'un formulari o un element de control en una pàgina concreta. L'associació més coneguda és l'Interaction Design Association (IxDA).

Design Thinking

Procés de resolució pràctica i creativa de problemes o aspectes, que té per objectiu millorar el resultat obtingut. És l'hàbit de combinar empatia, creativitat i racionalitat per donar resposta a les necessitats dels usuaris i garantir l'èxit dels negocis. A diferència del pensament analític, aquest és un procés creatiu que es basa a anar construint a partir de diferents idees sense tenir en compte els prejudicis o la por d'equivocar-se. Aquest consisteix en set etapes: definir, investigar, idear, prototipar, triar, implementar i aprendre.

Disseny de Serveis

Camp emergent centrat en la creació d'experiències pensades i dissenyades usant una combinació de mitjans intangibles i tangibles. Aquesta pràctica multidisciplinària té per objectiu oferir una millor experiència als usuaris a partir d'una aproximació holística del servei que reben. Així, el disseny centra la seva activitat en la planificació i organització de les persones i els components com la infraestructura, la comunicació i els materials d'un servei per millorar la seva qualitat, així com la interacció entre el proveïdor del servei i els seus clients, i l'experiència del client.

Enginyeria Kansei

Mètode per traduir els sentiments i impressions de les persones en paràmetres de productes. Aquesta enginyeria va ser proposada als anys 70 pel professor Mitsuo Nagamachi i té per objectiu mesurar els sentiments i establir la relació entre aquests i certs paràmetres d'un producte. En aquells sectors més madurs, com el de l'automòbil, en els quals aspectes més objectius com el rendiment i les característiques tècniques són cada vegada més semblants, les característiques subjectives adquireixen més rellevància en el procés de selecció d'un producte.

Fases per a l'Anàlisi Heurística

1. Definició d'objectius de negoci.
2. Definició d'usuaris.
3. Definició de tasques d'usuari.
4. Disseny de tasques d'usuari.
5. Aplicació de criteris generals i específics.
6. Creació d'informe de recomanacions.
7. Presentació de conclusions finals.

És recomanable que després de l'anàlisi heurística es facin tests amb usuaris per reforçar les conclusions i detectar altres errades més profundes, així com per conèixer què necessiten, com ho volen i quines són les seves satisfaccions i frustracions amb la interfície.

Com Fer un Test d'Usuari

1. Fer una selecció dels participants en el test d'usuari: Un nombre mínim de 5 usuaris, tant familiars com amics o persones que encaixin amb el perfil o prototip de persona. Han de assemblar-se a l'usuari objectiu del lloc web o aplicació que s'intenta presentar. És important que no siguin persones relacionades amb el projecte.
2. L'espai on fer el test: Idealment un laboratori, però qualsevol lloc és bo mentre no hi hagi interrupcions o distraccions. És important tenir un quadern i llapis per a anotacions de camp i enregistrar l'usuari mentre fa les tasques. És imprescindible gravar la seva veu i expressions facials (càmera), així com l'ús de programari que ens permeti gravar la pantalla per recopilar dades sobre la navegació que fa pel lloc.
3. Planificar la prova: Cal definir prèviament les tasques que farà l'usuari, descrivint escenaris d'ús en els quals s'emmarquen les tasques que realitzaran en el test, i redactar narratives per contextualitzar la prova. És important explicar a l'usuari que no se l'avalua a ell, sinó el disseny del producte. L'usuari ha de comentar en veu alta les impressions i el que pensa mentre fa la prova.
4. Formalitzar un informe per extreure les conclusions: Després de la finalització de la prova amb tots els usuaris convocats, s'ha de fer un informe. Aquest ha de ser una síntesi que ressalti les fallades d'usabilitat i les propostes per solucionar-les. Entre els elements més importants que hi ha d'haver destaquen:
   • Tasques realitzades pels usuaris i els resultats.
   • Problemes d'usabilitat detectats i les seves solucions.
   • Destacar les tasques no fetes pels usuaris (bloquejos) i les causes del bloqueig.
   • Llistat de conclusions per cada tasca.

Mòdul 1: Usabilitat

Definicions d'Usabilitat

Definició Col·loquial (J. Preece, 1994)

Sistemes fàcils d'usar i d'aprendre.

Definició Formal (ISO 9241-11)

La mesura en què el producte pot ser utilitzat per usuaris determinats per aconseguir objectius específics amb efectivitat, eficiència i satisfacció en un context d'ús especificat.

• Efectivitat: La precisió i la plenitud amb què els usuaris aconsegueixen els objectius especificats.
• Eficiència: Els recursos emprats en relació amb la precisió i plenitud amb què els usuaris aconsegueixen els objectius especificats.
• Satisfacció: Absència d'incomoditat i actitud positiva en el testeig del producte.

Tipus d'Usabilitat

Usabilitat Subjectiva o Aparent

Indica la usabilitat percebuda o la satisfacció d'ús i és difícil d'entendre i mesurar.

Usabilitat Objectiva o Inherent

Potser la mesura avaluada per observació de l'usuari mentre duu a terme les tasques d'interacció i es pot mesurar mitjançant mètodes tradicionals.

Atributs de Qualitat de la Usabilitat (5)

Satisfacció, errors, memorabilitat, eficiència i aprendibilitat.

Qualitat en Ús

És el grau en què un producte o sistema pot ser usat per un usuari específic per satisfer les seves necessitats per assolir objectius específics amb eficàcia, eficiència, llibertat de risc i satisfacció en contextos específics d'ús.

Model de Qualitat del Producte (ISO)

Classifica les propietats de qualitat del producte en vuit característiques: idoneïtat funcional, fiabilitat, eficiència de rendiment, usabilitat, seguretat, compatibilitat, mantenibilitat i portabilitat.

Beneficis de la Usabilitat

Per a Desenvolupadors

• Reducció de costos de producció.
• Reducció de manteniment.
• Millora de la qualitat del producte.
• Menys suport a l'usuari/client.

Per a Usuaris/Clients

• Major facilitat d'aprenentatge.
• Fàcil ús.
• Treball ràpid i eficient.
• Menys pèrdua de temps.
• Major confiança en el producte.
• Millor qualitat de vida (menys estrès i més satisfacció).

Experiència d'Usuari (UX)

L'experiència d'usuari atén a tots els factors, tant interns com externs de l'usuari i del sistema interactiu, que causin alguna sensació a qui estigui usant un sistema interactiu concret en un context d'ús determinat.

Facetes de la UX

• Facetes transversals: Són aquelles que han de ser aplicades quan s'aplica qualsevol altre aspecte de qualsevol altra faceta.
• Facetes paral·leles: Aquelles que poden aplicar-se de forma individual a un sistema interactiu.

Accessibilitat

Capacitat d'accés i interacció en un sistema o aplicació per a qualsevol tipus d'usuari, independentment de les seves discapacitats i context d'ús. Les persones són diferents entre si; hi ha grups de població amb limitacions de diferents nivells (físiques i cognitives) que poden ser temporals o permanents.

Estàndards Web (W3C)

Són un conjunt de recomanacions del World Wide Web Consortium (W3C), recolzat per altres organitzacions, sobre com crear i interpretar la informació web. La missió del W3C és encaminar la web fins al seu màxim potencial, desenvolupant protocols i pautes que assegurin el seu creixement.

WAI (Web Accessibility Initiative)

Facilita l'accés web, desenvolupant les pautes WCAG, millorant i desenvolupant les eines d'avaluació i reparació, i finalment, mitjançant la formació i conscienciació.

WCAG (Web Content Accessibility Guidelines)

Pautes d'accessibilitat que expliquen com fer el contingut web accessible per a persones amb discapacitats o d'edat avançada. Tenen tres nivells de conformitat: A, AA, AAA.

Mòdul 2: El Factor Humà

Importància del Factor Humà en la Interacció

Conèixer els tipus de perspectives des del punt de vista interactiu que té la persona, el procés de comprensió i els models de memòria. Comprendre que el model de memòria condiciona el disseny d'interfícies i la limitació de la memòria de treball.

Psicologia Cognitiva

Disciplina científica que estudia el sistema de processament de la informació en la ment humana.

• Dins de la psicologia, la cognició és l'adquisició, manteniment i ús del coneixement.
• Dins de la cognició:
  • Memòria Sensorial: Captar i interpretar imatges.
  • Memòria a Curt Termini: Organitzar la informació (requereix repetició per mantenir la informació d'aquestes dues memòries).
  • Memòria a Llarg Termini: Emmagatzemar la informació.

Model de Processament Humà

Podem descriure una persona com un processador d'informació que té dues parts: un conjunt de memòries i processadors, i un conjunt de principis d'operació. A més a més, té tres subsistemes amb mútua interacció: el sistema cognitiu, el sistema perceptiu i el sistema motor.

• Sistema perceptiu: Té sensors i memòries buffer; transforma les entrades en codis que són emmagatzemats.
• Sistema cognitiu: Rep els codis simbòlics del sistema perceptiu, situant-los a la memòria de treball, i usa aquesta i la memòria a llarg termini per prendre decisions.
• Sistema motor: Executa les respostes.

Mòdul 3: Disseny Centrat en l'Usuari (DCU) vs. DCT

Disseny Centrat en la Tecnologia (DCT)

• S'enfoca en l'aplicació i el desenvolupament.
• Tot gira entorn de la tecnologia.
• Es busca la manera més fàcil d'implementar la solució.
• Disseny basat en la modelització.
• Sistemàtic (processos ben definits).
• Disseny basat en mètodes d'Enginyeria del Programari.
• Revisió de l'ús a posteriori i habitualment revisats per tecnòlegs.

Disseny Centrat en l'Usuari (DCU)

• S'enfoca en els usuaris: en l'experiència i el grau de satisfacció de l'usuari.
• Basat en l'opinió de l'usuari.
• Implicació substancial de l'usuari (estudis d'usuaris, disseny participatiu, resposta de l'usuari, proves amb usuaris).
• Es dissenyen iterativament diferents prototips.
• Processos molt variables i informals.
• Disseny basat en l'enginyeria d'usabilitat.
• Orientat per estàndards ISO enfocats en l'usuari.

Normativa ISO Relacionada amb el DCU

ISO 13407: Processos de Disseny Centrat en l'Humà (1999)

Marc teòric per al desenvolupament d'activitats centrades en l'usuari que pot ser adaptat a diversos ambients de desenvolupament. A més, se centra en el procés de desenvolupament de sistemes interactius.

Avantatges del DCU

• Reducció de costos d'entrenament.
• Reducció de l'estrès i increment de la satisfacció de l'usuari.
• Increment de la productivitat i eficàcia.
• Promou la comunicació entre desenvolupadors i usuaris.

Inconvenients del DCU

• S'han d'incloure usuaris i stakeholders (parts interessades alienes).
• No és gaire acceptat implantar un nou ordre, ja que hi ha preferència per conservar el sistema existent.
• Els refinaments iteratius prenen temps i poden ser percebuts com una pèrdua de temps.

Principis Clau del DCU (segons ISO 13407)

• Inclusió activa dels usuaris.
• Iteració de solucions potencials (seguiment del feedback a partir de tasques reals del test d'usuari).
• Equips de disseny multidisciplinaris.

Activitats Clau (ISO 13407:1999)

1. Entendre i especificar el context d'ús.
2. Especificar els requisits d'usuari.
3. Produir solucions de disseny.
4. Contrastar els dissenys amb els requisits.

Enginyeria de la Usabilitat

Mètode que proporciona la manera de procedir organitzadament per incloure la usabilitat en el desenvolupament d'aplicacions interactives.

Model MPlu+a

Model de procés de l'enginyeria de la usabilitat i accessibilitat.

• Tecnològicament independent.
• És aplicable a tot tipus de projectes.
• S'adapta a diferents models mentals i equips multidisciplinaris.
• És simple.
• Segueix els principis del DCU.
• Fomenta el desenvolupament de sistemes evolutiu (iteratiu i incremental).
• Integra la metodologia i formalismes necessaris per a l'Enginyeria del Programari.
• És consistent amb els estàndards de qualitat.

Característiques de MPlu+a

• És simple i flexible.
• Tres pilars (el primer és l'Enginyeria del Programari).
• Organització Conceptual.
• L'usuari.
• Interactivitat.
• Adaptat per a equips multidisciplinaris.

Arquitectura de la Informació (AI)

Diagrama de l'Iceberg de Peter Morville

La informació és una font de coneixement. Però si no està organitzada, processada i disponible per a les persones en un format que els permeti prendre decisions, més que un benefici és un destorb.

Models d'Organització de Continguts (6)

1. Jeràrquica: Comuna i ben entesa. Navegació ràpida. Fàcil expansió.
2. Lineal: Bona per a processos concrets, històries, llistes ordenades.
3. Matriu: Apropiada per a mapes. No ha de reemplaçar altres topologies.
4. Malla completa: Navegació ràpida. Només factible per a llocs petits o seccions d'un lloc major.
5. Arbitrària: Apropiada quan l'estructura no està ben entesa. Bona quan no hi ha una centralització.
6. Híbrida: La més comuna en la pràctica. Necessita fer-la molt clara per no confondre els usuaris.

Prototipatge Contextual

Inclou: esbossos, storyboards, prototips de paper, maquetes, maquetes digitals, storyboard navegacional, vídeos, escenaris (llenguatge natural, storyboard, vídeos, UML), prototip de programari.

Test d'Usabilitat

Procés que permet aprendre dels usuaris el grau d'usabilitat d'un sistema informàtic observant-los mentre l'usen. Elements: usuari, interactivitat, adaptat per a equips multidisciplinaris.

9 Regles per a Icones Clares i Intuïtives

1. Etiquetar sempre les icones, a menys que l'espai sigui limitat.
2. Representar sempre tant l'acció de la icona com l'objecte.
3. Agrupar icones similars juntes.
4. Mantenir l'ordre i la ubicació de les icones consistents.
5. Donar sempre a les icones un motiu visual comú.
6. Evitar l'ús d'icones per a accions abstractes.
7. Evitar usar imatges d'icones que siguin massa metafòriques.
8. Evitar donar a les icones massa detalls específics.
9. Evitar l'ús de perspectives 3D i ombres paral·leles pesades en icones petites.

Disciplines Relacionades amb el DCU i la IPO

Enginyeria del Programari

Estudia tècniques de desenvolupament de programari i procediments d'enginyeria que s'han de saber usar per fer diferents aplicacions, pàgines web o altres interfícies. La relació d'aquesta disciplina amb la IPO és molt important, juntament amb la programació, ja que desenvolupa totes les tècniques especificades perquè es facin realitat.

Programació

Els dispositius són elements físics que per si mateixos no poden fer res. Per això, la programació ens permet indicar com ho han de fer i què han de fer. A més, totes les accions o funcionalitats que realitzen els dispositius es produeixen quan l'usuari interactua amb ell. Perquè això passi, un programador ha indicat una sèrie de respostes, solucions i tècniques.

Disseny

L'estudi i l'activitat del disseny rau en la seva capacitat per obtenir un objecte útil, on es pretén desenvolupar aquest objecte a partir de l'entorn físic de les persones. A més, implica l'emissió i comunicació de missatges visuals, configurant la informació i comunicant-la a partir d'una interfície. Tanmateix, les modes de la societat van canviant i el disseny s'ha d'adaptar.

Antropologia

Investiga i estudia les diferents cultures i societats per descobrir i fer entrevistes per poder analitzar qualitativament cadascuna de les respostes emprades. Ja que analitza i investiga el context on passa l'acció per obtenir conclusions i resultats.

Sociologia

Aquesta disciplina és similar a l'antropologia; realitzen investigacions de cultures a partir d'estudis fets d'aspectes culturals, fent servir l'observació. A més, ha d'entendre l'entorn social, les actituds i els comportaments per tal de poder dissenyar sistemes per a aquells usuaris.

Psicologia

Estudia els estats de la consciència de la persona humana i el seu comportament de manera individual o grupal. Això fa que, a partir de coneixements i teories de com són les persones i com es comporten, i com processen la informació en fer certa acció, proporcioni a la IPO informació sobre les necessitats dels usuaris i el seu comportament. Finalment, ens ajuda a comprovar si les nostres interfícies són efectives.

Ergonomia / Factors Humans

Estudia l'entorn físic on l'usuari farà ús de la interfície. Tanmateix, l'ergonomia defineix i dissenya eines per a diferents tipus d'entorns per tal de millorar l'eficiència i seguretat per crear una bona satisfacció.

Intel·ligència Artificial

Estudi de la intel·ligència artificial humana i els seus mecanismes fins al punt d'imitar-se a ella mateixa. Tanmateix, ha sigut usada en el disseny de tutors, disseny d'interfícies de llenguatge per veu i sistemes experts en interfícies intel·ligents. Per tant, el desenvolupament d'agents per ajudar els usuaris en la navegació en el dispositiu.

Mòdul 4: Anàlisi de Requisits

Què són els Requisits?

Descripció de com el sistema s'ha de comportar, informació sobre el domini de l'aplicació, restriccions operatives del sistema i les especificacions de les propietats o atributs del sistema. Amb aquests es pretén esbrinar què és el que la gent vol d'un sistema i entendre quines són les necessitats en termes de disseny.

Problemes en la Comunicació Humana per a l'Anàlisi

La pràctica de l'anàlisi de requisits s'enfronta amb els problemes propis de la comunicació humana:

• Coneixement tàcit: Dificultat o impossibilitat de descriure el procés que seguim per fer les accions que fem de forma freqüent.
• Ambigüitat: Expressar conductes i pensaments de forma incorrecta. De manera que obtenim expressions ambigües i enigmàtiques que donen lloc a possibles interpretacions diverses.
• Actituds i opinions particulars: Aspectes que influeixen en la manera de fer determinades acciones i de dirigir les opinions sobre les coses.

Objectius de l'Anàlisi de Requisits

1. Capturar un conjunt de requisits dels usuaris.
2. Analitzar detalladament els requisits dels usuaris, trobar totes les implicacions dels mateixos i comprendre-les.
3. Especificar com aquests requisits hauran de manifestar-se durant el disseny del sistema.
4. Completar l'anàlisi dels requisits amb un conjunt de restriccions acceptables en termes temporals i econòmics.

Perfil d'Usuari

S'ha d'obtenir una descripció de les característiques més rellevants de la població potencial que utilitzarà la interfície d'usuari que dissenyarem: grau de coneixement/ús d'equips/programes informàtics, experiència professional, nivell d'estudis, experiència al lloc o tipus de treball, entorn social, etc.

Buyer Persona / Públic Objectiu

Arquetips d'usuaris ideals basats en dades reals i investigació.

Entrevistes o Qüestionaris

Mètodes per recollir informació directa dels usuaris.

Model Mental

Durant l'aprenentatge, una persona adquireix coneixements de les relacions estructurals i el funcionament del sistema amb el qual està interactuant.

Perfil de l'Entorn

L'entorn on es realitza un determinat treball influeix directament en la manera en què aquest es fa.

Disseny Conceptual (CD)

És un mètode per entendre millor l'entorn de treball dels usuaris i les necessitats que hauran de complir els sistemes informàtics.

• Principi: Observar els usuaris a l'entorn de treball i intentar captar tota la informació rellevant.
• Objectiu: Entendre la complexitat de l'entorn i les necessitats que ha de complir el sistema.

Mòdul 5: Prototipatge

Importància dels Prototips

Els prototips constitueixen una eina imprescindible per aconseguir els objectius. Són documents, dissenys o sistemes que simulen o tenen implementades parts del sistema final. És una eina útil per fer participar l'usuari en el desenvolupament i poder avaluar el producte ja en les primeres fases de desenvolupament.

Prototip d'Interfície d'Usuari

És un prototip fet amb la finalitat d'explorar els aspectes interactius del sistema (Rosson and Carroll, 2002), incloent-hi la usabilitat, accessibilitat o la seva funcionalitat.

Tipus de Prototips

• Baixa fidelitat: Són ràpids, barats i dissenyats per obtenir informació de l'usuari el més ràpid possible.
• Alta fidelitat: Són més costosos i impliquen generalment programació; són més propers al disseny final.
• Prototips verticals: Inclouen una part de les funcionalitats; serveixen per fer avaluacions més verídiques.
• Prototips horitzontals: Interfície completa sense funcionalitats subjacents; simulació amb la qual no es pot fer treball real.
• Sketching (Esbós): Per a etapes inicials, per representar idees.
• Prototip de paper: Gran velocitat i flexibilitat.
• Maquetes digitals: Són representacions de qualitat en format digital.
• Whiteboarding (Pissarra Blanca): Tècnica col·laborativa per esbossar idees.
• Wireframes: Guia visual que representa l'esquelet de les interfícies del sistema interactiu que estem dissenyant.
• Prototip incremental i evolutiu: Es construeix i es refina per etapes.
• Prototip de programari: Versió funcional, encara que limitada, del sistema.
• Prototips situacionals: Escenaris. Els escenaris no són pròpiament prototips, però poden considerar-se com a tals quan el seu fet principal és descriure el context d'ús. N'hi ha de dos tipus: de tasques i de futur.
• Storyboarding (Guió Gràfic): Fer un guió gràfic de les teves idees t'ajuda a deixar-les clares a tots els implicats en l'equip.
• Videoprototipatge: Rodar o gravar un vídeo permet desenvolupar un escenari en el qual, gràcies a l'ús de tècniques de pre i postproducció, poden semblar reals funcionalitats i sistemes que només són idees, estan en fase molt inicial o són impossibles de realitzar.

Mòdul 6: Avaluació de la Usabilitat i UX

Conceptes Preliminars d'Avaluació

L'avaluació és una part bàsica del disseny d'un sistema centrat en l'usuari.

Mètodes d'Avaluació de la Usabilitat

Inclouen mètodes d'avaluació per inspecció, per indagació, per test i en laboratori d'usabilitat.

Avaluació Heurística

La comunitat IPO presenta l'avaluació heurística com un mètode d'avaluació de la usabilitat per inspecció que ha de ser dut a terme per avaluadors experts a partir d'uns principis anomenats heurístics, prèviament establerts.

Objectius de l'Avaluació Heurística

Mesurar la qualitat de la interfície d'un sistema interactiu en relació a la seva funcionalitat per ser après i usat per un determinat grup d'usuaris en un context determinat d'ús. L'anàlisi dels resultats genera dades quantitatives i qualitatives.

Entrevistes

Entrevistar els usuaris respecte a la seva experiència amb un sistema interactiu resulta una manera directa i estructurada de recollir informació. A més, les qüestions es poden variar per tal d'adaptar-les al context.

Qüestionaris

Són menys flexibles que les entrevistes, però poden arribar a un grup més nombrós i es poden analitzar amb més rigor. Existeixen dos tipus de preguntes: obertes i tancades (o generals). A part, hi ha qüestionaris pre-test i post-test.

Mòdul 7: Accessibilitat

Definicions Clau

• Accessible: Fàcil accés o tracte, fàcil comprensió i intel·ligible.
• Accessibilitat: Capacitat que quelcom sigui accessible.
• Discapacitat (persona amb): Que té impedit o entorpit algun dels seus actes quotidians considerats normals, per alteració de les seves funcions intel·lectuals o físiques.
• Discapacitat (condició): Qualitat de discapacitat.

Grups de Discapacitats

Visuals, auditives, motrius i cognitives.

Visions del Disseny Accessible

• Disseny universal / per a tots.
• Disseny adaptat a la persona.

Tecnologia d'Assistència

Terme que agrupa tots els equips, dispositius, instruments o programes utilitzats per incrementar, mantenir o millorar la qualitat de vida i l'autonomia de les persones que tenen algun tipus de discapacitat.

WCAG (Web Content Accessibility Guidelines)

Les Pautes d'Accessibilitat del Contingut Web (Web Content Accessibility Guidelines, WCAG) fan referència a com fer accessible la informació continguda en una pàgina web: text, imatges, formularis, vídeos, so, etc. L'any 1999 es van crear les pautes WCAG 1.0 i les WCAG 2.0 l’any 2008 (actualitzades posteriorment).

Principis de les WCAG

• Perceptible: La informació i els components de la interfície d'usuari han de ser mostrats als usuaris en formes que puguin entendre.
• Operable: Els components de la interfície d'usuari i la navegació han de ser manejables.
• Comprensible: La informació i les operacions dels usuaris han de ser entenedores.
• Robustesa: El contingut ha de ser prou robust perquè pugui ser ben interpretat per una gran varietat d'agents d'usuari, incloent-hi tecnologies d'assistència.

Mòdul 8.2: Disseny de la Interfície d'Usuari (UI)

Característiques Principals d'una Interfície

Elements interactius i simbologia, consistència, elements d'ubicació, navegació, identitat, relació amb els factors humans, prototipatge (testabilitat i ús d'eines).

Consistència en la UI

Es refereix a si els diferents estats per on passa la interfície són coherents i si es respecta la jerarquia d'informació establerta. L'enfocament coherent: la mateixa oferta de contingut es replica en tots els dispositius amb alguns ajustos per adaptar-se al caràcter de cada dispositiu (factor de forma, la mida de pantalla, el model d'interacció i sensors també poden ser visuals).

Disseny de 3 columnes (exemple d'adaptació):

1. El contingut de la pàgina i els elements de disseny són coherents però no idèntics en tots els dispositius.
2. Dues raons clau per a la coherència i els estàndards: Reduir l'aprenentatge i eliminar la confusió.
3. Cinc maneres d'obtenir coherència: l'elecció d'idioma, aplicar elements d'IU consistents, seguir convencions establertes, dissenyar sobre les expectatives de l'usuari i crear una imatge coherent.

Elements d'Ubicació

Els usuaris sempre haurien de saber en quin lloc o aplicació es troben. També cal considerar que els usuaris no sempre entren per la "porta principal".

Navegació

Es refereix a si els diferents estats pels quals passa la interfície són coherents amb l'arquitectura de la informació i si es respecta la jerarquia d'informació establerta.

Identitat

Tot sistema o aplicació ha de tenir elements que permetin a l'usuari conèixer-ne la identitat (nom, logotip, alguna cosa que apropi l'usuari a saber què fa i per a què serveix el sistema).

Relació amb Factors Humans en Prototipatge

• Testabilitat: Capacitat d'execució de les diferents tasques que el sistema ofereix a l'usuari.
• Ús d'eines: Eines adequades per crear i provar prototips.

Elements Importants en una UI

Espai d'interacció, color, tipografia, icones, menús, to de missatge, formularis.

Disseny Responsive (Adaptable)

Manera de desenvolupar propietats web de manera que el dispositiu on s'usen determini la forma en què es mostrarà el lloc.

Principis del Disseny Responsive

Fluid grid (graella fluida), ús d'imatges fluides i consultes de mitjans (media queries).

Característiques del Disseny Responsive

Per al disseny responsive, la mida absoluta no funciona. S'usa la idea de mides relatives en lloc de mides absolutes, usant aquesta fórmula que s'implementa amb CSS:

Fórmula: mida_objectiu / context_objectiu = mida_relativa

Imatges Fluides (CSS)

La forma més fàcil de manejar-les és escalant-les per ajustar-les al contenidor usant CSS: img { max-width: 100%; }. Això li diu al navegador que la imatge ha de tenir com a màxim el 100% del seu valor de píxel i que ha d'escalar d'acord amb el seu contenidor.

Media Queries (Consultes de Mitjans CSS)

Estan dissenyades per alterar el disseny del lloc quan es compleixen certes condicions. Exemple CSS: @media screen and (min-width: 480px) { /* ...estils per a pantalles més grans aquí... */ }

Creació d'una Paleta de Colors

Elegir un color base, crear una paleta de colors cohesiva, trobar el teu accent, agregar grisos i crear grisos harmoniosos.

Tipografia en UI

La bona tipografia suporta l'estructura visual, transmet el missatge amb major transparència i complementa el disseny visual.

Pautes per a una Bona Usabilitat Tipogràfica

• Mantenir la quantitat de fonts al mínim.
• Usar fonts sans-serif (pal sec); les serif (amb gràcies) només per al contingut si és adequat.
• Assegurar-se que la mida del text és adequada.
• Per al contingut, ús de majúscules mixtes (tipus frase).
• Usar fonts estàndard per a fonts de llocs web.
• L'espai entre caràcters (tracking) no ha de minimitzar-se excessivament.
• Limitar l'ús de diferents colors per a les fonts.
• No usar blau per al contingut (es reserva per a enllaços).
• Evitar text amb vermell o verd per problemes de llegibilitat i accessibilitat (daltonisme).
• No usar colors iguals o similars per a text i fons (baix contrast).

Consultes de Mitjans (Media Queries)

Les consultes de mitjans són principis del disseny responsive, dissenyades per alterar la disposició del lloc quan es compleixen determinades condicions. Objectius: optimitzar l'espai de pantalla, maximitzar l'eficiència i preservar el comportament de navegació esperat.

"Catch" (Captar l'Atenció)

L'usuari ha de navegar per obtenir més informació, però de vegades encara no saben de què volen més informació. Cal permetre als usuaris fer més amb menys esforç.

Disseny de Menús

Fer-los visibles, en un lloc conegut. Els enllaços han de semblar interactius (contrast de color, pes visual). Evitar menús massa petits. Comunicar la ubicació actual on es troba l’usuari dins el menú. Coordinar menús amb tasques d’usuari i fer que sigui fàcil de manipular.

Disseny de Comunicació (To de Veu)

El to de veu d'un lloc web comunica com se sent una organització sobre el seu missatge. El to de qualsevol contingut es pot analitzar en quatre dimensions: humor, formalitat, respecte i entusiasme (Divertit vs. Seriós / Formal vs. Casual / Respectuós vs. Irreverent / Entusiasme vs. Realista).

Disseny de Formularis (10 Pautes)

1. Feu-ho breu.
2. Agrupeu visualment les etiquetes i els camps relacionats.
3. Presenteu els camps en una sola columna.
4. Utilitzeu una seqüència lògica.
5. Eviteu el text de marcador de posició (placeholder) com a etiqueta.
6. Relacioneu els camps amb el tipus i la mida de l'entrada.
7. Distingiu els camps opcionals i obligatoris.
8. Expliqueu qualsevol requisit d'entrada o format.
9. Eviteu els botons de "reiniciar" i "esborrar".
10. Proporcioneu missatges d'error específics i molt visibles.

10 Principis Generals d'Usabilitat Web de Jakob Nielsen

Jakob Nielsen va proposar el 1995 deu principis generals d'usabilitat web, que constitueixen la fonamentació per dissenyar llocs "user-friendly", és a dir, centrats en els usuaris i optimitzats per millorar les seves experiències.

Història de l'Art i Avenç Tecnològic en el Disseny

Fites Històriques i Moviments Artístics Relacionats

• Art Rupestre: Ús de pigments. (Exemple: París com a centre posterior).
• Renaixement (1400-1600): Òptica, millora del pigment.
• Romanticisme (1790-1880): Inici de la proto-abstracció. Mètode de reproducció de gravat.
• Daguerreotip (1839): Neix la fotografia.
• Impressionisme (1872): Moviment pictòric que trenca la idea de representar la realitat com és (llibertat en la pintura que fa que els artistes comencin a treballar amb taca i color).
• Art Nouveau (1890).
• Cubisme (1907-1917): Tècnica associada a lleis científiques relacionades amb les teories d'Einstein. Fet: la quarta dimensió relacionada amb la física i Einstein.
• Futurisme (1909-1920): Marinetti, Manifest Futurista. Influenciat pels avenços industrials i científics de l'època. Trencament, però París continua sent un centre.
• Dadaisme (1916): Primer moviment d'art conceptual.
• Surrealisme (1924-1966): Moviment artístic i relació amb la psicoanàlisi. Fora de París - Segona Guerra Mundial (1940-50).
• Nova York com a centre (1940-50): Llibre Com Nova York va robar la idea d'art modern de Serge Guilbaut.
• Expressionisme Abstracte (1943-60): Dins de l'Informalisme. Importància de la ciència i l'energia nuclear. Moment més dur de la Guerra Freda (conflicte EUA i URSS). Aquest moviment acaba pràcticament amb la mort de Pollock. Ús de tècniques de reproducció d'obres en massa amb la industrialització. Ciència Nuclear.
• Pop Art (1955-80): "La Fàbrica" (The Factory, Andy Warhol).
• Art Acció - Art Conceptual (1950-60-70): John Cage es converteix en el pare de les obres del moviment. Obra de Merce Cunningham amb elements d'interacció digital. Inici de la interacció digital: Gordon Pask - Cybernetic Serendipity (1968, no 1960).
• Fluxus (1960-70): Moviment que va néixer als EUA, creat per l'hongarès George Maciunas. Primeres videogravadores. Nam June Paik, primer artista que crea instal·lacions on hi ha interacció entre la pantalla d'imatge, el so... Pare del videoart. Altres artistes: Bill Viola, Marina Abramović.
• Postmodernitat (1970-75 en endavant): Primers ordinadors personals. Les primeres obres es representaven amb insectes realitzant accions (possible referència a obres específiques). Anys 80: Primers ordinadors PC/Macs.
• Dècada dels 90: Boom d'obres digitals. Artista: Christina Somos (possiblement referència a Char Davies amb Osmose/Ephemere, o altres artistes digitals).

Temes de Francesca: UX i Disseny

Experiència d'Usuari (UX) Segons Francesca

El disseny enfocat a l'usuari ens ajuda a crear aquest tipus d'experiències positives. Es dissenya d'acord amb les necessitats que tenen els usuaris en determinades situacions. NO es dissenya segons el que la tecnologia pot fer.

Disseny per a Persones Creatives

Entenem el disseny com un mitjà per resoldre problemes i fer que el món sigui una mica millor cada dia. O bé, almenys, evitar l'impacte negatiu dels productes i experiències digitals.

UX no és Usabilitat

L'Experiència d'Usuari (UX) és un concepte més ampli que la usabilitat.

7 Factors que Afecten el Disseny UX (Peter Morville)

Segons Peter Morville, són: útil (useful), usable, trobable (findable), creïble (credible), desitjable (desirable), accessible i valuós (valuable).

Cas d'Estudi: Photopills

Aplicació per a mòbils creada per un equip d'emprenedors menorquins: Rafael Pons (el "Bard"), Germán Marquès (desenvolupador) i Joan Pons (dissenyador). Neix el 2010 com a projecte. El 2013 treuen la primera versió. Va guanyar el primer premi a la fira Innovem Menorca.

Dades de Photopills

• 2015: 24.000 descàrregues en més de 90 països.
• 2020: Més de 100.000 descàrregues a Google Play.

Punts Forts de Photopills

• Creada per un usuari específic (fotògrafs).
• Pensada i dissenyada coneixent les necessitats i els desitjos de l'usuari: fer bones fotos.
• Dona resultats de satisfacció.
• Aquesta app, des de la primera foto, té usuaris entusiastes que creen fotos que abans eren més difícils d'aconseguir.
• Dona valor.
• Fomenta l'aprenentatge.
• Crea comunitat.

Usabilitat: Conceptes Addicionals (Francesca)

Què és la Usabilitat? (Revisitat)

És un sistema de mesurament de la qualitat de l'experiència que es deriva de la interacció amb una aplicació.

Dimensions de la Usabilitat (4)

• Dimensió Empírica: Es basa en l'experiència i l'observació dels fets. La usabilitat d'una aplicació interactiva ha de poder mesurar-se a partir d'una sèrie de paràmetres d'eficiència i ús.
  • Característiques: Facilitat d'ús, eficiència (l'usuari ha de percebre que invertir temps i aprenentatge aporta benefici), fàcil memorització (sensació de control), minimització d'errors (preveure errors i proporcionar mecanismes de reparació integrats al sistema) i satisfacció.
• Dimensió Dependent: L'acceptabilitat d'un sistema depèn de l'equilibri entre usabilitat i utilitat.
  • Factors (3): Usabilitat percebuda (complexitat d'ús), utilitat percebuda (resultats obtinguts) i acceptabilitat (punt d'equilibri).
• Dimensió Relativa: Un sistema usable ha de tenir en compte condicions (relacionades amb l'usuari/ària) i contextos (possibilitat de canvi de condicions).
  • Condicions (4):
    1. Condicions Personals: Cal atendre al perfil d'usuari i les seves necessitats.
    2. Condicions Temporals: Comptar les hores d'interacció que dedica.
    3. Condicions Espacials: Saber quin és l'emplaçament d'interacció habitual.
    4. Condicions de Recursos: Conèixer les característiques del seu accés.
• Dimensió Ètica: L'usuari ha de poder gaudir de l'experiència d'interacció sense perjudicis de la seva condició.

Prototipatge: Visió Addicional (Francesca)

Què Permet un Prototip?

• Fer tangibles idees fins ara abstractes.
• Observar, mesurar i analitzar el rendiment.
• Valorar el comportament o grau d'interacció.

Fases d'un Prototip Digital

Wireflow (flux de navegació bàsic, similar a diagrames de flux amb decisions sí/no) -> Userflow (flux d'usuari detallat) / Flowchart (diagrama de flux) -> Wireframes (esquemes de pantalla, ex: amb Figma) -> Prototip interactiu (treball final).

Avaluació de Prototips (Francesca)

Per a Què Serveix l'Avaluació?

Serveix per a recollir informació empírica, considerar les opcions dels usuaris i prendre decisions estratègiques. Això dona pas a: producció, iteració o abandonament. Ha de ser un punt mitjà entre factibilitat, desitjabilitat i viabilitat (triangle de la innovació).

Tècniques de Recollida de Dades

Principis de Nielsen per a l'Avaluació Heurística

• Visibilitat de l’estat del sistema.
• Adequació entre el sistema i el món real.
• Llibertat i control per part de l’usuari/ària.
• Consistència i estàndards.
• Prevenció d’errors.
• Reconeixement abans que record.
• Flexibilitat i eficiència en l’ús.
• Disseny estètic i minimalista.
• Ajuda sobre els errors i recuperació.
• Ajuda i documentació.

Test amb Usuaris

Objectiu: Obtenir resultats empírics per a l'equilibri de dos valors fonamentals.

Procés del test amb usuaris:

1. Selecció de participants.
2. Guionització de tasques.
3. Realització del test.
4. Qüestionari post-test.
5. Realització de l'informe final.

Guia d'Estil Web

La guia d'estil d'una web és el document que recull, a través d'una sèrie d'indicacions gràfiques i referències al codi, com es resolen els elements i components presents a la interfície de la pàgina.

Eficàcia d'una Guia d'Estil

1. És una eina molt eficaç perquè el treball en equip es desenvolupi de forma ordenada i homogènia.
2. És l'enllaç directe entre dissenyadors, desenvolupadors i creadors de continguts.

Què Fa una Guia d'Estil?

• Fa conscient a un dissenyador gràfic i a un desenvolupador de la necessitat d'optimitzar estils per a fer una web més àgil i usable.
• Representa la garantia de futur perquè la pàgina creixi de forma coherent cada vegada que convingui fer una ampliació.

Elements d'una Guia d'Estil

• Retícula: Descripció de la retícula usada detallant l'ample total, la mesura de les columnes i la mesura dels canals (gutters).
• Paleta Cromàtica: Referència directa als colors usats, discriminant aquells que s'han usat per a la tipografia dels que s'apliquen al fons (de la pàgina o de mòduls determinats).
• Jerarquia Tipogràfica: Detall de les famílies tipogràfiques, així com de les mides i pesos que s'han assignat a cadascun dels elements tipogràfics.
• Components d'Interfície: Elements interactius propis de l'entorn (framework) que s'han anat desenvolupant, representats en estat normal, activats i visitats: botons, enllaços, sliders, formularis, etc.

Tipografies per a Web

Escollir tipografies que estiguin optimitzades per a les pantalles. Tenen formes obertes, corbes generoses, aptes també amb mida petita. Exemples: Inter (Figma, molta varietat i pesos), Nobile Font (Unsplash, possiblement error, Unsplash és de fotos), Fira Sans, Roboto, San Francisco (Apple), Georgia, Open Sans.

Definir amb facilitat una escala tipogràfica. No usar tipografies de menys de 12-14px per al cos de text (la referència original a "3PX" és un error).

Color en Disseny Web

Eina recomanada: Generador d'escales de color (exemple: hihayk.github.io/scale/).

Sistemes de Disseny Atòmic (Exemple: Instagram)

Basat en la metodologia d'Atomic Design de Brad Frost:

• Àtoms: Elements bàsics com lletres, icones, colors, etc.
• Molècules: Grups d'àtoms que funcionen junts, com un camp de cerca amb botó, o un grup d'icones (m'agrada + comentar + enviar + guardar).
• Organismes: Components més complexos formats per molècules i/o àtoms, com la capçalera d'un perfil (nom de persona + imatge + botons + comentaris...).
• Plantilles (Templates): Estructures de pàgina que mostren la disposició dels organismes. Com una captura de pantalla de l'inici d'Instagram sense el contingut real.
• Pàgines: Instàncies específiques de les plantilles amb contingut real.