User Experience processo di sviluppo

L'esperienza dell'utente diventa un fattore chiave di successo
In passato, ci siamo concentrati principalmente sulla costruzione di prodotti che soddisfano le esigenze funzionali degli utenti. L'esperienza dell'utente è stata considerata spesso in ritardo nel processo di sviluppo. Ma oggi il cliente richiede più di un semplice prodotto di lavoro. Fornire le caratteristiche giuste è ancora il prerequisito per un buon prodotto, ma di trasformarlo in qualcosa di straordinario è necessario fornire una buona esperienza utente!
Fornire una ricca esperienza utente non è una cosa di fortuna. Ha bisogno di essere piallato, progettato e integrato nello sviluppo di un prodotto. Progettazione di una ricca esperienza utente non è solo compongono l'interfaccia utente da parte di alcuni elementi grafici e le sfumature - è un concetto molto più ampio. La sua sulla creazione di un legame emotivo tra l'utente e il software. Rende l'utente sentire bene e così gli piace continuare ad utilizzare il software.
Nuovi strumenti per i progettisti
Microsoft ha riconosciuto, dare ai team di sviluppo il potere di creare esperienze utente ricche ha bisogno di un grafico più strumento di supporto molto più VisualStudio in grado di fornire oggi. Così hanno deciso di creare una nuova suite di tool - fatto per i progettisti.
Questa suite di tool si chiama Microsoft Expression. Si compone di quattro prodotti:
Espressione • Miscela è costruito per creare interfacce utente in WPF e Silverlight. Costruisce il ponte tra designer e sviluppatori. E 'possibile aprire soluzioni VisualStudioEspressione • Il design è una versione leightweight di Adobe Illustrator per creare e modificare grafica vettoriale.• Expression Media è costruito per codificare, tagliare e arricchire i file video e ottimizzarle per Silverlight Streaming• L'espressione Web Microsoft prossima generazione di HTML e Javascript editor. La sua sostituzione per Frontpage.
Insieme sono un potente pacchetto. L'illustrazione seguente mostra un esempio di flusso di lavoro di integrazione di una immagine vettoriale che è stato creato da un designer grafico in Adobe Illustrator in un progetto WPF che fa parte di una soluzione VisualStudio.
Flusso di lavoro per lo sviluppo di un progetto WPF
Sviluppo di un'applicazione WPF con una user experience ricca richiede competenze molto più di un analista di requisiti che definisce un elenco di casi d'uso e di sviluppo che implementa il software. Devi scoprire che cosa l'utente ha bisogno davvero. Questo può essere fatto seguendo un approccio user-centered.
1. Requisiti di suscitare
Come in ogni tipo di progetti software sua importante conoscere e mettere a fuoco il bersaglio del vostro sviluppo. Si dovrebbe parlare con operatori e degli utilizzatori per scoprire le reali esigenze. Questi bisogni devono essere raffinato a funzionalità ed espressi in casi d'uso (abstract) o scenari utente (illustrativo). Priorize i compiti di rischio e l'importanza e il lavoro iterativo. Questo lavoro è svolto dal ruolo dell'ingegnere requisiti.
2. Creazione e convalida prototipo di interfaccia utente
Creazione di un prototipo di interfaccia utente è un passo importante per condividere idee tra gli utenti e gli ingegneri per creare una comprensione comune del design dell'interazione. Questo compito è in genere fatto da un interaction designer. E 'utile per disegnare solo l'interfaccia utente in modo approssimativo per evitare discussioni preliminari su dettagli di design. Ci sono diverse tecniche e gli strumenti per farlo. Alcuni di essi sono:
• Carta prototipo
Utilizzare carta e matita per disegnare schizzi dell'interfaccia utente. Senza strumenti e le infrastrutture sono necessarie. Ognuno può scrivere le loro idee sulla carta.• wireframe
Wireframe sono spesso utilizzati per disegnare il layout di una pagina. Si chiama wireframe perché basta disegnare i contorni dei controlli e delle immagini. Questo può essere fatto con strumenti come PowerPoint o VisioEspressione • 3 Blend - Portata flusso schizzo è una nuova caratteristica fredda per creare prototipi interattivi direttamente in WPF. È possibile utilizzare il sistema integrato "stile sinuose" per farlo sembrare impreciso. Il prototipo può essere eseguito in un lettore stand-alone che ha integrato un meccanismo di feedback.Prototipo • Interactive L'approccio più costoso e reale è quello di creare un (riutilizzabili) prototipo interattivo che funziona come applicazione vera e propria, ma con dati fittizi.
Si raccomanda vivamente di testare il tuo prototipo di interfaccia utente su utenti reali. Questo vi aiuta a scoprire e affrontare i problemi di progettazione nelle prime fasi del processo di sviluppo. Le seguenti tecniche sono molto popolari per valutare prototipi di interfaccia utente: • Walktrough
Un walktrough di solito è fatto presto in un progetto con wireframe o prototipi di carta. L'utente riceve un compito da risolvere e che controlla il prototipo toccando sulla carta. Il leader di prova che presenta un nuovo documento che mostra lo stato dopo l'interazione.
• Laboratorio di Usabilità
Per fare un laboratorio di usabilità, è necessario un computer con un software di cattura schermo e una telecamera. Il probando ottiene un compito da fare e le esigenze e ingegnere interazione guardarlo fare questo. Non dovrebbero parlare con lui per sapere dove si blocca e perché.

