dijous, 18 d’octubre del 2012

Disseny d’interfície d’usuari, aspectes bàsics

De la mateixa manera que un excés d'informació és igual a desinformació, un excés de simplificació ens porta també a la desinformació en el sentit de no saber què és el que veiem i què podem fer amb el que tenim.
Els partidaris del KISS (Keep it simple, diria que l'stupid no caldria), a banda d’intentar eliminar el "desordre" cauen en el defecte d’eliminar característiques i funcionalitats que no són supèrflues o tenen tendència a amargar-ho tot.
El terme mig es difícil d'aconseguir!
En la meva experiència he passat de dissenyar interfícies de pàgines web a interfícies d'aplicacions i les necessitats d'unes i altres són molt diferents.
Per una banda les webs tenen un component visual, de identitat i de disseny molt important que en el disseny de la interfície ha de tenir-se en compte. A més cal saber a quin públic objectiu està enfocada aquella web (sí, la web és per tothom, però no és el mateix una web d'una administració pública que d'una agència de publicitat o una botiga online).
Per l'altra les aplicacions ja siguin per web, d'escriptori o per dispositius mòbils necessiten d'un estudi acurat sobre les característiques i funcionalitats que tindrà, sobre si els usuaris trobaran o no les eines amb facilitat, en definitiva, si la sabran fer anar o no en base al que es dissenyi.
Així a l’hora d’enfrontar-nos a un nou disseny d’interfície i després de valorar tots els factors, podem començar per les coses més bàsiques, les que han d’existir en el disseny sense cap tipus de discussió, és a dir:
  1. Capçalera
  2. Navegació
  3. Zona de continguts
  4. Peu
Sí, sembla molt senzill, però és en els detalls, en la disposició i en el funcionament on ens trobarem amb les dificultats.
Si pensem en la capçalera, on col·locarem el nom, títol o logotip de l’aplicació, si aquesta capçalera cal que destaqui o no, si allí hi posarem en el cas d’una aplicació web, les dades de l’usuari connectat, les opcions de configuració i el botó sortir.
Si pensem en la navegació, hem de pensar en el model dades i en l’arbre de continguts i també en el tipus de navegació que ha de tenir l’aplicació: Menú principal, menú secundari, desplegable, breadcrumbs, pestanyes.
Si pensem en la zona de continguts: Si cal que sigui a pantalla completa o dividir la pantalla per oferir més informació. Com s’han d’estructurar aquests continguts: títol de la plana o secció que estem veient, quina jerarquia visual de continguts cal seguir, si cal amagar-ho tot o mostrar-ho tot.
Si pensem en el peu: què hi hem de posar al peu? una imatge per tancar el disseny, accessos directes a seccions destacades, un menú de configuració, l’ajuda o el mapa web.

En continuarem parlant
Read more ...

diumenge, 14 d’octubre del 2012

Interface Sketch plantilles per a web, mòbils i tablets

Interface Sketch són plantilles gratuïtes per a web, mòbils i tablets, en format pdf just per descarregar, imprimir i dibuixar.
Trobarem plantilles per iPad, iPhone4 i iPhone5, Android, Windows Phone, i per mòbils estàndards. També per les tablets iPad i Nexus 7.
Sempre és interessant tenir un bon recull d’aquest tipus de plantilles ja que ens poden ser molt útils quan fem reunions amb clients o quan estem pensant en com col·locar les peces del tetris. ;)


Read more ...

dissabte, 13 d’octubre del 2012

Usabilitat a OSX

Aquesta és una frikada que ens ha enviat el Sr. Juanjo. La cosa està així:

"Un, que procedeix dels sistemes posix no adulterats, ensopega de vegades amb les magnificiències del món de la poma traïdora...
Donada la imatge adjunta, que és més pròpia de Redmon que no pas de Cupertino, a veure si tu em saps dir què fa cada botó :P
Et poso en contexte, que sempre és més divertit:
  1. Descarrego l'instal·lable de Adobe Reader per a OSX
  2. Segueixo fil per randa el linial wizzard instal·lador del software
  3. Un cop ha acabat l'instal·lació decideixo enviar a la paperera l'instal·lable descarregat
  4. El sistema m'escup a la cara el dialog adjunt"

Gràcies Sr. Juanjo!!. Com veieu el quadre de diàleg ens empeny cap a un bucle infinit a la cerca i captura del Bosón de Higgs, del sentit de la vida el univers i tota la resta, l'antimatèria o qualsevol altra cosa.
Read more ...

divendres, 12 d’octubre del 2012

Reveal.js framework per a la creació de presentacions

