Es mostren els missatges amb l'etiqueta de comentaris mòbils. Mostrar tots els missatges
Es mostren els missatges amb l'etiqueta de comentaris mòbils. Mostrar tots els missatges

dissabte, 3 de novembre del 2012

Arquitectura de la informació per a aplicacions mòbils.

Ja vam parlar en anteriors entrades que dissenyar per a mòbils és una mica diferent que fer-ho per a la web.
Els smartphones són eines bàsicament de consulta i per tant cal no sobrecarregar l’aplicació ni tampoc oferir en una sola pàgina tots els continguts disponibles (de tots és ben sabut que això també s’aplica a la web).
L’arquitectura de la informació per a una aplicació mòbil ens porta un pas més enllà i com veurem té els seus propis patrons de disseny encara que també es poden aplicar els tradicionals que coneixem en web. És important recordar que no hi ha una única manera de construir una bona arquitectura de la informació i que sempre depèn del tipus d’aplicació, dels continguts, tecnologia emprada, dispositiu, etc.
Podem aplicar diferents tècniques per construir el sistema de menús, pàgines o seccions.

Sistema jeràrquic. Aquest és un dels sistemes més coneguts i que s’ha fet anar en moltíssimes pàgines web, parteix d’un node pare (plana principal o índex) del que van sortint nodes fills. Aquest sistema és l’adequat per a llocs o aplicacions que tenen molt contingut però pot resultar carregós en una aplicació mòbil pel reduït espai de pantalla disponible. A més la idea de navegació jerarquitzada que necessita de breadcrumbs o camí recorregut és un concepte propi de la web, que en aplicacions natives per a dispositius mòbils no s’aplica. Cal pensar també que en una app els nivells de profunditat cal que siguin els mínims i els sistema jeràrquic ens empeny a crear subnivells.

Sistema Hub. Aquest és el model per defecte en l’iPhone d’Apple. Consta d’un índex central des del qual els usuaris poden navegar cap a altres “planes” de la pròpia aplicació. Dins de cada plana, l’usuari no pot fer res més que veure’n el contingut i tornar a l’índex per anar a una altra plana. Aquets sistema és útil per aplicacions petites o en les que cada plana només realitza un acció.

Sistema lineal. Amb aquest sistema partint d’una pàgina inicial es va accedint a la vista detall. Imaginem-nos un llistat principal del que al seleccionar un ítem d’aquest llistat anem a veure’n el detall que a la vegada torna a ser un llistat. Aquest sistema ens permet navegar endavant i enrere i ens dóna una visió molt clara d’on som i també des d’on hem vingut.

Sistema de pestanyes: és el sistema més fàcil d’entendre i visualment més conegut pels usuaris. Consisteix en tenir en format de pestanyes totes les pàgines o seccions de l’aplicació i poder navegar per aquestes pestanyes. Segons la secció on ens trobem la seva pestanya quedarà marcada o ressaltada d’alguna forma (color, mida, etc.)

Vista filtrada. Els amics filtres sempre ens acompanyaran, veritat? De tots és conegut com funcionen. Permet a l'usuari navegar dins d'un conjunt de dades mitjançant la selecció d'opcions de filtre, per tant és una “navegació personalitzada”. És útil per aplicacions molt grans amb una gran quantitat de continguts, però, siguem clars, no es pot filtrar per tot i alhora, bé sí que es pot, però no es recomana, la corba d’aprenentatge pot ser llarga i el sistema pot ser molt complex.

Després de veure una mica com són i com funcionen tots aquests sistemes, ens preguntem i quin és el millor? La resposta és senzilla: tots ho són, però cal aplicar-los seguint criteris de sentit comú (d’acord), i també quin tipus d’aplicació s’ha de desenvolupar, quins continguts tindrà, a quin tipus d’usuaris va enfocada i per quin dispositiu.
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 ...