modul site uri mobile rce și uzabilitate -...

53
MODUL Site - uri Mobile și uzabilitate Acest proiect a fost finanțat cu sprijinul Comisiei Europene. Această publicație [comunicare] reflectă numai punctul de vedere al autorului, iar Comisia nu poate fi considerată responsabilă pentru orice utilizare care poate fi făcută din informațiile conținute de acestea. PROJECT M-COMMERCE

Upload: hoanglien

Post on 18-Jul-2019

275 views

Category:

Documents


3 download

TRANSCRIPT

Page 1: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

MODUL Site - uri Mobile

și uzabilitate

Acest proiect a fost finanțat cu sprijinul Comisiei Europene.

Această publicație [comunicare] reflectă numai punctul de vedere al autorului, iar Comisia nu poate fi considerată responsabilă

pentru orice utilizare care poate fi făcută din informațiile conținute de acestea.

PR

OJ

EC

T M

-CO

MM

ER

CE

Page 2: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

2

Cuprins

1. Rezumat __________________________________________________________________________________ 3

2. Introducere _______________________________________________________________________________ 4

3. Obiectivele modulului ____________________________________________________________________ 6

4. Teoria _____________________________________________________________________________________ 8

4.1. Site-urile mobile și uzabilitatea mobilă _____________________________________________ 8

4.1.1. Definiții și concepte _____________________________________________________________ 14

4.1.1.1. Experiența utilizatorului ____________________________________________________ 14

4.1.1.2. Design-ul de interacțiune ___________________________________________________ 16

4.1.1.3. Evaluarea uzabilității _______________________________________________________ 19

4.1.1.4. Design-ul de interfață utilizator ____________________________________________ 21

4.1.2. Principiile de uzabilitate ________________________________________________________ 24

4.1.3. Mici probleme de uzabilitate în m-commerce __________________________________ 25

4.2. Instrucțiuni generale pentru site-uri mobile ______________________________________ 27

4.2.1. De ce ar trebui să folosim instrucțiuni? ________________________________________ 27

4.2.2. Instrucțiuni generale cu privire la gradul de utilizare ________________________ 27

4.2.2.1. Instrucțiuni HHS ____________________________________________________________ 27

4.2.2.2. 247 Instrucțiuni de uzabilitate ale Userfocus _____________________________ 30

4.2.2.3. Liniile directoare Nielsen Norman Group __________________________________ 31

4.2.3. Instrucțiuni specifice pentru dispozitive și site-uri mobile ___________________ 32

4.2.3.1. W3C Cele mai bune practici ________________________________________________ 32

4.2.3.2. Instrucțiunile cuprinse în documentul intitulat "Uzabilitatea site-urilor și

aplicațiilor mobile" (scrise de Raluca Budiu și Jakob Nielsen în 2012), stabilesc un set de

recomandări de uzabilitate și bune practici în site-uri web și aplicații pentru dispozitive

mobile. _________________________________________________________________________________ 33

4.3. Design-ul de interfețe mobile centrate pe utilizator: Prototiparea _______________ 38

4.3.1. Niveluri diferite de prototipuri: avantaje și dezavantaje _______________________ 38

4.3.2. Cum să creați un prototip al unui site mobil? ____________________________________ 40

4.4. Evaluarea site-urilor mobile: Evaluarea euristică _________________________________ 42

4.4.1. Diferite evaluări de uzabilitate _________________________________________________ 42

4.4.2. Cum efectuăm o evaluare euristică? ___________________________________________ 43

5. Aplicații (exemple, sarcini de lucru etc.) _______________________________________________ 47

5.1. Structura site-ului ___________________________________________________________________ 47

5.2. Prototyping __________________________________________________________________________ 47

5.3. Evaluarea euristică __________________________________________________________________ 48

6. Surse _____________________________________________________________________________________ 49

7. Link-uri Internet _________________________________________________________________________ 50

8. Glosar ____________________________________________________________________________________ 52

Page 3: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

3

1. Rezumat

Site - urile mobile și uzabilitatea mobilă

Ce este Web-ul și dispozitivele mobile?

Arhitectura de bază a site-urilor Web și Mobile

Principalele tehnologii web, limbaje și platforme

Site - uri complete vs site-uri mobile vs aplicații

Definiții și concepte: experiența de utilizare, design de interacțiune,

evaluarea uzabilității, designul interfeței de utilizator

Principii de uzabilitate

Mici probleme de uzabilitate în m-commerce

Instrucțiuni generale pentru site-uri mobile

De ce ar trebui să folosim instrucțiuni?

Orientări generale cu privire la gradul de uzabilitate

Instrucțiuni specifice pentru dispozitive și site-uri mobile

Design-ul interfețelor mobile centrate pe utilizator: Prototiparea

Niveluri diferite de prototipare: avantaje și dezavantaje

Cum să creezi un prototip al unui site mobil?

Evaluarea site-urilor mobile: Evaluarea euristică

Diferite evaluări de uzabilitate

Cum să efectuezi o evaluare euristică?

Page 4: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

4

2. Introducere

Un site mobil este similar cu orice site, prin faptul că acesta este format din

pagini HTML bazate pe browser, care sunt legate între ele și accesate prin

Internet (pentru mobil de obicei rețele WiFi sau 3G sau 4G). Caracteristica

evidentă care distinge un site mobil de un site web standard (desktop), este

faptul că acesta este proiectat pentru afișarea interfețelor mai mici, portabile și

cu interfață touch-screen.

Site-urile mobile ar trebui să fie proiectate ținând cont de gradul de utilizare și

de experiența utilizatorului. Aceste discipline se concentrează pe anticiparea a

ceea ce utilizatorii ar putea avea nevoie să facă, asigurându-se că interfața are

elemente care sunt ușor de accesat, înțeles și utilizat, pentru a facilita aceste

acțiuni. Două concepte legate de acest tip sunt Responsive Web Design si Mobile

First Approach. Responsive Web Design face pagina de web să arate bine pe

toate dispozitivele (desktop-uri, tablete și telefoane). Este vorba de utilizarea

HTML, CSS și/sau JavaScript pentru a redimensiona, ascunde, micșora, mări sau

muta conținutul, pentru a arăta bine pe orice ecran. First Mobile Approach este

exact ceea ce sună a fi: proiectarea pentru cel mai mic ecran și expansiunea

spre cele mai mare. Este una dintre cele mai bune strategii pentru a crea un

design receptiv sau adaptabil.

O modalitate de evaluare a gradului de uzabilitate al unui site web este

construirea unui prototip al sistemului. Un prototip este o versiune de proiect a

unui produs care vă permite să explorați ideile, opinia utilizatorului și percepția.

Un alt element important pentru îmbunătățirea și evaluarea gradului de

uzabilitate al website-urilor sunt instrucțiunile. Cu toate că proiectarea site-urilor

mobile utilizabile necesită mult mai mult decât aplicarea pur și simplu a

instrucțiunilor, acestea pot aduce în continuare o contribuție semnificativă la

gradul de uzabilitate prin promovarea coerenței și a bunelor practici.

Instrucțiunile pot fi apoi utilizate pentru a evalua site-ul web folosind diferite

Page 5: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

5

metode de evaluare, de exemplu: evaluarea euristică și evaluarea expertului.

Într-o evaluare euristică, experți uzabilitate evaluează interfața site-ului dvs. și îl

compară cu principiile de uzabilitate acceptate. Analiza rezultată într-o listă de

probleme potențiale de uzabilitate care ar trebui abordate.

Cu toate că, de obicei, accesibilitatea este considerată ca fiind un subset al

gradului de uzabilitate, în acest moment, este important să se explice conceptul

de accesibilitate mobilă. Accesibilitatea mobilă se referă în general la a face site-

uri și aplicații mai accesibile persoanelor cu handicap atunci când folosesc

telefoanele mobile.

Page 6: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

6

3. Obiectivele modulului

Acest modul introduce uzabilitatea mobilă și site-urile mobile cu scopul de

aplicare în m-commerce. Acesta se concentrează pe proiectarea și evaluarea

interfețelor mobile centrate pe utilizator și experiența utilizatorului. De

asemenea, sunt prezentate conceptele de bază despre arhitecturi web mobile și

cadrul tehnologic de bază. Scopul acestui modul este de a arăta cum să se

proiecteze site-uri web pentru dispozitive mobile (site-uri mobile) și modul de

evaluare și îmbunătățire a gradului de uzabilitate a acestora pentru a oferi

experiențe optime de utilizator pentru m-commerce.

După ce a finalizat modulul cu succes, cursantul trebuie să fie informat cu privire

la principalele concepte și practici în utilizarea mobilă și a site-urilor mobile.

Cursantul va fi, de asemenea, familiarizat cu crearea de prototipuri și cu evaluări

diferite uzabilitate.

După finalizare, cursanții ar trebui să aibă o idee clară a ceea ce este

infrastructura tehnologică și cerințele care stau la baza abordărilor m-

commerce. Aceștia vor ști, de asemenea, atunci când și cum să intervină în

procesul de dezvoltare pentru a fi siguri că site-urile lor respectă standarde

comune și să ofere experiențe de utilizare satisfăcătoare. În cele din urmă,

cursanții vor ști, de asemenea, modul de evaluare a uzabilității site-urilor m-

commerce deja existente.

Putem considera, în general, trei abordări diferite pentru construirea

magazinului nostru online de telefonie mobilă: personalizate, gata făcute sau

terțe părți. Abordarea personalizată constă în construirea site-ului mobil întreg

folosind tehnologii cum ar fi HTML, CSS și JavaScript. O soluție gata preparată,

presupune construirea site-ului mobil, folosind un cadru existent sau platformă

care facilitează dezvoltarea oferind o infrastructură solidă, care poate fi extinsă

și personalizată. În cele din urmă, a treia parte se referă la utilizarea unei

platforme externe pentru cumpărături, de exemplu: eBay, Amazon, etc. În

Page 7: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

7

funcție de abordarea pe care o utilizați pentru a crea magazinul dvs. mobil, vă

sugerăm să citiți următoarele secțiuni ale acestui modul.

Abordare Sectiuni Motive

Terțe părți 4.1 & 4.2

Studiu de caz 5.1

Oferă baza tehnologiei web mobile și

utilizarea mobilă, care permite

cursantului să analizeze și să compare

diferite opțiuni terțe părți în ceea ce

privește tehnologia lor, gradul de

utilizare, adaptabilitate și ca răspuns la

diferite dispozitive.

Gata

confecționat

4.1, 4.2 și 4.4

Studiu de caz 5.1 &

5.3

Evaluarea euristică poate fi utilizată

pentru a analiza experiența și gradul