3. Implementare la logica di business e interfaccia utente Raw
4. Integrare il design grafico
5. Test del software
Ruoli
Buliding una moderna interfaccia utente con un'esperienza utente ricca richiede competenze aggiuntivi da parte del team di sviluppo. Queste abilità sono descritte come ruoli che possono essere distribuiti tra i popoli nel vostro team di sviluppo.

• DeveloperLo sviluppatore è responsabile per implementare la funzionalità dell'applicazione. Egli crea il modello di dati, implementa la logica di business e fili fino ad una semplice visione.
• Designer graficoLa progettazione grafica è responsabile di creare un concetto grafico e costruire risorse grafiche, come icone, loghi, modelli 3D o combinazioni di colori. Se il progettista grafico ha familiarità con gli strumenti Microsoft Expression crea direttamente stili e modelli di controllo.
• Interaction Designer
L'interaction designer è responsabile per il contenuto e il flusso di un interfaccia utente. Egli crea wireframe o schizzi interfaccia utente di condividere le proprie idee con la squadra o cliente. Egli dovrebbe convalidare il suo lavoro facendo walktroughs o storyboard.
• Integrator
L'integratore è l'artista tra il designer e il mondo degli sviluppatori. Prende il patrimonio della progettazione grafica e li integra l'interfaccia utente grezzo dello sviluppatore. Questo ruolo ha bisogno di una rara serie di competenze e quindi è spesso difficile trovare la persona giusta per questo.

1. Introduzione WPF

WPF combina interfacce utente dell'applicazione, grafica 2D, grafica 3D, documenti e multimediali in un unico framework. Il suo motore di rendering vettoriale utilizza l'accelerazione hardware delle moderne schede grafiche. Questo rende l'interfaccia utente più veloce, scalabile e indipendenti dalla risoluzione.
L'illustrazione seguente fornisce una panoramica delle principali novità di WPF:

 
Separazione di aspetto e il comportamento WPF separa l'aspetto di un'interfaccia utente dal suo comportamento. L'aspetto è generalmente specificato nel Extensible Application Markup Language (XAML), il comportamento è implementato in un linguaggio di programmazione gestito come C # o Visual Basic. Le due parti sono legate insieme da associazione dati, eventi e comandi. La separazione di aspetto e il comportamento porta i seguenti benefici:
• Aspetto e comportamento sono debolmente accoppiati• I progettisti e gli sviluppatori possono lavorare su modelli separati.• strumenti di progettazione grafica in grado di lavorare su semplici documenti XML invece di codice di analisi.

Rich composizione

Controlli in WPF sono estremamente componibile. È possibile definire quasi tutti i tipi di controlli come contenuto di un altro. Questa flessibilità è una caratteristica molto potente se si utilizza in modo opportuno. Mettere un'immagine in un pulsante per creare un pulsante immagine, o mettere un elenco di video in un combobox per scegliere un file video.

<button>
<StackPanel Orientation="Horizontal">
<image Source="speaker.png" Stretch="Uniform"/>
<TextBlock Text="Play Sound" />
</ StackPanel></ Button>
Altamente personalizzabile A causa della netta separazione tra aspetto e il comportamento si può facilmente modificare l'aspetto di un controllo. Il concetto di stili permette di pelle controlli quasi come i CSS in HTML. I modelli consentono di sostituire tutto l'aspetto di un controllo.
L'esempio seguente mostra un pulsante predefinito WPF e un pulsante personalizzato.

Risoluzione indipendenza Tutte le misure in WPF sono unità logiche - non pixel. Una unità logica è un 1 / 96 di pollice. Se si aumenta la risoluzione dello schermo, l'interfaccia utente rimane delle stesse dimensioni - si arriva solo croccante. Dal momento che WPF si basa su un motore di rendering vettoriale basato è incredibilmente facile costruire interfacce utente scalabile.

ListBox con immagini

