Programming Languages Hacks

Importanti regole per linguaggi di programmazione rilevanti come Java, C, C++, C#…

  • Subscribe

  • Lettori

    I miei lettori abituali

  • Twitter

Progettare un’Applicazione Web 2.0: Yahoo! Design Pattern Library

Posted by Ricibald on November 18th, 2008

Le applicazioni vengono progettate seguendo degli approcci di progettazione formalizzati attraverso lo use case analysis e il conseguente utilizzo dei design pattern. La progettazione affronta problemi come la suddivisione delle responsabilità tra le varie classi e la loro conseguente comunicazione. In seguito, le applicazioni vengono scritte utilizzando delle API per la realizzazione di UI complesse, come le swing per Java o le WinForm per .NET.

Nelle applicazioni web viene però trascurata la progettazione legata all’usabilità e al social network, “delegando” in qualche modo quest’aspetto alla bontà di chi scriverà l’HTML, come se ogni volta ci scrivessimo da zero una dialog windows o il layout a grid in una windows application…

Yahoo! è stata la prima ad affrontare in modo rigoroso il problema dando una risposta a problemi comuni della progettazione delle pagine web:

  • Prestazioni delle pagine:  34 best practices e un plugin per firefox per ricevere al volo i consigli su come ottimizzare la pagina corrente…
  • Librerie UI: componenti come modal dialog, layout manager, treeview, … progettati per essere crossbrowser. Molto spesso si abbinano queste librerie a progetti più generici come JQuery per creare i propri personali effetti grafici non presenti nelle librerie di Yahoo!
  • Design Pattern Library: risolvono problemi ricorrenti nelle applicazioni web

Proprio di quest’ultimo faremo una carrellata dei pattern citati:

Search

  • Search Pagination, Item Pagination e Carousel
    • Problema: si vuole visualizzare il risultato di una ricerca e non è possibile mostrarli tutti in una pagina.
    • Soluzione:
      • creare un paginator che contiene gli elementi “Prev <- 2 3 4 5 6 7 8 9 10 11 -> Next”, dove il link corrente (7) non è cliccabile (Search Pagination).
      • creare una semplice navigazione “1-5 of 32 First | < Prev | Next > | Last” per ogni elemento, in modo da far mantenere all’utente il focus sulla navigazione avanti/indietro (Item Pagination)
      • creare una navigazione avanti/indietro molto grafica, da utilizzare in un ambito dove si scorre tra risultati che prevedono grafica (Carousel)
    • Librerie: YUI Paginator e YUI Carousel

Navigation

  • Breadcrumbs.
    • Problema: l’utente si trova in una pagina del sito da cui non è agevole accedere alle altre sezioni e potrebbe provenire da un altro sito e non avere quindi la percezione di dove si trova collocato nel sito che stà visitando.
    • Soluzione: presentare una lista orizzontale di link che rappresenta un “albero compatto” della collocazione del link corrente all’interno della struttura di un sito
    • Librerie: .NET SiteMapPath
  • Alphanumeric Filter Links.
    • Problema: l’utente ricerca un elemento di cui conosce solo la lettera iniziale.
    • Soluzione: consentire una ricerca partendo dalla lettera iniziale
  • Module Tabs.
    • Problema: esistono diversi pannelli che non possono essere visualizzati contemporaneamente e che comunque non ci sarebbe sufficiente spazio e di cui è necessario eseguire uno switch senza cambiare pagina web corrente.
    • Soluzione: creare una lista di tab separati da un ‘|’, il cui click causa l’attivazione lato client solo del pannello interessato, disattivato il precedente. Il tab è una rappresentazione della categorizzazione delle cartelline di lavoro tramite l’uso di linguette (tab).
    • Librerie: YUI TabView
  • Navigation Tabs
    • Problema: esistono 3-10 macrocategorie sufficientemente stabili da rappresentare, le quali devono essere utilizzate per indicare la posizione dell’utente all’interno del sito. Il cambio di categoria deve causare un completo caricamento di una nuova pagina.
    • Soluzione: utilizzare tab in alto, eventualmente con sottocategorie al click. Se le categorie sono troppe per lo spazio orizzontale, creare i tab sulla sinistra della pagina

Browsing

  • Page Grids
    • Problema: si devono creare/gestire molteplici pagine, le quali potrebbero essere costruite da gruppi di lavoro differenti
    • Soluzione: creare un template comune a griglia, in cui ogni cella è destinata a contenere il lavoro di un gruppo. Bisogna inoltre creare un css comune che contenga quanto richiesto da tutti i gruppi di lavoro
    • Librerie: YUI Grids. Consente di creare layout a grid tramite div e css cross browser.