de utilizare a soluției gata făcute

pentru a verifica dacă respectă

standardele comune satisfăcând

nevoile clienților.

Personalizat Toate Cursanții vor învăța, de asemenea,

cum să dezvolte și să testeze un

prototip. Pentru un magazin mobil

personalizat, trebuie să intervină și în

procesul de proiectare pentru a se

asigura că magazinul Web final

satisface cerințele dumneavoastră

precum și nevoile clienților. Înțelegerea

de bază a designului este critic pentru

a comunica în mod eficient cu

dezvoltatorii.

Page 8: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

8

4. Teoria

4.1. Site-urile mobile și uzabilitatea mobilă

Dispozitivele web și mobile: site-uri mobile

Paginile web sunt în primul rând documente de tip text formatate și adnotate cu

Hypertext Markup Language (HTML). În plus față de textul formatat, paginile

web pot conține imagini, componente video și software, care sunt redate în

browser-ul web al utilizatorului ca pagini coerente de conținut multimedia.

Hyperlink-urile încorporate permit utilizatorilor să navigheze între pagini web.

Multiple pagini web cu o temă comună, un nume de domeniu comun, sau

ambele, pot fi numite un site web.

Un dispozitiv mobil este o tabletă sau alt dispozitiv portabil, care se face pentru

portabilitate, și este, prin urmare, atât de compact, cât și ușor. Noile tehnologii

de stocare a datelor, de prelucrare și de afișare au permis acestor mici

dispozitive să facă aproape tot ce a fost anterior făcut în mod tradițional cu

calculatoare personale mai mari.

Un site mobil este similar cu orice site prin faptul că acesta este format din

pagini HTML bazate pe browser care sunt legate între ele și accesate prin

Internet (pentru mobil de obicei rețele WiFi sau 3G sau 4G). Caracteristica

evidentă care distinge un site web mobil de la un site web standard este faptul

că acesta este proiectat pentru interfața de afișare mai mică și cu interfață

touch-screen.

Ca orice site web, site-urile mobile pot afișa conținut de text, date, imagini și

video. Ele pot accesa, de asemenea, caracteristici specifice pentru dispozitive

mobile, cum ar fi click pentru apelare (pentru a apela un număr de telefon) sau

de cartografiere bazate pe locație.

Page 9: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

9

Arhitectura de bază a site-urilor web și mobile

Figura 11 prezintă o arhitectură Web de bază compusă din cele trei elemente de

bază: un browser web, server web și Server de baze de date. Elementul Web

Browser este format din HTML, CSS si elemente JavaScript care arată

informațiile utilizatorului; logica aplicației rulează pe un server de web obișnuit

sub formă de Java Servlets, JSP, ASP.NET, PHP, Ruby, Python, etc, iar serverul

de baze de date constă într-o bază de date de un anumit tip (MySQL,

PostgreSQL, o bază de date NoSQL, etc. ), care stochează și preia informația.

Figura 1

Același principiu se aplică, de asemenea, aplicațiilor web mobile, care nu sunt

aplicații de sine stătătoare. Un site mobil se conectează de obicei la un server

web pentru a trimite solicitări și a primi date. Figura 2 prezintă o arhitectură de

bază a unui site mobil.

1 Web Architecture - http://tutorials.jenkov.com/software-architecture/n-tier-architecture.html

Page 10: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

10

Figura 2

Principalele tehnologii web, limbaje și platforme

HTML: (Hypertext Markup Language) este setul de simboluri de marcare

sau coduri inserate într-un fișier destinat pentru afișarea pe o pagină de

browser-ul Web. Marcarea spune browser-ului Web ce și cum să afișeze

cuvintele și imaginile unei pagini web pentru utilizator.

CSS: (Cascading Style Sheets) descrie modul în care elementele HTML vor

fi afișate pe ecran, hârtie, sau în alte medii. CSS poate defini culoarea,

fontul, alinierea textului, dimensiunea, marginile, spațierea, layout-ul și

multe alte caracteristici tipografice, și poate face acest lucru în mod

independent, pentru vizualizări pe ecran și tipărite. De regulă, paginile

HTML au de-a face cu fișierele de conținut și CSS se ocupă cu prezentarea.

JavaScript: Un limbaj de scripting dezvoltat de Netscape pentru a permite

autorilor Web să proiecteze site-uri interactive. Cu toate că împărtășește

multe dintre caracteristicile și structurile limbajului Java complet, a fost

dezvoltat in mod independent. JavaScript poate interacționa cu codul

sursă HTML, care permite autorilor Web să condimenteze site-urile lor cu

conținut dinamic.

PHP: Este un acronim recursiv pentru PHP: Hypertext Preprocessor, un

limbaj de scripting server-side, folosit pentru a crea pagini web HTML

dinamice si interactive. Un server procesează comenzi PHP atunci când un

vizitator al site-ului deschide într- o pagină, apoi trimite rezultatele către

browser-ul vizitatorului în HTML.

Page 11: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

11

Site-uri complete vs site-uri mobile vs aplicații

Prima decizie pe care întreprinderile trebuie să o facă, chiar și înainte de a

construi o platformă mobilă este în ce măsură are sens să dețină una sau ar

trebui să se limiteze la un site complet (desktop), cu speranța că acesta poate fi

folosit de pe telefoanele mobile la fel ca și de pe PC-uri. Se constată că site-urile

și aplicațiile mobile au rate de succes mai mari decât site-uri complete, cu

aplicații care au cele mai mari rate de succes. Această constatare este în general

valabilă pentru toate tipurile de telefoane - telefoane touch, smartphone-uri și

restul telefoanelor cu acces la internet și aplicații mobile.

Cu toate acestea, în cazul în care aveți constrângeri bugetare vă gândiți la

optimizarea rentabilității investiției, ar merita să vă puneți întrebarea dacă

oamenii sunt susceptibili la utilizarea site-ului dvs. de pe un dispozitiv mobil.

Analytics-ul dvs. ar putea fi în măsură să ofere câteva perspective asupra

acestui aspect. Cât de mulți utilizatori accesează site-ul dvs. complet pe un

dispozitiv mobil? Dacă se afișează un procent substanțial, ce tipuri de dispozitive

au? Aveți utilizatorii care accesează site-ul în mod repetat de pe dispozitivele lor

mobile? Există o serie de sarcini repetate pe care utilizatorii le execută de pe un

dispozitiv mobil?

La urma urmei, nu doriți să cheltuiți o mulțime de bani implementând un site

web mobil complex sau o aplicație și să nu aveți utilizatori pentru cele mai

multe dintre caracteristicile acestei platforme.

Următoarea întrebare care apare adesea este: ar trebui să construiți o aplicație

(sau poate chiar mai multe aplicații) sau ar trebui să creați un site mobil? Există

argumente pro și contra pentru fiecare opțiune.

Aplicațiile pot permite utilizatorilor acces cu un click la serviciul dvs. De

obicei, un singur click este suficient pentru a porni o aplicație (comparați

cu introducerea unei adrese în site-ul web browser). Acest lucru este

Page 12: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

12

valabil mai ales pentru utilizate frecvent sau cele poziționate pe primul

ecran de telefon.

Cu toate acestea, accesarea unei aplicații rareori utilizate poate fi la fel de

dificilă ca și găsirea unui site web. Unul dintre motive este acela că

oamenii tind să aibă o mulțime de aplicații pe telefonul lor. Chiar dacă

oamenii ar mai fi folosit aplicația înainte, ei au adesea probleme în a găsi o

aplicație într-o listă care se întinde pe mai multe ecrane.

Atunci când aplicațiile pot fi grupate în dosare (ca în iOS), nivelul

suplimentar de organizare poate face în mod paradoxal, procesul de

constatare mai anost. A fost această aplicație sub "Utilități" sau a fost sub

"Stil de viață"? Deseori, oamenii sfârșesc prin a recurge la căutare în

scopul de a găsi o aplicație pe telefonul lor. Și de asemenea, căutarea este

și metoda principală de acces pentru site-uri web.

Aplicațiile oferă o integrare mai strânsă cu alte caracteristici ale

telefonului. De exemplu, ele pot profita de GPS, busolă, accelerometru,

camera foto, sau de aplicații, cum ar fi hărți, telefon și contacte. Unele

dintre aceste caracteristici (de exemplu, GPS, informații de orientare) au

devenit disponibile și pentru site-uri web, dar este încă puțin probabil ca

site-urile mobile să atingă același nivel de integrare cu dispozitivul ca

aplicațiile mobile.

Aplicațiile pot funcționa atunci când telefonul este deconectat de la

internet. Pe măsură ce oamenii se deplasează în cursul zilei lor, calitatea

semnalului celulei sau disponibilitatea unei rețele fără fir variază.

Aplicațiile extrag de multe ori date de la un server atunci când telefonul

este conectat și le utilizează atunci când telefonul este offline. Anumite

aplicații stochează date pe telefon și necesită puțin (dacă este cazul) acces

la server. Utilizatorii apreciază posibilitatea de a utiliza telefonul lor atunci

când au o conexiune slabă sau nu au conexiune deloc.

Aplicații necesită dezvoltare specifică platformei. Pe măsură ce companiile

dezvoltă aplicatii pentru diverse dispozitive, ele trebuie să instruiască

personalul și să aibă echipe de dezvoltare potențială pentru diferite

procese și platforme. Poate fi mai costisitoare crearea mai multor aplicații

Page 13: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

13

mobile, față de un singur site mobil. Deși s-ar putea fie necesar să aveți

trei variante corespunzătoare celor trei tipuri diferite de telefoane

(smartphone, touch-screen, restul telefoanelor cu acces la internet și

aplicații), același website poate lucra pe un iPhone și pe un telefon

Android.

aplicațiile iOS trebuie să treacă printr-un proces de aprobare înainte ca

acestea să devină publice. Aplicațiile iPhone trebuie să fie aprobate de

către Apple înainte de a deveni disponibile App Store. Cu toate că

utilizatorii beneficiază potențial de acest proces (prin experimentarea unui

look și simț coerente în aplicații), în practică, aceasta înseamnă, de

asemenea, că lansarea aplicației în App Store poate fi amânată.

aplicațiile iOS au nevoie să respecte modelul Apple de cumpărare și

abonament, precum și regulile de conținut acceptabile. Multora din

creatorii de conținut nu le place ajungă să împartă o parte din veniturile

lor cu Apple, astfel încât aceștia încearcă uneori să creeze aplicații web

care reproduc mai îndeaproape experiența unei aplicații standard, dar

sunt, de fapt, pagini web.

Utilizatorii trebuie să instaleze și să actualizeze aplicații. Un alt dezavantaj

