divendres, 26 de febrer de 2016

La Internet de les coses i Disseny d’Experiència d’usuari en la Internet de les Coses


La Internet de les coses o Internet of Things (IoT) es tracta d'un concepte que es refereix a la interconnexió digital d'objectes quotidians amb Internet  i també amb altres objectes i que tindrà nombroses aplicacions que canviaran per complet la vida de les persones.
És la idea de l’objecte “intel·ligent”. Un objecte dins de la Internet de les coses pot ser una etiqueta en una capsa de medicaments que informi de quan ens hem de prendre la medicació, quina dosi hem de prendre o quan caduca aquest medicament.
Tot i que pot resultar un idea de ciència ficció avui en dia ja s’utilitzen aplicacions que es basen en aquest concepte i també etiquetes i sensors que a més d’informar també poden operar amb altes objectes per realitzar accions.
Penseu per exemple en l’aplicació per trobar el mòbil o els rellotges que ens informen de gairebé tot i no només de l’hora.



Com influirà la IoT en el futur i també actualment?

  • La nostra vida quotidiana: Domòtica
    Temperatura adequada dins de casa, control de il·luminació, trobar objectes (claus, comandament a distància), control de la despesa d’aigua
  • Ciutats: Smartcities
    Control de trànsit, nivells de CO2, il·luminació de carrers, neteja de carrers i contenidors plens, lloc per aparcar
  • Indústria i Agricultura
    Seguretat passiva (extintors), monitoreig en la construcció d’edificis per millorar-ne la seguretat i la qualitat de materials, sistemes de detecció de manteniments i reparacions.
    Control i detecció de plagues agrícoles, recol·lecció selectiva.
  • Medi ambient
    Control de la qualitat de l’aigua i l’aire, sistemes d’informació i seguretat en desastres naturals


Disseny d’Experiència d’usuari en la Internet de les Coses
Quan pensem en el disseny dels objectes connectats tendim a centrar-nos en els elements més visibles i tangibles.
Aquests són el disseny industrial dels dispositius connectats, i les interfícies d'usuari (UI) que es troben en aplicacions mòbils i web i en els propis dispositius.

Aquestes són preocupacions importants, que tenen un gran impacte en l'experiència de l'usuari final del producte. Però són només una part de la imatge. Es pot crear una molt bona interfície d'usuari i una impressionant peça de maquinari (hardware), i els usuaris encara podrien tenir una mala experiència del producte en el seu conjunt.

Dissenyar per la IoT és més complex que el disseny de serveis web ja que hem de considerar molts més aspectes.
El disseny d'un objecte connectat requereix l'enfocament i estudi de tot allò que envolta a l'usuari, els propis usuaris (capacitats físiques, coneixements, etc.), la complexitat dels objectes, la tecnologia i l'enfocament comercial per donar a conèixer aquests objectes.

L’ UX per la IoT és diferent
Com ja hem dit els objectes connectats plantegen reptes de disseny que seran nous per als dissenyadors, acostumats als serveis de software. Molts d’aquests reptes es deriven de:

  • La pròpia naturalesa especialitzada dels dispositius IoT
  • La capacitat d’aquests dispositius per fer de pont entre el món digital i el món físic
  • El fet de que molts objectes de la IoT són sistemes de múltiples dispositius
  • La pròpia xarxa

La part més complexa dependrà de:
  • La maduresa de la tecnologia amb la que es treballa
  • El context d’ús i les expectatives que puguin tenir els usuaris del sistema
  • La complexitat que pot tenir el servei (per exemple el nombre de dispositius que l’usuari ha de fer anar per a interactuar amb el servei)


Dispositius especialitzats
Moltes de les "coses" de la Internet de les coses són dispositius informàtics especialitzats. A diferència dels dispositius que coneixem i fem anar normalment (smartphones, ordinadors, etc.), aquests dispositius hauran de ser construïts i optimitzats per a complir amb funcions específiques.
EL propi dispositiu haurà de ser dissenyat i fabricat per a respondre a uns controls i accions pels quals encara no existeixen estàndards ni guies.
Aquets controls poden ser físics a través de pantalles i botons, d’àudio (controls de veu), gestuals, etc.