Selection

  • Auto Complete
    • Problema: si deve inserire in un campo di testo un valore difficile da ricordare e che quindi si presta a errori di scrittura
    • Soluzione: fornire una textbox con supporto all’autocompletamento
    • Librerie: YUI Autocomplete
  • Calendar Picker
    • Problema: l’utente deve inserire o trovare un’informazione basata su data o su data range
    • Soluzione: fornire una textbox o due textbox che propongono di compilare automaticamente il campo sulla base della selezione effettuata dall’utente all’interno di un calendario grafico
    • Librerie: YUI Calendar

Rich Interation

  • Drag and Drop Modules
    • Problema: l’utente deve personalizzare il layout della propria pagina senza lasciare la pagina corrente
    • Soluzione: fornisci il drag dei moduli. Suggerisci dove poter effettuare il drop incorniciando le aree “droppabili” (pattern Drop Invitation)
    • Librerie: YUI Drag & Drop
  • Cursor Invitation
    • Problema: l’utente deve capire che può interagire con un oggetto della pagina
    • Soluzione: cambia il puntatore del mouse a seconda dell’operazione da eseguire
  • Tool Tip Invitation
    • Problema: l’utente deve capire cosa succederà al click del mouse su un oggetto che non sia un semplice link
    • Soluzione: fornisci un tooltip come “Clicca per modificare”
  • Hover Invitation
    • Problema: l’utente deve capire quale effetto scatenerà al “semplice” click del mouse su un oggetto che scatena un certo cambio di stato
    • Soluzione: fornisci un feedback immediato al passaggio del mouse sull’elemento mostrando un avvertimento su cosa succederà
  • Animate Transition
    • Problema: l’utente deve percepire gradualmente che un oggetto sta cambiando la sua relazione con lo spazio occupato nella pagina
    • Soluzione: fornisci un’animazione che gradualmente faccia cambiare la relazione con lo spazio
    • Librerie: YUI Animation
  • Dim Transition e Brighten Transition
    • Problema: l’utente deve percepire che un elemento della pagina è diventato di secondaria importanza, non disponibile o non editabile. Questo stato deve poi poter essere ripristinato, facendo segnalare la rinnovata attività dell’elemento
    • Soluzione: definisci lo stato dim e lo stato brighten. Il primo si verifica nel momento in cui diventa di secondaria importanza, mentre il secondo ripristina l’elemento
    • Librerie: YUI Animation
  • Collapse Transition e Expand Transition
    • Problema: l’utente deve poter comprimere un certo elemento che ritiene di secondaria importanza. Viceversa, l’utente deve poter espandere un elemento precedentemente compresso o ottenere dettagli su un certo elemento
    • Soluzione: comprimi o espandi utilizzando una rapida animazione (0.5 secondi)
    • Librerie: YUI Animation
  • Cross Fade Transition
    • Problema: l’utente deve percepire che la vista di un oggetto sta per essere rimpiazzata con una nuova vista
    • Soluzione: esegui il fade out della rimpiazzata, mentre la nuova entrerà in fade in
    • Librerie: YUI Animation
  • Fade In Transition e Fade Out Animation
    • Problema: l’utente deve percepire che un elemento è stato aggiunto o rimosso alla pagina
    • Soluzione: porta l’opacità di un oggetto dal 0% (100%) al 100% (0%) eventualmente attivando (disattivando) il focus sull’elemento
    • Librerie: YUI Animation
  • Self Healing Transition
    • Problema: l’utente deve percepire che un elemento all’interno di una lista è stato rimosso
    • Soluzione: esegui il fade out dell’elemento lasciando un buco sull’elemento rimosso. Successivamente esegui il pattern Slide.
  • Slide Transition
    • Problema: l’utente vuole percepire che un elemento non popup è stato aggiunto o rimosso dalla pagina e vuole percepire la collocazione spaziale del nuovo elemento all’interno della pagina
    • Soluzione: unisci il fade con lo slide
    • Librerie: YUI Animation
  • Spotlight
    • Problema: l’utente vuole percepire che un valore è cambiato nell’interfaccia
    • Soluzione: cambia colore dell’elemento istantaneamente in modo che sia visibile e ripristina al colore del background nel giro di un secondo
    • Librerie: YUI Animation