potențial al aplicațiilor este efortul necesar depus de utilizator pentru a

instala și menține aplicația. Cei mai mulți utilizatori sunt destul de

familiarizați cu instalarea aplicațiilor pe telefonul lor, dar nu își

actualizează aplicațiile în mod constant și de multe ori consideră că

întreținerea aplicației este o muncă migăloasă.

Site-urile nu au nevoie să fie descărcate, modernizate sau actualizate de

către utilizatori; lucrările de întreținere sunt delegate în întregime site-ului

web.

Aplicațiile sunt mai puțin detectabile decât site-urile web. Utilizatorii

trebuie să știe mai întâi despre o aplicație, în scopul de a o instala; în plus,

ei trebuie să caute aplicația într-un magazin de aplicații și să o instaleze.

În contrast, oricine poate avea acces la un site web - daca au auzit sau nu

de acesta (prin intermediul unui motor de căutare).

Page 14: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

14

Aplicațiile sunt pentru utilizatori repetitivi. Instalarea, în special, determină

o barieră ridicată spre adoptarea acestora. Deoarece costul instalării unei

aplicații este destul de mare (în termeni de timp, dar și de spațiu ocupat

pe dispozitiv), utilizatorii nu se vor deranja să o facă, cu excepția cazului

în care beneficiul estimat de ei obținut din instalarea aplicației este egal cu

costul.

Chiar dacă un utilizator ar fi auzit de o aplicație, este puțin probabil că se

va instala în cazul în care se estimează o singură utilizare. Informațiile

mobile duc rareori la aplicații instalate: atunci când oamenii au nevoie de

informații specifice (așa cum se întâmplă adesea atunci când sunt pe

mobil), ei caută răspunsuri pe Web. Excepția este atunci când utilizatorii

estimează că vor avea aceea nevoie din nou și din nou.

4.1.1. Definiții și concepte

4.1.1.1. Experiența utilizatorului

Experiența de utilizator (EU) se concentrează pe a avea o înțelegere profundă a

utilizatorilor, a ceea ce au aceștia nevoie, ce valorează aceștia, abilitățile lor și,

de asemenea, limitările lor. De asemenea, ia în considerare obiectivele de

afaceri și obiectivele grupului de management al proiectului. Cele mai bune

practici EU promovează îmbunătățirea calității interacțiunii utilizatorului cu

ajutorul și percepția asupra produsului, precum și orice servicii conexe.

Factorii care influențează EU

La baza EU stă asigurarea că utilizatorii găsesc valoare în ceea le furnizați.

Pentru ca acolo să fie o experiență semnificativă și valoroasă utilizator,

informațiile trebuie să fie (a se vedea figura 3)2:

Utile: Conținutul trebuie să fie original și să îndeplinească o necesitate.

Utilizabil: Site - ul trebuie să fie ușor de utilizat.

Dezirabil: Imagine, identitate, brand, precum și alte elemente de design

sunt folosite pentru a evoca emoție și apreciere.

2 Peter Morville - User Experience Honeycomb

Page 15: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

15

Ușor de găsit: Conținutul trebuie să fie navigabil și pe site și în afara

acestuia.

Accesibil: Conținutul trebuie să fie accesibil persoanelor cu handicap.

Credibil: Utilizatorii trebuie să aibă încredere în ceea ce le spuneți.

Figura 3

Domenii conexe construirii experienței utilizatorului.

EU este un domeniu în creștere, care este încă definit în mare parte. Crearea

unui design de succes centrat pe utilizator cuprinde principiile de interacțiune

om-calculator (HCI) și merge mai departe pentru a include următoarele

discipline:

Managementul de proiect se concentrează pe planificarea și organizarea

unui proiect și a resurselor sale. Aceasta include identificarea și

Page 16: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

16

gestionarea ciclului de viață care urmează să fie utilizat, aplicând aceasta

la procesul de proiectare centrată pe utilizator, formularea echipei de

proiect, și ghidarea în mod eficient a echipei prin toate fazele, până la

finalizarea proiectului.

Cercetarea se concentreaza pe înțelegerea comportamentelor

utilizatorului, a nevoilor și motivațiilor prin tehnici de observare, analiza

sarcinilor, precum și alte metodologii de feedback.

Evaluarea uzabilitatății se concentrează pe cât de bine pot utilizatorii

învăța și folosi un produs pentru a atinge obiectivele lor. De asemenea, se

referă la modul în care utilizatorii sunt mulțumiți cu acest proces.

Arhitectura Informației (AI) se concentrează pe modul în care este

organizată de informația, structurată și prezentată utilizatorilor.

Proiectarea Interfeței de Utilizator se concentrează pe anticiparea a ceea

ce utilizatorii ar putea avea nevoie să facă și asigurarea că interfața are

elemente care sunt ușor de accesat, de înțeles și utilizarea pentru

facilitarea acestor acțiuni.

Designul de interacțiune (IXD) se concentrează pe crearea unor sisteme

interactive de îmbinare cu comportamente bine gândite.

Designul vizual se concentrează pe asigurarea unei interfețe estetice, care

este în concordanță cu obiectivele mărcii.

Strategia de conținut se concentrează pe scrierea și administrarea

conținutului util prin planificarea, crearea, livrarea și guvernarea din

spatele acestuia.

Accesibilitatea se concentrează pe modul în care indivizii cu handicap

accesează sau beneficiază de un site, sistem sau aplicație.

Web Analytics se concentrează pe colectarea, raportarea și analiza datelor

site-ului.

4.1.1.2. Design-ul de interacțiune

Design-ul de interacțiune se concentrează pe crearea de interfețe captivante cu

comportamente bine gândite. Înțelegerea modului în care utilizatorii și

Page 17: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

17

tehnologia comunică între ele este fundamentală pentru acest domeniu. Cu

această înțelegere, puteți anticipa modul în care cineva ar putea interacționa cu

sistemul, repara problemele din timp, precum și inventa noi modalități de a face

lucruri.

Cele mai bune practici pentru proiectarea interacțiuni. Luați în considerare

aceste calități și întrebări asociate la crearea de produse digitale care au un

element interactiv:

Întrebări să ia în considerare atunci când proiectarea pentru interacțiune3

Definiți modul în care

utilizatorii pot

interacționa cu

interfața

Ce se poate face un utilizator cu mouse - ul,

degetul sau creionul pentru a interacționa direct

cu interfața? Aceasta apăsarea butoanelor,

glisarea și fixare prin interfata, etc.

Ce comenzi poate da un utilizator, care nu fac

parte direct din produs, pentru a interacționa cu

acesta? Un exemplu de "manipulare indirectă"

este atunci când un utilizator apasă "Ctrl + C", se

așteaptă să fie în măsură să copieze o bucată de

conținut.

Oferă utilizatorilor

indicii despre

comportament,

înainte ca acțiunile să

aibă loc

Dar aspectul (culoarea, forma, dimensiunea, etc)

oferă utilizatorului un indiciu cu privire la modul

în care aceasta poate funcționa? Acestea ajuta

utilizatorul să înțeleagă modul în care acesta

poate fi utilizat.

Ce informații furnizați pentru a permite unui

utilizator sa știe ce se va întâmpla înainte de a

efectua o acțiune? Acestra spun utilizatorilor ce

se va întâmpla în cazul în care decid să continue

cu acțiunea lor. Aceasta poate include etichete

semnificative pe un buton, instrucțiuni înainte de

3 Usability.gov - http://www.usability.gov/what-and-why/interaction-design.html

Page 18: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

18

o depunere finală etc.

Anticiparea și

atenuarea erorilor

Sunt constrângeri puse în aplicare pentru a ajuta

la prevenirea erorilor? Principiul Poka Yoke spune

că plasarea acestor constrângeri forțează

utilizatorul să ajusteze comportamentul în scopul

de a merge mai departe cu acțiunea prevăzută.

Mesajele de eroare furnizează o modalitate

pentru ca utilizatorul să corecteze problema sau

să explice de ce a apărut eroarea? Mesajele de

eroare utile furnizează soluții și context.

Luați în considerare

sistemul de feedback

si timpul de raspuns

Ce feedback poate obține un utilizator odată ce

se realizează o acțiune? Atunci când un utilizator

se angajează și efectuează o acțiune, sistemul

trebuie să răspundă să recunoască acțiunea și să

anunțe utilizatorul ce face.

Cât timp durează între o acțiune și timpul de

răspuns al unui aparat? Receptivitatea (latența)

poate fi caracterizat prin aceea la patru niveluri:

imediată (mai puțin de 0,1 secunde), bâlbâită

(0,1-1 a doua), întreruptă (1-10 secunde) și

perturbată (mai mult de 10 secunde).

Gândiți -vă strategic

la fiecare element

Sunt elementele de interfață la o dimensiune

rezonabilă pentru interacțiune? Legea Fittsspune

că elemente, cum ar fi butoanele, trebuie să fie

suficient de mari pentru ca utilizatorul să poată

face click. Acest lucru este deosebit de important

într-un context mobil, care include o componentă

de atingere.

Sunt muchiile și colțurile folosite în mod strategic

pentru a localiza elemente interactive cum ar fi

meniurile? Legea Fitts ", prevede că, deoarece

marginile oferă o limită de care mouse - ul sau

Page 19: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

19

degetul nu pot trece, acestea tind să fie o locație

bună pentru meniuri și butoane.

Urmați standarde? Utilizatorii au o înțelegere a

modului în care elementele de interfață ar trebui

să funcționeze. Ar trebui să vă îndepărtați de

standardele vechi, în cazul în care un nou mod îl

îmbunătățește pe cel vechi.

Simplifică pentru

abilitatea de a învăța

Este informația împărțită în șapte (plus sau minus

două) produse la un moment dat? George Miller a

constatat că oamenii sunt capabili de a păstra

între cinci și nouă elemente în memoria pe

termen scurt, înainte să uite sau să întâmpine

erori.

Este capătul utilizatorului simplificat cât mai mult

posibil? Legea de conservare a lui Tesler notează

că trebuie să eliminați complexitatea cât mai mult

posibil la utilizator și la schimb, să o integrați în

sistem. Acestea fiind spuse, el observă, că

trebuie să se țină cont de faptul că lucrurile pot fi

simplificate numai până la un anumit punct,

înainte ca acestea să nu mai funcționeze.

Sunt utilizate formate familiare? Legea lui Hick

prevede că timpul de decizie este afectat de

modul în care un format este familiar pentru un

utilizator, cât de familiarizat este acesta cu

alegerile și numărul de opțiuni de care au nevoie

pentru a se decide.

4.1.1.3. Evaluarea uzabilității