Il seguente esempio mostra come fare per inserire delle immagini in una listbox. La visualizzazione prevede gli items messi in orizzontale e per ogni item e' prevvista un'immagine e un testo alla base.
Per tale scopo viene creata una listbox facente riferimento ad una risorsa "listStyle" che definisce il template per l'item da visualizzare. Si noti che viene nascosta la barra verticale, mentre si utilizzarà solo quello orizzontale.

     <ListBox
      ItemContainerStyle="{StaticResource listStyle}"
      ScrollViewer.VerticalScrollBarVisibility="Hidden">
      <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
          <WrapPanel IsItemsHost="True"  />
        </ItemsPanelTemplate>
      </ListBox.ItemsPanel>
    </ListBox>

A questo punto nella sezione Resources della pagine e del controllo definiamo lo stile per l'item.

    <Style TargetType="{x:Type ListBoxItem}" x:Key="listStyle">
      <Setter Property="Template" Value="{StaticResource listControlTemplate}" ></Setter>
      <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBox}}, Path=ActualHeight}" />
    </Style>

In questo modo definiamo i SETTER e facciamo in modo che se la nostra listbox e' ridimensionabile in altezza, gli item verranno ridimensionati in modo da occupare tutta l'altezza e la larghezza verrà ridimensionata in modo proporzionale.
Definiamo quindi lo style listControlTemplate.

   <ControlTemplate x:Key="listControlTemplate" TargetType="{x:Type ListBoxItem}" >
      <Border x:Name="BorderImage" Margin="3,3,3,20" >
        <Grid x:Name="listItemGrid" VerticalAlignment="Stretch" >
          <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="20" />
          </Grid.RowDefinitions>
          <Border BorderThickness="1" Background="Black" >
          <Image  x:Name="coverImage2" Tag="{Binding nPage}"  Source="{Binding ., Converter={StaticResource ImageConverter} }"  Stretch="Uniform" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Grid.Row="0" RenderTransformOrigin="1,1">
            <Image.RenderTransform>
              <TransformGroup>
                <ScaleTransform ScaleX="1" ScaleY="1"/>
                <SkewTransform AngleX="0" AngleY="0"/>
                <RotateTransform Angle="0"/>
                <TranslateTransform X="0" Y="0"/>
              </TransformGroup>
            </Image.RenderTransform>
          </Image>
          </Border>
          <TextBlock Grid.Row="1" Text="{Binding nPage}" FontWeight="Bold"
         HorizontalAlignment="Center" />
        </Grid>
      </Border>
      <ControlTemplate.Triggers>
        <DataTrigger Binding="{Binding Path=sfondo}" Value="1">
          <Setter Property="Background" Value="Aquamarine" TargetName="BorderImage"></Setter>
        </DataTrigger>
        <DataTrigger Binding="{Binding sfondo}" Value="10" >
          <Setter Property="Background" Value="Black"  TargetName="BorderImage"></Setter>
        </DataTrigger>
        <Trigger Property="IsSelected" Value="True">
          <Setter Property="Background" Value="Blue" TargetName="BorderImage"/>
        </Trigger>
      </ControlTemplate.Triggers>
    </ControlTemplate>

Quindi definiamo che il binding dell'immagine avviene tramite ImageConvert.

<local:ImageConverter x:Key="ImageConverter" />

Questa e' una classe nella quale possiamo prendere le nostre immagini da file, da database o altro. Ovviamente l'informazione sarà nel campo (io normalmente uso delle classi in qui definisco i campi e poi per la lista dei dati uso una ObservableCollection che collego alla listbox.

La classe viene definita in questo modo :

 #region "Converter Image"
  public sealed class ImageConverter : IValueConverter
  {
    public object Convert(object value, Type targetType,
                          object parameter, CultureInfo culture)
    {
      try
      {
        BitmapSource btImage = null;
        PageInfo pg = (PageInfo)value;
        if (pg.IconPath != "")
        {
          BitmapImage ba = new BitmapImage(new Uri(pg.IconPath));
          ba.BeginInit();
          ba.CacheOption = BitmapCacheOption.OnLoad;
          ba.EndInit();
          btImage = ba;
        }
        else
        {
            btImage =new BitmapImage();
        }
        if (btImage.CanFreeze) btImage.Freeze();
        return btImage;
      }
      catch
      {
        return new BitmapImage();
      }
    }
    public object ConvertBack(object value, Type targetType,
                              object parameter, CultureInfo culture)
    {
      throw new NotImplementedException();
    }
  }
  #endregion

La classe PageInfo contiene i campi di cui faccio binding nella listbox; nel campo IconPath c'e' il path dell'immagine.

Ricordarsi di fare il Freeze dell'immagine altrimenti il GC non libererà mai la memoria anche nel caso si pulisca la listview.