Share
Recentemente abbiamo pubblicato un articolo sul passaggio attuale all'impatto della navigazione da tablet sul web design. Questo è un cambiamento importante per il settore tecnologico, ma anche per i web designer che sono ora incoraggiati a considerare la piattaforma tablet compatibile. Tuttavia, allo stesso tempo, c'è un altro cambiamento in corso: una transizione dalle interfacce centrate sul mouse a quelle orientate verso le app.
Un'app Web è, per dirla semplicemente, un'applicazione che si basa su una connessione Internet per funzionare. Niente è archiviato localmente ed è tutto nel cloud. C'è un certo numero di vantaggi: tutto è accessibile ovunque, c'è poca preoccupazione per le prestazioni, il guasto del disco rigido non significa perdita di lavoro e la maggior parte sono multipiattaforma. Pertanto, per gli sviluppatori di applicazioni, questa è una proposta interessante che potrebbe significare che le app sono disponibili per un segmento più ampio del loro potenziale pubblico.
C'è una netta differenza tra un web App e una reteposto. Tuttavia, quel dibattito non è l'argomento dell'articolo. Vedremo invece un altro cambiamento nel design del Web in quanto il design multi-piattaforma e app-centrico diventa molto più popolare e tutto, dalla navigazione alle forme, è influenzato.
Questo è, forse, il più grande significato in questo cambiamento. Il caso con qualsiasi app è che deve essere il più semplice possibile per non frustrare eccessivamente un utente. Tuttavia, ogni app ha uno scopo e un obiettivo da raggiungere in seguito all'interazione dell'utente. Pertanto, le app web devono concentrarsi sulle funzioni chiave molto più di un sito web convenzionale.
La schermata iniziale di Facebook quando si è disconnessi. Questa enfasi è evidente non solo nelle app Web stesse, ma anche nelle loro splash page prima di un accesso. Se prendiamo su Facebook come esempio, la sezione più grande della pagina è il modulo di registrazione perché è quello che la pagina principale deve fare: guadagnare più utenti.
C'è anche una rotazione secondaria orientata all'utente su questa teoria. Ad esempio, se qualcuno sta compilando un modulo sulla pagina web, c'è una bassa probabilità che voglia ripristinare tale modulo. La possibilità che compiano il loro nome alla prima volta è più grande e, quindi, dovrebbe esserci una maggiore enfasi sul pulsante di sottomissione.
Il modulo di accesso a ThemeForest presenta un pulsante di invio abbastanza ampio in quanto questa è l'azione che la maggior parte degli utenti vorranno intraprendere. Tuttavia, ci sono anche i link "Password dimenticata / nome utente" per coloro che ne hanno bisogno, ma questi sono più piccoli.
Questa idea è un ceppo di gerarchia visiva in quanto l'obiettivo principale di una specifica pagina web è l'elemento più evidente e visibile in quella pagina.
Un'altra conseguenza è l'aumento di un particolare stile di progettazione delle stesse app Web. Hai mai incontrato un sito web che dovrebbe appartenere al tuo dock (o il menu Start se sei su Windows)? Beh, ci sono alcuni esempi che rendono un'applicazione web apparentemente nativa su tutte le piattaforme in modo elegante attraverso l'uso di una varietà di sfumature e ombre.
Ciò non è evidente solo nelle app Web destinate all'uso desktop, ma anche nei dispositivi mobili. Molti sviluppatori più piccoli scelgono di creare applicazioni Web mobili su app native per risparmiare sui costi e sulle curve di apprendimento. Questo metodo non solo funziona con la creazione di app web originali, ma anche con temi popolari come WordPress (come descritto nella sessione MobileTuts +).
Mostra all'utente ciò di cui ha bisogno, non tutto ciò che non ha.
C'era un tempo in cui, se si desidera eseguire un'azione in un'applicazione web complessa, è necessario scorrere e passare attraverso diversi "livelli" prima di ottenere una cosa del genere. Tuttavia, con la navigazione specifica del contesto, questo processo è molto più semplice. La teoria generale dietro è che un utente non richiede l'accesso a ogni opzione in ogni momento e che dovrebbero essere mostrati solo quelli rilevanti per la sua situazione attuale.
Questo tipo di navigazione specifica per lo scenario viene generalmente ottenuta mediante l'uso della navigazione di secondo livello. L'analogia più vicina non basata sul web che posso fornire riguarda Microsoft Office e il modo in cui utilizza un layout a nastro per l'usabilità. Le sezioni principali sono intitolate e con un semplice clic del mouse vengono visualizzate tutte le opzioni pertinenti.
Un modo semplice per riassumere questo è mostrare all'utente ciò di cui ha bisogno, non tutto ciò che non ha. E questa stessa teoria basata sul contesto può essere applicata ad altri elementi come le finestre modali a comparsa che mostrano gli elementi richiesti solo se l'utente lo desidera.
Microsoft Office è un esempio di utilizzo diffuso di un menu contestuale. Questo sembra un po 'come discendere dagli argomenti che abbiamo discusso in precedenza, ma questi tre elementi possono avere un grande impatto sul web design. Aggiungendo ombre a un pulsante, ad esempio, rendilo popout e quasi come un disegno che non è più piatto.
Considera quindi l'aggiunta di ombre a una finestra modale e osserva come crea un senso di definizione tra il contenuto originale e il nuovo frame. Solo questo può rendere un sito Web più interattivo in quanto diventa multistrato come un'app nativa. Quindi considera gli effetti come il contenuto modifica l'opacità in circostanze diverse per creare una nuova dimensione complessiva del contenuto stesso.
Optare per i gradienti può anche avere un impatto duraturo sul design finale. Proprio come le sfumature si accumulano, il design semplicemente "si apre" di più e sembra 3D quando viene utilizzato all'unisono con ombreggiamento interno.
Notate come l'immagine giusta assomiglia a due livelli, mentre quella sinistra no. Dal momento che un'applicazione web intende agire come un software in esecuzione a livello locale, la sensazione di tutto ciò che funziona insieme è fondamentale. E il modo principale in cui gli sviluppatori possono comunicare questo senso è attraverso la progettazione. Ti sfido a trovarmi un'applicazione web la cui intera interfaccia utente è composta da elementi HTML puramente predefiniti senza stile personalizzato.
Non puoi? Nessuna sorpresa lì! Il fatto è che i web design hanno lo scopo di avere uno stile coerente per tutto e nelle app web, l'uso di controlli e aree di input sono elementi importanti da considerare. Qualcosa di semplice come l'aggiunta di un colore di sfondo personalizzato e la sovrascrittura del bordo di un pulsante di invio può avere un enorme impatto sull'unità del tuo design.
Si noti nello screenshot GMail come solo lo stile del tasto a discesa menu e pulsanti "si adattano" al design generale. Oh e sì, ho un ordine di spedizione dal negozio Angry Birds! ; P
Restyling stock elements è una cosa, ma crearne di nuove è ancora meglio. Prendi MyBankTracker come esempio che usa un cursore personalizzato che si adatta ancora al design complessivo bianco e blu.
Mentre stavo cercando una prospettiva alternativa sulla progettazione di applicazioni web, ho trovato una citazione interessante dell'ex dirigente di Microsoft Office, Chris Capossela, nel quale ha detto qualcosa del tipo: "Quando abbiamo chiesto [quali funzionalità desideravano gli utenti] Office, nove volte su dieci, hanno chiamato qualcosa già nel prodotto, semplicemente non riuscivano a trovarlo ". Questo tipo di collegamenti riporta all'intera idea di navigazione ottimizzata per la situazione.
Quando abbiamo chiesto [quali funzionalità desideravano gli utenti in] Office, nove volte su dieci, hanno chiamato qualcosa già nel prodotto; non potevano proprio trovarlo.
Il fatto è che, se si tenta di raggruppare molte funzionalità in uno spazio ridotto, ciascuna funzionalità diventa meno significativa. E l'utente passerà molto più tempo a cercare la funzionalità che desidera. E l'utente si sentirà frustrato. E l'utente se ne andrà. Tu non vuoi questo. Per mettere la cosa in una prospettiva migliore, prova a ridurre la risoluzione del tuo schermo al minimo possibile e lancia l'applicazione più intensiva dell'interfaccia utente che hai installato. Provalo e usalo e in seguito avrai il controllo.
Un ulteriore suggerimento è ascoltare i tuoi utenti, ma non troppo. Poiché gli utenti richiedono sempre più funzionalità, potresti essere incline a lanciare nuove opzioni qua e là.
Allontanandoci da ciò che dovresti / puoi usare, esaminiamo solo tre cose importanti non dovrebbe fai quando lavori su un'interfaccia utente incentrata sull'app.
Immagina di incontrare qualcuno per strada. Chiedete loro dove si trova Starbucks più vicino e rispondono in una lingua diversa. Ti sembra di captare una parola che percepisci come affine, ma che si rivela sbagliata e ha un significato completamente deformato. Questo suona piuttosto lungo per un'anologia, ma il punto che sto cercando di sottolineare è che potresti percepire qualcosa a causa della tua lingua naturale, ma il designer potrebbe mirare a qualcosa di completamente diverso. Ad esempio, se generi le intestazioni in modo che assomiglino a pulsanti, l'utente potrebbe provare a fare clic su di esso, pensando che faccia parte dell'app Web e possa continuare a sentirsi frustrato a causa della mancanza di funzionalità e dell'esperienza confusa.
Il mio primo post qui su WebDesignTuts + ha discusso la convalida del modulo e la sua importanza per gli utenti. Come utente, mi piacerebbe sapere cosa sto facendo male se non riesco a far funzionare la tua app ed è sempre consigliabile creare spazio per il feedback dall'inizio.
L'incoerenza del design è un'esperienza frustrante poiché, proprio come un utente si abitua a un modo di fare le cose, si confronta con un altro. Un esempio molto semplice è su Expedia, dove il calendario di partenza e di ritorno cambia mese quando selezioni una data.
Ecco una breve lista di sei siti Web e applicazioni web che dimostrano chiaramente alcuni dei principi di progettazione che abbiamo discusso in questo articolo dal design delle app native all'enfasi principale.
Per riassumere questo articolo, c'è una chiara influenza sul web dalle tradizionali applicazioni native. Tuttavia, ogni decisione di progettazione che coinvolge le app Web si riduce all'usabilità. Le applicazioni devono essere semplici, devono avere l'accento sulle funzioni chiave in modo che un utente passi attraverso il sito con facilità.
.
Accentsconagua