Preparació de la PS

Aquestes són les preguntes i respostes que vaig fer servir per preparar la prova de síntesi:

 

Què és per a tu la transparència?

En la mesura en que la interacció està relacionada amb el cos humà, la sensació de transparència és més gran. Intuïtiva i naturalitzada.

Exemples: interfície textual à ratolí à kinect

Tot i això, una interfície no podrà ser mai completament transparent. Només en un determinat grau,  degut a les limitacions i possibilitats de l’usuari. No obstant, un bon disseny sí naturalitza i torna imperceptible la interfície.

 

Explica com vares crear el wallconcept, per què serveix, què és i si el tornaries a fer servir.

En Direcció d’art, el wall concept és una metodologia que permet “pensar amb les mans”, ja que les imatges s’organitzen i reorganitzen constantment formant patrons que posteriorment formaran part de la recerca del concepte final.

El concepte és la solució, en format no creatiu, a un problema de comunicació. La plasmació d’una idea.

En el cas de la PAC 2, el wall concept va ser un conjunt d’imatges relacionades amb el to visual del projecte per establir un marc de referència visual amb el que definir aspectes com la gamma cromàtica o els referents gràfics del disseny (flat design).

No el faria servir només per definir la gamma cromàtica si aquesta ja ens ve completament condicionada per la imatge de la marca. Sí, per altres aspectes.

 

Què és un prototip gràfic, quins criteris has seguit per fer-lo, és útil? el tornaries a fer servir? per a que serveix?

El prototip és un element clau del DCU que permet provar aquells elements del disseny de la interfície aquelles qüestions que han de ser revisades, corregides o complementades.

A partir del prototip de baixa qualitat (wireframe) he realitzat amb el programari Photoshop un prototip d’alta fidelitat amb un aspecte molt semblant al disseny final amb html+css, però no funcional.

Criteri disseny (guia d’estil): flat design, ús del color per marcar jerarquies, tipografia legible, suficient contrast fons/front.

El tornaria a fer servir ja que permet visualitzar alhora els aspectes de disseny gràfic com la imatge de marca i els trets més rellevants de la usabilitat (sobre tot, els elements d’interacció i la accessibilitat)

 

Opinió de la assignatura, què canviaries, què has après

Afegiria: prototips funcionals, interfícies no web

Aprés: Accessibilitat (contrast, mides), Transparència, Persones, Wallconcept, Maneig tècnic Photoshop per dissenyar interfícies.

Aplicaria en el futur: guia d’estil, persones, escenaris

 

Persones

Fase modelatge usuari. Característiques coherents amb informació obtinguda en fase anàlisi.

Arquetips descrits de manera narrativa amb identitat concreta (nom, fotografia…) amb l’objectiu que el dissenyador tengui en ment un usuari real.

Tipus: focal, secundari, no prioritari, involucrat, exclòs, promotors

Informació:

  • característiques fonamentals perfil (geogràfic, demogràfic, psicosocial)
  • relació persona-producte (client/soci, freqüent/ocasional, % ús total)

 

Escenaris

Fase modelatge usuari. Característiques coherents amb informació obtinguda en fase anàlisi.

Casos específics d’utilització tenint en compte les tasques del sistema i el context.

Informació:

  • context d’utilització (usuari expert/inexpert, context ambiental, confidencialitat, tipus d’ajuda, etc.)
  • desenvolupament de la interacció (freqüència, continuïtat, intensitat atenció, volum i complexitat de la informació, etc.)
  • característiques emocionals (estil i estat emocional persona, què li resulta atractiu, expectatives experiència)

 

Guia d’estil

Document que descriu visualment les pautes bàsiques del disseny, i que serveix per garantir la coherència de la identitat visual en els diferents dispositius i pantalles.

  • descripció de la imatge de la marca (logotips, etc)
  • retícula
  • tipografia
  • gamma cromàtica
  • elements d’interacció
  • imatgeria

Normalment, primer guia d’estil i després prototips gràfics.

 

 

 

Àmbits de producció d’aplicacions interactives.

  • interfícies per a portals d’informació
  • aplicacions i portals corporatius
  • comerç electrònic
  • educació a distància
  • intranet
  • administració electrònica

 

Àmbit de producció del projecte escollit. Argumenta el perquè i comenta les particularitats que té, des del tipus de navegació, usuaris als que va dirigida, el seu comportament envers l’aplicació i aspectes gràfics i tècnics que s’han de tenir en compte.

