prÀctica - disseny d'interfícies multimèdia

Finalització del prototip gràfic i tancament de la guia d’estil

Disseny d’interfícies multimèdia

Pràctica

Rosa Suñé Barniol · Grau multimèdia · 2014

MULTIPLATAFORMA I GUIA D’ESTILpantalla ordinador home 1subhome 2fi txa producte 3procés compra 4cerca 5

pantalla smartphonehome 6subhome 6fi txa producte 7procés compra 7cerca 7

annex guia d’estil argumentació

Bibliografi a i webografi a

ÍNDEX

DISSENY D’INTERFÍCIES MULTIMÈDIA PRÀCTICA

GRAU MULTIMÈDIA 1

PANTALLA ORDINADORHOME Text Lato Regular en negre sobre

blanc perquè siguin contrastats al màxim i millorar la llegibilitat.

Mida 12px.

He donat aire als textos ampliant l’espai entre aquests i les imatges o text següent.

He acostat el text interior de les caixes “Newsletter” i “Consigue...” per tal que tinguin la màxima relació possible.

PNG

GRAU MULTIMÈDIA


2

PANTALLA ORDINADORSUBHOME

Text Lato Regular en negre sobre blanc perquè siguin contrastats al màxim i millorar la llegibilitat.

He afegit el nom de l’apartat de cada pàgina com em vas indicar. Em semblava repetitiu perquè en aquest cas concret ho és, en altres casos no.A més a més, ordena la la pàgina fent-la més accessible i dóna context a l’usuari.

Igualment, he donat aire als textos ampliant l’espai entre aquests i les imatges o text següent.

PNG


GRAU MULTIMÈDIA 3

PANTALLA ORDINADORFITXA PRODUCTE

He modifi cat el contingut de la caixa del producte (informació, característiques, personalització i disponibilitat) organitzant el contingut textual en dues columnes de 320 px d’ample i una separació als marges (tots igual, superior, inferior, dret i esquerre) de 16px.

He mogut els títols cap a la part superior i el paràgraf a la inferior per destacar-ho.

La informació textual canviarà segons els producte i el contingut.

PNG

GRAU MULTIMÈDIA


4

PANTALLA ORDINADORPROCÉS COMPRA

He desplaçat la línia de característiques de cada producte (referència, preu, disponibilitat, quantitat...) a la part inferior perquè crec que facilita la lectura en diagonal i separa millor els diferents productes quan es vagin posant a la cistella.

He afegit el títol de l’apartat i he mogut a sota el gràfi c de la línia de comanda perquè quedi més clar.

PNG


GRAU MULTIMÈDIA 5

PANTALLA ORDINADORBUSCADOR

He afegit el disseny de la pàgina de cerca que és el que em faltava de tots els wireframes donats.

PNG

GRAU MULTIMÈDIA


6

PANTALLA SMARTPHONE

HOME

SUBHOME

Aplico les mateixes indicacions pels dissenys de pàgina en pantalla:

- textos llegibles i contrastats.- major separació dels textos per donar aire.

- tots els clicables tenen una mida mínima de 40x40 píxels o l’espai equivalent.

- el text és de 12 pt com a mínim.

- he afegit el títol d’apartat en cada pantalla corresponent per saber on ens trobem en cada moment.

PNG

PNG


GRAU MULTIMÈDIA

PANTALLA SMARTPHONEFITXA PRODUCTE PROCÉS COMPRA

7

He simplifi cat l’estructura dels passos de compra indicant només el punt on ens trobem. El disseny recorda al que hi ha a la mateixa pàgina en versió ordinador.

Em continuo preguntant com es veuria la cistella amb més d’un producte.

Menú desplegable al footer.

CERCADOR

PNG

PNG

PNG

GRAU MULTIMÈDIA


8

PAUTES D’ACCESSIBILITAT

