Les pantalles tàctils funcionen de manera diferent a partir de teclats i ratolins
En els primers temps de dissenyar llocs web per a dispositius mòbils, la majoria dels desenvolupadors van bifurcar la seva oferta de productes. Van llançar una versió d'escriptori totalment funcional i una versió "optimitzada per a mòbils" que va eliminar la major part de la marca i imatges per adaptar-se a les capacitats limitades i la velocitat de la xarxa dels telèfons de la barra de caramel i de les xarxes sense fil 3G.
Els telèfons intel·ligents contemporanis, tanmateix, poden fer que les pàgines web siguin tan eficients com les PC d'escriptori, a través de xarxes tan bones o millors que les línies DSL d'ahir.
El disseny, després, convergeix de nou en una interfície d'un sol usuari. Però el risc per als dissenyadors no és que un telèfon intel·ligent o una tableta no pugui representar un lloc web modern i sensible. Més aviat, és que el mètode d'entrada de l'usuari en un dispositiu amb pantalla tàctil requereix canvis significatius al disseny del lloc subjacent. Els dies de construcció d'un lloc web que suposen que els visitants tenen un teclat i un ratolí acaben.
Regles bàsiques de disseny de pantalla tàctil
Dissenyar una interfície web que tingueu una pantalla tàctil requereix una evolució de l'enfocament tradicional del monitor-mouse-keyboard del passat. En particular, cal allotjar interaccions com gestos, aixetes i entrada multitáctil.
- El punteig no és exacte. A menys que el client tingui els dits d'un nen petit, fins i tot amb els controls de programari molt precisos, pot ser difícil de tocar i precisar.
- Els gestos són diferents de les aixetes. Per desplaçar una pàgina llarga en una pantalla tàctil, l'usuari es bloqueja un dit fins a la finestra del navegador. Pot ser que això no sembli important fins que s'adonin que navegar amb un ratolí mou el ratolí cap avall .
- Dos (i més) aixetes dels dits. Un usuari pot utilitzar múltiples taps de dit al dispositiu al mateix temps per controlar-lo. Aquests taps addicionals poden significar alguna cosa específic en funció del sistema operatiu del dispositiu de l'usuari.
- Dispositius d'alta brillantor. Les pantalles de la majoria de les tauletes de pantalla tàctil estan fetes d'un vidre robust. Aquest material pot ser molt difícil de llegir, amb molta llum, en situacions de llum brillant. A més, amb tot el contacte, obtenen empremtes dactilars i manxes a la pantalla que poden afectar la visualització de les vostres pàgines.
- Teclat en pantalla. Mentre que alguns usuaris tenen un teclat sense fil que es connecten a les seves tauletes, la majoria d'usuaris de la tauleta utilitzen el teclat en pantalla per a l'entrada de dades. L'entrada de OSK pot provocar alguns errors errònics, a més de ser incòmodes per a ús durant períodes prolongats de temps.
A causa d'aquestes característiques del dispositiu, els dissenyadors web han de fer èmfasi en diverses regles bàsiques de disseny per als usuaris de la pantalla tàctil:
- No col·loqueu elements clicables massa propers. No hi ha una regla difícil i ràpida que defineixi el que està molt a prop, però les llistes d'enllaços, especialment en una petita mida de font, poden ser difícils de navegar fent clic (tocant) amb un dit greix. Pot resultar molest que hagi de fer zoom per provar i fer clic en un enllaç. Aquest principi és cert per a botons i enllaços.
- Les jerarquies poden ser difícils de mantenir obertes. Una forma popular de menú dinàmic utilitza JavaScript per obrir un submenú quan l'usuari fa clic i, a continuació, passa el ratolí sobre el submenú. Aquests estats poden ser molt difícils o impossibles d'utilitzar a les pantalles tàctils ja que no es mantenen o no tanquen.
- Mou els enllaços i les àrees clicables lluny de la vora dreta de la finestra. La majoria de les persones són dietes i tendeixen a desplaçar-se per aquest costat de la pantalla. Atès que el desplaçament es realitza amb un gest, de vegades és possible iniciar el desplaçament en un enllaç per error. Els usuaris poden molestar-se si volien desplaçar-se a la pàgina i, al contrari, van acabar tocant accidentalment un enllaç. En moure els vostres enllaços des del costat dret, podeu ajudar-los a evitar aquestes molèsties.
- No hi ha cap ratolí. I això vol dir que no hi ha punter del ratolí . No hauríeu de confiar en canviar el punter del ratolí per indicar que es pot fer clic a alguna cosa.
- Els estats de desplaçament no existeixen. Com a corol·lari a l'anterior, ja que no hi ha cap ratolí, no hi ha res per passar. Un enllaç es fa clic o no en un dispositiu amb pantalla tàctil, de manera que els usuaris no poden deduir cap informació útil d'aquests estats de desplaçament com els canvis de color, els consells d'eines o els canvis a la barra d'estat.
- Els fons negres milloren el resplendor. Un lloc amb un fons negre pot ser molt difícil de llegir en un dispositiu amb pantalla tàctil a causa de la resplendor. Negre fa que les empremtes dactilars dels dispositius es mostrin amb més claredat, esborrant la pantalla. I el negre pot convertir la pantalla en un mirall que reflecteix que els usuaris s'enfronten sovint més que el text a la pantalla.
- Els blocs llargs de text en formularis són difícils d'escriure. Tot i que és possible escriure novel·les completes en un iPad o una tableta amb Android o Windows, la majoria de la gent no els agrada utilitzar el teclat en pantalla per a llargs extrems de text. Com més sigui el vostre disseny pot fer que l'entrada de dades sigui tan breu i senzilla com sigui possible, millor.
L'aspecte més important de disseny amb pantalla tàctil en ment és provar les seves pàgines en un dispositiu amb pantalla tàctil . Tot i que hi ha molts emuladors d'iPad i Android disponibles i moltes tauletes de Windows, encara no proporcionen la sensació d'una pantalla tàctil. No podeu indicar que els enllaços estiguin massa a prop o que els botons siguin massa petits o que el resplendor fa que la pàgina sigui massa difícil de llegir, tret que aparegui una tauleta i proveu-la abans de publicar el nou disseny del lloc web.