Comerç electrònic. Transaccions venda productes i informació sobre aquests. Portal de comerç electrònic propi de l’organització. Comerç electrònic directe, ja que es completa la transacció íntegrament en suport digital. B2C.

Confiança. Credibilitat. Premisses: comoditat, rapidesa, preu

AI: Navegació jeràrquica (nivells/pàgines), sistema classificació informació ambigu

Persones: usuari inexpert, compradors mòbils, professionals

Escenaris: comportament usuaris, context compra i recollida informació, freqüència baixa (un parell de cops l’any), continuïtat fins decidir compra, intensitat i complexitat informació mitges, estat emocional i expectatives usuari típics d’un consumidor.

Guia d’estil…

 

Factors a nivell d’interacció que s’han de tenir en compte en el desenvolupament d’aplicacions per a mòbil. Quins canvis has fet a l’aplicació mòbil respecte a la que t’havíem proporcionat d’escriptori, tant a nivell de continguts com a nivell de disposició gràfica i elements d’interacció?

Interacció: procés recíproc de transferència d’informació entre l’home i l’ordinador, i inclou tant les accions implicades en aquest procés com els seus resultats

Interfície d’usuari: la part del sistema de l’ordinador amb la que l’usuari està en contacte directe

  • responsiu (no a mida ni adaptatiu)
  • 100% funcionalitat implementada
  • coherència guia d’estil
  • elements interacció (mida botons i etiquetes, menú principal plegable)
  • retícula 1 columna

 

 

 

 

Decisions gràfiques que has pres en cadascuna de les versions (mòbil-escriptori) i quins aspectes has tingut en compte per mantenir la coherència . Justifica-ho destacant els punts a tenir en compte segons el tipus d’usuari.

Edat de l’usuari:

  • Nens/adolescents/seniors
  • Universal

Nivell segmentació: baix

Tècniques de modelatge d’usuari: persones i escenaris

Decisions gràfiques (guia d’estil):

  • flat design (no skeumorphisme)
  • gamma cromàtica segons el logotip, mateixes seccions mantenen colors
  • retícules (escriptori: dues columnes, mòbil: una columna)
  • tipografia Roboto amb pesos Black (900), Bold (700) i Regular (400)
  • elements d’interacció:
  1. a) menú desplegable accions
  2. b) menú desplegable opcions amb botons
  3. c) menú de pestanyes (versió mòbil: un menú ocultable)
  4. d) icones
  5. e) camps de text.
  • accessibilitat: contrast, visibilitat, orientació

 

Planteja el brífing que seria necessari per assolir el projecte desenvolupat.

  1. a) Descriu el producte a treballar

Tipus: web comerç electrònic de mòbils i complements

Desavantatges: producte poc diferenciat

Avantatges respecte de competència: rapidesa navegació, carret compra, etc…

  1. b) Objectiu de l’aplicació.

Comercial. Portal de venda online.

  1. c) Públic

Geogràfic: Uruguai

Demogràfic: totes les edats, gèneres i situacions familiars. Ingressos mig/alts. Nivell educació mig/alt

Perfil psicosocial: classe mitja, estil de vida tecnològic…

Relació amb el producte: poca freqüència, implicació alta

  1. d) Objectiu creatiu (relació de l’interactiu amb la marca).

Imatge de marca, però està centrada en els productes en venda

  1. e) Estratègia creativa (concepte central i factors creatius a tenir en compte).

Flat design, modern, no skeumorphisme, jerarquització i categorització recolzada per caixes de colors

 

PAC 1. Descriu exemples interfícies explicades.

Korg M1 Apple GarageBand Canon EOS 6D app Càmera Sony Z3
Estructura d’organització del contingut Jeràrquic descendent amb pàgines Jeràrquic descendent amb poca profunditat Jeràrquic descendent amb poca profunditat (no hi ha sub-pàgines) Jerarquic descendent amb poca profunditat (màxim dos nivells)
Esquema de navegació Ambigu, per tasques anomenades “modes” Ambigu, amb pàgines (Cançons, Instruments…) Ambigu amb pàgines (segons procés fotogràfic) Ambigu, amb menú d’opcions
Elements d’interacció Botons selecció de mode i introducció dades
Control lliscant
Display LCD
iOS, manipulació directa (swipe, tap, pinch). La pantalla es transforma. Híbrida (analògica + digital) redundant
Dials rotatoris, botons, joystick, interruptors
iOS, manipulació directa (swipe, tap, pinch).
Botó volum assignable
Interfície respecte de les possibilitats i limitacions del dispositiu Facilita tasques freqüents (presets)
Dificulta tasques complexes (edició sons)
100% multitàctil
Sensors
Càmera reflex estàndar + funcions addicionals 100% multitàctil
Ajust al perfil d’usuari Bé per intèrpret
Malament per editor sons
Bé, principiants i compositors aficionats. Interfície analògica à usuari professional