Se’ns demana que el disseny permeti un nivell d’accessibilitat «doble a» AA hem de comprovar que tots els punts de verifi cació de prioritat 1 i 2 es satisfan.

Per què la pàgina web sigui accessible hem de complir amb les pautes d’Accessibilitat al Contingut de la Web WCAG 1.0 i les pautes d’Accessibilitat al Contingut de la Web WCAG 2.0, fent que el disseny que he plantejat sigui accessible, reduint les barreres a la informació.

Pautes d’accessibilitat al contingut de la Web

WCAG 1.0

1. Alternatives equivalents per al contingut visual i auditiu.Des de l’etapa de disseny ho hem de tenir present i donar la indicació de que així sigui, preveient:- l’ús de textos equivalents de descripció de la imatge.- vincles de format text.- descripcions auditives i subtítols.

2. No basar-se només en el color.Els textos i els gràfi cs de la pàgina web es veuen igual de bé en blanc i negre. La gamma de colors amb la que he treballat és prou contrastada perquè així sigui.

El contrast entre el color de fons i els text. En el disseny que proposo no hi ha superposició de text damunt de les imatges però si fos el cas, hauria de ser prou contrastat perquè fos llegible.

3. Utilitzar marcadors i fulls d’estil i fer-ho apropiadament.Des de l’etapa de disseny ho hem de tenir present i donar la indicació de que així sigui, preveient que:- el llenguatge HTML sigui vàlid i apropiat.- el document estigui validat per les gramàtiques formals publicades.- s’utilitzin els fulls d’estil per la presentació i maquetació.- l’ús d’unitats relatives i no absolutes als fulls d’estil (s’adjunta la retícula des del disseny amb aquesta nomenclatura, en tants per cent).

- ús dels elements d’encapçalament per transmetre l’estructura lògica i la informació sobre la pàgina seguint les especifi cacions del W3C.(h1, h2, h3...)

- marcat correcte de les llistes i ítems de les llistes.- marcat de les cites.

4. Identifi car l’idioma utilitzat.Des de l’apartat de disseny indiquem que s’identifi qui l’idioma general de la pàgina en espanyol (es) i s’indiquin:- identifi car els canvis d’idioma.- identifi car les abreviatures o acrònims amb l’etiqueta corresponent.

5. Crear taules que es transformin correctament.Des de l’apartat de disseny indiquem que:- s’identifi quin els encapçalaments de fi la i columna a les taules.- es distingeixi entre les cel·les d’encapçalament i cel·les de dades a


GRAU MULTIMÈDIA 9

les taules de dades amb dos o més nivells.

- no s’utilitzin taules per maquetar.- es facin resums de les taules, molt útils pels usuaris ividents.- es donin abreviatures per les etiquetes d’encapçalament.

6. Les pàgines que incorporin noves tecnologies es transformaran correctament.- Organitzar el document perquè pugui ser llegit sense fulls d’estil.- Assegurar que les pàgines segueixin sent utilitzables quan es desconnectin o no se suportin els scripts, applets o altres objectes programats.- Proporcionar pàgines alternatives per als continguts dinàmics no accessibles.

7. L’usuari té el control sobre els canvis dels continguts tempodependents.L’usuari pot aturar els objectes o pàgines que es mouen, fan pampallugues, es desplacen o s’actualitzen automàticament.

- Evitar provocar centelleig a la pantalla- Evitar el parpelleig del contingut (per exemple, canvi de presentació en períodes regulars, així com l’encesa i l’apagada)- Evitar els moviments en les pàgines- No crear pàgines que s’actualitzin automàticament de forma periòdica.- Proporcionar la possibilitat d’aturar el redireccionament automàtic.

8. Accessibilitat directa de les interfícies incrustades.La interfície d’usuari segueix els principis d’un disseny accessible: funcionalitat d’accés independent del dispositiu, teclat, veu automàtica, etc. - Els elements de programació, com scripts i applets, són directament accessibles o compatibles amb les ajudes tècniques.