Social: Rating & Reviews

  • Architecture of a Review
    • Problema: una webapp deve presentare voti e recensioni con una varietà di informazioni aggiuntive
    • Soluzione: gli elementi devono essere raggruppati per Target Element (info sul prodotto da recensire), Review Element (voti + recensioni) e Form Element (giudizio utente). Ogni elemento può essere ulteriormente scomposto secondo la struttura riportata nel pattern
  • Rating an Object
    • Problema: un’utente vuole lasciare la propria opinione su un oggetto, con interruzioni minime a qualsiasi altro task su cui stà lavorando
    • Soluzione: mostra votazione pronta all’uso, combinando la tecnica Hover Invitation e invitando l’utente a votare in presenza di un valore vuoto
  • Vote to Promote
    • Problema: l’utente vuole promuovere un contenuto in una comunity in modo che tale contenuto abbia maggior rank e venga mostrato maggiormente, in una forma democratica
    • Soluzione: fornisci un meccanismo di voto “one-time” per l’utente; evidenzia gli elementi più votati mostrandone il numero di voti; fornisci il voto solo a seguito del consumo dell’elemento: alla fine dell’articolo o all’interno delle pagine esterne tramite snippet esterno da includere
  • Writing a Review
    • Problema: l’utente vuole condividere la propria opinione su un oggetto in modo più accurato di un semplice voto
    • Soluzione: fornisci una form di review che contenga info quantitative (voti vari) più info qualitative (recensione stessa) con associate delle linee guida e varie altre regole

Social: Reputation

Un sistema di reputazione viene definito nel momento in cui si ha necessità di garantire un maggiore utilizzo del servizio o una qualità nell’utilizzo. Il pattern The Competitive Spectrum fornisce delle linee guida per scegliere il tipo di sistema di reputazione da realizzare. Nel pattern, la community viene definita in termini di competitività: la combinazione degli obiettivi individuali, delle azioni che influiscono sui bisogni della comunità e del grado richiesto di confronto tra i membri. Le linee guida da adottare dipendono dal livello di competitività richiesta:

  • Caring
    • Obiettivo: i membri vogliono aiutare altri membri
    • Reputazione: consente di far identificare i membri “senior” all’interno della community
    • Strumenti: fai indossare una o più Identifying Labels al profilo di un utente in modo che i “bollini” guadagnati caratterizzino l’influenza del membro nella community
  • Collaborative
    • Obiettivo: i membri vogliono cooperare per raggiungere un obiettivo in gran parte condiviso
    • Reputazione: consente di far identificare i membri che sono fedeli alla community
    • Strumenti: decora il profilo utente con dei Named Levels che consentano di stabilire facilmente, senza ambiguità e senza alcuna accezione offensiva la fedeltà dei membri
  • Cordial
    • Obiettivo: i membri hanno i loro personali scopi, ma questi non vanno a contrastare con quelli condivisi dalla community
    • Reputazione: consente di far identificare i membri che hanno valori e interessi che la community reputa positivi
    • Strumenti: fornisci dati statistici correlati a un utente. In aggiunta, il pattern Top X consente di identificare facilmente gli utenti che producono interventi con maggiore qualità
  • Competitive
    • Obiettivo: i membri hanno gli stessi obiettivi, ma per raggiungerli devono competere tra di loro
    • Reputazione: consente di far mostrare alla community i progressi raggiunti da un certo utente per suscitare ammirazione (o invidia)
    • Strumenti: fornisci una facile comparazione decorando al profilo un “livello saiyan” agli utenti tramite dei Numbered Levels. Fornisci delle soddisfazioni tramite premi come “luccicanti badge da decorare al profilo” tramite l’uso dei Collectible Achievements, in cui i premi sono legati a diversi obiettivi di difficoltà crescente (da “hai completato il profilo” a “sei il più attivo nella community”)
  • Combative
    • Obiettivo: i membri condividono obiettivi opposti. Il raggiungimento dell’obiettivo di uno nega il raggiungimento dell’obiettivo dell’altro.
    • Reputazione: consente di far mostrare alla community i progressi e i regressi raggiunti da un certo utente per suscitare ammirazione o scherno
    • Strumenti: utilizza il pattern Points per rappresentare la performance di un utente e poterla incrementare o diminuire a seconda dei risultati. Fai un rank dei membri tramite o Top X o una Leaderboard (un Top X più aggressivo, che rappresenta ad esempio le top 3 della settimana)

A queste tecniche spesso si combina quella della Sign-in Continuity, in cui il voto di un utente viene proposto a patto di registrarsi o di autenticarsi, ma la registrazione non deve perdere il contesto (utile una dialog).

Leave a Reply

You must be logged in to post a comment.