Evaluarea uzabilității se concentrează pe cât de bine pot utilizatorii învăța și

folosi un produs, pentru a-și atinge obiectivele. De asemenea, aceasta se referă

la modul în care utilizatorii sunt mulțumiți cu acest proces. Pentru a colecta

aceste informații, practicanții folosesc o varietate de metode care adună

Page 20: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

20

feedback din partea utilizatorilor cu privire la un site existent sau planuri legate

de un nou site.

Ce este Uzabilitatea?

Gradul de uzabilitate se referă la calitatea experienței unui utilizator atunci când

interacționează cu alte produse sau sisteme, inclusiv site-uri web, software,

dispozitive sau aplicații. Gradul de uzabilitate descrie eficacitatea, eficiența și

satisfacția generală a utilizatorului.

Este important să se înțeleagă că gradul de uzablitate nu este o proprietate

unică, uni-dimensională a unui produs, sistem, sau a unei interfețe cu

utilizatorul. "Uzabilitatea" este o combinație de factori, printre care :

Design-ul intuitiv: o înțelegere aproape fără efort a arhitecturii și

navigarea site-ului.

Ușurința de învățare: cât de repede poate îndeplini sarcinile de bază un

utilizator care nu a văzut niciodată interfața.

Eficiența utilizării: Cât de repede poate realiza sarcini un utilizator

experimentat.

Memorabilitate: după vizitarea site-ului, își poate aminti un utilizator

suficient pentru a-l folosi în mod eficient în vizitele viitoare.

Frecvența de eroare și gravitatea: cât de des întâmpină utilizatorii erori în

timpul utilizării sistemului, cât de grave sunt erorile și modul în care

utilizatorii pot repara erorile.

Satisfacție subiectului: Dacă utilizatorului îi place utilizarea sistemului.

Care sunt metodele de evaluare și când ar trebui să le pun în aplicare?

Cheia dezvoltarii site-urilor cu uzabilitate ridicată este angajarea de proiectare

centrată pe utilizator. Expresia "testează devreme și des" este deosebit de

adecvată atunci când vine vorba de testarea de uzabilitate. Ca parte a UCD

puteți și ar trebui să testați cât mai devreme posibil în proces iar varietatea

metodelor disponibile vă permite să asistați la dezvoltarea de conținut,

arhitectura informației, design-ul vizual, design-ul de interacțiune și satisfacția

generală a utilizatorilor.

Page 21: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

21

Oportunitățile de testare includ:

Testarea uzabilității de referință pe un site existent

Focus grupuri, sondaje sau interviuri pentru a stabili obiective ale

utilizatorilor

Testare card sorting pentru a ajuta la dezvoltarea IA

Testarea wireframe pentru a evalua navigarea

Testare First click, pentru a vă asigura că utilizatorii dvs. merg pe calea

cea dreaptă

Testarea uzabilității pentru a evalua interacțiunea cu utilizatorul de la un

capăt la altul

Studii de satisfactie pentru a vedea modul în care site-ul este cotat în

lumea reală

Oricare test sau o combinație a acestor teste va îmbunătăți radical gradul de

utilizare a site-ului, sistemului sau aplicației.

Prelucrarea datelor de la testare

Evaluările uzabilității pot capta două tipuri de date: date calitative și date

cantitative. Datele cantitative observă ce s-a întâmplat de fapt. Datele calitative

descriu ceea ce au gândit sau spus participanții.

După ce s-au adunat datele, se folosesc la:

1. Evaluarea gradului de uzabilitate a site-ului dvs.

2. Recomanda îmbunătățiri

3. Punerea în aplicare a recomandărilor

4. Re-testarea site-ului pentru a măsura eficacitatea modificărilor.

4.1.1.4. Design-ul de interfață utilizator

Design-ul de interfață utilizator (UI) se concentrează pe anticiparea a ceea ce

utilizatorii ar putea avea nevoie să facă și asigurarea că interfața are elemente

Page 22: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

22

care sunt ușor de accesat, de înțeles și utilizarea pentru facilitarea acestor

acțiuni. UI reunește concepte de design de interacțiune, design vizual și

arhitectura de informații.

Alege elementele de interfață

Utilizatorii au devenit familiari cu elemente de interfață care acționează într-un

anumit fel, deci va trebui să încercați să fiți coerenți și previzibili în alegerile

dumneavoastră și aspectul acestora. Făcând astfel, veți asigura finalizarea

sarcinii, eficiență, și satisfacție.

Elementele de interfață includ, dar nu sunt limitate la:

Controale de intrare: butoane, câmpuri de text, casete de selectare,

butoane radio, liste derulante, casete listă, comutare, câmpuri de date.

Componente de navigare: breadcrumb, cursor, câmp de căutare,

paginare, tag-uri, pictograme.

Componente informaționale: ponturi, icoane, bara de progres, notificări,

casete de mesaj, ferestre modale.

Containere: acordeon.

Sunt momente în care mai multe elemente ar putea fi adecvate pentru afișarea

conținutului. Atunci când se întâmplă acest lucru, este important să se ia în

considerare compromisurile. De exemplu, uneori, elemente care pot ajuta la

economisirea spațiului, pot deveni o povară pentru utilizatorul mental, forțându-l

să ghicească ce este în meniul drop-down sau ceea ce ar putea fi elementul.

Cele mai bune practici pentru proiectarea unei interfete

Tot ceea ce provine de la cunoașterea utilizatorilor dumneavoastră, inclusiv la

înțelegerea obiectivelor, aptitudinilor, preferințelor și tendințelor. Odată ce vă

cunoașteți utilizatorul, asigurați-vă că luați în considerare următoarele aspecte

la proiectarea interfeței dvs.:

Page 23: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

23

Păstrați interfața simplă. Cele mai bune interfețe sunt aproape invizibile

pentru utilizator. Ele evită elementele inutile și sunt clare în limba pe care

o folosesc pe etichete și în mesaje.

Creați consistență și folosiți elemente comune UI. Prin utilizarea

elementelor comune în UI, utilizatorii se simt mai confortabil și sunt

capabili de a face lucrurile mai repede. De asemenea, este important să se

creeze modele în limbaj, schemă și design pe tot site-ul pentru a ajuta la

facilitarea eficienței. Odată ce un utilizator învață cum să facă ceva, acesta

ar trebui să poată transfera îndemânarea în alte părți ale site-ului.

Adăugați un scop în aspectul paginii. Luați în considerare relațiile spațiale

dintre elementele de pe pagină și structura paginii, în funcție de

importanță. Plasarea atentă a elementelor poate ajuta la atragerea

atenției asupra celor mai importante piese de informații și poate ajuta la

scanare și lizibilitate.

Utilizați în mod strategic culoarea si textura. Puteți direcționa atenția

înspre sau redirecționa atenția departe de elemente folosind culoarea,

lumina, contrastul, si textura spre propriul avantaj.

Utilizați tiparul pentru a crea o ierarhie și claritate. Luați în considerare cu

atenție modul în care utilizați caracterele. Diferențiați dimensiuni, fonturi

și dispunerea textului pentru a ajuta la creșterea lizibilității.

Asigurați-vă că sistemul comunică ceea ce se întâmplă. Întotdeauna

informați utilizatorii cu privire la locație, acțiuni, schimbări în stare sau

erori. Utilizarea diferitelor elemente UI pentru a comunica starea și, dacă

este necesar, pașii următori pot reduce frustrarea pentru utilizator.

Gândiți-vă la valorile implicite. Gândindu-vă atent la anticiparea

obiectivelor pe care oamenii le aduc pe site-ul dvs., puteți crea valori

implicite care reduc povara asupra utilizatorului. Acest lucru devine

deosebit de important atunci când vine vorba de a forma un design în

cazul în care s-ar putea avea posibilitatea de a avea unele domenii pre-

alese sau completate.

Page 24: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

24

4.1.2. Principiile de uzabilitate

Există 10 principii de bază ale uzabilitate în conformitate cu Jakob Nielsen4:

Vizibilitatea stării sistemului: Sistemul trebuie să păstreze întotdeauna

utilizatorii informați cu privire la ceea ce se întâmplă, prin feedback-ul

adecvat într-un timp rezonabil.

Potrivirea între sistem și lumea reală: Sistemul ar trebui să vorbească

limba utilizatorilor, cu cuvinte, fraze și concepte familiare pentru utilizator,

mai degrabă decât termeni orientați către sistem. Urmați convențiile din

lumea reală, punând la dispoziție informații care apar într-o ordine logică

și naturală.

Controlul utilizatorilor și libertatea: Utilizatorii aleg adesea funcții de

sistem din greșeală și vor avea nevoie în mod clar de "ieșire de urgență"

marcată pentru a părăsi starea de nedorit, fără a fi nevoie să treacă

printr-un dialog extins. Sprijiniți undo și redo.

Coerență și standarde: Utilizatorii nu trebuie să se întrebe dacă diferite

cuvinte, situații sau acțiuni înseamnă același lucru. Urmați convențiile

platformelor.

Prevenirea erorilor: Chiar mai bun decât mesajele de eroare este un

design atent care împiedică o problemă de la care erorile apar în primul

rând. Eliminați condițiile predispuse la erori sau verificați-le și prezentați

utilizatorilor o opțiune de confirmare înainte ca acestea să se angajeze la

acțiune.

Recunoașterea, mai degrabă decât de rechemarea: Minimizarea sarcinii de

memorie a utilizatorului prin obiecte, acțiuni și opțiuni vizibile. Utilizatorul

nu trebuie să memoreze informațiile dintr-o parte a dialogului la altul.

Instructiuni de utilizare a sistemului trebuie să fie vizibile sau ușor de

accesat ori de câte ori este cazul.

Flexibilitate și eficiență de utilizare: Acceleratoarele - nevăzute de către

utilizatorul novice - pot accelera de multe ori interacțiunea pentru

utilizatorul expert, astfel încât sistemul să poată satisface atât utilizatorii

4 Jakob Nielsen - 10 Usability Heuristics for User Interface Design - http://www.nngroup.com/articles/ten-

usability-heuristics/

Page 25: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

25

fără experiență, cât și pe cei cu experiență. Se permite utilizatorilor să

adapteze acțiuni frecvente.

Design estetic și minimalist: Dialogurile nu ar trebui să conțină informații

care sunt irelevante sau rareori necesare. Orice unitate suplimentară de

informații într-un dialog concurează cu unitățile de informații relevante și

diminuează vizibilitatea lor relativă.

Ajutați utilizatorii sa recunoască, diagnosticheze, și să repare erorile:

Mesajele de eroare trebuie să fie exprimate într-un limbaj simplu (fără

coduri), indică în mod precis problema, și să sugereze în mod constructiv