Si ja estàs cansat del Power Point i el Prezi et mareja, avui presentem Reveal.js
Reveal.js és un framework per a la creació de presentacions dinàmiques que utilitzen HTML5 i CSS3. Al descarregar-lo ens trobem amb un arxiu JavaScript i dos arxius de CSS. El primer full d'estil defineix alguns estils comuns, mentre que el segon conté el disseny d'un tema estàndard. Aquest tema defineix l'aspecte de les parts importants de la presentació: el text, les imatges i els enllaços.
Per a que Reveal.js funcioni només cal un navegador web de doni suport a les transformacions CSS3 i com que dóna suport al navegador Safari també les podrem visualitzar amb un dispositiu de Apple, l’iPad sense anar més lluny.
Ens ofereix quatre tipus de transicions o efectes entre dispositives, i la navegació es pot fer anar amb les tecles de direcció del teclat.
La personalització de les diapositives (en aspecte visual) és molt senzilla i a més tenim disponibles 4 temes amb la descàrrega del framework.


Read more ...

dimecres, 10 d’octubre del 2012

Pensant i dissenyant pel mòbil. Part III

Si tot i seguir les Guidelines marcades per cada SO, encara ens trobem una mica perduts, només cal que naveguem una mica més per internet per veure i trobar inspiració. Per això avui us presentem unes quantes webs amb exemples d’interfícies per a dispositius mòbils, allò que en diuen Mobile User Interface Patterns.

Pttrns 
Aquí trobarem una amplia galeria amb exemples de tot tipus llistats de notícies, perfils d’usuari, calendaris, navegació, etc.

Mobile Patterns
No és una galeria tant exhaustiva, però trobarem composicions de pantalla, navegació a mida, exemples de pantalles d’inici, etc.

UI Parade
Trobarem detalls interessants com per exemple botons, gràfiques, formularis, tant per aplicacions mòbils com per web.


Read more ...

dimarts, 9 d’octubre del 2012

Pensant i dissenyant pel mòbil. Part II

A banda de fer cas a les Design Guidelines dels diferents sistemes operatius dels dispositius mòbils (si us plau feu-n’hi cas que per alguna cosa hi són), hi ha unes quantes normes que cal seguir independentment del SO.
  • Ús d’una grid per a la distribució de les diferents seccions de contingut
  • Quan sigui possible usar només una columna en els llistats d’elements, per exemple:
  • L’estructura de navegació ha de tenir poca profunditat, caldria que la navegació no superés 3 nivells de profunditat
  • L’ordenació dels elements fer-la segons criteris d'ús i importància
  • Els botons que pugui tenir el dispositiu hi són i cal fer-los anar
  • Contrast i colors: com ja dèiem en el post anterior smartphones i tablets es poden fer anar en qualsevol lloc, amb molta o poca llum, hem de ser conscients d'això a l'hora d'aplicar el disseny gràfic de l'aplicació

  • Tipografia i textos, us heu adonat que normalment la mida de la lletra en una aplicació mòbil és més gran que en una web? és importat dir el que volem dir, encara més com ho diem i molt més important encara com ho reflectim, així que cal fer un bon ús del tipus de lletra. Les Guidelines de cada SO ens diran quina és la més adequada.

  • Els formularis: si ja són un maldecap (cada vegada menys dolorós) en la web, imagina't en un dispositiu mòbil! Què hem de fer? Etiquetar sempre, sempre, sempre els camps, oferir pistes del format esperat en cada camp, oferir valors per defecte (sempre que sigui possible, és clar). I molt millor si es canvia la entrada de text per llistes de selecció múltiple (sempre que sigui possible)
  • Icones: que s'entenguin sobretot, i millor utilitzar estàndards de significat i/o acompanyar-les d'un literal


Design Guidelines:
User Interface Guidelines Android
iOS Human Interface Guidelines
UX guidelines for Windows
Read more ...

dilluns, 8 d’octubre del 2012

Pensant i dissenyant pel mòbil. Part I

Ara que cada cop es veu més clar que el futur de la web va cap al mòbil, és l’hora de començar a pensar com seran les pàgines i els aplicacions, si ens convé adaptar el nostre lloc web per a la seva visualització en smartphones i tablets i si ens convé més crear una aplicació nativa.
De moment i per no atabalar-se massa podem començar a pensar què de diferent té navegar amb un mòbil i què tenen d’especial les aplicacions que es desenvolupen per als smartphones i les tablets.


Què en sabem de l’ús que se’n fa dels mòbils?
  • Els mòbils s’usen a tot arreu en entorns on hi ha o molta llum (al carrer) o molt poca, per tant el contrast que hi pugui haver entre els elements és un factor a tenir en compte.
  • Pantalla petita, la màxima “less is more” ha de ser present sempre.
  • Amb un mòbil no programen aplicacions ni construïm pagines web, amb un mòbil el que fem es consultar informació.
  • S’utilitzen amb els dits i per tant les zones sensibles han ser suficientment grans i separades unes de les altres.
La facilitat d'ús ha de ser la pedra angular de les aplicacions mòbils i en general hem de tenir en compte el següent:

  • L’usuari cal que sàpiga on és i quines opcions té disponibles.
  • Un mòbil és un aparell que es consulta en un entorn ple de distraccions i allò que l’usuari veu ha de ser fàcilment entès i conegut.
  • Prevenció enfront d'errors: estadísticament un usuari se sent molt més frustrat quan falla una aplicació o web que es consulta amb el mòbil que una web o aplicació que es visualitza en un ordinador (portàtil o de sobretaula).
