Update: Pagina web Moldcell a fost refăcută. Elemente sugerate de noi, precum navigarea, personalizarea paginilor interne, funcționalitatea sliderului de pe prima pagină au fost implementate. Ne bucurăm
În primul rând am studiat modul în care următoarele companii se prezintă online:
Am identificat mai multe probleme la actuala pagină moldcell.md și pe câteva dintre acestea o să le descriem în continuare.
Design
Layoutul este unul care irosește în zadar foarte mult spațiu, fără a crea un online brand experience consistent.
În primii 90 de pixeli pe verticală nu este nimic funcțional, după care urmează logo-ul. Logo-ul, nefiind grupat cu meniul principal de navigare, nu transmite ideia că are funcționalitate de legătură spre prima pagină. În același timp, meniul principal de navigare nu conține un link spre prima pagină (exemplu:http://www.vodafone.co.uk/personal/index.htm).
Background-ul are două culori – griul și violetul. Este grav următorul lucru – un utilizator cu monitorul de rezoluție 1024px pe orizontală o să perceapă pagina web ca fiind cu background violet. Și același utilizator accesând pagina web de la un calculator cu monitor de rezoluție 1280px în sus o să vadă că background-ul de fapt mai are și culoarea gri. Ce e grav aici – o experiență diferită – intri pe aceeași pagină web, însă de pe diferite calculatoare overall look-ul este diferit. Deci nu este consistență la capitolul online brand experience.
Sliderul are următoarele neajunsuri:
Nu are o navigare efectivă – adică te poți muta doar la stanga / dreapta, însă nu poți vedea un scurt rezumat la toate slide-urile și nu poți accesa ceea ce te interesează deodată – trebuie să cauți folosind butoanele cu săgețile de stânga / dreapta.
Plus nici un slide nu are buton de îndemn la acțiune de genul află mai multe sau comandă acum și utilizatorul inițial nu știe că de fapt slide-urile au o pagină de destinație unde poate afla mai multe despre conținutul slide-ului. Să-l faci pe utilizator să ghicească funcționalitatea – este o greșeală de uzabilitate. Vedeți cele 10 dogme despre uzabilitate ale lui Eric Reiss.
Un exemplu bun de slider, care are o navigare bună și butoane de îndemn la acțiune:
Navigare
Navigarea principală: Nu are itemul de Prima pagină, item care e bine să fie prezent primul. Nici logo-ul nu e folosit bine pentru a reda funcționalitatea de prima pagină.
Vedeți cum implementează următoarele companii funcționalitatea logo-ului ca legatură spre prima pagină într-un mod mai intuitiv:
Vodafone
Apple
Apoi itemii din meniu nu sunt relevanți și omogeni după natura informației și ierarhiei.
În primul rând: Ce vinde Moldcell? Produse și Servicii. E bine atunci în primul rând de prezentat Produsele și serviciile. Și aparte produsele de servicii, oferind atenția cuvenită fiecăruia dintre acestea. Gruparea lor într-un singur item o vedem un minus de uzabilitate din simplu motiv că dacă utilizatorul dorește să acceseze compartimentul Servicii, trebuie să acceseze întâi Produse și servicii și apoi click pe Servicii.
În același timp vedem Roaming, care până la urmă este un serviciu, fiind greșit plasat ca și ierarhie în navigarea principală.
Navigarea secundară de pe prima pagină:
Butoanele de mai jos de slider prezintă un mare minus în navigare. De ce? Navigarea nu este centralizată și consistentă pe toată pagina web. Această navigare adițională nu este prezentă pe celelalte pagini, iar pe prima pagină distrage atenția de la navigarea principală. Plus nu este vizibilă integral (are doi itemi în plus care devin accesibili doar la folosirea navigării… în cadrul navigării – săgețile alea) – iarăși e un minus de uzabilitate. Credem că un utilizator care a cumpărat un număr Moldcell n-o sa găsească butonul ascuns Am număr nou din acest meniu.
Execuție tehnică
Analizând doar câteva elemente de pe prima pagină, găsim:
- diferite raze de rotunjire a colțurilor elementelor. Este deranjant vizual.
- foarte multe distanțe diferite între elemente și raporturi – iarăși – creează un disconfort vizual
- efecte și stiluri diferite – umbre, separatoare reliefate, butoane reliefate, etc. – lipsă de consistență
Propunem o cu totul altă arhitectură informațională, navigare și interfață grafică.
Întâi de toate, vedeți navigarea principală la:
Vodafone
Verizon
Virgin Mobile
Skype
Cisco
Acest tip de navigare a primit denumirea de super drop down menus si a devenit una dintre ultimele tendințe în web design pe care multe companii mari o implementează.
Mai multe detalii: http://www.smashingmagazine.com/2009/03/24/designing-drop-down-menus-examples-and-best-practices/
Iată cum vedem noi structura navigării principale după ce am studiat arhitectura informației:
- Prima pagină (logo)
- Produse
- Cartelă Moldcell
- Abonament Moldcell
- Numere scurte
- Program de loialitate (calculatorul de loialitate o să fie inclus pe pagina Program de loialitate)
- Calculator de cheltuieli
- Ai un număr nou
- Servicii
- Voce
- Text
- Date
- 3.5G
- Extra
- Divertisment
- Servicii de reţea
- Plăţi
- SMS voting
- Servicii administrative
- Roaming
- Oferte
- Cartea recordurilor
- Mai mult decât telefon
- etc.
- Magazine
- Magazin online
- Dealeri și distribuitori
- Media
- Noutăți
- Comunicate
- Evenimente
Notă: Din punct de vedere a utilizatorului toate delimitările astea a naturii informației după categoriile Noutăți, Comunicate și Evenimente nu fac altceva decât să creeze confuzie. Mai degrabă am propune un compartiment de genul Blog, unde pot fi plasate toate anunțurile, noutățile, comunicatele, evenimentele, etc.
- Despre
- Despre companie
- Acoperire
- Noutăţi şi evenimente
- Devino unul din noi
- Responsabilitate Socială
- Puncte autorizate
- Avantaje unice
- Ajutor
- Sunați la 444
- Asistență online
- Setările telefonului
- Contact
Opțiunea de căutare se include de multe ori în partea de dreapta sus a paginii, chiar in dreptul navigației principale. Și aceasta din motiv că dacă nu ai găsit ce te interesează scanând vizual itemii meniului, atunci poți… căuta.
Iată ce propunem noi pentru prima pagină Moldcell (plus submeniurile despre care am vorbit mai devreme):
De ce e mai bine?
- Este un design funcțional.
- Mai bine focusat.
- Dă acces la distanță de 1 click la toate compartimentele.
- Are în vedere toate regulile de uzabilitate.
- Are implementate ultimele tendințe și practici ale designului pentru web (super menus, slider, js lightboxes and visual appealing animations (acestea din urmă nu sunt vizibile aici))
- Are o arhitectură bună a informației.
- Comunică mai bine
O bună metodă de a crea o experiență online este de a personaliza paginile cheie.
Exemplu:
Prima pagină Orange Moldova
Pagina unui pachet - http://www.orange.md/primavara/?c=1&l=1
Pagina iPhone - http://www.orange.md/iphone/
Același lucru îl propunem spre implementare pentru moldcell.md
Iată versiunea actuală a paginii dedicate Abonamentului Moldcell:
Iată cum ar arăta în viziunea noastră pagina dedicată Abonamentului Moldcell:
Imagine micșorată. Click mărire.
O abordare asemănătoare propunem și pentru pagina dedicată Cartelei Moldcell și Serviciilor.
Să recapitulăm sugestiile noastre:
Sugestia noastră pentru prima pagină:
Sugestia noastră pentru pagina Moldcell Abonament:
Imagine micșorată. Click mărire.
Imprimă
Trimite pe email