o soluție.

Ajutorul și documentația: Chiar dacă este mai bine dacă sistemul poate fi

utilizat fără documentație, poate fi necesar să oferiți ajutor și

documentație. Orice astfel de informații ar trebui să fie ușor de căutat,

axate pe sarcina utilizatorului, să listeze măsuri concrete care urmează să

fie efectuate și să nu fie prea mare.

4.1.3. Mici probleme de uzabilitate în m-commerce

M-Commerce: UX teribil5

Site-urile pentru desktop vând aproape de 4 mai mult ca și site-urile mobile. Cel

mai probabil, motivul pentru aceste rate de conversie mobile teribile (proporția

de vizitatori a unui site web care efectuează o achiziție) este faptul că multe

dintre aceste companii de e-commerce nu au nici măcar un design mobil special,

dar încearcă să arate același model pentru utilizatori, indiferent de platformă.

Scalarea unei interfețe de utilizator prin diferite platforme nu implică doar

întinderea sau micșorarea aceleași informații pentru a se potrivi diferitor

dimensiuni de ecran ca o implementare naivă a designului receptiv: este necesar

mult mai mult pentru a optimiza un design pentru diferite dimensiuni de ecran și

mecanisme de intrare.

5 Jakob Nielsen. M-Commerce: Terrible UX (at least for Christmas 2014 sales):

http://www.nngroup.com/articles/m-commerce-terrible-ux/

Page 26: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

26

Site-urile non-e-commerce sunt, de asemenea, susceptibile de a avea cel puțin

una dintre aceleași 3 probleme: lipsa unui design mobil separat, gradul de

utilizare generală proastă, sau lipsa de conformitate cu ghidurile de uzabiltate

mobilă.

În timp ce "t-commerce" (e-commerce bazat pe tabletă) a avut rezultate mult

mai bune decât m-commerce din noile date, site-urile de e-commerce încă mai

au potențialul de ridicare de 31% a vanzarilor de tablete în cazul in care s-ar

deranja să fie în conformitate cu instrucțiunile de proiectare pentru tablete.

Nu forțați utilizatorii să se înregistreze înainte de a putea cumpăra6

Una dintre cele mai frecvente plângeri pe care le auzim în cercetarea pe

uzabilitate de e-commerce este despre înregistrare. Cumpărătorii au multe

motive să le displacă sau să le fie groază de înregistrare. Ei pot să nu se mai

întoarcă pe site niciodată, făcând o achiziție o singură dată sau o achiziție

cadou. Lor le poate displace înregistrarea în general, din frustrarea de a-și

aminti nume de utilizatori și parole pentru toate site-urile pe care le vizitează.

Unii cumpărători nu doresc un site care le salvează informațiile personale și

presupun că în cazul în care se înregistrează pe site, informațiile vor fi salvate.

Mulți utilizatori asociază înregistrarea cu mărirea traficului de e-mail nedorite, și

pe bun motiv, deoarece multe site-uri oferă casete de selectare mici pentru a se

înscrie utilizatorii pentru buletine pe e-mail.

În cele mai multe cazuri, înregistrările implică măsuri suplimentare, griji în plus

și un potențial suplimentar pentru ca lucrurile să meargă prost (indiferent dacă

sunt erori ale utilizatorului sau erori ale site-ului) și eșecul operațiunii

utilizatorului. Cu cât este mai mare costul de interacțiune, cu atât mai puțini

oameni vor finaliza un proces. Acest lucru este valabil pentru orice măsuri de

interfață cu utilizatorul, dar în cazul e-commerce există o legătură deosebit de

directă între bătaia de cap a utilizatorilor și vânzările pierdute. Decât să forțați

utilizatorii să se înregistreze înainte de plată, oferiți posibilitatea de a se

înregistra în cadrul procesului de plată prin prezentarea unor câmpuri opționale 6 Don't force users to register before they can buy - http://www.nngroup.com/articles/optional-registration/

Page 27: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

27

pentru utilizator pentru a introduce o parolă. Acest lucru pune utilizatorii în

control și le permite să decidă dacă le este util să se înregistreze sau nu.

4.2. Instrucțiuni generale pentru site-uri mobile

4.2.1. De ce ar trebui să folosim instrucțiuni?

Un ghid întruchipează o practică comună, care a fost evaluată și testată ca

rezultat într-o practică acceptată pentru proiectarea și crearea de produse care

sunt ușor de utilizat și satisfăcătoare. Cu toate că proiectarea sistemelor uzabile

necesită mult mai mult decât aplicarea pur și simplă a unor instrucțiuni,

instrucțiunile pot aduce în continuare o contribuție semnificativă la gradul de

uzabilitate prin promovarea coerenței și a bunelor practici.

Cum se utilizează instrucțiunile?

Pentru fiecare instrucțiune din listă se marchează site-ul dvs. ca fiind fie

conform, fie neconform cu ghidul.

Amintiți-vă că toate instrucțiunile sunt specifice contextului. În cazul în care

considerați că o instrucțiune nu se aplică pe site-ul dvs., este în regulă să o

ignorați.

Instrucțiunile sunt exprimate în mod intenționat ca declarații pozitive, astfel

încât, atunci când trimiteți rezultatele înapoi la echipa de design să puteți

identifica unele puncte forte ale designului înainte de intra în probleme.

4.2.2. Instrucțiuni generale cu privire la gradul de utilizare

Există mai multe instrucțiuni de uzabilitate propuse de diferite organizații și

guverne. Unele dintre cele mai importante sunt prezentate mai jos.

4.2.2.1. Instrucțiuni HHS

"Instrucțiunile HHS" sunt recomandările guvernului SUA. Ele au fost create de

Departamentul de Sanatate si Servicii Umane (HHS), SUA, în 2004, din acest

motiv, ele sunt bine cunoscute ca "instrucțiunile HHS".

Acestea au fost create și revizuite de către designeri de uzabilitate și experți

bazați în cercetarea din domenii diferite (cum ar fi: psihologia cognitivă, știința

calculatoarelor, factorii umani, comunicarea tehnică și de uzabilitate).

Page 28: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

28

În zilele noastre există 209 instrucțiuni în total (în prima ediție au fost 187 de

Instrucțiuni). Instrucțiunile au fost grupate pe baza unui studiu în următoarele

18 grupe:

Procesul de proiectare și de evaluare (11 instrucțiuni )

Optimizarea experienței utilizatorului (16 instrucțiuni )

Accesibilitate (13 instrucțiuni )

Hardware și software (5 instrucțiuni )

Home Page (9 instrucțiuni )

Aspect pagină (13 instrucțiuni)

Navigare (12 instrucțiuni )

Desfășurare și paginație (5 instrucțiuni )

Heading-uri, titluri și etichete (8 instrucțiuni )

Link-uri (14 instrucțiuni )

Aspectul textului (11 instrucțiuni )

Liste (9 instrucțiuni )

Controale bazate pe ecran (Widget - uri) (25 instrucțiuni )

Grafică, imagini și multimedia (16 instrucțiuni)

Scriere de conținut web (11 instrucțiuni )

Organizația de conținut (9 instrucțiuni )

Căutare (instrucțiuni )

Testarea uzabilității (13 instrucțiuni )

Fiecare grup de instrucțiuni reprezintă un capitol al cărții și poate fi citit în mod

individual în pagina web a usability.gov7. Acest website al guvernului SUA arată

metodologia pentru construirea unui site web, folosind metodologia de utilizare

Design Center, în care respectarea acestor instrucțiuni este doar un singur pas.

Fiecare grup de instrucțiuni este sortat în funcție de relevanță (de la cel mai

important, la cel mai puțin important). Structura principală a fiecărei linii

directoare este următoarea (Figura 4):

7 HHS Guidelines - http://guidelines.usability.gov/

Page 29: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

29

Figura 4

Fiecare instrucțiune este compusă din:

Numerotare și titlu ("1:1 Oferă conținut util")

Instrucțiuni: titlul instrucțiunii extins.

Comentarii: descrierea instrucțiunii care să ateste ce este și motivul

pentru care trebuie să le îndeplinească.

Surse: referințe cu privire la instrucțiuni.

Exemple: acest lucru este disponibil doar în anumite instrucțiuni .

Importanța Relativă: importanța instrucțiunii, care este evaluată de la 1 la

5 (5 cea mai importantă, 1 cel mai puțin importantă). Clasificarea a fost

realizată printr-un sondaj ai numeroși experți în gradul de uzabilitate.

Puterea dovezii: indică "măsura de încredere" clasificată de la 1 la 5 (5

fiind nivelul cel mai ridicat de asigurare și 1 nivelul cel mai scăzut). Măsura

de încredere se bazează pe ratingul dat de mulți experți în gradul de

uzabilitate (în care, după cum se indică, a existat grad ridicat de

coincidență), care au căutat dovezi pentru orientarea în cercetare, studii,

rezultatele experimentelor, etc.

Puterea dovezilor este definită după cum urmează:

5 - Suport de cercetare puternic

Page 30: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

30

Cumulative și convingătoare, sprijinind dovezi bazate pe cercetare

cel puțin un studiu oficial, riguros cu validitate în funcție de context

Nu se cunosc descoperiri contradictorii care provin din cercetare

Opinia experților este aceeași cu cercetarea

4 – Suport de cercetare moderat

Dovezi cumulative bazate pe cercetare

Pot exista sau nu descoperiri în conflict bazate pe cercetare

Opinia experților tinde să fie de acord cu cercetarea și un consens pare a

se construi

3 – Suport de cercetare slab

dovezi bazate pe cercetare limitate

Descoperiri bazate pe cercetare aflate în conflict pot exista

și / sau -

Există un acord mixt de opinii ale experților

2 – Susținere puternică prin opinia experților

Nu existã dovezi bazate pe cercetare

Experții tind să fie de acord, cu toate că s-ar putea să nu existe un

consens

Multiple opinii de sprijin ale experților în manuale, ghiduri de stil, etc.

În general acceptată ca "cele mai bune practici" sau reflectă "starea

practicii"

1 – Susținere slabă prin opinia experților

Nu existã dovezi bazate pe cercetare

Opinia experților limitate sau în conflict

4.2.2.2. 247 Instrucțiuni de uzabilitate ale Userfocus

Userfocus propune 247 instrucțiuni de uzabilitate pentru site-urile web în 9

grupe diferite (numite heuristice):

Page 31: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

31

Uzabilitatea paginii de start (20 instrucțiuni)

Sarcini de orientare (44 instrucțiuni)

Navigație și IA (29 instrucțiuni)

Formulare și introducerea datelor (23 instrucțiuni)

