DISSENY D’INTERFÍCIES

DISSENY CENTRAT EN L’USUARI

Estils d’interacció

- Estils lingüístics – Introducció de dades mitjançant el teclat alfanumèric (MS-

DOS)

- Estils contextuals – Actuen en referència al context de l’usuari.

o Finestres de diàleg. Ex. Alertes

o Menús. Ex. Desplegables

o Formularis

- Manipulació directa – Els objectes són seleccionats i manipulats directament

amb el punter. Representen el món real. Resposta immediata.

Fases del procés de disseny centrat en l’usuari

- Anàlisi

o Es reuneix informació

Gènere i suport de l’aplicació (CD-ROM, web, etc)

Usuari objectiu, edat, estil

Equip de producció

Temps de vida del producte

Actualització dels continguts

- Disseny

o Modelatge de l’usuari

Persones (focal, secundària, no prioritària, involucrada,

promotors, exclòs)

Característiques de la persona: geogràfiques, edat, gènere,

Relació entre la persona i el producte.

Escenaris – Casos específics d’utilització: quan duu a terme la

tasca, amb qui, limitacions de l’equip, etc.

o Disseny conceptual – Arquitectura de la informació, esquemes de

navegació i relacions entre els apartats

Sistemes de classificació de la informació

Exactes: alfabètica, cronològica i geogràfica

Ambigus: per categories, tasques o audiència

Estructura de navegació

Jeràrquica: arbre (és recomanable no superar 3 nivells)

Lineal: informació seqüencial

En xarxa: sense ordre aparent

Etiquetatge: títol de l’enllaç, etiquetes alt, etc.

Sistemes de cerca

Card Sorting – Targetes individuals. Els participants les agrupen

de forma que tinguin sentit per a ells.

o Disseny decontinguts – Redacció dels contingut

Brevetat i fragmentació de textos

Lectura en diagonal. Dos o tres nivells de titulars.

Llistes amb pics

o Disseny visual – característiques gràfiques:Documentació gràfica,

disseny del reticle, gamma cromàtica, elecció de la tipografia

- Prototip

o De baixa fidelitat – Wireframes, a mà o amb ordinador

o De alta fidelitat. Es fa per ordinador

Prototip horitzontal: pantalles clau d’alta fidelitat

Prototip funcional o vertical: L’usuari pot navegar pel sistema

- Avaluació

o Es pot dur a terme durant el procés de desenvolupament o després

o Depèn del pressupost, el calendari i l’adequació al tipus de projecte

GÈNERES

RANG D’EDAT DE L’USUARI

Nens de 0-13 anys

So, animacions, colors Navegació senzilla i directa Metàfores (habitacions, pobles, mapes) Implicació emocional de l’usuari Recursos divertits i creatius Tipus de lletra atractiu

Diferenciar els grups d’edat Evitar càrregues lentes Actualitzar amb freqüència el lloc Llenguatge breu però no massa infantil Botons amb grandària més gran Els botons han de canviar quan l’usuari passa per sobre

Adolescents 12-17 anys

No els agrada el llenguatge infantil Presten atenció a l’aparença visual Colors saturats

Temps breu de càrrega Aplicacions estimulants i interactives Pocs textos

Majors de 65 anys

No solen tenir experiència en TIC Evitar la proximitat dels colors groc, blau i verd. Els costa diferenciar-los Contrast entre fons i contingut Evitar fons decorats Text alternatiu per a imatges i opcions

Lletra gran i de pal sec Evitar enllaços desplegables Botons grans Diferenciar enllaços visitats i no visitats Icones amb etiqueta clara Mapes de lloc

PRINCIPALS ÀMBITS DE PRODUCCIÓ D’APLICACIONS INTERACTIVES

Portals d’informació

Són de tipus diaris i periòdics Actualitzar freqüentment Titulars explicatius Emfatitzar les paraules clau en negreta Organitzar els continguts en nivells de profunditat

Portals corporatius

Pàgines web d’empreses Missatge unificat i coherent Coherènciacorporativa Conèixer el que necessita l’usuari Ser honest amb el que s’ofereix Innovació en els disseny

Comerç electrònic

Compra o venda de productes o serveis La confiança és molt important Garantir la privadesa Temps breu de càrrega Disseny professional i actualitzat Disseny que transmet solidesa Limitar la publicitat externa Comoditat i rapidesa Catàleg de productes Eines de cerca Producte amb enllaços i especificacions Procés de compra en qualsevol moment Incloure totes les taxes Cistella de comandes S’ha de poder anul·lar la comanda No s’ha d’obligar al client a registrar-se Preguntes freqüents Política de privadesa

Educació a distància

El centre del procés és l’estudiant L’estudiant avança quan ha entès la informació Creen situacions reals Permeten avaluar el nivell d’assimilació Informació del progrés i resultats Múltiples rutes: índex, cerca, enllaços Navegació intuïtiva. Mostrar missatge d’estat en processos llargs Possibilitat de desfer errors Opcions fàcilment accessibles Opció d’ajuda en totes les pàgines Les imatges s’han de referir directament als conceptes desenvolupats en el text

