U I ( interfe țe pentru utiliz atori)
       bine gâ ndite – lux s au
            nec es ita te ?
               www.ux.md




                              R a d u T r if a n
                              RT Design Studio
Tehnologiile avansează într-un ritm de-a dreptul amețitor. Și celor care nu
sunt în sfera IT le vine din ce în ce mai greu să țină pasul cu evoluția.

Una dintre cele mai mari probleme o vedem a fi interfața cu utilizatorul.
Indiferent de câte procese complexe se petrec în spate, utilizatorul
interacționează cu sistemul printr-o interfață grafică.

Dacă aceasta nu este bine realizată, atunci și sistemul devine greu de folosit
și în loc să facă lucrurile mai simple - le complică.
http://servicii.fisc.md
Se pune accent pe decorare și nu pe funcționalitate. Nu se
prioritizează informația sau are în vedere necesitățile utilizatorilor.
Serviciul declarație electronică.
Propunere de layout – echipa UX.MD
D e c e lu c r u r ile m e r g p r o s t
      la a c e s t c a p it o l în
    R e p u b lic a M o ld o v a ?
Designul UI este privit ca o sarcină estetică și nu ca una
funcțională.

Se pune accentul pe ”să arate bine”, nu pe ”să lucreze
bine”. Decor mai degrabă decât funcționalitate.
+


Se caută companii care fac și designul și dezvoltarea, chiar
dacă acestea nu le fac bine pe ambele.
Etapa de realizare a arhitecturii informației este realizată foarte
superficial sau chiar trecută cu vederea.
Lipsește etapa elaborării unui prototip funcțional care să fie
4   testat și îmbunătățit pentru a ajunge la o versiune finală optimă.
Paginile web și aplicațiile sunt realizate în funcție de un caiet de
5   sarcini scris de persoane neinițiate în domeniu.

    Se uită de fapt de necesitățile utilizatorilor sistemului.
Designerii sunt puși în față cu un caiet de sarcini și nu înțeleg în
esență care sunt problemele pe care sistemul le rezolvă pentru
utilizatorii acestuia.
Designerii nu sunt implicați în toate etapele dezvoltării
produsului. La fel nu sunt implicați nici utilizatorii.
După ce este dat în exploatare, sistemul nu este modificat în
funcție de nevoile reale a utilizatorilor, ci rămâne așa cum a fost
dezvoltat de executor în funcție de caietul de sarcini.
Nu se face o analiză continuă a sistemului pentru a fi ulterior
optimizat și îmbunătățit. Un produs informatic înseamnă însă
adaptare, optimizare și îmbunătățire continuă.
P roc e s ul
1. Cercetare și analiză

2. Prototipizare

3. Dezvoltarea produsului

4. Îmbunătățire continuă
Cercetare                              Prototip
și analiză




                    D e s ig n
                      axat
                        pe
     Testare și    u t iliz a t o         Testare

    îmbunătățire
      continuă            r

                         Design și
                        implementare
1   C e rc etare și analiz ă
    S c o p u r i l e și f u n c ți o n a l i t a t e a
    Se indentifică scopurile, funcționalitatea și procesele pe care urmează să le
    simplifice sau problemele pe care urmează să le soluționeze aplicația sau
    pagina web.
1   C e rc etare și analiz ă
    U tiliz atorii
    Se identifică grupurile țintă de utilizatori și necesitățile fiecăreia dintre acestea.
    Se creează profilurile fiecărui grup în parte și se analizează ce necesități ar
    avea acestea de la sistem.
1   C e rc etare și analiz ă
    Șirul logic și proc es ele
    Se elaborează pașii și consecutivitatea acestora.
    Se identifică ce procese vizibile pentru utilizator se vor
    petrece și cum va interacționa acesta cu sistemul.
2   P rototipiz a re
    A rhite c tura informa ției
    Se analizează toate compartimentele sistemului sau paginii web și se grupează
    în categorii după natura informației și funcționalității. Se creează harta paginii
    web sau a sistemului cu toate compartimentele pe care le va avea.
2   P rototipiz a re
    Wire fra ming și la yout
    Se schițează aranjarea elementelor vizuale pentru fiecare pagină în parte. Se
    găsește cea mai optimă și uzabilă opțiune.
2   P rototipiz a re
    Imple menta rea prototipului
    Se implementează prototipul fără a pune accent pe design și decorarea
    elementelor. Se respectă doar amplasarea elementelor în pagină și tot ce s-a
    făcut în etapele precedente. Se aplică stilizări standard.


    Tes ta rea prototipului
    Prototipul creat se testează pentru a vedea dacă layoutul ales, procesele și
    pașii sunt simpli de înțeles pentru utilizatori.
3   D e z volta rea produs ului
    D e s ig n U I
    Se elaborează designul interfeței pentru utilizatori având
    în vedere toți pașii anteriori, plus rezultatele obținute după
    testarea prototipului.


    Te s ta r e a
    După ce totul este gata, se testează și se fac ultimele ajustări. Apoi produsul
    este lansat.
