Tutorial – proiectarea interfețelor utilizator folosind Visual Paradigm

În timpul proiectării interfețelor utilizator, crearea unor machete de ecran ar putea oferi părților interesate o idee
mai bună despre ce ar vedea utilizatorii atunci când interacționează cu sistemul.
Vom folosi Visual Paradigm pentru a crea câteva modele de ecran și vom publica proiectul, după care puteți
vedea interacțiunea dinamică a utilizatorilor între machete într-un browser web. Vom avea nevoie de varianta
Standard sau superioară a VP pentru realizarea acestor machete.
Ca exemplu, vom proiecta o interfață de utilizator care autentifică utilizatorii și după conectarea cu succes, le
permite să selecteze comenzi pentru revizuire și să le proceseze în final.
Pași pentru crearea diagramelor interfeței utilizatorului
În exemplul nostru, vom crea un total de 5 diagrame de interfață de utilizator pentru modelele de ecran.
I. Pași pentru crearea ecranului de conectare
Aceasta este ceea ce urmează să simulăm în prima diagramă. Este un ecran pentru autentificarea utilizatorului.

1. Pentru a adăuga o nouă diagrama de interfață de utilizator, selectați Diagrams > NewUser Interface din
bara principală de instrumente.

2. Denumiți diagrama U01 Login. (Notă: Aceasta este prima noastră diagramă.)

3. Din bara de instrumente selectați Frame și adăugați unul în diagrama. Faceți dublu clic în partea de sus a
cadrului pentru a-l denumi Sales Order System Staff Portal.
4. Din bara de instrumente selectați Label și adăugați o etichetă nouă cadrului. Numiți-o ‘Welcome to ABC
Sales Order System’

Pentru a format textul, faceți clic dreapta pe etichetă și selectați Styles and Formatting > Formats…
În fereastra de dialog care se deschide, accesați secțiunea Font și modificați după cum doriți.

5. Adăugați încă două etichete, Staff ID: și Password:

6. Adăugați un câmp text lângă ID-ul personalului. Adăugați un câmp parolă lângă Parolă. Adaugă un buton
și numiți-l Login.
II. Pași pentru crearea ecranului principal al comenzii.
Aceasta este ceea ce urmează să simulăm în cea de-a doua diagramă.

1. Adăugați o nouă diagrama de interfață de utilizator și denumiți-o U02 Order Main Screen. Aceasta este a
doua diagramă a noastră.
2. În ecranul principal al comenzii U02, adăugați un cadru(frame) și denumiți-l ABC Sales Order System.
3. Adăugați un element de tipul Tabbed Header (Antet cu taburi) în cadru.

4. Faceți clic dreapta pe antetul cu taburi și selectați Open Specification ...

Observație: Într-un Tabbed Header, există 2 file implicite numite Tab 1 și Tab 2. În fereastra de
dialog UITabbedHeader Specification , lista de taburi corespunde listei de caractere mnemonice
de mai jos, care în final corespunde interfeței utilizator care afișează aceste file în aceeași ordine,
dar de la stânga la dreapta vizual. În mod implicit, primul caracter al unui nume de filă (de
exemplu, Tab 1 -> T) devine caracterul său mnemonic (dacă nu îl schimbați).
 În fereastra UI TabbedHeader Specification:
- selectați fila UI ->Selectați Tab 1 -> click Edit ->denumiti-o Order -> Selectați T (primul element din
listă). Faceți clic pe Edit. Introduceți litera O
- Editați Tab 2. Numiți-l Client. Schimbați caracterul mnemonic în litera C.

5. Faceți clic pe Add pentru a adăuga o nouă filă la listă și denumiți-o Search

6. Faceți clic pe Add pentru a insera o altă filă și denumiți-l System Log. Modificați caracterul mnemonic în
L, deoarece S-ul implicit a fost deja luat de fila Search.
7. Adăugați o etichetă text și denumiți-o Order Status.
8. Adăugați o casetă combinată (combo box) lângă eticheta Order Status

Pentru a adăuga elemente, faceți clic dreapta pe caseta Combo și selectați Open Specification…
În fereastra de dialog, faceți clic pe Add pentru a adăuga aceste 5 elemente [All, Quoted, Invoiced, Placed,
Done] unul câte unul. Apoi alegeți „All” pentru a fi elementul selectat (sau implicit).

Click pe săgeată și selectați

All

9. Adăugați un tabel sub eticheta Order Status.

 Faceți clic dreapta pe tabel și selectați Open Specification… În fereastra de dialog ->tab-ul UI, selectați
butonul Insert Column to Right și adăugați aceste 5 coloane una câte una [ ID, Date, Customer, Total,
Status ].

Selectați butonul Insert Row Below pentru a adăuga 3 randuri tabelului.

Pentru a popula tabelul, faceți dublu clic pe fiecare celulă pentru a introduce valorile așa cum este arătat.

III. Pași pentru crearea ecranului cu detaliile comenzii

1. Adăugați o nouă diagrama de interfață de utilizator și denumiți-o U03 Order Details. Aceasta este a 3-a
diagramă.
2. Adăugați un cadru (frame).
3. Adăugați un antet cu file (tabbed header).
4. În ecranul superior, adăugați etichete