Încredere și credibilitate (13 instrucțiuni)

Scriere și calitatea conținutului (23 instrucțiuni)

Aspectul paginii și design vizual (38 instrucțiuni)

Uzabilitatea căutării (20 instrucțiuni)

Ajutor, feedback-ul și toleranță la erori (37 instrucțiuni)

Un avantaj este că oferă o foaie de calcul gratuit (Excel) cu cele 247 de

instrucțiuni (traduse în diferite limbi), care facilitează evaluarea și includerea

comentariilor.

4.2.2.3. Liniile directoare Nielsen Norman Group

Cele 10 euristici ale lui Jakob Nielsen sunt, probabil, cele mai cunoscute. Ele

sunt considerate ca fiind principiile gradului de uzabilitate. Euristicile lui Nielsen

sunt:

Vizibilitatea stării sistemului.

Potrivirea între sistem și lumea reală.

Controlul utilizatorilor și libertatea acestora.

Coerență și standarde.

Prevenirea erorilor.

Mai degrabă recunoaștere, decât de amintire.

Flexibilitatea și eficiența utilizării.

Design estetic și minimalist.

Ajutorul utilizatorilor să recunoască, diagnosticheze și să repare erorile.

Ajutor și documentație.

Euristicile lui Nielsen au fost descrise în continuare și operaționalizate în sute de

instrucțiuni. Există în jur de 2397 instrucțiuni de utilitate, divizate în rapoarte

multiple în secțiunea "Publicații" a site-ului nngroup.com.

Page 32: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

32

4.2.3. Instrucțiuni specifice pentru dispozitive și site-uri mobile

Unele dintre instrucțiunile examinate anterior nu au dispozitivele mobile ca

domeniu de aplicare, ci au fost mai degrabă concepute pentru pagini web.

Recomandările de mai jos au fost deja stabilite ca instrucțiuni pentru gradul de

uzabilitate a paginilor web pentru dispozitive mobile.

4.2.3.1. W3C Cele mai bune practici

W3C8 propune un set de instrucțiuni de uzabilitate direct aplicabile în site-uri

web pentru dispozitive mobile (Figura 5). Aceste instrucțiuni au fost propuse în

2008 și acestea sunt împărțite în cinci secțiuni:

Secțiunea 1 ("Comportament general") explică unele principii generale

care stau la baza livrării la dispozitivele mobile.

Secțiunea 2 ("Navigație și Link-uri") conține câteva indicații cu privire la

modul de a avea grijă la definirea structurii și a modelului de navigație al

unui site web, din cauza limitărilor în afișare și a mecanismelor de intrare,

eventuala absență a unui dispozitiv de indicare și alte constrângeri

aledispozitivelor mobile.

Secțiunea 3 ("Aspect pagină și conținut") se referă la percepția

utilizatorului asupra conținutului livrat, așa că se concentrează pe design,

limbajul utilizat în textul său și relația spațială dintre componentele

constitutive, dar nu abordează aspectele tehnice ale modului în care

conținutul livrat este construit.

Secțiunea 4 ("Definiția Paginii") conține instrucțiuni cu privire la titluri,

cadre, tabele și alte elemente ale unui site web.

Secțiunea 5 ("Intrări ale utilizatorilor") conține afirmații referitoare la

datele introduse de utilizator, care sunt deobicei mai restrictive pe

dispozitive mobile decât pe computere desktop (și, adesea, mult mai

restrictive).

8 Mobile Web Best Practices 1.0 - http://www.w3.org/TR/mobile-bp/

Page 33: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

33

Figura 5

4.2.3.2. Instrucțiunile cuprinse în documentul intitulat "Uzabilitatea site-urilor

și aplicațiilor mobile" (scrise de Raluca Budiu și Jakob Nielsen în 2012), stabilesc

un set de recomandări de uzabilitate și bune practici în site-uri web și aplicații

pentru dispozitive mobile.

Instrucțiunile sunt împărțite în trei secțiuni, și acestea grupează, de asemenea,

instrucțiunile în trei subgrupuri diferite. Cele trei secțiuni principale sunt:

"Instrucțiuni generale pentru site-uri mobile și aplicații", "Instrucțiuni generale

pentru telefoane touch" și "instrucțiuni pentru aplicații".

Prima secțiune este împărțită în șaisprezece sub-secțiuni, care conțin mai multe

orientări uzabilitate despre pagina de start, tastare, casete derulante, meniuri,

carusele, formulare, autentificare și înregistrare, căutare, liste și defilare,

navigare de conținut, lizibilitate, imagini, animații și clipuri video, pictograme,

erori, hărți și informații de locație, cumpărături, servicii bancare și tranzacții.

Cea de a doua secțiune este axată pe instrucțiunile pentru telefoane touch și

este împărțită în patru secțiuni, cu orientări care vorbesc despre obiective,

Page 34: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

34

gesturi, orientare și de introducere. În cele din urmă, secțiunea a treia conține o

serie de instrucțiuni axate pe aplicații native pentru dispozitive mobile. Aceasta

este împărțită în douăsprezece secțiuni.

Unele dintre aceste instrucțiuni au fost propuse pentru cumpărături și în scopul

comerțului, acestea fiind rezumate mai jos:

1. Instrucțiunea 150 : Când prezentați o listă de produse, folosiți imagini -

miniaturi, care sunt destul de mari încât utilizatorul să poată obține unele

informații din ele (Figura 6 ).

Figura 6

2. Linia directoare 151 : Pe o pagină de produs, utilizați o dimensiune a

imaginii care se potrivește pe ecran. Link către o imagine de rezoluție mai

mare în cazul în care produsul necesită o examinare mai atentă (Figura 7).

Figura 5 prezintă un exemplu al site-ului: m.marksandspencer.com.

Imaginile de pe Marks and Spencer au profitat mai bine de spațiul

ecranului.

Page 35: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

35

Figura 7

3. Instrucţiunea 152: Oferiţi opțiunea de a trimite prin email produsul unui

prieten.

În mod interesant, o mulțime de oameni au folosit telefonul pentru a

trimite un email cu imaginile produsului la prieteni sau familie, pentru a

obține avizul acestora. De multe ori, utilizatorii vor trimite prin e-mail, de

asemenea, informații pentru ei însuşi ca o modalitate de a salva. Luați în

considerare având un link de e-mail care permite oamenilor să

împărtășească cu ușurință informații despre produs, fie prin e-mail sau

prin alte canale. De asemenea, includeţi modalități alternative de a salva

acest produs și a reveni la acesta mai târziu.

4. Instrucţiunea 153: oferă opțiunea de a salva produsul într-o listă de

dorințe.

Cu toate că mulți utilizatori nu fac achiziții de pe dispozitivele mobile,

uneori, utilizatorii se uită ocazional la produse, fără intenţia de a cumpăra

de pe telefoanele lor mobile. Chiar dacă utilizatorii ar putea să nu se simtă

confortabil să cumpere de pe telefonul lor, aceştia ar trebui să aibă în

continuare posibilitatea de a reveni la produsele pe care le-au descoperit

în timpul navigării lor pe mobil atunci când aceştia sunt pe desktop-ul lor.

Page 36: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

36

Prin urmare, permiteţi utilizatorilor să salveze elementele pe care le plac,

astfel încât aceştia să se poată întoarce pe un ecran mai mare și a le

inspecta mai îndeaproape.

5. Instrucţiunea 154: Pe un site de e-commerce, includeţi link-uri importante

de pe pagina principală pentru următoarele informații:

locațiile și orele de deschidere (dacă este cazul),

costuri de expediere,

numarul de telefon,

starea comenzii, și

promoții sau produse bazate pe ocazii.

Verificarea informațiilor de locație, a orelor de afaceri şi starea comenzilor

sunt cele mai frecvente tipuri de activități pe care oamenii le fac pe site-

uri de e-commerce de pe telefoanele mobile. În studii, mulți utilizatori

spun că mai degrabă ar suna, decât să facă achiziția de pe telefonul mobil.

Mai mult decât atât, chiar dacă experiența cu site-ul a fost foarte rea,

utilizatorii erau mai susceptibili în a fi mai iertatori dacă un număr de

telefon ar fi remarcabil, întrucât au simțit că ei ar putea rezolva cu

ușurință problema lor.

Figura 8 prezintă două cazuri de pagini web care au inclus numărul lor de

telefon. Interflora a inclus telefonul mobil pe fiecare pagină a unui produs,

în cazul în care utilizatorii preferă apelul în loc să cumpere on-line.

Webiste: m.interflora.co.uk.

Page 37: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

37

Figura 8

În cele din urmă, costul de transport este o bucată de informație pe care

utilizatorii o iau adesea în considerare atunci când verifică prețurile.

6. Instrucţiunea 155: includeţi întotdeauna catalogul de produse complet pe

site-ul mobil sau aplicația mobilă.

Cu toate că vă recomandăm reducerea funcționalităţii pe mobil în

comparație cu site-ul dvs. complet, aceasta nu înseamnă prezentarea doar

a unui subset restrâns de produse. Din păcate, este foarte greu să știi

dinainte ce tipuri de produse pot fi căutate de utilizatori de pe mobil, iar

tendința multor site-uri și aplicații pentru a exclude o parte din catalogul

lor pe mobil este, din păcate, o parte din motivul pentru care mulți oameni

declară că ei încă preferă site-urile complete pe telefonul mobil.

7. Instrucţiunea 156: În cazul în care prezentaţi o listă de produse, arataţi

rating-ul pentru fiecare dintre ele pentru a permite utilizatorilor să le

aleagă mai ușor.

Una dintre cele mai semnificative atribute ale produsului pe care utilizatorii

o iau în considerare este de rating-ul și/sau comentariile. Cu toate că

spațiul este redus pe mobil, este esențial să se arate rating-uri ale diferitor

Page 38: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

38

produse într-o listă, astfel încât utilizatorii să știe rapid dacă un element

merită inspectat.

4.3. Design-ul de interfețe mobile centrate pe utilizator:

Prototiparea

Un prototip este o versiune de proiect a unui produs care vă permite să explorați

ideile și arată intenția din spatele unei caracteristici sau conceptul de design

general utilizatorilor, înainte de a investi timp și bani în dezvoltare. Un prototip

poate fi orice, de la desene de hârtie (fidelitate redusă) la ceva ce permite click-

ul prin câteva bucăți de conținut într-un site complet funcțional (de înaltă

fidelitate).

Beneficiile Prototipurilor

Este mult mai ieftin să schimbi un produs la începutul procesului de dezvoltare,

decât să faceţi o schimbare după ce aţi dezvoltat site-ul. Prin urmare, ar trebui