F olos e ște c onve n țiile
A c e s t a e s t e u n t it lu
Continuă cu text bine gândit înainte de a fi publicat.
Nu decora, comunică. Utilizatorul vrea funcționalitate.
Iar acesta este un link și te duce la altă pagină.




                                                          Apropo – nimeni nu are nevoie de
                                                          elemente grafice fără
                                                          funcționalitate care doar încarcă
                                                          vizual pagina, scad contrastul și
                                                          complică lucrurile fără vre-un
                                                          motiv.
B une pra c tic i
B une pra c tic i
B une pra c tic i
B une pra c tic i
B une pra c tic i
B une pra c tic i
B une pra c tic i
B une pra c tic i
4   Îmbun ă tățire
    c ontinuă
    Chiar după ce a fost testat și lansat, produsul are nevoie de
    îmbunătățiri care pot fi observate doar după interacțiunea cu
    utilizatorii sistemului la o scară mai mare.

    Deci este nevoie de analiză, optimizare și adaptare continuă
    în funcție de necesitățile utilizatorilor sistemului.
R e gul ă de a ur
Când există mai multe soluții la aceeași problemă, cea mai
bună este soluția care este mai simplă pentru utilizator.
S ă r e c a p i t u l ăm
1. Cercetează și analizează

2. Prototipizează

3. Dezvoltă produsul

4. Testează și îmbunătățește continuu
Îi m u l țu m i m
ț
pentru atenția acordată.




www.ux.md
Un proiect RT Design Studio

RT Design Studio @ Moldova ICT Summit 2012

  • 1.
    U I (interfe țe pentru utiliz atori) bine gâ ndite – lux s au nec es ita te ? www.ux.md R a d u T r if a n RT Design Studio
  • 2.
    Tehnologiile avansează într-unritm de-a dreptul amețitor. Și celor care nu sunt în sfera IT le vine din ce în ce mai greu să țină pasul cu evoluția. Una dintre cele mai mari probleme o vedem a fi interfața cu utilizatorul.
  • 3.
    Indiferent de câteprocese complexe se petrec în spate, utilizatorul interacționează cu sistemul printr-o interfață grafică. Dacă aceasta nu este bine realizată, atunci și sistemul devine greu de folosit și în loc să facă lucrurile mai simple - le complică.
  • 4.
  • 5.
    Se pune accentpe decorare și nu pe funcționalitate. Nu se prioritizează informația sau are în vedere necesitățile utilizatorilor.
  • 6.
  • 7.
    Propunere de layout– echipa UX.MD
  • 8.
    D e ce lu c r u r ile m e r g p r o s t la a c e s t c a p it o l în R e p u b lic a M o ld o v a ?
  • 9.
    Designul UI esteprivit ca o sarcină estetică și nu ca una funcțională. Se pune accentul pe ”să arate bine”, nu pe ”să lucreze bine”. Decor mai degrabă decât funcționalitate.
  • 10.
    + Se caută companiicare fac și designul și dezvoltarea, chiar dacă acestea nu le fac bine pe ambele.
  • 11.
    Etapa de realizarea arhitecturii informației este realizată foarte superficial sau chiar trecută cu vederea.
  • 12.
    Lipsește etapa elaborăriiunui prototip funcțional care să fie 4 testat și îmbunătățit pentru a ajunge la o versiune finală optimă.
  • 13.
    Paginile web șiaplicațiile sunt realizate în funcție de un caiet de 5 sarcini scris de persoane neinițiate în domeniu. Se uită de fapt de necesitățile utilizatorilor sistemului.
  • 14.
    Designerii sunt pușiîn față cu un caiet de sarcini și nu înțeleg în esență care sunt problemele pe care sistemul le rezolvă pentru utilizatorii acestuia.
  • 15.
    Designerii nu suntimplicați în toate etapele dezvoltării produsului. La fel nu sunt implicați nici utilizatorii.
  • 16.
    După ce estedat în exploatare, sistemul nu este modificat în funcție de nevoile reale a utilizatorilor, ci rămâne așa cum a fost dezvoltat de executor în funcție de caietul de sarcini.
  • 17.
    Nu se faceo analiză continuă a sistemului pentru a fi ulterior optimizat și îmbunătățit. Un produs informatic înseamnă însă adaptare, optimizare și îmbunătățire continuă.
  • 18.
    P roc es ul 1. Cercetare și analiză 2. Prototipizare 3. Dezvoltarea produsului 4. Îmbunătățire continuă
  • 19.
    Cercetare Prototip și analiză D e s ig n axat pe Testare și u t iliz a t o Testare îmbunătățire continuă r Design și implementare
  • 20.
    1 C e rc etare și analiz ă S c o p u r i l e și f u n c ți o n a l i t a t e a Se indentifică scopurile, funcționalitatea și procesele pe care urmează să le simplifice sau problemele pe care urmează să le soluționeze aplicația sau pagina web.
  • 21.
    1 C e rc etare și analiz ă U tiliz atorii Se identifică grupurile țintă de utilizatori și necesitățile fiecăreia dintre acestea. Se creează profilurile fiecărui grup în parte și se analizează ce necesități ar avea acestea de la sistem.
  • 22.
    1 C e rc etare și analiz ă Șirul logic și proc es ele Se elaborează pașii și consecutivitatea acestora. Se identifică ce procese vizibile pentru utilizator se vor petrece și cum va interacționa acesta cu sistemul.
  • 23.
    2 P rototipiz a re A rhite c tura informa ției Se analizează toate compartimentele sistemului sau paginii web și se grupează în categorii după natura informației și funcționalității. Se creează harta paginii web sau a sistemului cu toate compartimentele pe care le va avea.
  • 24.
    2 P rototipiz a re Wire fra ming și la yout Se schițează aranjarea elementelor vizuale pentru fiecare pagină în parte. Se găsește cea mai optimă și uzabilă opțiune.
  • 25.
    2 P rototipiz a re Imple menta rea prototipului Se implementează prototipul fără a pune accent pe design și decorarea elementelor. Se respectă doar amplasarea elementelor în pagină și tot ce s-a făcut în etapele precedente. Se aplică stilizări standard. Tes ta rea prototipului Prototipul creat se testează pentru a vedea dacă layoutul ales, procesele și pașii sunt simpli de înțeles pentru utilizatori.
  • 26.
    3 D e z volta rea produs ului D e s ig n U I Se elaborează designul interfeței pentru utilizatori având în vedere toți pașii anteriori, plus rezultatele obținute după testarea prototipului. Te s ta r e a După ce totul este gata, se testează și se fac ultimele ajustări. Apoi produsul este lansat.
  • 27.
    F olos ește c onve n țiile A c e s t a e s t e u n t it lu Continuă cu text bine gândit înainte de a fi publicat. Nu decora, comunică. Utilizatorul vrea funcționalitate. Iar acesta este un link și te duce la altă pagină. Apropo – nimeni nu are nevoie de elemente grafice fără funcționalitate care doar încarcă vizual pagina, scad contrastul și complică lucrurile fără vre-un motiv.
  • 28.
    B une prac tic i
  • 29.
    B une prac tic i
  • 30.
    B une prac tic i
  • 31.
    B une prac tic i
  • 32.
    B une prac tic i
  • 33.
    B une prac tic i
  • 34.
    B une prac tic i
  • 35.
    B une prac tic i
  • 36.
    4 Îmbun ă tățire c ontinuă Chiar după ce a fost testat și lansat, produsul are nevoie de îmbunătățiri care pot fi observate doar după interacțiunea cu utilizatorii sistemului la o scară mai mare. Deci este nevoie de analiză, optimizare și adaptare continuă în funcție de necesitățile utilizatorilor sistemului.
  • 37.
    R e gulă de a ur Când există mai multe soluții la aceeași problemă, cea mai bună este soluția care este mai simplă pentru utilizator.
  • 38.
    S ă re c a p i t u l ăm 1. Cercetează și analizează 2. Prototipizează 3. Dezvoltă produsul 4. Testează și îmbunătățește continuu
  • 39.
    Îi m ul țu m i m ț pentru atenția acordată. www.ux.md Un proiect RT Design Studio