Intranet

Xarxa interna d’una empresa Conté informes, memòries, etc Orientada a tasques Ha d’estar sempre actualitzada Motor de cerca Notícies d’actualitat de la empresa en la pàgina d’inici Breadcrums Organigrama amb els departaments Títols descriptius

Administració electrònica E-government

Els ciudatans poden resoldre gestions amb organismes oficial És complexa amb molts de departaments Guia general Eines de cerca i indexamentcompartines entre tots els departaments Disseny centrat en el ciudatà Estructurar la informació de manera intuÏtiva S’ha de poder trobar la informació fàcilment Les gestions s’han de fer de manera ràpida.

Web 2.0

Dissenyat per a la participació i l’intercanvi lliure i gratuït Facilita la comunicació massiva i multi-direccional Grau de simplicitat

Xarxes socials

Estructura composta per individus connectats En hi ha obertes i tancades Oberta: Amb Gmail l’usuari és reconegut en el calendari de google, docs, picassa, blogspot, etc Tancada: Facebook, twiter... Efectivitat com a eina de màrqueting

DISSENY

- Briefing

o Document que conté la informació que guiarà un projecte de disseny

o El director d’art guia el procés de producció, genera les idees i

determina el concepte central

o Defineix amb el client els objectius abans del desenvolupament

o Es distribueix a tot l’equip de producció

o Es revisa periòdicament

o Ha de contenir respostes a les qüestions plantejades durant el

desenvolupament

o És una guia d’orientació

o Defineix pressupost i calendari

o Indica el nombre de prototips

o Descriu: El producte, l’objectiu de l’aplicació, el target, l’estratègia, el

pressupost i el calendari

- Tècniques que creativitat

o Pluja d’idees

Grup de 4 a 7 persones.

Tots aporten idees. Ninguna és absurda

Les idees dels companys es poden millorar o completar

Ambient relaxat

Hi ha un moderador

o Mètode 635

Es reuneixen 6 persones

Anoten 3 idees en 5 minuts

Passen el full al company del costat i aquest anota 3 idees en 5

minuts influenciat.

Es repeteix fins a completar el cicle

o Preguntes creatives

Formular preguntes que estimulin la creativitat

Qui? Què? Quan? On? Per què? Com?

o Sinèctica

Unió d’elements aparentment no relacionats

- Tipografia

o Recta per a llegir en pantalla

o La lletra regular és més llegible

o Les minúscules són més llegibles que les majúscules

o Grandària a partir de 9 en pantalla

- Formats gràfics

o Gif – Algorisme compressió LZW, no té pèrdues, il·lustracions, text,

colors plans

o Gif89a – Transparències, animacions senzilles

o JPEG – Té pèrdues, diversos nivells de compressió, paleta 24 bits

o PNG - Molta compressió a diferents nivells, transparències, 8 o 24 bits,

ombres, es descomprimeix + ràpid que el GIF

- Preparació i integració d’elements gràfics

o Retallada d’imatges ajustada al màxim

o Els estats dels botons amb la mateixa mida

o Carpeta amb els gràfics comuns per a cada idioma

o El nom de l’arxiu no ha de superar els 8 caràcters

o Nom i extensió en minúscules, sense accents o espais en blanc

- Optimització d’arxius

o Els colors plans generen arxius menors

o Les corbes i contorns augmenten la grandària

o Retallar les àrees innecessàries de les fotografies

USABILITAT

PRINCIPIS

- Visibilitat de l’estat del sistema

o L’usuari ha de tenir informació contínua sobre l’estat del sistema

- Consistència

o El comportament dels elements ha de ser constant i predictible

o Per a tasques similars = mateixa seqüència d’accions

o S’ha de mantenir al llarg de tota l’aplicació: terminologia, elements

gràfics

- Control de l’usuari

o El sistema s’ha d’adaptar a l’usuari

- Prevenció d’errors

o Els camps numèrics no han d’acceptar alfabètics

o Ajuda disponible

o No s’ha de permetre sortir sense desar els canvis

- Estructura visible

o Índex i mapes

- Interfície explorable

o L’usuari ha de tenir llibertar per a navegar

o Les accions han de ser reversibles

- La llei de fitts

o Les opcions més importants han de tenir més grandària o ser més

visibles

o Els quatre costats d’una finestra són les zones més accessibles

- Modalitat

o Les finestra de diàleg que suspenen temporalment les accions han

d’aparèixer en processos breus.

- Metàfores

o El dissenyador ha de conèixer el target abans de utilitzar les metàfores

- Missatges d’error

o Termes senzills i positius

o Preguntes clares i breus

o Evitar signes d’exclamació o lletres majúscules

o Evitar la paraula “error”

o S’ha de poder tancar la finestra

- Temps de resposta

o Resposta visual immediata

