Estensione della funzionalità di modifica tramite tocco di Office Web Apps ai tablet iOS e a Windows 8

Articolo originale pubblicato lunedì 20 agosto 2012

Abbiamo presentato le nuove applicazioni di Office Web Apps alcune settimane fa. Abbiamo aggiunto nuove funzionalità e migliorato le prestazioni delle applicazioni, continuando a garantire l'accesso ai documenti da qualsiasi luogo tramite una vasta gamma di browser comuni.

Oggi siamo lieti di presentare una nuova dimensione per l'input, il tocco, che consente di estendere le funzionalità complete di visualizzazione e modifica di Office Web Apps ai tablet e ai browser che supportano il tocco, tra cui Internet Explorer in Windows 8 e Safari Mobile in iOS.

 Per la progettazione della funzionalità di tocco in Office Web Apps, ci siamo posti gli obiettivi seguenti:

• Consentire agli utenti di essere immediatamente operativi con la funzionalità di tocco in Office Web Apps
• Non richiedere agli utenti di familiarizzare con una nuova interfaccia utente
• Consentire agli utenti di passare facilmente dalla modalità tocco alla modalità mouse/tastiera e viceversa
• Abilitare l'intero set di funzionalità di Office Web Apps, inclusi gli strumenti di modifica, nei dispositivi sensibili al tocco come i tablet o i touchscreen

La creazione di un'interfaccia utente sensibile al tocco e che supporta l'input tocco ha presentato sfide di progettazione interessanti. In questo post verrà descritto come siamo riusciti a superare queste difficoltà.

Sviluppo del framework per il tocco

Abbiamo sviluppato un framework unificato coerente con le piattaforme supportate e messo a punto linee guida per l'interazione tramite tocco per le applicazioni desktop di Microsoft Office, per Windows 8 e per iOS. Abbiamo anche tenuto conto delle esperienze e delle modifiche tramite tocco che gli utenti si aspettano di poter utilizzare nei dispositivi sensibili al tocco.

Ci siamo basati sui principi seguenti per la creazione dell'esperienza utente nelle piattaforme:

• Garantire esperienze end-to-end ottimali con il solo input tocco
  • Focalizzazione su scenari ed esperienze con un dispositivo sensibile al tocco
  • Possibilità per gli utenti di toccare l'interfaccia utente senza difficoltà
  • Creazione di modifiche tramite tocco semplici e intuitive
  • Utilizzo delle funzionalità dei browser
• Garantire un'esperienza end-to-end ottimale con una combinazione di modalità tocco, mouse e tastiera
  • Possibilità per gli utenti di passare facilmente dalla modalità tocco alla modalità mouse e tastiera e viceversa per interagire con l'applicazione
  • Risposta dell'applicazione all'input

Esaminiamo in dettaglio ognuno di questi principi:

Scenari ed esperienze ottimizzati per il tocco

Ho scritto questo post in alcuni giorni e l'ho modificato diverse volte. Come accade per molte persone, non sono stata sempre alla scrivania, né ho lavorato con un computer portatile durante la lezione di scherma dei miei figli. Ho iniziato a scrivere il post alla mia scrivania in ufficio e ho continuato con il mio tablet dopo aver salvato il documento in Skydrive in modo che fosse disponibile ovunque.

Le tendenze e i modelli di utilizzo e di comportamento emersi dalla ricerca effettuata tra gli utenti ci hanno consentito di individuare due scenari: 

1.        La lettura e l'utilizzo del contenuto di documenti e la visualizzazione di presentazioni e fogli di calcolo sarà rapida, piacevole e accattivante.

• La lettura e l'utilizzo di informazioni è stata l'attività preferita per la maggior parte delle persone che ha utilizzato un tablet.
• Gli utenti sfogliano documenti e presentazioni e inseriscono commenti nel contenuto condiviso da colleghi e amici.
• Altri utenti hanno scelto di riunire tutte le ricerche sull'acquisto di automobili in OneNote Web App in modo da averle a portata di mano sul tablet durante la negoziazione per l'acquisto di un'auto.

 2.        Le funzionalità di modifica semplificata risulteranno estremamente soddisfacenti per l'aggiunta, la modifica e la revisione di documenti

• Le mamme come me desiderano iscriversi rapidamente in un foglio di calcolo per portare il dolce alla cena di classe dei figli organizzata dall'associazione genitori-figli.

• Gli studenti desiderano apportare rapide modifiche al saggio a cui stanno lavorando e collaborare alla presentazione da perfezionare.

