Oggi un sito web deve esser progettato per una consultazione mobilefriendly ancor prima che per il desktop.
Colui che progetta il layout mobile deve avere tutta una serie di accorgimenti di usabilità, struttura e design che rendano la navigazione pulita, semplice ed immediata per lobiettivo dellutente sia che si tratti di sito vetrina o mCommerce. Nellintervento analizzeremo tutti i principali accorgimenti: dalla giusta scelta tipografica alla dimensione minima di un pulsante, dal più corretto menù di navigazione allanalisi del contesto temporale/fisico in cui si fruirà del mobile site.
Best Practices Mobile Web: Il "Tap" è il nuovo "Click" @ Wordcamp BolognaLuca Degli Esposti
Oggi più che mai, se l’obiettivo lo consente, un sito web deve essere progettato, ancor prima che per il desktop, per una consultazione mobile-friendly.
Colui che va a progettare il layout grafico del sito mobile, deve avere in primo luogo tutta una serie di accorgimenti di usabilità, struttura e design che portino ad una navigazione pulita, semplice, immediata ed efficace per l’obiettivo primario dell’utente finale, sia che si tratti di un blog, un sito vetrina o un m-Commerce.
In questo intervento, verranno analizzati proprio i principali accorgimenti che un professionista (un Designer o un Dev in primis) deve prendere in considerazione nel momento in cui va a progettare un layout mobile, dalla giusta scelta tipografica alla dimensione minima di un pulsante per una buona interazione con le dita (cambia da continente a continente), dal più corretto menù di navigazione all’analisi del contesto temporale e fisico in cui si fruirà da mobile, del sito.
Noonic Guides - Animazioni nel Web DesignNoonic Agency
Le animazioni sono la base dell’Interaction Design. Grazie ad esse l’utente è agevolato nell’interagire in modo facile ed intuitivo con i touchpoint digitali progettati per soddisfare i suoi bisogni.
Best Practices Mobile Web: Il "Tap" è il nuovo "Click" @ Wordcamp BolognaLuca Degli Esposti
Oggi più che mai, se l’obiettivo lo consente, un sito web deve essere progettato, ancor prima che per il desktop, per una consultazione mobile-friendly.
Colui che va a progettare il layout grafico del sito mobile, deve avere in primo luogo tutta una serie di accorgimenti di usabilità, struttura e design che portino ad una navigazione pulita, semplice, immediata ed efficace per l’obiettivo primario dell’utente finale, sia che si tratti di un blog, un sito vetrina o un m-Commerce.
In questo intervento, verranno analizzati proprio i principali accorgimenti che un professionista (un Designer o un Dev in primis) deve prendere in considerazione nel momento in cui va a progettare un layout mobile, dalla giusta scelta tipografica alla dimensione minima di un pulsante per una buona interazione con le dita (cambia da continente a continente), dal più corretto menù di navigazione all’analisi del contesto temporale e fisico in cui si fruirà da mobile, del sito.
Noonic Guides - Animazioni nel Web DesignNoonic Agency
Le animazioni sono la base dell’Interaction Design. Grazie ad esse l’utente è agevolato nell’interagire in modo facile ed intuitivo con i touchpoint digitali progettati per soddisfare i suoi bisogni.
Introduzione al Responsive Design: I vantaggi di Sketch nel
disegnare su diversi viewport.
2. Scoprire ed utilizzare i plugin di Sketch: Sketch, con i superpoteri. Guida e introduzioni alle maggiori risorse esterne a Sketch.
3. Prototipazione con Sketch: Come creare e gestire un prototipo condiviso (Introduzione a Craft e a Invision).
4. Esercizi per ogni modulo teorico
Il responsive design è un concetto relativamente nuovo, ma è figlio di idee che conosciamo bene: le declinazioni e l'adattamento di un prodotto al contesto d'uso. In queste slide affrontiamo il punto di vista progettuale, prima che tecnico sul RWD e il web, a partire dal branding.
Web Domus Italia è una web agency leader nella creazione e nello sviluppo di applicazioni per iphone e android.
Crea siti web responsivi per la vostra impresa, vi assiste nell’e-commerce e nel web maketing.
Per di più è una delle migliori aziende che si occupa di ricostruzioni tridimensionali in arceologia.
Siti Web: parola visuale, analisi del lettore, usability dei testi ed accessi...bsdlover
Lezione #2 di Paolo Gatti all'Università degli Studi di Teramo, Facoltà di Scienze della Comunicazione, avente come tema "Siti Web: parola visuale, analisi del lettore, usability dei testi ed accessibilità".
Usabilità, comunicazione tecnica ed Help Online (HoL)KEA s.r.l.
Usabile è una cosa che impariamo e ricordiamo facilmente, che è efficace (ci permette di raggiungere lo scopo) ed efficiente (ci permette di farlo con il minore sforzo possibile), e il cui uso risulta dunque soddisfacente.
Ecco perché l’usabilità è importante nella comunicazione tecnica, in particolare quando realizziamo Help Online (HoL), e altre applicazioni dedicate all’erogazione e alla fruizione di informazioni via web, mobile e app.
Report sulla terza edizione dello storico libro di Steve Krug, Don’t Make Me Think. Un approccio di buon senso all’usabilità web e mobile, Tecniche Nuove, Milano, 2014
Il 2014 è stato l'anno del sorpasso del mobile sul desktop: i dati hanno infatti confermato che le persone passano sempre più tempo a navigare sul web da Smartphone o tablet, più di quanto ne passino giornalmente davanti a un PC.
Questi dato hanno ovviamente ripercussioni anche sulla SEO perché occorre considerare alcuni nuovi aspetti importanti, sia legati al sito che ai contenuti, iniziando a pensare “mobile first” prima di creare qualsiasi tipo di contenuto.
Vedremo di analizzare questi aspetti con Francesco De Nobili docente di “Comunicazione e web” all'Università di Bologna e dei corsi di formazione di Comunicazione Lavoro.
Le slide dell'intervento di Vidiemme e Rokivo all'evento Welcoming Cities a Rimini di Sabato 22 Marzo 2014.
Si parla di Google Glass e del progetto GoogleGlass4LIS
Usability of a website, how to make a website usable, the checklist, the users, the tools and testing of a business or personal website. Three user dogmas and a practical approach on how to improve usability and accessibility of websites. Google Checklists, loading time, number of clicks, objectives and user retention.
Fuzz-testing: A hacker's approach to making your code more secure | Pascal Ze...Codemotion
Increased complexity makes it very hard and time-consuming to keep your software bug-free and secure. We introduce fuzz-testing as a method for automatically and continuously discovering vulnerabilities hidden in your code. The talk will explain how fuzzing works and how to integrate fuzz-testing into your Software Development Life Cycle to increase your code’s security.
Pompili - From hero to_zero: The FatalNoise neverending storyCodemotion
It was 1993 when we decided to venture in a beat'em up game for Amiga. The Catalypse's success story pushed me and my comrade to create something astonishing for this incredible game machine... but things went harder, assumptions were slightly different, and italian competitors appeared out of nowhere... the project died in 1996. Story ended? Probably not...
More Related Content
Similar to Best Practices per il Web Mobile by Luca Degli Esposti
Introduzione al Responsive Design: I vantaggi di Sketch nel
disegnare su diversi viewport.
2. Scoprire ed utilizzare i plugin di Sketch: Sketch, con i superpoteri. Guida e introduzioni alle maggiori risorse esterne a Sketch.
3. Prototipazione con Sketch: Come creare e gestire un prototipo condiviso (Introduzione a Craft e a Invision).
4. Esercizi per ogni modulo teorico
Il responsive design è un concetto relativamente nuovo, ma è figlio di idee che conosciamo bene: le declinazioni e l'adattamento di un prodotto al contesto d'uso. In queste slide affrontiamo il punto di vista progettuale, prima che tecnico sul RWD e il web, a partire dal branding.
Web Domus Italia è una web agency leader nella creazione e nello sviluppo di applicazioni per iphone e android.
Crea siti web responsivi per la vostra impresa, vi assiste nell’e-commerce e nel web maketing.
Per di più è una delle migliori aziende che si occupa di ricostruzioni tridimensionali in arceologia.
Siti Web: parola visuale, analisi del lettore, usability dei testi ed accessi...bsdlover
Lezione #2 di Paolo Gatti all'Università degli Studi di Teramo, Facoltà di Scienze della Comunicazione, avente come tema "Siti Web: parola visuale, analisi del lettore, usability dei testi ed accessibilità".
Usabilità, comunicazione tecnica ed Help Online (HoL)KEA s.r.l.
Usabile è una cosa che impariamo e ricordiamo facilmente, che è efficace (ci permette di raggiungere lo scopo) ed efficiente (ci permette di farlo con il minore sforzo possibile), e il cui uso risulta dunque soddisfacente.
Ecco perché l’usabilità è importante nella comunicazione tecnica, in particolare quando realizziamo Help Online (HoL), e altre applicazioni dedicate all’erogazione e alla fruizione di informazioni via web, mobile e app.
Report sulla terza edizione dello storico libro di Steve Krug, Don’t Make Me Think. Un approccio di buon senso all’usabilità web e mobile, Tecniche Nuove, Milano, 2014
Il 2014 è stato l'anno del sorpasso del mobile sul desktop: i dati hanno infatti confermato che le persone passano sempre più tempo a navigare sul web da Smartphone o tablet, più di quanto ne passino giornalmente davanti a un PC.
Questi dato hanno ovviamente ripercussioni anche sulla SEO perché occorre considerare alcuni nuovi aspetti importanti, sia legati al sito che ai contenuti, iniziando a pensare “mobile first” prima di creare qualsiasi tipo di contenuto.
Vedremo di analizzare questi aspetti con Francesco De Nobili docente di “Comunicazione e web” all'Università di Bologna e dei corsi di formazione di Comunicazione Lavoro.
Le slide dell'intervento di Vidiemme e Rokivo all'evento Welcoming Cities a Rimini di Sabato 22 Marzo 2014.
Si parla di Google Glass e del progetto GoogleGlass4LIS
Usability of a website, how to make a website usable, the checklist, the users, the tools and testing of a business or personal website. Three user dogmas and a practical approach on how to improve usability and accessibility of websites. Google Checklists, loading time, number of clicks, objectives and user retention.
Similar to Best Practices per il Web Mobile by Luca Degli Esposti (20)
Fuzz-testing: A hacker's approach to making your code more secure | Pascal Ze...Codemotion
Increased complexity makes it very hard and time-consuming to keep your software bug-free and secure. We introduce fuzz-testing as a method for automatically and continuously discovering vulnerabilities hidden in your code. The talk will explain how fuzzing works and how to integrate fuzz-testing into your Software Development Life Cycle to increase your code’s security.
Pompili - From hero to_zero: The FatalNoise neverending storyCodemotion
It was 1993 when we decided to venture in a beat'em up game for Amiga. The Catalypse's success story pushed me and my comrade to create something astonishing for this incredible game machine... but things went harder, assumptions were slightly different, and italian competitors appeared out of nowhere... the project died in 1996. Story ended? Probably not...
Il Commodore 65 è un prototipo di personal computer che Commodore avrebbe dovuto mettere in commercio quale successore del Commodore 64. Purtroppo la sua realizzazione si fermò appunto allo stadio prototipale. Racconterò l'affascinante storia del suo sviluppo ed il perchè della soppressione del progetto ormai ad un passo dalla immissione in commercio.
Rivivere l'ebbrezza di progettare un vecchio computer o una consolle da bar è oggi possibile sfruttando le FPGA, ovvero logiche programmabili che consentono a chiunque di progettare il proprio hardware o di ricrearne uno del passato. In questa sessione si racconta come dal reverse engineering dell'hardware di vecchie glorie come il Commodore 64 e lo ZX Spectrum sia stato possibile farle rivivere attraverso tecnologie oggi alla portata di tutti.
Michel Schudel - Let's build a blockchain... in 40 minutes! - Codemotion Amst...Codemotion
There's a lot of talk about blockchain, but how does the technology behind it actually work? For developers, getting some hands-on experience is the fastest way to get familiair with new technologies. So let's build a blockchain, then! In this session, we're going to build one in plain old Java, and have it working in 40 minutes. We'll cover key concepts of a blockchain: transactions, blocks, mining, proof-of-work, and reaching consensus in the blockchain network. After this session, you'll have a better understanding of core aspects of blockchain technology.
Richard Süselbeck - Building your own ride share app - Codemotion Amsterdam 2019Codemotion
When was the last time you were truly lost? Thanks to the maps and location technology in our phones, a whole generation has now grown up in a world where getting lost is truly a thing of the past. Location technology goes far beyond maps in the palm of our hand, however. In this talk, we will explore how a ridesharing app works. How do we discover our destination?How do we find the closest driver? How do we display this information on a map? How do we find the best route?To answer these questions,we will be learning about a variety of location APIs, including Maps, Positioning, Geocoding etc.
Eward Driehuis - What we learned from 20.000 attacks - Codemotion Amsterdam 2019Codemotion
Eward Driehuis, SecureLink's research chief, will guide you through the bumpy ride we call the cyber threat landscape. As the industry has over a decade of experience of dealing with increasingly sophisticated attacks, you might be surprised to hear more attacks slip through the cracks than ever. From analyzing 20.000 of them in 2018, backed by a quarter of a million security events and over ten trillion data points, Eward will outline why this happens, how attacks are changing, and why it doesn't matter how neatly or securely you code.
Francesco Baldassarri - Deliver Data at Scale - Codemotion Amsterdam 2019 - Codemotion
IoT revolution is ended. Thanks to hardware improvement, building an intelligent ecosystem is easier than never before for both startups and large-scale enterprises. The real challenge is now to connect, process, store and analyze data: in the cloud, but also, at the edge. We’ll give a quick look on frameworks that aggregate dispersed devices data into a single global optimized system allowing to improve operational efficiency, to predict maintenance, to track asset in real-time, to secure cloud-connected devices and much more.
Martin Förtsch, Thomas Endres - Stereoscopic Style Transfer AI - Codemotion A...Codemotion
What if Virtual Reality glasses could transform your environment into a three-dimensional work of art in realtime in the style of a painting from Van Gogh? One of the many interesting developments in the field of Deep Learning is the so called "Style Transfer". It describes a possibility to create a patchwork (or pastiche) from two images. While one of these images defines the the artistic style of the result picture, the other one is used for extracting the image content. A team from TNG Technology Consulting managed to build an AI showcase using OpenCV and Tensorflow to realize such goggles.
Melanie Rieback, Klaus Kursawe - Blockchain Security: Melting the "Silver Bul...Codemotion
The document summarizes some of the security issues with blockchain technology. It discusses how blockchain is not a "silver bullet" and does not inherently solve problems like privacy and security of smart devices. It outlines various application security issues with complex code, protocols, and difficulty of updates on blockchains. Concerns over data immutability and security of smart contracts are also covered. The document questions whether blockchain truly provides the level of decentralization and anonymity claimed, and outlines some impossibility results and limitations of existing approaches to achieving security and privacy in blockchain systems.
Angelo van der Sijpt - How well do you know your network stack? - Codemotion ...Codemotion
The document provides an overview of the HTTP network protocol in its early stages of development. It summarizes the initial IMP (Interface Message Processor) software used to establish connections and transmit messages over the ARPANET. It outlines some early requirements for host-to-host software to enable simple and advanced use between computer systems. The document also describes the initial host software specifications, including establishing connections, transmitting data efficiently, and implementing error checking between connected systems. This was one of the first documents to define core aspects of the early HTTP network protocol to enable information exchange over the fledgling internet.
Lars Wolff - Performance Testing for DevOps in the Cloud - Codemotion Amsterd...Codemotion
Performance tests are not only an important instrument for understanding a system and its runtime environment. It is also essential in order to check stability and scalability – non-functional requirements that might be decisive for success. But won't my cloud hosting service scale for me as long as I can afford it? Yes, but… It only operates and scales resources. It won't automatically make your system fast, stable and scalable. This talk shows how such and comparable questions can be clarified with performance tests and how DevOps teams benefit from regular test practise.
Sascha Wolter - Conversational AI Demystified - Codemotion Amsterdam 2019Codemotion
Sascha will demonstrate the opportunities and challenges of Conversational AI learned from the practice. Both Technology and User Experience will be covered introducing a process finding micro-moments, writing happy paths, gathering intents, designing the conversational flow, and finally publishing on almost all channels including Voice Services and Chatbots. Valuable for enterprises, developers, and designers. All live on stage in just minutes and with almost no code.
Michele Tonutti - Scaling is caring - Codemotion Amsterdam 2019Codemotion
A key challenge we face at Pacmed is quickly calibrating and deploying our tools for clinical decision support in different hospitals, where data formats may vary greatly. Using Intensive Care Units as a case study, I’ll delve into our scalable Python pipeline, which leverages Pandas’ split-apply-combine approach to perform complex feature engineering and automatic quality checks on large time-varying data, e.g. vital signs. I’ll show how we use the resulting flexible and interpretable dataframes to quickly (re)train our models to predict mortality, discharge, and medical complications.
Pat Hermens - From 100 to 1,000+ deployments a day - Codemotion Amsterdam 2019Codemotion
Coolblue is a proud Dutch company, with a large internal development department; one that truly takes CI/CD to heart. Empowerment through automation is at the heart of these development teams, and with more than 1000 deployments a day, we think it's working out quite well. In this session, Pat Hermens (a Development Managers) will step you through what enables us to move so quickly, which tools we use, and most importantly, the mindset that is required to enable development teams to deliver at such a rapid pace.
James Birnie - Using Many Worlds of Compute Power with Quantum - Codemotion A...Codemotion
Quantum computers can use all of the possible pathways generated by quantum decisions to solve problems that will forever remain intractable to classical compute power. As the mega players vie for quantum supremacy and Rigetti announces its $1M "quantum advantage" prize, we live in exciting times. IBM-Q and Microsoft Q# are two ways you can learn to program quantum computers so that you're ready when the quantum revolution comes. I'll demonstrate some quantum solutions to problems that will forever be out of reach of classical, including organic chemistry and large number factorisation.
Don Goodman-Wilson - Chinese food, motor scooters, and open source developmen...Codemotion
Chinese food exploded across America in the early 20th century, rapidly adapting to local tastes while also spreading like wildfire. How was it able to spread so fast? The GY6 is a family of scooter engines that has achieved near total ubiquity in Europe. It is reliable and cheap to manufacture, and it's made in factories across China. How are these factories able to remain afloat? Chinese-American food and the GY6 are both riveting studies in product-market fit, and both are the product of a distributed open source-like development model. What lessons can we learn for open source software?
Pieter Omvlee - The story behind Sketch - Codemotion Amsterdam 2019Codemotion
The design space has exploded in size within the last few years and Sketch is one of the most important milestones to represent the phenomenon. But behind the scenes of this growing reality there is a remote team that revolutionizes the design space all without leaving the home office. This talk will present how Sketch has grown to become a modern, product designer's tool.
Dave Farley - Taking Back “Software Engineering” - Codemotion Amsterdam 2019Codemotion
Would you fly in a plane designed by a craftsman or would you prefer your aircraft to be designed by engineers? We are learning that science and empiricism works in software development, maybe now is the time to redefine what “Software Engineering” really means. Software isn't bridge-building, it is not car or aircraft development either, but then neither is Chemical Engineering. Engineering is different in different disciplines. Maybe it is time for us to begin thinking about retrieving the term "Software Engineering" maybe it is time to define what our "Engineering" discipline should be.
Joshua Hoffman - Should the CTO be Coding? - Codemotion Amsterdam 2019Codemotion
What is the job of a CTO and how does it change as a startup grows in size and scale? As a CTO, where should you spend your focus? As an engineer aspiring to be a CTO, what skills should you pursue? In this inspiring and personal talk, I describe my journey from early Red Hat engineer to CTO at Bloomon. I will share my view on what it means to be a CTO, and ultimately answer the question: Should the CTO be coding?
Joshua Hoffman - Should the CTO be Coding? - Codemotion Amsterdam 2019
Best Practices per il Web Mobile by Luca Degli Esposti
1. Luca Degli Esposti
UI Designer laureato all’ISIA di Urbino si occupa ormai
da anni di Design per il Web ed il Mobile.
Ma si “sporca” volentieri le mani anche con il codice.
Web Kreolo.com
Twitter @Kreolo
2. Il Tap è il nuovo Click
Siti pensati per il Web Mobile
4. User Experience
Luca Degli Esposti Kreolo.com
L'utenza mobile possiede interessi differenti.
Ha una differente condizione di connettività.
Le possibilità si sono aperte ad un'interazione più naturale e semplice.
5. Pensa Mobile, non Desktop
Luca Degli Esposti Kreolo.com
Evita una risoluzione Desktop, parti da un layout mobile-friendly.
Ripensa la navigazione.
Non aver paura di partire dalla prototipazione su carta.
5/81
6. Ricordati del Desktop
Luca Degli Esposti Kreolo.com
Offri un'esperienza coerente ed unica con il web desktop, un'esperienza
omogenea.
Adatta il più possibile le funzionalità del sito desktop ai dispositivi mobile.
7. Pensa agli utenti
Luca Degli Esposti Kreolo.com
Devono controllare informazioni in real-time? Intrattenersi?
Gestire attività legate al luogo in cui si trovano?
Comprendi le reali necessità degli utenti.
Ti aiuterà a semplificare la progettazione del layout.
8. Touch-friendly
Luca Degli Esposti Kreolo.com
Usa interazioni naturali: rendi tutto intuitivo, naturale, usa le gestures più
codificate, immediate e semplici (http://is.gd/AYd0nt).
Pensa all'uso prevalente di una sola mano.
Se hai 30''
Guarda questo bimbo con un iPhone (http://is.gd/ipUs9W).
9. Pattern
Luca Degli Esposti Kreolo.com
Usa pattern che gli utenti già conoscono (Es: Google Maps per il servizio
ricerca punti vendita, filiali o altro).
10. Device
Luca Degli Esposti Kreolo.com
Sfrutta le capacità del dispositivo dove possibile (Es: GPS integrato).
10/81
11. Semplifica
Luca Degli Esposti Kreolo.com
Limita la quantità di azioni richieste per la navigazione.
Il touchscreen per quanto avanzato espone maggiormente al rischio di
errori involontari.
Meno tap si traducono quindi in un minor numero di errori.
Meno errori, maggior gratificazione.
12. Coerenza
Luca Degli Esposti Kreolo.com
Utilizza le stesse modalità di navigazione in tutte le pagine.
Così aiuti gli utenti ad orientarsi e consenti loro di identificare i meccanismi
di navigazione più facilmente.
13. Focus
Luca Degli Esposti Kreolo.com
Poni l'informazione più importante ad inizio di titoli, paragrafi, liste (tecnica
del front loading), non nascondere ciò che gli utenti vogliono.
Così è più semplice e veloce capire se l'argomento è interessante.
14. Stop
Luca Degli Esposti Kreolo.com
Pensa all'eventualità che per pochi secondi/minuti le attività in corso
potrebbero essere sospese da fattori più importanti.
Fai in modo tale che l'utente possa tornare al punto in cui era senza
conseguenze per la navigazione.
16. Niente barra
Luca Degli Esposti Kreolo.com
Guadagna spazio.
Poche righe di codice JS ti permettono, al caricamento della pagina, di
nascondere la barra in alto degli indirizzi.
17. Linearizza
Luca Degli Esposti Kreolo.com
Prediligi un unica colonna, disponi i vari elementi uno sotto l'altro
nell'ordine definito nel markup.
Solo quando avrai più spazio (sui tablet) potrai pensare ad un layout a più
colonne (max 2).
18. Porzioni usabili
Luca Degli Esposti Kreolo.com
Suddividi il sito mobile nel giusto numero di pagine.
Se le pagine sono troppo lunghe, ci vorranno molti scroll.
Se sono troppo corte, costringi l'utente a fare molti tap su diversi link per
raggiungere l'informazione desiderata.
Alcuni esperimenti hanno dimostrato che gli utenti preferiscono fare
scrolling piuttosto che molti tap.
Una soluzione: inserisci elementi già “collassati” che si possono poi
espandere (gli Accordion).
19. Titoli
Luca Degli Esposti Kreolo.com
Fornisci un title breve ma descrittivo per ogni pagina: potrebbe venire
troncato direttamente dal browser o dall'etichetta dei bookmarks.
All'interno delle pagine invece, usa un markup strutturale (titolo, sottotitolo
poi paragrafo) con i tag appropriati (H1, H2, P).
20. No-Scroll
Luca Degli Esposti Kreolo.com
Limita lo scrolling ad una sola direzione, quella verticale.
Evita il più possibile uno scrolling secondario, se proprio devi, ponilo a
fondo pagina.
20/81
21. Touch-friendly
Luca Degli Esposti Kreolo.com
Utilizza elementi touch-friendly (Es: lo Zoom, il Drag-n-Drop).
Il Drag-n-Drop è un esempio perfetto di interazione naturale: simula il
“prendi e butta dentro” che facciamo con i prodotti ed il carrello della
spesa in un centro commerciale.
22. No-Zoom
Luca Degli Esposti Kreolo.com
Evita per qualsiasi ragione che l'utente debba zoomare.
Se proprio devi, fai fare lo Zoom con gestures standard (avvicinamento e
allontanamento delle dita): è un ottima metafora che riduce il gap
concettuale tra effetto desiderato/azione necessaria (Golfo dell'esecuzione
di Norman).
Non inserire gli elementi grafici “+” e “–“ in stile Google Maps su web
desktop.
23. Portrait o Landscape
Luca Degli Esposti Kreolo.com
Considera l'importanza e le possibilità di un orientamento piuttosto che
l'altro.
Pensa all'uso, alle esigenze ed ai benefici della fruizione in verticale rispetto
a quella in orizzontale dove ho si più spazio ai lati, ma a parità di
contenuto, dovrò fare quindi molti più scroll in verticale?
24. Menù
Luca Degli Esposti Kreolo.com
Inserisci menù drill-down.
Pensa al comportamento degli utenti.
Per gli utenti che vogliono passare a nuovi contenuti in modo rapido è
preferibile il menù nella parte inferiore della pagina.
Per gli utenti che preferiscono scegliere è invece meglio avere il menù subito
in cima alla pagina.
Posiziona i contenuti più importanti sempre nella parte superiore.
Una soluzione: posiziona un menù “sticky” (fisso in alto). Uno studio ha
dimostrato che rende il 22% più facile e veloce la navigazione facendo
guadagnare all'utente fino a 36'' in una navigazione totale di 5'.
25. Back to Top
Luca Degli Esposti Kreolo.com
Se l'utente ha fatto diversi scroll, inserisci sempre a fondo pagina un link
“Torna su” per tornare all'inizio della sezione/pagina o alla navigazione
principale.
25/81
27. URI corti
Luca Degli Esposti Kreolo.com
Mantieni gli indirizzi delle pagine mobile i più corti possibile, dal momento
che la loro digitazione sui devices risulta un'attività difficoltosa: riduci così le
possibilità di errore.
Se possibile, registra con un nome corto anche il nome di dominio.
28. Pochi “tap”
Luca Degli Esposti Kreolo.com
Analizza (tramite Google Analytics) le statistiche ed i pattern (fussi) più
usati dagli utenti e progetta quindi un layout in cui l'informazione più
ricercata sia raggiungibile con il minor numero di pagine.
Studi recenti, hanno dimostrato che un utente preferisce non dover seguire
più di 4 “tap” per raggiungere il proprio obiettivo.
29. Poche voci di Menù
Luca Degli Esposti Kreolo.com
Analizzando le aree di visualizzazione disponibili sui browser mobile, il
consiglio è di non inserire più di 5 pulsanti di navigazione per menù.
E per riadattare un precedente progetto web desktop con decine e decine
di voci di menù?
Una soluzione: adotta dei menù annidati o sotto forma di liste e metti a
disposizione il minor numero di scelte possibili pilotando, per quanto
possibile, la navigazione.
30. Solo testo
Luca Degli Esposti Kreolo.com
E' plausibile che nel sito mobile ci siano svariati collegamenti a pagine,
immagini, file, effetti.
Per i link “tappabili” usa quindi del semplice testo, evita di far scaricare una
seppur piccola immagine all'utente solo per mostrare un pulsante grafico.
Non tanto per il lato estetico quanto per quello pratico: decine di immagini
di pochi KB sotto rete WiFi sono scaricate in un nulla, ma in mobilità con
scarsa copertura, possono anche non venire scaricate: quei link non
funzioneranno.
30/81
31. Target
Luca Degli Esposti Kreolo.com
Fai in modo tale che l'utente sappia in anticipo dove un link porta in
maniera da permettergli di valutare se è interessato a seguire il link o meno:
identifica chiaramente il target di ciascun link ed indica sempre accanto al
link il formato del file a cui il link porta.
Dai nomi significativi ai link, specifica la destinazione e se questo porta ad
un file di grandi dimensioni e di formato inatteso rispetto all'ultima parte
della navigazione, avverti l'utente dandogli un'idea della dimensione della
risorsa.
L'utente non vuole aspettare.
A maggior ragione per una cosa che non vuole.
32. No-PopOver et similia
Luca Degli Esposti Kreolo.com
Evita di aprire delle finestre di PopOver (o simili), evita il refresh automatico
delle pagine, non utilizzare markup che applica un redirect automatico
delle pagine ed evita l'uso di Flash.
PopOver, refresh e redirect generano confusione nell'utente ed errori con
“tap” accidentali sbagliati, aumentano i costi di connessione e ritardano
l'interazione con il sito mobile.
33. Dimentica l'hover
Luca Degli Esposti Kreolo.com
Sui monitor touch non esiste l'evento “hover” tramite CSS ma solo tramite
codice JS: non impostarlo sui link dove l'utente deve fare solo “tap”.
Fai però capire all'utente quale oggetto è “a fuoco” dopo il “tap”: in un
menù espanso ad esempio puoi cambiare il colore del carattere, lo sfondo
del link/pulsante oppure aumentarne il padding.
Puoi invece creare una sorta di effetto “hover” su elementi con interazioni
“tap and hold” (tieni premuto) allungando leggermente i tempi di reazione.
34. Rassicura
Luca Degli Esposti Kreolo.com
Semplifica la navigazione del sito mobile con pulsanti “indietro” e “home”
chiari e ben visibili in qualsiasi momento.
Se puoi, in ogni pagina, non inserire più di 7 link di navigazione.
Se non ci sono vincoli particolari, inserisci le “briciole di pane”: l'utente già
le conosce e capisce subito dove si trova nel sito mobile.
35. Pensa locale
Luca Degli Esposti Kreolo.com
Ai piedi della pagina inserisci sempre l'indirizzo della tua attività o uno
store locator sulla pagina dei contatti.
Dove possibile, utilizza il GPS integrato con mappe e indicazioni stradali.
Se fornisci un numero di telefono utilizza la funzionalità “click-to-call”: con
una riga di codice puoi rendere il numero attivo, in modo tale che dopo il
“tap” su di esso il device già proponga se chiamare quel numero.
35/81
36. Versione completa
Luca Degli Esposti Kreolo.com
Fornisci sempre un link, ben visibile e in fondo alla pagina, alla versione
completa “desktop” del sito, questo per permettere all'utente di avere una
visione “d'insieme” adattata alle sue esigenze.
Viceversa, nel sito desktop e solo se visto da devices mobile conviene
sempre mettere un link alla versione mobile, nel caso gli utenti volessero
tornare indietro.
38. Font
Luca Degli Esposti Kreolo.com
Molto importante in tema di tipografia è la giusta scelta dei fonts.
Smartphone e tablet dispongono di un set di caratteri molto limitato, su iOS
puoi controllare su http://iosfonts.com
Una soluzione: puoi ricorrere ai Web Fonts, magari sfruttando servizi come
Google Web Fonts per caricare font personalizzati, ma non abusarne.
Ricorda che siamo in mobilità, la parola d'ordine è semplificare: non far
scaricare quindi centinaia di KB per diversi Web Fonts, limita il numero di
fonts e fai scaricare solo le versioni che userai effettivamente.
39. Visibilità
Luca Degli Esposti Kreolo.com
Progetta tutto al fine della visibilità, la lettura dei contenuti deve essere
semplificata anche in ambienti poco illuminati, senza affaticare la vista.
Anche la luce del sole è uno dei peggiori nemici.
Una soluzione: metti in grassetto le parti di testo più importanti, aumenta il
contrasto tra colore del testo e colore di sfondo.
40. 5W del giornalismo
Luca Degli Esposti Kreolo.com
Gli utenti non leggono, ma scorrono l'informazione: usa quindi uno stile
breve e diretto.
Usa le famose 5W del giornalismo, Chi, Cosa, Dove, Quando e Perchè
(http://is.gd/pnhgm4) prima di lunghi blocchi di testo: questo mette l'utente
in condizione di decidere se approfondire o meno l'informazione
presentata.
40/81
41. Piccoli blocchi
Luca Degli Esposti Kreolo.com
Evita grandi e lunghi blocchi di testo ed usa un linguaggio semplice e
chiaro.
Un buon riferimento standard può essere un testo di max. 500 caratteri,
equamente diviso in 3 paragrafi.
Dove possibile, usa gli elenchi puntati.
42. Font-size
Luca Degli Esposti Kreolo.com
Il font-size ottimale è di minimo 14px, una dimensione leggibile ma non
troppo grande.
Per fare in modo tale che il font si ridimensioni correttamente, preferisci
sempre misure in “em” piuttosto che in “px”.
Una soluzione: parti dall'impostazione del body (font-size:100%) e poi
specifica il resto dei testi in “em”.
43. Kerning & Line-Height
Luca Degli Esposti Kreolo.com
Aumenta il Kerning, cioè lo spazio orizzontale tra le parole, al fine di
aumentarne così la leggibilità.
Aumenta la line-height tra le singole righe di testo, questo evita la
pesantezza del blocco e l'affaticamento degli occhi.
Se possibile, aumenta gli spazi orizzontali tra il blocco di testo ed i bordi
della finestra del browser mobile.
44. H1, H2, P
Luca Degli Esposti Kreolo.com
Gli utenti mobile hanno un bisogno che deve essere soddisfatto in
brevissimo tempo.
Per questo dedicano poca attenzione ai testi informativi.
Utilizza una formattazione corretta (H1, H2, P) per favorire la leggibilità e
le diverse priorità del messaggio che vuoi comunicare.
45. Linguaggio
Luca Degli Esposti Kreolo.com
Parla la “lingua” del tuo utente.
Non si tratta di fornire la lingua parlata dal tuo utente, si tratta di parlare
un linguaggio vicino a quello del tuo utente: non dare per scontati concetti
solo a noi noti.
45/81
47. Tastiera, ti odio
Luca Degli Esposti Kreolo.com
L'input da tastiera su interfacce touch resta il vero problema di questi
devices: certa di limitarne il più possibile l'attività.
Evita l'immissione di testo libero e fornisci se possibile del testo predefinito
da selezionare: usa ad esempio i menù a tendina (select), pulsanti radio e
checkbox su elenchi.
Oltre alla scarsa usabilità, c'è un fattore puramente di layout: sui device
touch la tastiera compare e porta via spazio utile, tienilo sempre in
considerazione per organizzare gli elementi in modo che non spariscano
quelli utili per la “call to action”.
48. Autocompletamento
Luca Degli Esposti Kreolo.com
Una delle cose più belle che puoi fare per l'utente è l'auto-completamento.
Digitare poche lettere e ricevere suggerimenti sulle parole più comuni,
cliccando poi su di esse per completare l'inserimento è una delle
funzionalità che l'utente, su web mobile, ama di più.
49. Select & Slider
Luca Degli Esposti Kreolo.com
Se le opzioni di inserimento possibili sono limitate (50, 100 al max) è molto
più veloce usare un controllo di tipo “select” piuttosto che richiedere
all'utente l'input manuale da tastiera.
In caso di input numerici (limitati) si può anche utilizzare un controllo di tipo
“slider” (Es. come impostare la sveglia su iOS).
50. Input HTML5
Luca Degli Esposti Kreolo.com
Con HTML5 sono stati inseriti molti altri type di input: email, date, tel,
number, search, url (http://is.gd/TeYRee).
Questi “suggerimenti” dati al device, aumentano la semantica ed aiutano
l'utente nell'input testuale (Es. type=”url”).
Usa un ordine logico: posiziona le label (etichette) in maniera tale che si
dispongano correttamente in relazione all'input.
50/81
51. Pochi campi
Luca Degli Esposti Kreolo.com
Su un layout mobile, i “form” diventano ancora più determinanti: pulsanti
piccoli, assenza di feedback tattili al “tap”, input complessi.
Gli utenti in difficoltà o che non sono sicuri di come compilare un campo,
abbandonano l'interfaccia.
Inserisci moduli brevi con il minor numero possibile di campi, pensa ad
inserire solo i campi strettamente necessari.
53. 44pixel
Luca Degli Esposti Kreolo.com
Sui device touch, il nostro dito ha una scarsa precisione.
Uno studio del MIT (PDF – http://is.gd/DJwoDH) ha scoperto una
grandezza media per un polpastrello di 8/10 mm.
Da qui emerge la dimensione minima consigliata per ogni elemento
interattivo che deve essere “tappato”: su uno schermo Retina (Es: iPhone4)
è di 60x88 pixel (Apple consiglia 88x88px).
Segui la semplice equazione “+ importante = + grande” in modo da
facilitare la vita dell'utente. Nei link, aumenta il padding fino a portare
l'ingombro alla dimensione minima consigliata.
54. Fat finger
Luca Degli Esposti Kreolo.com
I display touch implicano l'uso delle dita, non sai quali dita però.
Non pensare solo alla regola 44pixel, ma progetta anche per chi ha il
pollice più grande del tuo, considera il fattore “fat finger” nominato dal
Nielsen Norman Group (NNG) che consiglia elementi minimi di 1x1 cm.
Nell'articolo TouchTargetSizes (http://is.gd/W2SCgj) troverai una
panoramica esaustiva sulle dimensioni minime suggerite dai principali
produttori mondiali di smartphone.
Le popolazioni che da recenti studi hanno dimostrato di avere mani e quindi
dita più grandi rispetto alla media, sono americani, inglesi, messicani,
australiani e canadesi.
55. Fai spazio
Luca Degli Esposti Kreolo.com
Importante non è solo la dimensione ma anche la disposizione dei pulsanti.
Una spaziatura di 2/3 mm. è lo standard.
L'eccessiva vicinanza tra diversi “target” aumenta le probabilità di errore,
cioè selezionare involontariamente il comando sbagliato, riducendo
l'usabilità del sito mobile.
Evita quindi pulsanti troppo vicini tra loro.
55/81
56. Occhio alle mani
Luca Degli Esposti Kreolo.com
Nelle interfacce touch il dispositivo di input corrisponde al dispositivo di
output (lo schermo).
Pensa quindi alla posizione delle mani, potrebbero coprire elementi
importanti dell'interfaccia proprio quando servono.
Posiziona le informazioni in modo che non possano venire coperte dalle
mani: evita di posizionare le etichette sotto gli elementi di interazione, ma
mettile sempre sopra.
58. L'interazione costa
Luca Degli Esposti Kreolo.com
Gli utenti non fanno “tap” su ciò che non conoscono.
Rendi quindi icone, link e titoli parlanti.
Aumenta l'affordance visiva, fai quindi in modo tale che il processo mentale
per capire cosa accadrà o come interagire con un dato elemento grafico,
sia praticamente nullo: deve essere intuitivo, automatico.
59. Design minimalista
Luca Degli Esposti Kreolo.com
Rendi il sito mobile un luogo chiaro, quindi semplifica.
Un buon design non deve disturbare la vista né la consultazione, rendilo
quindi poco decorato, elimina i fronzoli, inserisci pochi elementi grafici e di
quelli che inserisci, chiediti sempre se portano davvero un valore aggiunto
all'esperienza dell'utente.
Se puoi, pensa senza icone, piuttosto abituati ad usare particolari gestures.
60. Colore
Luca Degli Esposti Kreolo.com
Assicurati che l'informazione veicolata dal solo colore sia disponibile anche
senza colore (pensa agli ipovedenti).
I link ad esempio, non dovrebbero essere differenziati dal resto del testo
solo da una scelta cromatica, ma anche dalla sottolineatura.
Assicurati che la combinazione tra i colori di sfondo e quelli del testo in
primo piano fornisca un contrasto sufficiente.
60/81
61. Immagini
Luca Degli Esposti Kreolo.com
Quando usi immagini di sfondo, assicurati che il contenuto risulti
completamente leggibile.
Usa solo immagini che risultano con una buona resa (pensa anche agli
schermi Retina).
62. Icon
Luca Degli Esposti Kreolo.com
Capita che l'utente trovi interessante il sito mobile e decida di salvarlo sul
suo device (come fosse una App nativa).
E' importante quindi che tu aggiunga un icona identificativa (web clip) al
sito mobile.
L'atto di fornire l'icona, personalizza maggiormente il sito mobile, lo rende
più curato ed immediatamente individuabile nell'insieme delle altre icone
già presenti sul device dell'utente.
63. Responsive Design
Luca Degli Esposti Kreolo.com
Rendi il sito mobile adattabile (responsive): un solo sito sia per smartphone
che per tablet (che per desktop).
Il Responsive Design indica un design, sviluppato con le media queries,
facilmente fruibile su tutti i dispositivi portatili attraverso l'utilizzo di layout
fuidi e miglioramenti progressivi.
Ottimizza le immagini fornendo diversi formati per diverse risoluzioni,
ottimizza le risorse come gli script, riadatta i contenuti nascondendo
elementi presenti sul web desktop con la proprietà “display:none” e
riadatta tutti gli elementi dell'interfaccia utente (form, menu, slider) con
versioni specifiche e studiate per i dispositivi mobile.
64. Icon-font
Luca Degli Esposti Kreolo.com
Avrai spesso la necessità di ridimensionare icone ed altri elementi grafici.
La tecnica degli Sprites non è una tecnica scalabile, si tratta sempre di
immagini bitmap.
La tecnica che consiglio è utilizzare un web font che contenga icone al
posto di caratteri tipografici: un Icon Font.
E' vettoriale, è scalabile a piacere, gode di un'ottima accessibilità e
compatibilità browser e può essere embeddato in una pagina web mobile
usando la direttiva @font-face.
Font Squirrel ha un suo generatore di icon font, se vuoi fare qualche test
puoi usare il loro “Modern Pictograms” (http://is.gd/A57B4Z).
65. CSS
Luca Degli Esposti Kreolo.com
Le tabelle sono morte.
Sono sintatticamente errate, appesantiscono la pagina rendendola più lenta
da caricare e non sono amiche degli spiders dei motori di ricerca.
Evita quindi le tabelle ed usa solo i fogli di stile (CSS) per il layout e la
presentazione.
65/81
67. Max 5''
Luca Degli Esposti Kreolo.com
Più della metà degli utenti che riscontrano problemi alla prima connessione
difficilmente tornano a visitare lo stesso sito.
Il 60% degli utenti vuole la pagina richiesta in 3 secondi, la soglia massima
è di 5 secondi, poi si abbandona il sito.
Verifica quindi la velocità generale del sito.
68. CSS
Luca Degli Esposti Kreolo.com
Rimuovi dagli elementi la dichiarazione “position:fixed”, questo permette di
migliorare la velocità di scrolling sui dispositivi mobile.
Fai in modo tale che le dimensioni dei CSS siano piccole: non abbondare
nell'uso delle classi, inserisci solo gli stili davvero usati, raggruppa gli
elementi HTML che condividono lo stesso stile e minifica i files.
Usa i CSS, non immagini, per gradienti e arrotondamenti di elementi.
Usa i CSS, non JS, per animazioni e trasformazioni 3D.
Usa .classi e #id, non inserire stili inline nell'HTML.
69. Immagini
Luca Degli Esposti Kreolo.com
Se l'utente non ha uno schermo Retina, non fargli comunque scaricare
immagini molto grandi, riservando il ridimensionamento ai CSS o a JS.
Imposta con le media queries, le sole immagini grandi da caricare, solo nel
caso il dispositivo sia con schermo Retina.
70. Script
Luca Degli Esposti Kreolo.com
Limita l'uso di script che potrebbero appesantire il sito ed in tutti i casi usa
agili e snelle micro-architetture JS (AJAX, ad esempio con jQuery Mobile).
70/81
71. Richieste HTTP
Luca Degli Esposti Kreolo.com
Riduci le richieste HTTP esterne, come i pulsanti social di Facebook e Twitter.
Per rendere fuido il caricamento, riduci anche le richieste HTTP interne,
riduci il numero di immagini ed evita di concatenare troppi JS e CSS: usa un
solo file.
72. Application Cache
Luca Degli Esposti Kreolo.com
Usa tecniche di application cache (ma fai molta attenzione) solo per il
contenuto statico, quello che difficilmente cambierà: immagini, script, stili.
Questo rende il sito mobile in parte più veloce e visualizzabile anche senza
una connessione attiva.
74. Gli errori capitano
Luca Degli Esposti Kreolo.com
Rendi informativi i messaggi d'errore e gli avvisi: devono aiutare l'utente a
rimediare all'errore e fargli capire come non ricrearlo.
Offri sempre una “via d'uscita” per tornare allo stato precedente, come il
tasto “Indietro” o “Torna alla Home”.
76. Provalo
Luca Degli Esposti Kreolo.com
Pensa agli spaccati di realtà nei quali verrà usato il sito mobile.
Prova tu stesso a porti un obiettivo che potrebbe avere l'utente e simula la
navigazione in diversi contesti, anche pensando alle distrazioni che
causano (http://is.gd/y5fuAJ), ai tempi che si hanno a disposizione,
all'illuminazione e ai rumori di sottofondo.
Una ricerca presentata al Mobile HCI (http://is.gd/IwhDvE) ha dimostrato
che rispetto all'essere fermi, in movimento, per la selezione di bottoni si ha
il 23% di errori ed un 31% di tempo richiesto in più. Per la lettura di brevi
testi, un 23% di tempo richiesto in più.
Aumentando del 40% i bottoni si è recuperata la prestazione normale degli
utenti, per i testi invece non vi è stato alcun recupero poiché a testi più
grandi sono corrisposti molti più scroll nella navigazione.
77. Testa
Luca Degli Esposti Kreolo.com
Prima di partire con lo sviluppo, testa la navigazione con prototipi cartacei.
Una volta entrato nello sviluppo, testa costantemente il sito mobile sugli
emulatori (http://www.browserstack.com).
Ma non pensare che un emulatore basti, cerca di fare diversi test, su
dispositivi reali.
78. Verifica
Luca Degli Esposti Kreolo.com
Verifica il sito mobile con il checker W3C (http://validator.w3.org/mobile)
proprio come faresti con i validatori CSS ed HTML.
Ti permette di verificare il peso generale del sito e dei singoli file, le
richieste HTTP, le richieste esterne e molto altro.
79. Ascolta
Luca Degli Esposti Kreolo.com
Fai dei test reali con utenti reali e partecipa ai test.
Registra il test con una videocamera posizionata su schermo/mani del
tester, fai in modo tale di non staccare mai lo sguardo dal tester.
Analizza le statistiche ed i pattern (fussi) più usati dai tuoi utenti tramite
Google Analytics.
Effettua le modifiche che ritieni opportune una alla volta e monitora poi
l'ottimizzazione con un processo continuo. Capirai quali modifiche siano
davvero da tenere e quali siano invece da eliminare.
81. Osserva
Luca Degli Esposti Kreolo.com
Il primo vero sforzo di un progettista dovrebbe essere l'osservazione.
E' importante osservare ciò che ci circonda, capire quali sono i margini per
fornire alle persone esperienze innovative ed appaganti.
Prenditi le prossime giornate per guardare veramente cosa fanno le
persone e non solo per guardare le specifiche tecniche dell'ultimo device.