o L’usuari ha de poder cancel·lar els procés

o En processos llargs, s’ha d’indicar el temps de durada, una barra

animada o indicador de percentatge.

o Missatges textuals que indiquen la tasca que està duent a terme

- Contrastadequat per a la lectura

- Lletra de 9 punts o més

- Línies de 40/50 caràcters

- Marges amplis

- Brevetat en els textos

- Dos o tres nivells de titulars

- Llistes amb pics

- Destacar paraules clau amb negreta

- Fragmentar els textos

- Títols de pàgina explicatius

AVALUACIÓ DE LA USABILITAT

Es pot dur durant el procés de disseny i desenvolupament o després.

Poden recollir dades d’usuaris reals o es poden dur a terme sense usuaris reals

- Anàlisi de tasques – Es fa sempre des de la perspectiva de l’usuari.

- Reunions de grup / Focus groups

o S’obtenen opinions dels usuaris i es comproven les reaccions inicials al

disseny. El conductor redacta els comentaris i impressions del grup.

- Goms

o Objectius de l’usuari

o Operacions que cal fer per a arribar als objectius

o Mètodes per aconseguir un objectiu

o Regles de selecció per a decidir quin mètode.

- Inspecció d’usabilitat o avaluació heurística

o Es realitza per a experts en usabilitat

o Llista detallada de cadascun dels problemes d’usabilitat trobats amb

referències als principis que no s’han respectat i les opinions dels

avaluadors.

o Dos revisions: una visió de conjunt i una de detall

o De 3 a 5 avaluadors que examinen individualment

o Principis heurístics

Els sistema ha de mantenir sempre informat l’usuari

Ha d’utilitzar el llenguatge de l’usuari

La informació ha d’aparèixer en ordre lògic

L’usuari ha de poder abandonar, desfer o repetir una acció

Prevenció d’errors i missatges d’error adequats

Disseny pràctic i senzill sense informació innecessària

- Passeig cognitiu

o De baix cost. Es pot validar des de les primeres fases de

desenvolupament.

o Cada participant rep una carpeta amb les tasques que s’ahn de

completar i les pantalles (una per full)

o El participant anota de forma individual, en cada full quines accions creu

que hauria de fer en cada pantalla per a executar la tasca descrita.

o Després es comenta en grup i el moderador registra els comentaris

o Al final es distribueix un qüestionari anònim per a comprovar que els

participants encaixen en el perfil demogràfic requerit.

- Test amb usuaris

o Es pot fer sobre prototips, però es recomana després d’una avaluació

heurística.

o Es fa amb un ordinador

o Cinc participants amb el perfil similar al de l’usuari focal, fan la prova

per separat

o L’observador va anotant les observacions i el temps que tarda en

completar les tasques.

o No s’han d’explicar les característiques de l’aplicació

o L’usuari ha d’expressar en veu alta els problemes

o L’observador no pot ajudar a l’usuari

ENTORNS

- CD-ROM

o Es basa amb el format de pantalla estàndard dels ordinadors personals

(1024x768px)

o Imatges en RGB i 72dpi (bitmap o vectorials)

o Arxiu gràfic integrat en una sola capa

o Les imatges amb canal Alfa augmenten la mida del fitxer

o Si es treballa amb Flash, utilitzar PNG

o Text: estàtic, dinàmic, introducció de text, bitmap, text font

- Web

o Canal de distribució: Internet

o Forma vertical de les pàgines

o Format visible de 100x 600 pixels si es dissenya per la resolució estàndard de

1024 x 762

o Mapa web, retorn a l’inici

o Utilitzar webfonts

o HTML5 + CSS3

- Punts d’informació

o Exemple: Caixers automàtics

o Atracció de l’usuari

o Interfície clara amb informació introductòria atractiva

o Selecció d’idioma

o Sistema d’ajuda

o Disseny per a usuaris amb baix nivell d’experiència o discapacitats

o Ha de retornar a l’estat inicial

- Dispositius mòbils

o Diversos formats de pantalla

o El temps de connexió té un cost econòmic

o Escriptura clara i concisa

o Separació de paràgrafs mitjançant guionets

o Evitar banners i animacions i finestres emergents

o Pocs nivells

o Pàgina comprensible sense gràfics

o Sempre hi ha d’haver marxa enrere

o És recomanable no usar menús desplegables

o Paràgrafs curts

o Utilitzar una font genèrica con Geneva o Verdana

o El text d’un enllaç hauria de cabre en una sola línia

o El més freqüent en primer lloc

o Poques imatges

- Televisió interactiva

- Realitat Virtual

o Immersiva: L’usuari s’introdueix en l’entorn virtual (cascos, guants)

o No immersiva: Es manté fora de l’escena (SecondLife)

- Realitat augmentada

o Mirar un edifici singular a través del nostre dispositiu i aquest afegiria

informació sobre la història, característiques, etc.

o Necessita un dispositiu amb capacitat de llegir imatges, un software i

connectivitat a Internet.