{"id":5487,"date":"2020-05-11T12:00:46","date_gmt":"2020-05-11T10:00:46","guid":{"rendered":"https:\/\/www.neurowebdesign.it\/it\/?p=5487"},"modified":"2021-06-21T12:49:23","modified_gmt":"2021-06-21T10:49:23","slug":"mobile-first-ux-design","status":"publish","type":"post","link":"https:\/\/www.neurowebdesign.it\/it\/mobile-first-ux-design\/","title":{"rendered":"Mobile First & Ux Design: la chiave per il tuo progetto di successo"},"content":{"rendered":"
[vc_row][vc_column][vc_column_text]Nel 2010, Eric Schmidt, CEO di Google affermava al Mobile World Congress che i designer avrebbero dovuto iniziare a progettare le interfacce in un\u2019ottica Mobile First<\/strong>. Il mercato degli smartphone si sarebbe sempre pi\u00f9 espanso e sempre pi\u00f9 di frequente gli utenti avrebbero fatto accesso ad internet dai propri dispositivi mobili.\r\n\r\nDa allora sono passati 10 anni, un lasso di tempo ampio se si calcolano i ritmi frenetici con cui evolve la tecnologia, eppure tuttora non \u00e8 raro imbattersi in siti web non adatti ad essere navigati da device con schermo ridotto.\r\n\r\nTi \u00e8 mai capitato di aprire una pagina internet ed essere costretto a “zoomare” per vederne chiaramente i contenuti? Ecco, stiamo parlando esattamente di questo.\r\n\r\nSe calcoliamo che 5,19 miliardi di persone si connettono a internet da mobile (dato del 2019), capiamo subito come avere un sito non ottimizzato per smartphone possa essere un forte limite al giorno d’oggi<\/strong>.\r\n\r\nIn questo articolo non ci soffermeremo solamente sull’importanza di avere un sito ottimizzato da mobile, ma ci focalizzeremo sull’approccio migliore per farlo<\/strong>. Un approccio di cui sicuramente avrai gi\u00e0 sentito parlare e che viene racchiuso sotto il concetto di Mobile First.[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_single_image image=”5495″ img_size=”full” alignment=”center”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]\r\n[\/vc_column_text][vc_column_text]\r\n

Che cosa si intende per Mobile First<\/strong><\/h2>\r\nProgettare Mobile First<\/strong>\u00a0significa disegnare un’interfaccia partendo dalla sua versione mobile<\/strong>, per arrivare solo in un secondo momento al suo layout “ampliato” e ottimizzato per schermo desktop.\r\n\r\nSeppur il concetto possa risultare molto semplice, dal lato pratico si tratta di un approccio totalmente differente rispetto al passato. Le web agency sono sempre state abituate a progettare principalmente interfacce desktop, in quanto l’accesso ad internet \u00e8 stato per anni possibile solo da pc o notebook. Quindi da dispositivi con schermi ben pi\u00f9 grandi rispetto a quelli di uno smartphone.\r\n\r\nL’avvento di quest’ultimi e dei tablet ha per\u00f2 stravolto le carte in tavola. Schermi pi\u00f9 piccoli, utilizzati per lo pi\u00f9 verticalmente e non pi\u00f9 orizzontalmente, spazi pi\u00f9 ristretti, la necessit\u00e0 di rendere i pulsanti cliccabili anche da un dito (pensate alle dimensioni del vostro pollice rispetto ad una semplice cursore). I siti andavano riprogettati per questi nuovi dispositivi.\r\n\r\n\u00c8 nata quindi la necessit\u00e0 di creare siti “Mobile-friendly<\/strong>“. Tra le tecniche pi\u00f9 utilizzate negli anni per riprogettare i siti in ottica mobile vi \u00e8 quella “Responsive<\/strong>“.[\/vc_column_text][vc_single_image image=”5493″ img_size=”full” alignment=”center”][vc_column_text]\r\n

Responsive Design vs. Mobile First<\/strong><\/h2>\r\nIl “Responsive Web Design<\/strong>” \u00e8 una tecnica di progettazione web che permette ai siti di adattarsi automaticamente al dispositivo su cui vengono visualizzati. I diversi elementi che compongono l’interfaccia si “muovono” al variare delle dimensioni dello schermo, in modo tale che vengano sempre visti correttamente e che favoriscano l’usabilit\u00e0 del sito in qualsiasi contesto.\r\n\r\nQuello che accade a livello pratico \u00e8 che un sito viene prima realizzato nella sua versione desktop per essere pensato solo in un secondo momento in una variante mobile<\/strong>, in cui gli stessi elementi vengono riposizionati per far fronte alle caratteristiche dello schermo ridotto.\r\n\r\nCreando un sito mobile in ottica responsive si avranno gli stessi contenuti della versione desktop, riassemblati per essere fruibili da mobile. Ma non \u00e8 detto che sia la soluzione ideale.<\/strong>\r\n\r\nLe immagini orizzontali possono sembrare troppo piccole se viste su uno smartphone e quindi perdere di appeal se molto dettagliate. Un testo, seppur possa non sembrare troppo lungo visto in un monitor, pu\u00f2 comunque non venir letto da smartphone, e quindi essere superfluo.\r\n

Meglio un sito web Mobile First o Responsive?<\/strong><\/h3>\r\nPer questi ed altri motivi, negli ultimi anni si \u00e8 vista sempre pi\u00f9 un’inversione di rotta nella progettazione delle interfacce web, preferendo l’approccio Mobile First <\/strong>a quello Responsive.\r\n\r\nQuesto metodo consente di ottimizzare i contenuti,<\/strong> evitare di dilungare eccessivamente i testi, ma soprattutto progettare i siti affinch\u00e9 siano pi\u00f9 interattivi e meno descrittivi. Puntare maggiormente all’aspetto emozionale<\/strong> attraverso immagini, forme e colori, piuttosto che a quello razionale.\r\n\r\nSi vanno perci\u00f2 a creare layout che anche da desktop risultino meno opprimenti e pi\u00f9 ariosi, ma che allo stesso tempo regalino una un’esperienza di navigazione soddisfacente<\/strong> in chi li naviga. Perch\u00e9 un contenuto pensato per uno smartphone meglio si adatter\u00e0 alla visione su uno schermo pi\u00f9 ampio, rispetto ad uno progettato per una visione da desktop se viene visto da uno smartphone.\r\n\r\nLeggi anche: <\/strong>WebDesign e NeuroWebDesign: facciamo chiarezza<\/a>[\/vc_column_text][vc_single_image image=”5494″ img_size=”full” alignment=”center”][vc_column_text]\r\n

Mobile First: le 5 migliori pratiche di UX<\/strong><\/h2>\r\nNel corso degli anni NeuroWebDesign ha condotto diversi test su siti web pensati apposta per dispositivi mobile. Seppur ognuno avesse le proprie peculiarit\u00e0, spesso ci siamo trovati di fronte alle medesime problematiche, a cui seguivano consigli simili.\r\n\r\nTra le soluzioni vincenti che solitamente offriamo per migliorare la user experience di un sito web mobile questi sono 5 punti che riteniamo fondamentali:\r\n