să luaţi în considerare prototipuri chiar la începuturile procesului. Prototiparea vă

permite să adunaţi feedback de la utilizatori în timp ce încă planifică și

proiectează site-ul Web.

Jakob Nielsen9 a constatat că cele mai mari îmbunătățiri în experiența de

utilizare provin de la colectarea de date de uzabilitate, cât mai curând posibil. El

observă că este mai ieftin să se facă modificări înainte ca orice linie de cod să fi

fost scrisă, decât să se aștepte până după ce punerea în aplicare este completă.

4.3.1. Niveluri diferite de prototipuri: avantaje și dezavantaje

Diferența dintre Schițe și Prototipuri

Cu toate că diferența dintre schițe și prototipuri nu este întotdeauna clară, există

diferențe în intențiile lor. Bill Buxton, în cartea Sketching User Experiences,

oferă o listă de descriptori care ajută la explicarea diferențelor:

9 Nielsen Norman Group - http://www.nngroup.com/articles/paper-prototyping/

Page 39: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

39

Schiță Prototip

Evocativ Didactic

Sugerează Descrie

Explorează Rafinează

Întreabă Răspunde

Propune Testează

Provoacă Rezolvă

Tentativă Specific

Fără angajament Ilustrează

Tracy Lepore10 definește în continuare diferențele, aratând vizual forma continuă

de la schiţă pentru a proiecta, ilustrând relațiile dintre ceea ce designul încearcă

să comunice, valoarea de repetare între faze și fidelitatea desenului sau

modelului (Figura 9).

Figura 9

10 Trazy Lepore - http://www.uxmatters.com/mt/archives/2010/05/sketches-and-wireframes-and-

prototypes-oh-my-creating-your-own-magical-wizard-experience.php

Page 40: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

40

Prototiparea de fidelitate înaltă și redusă

Există o dezbatere în curs de desfășurare cu privire la utilizarea prototipurilor de

fidalitate scăzută și cât de mult un prototip ar trebui să semene cu versiunea

finală a design-ul. Ambele s-au dovedit a fi, practic, echivalente în găsirea de

probleme de uzabilitate. Acestea fiind spuse, există lucruri de luat în considerare

atunci când încearcaţi să decideţi care opțiune este cea mai bună pentru

proiectul dumneavoastră:

Prototipuri de fidelitate redusă sunt adesea bazate pe hârtie și nu

permit interacțiuni ale utilizatorilor. Acestea variază de la o serie de

machete desenate manual ale materialelor imprimate. În teorie, schiţele

cu emisii reduse de fidelitate sunt mai rapide de creat. Prototipurile de

fidelitate redusă sunt utile pentru a permite vizualizarea timpurie a

soluțiilor alternative de design, care ajută la provocarea inovării și

îmbunătățirii. Un alt avantaj al acestei abordări este că, atunci când se

utilizează schițe brute, utilizatorii se pot simţi mai confortabil în a sugera

modificări.

Prototipurile de înaltă fidelitate sunt bazate pe calculator, și de obicei

permit interacțiuni realiste (mouse-tastatură) ale utilizatorilor.

Prototipurile de înaltă fidelitate vă vor aduce cât mai aproape posibil de o

reprezentare a interfeței cu utilizatorul. Prototipurile de înaltă fidelitate

sunt presupuse a fi mult mai eficiente în colectarea datelor privind

performanța umană reală (de exemplu, timpul pentru a finaliza o sarcină),

precum și în demonstrarea produselor reale clienților, de management, și

altele.

4.3.2. Cum să creați un prototip al unui site mobil?

Prototipurile bazate pe hârtie sunt cel mai rapid mod de a obține feedback

pentru arhitectura preliminară de informații a site-ului, designului și

conținutului. Prototipurile de hârtie sunt ușor de creat și necesită doar hârtie,

foarfece și bilețele.

Page 41: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

41

Utilizați o singură bucată de hârtie pentru fiecare pagină web pe care o creați și

apoi puneți utilizatorii să le încerce într-un test de uzabilitate (Figura 10).

Utilizatorii indică unde doresc să faceă click pentru a găsi informațiile iar dvs.

modificați pagina pentru a arăta acel ecran. Procesul vă ajută să adunați

feedback-ul devreme în procesul de proiectare, să faceți rapid modificări și să

îmbunătățiți desenele inițiale.

Figura 10

De asemenea, este posibilă utilizarea anumitor instrumente software în loc de a

folosi desene sau modele bazate pe suport de hârtie. Aceste instrumente pot fi

utilizate pentru crearea prototipurilor. Sunt destule instrumente:

Pencil

Balsamic mockups

ConceptDraw Pro

iPlotz

Microsoft Visio

OmniGraffle Pro

Page 42: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

42

Una dintre acestea este Pencil11, care este ușor de utilizat și este open-source,

așadar poate fi descărcat de pe site-ul său oficial.

4.4. Evaluarea site-urilor mobile: Evaluarea euristică

Evaluarea uzabilitătății examinează măsura în care un sistem interactiv este

ușor și plăcut de utilizat. Evaluarea gradului de uzabilitate a unui site web, cu

scopul de a identifica probleme de uzabilitate și/sau de obținere a măsurilor de

uzabilitate. Scopul evaluării poate fi pentru a îmbunătăți gradul de uzabilitate a

site-ului ca parte a proiectării/dezvoltării sau pentru a evalua măsura în care au

fost atinse obiectivele de uzabilitate.

4.4.1. Diferite evaluări de uzabilitate

Există mai multe metode de evaluări de uzabilitate, unele dintre acestea fiind

redate mai jos:

Testarea uzabilității: Testarea uzabilității se referă la evaluarea unui

produs sau serviciu, prin testarea acestuia cu utilizatorii reprezentativi. De

obicei, în timpul unui test, participanții vor încerca să finalizeze sarcinile

tipice în timp ce observatorii vor viziona, asculta și lua notițe. Scopul este

de a identifica orice probleme de uzabilitate, colectarea de date calitative

și cantitative și de a determina satisfacția participantului cu produsul.

First Click Testing: se analizează pe ce ar da click prima dată pe interfață

un participant la test, în scopul de a finaliza sarcina dorită. Testul poate fi

realizat pe un site funcțional, un prototip sau un wireframe.

Evaluări Euristice și Evaluarea Experților: Într-o evaluare euristică, experții

de uzabilitate revizuiesc interfața site-ului și îl compară cu principiile de

uzabilitate acceptate. Analiza rezultă într-o listă a potențialelor probleme

de uzabilitate.

Urmărirea ochilor: Urmărirea ochilor implică măsurarea fie unde este

focalizat ochiul, fie mișcarea ochiului unui individ pe o pagină web.

Interviul contextual: In timpul acestor interviuri, cercetătorii vizionează și

ascultă în timp ce utilizatorii lucrează în propriul lor mediu, spre deosebire

de a fi într-un laborator. Interviurile contextuale tind să fie mai naturale și, 11 Pencil tool - http://pencil.evolus.vn/

Page 43: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

43

uneori, mai realiste, ca rezultat. Ele sunt, de asemenea, de obicei, mai

puțin formale decât testele de laborator și nu utlizează sarcini sau script-

uri.

Focus Grupuri: Un focus grup este o discuție moderată, care implică, de

obicei între 5 și 10 participanți. Printr-un focus grup, puteți afla detalii

despre atitudinile, credințele, dorințele și reacțiile utilizatorilor la concepte.

Testare la distanță: testele de uzabilitate la distanță vă permit să efectuați

o cercetare de uzabilitate cu participanții în mediul lor natural, prin

utilizarea de software de vizualizare a ecranului sau servicii de furnizare a

imaginii ecranului de la distanță, on-line. În general, testele trebuie să

dureze aproximativ 15-30 de minute și să fie formate din aproximativ 3-5

sarcini.

4.4.2. Cum efectuăm o evaluare euristică?

Evaluarea euristică12 este o metodă de inginerie a uzabilității pentru identificarea

problemelor de uzabilitate într-un design de interfață pentru utilizator, astfel

încât acesta să poată participa ca parte a unui proces de proiectare iterativ.

Evaluarea euristică presupune a avea un mic set de evaluatori care să

examineze interfața și să judece conformitatea cu principiile de uzabilitate

recunoscute ( denumite "heuristics").

Avantaje și dezavantaje ale euristicii

O evaluare euristică nu ar trebui să înlocuiască testarea uzabilității. Cu toate că

euristicia se referă la criteriile care afectează gradul de uzabilitate a site-ului,

problemele identificate într-o evaluare euristică sunt diferite față de cele găsite

într-un test de uzabilitate.

Avantaje Dezavantaje

Acesta poate oferi un feedback rapid

și relativ ieftin pentru designeri.

Este nevoie de cunoștințe și

experiență pentru aplicarea euristicii

în mod eficient.

12 How to Conduct a Heuristic Evaluation - http://www.nngroup.com/articles/how-to-conduct-a-heuristic-

evaluation/

Page 44: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

44

Puteți obtine feedback-ul devreme în

procesul de proiectare.

Experții de uzabilitate sunt uneori

greu de găsit și pot fi costisitori.

Alocarea euristicii corecte poate ajuta

la sugerarea celei mai bune măsuri

corective pentru designeri.

Ar trebui să folosiți mai mulți experți

și să agregați rezultatele acestora.

Puteți să-l utilizați împreună cu alte

metodologii de testare a uzabilității.

Evaluarea poate identifica mai multe

probleme minore și mai puține

probleme majore.

Aveți posibilitatea să efectuați teste

de uzabilitate pentru a examina în

continuare probleme potențiale.

În general, evaluarea euristică este dificil de făcut pentru un singur individ,

deoarece o persoană nu va fi niciodată în stare să găsească toate problemele de

uzabilitate într-o interfață. Din fericire, experiența din mai multe proiecte diferite

a arătat că diferite persoane pot găsi diferite probleme de uzabilitate. Prin

urmare, este posibil să se îmbunătățească eficiența metodei semnificativ prin

implicarea a mai multor evaluatori.

Evaluarea euristică este realizată punând fiecare evaluator să inspecteze

interfața individual. Numai după ce toate evaluările au fost finalizate li se

permite evaluatorilor să comunice între ei și să aibă constatările lor agregate.

Aceasta procedura este importantă pentru a se asigura evaluări independente și

imparțiale de către fiecare evaluator. Rezultatele evaluării pot fi înregistrate fie

ca rapoarte scrise de la fiecare evaluator sau prin determinarea evaluatorilor să

își verbalizeze observațiile în timp ce aceștis trec prin interfață.

De obicei, o sesiune de evaluare euristică pentru un evaluator individual durează