9. Disseny pensant en l’ús de diferents perifèrics de control.- Mapes d’imatge controlats pel client en comptes de pel servidor, excepte allà on les zones sensibles no puguin ser defi nides amb una forma geomètrica.- Qualsevol element pugui utilitzar-se de forma independent al dispositiu (ratolí, teclat, etc.).- Ordre lògic per navegar amb el tabulador mitjançant vincles, controls de formulari i objectes. Així estan disenyats els mockups seguint els wireframes d’arquitectura de la informació.- Dreceres de teclat per als vincles més importants i per als formularis.

10. Solucions multiplataforma.- Desconnectar l’obertura de noves fi nestres. No provocar aparicions sobtades de noves fi nestres i no canviar la fi nestra actual sense informar a l’usuari. -Per a tots els controls de formularis amb etiquetes associades implícitament, assegurar que l’etiqueta estigui col·locada adequadament.- Caràcters per defecte en els quadres d’edició i àrees de text, està previst des del disseny i es mostra.

11. S’han utilitzat les tecnologies i pautes W3C.- Tecnologies W3C quan estiguin disponibles i siguin apropiades per al desenvolupament de tasques i utilitzeu les últimes versions que siguin suportades.- Consultar les referències del W3C i WAI per a més informació.- Validar la sintaxi dels documents: http://validator.w3.org/- Validar la sintaxi dels documents CSS: http://jigsaw.w3.org/css-validator/- Evitar característiques desaconsellades per les tecnologies W3C-Proporcionar la informació perquè els usuaris puguin rebre els documents segons les seves preferències (idioma, contingut, etc...). Així està dissenyat amb el desplegable d’idioma a la part superior dreta.- Si no es pot crear una pàgina accessible, proporcionarem un vincle a una pàgina alternativa que usi tecnologies W3C, que sigui accessible, tingui informació (o funcionalitat) equivalent i sigui actualitzada

GRAU MULTIMÈDIA


tan sovint com la pàgina (original) inaccessible.

12. Informació de context i orientació.-Títol a cada marc per facilitar-ne la identifi cació i navegació. S’han afegit els títols d’apartats de cada pàgina.-Si no és obvi amb el títol del marc, descriurem el propòsit dels marcs i com aquests es relacionen entre sí.-Dividim la informació en blocs curts i manejables.-Associem explícitament les etiquetes amb els seus controls.

13. Donem mecanismes clars de navegació.-S’identifi car clarament l’objectiu de cada vincle.-Es Proporcionen metadades per afegir informació semàntica a les pàgines i els llocs web. Les metadades és la informació que es proporciona sobre el lloc web i que aporta a l’usuari informació orientativa sobre aquest lloc web.

-Es proporciona informació sobre la maquetació general del lloc web.-S’utilitzen els mecanismes de navegació de forma coherent. El que s’espera d’un element és el mateix a tot el lloc web ja que no és bo que el mateix element de navegació es comporti de manera diferent, sobretot tenint en compte els diferents tipus d’usuaris que visiten el lloc web.

- S’han agrupat els vincles relacionats i identifi cat el grup, ho tenim a la part del footer de la pàgina i en la versió mòbil de manera desplegable.

14. Els documents són clars i simples.- Hem utilitzat el llenguatge apropiat més clar i simple per al contingut del lloc web

WCAG 2.0

1. El contingut és perceptible.- Oferim equivalents textuals per a qualsevol contingut no textual, que tinguin el mateix propòsit i proporcionin la mateixa informació, excepte quan el propòsit d’aquell contingut no textual sigui crear una experiència sensorial específi ca. Veure Ref. Punt 1.1 - Pauta 1 de WCAG 1.0.