Context del món real
L’ús de sensors ens permetran agafar dades del món real de tots aquells objectes connectats i el seu entorn.
Les accions que es puguin dur a terme en el món real a través de l’activació dels objectes han de ser controlades i monitoritzades i cal tenir en compte que una acció en el món digital es pot desfer, però en el món real sovint no és possible.


Disseny per a Sistemes de dispositius i serveis
Molts dels objectes connectats són un sistema de diversos dispositius i serveis. La funcionalitat pot ser distribuïda a través de múltiples dispositius amb capacitats diferents.
Podem controlar el que passa a casa nostra a través del mòbil però, també a través d’un panell de control al rebedor o una aplicació web. Tots i cadascun d’aquests dispositius han d’oferir una interfície d’usuari coherent, que sigui fàcil de reconèixer i usar.

Si pensem en els sistemes automatitzats on les accions passen físicament lluny d’on som i no ara mateix, ens dóna una altra manera d’interactuar i de comprendre el vincle entre les accions de l'usuari  i les conseqüències.
Per exemple en els sistemes de reg automàtic que s’inicien i s’apaguen en un moment determinat del dia, o en els sistemes de confort climàtic en les cases o en els robots de cuina, són sistemes que coneixem i els podem desatendre un cop els engeguem, però també caldria que aquest sistemes tinguessin a la vegada sistemes de control i monitorització per a minimitzar el risc d’errors, accidents o mal funcionament.
Cal fer èmfasi en que en el món digital les accions són reversibles però en el món físic no sempre.
Tots aquests sistemes complexos poden tenir molts usuaris, múltiples interfícies d'usuari, molts dispositius i moltes regles i aplicacions. La comprensió i la gestió per part dels usuaris de la forma en què s'interrelaciona tot pot ser extremadament difícil.
Cal dissenyar saben que el repte més important de cara a l’usuari final serà arribar a configurar, entendre i fer anar un sistema d’objectes que poden dur a terme accions sense la seva intervenció.


Dissenyar per a Xarxes
Pregunta ràpida com es que a Barcelona el menú mòbil  es connecta a la xarxa 4G i a Lleida a la 3G? Si assumim que els objectes de la IoT estaran sempre connectats (de fet aquesta es la idea) també haurem d’assumir (de moment) que pot ser que vagin lents o fallin.
En el món físic les nostres acciones responen de forma immediata i fiable, és a dir un interruptor funciona o no funciona però no es queda “carregant”.
En un sistema distribuït, els dissenyadors han de tenir en compte sovint retards, discontinuïtats, i la incertesa com a part de les interaccions de l'usuari normal i manejar tots aquests inconvenients de la forma més elegant possible.

Per a saber més sobre la IoT

Internet of Things Wikipedia
Observatorio de la Internet de las cosas
The internet of things IoT council, a thinktank for the Internet of Things
IOT Solutions World Congress

Read more ...

dimarts, 23 de febrer de 2016

Responsive Web Design i Adaptive Web Design

La construcció d’un lloc web agradable visualment i funcional requereix molt més que codi (HTML, CSS i més). Es tracta de crear la millor experiència per als usuaris oferint un lloc web que funcioni, accessible per tothom i amb qualsevol dispositiu i que ens faci servei ara i en el futur, és a dir, que no es quedi obsolet a la primera actualització del navegador.
Per aconseguir-ho tenim les tècniques de Responsive Web Design (RWD) i Adaptive Web Design (AWD).
De forma simplista un podria dir que RWD és un únic template per a tots els dispositius i l'AWD són diferents templates optimitzats per  a cada dispositiu.
Això que pot tenir un cert sentit no és del tot cert.
En primer lloc cal dir que no són conceptes antagònics i que no és millor una tècnica que l'altra. RWD i AWD poden ser i de fet són dues tècniques complementàries.