Interfície digital à + info

Bé, ofereix immediatesa i funcionalitat mitjana
Ús dels recursos gràfics Poc. Display LCD i botons retroil·luminats Color x pistes
Skeumorfisme
Pantalles agrupades per colors segons la seva funcionalitat Color només a interruptors de selecció i icones botons
Convencions culturals No les aprofita, cal aprendre llegint el manual Típiques del món musical
Instruments “es toquen”
Les dels professionals de la fotografia Icones fàcilment reconeixibles (raig, punt vermell…)
Factors que contribueixen a la usabilitat Separació paràmetres (sup) i valors (inf)
Fader lliscant
Instruments fàcils
Emulació interpretació
Divertit d’usar
Gran nombre botons amb funcionalitat única Fotos en dos tocs. El primer enfoca i ajusta exposició, el segon captura l’imatge
Sensació de transparència baixa alta baixa alta

 

Per analitzar transparència:

O.N.I.P.U.C.G.U.T. (on hi puc, gut)

organització, navegació, interacció, possibilitats, usuari, convencions, gràfics, usabilitat, transparència

 

Arquitectura de la Informació. Tasques.

  1. Sistema de classificació de la informació
  2. Estructura de navegació
  3. Etiquetatge
  4. Sistema de cerca

 

Sistemes de classificació de la informació

  1. Exactes: alfabètic, cronològic, geogràfic…
  2. Ambigus: categories, tasques, audiència, metafòrica…

 

Estructura de navegació

  1. Jeràrquica: en forma d’arbre s’accedeix als subnivells
  2. Lineal: proporciona accés seqüencial
  3. En xarxa: sense ordre aparent, ni jerarquia.

 

Després de realitzar les PACs i la Pràctica de l’assignatura, indica en quin cas -web per a escriptori o web per a mòbil- ha estat més important assegurar que la interfície es feia el més transparent possible per a l’usuari, i justifica la teva resposta. Indica quines solucions de disseny has adoptat per afavorir aquesta transparència.

Explicar transparència interfície escriptori / mòbil segons punts (onipucgut)

Escriptori: ratolí, hover, teclat,

Mòbil: dimensions menors, menys espai, gestos multitouch (?), una sola columna

 

Indica amb quina eina de prototipatge has preparat els funcionals prototips de la PAC2, i justifica per què. Creus que en futurs prototips utilitzaràs la mateixa eina?

Photoshop. Manipulació imatges bitmap més senzilla i amb més possibilitats. Possibilitat analitzar stencils existents.  Necessitava pràctica en aquesta eina i, ara que he assimilat els procediments per elaborar propotips, la tornaré a fer servir.

D’altra banda, en l’àmbit del prototipatge, els stencils són un recurs molt útil, com vam comentar a l’aula. Explica què són els stencils, i comenta si en la PAC2 o en la PAC3 n’has utilitzat. En cas afirmatiu, indica per a quins elements n’has utilitzat, i raona per què. En cas que no n’hagis utilitzat justifica per què.

Stencil: plantilla. Sí, n’he fet servir un com a punt de partida. Sobre tot per els elements d’interacció.

 


 

Explica quines limitacions específiques t’has trobat en el prototip gràfic per a mòbil (PAC3), respecte a elements que hauries pogut treballar més lliurement en la versió per escriptori.

Espai reduït, mida tipografies, botons més grans, canvi a una sola columna, hover.

  • context ús mòbil
  • 100% funcionalitat, sí o no?
  • diferències entre responsiu, adaptatiu, a mida
  • coherència
  • elements interacció propis
  • apilament elements (retícula 1 columna)
  • poca profunditat nivells navegació

 

Quins aspectes canviaries si haguessis de dur a terme de nou el mateix procés, per optimitzar els resultats.

Tipografia: en unitats percentuals, jerarquització més clara. 2 tipografies.