Utilizzare la funzionalità di tocco senza difficoltà

Non vi è nulla di più frustrante che toccare un controllo dell'interfaccia utente che non si intende selezionare. La sicurezza con cui si utilizza l'applicazione aumenta quando è possibile toccare correttamente il controllo o la parte dell'interfaccia utente che si intende selezionare. Desideriamo offrirvi questo tipo di sicurezza quando utilizzate Office Web Apps.

Il mouse è uno strumento che consente di interagire in modo preciso e controllato con l'interfaccia utente. Utilizzato insieme a una tastiera fisica, consente all'utente di posizionare punti di inserimento, effettuare selezioni, scegliere pulsanti e richiamare menu di scelta rapida, elenchi a discesa e altri elementi dell'interfaccia utente con accuratezza.

In confronto, le dita hanno forme e grandezze diverse. Sono goffe per posizionare punti di inserimento e poco accurate per controllare l'interazione con l'interfaccia utente.

Il nostro obiettivo era di consentire agli utenti di toccare senza difficoltà l'interfaccia utente e ottenere il risultato desiderato, esattamente come con un mouse.

Rendere un elemento facilmente selezionabile tramite tocco dipende dalle dimensioni dell'obiettivo. Molti elementi dell'interfaccia utente, ad esempio i controlli e i menu di scelta rapida della barra multifunzione, non rientrano nei limiti di dimensioni "selezionabili tramite tocco" definiti da Windows 8 e Microsoft Office.

Tutti questi elementi sono diventati facilmente selezionabili tramite tocco nelle nuove applicazioni di Office Web Apps. Pur aumentando le dimensioni fisiche degli elementi dell'interfaccia utente, abbiamo fatto in modo di mantenere il più possibile invariata l'area disponibile per il contenuto vero e proprio dei documenti.

Come potete osservare da vicino, i pulsanti sono più grandi e più facili da selezionare tramite tocco e la spaziatura tra i controlli è più funzionale:

 Scheda Home in Excel Web App:

Scheda Inserisci (Insert) in PowerPoint Web App:

Scheda Home in OneNote Web App:

Selezione colori in Word Web App:

Modifiche tramite tocco semplici e intuitive

Uno dei nostri obiettivi principali è stato quello di consentire agli utenti di utilizzare Office Web Apps sui tablet con modifiche tramite tocco semplici e intuitive anziché movimenti complessi che richiedono apprendimento e memoria.

Per iniziare sono sufficienti cinque azioni:

Esaminiamo come è possibile utilizzare questa azioni in Office Web Apps:

Scorrimento del documento

Per un rapido esame di un documento, è possibile eseguire un gesto di scorrimento rapido. Il contenuto del documento scorre con un'accelerazione veloce e fluida, che può essere comunque interrotta con il tocco.

Abbiamo utilizzato la funzionalità del browser nativa per abilitare lo scorrimento accelerato nelle visualizzazioni di lettura e modifica in Word Web App.

In PowerPoint Web App è possibile utilizzare la stessa azione di scorrimento rapido per passare da una diapositiva a un'altra.  

Zoom avanti e indietro

È possibile utilizzare le funzionalità di zoom avanti e indietro nell'interfaccia utente allontanando o avvicinando due dita.

Digitazione

Un singolo tocco nella visualizzazione di modifica di Office Web Apps consente di posizionare un punto di inserimento e visualizzare la tastiera per iniziare a digitare.

Punto di inserimento in Word Web App:

Il punto di inserimento è diverso da quello visibile quando vengono utilizzati il mouse e la tastiera. Al punto di inserimento è associato un "cerchietto di selezione" che consente di afferrarlo e trascinarlo facilmente per effettuare una selezione.

La digitazione è fondamentale per la modifica, pertanto garantire un'esperienza ottimale è uno degli scenari di base supportati.

Posizionamento del punto di inserimento

Poiché il dito è uno strumento di input impreciso, abbiamo dovuto escogitare un modo per posizionare correttamente un punto di inserimento in base all'intenzione dell'utente.

La maggior parte degli utenti modifica in genere l'inizio o la fine di una parola.

Abbiamo usato pertanto l'approccio basato su un meccanismo che ricorda quello dei fermalibri per posizionare un punto di inserimento:

Toccando una volta una frase esistente, viene calcolata l'estremità più vicina (inizio o fine della parola), dove viene posizionato il punto di inserimento. Toccando di nuovo la stessa parola, il punto di inserimento viene posizionato esattamente dove è stato registrato il tocco.

Selezione

