Disseny d'Interfícies Multimèdia - Resum - Multimedia (UOC) - Paquita Ribas
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Disseny d'Interfícies Multimèdia - Resum - Multimedia (UOC) - Paquita Ribas

on

  • 1,454 views

Resum dels materials de l'assignatura Disseny d'Interfícies Multimèdia, del Grau Multimèdia de la UOC.

Resum dels materials de l'assignatura Disseny d'Interfícies Multimèdia, del Grau Multimèdia de la UOC.

Statistics

Views

Total Views
1,454
Views on SlideShare
953
Embed Views
501

Actions

Likes
0
Downloads
60
Comments
0

2 Embeds 501

http://racovermell.com 309
http://raco-vermell.wikispaces.com 192

Accessibility

Categories

Upload Details

Uploaded via as Microsoft Word

Usage Rights

CC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Disseny d'Interfícies Multimèdia - Resum - Multimedia (UOC) - Paquita Ribas Document Transcript

  • 1. DISSENY D’INTERFÍCIESDISSENY CENTRAT EN L’USUARIEstils 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
  • 2.  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 projecteGÈNERESRANG D’EDAT DE L’USUARINens de 0-13 anysSo, animacions, colors Diferenciar els grups d’edatNavegació senzilla i directa Evitar càrregues lentesMetàfores (habitacions, pobles, mapes) Actualitzar amb freqüència el llocImplicació emocional de l’usuari Llenguatge breu però no massa infantilRecursos divertits i creatius Botons amb grandària més granTipus de lletra atractiu Els botons han de canviar quan l’usuari passa per sobreAdolescents 12-17 anysNo els agrada el llenguatge infantil Temps breu de càrregaPresten atenció a l’aparença visual Aplicacions estimulants i interactivesColors saturats Pocs textosMajors de 65 anysNo solen tenir experiència en TIC Lletra gran i de pal secEvitar la proximitat dels colors groc, blau i Evitar enllaços desplegablesverd. Els costa diferenciar-los Botons gransContrast entre fons i contingut Diferenciar enllaços visitats i no visitatsEvitar fons decorats Icones amb etiqueta claraText alternatiu per a imatges i opcions Mapes de lloc
  • 3. PRINCIPALS ÀMBITS DE PRODUCCIÓ D’APLICACIONS INTERACTIVESPortals d’informació Portals corporatiusSón de tipus diaris i periòdics Pàgines web d’empresesActualitzar freqüentment Missatge unificat i coherentTitulars explicatius CoherènciacorporativaEmfatitzar les paraules clau en negreta Conèixer el que necessita l’usuariOrganitzar els continguts en nivells de Ser honest amb el que s’ofereixprofunditat Innovació en els dissenyComerç electrònic Educació a distànciaCompra o venda de productes o serveis El centre del procés és l’estudiantLa confiança és molt important L’estudiant avança quan ha entès laGarantir la privadesa informacióTemps breu de càrrega Creen situacions realsDisseny professional i actualitzat Permeten avaluar el nivell d’assimilacióDisseny que transmet solidesa Informació del progrés i resultatsLimitar la publicitat externa Múltiples rutes: índex, cerca, enllaçosComoditat i rapidesa Navegació intuïtiva.Catàleg de productes Mostrar missatge d’estat en processosEines de cerca llargsProducte amb enllaços i especificacions Possibilitat de desfer errorsProcés de compra en qualsevol moment Opcions fàcilment accessiblesIncloure totes les taxes Opció d’ajuda en totes les pàginesCistella de comandes Les imatges s’han de referir directamentS’ha de poder anul·lar la comanda als conceptes desenvolupats en el textNo s’ha d’obligar al client a registrar-sePreguntes freqüentsPolítica de privadesaIntranet Administració electrònica E-governmentXarxa interna d’una empresa Els ciudatans poden resoldre gestionsConté informes, memòries, etc amb organismes oficialOrientada a tasques És complexa amb molts de departamentsHa d’estar sempre actualitzada Guia generalMotor de cerca Eines de cerca i indexamentcompartinesNotícies d’actualitat de la empresa en la entre tots els departamentspàgina d’inici Disseny centrat en el ciudatàBreadcrums Estructurar la informació de maneraOrganigrama amb els departaments intuÏtivaTítols descriptius S’ha de poder trobar la informació fàcilment Les gestions s’han de fer de manera ràpida.
  • 4. Web 2.0 Xarxes socialsDissenyat per a la participació i Estructura composta per individusl’intercanvi lliure i gratuït connectatsFacilita la comunicació massiva i multi- En hi ha obertes i tancadesdireccional Oberta: Amb Gmail l’usuari és reconegutGrau de simplicitat en el calendari de google, docs, picassa, blogspot, etc Tancada: Facebook, twiter... Efectivitat com a eina de màrquetingDISSENY - 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
  • 5. 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 fotografiesUSABILITATPRINCIPIS - 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
  • 6. - 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
  • 7. AVALUACIÓ DE LA USABILITATEs 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.
  • 8. 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’usuariENTORNS - 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
  • 9. 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.