NOTA: aquest article es basa en un munt de lectures de diversos articles i llibres inclosos Adpative Web Design Crafting Rich Experiences with Progressive Enhancement d’Aaron Gustafson i Responsive Web Design d’Ethan Marcotte  i en la pròpia experiència de l’autora en disseny, UX i maquetació mòbil i web.

En què es basa el RWD?
La teoria ens diu que el RWD és fluid i s'adapta a cada mida de pantalla sense importar el dispositiu de destí.
Tot això s’aconsegueix amb:

  • Ús de media queries de CSS per adaptar el layout a la finestra o viewport
  • Ús de resposive images tant en mida com en resolució i gràfics vectorials svg
  • Ús d'una flexbox o caixa flexible (https://www.w3.org/TR/css3-flexbox/) o d'un sistema de plantilles (grid) si encara no us heu posat amb el CSS3
  • Javascript no intrusiu
  • La millora progressiva (Progressive Enhancement)


Media queries: Hem de dissenyar per tots els dispositius?
Resposta curta: NO
Si parlem d’amplades de dispositius entre fabricants i models la llista se’ns fa molt llarga, massa llarga i ens resultaria gairebé impossible adaptar el nostre layout a totes i cadascuna d’elles.
El que hem de fer és crear punts de ruptura (amb @media queries) allà on el nostre disseny ens ho demani no on un fabricant o model de dispositiu ens digui. Es tracta de fer-ho senzill, es tracta de:

Pensar en el disseny abans que en els dispositius
Però sempre hem de tenir en compte altres aspectes no només que afectin directament el nostre disseny sinó que afectin de forma directa l’experiència de l’usuari:

Consistència en l’experiència d’usuari
Sabem per informes i estadístiques que una part important dels usuaris utilitza el mòbil com a eina de consulta i que tasques com ara la compra online s’inicien en el mòbil (cercant i comparant productes) i finalitzen en desktop (un ordinador de sobretaula, un portàtil); per tant hem d’oferir a l’usuari una experiència de cerca, navegació i compra el més semblant possible, és a dir consistent, independentment del dispositiu que faci anar.

  • Consistència visual aspecte, colors, tipografia, imatges
  • Consistència en els continguts (content is the King)

Tot això cal mantenir-ho tant el l’experiència amb el mòbil com en tablet i en desktop.
Si creem punts de ruptura amb @media queries on ens ho demani el nostre disseny, podem agafar com a base l’experiència de navegació en els tres gran dispositius (mòbil, tablet i desktop). Les semblances i diferències que pot tenir el nostre disseny en els tres principals dispositius vindran donades pel propi context (és a dir la mida o viewport).

A internet troben alguns exemples de breakpoints que podem fer anar:
Media quèries for common device breakpoints
Medidas estándar de pantallas para tus media queries



Aquests exemples es tracten de llistats de pantalles i viewports comuns, de dispositius i ordinadors d'escriptori per fer-nos una idea de cap a on podrien apuntar les nostres @media queries, no es tracta doncs de cenyir-se a mides de pantalla estàndard, sinó de veure què és el millor i més específic pel nostre disseny.


En què es basa l’AWD?
ADW utilitza dissenys estàtics basats en punts de ruptura que no “responen” un cop carregats inicialment. AWD ens funciona per detectar la mida de la pantalla i poder carregar la disposició apropiada per a ella, és a dir, caldria dissenyar un layout per a cada mida de pantalla, que poden ser les “n” mides de pantalla més comunes que hi hagi actualment.
Es basa molt més que el RWD en el concepte de millora progressiva.