Major coherència cromàtica entre versió escriptori i mòbil.

Definir retícules abans de començar

Més importància als aspectes d’accessibilitat des de l’inici.

 

Explica també quina ha estat la teva experiència personal en realitzar les pràctiques: amb quines fases has gaudit més i en quins has tingut més dificultats, què has après, què t’hauria agradat treballar més a fons, quins buits de coneixement has trobat.

La pràctica que més m’ha agradat ha estat l’anàlisi de la transparència de les interfícies, ja que el disseny web no és la meva disciplina preferida i en la PAC1 he pogut analitzar dispositius físics i aplicacions.

M’hauria agradat treballar amb prototips navegables o funcionals.

Crear la interfície d’una aplicació en Processing o aplicació web.

 

Indica quins són els elements fonamentals que cal definir al dissenyar una interfície gràfica (p.e., la tipografia). Pensant en aquella proposta que vas presentar en la PAC2, explica quines són les característiques del teu disseny que han anat evolucionant més fins arribar al disseny final, i indica quines raons et van conduir a realitzar aquesta evolució.

Guia d’estil:

  • retícula
  • tipografia
  • gamma cromàtica
  • comportament dels elements d’interacció

Evolució: contrast, retícula, gamma cromàtica, tipografies


 

Després de treballar en les activitats del curs, explica si la teva visió sobre la transparència en el disseny de les interfícies ha variat respecte a les conclusions a les que vas arribar a la PAC1, o si les has confirmat. Indica també quins dels factors implicats en el disseny d’interfícies i que es desenvolupen en els materials del curs, tenen un major pes a l’hora de determinar el grau de transparència d’una interfície.

Desconeixia el terme transparència i la PAC1 va ser prou exhaustiva com per proporcionar una bona assimilació del concepte. He confirmat l’aprés en la PAC1.

Manipulació directa: GUI

Estructura de navegació si jeràrquica pocs subnivells

Etiquetatge ràpid de llegir i que no desorienti

Les opcions de navegació han de propiciar l’orientació

  • coherència visual
  • jerarquia visual (esquerre superior)
  • rutes de navegació (breadcrumbs)
  • enllaços visitats
  • no redundància
  • mapa de l’aplicació

Principis generals d’usabilitat

  • visibilitat de l’estat del sistema
  • consistència (elements constants i predictibles)
  • control de l’usuari (ha de disposar de tota la informació i de les eines)
  • prevenció d’errors (camps numèrics o de text)
  • estructura visible (índex o mapes)
  • interfície explorable, sense camins sense sortida
  • llei de Fitts, grandària i localització
  • modalitat, només hem de posar l’interfície en modes especials poc temps
  • metàfores, ben seleccionades i consistents
  • ús del color: atreure, jerarquitzar, estat d’ànim, corporativitzar…
  • missatges d’error senzills, positius, no frustrants
  • temps de resposta: immediat, possibilitar cancel·lar, indicadors progrés

 

 

Explica si has hagut de fer modificacions en la guia d’estil de la Pràctica respecte el que havies definit a la PAC3, i si és així, quines raons t’han portat a fer aquests canvis.

  • més contrast etiquetes menú principal
  • més contrast baixant gris quadre fons
  • camp cerca color fons blanc i text suggerència entrada
  • ratlleta divisòria entre comentaris
  • disposició més ordenada d’elements
  • coherència cromàtica entre versió escriptori i mòbil
  • retícula mòbil 1 columna

 

 

Explica si coneixies abans el concepte de responsive design, i si creus que és útil en tots els casos en els que haguem de tenir diferents versions d’una interfície. Hi ha algun cas en el que penses que seria millor generar un disseny completament diferent per cada dispositiu? Raona la teva resposta.

Tres tipus de disseny per mòbils:

  • responsive (renderitza el client)
  • adaptative (el servidor detecta el tipus de dispositiu i envia pàgina corresponent)
  • lloc separat (url distint)

Avantatges:

  • url únic
  • optimitzat per SEO
  • manteniment més fàcil
  • més consistent
  • mateixa experiència en tots els dispositius

Desavantatges:

  • més complex i difícil d’implementar (major cost)
  • a vegades imperfecte
  • es baixa tot el contingut, es faci servir o no (imatges grosses, encara que després s’hagin d’encongir). Menys eficient i més lent.
  • els usuaris mòbils poden no necessitar 100% contingut de versió escriptori

Leave a Reply