- En les presentacions tempo-dependents, proporcionem la informació per altres mitjans de forma sincronitzada. Veure Ref. Punt 1.3 - Pauta 1 de WCAG 1.0.- La informació, funcionalitat i estructura són independents de la presentació partint de la bona informació dels wireframes. Veure Ref. Punt 3.3 - Pauta 3 de WCAG 1.0- En les presentacions que, per defecte, siguin visuals, el contingut en primer pla (paraules i/o imatges) es distingeix del fons amb facilitat. Veure Ref. Punt 2.2 - Pauta 2 de WCAG 1.0- En les presentacions sonores, comprovar que el contingut principal (discurs parlat i sons) es diferencia amb facilitat del so del fons. Veure Ref. Punt 1.3 - Pauta 1 de WCAG 1.0

2. Els elements de la interfície en el contingut són manejables.- Totes les funcionalitats del contingut han estat dissenyades de manera que puguin ser operables mitjançant un teclat o una interfície de teclat. Veure Ref. Punt 9.2 - Pauta 9 de WCAG 1.0. Hi hauria la excepció de la versió mòbil.

- Els usuaris tenen el control de qualsevol límit de temps en la lectura, interacció o resposta a un document, excepte quan no és possible degut a la naturalesa del contingut o de les accions que es desenvolupen en temps real. Veure Ref. Punt 7.3 - Pauta 7 de WCAG 1.0

- Els usuaris poden evitar el contingut que pugui causar atacs fotosensibles o d’epilèpsia. Veure Ref. Punt 7.1 - Pauta 7 de WCAG 1.0- Donem als usuaris la capacitat d’orientar-se i moure’s a través del contingut. Veure Ref. Punt 9.1, 9.2, 9.3 i 9.4 - Pauta 9 de WCAG 1.0- Ajudem als usuaris a evitar errors i a corregir-los fàcilment. Veure Ref. Punt 8.1 - Pauta 8 de WCAG 1.0


GRAU MULTIMÈDIA

3. El contingut i els controls són compatibles.- El signifi cat del contingut es pot obtenir-se de forma automàtica. Veure Ref. Punts 14.1, 14.2 i 14.3 - Pauta 14 de WCAG 1.0.- S’ha organitzat el contingut “pàgina a pàgina” de manera consistent i els elements interactius es comporten d’una manera predictible. Veure Ref. Pautes 12, 13 i 14 de WCAG 1.0.

4. El contingut és robust perquè funcioni amb les tecnologies actuals i futures.- Ús de les tecnologies d’acord amb les especifi cacions. Veure Ref. Punt 6.1 - Pauta 6 de WCAG 1.0Veure Ref. Punts 11.1 i 11.2 - Pauta 11 de WCAG 1.0.- Les interfícies d’usuari són accessibles o que se s’ofereixen alternatives accessibles. Veure Ref. Punts 1.1, 1.2 i 1.4 - Pauta 1 de WCAG 1.0 Veure Ref. Punt 6.1 - Pauta 6 de WCAG 1.0.

GRAU MULTIMÈDIA


ANNEX PÓSTERS GUIA D’ESTIL

GRAU MULTIMÈDIA

DISSENY D’INTERFÍCIES MULTIMÈDIA - GUIA D’ESTIL PAC 3

Rosa Suñé Barniol

Text per pantalla ordinador HTML sans serif

h1 Lato Bold 18pt whiteh2 Lato Bold 18pt magentah3 Lato Bold 16pt negra

h4 Lato Regular 14pt

paràgraf Lato Regular 14pt

Números per pantalla ordinador

1234567890 Tienne Bold magenta 18pt1234567890 Tienne Regular gris 14pt

#b52470

#000000

#ff ff ff

#b9b9b9

Text per pantalla smartphone HTML serif

h1 Lato Bold 16pt white

h2 Lato Bold 14pt magenta

h3 Lato Bold 14pt negra

h4 Lato Regular 12pt

Números per pantalla smartphone

1234567890

Tienne Bold magenta 14pt

1234567890 Tienne Regular gris 14pt