El concepte de la Millora progressiva
La Millora progressiva significa que el lloc web disposa de característiques més avançades com més avançat sigui el navegador amb el que l’usuari hi accedeix. La idea és que un web no cal que es vegi igual en tots els navegadors, però cal aprofitar les capacitats de cadascun dels navegadors per a que l’experiència dels usuaris sigui la millor possible
La millora progressiva proposa que el disseny web es realitzi de la següent manera:

  • En primer lloc, el disseny web ha de permetre l'accés complet i correcte a tota la informació de la pàgina independentment del tipus de navegador utilitzat per l'usuari.
  • Després de complir el requisit anterior, s'han d'utilitzar les característiques més modernes de per a la construcció del lloc web (CSS3 per exemple) encara que només els usuaris amb navegadors més moderns siguin capaços de gaudir-les.



Imatge extreta del capítol 1 del llibre Adpative Web Design Crafting Rich Experiences with Progressive Enhancement d’Aaron Gustafson


AWD utilitza molt més les tècniques de la millora progressiva com a mitjà per a definir un conjunt de mètodes de disseny enfocats en l’usuari i no pas en el navegador.
Si pensem el la idea d’un layout per cada mida de pantalla l’AWD ens dóna la possibilitat d’oferir la millor experiència a l’usuari quan accedeixi amb qualsevol dispositiu i això no només vol dir disseny i aspecte visual, també vol dir continguts i funcionalitats.

Conclusions i discussions
Per la xarxa hi ha molta informació sobre el RWD però poca i força contradictòria sobre el AWD. El concepte de Millora progressiva molts cops es utilitzat com a sinònim del AWD.
De l’únic de podem estar segurs és que ambdues tècniques s’han d’utilitzar per millorar l’experiència de l’usuari en qualsevol dispositiu.

Més informació 

Llibres: 
Responsive Web Design d’Ethan Marcotte 
Adpative Web Design Crafting Rich Experiences with Progressive Enhancement d’Aaron Gustafson

Articles:
Understanding Progressive Enhancement
Progressive Enhancement: What It Is, And How To Use It?


Read more ...

dimarts, 14 de juliol de 2015

Do UI Kit

El DO UI Kit no és només un d'aquests packs de components.



És UN PACK DE COMPONENTS en majúcuscules disponible en versió Photoshop i en versió Sketch (como mola això de l'Sketch, n'haurem de fer un post).
Conté més de 130 pantalles, 10 temes complets i més de 250 components, que ben combinats ens ajudaran a crear aplicacions magnífiques.
Descarregueu-lo, val molt la pena.

Do UI Kit



Read more ...

dilluns, 13 de juliol de 2015

Coverr: vídeos gratis per la homepage de la teva web

Està de moda això de posar un vídeo a la plana d'inici de la nostra web. I com que està de moda tothom ho vol posar. Però, és clar, no tots tenim temps, o àmins de fer un vídeo.
Vés per on a Internet hi ha de tot :)
Avui us presentem Coverr un repositori que permet descarregar vídeos especialment creats per la plana d'inici.

Coverr són vídeos de 12 a 15 segons de durada en molt bona qualitat.
Pots descarregar-te el vídeo i també els fragments de codi HTML, CSS, i JavaScript que necessitis per poder afegir-lo en la teva web.
N'hi ha de diferents temàtiques, en van afegint de nous cada setmana i el millor de tot és que són 100% gratuïts.



Read more ...

dimecres, 26 de novembre de 2014

Roots: Punt d'inici per crear themes HTML5 per WordPress

Roots és una eina de construcció de themes HTML5 per a Wordpress enfocat tant a dissenyadors com a programadors.
Roots ens ofereix un punt d'inici amb una estructura bàsica que aprofita al màxim les virtuts de l’HTML5.
Un aspecte molt interessant d’aquesta eina és que està creada sota el popular principi DRY (Don’t Repeat Yourself), que garanteix un codi net i ordenat, fàcil de mantenir i d'utilitzar.
Roots també incorpora Bootstrap fet que ens permet incloure la majoria de les característiques d’aquest recurs.


Trobareu extensa documentació sobre el projecte Roots, instal·lació, personalització, plugins, etc. També compta amb una secció d’screencasts per aprendre a utilitzar i treure-li el major profit a aquesta eina.
Una eina molt útil i interessant.
Read more ...