una sau două ore. Sesiuni de evaluare mai lungi ar putea fi necesare pentru

interfețe mai mari sau foarte complicate, cu un număr substanțial de elemente

de dialog, dar ar fi mai bine să se separe în mai multe sesiuni de evaluare mai

mici, fiecare concentrându-se pe o parte a interfeței. În timpul sesiunii de

evaluare, evaluatorul trece prin interfață de mai multe ori și inspectează

diferitele elemente de dialog și le compară cu o listă de principii de uzabilitate

Page 45: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

45

recunoscute (euristica). Aceste euristici sunt reguli generale care par să descrie

proprietăți comune ale interfețelor utilizabile.

În principiu, evaluatorii decid cu privire la propriul mod în care doresc să

continue evaluarea interfeței. O recomandare generală ar fi ca aceștia să treacă

prin interfața de cel puțin două ori. Prima trecere ar fi intenționată pentru a

obține un simț pentru fluxul interacțiunii și sfera de aplicare generală a

sistemului. A doua trecere permite apoi evaluatorului să se concentreze pe

elemente de interfață specifice, în timp ce aceștia cunosc modul în care acestea

se încadrează în întregul mai mare.

Rezultatul utilizării metodei de evaluare euristice este o listă a problemelor de

uzabilitate în interfață, cu referire la acele principii de uzabilitate care au fost

încălcate de designul său în fiecare caz, în opinia evaluatorului. Nu este suficient

ca evaluatorii să spună pur și simplu că nu le place ceva; aceștia ar trebui să

explice de ce nu le place, cu referire la euristică sau la alte rezultate de

uzabilitate. Evaluatorii trebuie să încerce să explice cât mai specific posibil și

trebuie să listeze fiecare problemă de uzabilitate în mod separat.

Determinarea numărului de evaluatori

În principiu, evaluatorii individuali pot efectua o evaluare euristică a unei

interfețe de utilizator pe cont propriu, dar experiența din mai multe proiecte

indică faptul că rezultatele destul de slabe se obțin atunci când se bazează pe

evaluatori unici.

Page 46: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

46

Figura 11

Figura 11 prezintă proporția problemelor de uzabilitate constatate, pe măsură ce

sunt adăugați mai mulți evaluatori. Figura arată în mod clar că există un câștig

semnificativ prin utilizarea a mai mult de un evaluator. S-ar părea rezonabil să

se recomande utilizarea de aproximativ cinci evaluatori, dar cu siguranță, cel

puțin trei. Numărul exact de evaluatori utilizați ar depinde de o analiză cost-

beneficiu. Mai mulți evaluatori ar trebui să fie în mod evident utilizați în cazurile

în care uzabilitatea este critică sau atunci când câștiguri mari pot fi de așteptat

datorită utilizării extensive sau a utilizării critice a unui sistem.

Page 47: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

47

5. Aplicații (exemple, sarcini de lucru etc.)

5.1. Structura site-ului

Întrebări studiu de caz

Verificați site-ul Alternate (http://www.alternate.com/), un comerciant de

componente de calculator și alte dispozitive.

Verificați codul HTML al site-ului.

Găsiți și inspectați fișierele CSS pe care le utilizează site-ul web.

Găsiți și inspectați fișierele JavaScript pe care le utilizează site-ul web.

Utilizați instrumentul http://www.mobilephoneemulator.com/ și verificați

aceste site-uri cu emulatorul pentru dispozitive mobile:

o Amazon.com

o Ebay.com

o Alternate.com

Acum, răspundeți la următoarele întrebări: Există vreo diferență între ele?

(În ceea ce privește modul în care site-urile web sunt afișate pe browser-

ul web și pe emulatorul mobil) Sunt site-urile web adaptate la dispozitivul

mobil (încercați dispozitive diferite)? Cât de ușor este să navighezi pe

fiecare site? De asemenea, modificați orientarea aparatului și verificați

modul în care site-ul web se adaptează

5.2. Prototyping

Întrebări pentru studiul de caz:

Pregătiți un prototip pentru magazinul virtual mobil folosind instrumentul

Pencil. Instrumentul Pencil poate fi descărcat de la http://pencil.evolus.vn/

Verificați magazine virtuale mobile (cum ar fi: eBay, Amazon, etc)

existente și comparați prototipul dvs. cu al lor

Găsiți caracteristicile despre care credeți că s-ar putea potrivi cu

magazinul dvs. virtual mobil și includeți-le în design

Page 48: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

48

5.3. Evaluarea euristică

Întrebări studiu de caz

Faceți o evaluare euristică a site-ului (https://www.santafixie.com/en/),

urmând instrucțiunile capitolelor 5.2 (Navigare și link - uri) și 5.3 (Aspect

pagină și de conținut) ale Mobile Web Best Practices 1.0 de W3C și, de

asemenea, ca urmare a orientărilor aferente cu M-Commerce al cărții

"Usability of Mobile Websites and Applications".

Scrieți un raport final cu principalele probleme de uzabilitate găsite în site-

ul web.

Comparați gradul de uzabilitate și de problemele de navigație pe care le-

ați găsit, cu alte magazine mobile, cum ar fi Amazon sau Ebay.

Page 49: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

49

6. Surse

Nielsen, J. & Budiu, R. 2012. Mobile usability. Pearson Education.

Budiu, R. & Nielsen, J. 2011. Usability of Mobile Websites and Applications:

Design Guidelines for Improving the User Experience of Mobile Sites and Apps.

Nielsen Norman Group.

Nielsen, J. 2000. Designing Web Usability. Pearson Educación.

Nielsen, J. 1993. Usability Engineering. Morgan Kaufmann.

Page 50: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

50

7. Link-uri Internet

http://tutorials.jenkov.com/software-architecture/n-tier-architecture.html

(Ultima accesare 21/01/2016)

http://semanticstudios.com/user_experience_design/ (Ultima accesare

21/01/2016)

http://www.usability.gov/what-and-why/interaction-design.html (Ultima

accesare 21/01/2016)

http://www.nngroup.com/articles/ten-usability-heuristics/ (Ultima accesare

21/01/2016)

http://www.nngroup.com/articles/optional-registration/ (Ultima accesare

21/01/2016)

http://guidelines.usability.gov/ (Ultima accesare 21/01/2016)

http://www.userfocus.co.uk/resources/guidelines.html (Ultima accesare

21/01/2016)

http://www.w3.org/TR/mobile-bp/ (Ultima accesare 21/01/2016)

http://www.nngroup.com/articles/paper-prototyping/ (Ultima accesare

21/01/2016)

http://www.uxmatters.com/mt/archives/2010/05/sketches-and-wireframes-

and-prototypes-oh-my-creating-your-own-magical-wizard-experience.php (Last

acces 21/01/2016)

http://pencil.evolus.vn/ (Ultima accesare 21/01/2016)

Page 51: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

51

http://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/

(Ultima accesare 21/01/2016)

Page 52: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

52

8. Glosar

3G / 4G se referă la tehnologiile mobile de telecomunicații. 3G reprezintă " a

treia generație" (1998) și 4G reprezintă " a patra generație" a tehnologiei mobile de comunicare (succesorul 3G în 2008).

Android. Sistem de operare care rulează pe dispozitive mobile. Acesta este

sponsorizat de Google. Android nu este un tip de dispozitiv mobil sau un tip de telefon mobil.

ASP.NET. Cadrul unui server de tip open source pentru a crea pagini web dinamice. ASP.NET a fost dezvoltat de Microsoft .

CSS (Cascading Style Sheets). Foi de stil care descriu modul în care documentele limbajului de marcare (pagini web) trebuie să fie prezentate.

Foile de stil separă conținutul (în HTML) de prezentare (CSS). Cel mai recent standard este CSS3 .

GPS (Global Positioning System) . Sistemul de navigație bazat pe spațiu.

HTML (Hypertext Markup Language). Limbaj de marcare pentru a crea pagini

web.

iOS. Sistem mobil de operare pentru dispozitive Apple (iPhone, iPad).

JavaScript. Limbaj de programare a paginilor web. Acesta este utilizat în / cu HTML pentru a crea site-uri web interactive. JavaScript ruleaza pe partea

de client (browser -ul web al calculatorului sau al dispozitivului)

Servlet Java. Programul Java care rulează un server. Acesta răspunde la solicitarea de intrare, de obicei, se întoarce o pagină web.

JSP ( Java Server Pages ) . Program Java (server-side) care generează în mod dinamic pagini web, ca răspuns la solicitările clienților.

Internet. Rețeaua rețelelor. Sistem de conectare la nivel mondial a rețelelor de calculatoare folosind protocoale TCP / IP.

MySQL. Sistem de management de tip Țopen-sourceȚ al bazelor de date. MySQL este cea mai utilizată bază de date pe scară largă pentru web ( site ).

NoSQL este o tehnologie de management a bazelor de date care diferă de sistemele tradiționale de gestiune a bazelor de date. Acesta nu utilizează SQL

ca limbaj de interogare și datele nu sunt stocate în tabele (dar în structuri fixe).

PHP ( PHP: Hypertext Preprocessor ) . Limbaj de scripting server-side pentru a crea pagini web.

Page 53: MODUL Site uri Mobile RCE și uzabilitate - ec.europa.euec.europa.eu/programmes/proxy/alfresco-webscripts/...Proiect m-commerce. Modul: Site-uri mobile si uzabilitate 4 2. Introducere

Proiect m-commerce. Modul: Site-uri mobile si uzabilitate

53

PostgreSQL. Sistem de management open-source al bazelor de date.

Postgres se concentrează pe extensibilitate și standarde de conformitate ( site ).

Python. Limbaj de programare de nivel înalt ( site ) structurat cu orientare spre obiecte.

ROI (Return On Investment) . Beneficiul obținut dintr - o investiție.

Ruby. Limbaj de programare orientat pe obiecte, axat pe simplitate și productivitate ( site ).

UCD (User Centered Design). Setul de procese al ciclului de viață de dezvoltare a unui produs, care sunt concentrate pe utilizatorii finali, analizând

nevoile și limitările lor.

Uzabilitate . Gradul de calitate, în care utilizatorii produsului completează

sarcini cu eficacitate, eficiență și satisfacție într-un context specific de utilizare ( ISO / DIS 9241-11 ).

UX. User Experience. Setul de aspecte și elemente legate de interacțiunea utilizatorului cu un sistem sau dispozitiv.

W3C (World Wide Web Consortium) . Organizație internațională care produce recomandări și standarde pentru web ( site ).

WiFi. Wireless rețea locală wireless (WLAN), care permite dispozitivelor să se conecteze la rețeaua fără fir ( de obicei, folosind o bandă de radio dată).