(c) 2014, Arte Hábitat interiores. Todos los derechos reservados

C = 29% M = 99% Y = 28% K = 2%

R = 181G = 36B = 112

C = 75% M = 68% Y = 67% K= 90%

R = 0G = 0B = 0

C = 0% M = 0% Y = 0% K = 0%

R = 255G = 255B = 255

C = 28% M = 22% Y = 22% K= 0%

R = 185G = 185B = 185

COLORS ICONESTIPOGRAFIA

icon by Designmodo

GRAU MULTIMÈDIA


Rosa Suñé Barniol

INTERACTIUS

GRAU MULTIMÈDIA


Rosa Suñé Barniol

RETÍCULA PER PANTALLA ORDINADOR 1080px RETÍCULA SMARTPHONE 320px

gutt er horitzontal/verti cal 20px

gutt er horitzontal/verti cal 16px

(c) 2014, Arte Hábitat interiores. Todos los derechos reservados

Consulta los catálogos

IMATGESImatge tipus a 3 columnes mida: ample 320, alt 194

Imatge tipus a 4 columnes mida: ample 173, alt 120

Imatge tipus a 5 columnes mida: ample 182, alt 167

GRAU MULTIMÈDIA


ARGUMENTACIÓEn tot el procés del disseny s’ha tingut en compte tan la diversitat d’usuaris que visitarà el lloc web com la imatge fi nal que s’ha volgut donar des de l’inici. L’objectiu era aconseguir un lloc web senzill, clar i fàcil de navegar, sense carregaments en el disseny innecessaris. I crec que hem assolit l’objectiu. Un disseny sempre és millorable però ens estaríem movent dins de la imatge neta, blanca, amb colors contrastats que faciliten la lectura i destaquen el contingut. Els colors que hem utilitzat són els de la imatge comercial d’Arte Hábitat i els que té el seu logo.

Les millores que s’han dut a terme respecte a la PAC 3 són:

- airejar els textos que quedaven excessivament comprimits.- eliminar el tipus «thin» de la tipografi a Lato ja que difi cultava la lectura, massa fi na, poc contrast a la pantalla.- simplifi car i ordenar el disseny de les parts del lloc web que eren millorables, tan en la versió per a pantalla d’ordinador com la versió per a mòbil.

El procés d’optimització i fi nalització de prototips ha estat:

- prendre la decisió de la imatge que es volia: senzillesa i netedat.- prendre la decisió de la gamma cromàtica que ens ve donada pel logotip de l’empresa.- seguir els wireframes desenvolupats des d’arquitectura de la informació.- posar en crisi les parts que ens semblaven millorables des del disseny dels mockups i executar les millores.

Hem seguit tres fases:

- primera:- elaboració de les fi txes d’usuaris.- brainstorming i wallconcept per decidir quina imatge volem donar de l’empresa a través del lloc web.- primera proposta gràfi ca de la home tan per versió mòbil com per ordinador.

- segona:- revisió d’aquesta primera proposta gràfi ca i correcció.- decisió de quina retícula utilitzem: està basada en un ample de 1080 px i modulada a partir de l’ample de mòbil de 320 px.En el lloc web farem servir, per la versió ordinador:- columna a ample total de pàgina 100% - partim de 1080 px- 3 columnes al 32 % cadascuna.- 4 columnes al 24% cadascuna.- 5 columnes al 19 % cadascuna.Amb un gutter horitzontal/ vertical 20px

I per la versió mòbil:- columna a ample total de pàgina 100% - partim de 320 px- 2 columnes al 45 % cadascuna.- 4 columnes al 20% cadascuna.Amb un gutter horitzontal/ vertical 16px

Hem decidit aquesta retícula perquè és la que millor encaixa amb els wireframes de partida per organitzar el contingut de cada pàgina. La retícula de la versió per ordinador és responsive i adaptable a la versió mòbil sense haver de fer grans canvis en el disseny.