Editor's Notes

  • #12 Information architecture (IA) is the art and science of organizing and labelling websites, intranets, online communities and software to support usability.[1] It is an emerging discipline and community of practice focused on bringing together principles of design and architecture to the digital landscape.[2] Typically it involves a model or concept of information which is used and applied to activities that require explicit details of complex information systems. These activities include library systems and database development.
  • #21 Ganditi-va la scopuri si nu aveti frica sa le modificati in functie de necesitati Nu atrageti prea multa atentie detaliilor la aceasta etapa Uitati de limitarile tehnice Ganditi-va pentru ce va veni utilizatorul
  • #22 Personas si scenarii Identificati functiile pe care utilizatorii urmeaza sa le poata indeplini si creati scenarii pentru fiecare din aceastea. Brainstorming. Intelegeti care este publicul tinta si care sunt necesitatile lui.
  • #23 Exista foarte multe date, cum ar fi cifre, indicatori, preturi, imagini, puncte de reper, etc. Toate acestea trebuiesc structurate logic dupa natura si context. Desenati un sir logic, pas dupa pas – cum urmeaza sa se intample lucrurile. In decursul acestui proces – amintiti-va de scenariile elaborate anterior si legatile de datele care apar pe parcurs.
  • #25 Incepeti a prototipiza – desenati pagina cu pagina tot ce se intampla la fiecare pas si cum este aranjata informatia. Aceste prototipuri se fac fara a pune accent pe decoratie si pe ca sa arate frumos pentru a economisi timp si resurse la aceasta etapa.
  • #26 Implementati prototipul si testati-l. Erorile care apar pe drum inlaturati-le si testati din nou.
  • #33 Știai că textul cu toate literele majuscule este mai greu de citit?