5. Adăugați o zonă de text(text area) [Rm 1234, ABC Building]

 6. În centrul cadrului adăugați un tabel (4 coloane x 3 rânduri)
7. Adăugați etichete

8. Adăugați 2 butoane în partea de jos a cadrului.

IV. Pași pentru crearea ecranului cu detaliile comenzii (după procesarea comenzii)
Deoarece diagrama 4 este foarte asemănătoare cu diagrama 3, putem face mai întâi o copie a diagramei 3 și apoi
să o modificăm pornind de acolo.
1. Adăugați o nouă diagrama de interfață de utilizator și numiți-o U04 Order Processed.
2. Accesați diagrama 3 (U03 Order Details). Faceți clic pe partea de sus a cadrului. Apăsați Ctrl-C pentru a
copia.
3. Pentru a-l introduce în diagrama 4 (U04 Order Processed) faceți clic dreapta pe diagramă și selectați Paste
Model Element.
 Haideți să actualizăm starea comenzii. Faceți dublu clic pe eticheta Placed. Tastați Done pentru a înlocui
Placed.
Deoarece acest ecran apare după ce comanda a fost procesată, scoateți butonul Process Order din partea
dreaptă jos. Faceți clic dreapta pe el și selectați Delete > Delete.

V. Pași pentru crearea ecranului principal al comenzii (după ce comanda a fost procesată)
Deoarece diagrama 5 este foarte asemănătoare cu diagrama 2, putem face mai întâi o copie a diagramei 2 și apoi
să o modificăm.
1. Adăugați o nouă diagrama de interfață de utilizator și denumiți-o U05 Order Main Screen (Order
Completed).
2. Accesați diagrama U02 Order Main Screen. Faceți clic pe partea de sus a cadrului. Apăsați Ctrl-C
pentru a copia.
3. Pentru a-l introduce în diagrama 5, U05, faceți clic dreapta pe diagramă și selectați Paste Model
Element.
4. Faceți clic dreapta pe tabelă și selectați Open Specification… În fereastra de dialog care se deschide,
faceți dublu clic pe Status pentru comanda cu ID-ul 00001 și înlocuiți Placed cu Done.

VI. Pași pentru modelarea fluxului interfețelor

În această secțiune, vom adăuga referințe la câteva componente (de exemplu butoane), astfel încât selecția
acestora să ducă la ecranele corespunzătoare (reprezentate de diagramele 2 - 5) pentru simularea interțefelor cu
utilizatorii.
1. Comportament așteptat: clic pe butonul de conectare (Login), va direcționa utilizatorii către diagrama 2
care arată lista de comenzi. Pentru a obține acest comportament vom crea o referință de la butonul Login
pentru a trece la diagrama 2.
1.1. Selectați butonul Login, apoi faceți clic pe pictograma References din jurul acestuia
1.2.Alegeți opțiunea Add diagram
 În fereastra Select Diagram , selectați U02 Order Main Screen -> OK.

2. Comportament
așteptat: Selecția unui rând al unei comenzi (ex: ID 00001) din lista de comenzi va duce utilizatorii la
ecranul cu detalii ale comenzii U03, care afișează detalii ale acelei comenzi.
2.1 În diagrama U02 Order Main Screen, selectați tabelul și faceți clic pe pictograma References.
2.2 Selectați Add diagram Adăugați o referință la diagrama U03 Order Details Screen.

3. Comportament așteptat: Selecția butonului Back din ecranul U03 Order Details îi va duce pe utilizatori
înapoi la ecranul principal al comenzii - U02 Order Main Screen.
3.1 În diagrama ecranului U03, selectați butonul Back și faceți clic pe pictograma References.
3.2 Selectați Add diagram... Adăugați o referință la diagrama U02 Order Main Screen.

4. Comportament așteptat: Selecția butonului Process Order din ecranul de detalii comandă U03 Order
Details va duce utilizatorii la ecranul U04 Order Processed.
4.1 În diagrama U03 Order Details, selectați butonul Process Order și faceți clic pe pictograma
References.
4.2 Selectați Add diagram... Adăugați o referință la diagrama U04 Order Processed.
 5. Comportament așteptat: Selecția butonului Back din ecranul U04 Order Processed îi va duce pe
utilizatori la ecranul U05 Order Main Screen (Order Completed).
5.1 În diagrama ecranului U04, selectați butonul Back și faceți clic pe pictograma References.
5.2 Selectați Add diagram... Adăugați o referință la diagrama U05 Order Main Screen (Order Completed).

VII. Publicarea proiectului pentru simularea fluxului UI

1. Din bara de meniu, selectați Tools ->Publish Project

2. În fereastra Project Publisher selectați Advanced Options

3. În fereastra Project Publisher Options pentru Drill down effect for UI elements alegeți opțiunea Open
references, iar pentru Default diagram alegeți U01 Login (care este prima noastră diagramă). Faceți clic
pe OK.

4. Proiectul publicat va apărea într-un browser web, cu simulare de navigare UI disponibilă. De exemplu,
dacă faceți clic pe butonul Login, acesta va duce la ecranul principal al comenzii (U02 Order Main
Screen).