La selezione di testo e oggetti consente di eseguire modifiche, applicare la formattazione o effettuare altre operazioni. Gli utenti possono effettuare queste operazioni in modo efficiente con un mouse e con i tasti CTRL e MAIUSC sulla tastiera, che consentono di agire in modo più accurato.

Nell'ambiente tocco il "cerchietto di selezione" nel punto di inserimento funziona come quadratino di ridimensionamento che può essere afferrato per creare una nuova selezione. È inoltre possibile modificare una selezione esistente riducendo o aumentando lo spazio selezionato utilizzando i cerchietti di selezione su ogni estremità.

Trascinamento del cerchietto per selezionare il testo in Word Web App:

 Trascinamento per selezionare le dimensioni per l'inserimento di una tabella:

Esecuzione di azioni nel contesto:

I menu di scelta rapida consentono di eseguire azioni in un contesto specifico in modo rapido e semplice. Probabilmente conoscerete già l'uso dei menu di scelta rapida con il mouse in Office Web Apps. Questi menu vengono visualizzati facendo clic con il pulsante destro del mouse.

Clic con il pulsante destro del mouse su menu di scelta rapida nella visualizzazione di modifica in Word Web App:

Abbiamo reso possibile la visualizzazione dei menu di scelta rapida con un semplice tocco su una selezione. Allontanando il dito viene chiuso il menu di scelta rapida.

Toccando la selezione viene visualizzato il menu di scelta rapida:

Notate come la spaziatura dei controlli nel menu di scelta rapida sia stata modificata in modo che possano essere facilmente selezionati tramite tocco.

In un punto di inserimento è possibile visualizzare il menu di scelta rapida esercitando una breve pressione con le dita:

Nella visualizzazione di lettura di Word Web App un singolo tocco consente di selezionare una riga. Toccando una volta la selezione viene visualizzato il menu di scelta rapida.

Selezione e menu di scelta rapida nel visualizzatore Word Web App:

Garantire un'esperienza end-to-end ottimale con una combinazione di modalità tocco, mouse e tastiera

I tablet possono essere utilizzati con input tocco, mouse e tastiera.

In Windows 8 è possibile utilizzare Office Web Apps con l'input tocco, con il mouse e la tastiera oppure con una combinazione di entrambe le modalità. Per il funzionamento ottimale di Office Web Apps in iOS è consigliabile invece utilizzare l'input tocco.

Modalità tocco

In Office Web Apps l'interfaccia utente può essere suddivisa in:

• Interfaccia utente fissa

Questa interfaccia utente è sempre presente e visualizzata nell'applicazione.

Esempio: barra multifunzione, riquadro di navigazione di OneNote Web App

• Interfaccia utente contestuale

 Questa interfaccia utente viene visualizzata e nascosta su richiesta.

Esempio: menu di scelta rapida

Quando si utilizza un dispositivo sensibile al tocco, per impostazione predefinita in Office Web Apps viene visualizzata l'interfaccia utente fissa in modalità tocco. Potete cambiare questa modalità per utilizzare l'interfaccia utente con un mouse attivando/disattivando il pulsante della modalità tocco.

Il pulsante della modalità tocco viene visualizzato sulla barra di accesso rapido in alto a sinistra in Office Web Apps, consentendo di passare dalla modalità tocco alla modalità di precisione / mouse e viceversa.

Il pulsante della modalità tocco (attivato) consente di visualizzare l'interfaccia utente sensibile al tocco:

Dettaglio del pulsante della modalità tocco:

I menu di scelta rapida, i riquadri a comparsa della barra multifunzione e i menu solo su richiesta vengono visualizzati nel metodo di input con cui sono stati richiamati, ovvero tocco o mouse.

Riepilogo:

Vi invito a provare la nuova versione Office Web Apps Preview su skydrive.com o in Office 365  Preview su un dispositivo sensibile al tocco con Windows 8 e con iOS su iPad. 

Poiché siamo interessati a conoscere le vostre esperienze, vi invitiamo a inviare il vostro feedback. Nell'angolo in alto a destra dell'applicazione e nel menu File è disponibile un'opzione "Invia commenti e suggerimenti".

Allo scopo di perfezionare e migliorare costantemente l'interfaccia, siamo interessati a ricevere i vostri commenti sulle soluzioni considerate utili e su quelle invece che devono essere migliorate.

 Renu Devi

Program Manager, Office Web Apps

Questo è un post di blog localizzato. L'articolo originale è disponibile in Bringing touch editing to Office Web Apps on Windows 8 and iOS tablets.