GRAU MULTIMÈDIA

- segona proposta gràfi ca més completa amb 4 mockups (home, subhome, fi txa producte i cistella compra) tan de versió mòbil com ordinador.- decisió de quina gamma cromàtica farem servir: colors del logotip més el blanc i el negre- decisió de quina tipografi a farem servir: una sans serif, Lato, pel text de paràgrafs i títols i una serif, Tienne Bold, per destacar els números entre el text. El preu del producte és un element principal en el lloc web i que l’usuari vol trobar fàcilment.

- tercera:- revisió d’aquesta segona proposta gràfi ca i correcció.- proposta gràfi ca defi nitiva amb tots els mockups donats des d’arquitectura de la informació tan de versió mòbil com ordinador.

Hem fet servir el programari Adobe CS6: Illustrator pel disseny vectorial i InDesign per la maquetació. Hem explotat l’ús de retícules i grids per dur a terme el disseny de la manera més regular possible. També Photoshop per la redimensió i retoc d’imatges.

Hem tingut en compte la versió per ordinador en la que preval l’ús del click del ratolí (tot i que funciona amb teclat també) i la versió per mòbil en que la interacció serà tàctil. En aquesta última s’ha de tenir en compte deixar el marge sufi cient entre incones o botons (40x40px) per tal que l’ordre que dóna l’usuari s’executi correctament.

La versió per ordinador és més extensa i la versió per mòbil està optimitzada per l’ús des del dispositiu amb menús més simples i amb menys contingut. Igualment pel major ús de menús desplegables.

El disseny es pot millorar en la part de la cistella de la compra de la versió mòbil ja que no acabem de veure clara la manera exposada des dels wireframes. És un punt a resoldre en un futur i ja des d’un prototip web en ús.

Hi ha altres punts millorables com veure com s’afegiria contingut, veure si les tipografi es cansen o perduren, si el disseny és prou responsive en els diferents dispositius, etc... També s’ha de preveure el canvi de la gamma cromàtica si l’empresa decideix fer un canvi de logo en un futur.

Això ja quedaria per una següent fase o ja pel disseny, construcció del web i els seus primers usos en navegació. Creiem que la retícula i el disseny en general és prou fl exible per acollir més contingut i canvis en el disseny de parts de la web.

GRAU MULTIMÈDIA


Recursos web assignaturaUsabilitathttp://multimedia.uoc.edu/blogs/dim/usab

Dissenyhttp://multimedia.uoc.edu/blogs/dim/disseny

Mòdul 3: Usabilitat (punts 1 i 2)Mòdul 4: Disseny

Sobre les retículesResponsive resourceshttp://bradfrost.github.io/this-is-responsive/resources.html

A better Photoshop grid for responsive web design

http://www.elliotjaystocks.com/blog/a-better-photoshop-grid-for-responsive-web-design/

WHAT ARE STYLE TILES?http://styletil.es/

9 basic principles of responsive web design

http://blog.froont.com/9-basic-principles-of-responsive-web-design/

Logohttp://www.artehabitat.com/tiendaonline/es/

Iconeshttp://seeklogo.com/instagram-icon-logo-249360.html

http://www.freepik.es/vector-gratis/iconos-de-redes-sociales-establecidas-paquete-de-vectores_684574.htm

http://www.fl aticon.com/free-icon/small-truck_4435

Fontshttp://www.google.com/fonts/specimen/Tienne

http://www.google.com/fonts/specimen/Lato

Guia d’estilhttp://www.smashingmagazine.com/2010/07/21/designing-style-guidelines-for-brands-and-websites/http://identity.yale.edu/web

Pautes d’accessibilitat web

http://www.gencat.cat/web/cat/accessibilitat/PautesWCAG.pdf

BIBLIOGRAFIA I WEBOGRAFIA

usuari

Stamp

prÀctica - disseny d'interfícies multimèdia

Internet