Prototipat gr fic

download Prototipat gr fic

of 16

  • date post

    12-Apr-2017
  • Category

    Design

  • view

    205
  • download

    0

Embed Size (px)

Transcript of Prototipat gr fic

  • Grau en Multimdia Curs 2013/14 2n Semestre

    Disseny d'InterfciesMultimdiaPrctica Finalitzaci del prototipatgrfc multiplataforma

    Prototipat grfc

    AutorJordi Zango Novell

    jzango@uoc.edu

    Data de lliurament02/06/2014

    mailto:jzango@uoc.edu

  • ndex1. Prototipat grfic.................................................................................................3

    1.1.Pgina d'inici...............................................................................................3

    1.1.1.Versi escriptori.................................................................................3

    1.1.2.Versi mbil.......................................................................................4

    1.2.Pgina de dest...........................................................................................5

    1.2.1.Versi escriptori.................................................................................5

    1.2.2.Versi mbil.......................................................................................6

    1.3.Pgina d'itinerari.........................................................................................7

    1.3.1.Versi escriptori.................................................................................7

    1.3.2.Versi mbil.......................................................................................8

    1.4.Pgina de cerca..........................................................................................9

    1.4.1.Versi escriptori.................................................................................9

    1.4.2.Versi mbil.....................................................................................10

    1.5.Pgina de compra.....................................................................................11

    1.5.1.Versi escriptori...............................................................................11

    1.5.2.Versi mbil.....................................................................................12

    2. Argumentaci..................................................................................................13

    3. Fonts...............................................................................................................15

    4. Imatges i recursos...........................................................................................16

    5. Llicncia..........................................................................................................16

    Disseny d'Interfcies Multimdia - Prctica (Prototipat grfic)per Jordi Zango Novell (jzango@uoc.edu) 2

  • 1. Prototipat grfic

    1. Prototipat grfc

    1.1. Pgina d'inici1.1.1. Versi escriptori

    Disseny d'Interfcies Multimdia - Prctica (Prototipat grfic)per Jordi Zango Novell (jzango@uoc.edu) 3

  • 1. Prototipat grfic

    1.1.2. Versi mbil

    Disseny d'Interfcies Multimdia - Prctica (Prototipat grfic)per Jordi Zango Novell (jzango@uoc.edu) 4

  • 1. Prototipat grfic

    1.2. Pgina de dest1.2.1. Versi escriptori

    Disseny d'Interfcies Multimdia - Prctica (Prototipat grfic)per Jordi Zango Novell (jzango@uoc.edu) 5

  • 1. Prototipat grfic

    1.2.2. Versi mbil

    Disseny d'Interfcies Multimdia - Prctica (Prototipat grfic)per Jordi Zango Novell (jzango@uoc.edu) 6

  • 1. Prototipat grfic

    1.3. Pgina d'itinerari1.3.1. Versi escriptori

    Disseny d'Interfcies Multimdia - Prctica (Prototipat grfic)per Jordi Zango Novell (jzango@uoc.edu) 7

  • 1. Prototipat grfic

    1.3.2. Versi mbil

    Disseny d'Interfcies Multimdia - Prctica (Prototipat grfic)per Jordi Zango Novell (jzango@uoc.edu) 8

  • 1. Prototipat grfic

    1.4. Pgina de cerca1.4.1. Versi escriptori

    Disseny d'Interfcies Multimdia - Prctica (Prototipat grfic)per Jordi Zango Novell (jzango@uoc.edu) 9

  • 1. Prototipat grfic

    1.4.2. Versi mbil

    Disseny d'Interfcies Multimdia - Prctica (Prototipat grfic)per Jordi Zango Novell (jzango@uoc.edu) 10

  • 1. Prototipat grfic

    1.5. Pgina de compra1.5.1. Versi escriptori

    Disseny d'Interfcies Multimdia - Prctica (Prototipat grfic)per Jordi Zango Novell (jzango@uoc.edu) 11

  • 1. Prototipat grfic

    1.5.2. Versi mbil

    Disseny d'Interfcies Multimdia - Prctica (Prototipat grfic)per Jordi Zango Novell (jzango@uoc.edu) 12

  • 2. Argumentaci

    2. ArgumentaciTal i com es demana, a continuaci detallo tant el procediment de disseny comels canvis efectuats en el prototipat previ, basant-me tant en el feedbackobtingut de l'avaluaci de la PAC anterior com en la prpia reflexi personal.

    Un dels principis que he tingut molt en compte ha estat el de la consistncia.He intentat aplicar de forma constant i predictible tot el que pot ser consideratcom a constant representativa per tal que la informaci arribi a l'usuari de lamateixa forma.

    Per aix he mantingut sempre que ha estat possible tant el plantejament bsicde la maquetaci, com la ubicaci dels controls de navegaci i els espaisdestinats a mostrar els continguts. D'aquesta manera l'usuari sempre potpreveure on trobar all que busca.

    La interfcie t una alt nivell d'explorabilitat, que es veu afavorida tant per lareversibilitat de les accions (per exemple, en el procs de compra) com perl'existncia d'una ruta rpida per a accedir a les diferents funcionalitats (perexemple, el men principal o el fil d'Ariadna).

    Complint els preceptes de la llei de Fitts, he donat a les opcions ms importantsuna major grandria i visibilitat. Per aix, els controls primaris (com el menprincipal) han estat collocats en els lmits de la pantalla i tamb he donat uncolor i una mida diferents als botons que impliquen accions ms compromeses(com per exemple, el bot de compra).

    Tamb he fet s d'algunes metfores per a ajudar a l'usuari a reconixer iidentificar algunes funcionalitats o opcions. Per exemple, he fet s d'estrelles,smbols de casetes o persones, o petites icones amb forma de calendari.

    S que he fet un canvi concret pel que fa a les icones i les metfores. Aquestcanvi ha estat l'eliminaci de la icona de la anomenada hamburguesa en lapart de disseny del dispositiu mbil. En el seu lloc, el que he fet ha estatdesglossar les opcions, agrupant la majoria en el desplegable que ja estavapresent (i que ara compta amb l'etiqueta Men davant) i deixant en una iconaaquelles opcions que tenen a veure amb l'usuari (registre, connexi, perfil, etc.).

    El canvi que acabo d'explicar, l'eliminaci de la icona de la hamburguesa m'hedecidit a fer-lo desprs de la lectura d'un estudi de la seva funcionalitat, queporta per ttol Hamburguer vs Menu: The Final AB test i que pot trobar-se ahttp://exisweb.net/menu-eats-hamburger.

    En l'aspecte de la usabilitat i llegibilitat, he optat per emprar lletra fosca sobreun fons blanc per a obtenir un bon contrast. Quan parlo de lletra fosca vull dirque he utilitzat un color gris fosc per al text per no un negre perqu m'ha

    Disseny d'Interfcies Multimdia - Prctica (Prototipat grfic)per Jordi Zango Novell (jzango@uoc.edu) 13

    http://exisweb.net/menu-eats-hamburger

  • 2. Argumentaci

    semblat que un contrast una mica menys dur que el que dna el negre pursobre blanc s ms agradable per a la lectura. Tanmateix, he decidit emprarunes fonts tipogrfiques sense serif i d'una mida fora gran.

    Altra modificaci que t a veure amb la llegibilitat s que he redut el nombre deparaules i lnies de text en alguns llocs, ja que em sembla que estaven massacarregats. A ms, en alguns llocs he passat a emprar la font Arial Narrow que tun format ms comprimit i permet aprofitar millor l'espai.

    Tal i com explico a la guia d'estil, he emprat una retcula bsica de trescolumnes que em facilits el disseny de la versi per a dispositius mbils i laconsistncia de disseny entre aquesta plataforma i la d'escriptori.

    Seguint les indicacions donades en l'avaluaci de la PAC anterior, he redut lacarta de colors i els que he aplicat sn menys saturats que els que havia fetservir. En aquest nou disseny, faig servir els tres colors bsics (vermell, verd iblau) per per a coses puntuals i amb menys intensitat.Ara, per exemple, els paquets de viatge no els mostro envoltats de color sind'un marc en un to gris clar (de forma intencionada, gaireb com si es tractsd'una foto Polaroid). He volgut conservar el marc per a donar una idea d'unitatde paquet, com si fos un objecte material que es pot comprar o regalar.

    Entre tots els canvis que he fet, un dels ms grans ha estat la redistribuci imodificaci de la pantalla de l'itinerari. Desprs de pensar-m'ho, he consideratque era millor eliminar la imatge del slideshare i fer que el mapa tingus unamida ms gran (llei de Fitts). A ms, he afegit la funcionalitat de poder verimatges en miniatura damunt del mapa en aquells punts geogrficsremarcables. Aquestes miniatures serien clicables i permetrien accedir a unavista ampliada de foto que es mostra en petit.

    Un altre dels canvis importants ha estat la redistribuci i agrupaci dels controlsdel formulari de compra. Veient la llegibilitat que havia obtingut en aquestformulari per la versi mbil m'ha semblat que la versi per a escriptori era moltmenys clara.

    Com que, justament a la versi d'escriptori, no hi ha problemes d'espai he optatper a reordenar els controls i agrupar les entrades en una columna de laretcula i les etiquetes en una altra. A ms, he fet petites agrupacionssignificatives fent s de l'espai existent entre els controls. El resultat ha estat unformulari que em sembla molt ms clar i entenedor.

    De pas, amb aquesta modificaci, tamb he obtingut una major consistnciaentre els dissenys de les dues plataformes.

    Disseny d'Interfcies Multimdia - Prctica (Prototipat grfic)per Jordi Zango N