Per construir correctament una web o una app pel mòbil primer hem de conèixer en quin dispositiu es visualitzarà, quin sistema operatiu farà rutllar la nostra aplicació web, conèixer si cada SO té unes Design guidelines recomanades que cal seguir, si existeixen botons físics en el dispositiu, com son els moviments que es poden fer i com és el clic, si els botons tenen només un estat o més d'un, en definitiva conèixer, tocar, provar i testejar amb els diferents dispositius.
Read more ...

dimarts, 2 d’octubre del 2012

Windows 8 i la seva nova interfície

Últimament els de Microsoft s’han posat les piles i estan oferint eines i aplicacions a tenir en compte, des del canvi que ha fet Hotmail (per assemblar-se més a gmail, no cal que ens enganyem), passant per Skydrive el sistema d’emmagatzemament al núvol,  l’office 365 i també el sistema operatiu Windows Phone.
D’aquí no res es presentarà el Windows 8, i per primer cop en la seva història Microsoft ha evolucionat significativament el disseny de la interfície des del mític Windows95.
Segons explica Microsoft, Windows 8 es podrà instal·lar en una àmplia varietat de dispositius des de tablets fins a equips de sobretaula.
Per unificar la seva experiència multiplataforma Microsoft farà servir Metro UI o Modern UI (es veu que li han canviat el nom), un llenguatge de disseny que inicialment es va desenvolupar pel Windows Phone i la Xbox. Metro o Modern s'inspira en l'estil modernista de l'Escola de Disseny Bauhaus, disseny suís, un estil tipogràfic internacional, i el disseny de moviment.


Microsoft utilitza cinc principis bàsics que el defineixen:
  • Una interfície digital 100%: aquest nou disseny d’interfícies fomenta l’ús d’objectes d’aspecte realista, evitant ombres, relleus, icones 3D, etc.
  • Gust pels detalls: s’intenta arribar al píxel
  • Fluïdesa i rapidesa en la navegació
  • Evitar la sobrecàrrega d’elements: en el disseny s’evita contingut innecessari (botons, funcions o controls)
  • A més d’aquests principis s’ha posat especial èmfasi en crear una interfície que sigui neta i ordenada amb una corba d’aprenentatge curta, que sigui fàcilment entesa y amb la que els usuris s’hi puguin familiaritzar ràpidament.

Així la interfície té les següent característiques :
  • Utilització d’una grid predefinida fent anar l’aspecte de rajoles o tiles en anglès.
  • Tipografia especialment creada per millorar la llegibilitat en pantalla la Segoe UI en diferents pesos (regular, light, bold, semi light i semibold)
  • Jerarquia en la presentació de les rajoles
  • Una nova forma de navegar: no hi ha cap navegació persistent primària o secundària visible. Els elements de navegació estan disponibles per tornar a casa o es troben amagats en menús desplegables de títols. Això sona com una restricció, però en realitat és un principi sòlid per a aplicacions mòbils i tàctils en general. S’estalvia espai disponible i sempre es pot veure on ens trobem.
Recursos:

Read more ...

dilluns, 1 d’octubre del 2012

Causes que fan que els usuaris abandonin el nostre lloc web.

Avui us presentem una infografia que ens explica quines són les causes de l’abandonament del nostre lloc web.
Infografia What makes someone Leave a Website? Via Kissmetrics 
Aquí en van algunes:
  • Una navegació caòtica, menús que no van enlloc, impossibilitat de percebre on i quin és el menú principal, trobar-se perdut ja en la pàgina principal i un llar etcètera.
  • Un excés de publicitat i no només parlem de baners fixes si no també d’aquells intrusius que ens fan desaparèixer la plana web que estem visitant.
  • Un estructura de continguts mal feta, cal que en un menú hi sigui per separat Contacte, Localització i On som?.
  • Música i vídeo intrusius que s’engeguen sense l’acció de l’usuari (qui no s’ha espantat mai amb musiqueta xumba, xumba?).
  • Que t’obliguin a registrar-te, aquesta és una de les coses que fan més ràbia.
  • Un mal disseny bé això és una qüestió de gustos, però per exemple que hi hagi poc contrasts entre el color de fons i el color de la lletra, una imatge de fons que es veu massa, una combinació d’elements de disseny que no peguin ni amb cola, tot hem vist alguna web així.
  • Un contingut poc interessant o sense ordre ni concert o valga ’m Déu! amb faltes d’ortografia.
  • Una llegibilitat pèssima una mida d ela lletra massa petita un ús indiscriminat de diferents tipus de lletra o fer anar fonts que no es llegeixen bé (helvetica neue, estàs en el punt de mira).
  • Continguts que no s’actualitzen.
  • Que la pàgina trigui massa en carregar.

Read more ...