Principalele considerații privind interfața de utilizare pentru cel mai bun design PWA

Dacă nu ați auzit încă despre PWA, ar trebui să vă scufundați mai întâi în acesta: „Ce este PWA? Tot ce trebuie să știți despre aplicațiile web progresive” . Pe scurt, sunt aplicații web realizate cu intenția de a oferi interfețe de utilizator și experiențe cu mult superioare experiențelor oferite de cele tradiționale.

În acest articol, vă vom sugera principalele preocupări privind UI (Interfața utilizator) atunci când proiectați un PWA. Citiți mai departe pentru a afla cum puteți avea cea mai bună interfață de utilizator pentru aplicația dvs. Progressive Web.

Fonturi de sistem

Dacă doriți ca utilizatorii să se simtă confortabil în timp ce folosesc aplicația web progresivă (PWA), stilul acesteia ar trebui să fie puțin îmbunătățit pentru a se potrivi cu sistemul de operare (OS). Înainte de a implementa diferite meniuri și butoane pe platformă, puteți începe doar cu fontul preferat al sistemului, pentru iOS, Android, Windows separat.

Cu alte cuvinte, lăsați munca grea a Microsoft (Segoe), Google (Roboto), Apple (San Francisco) sau chiar Mozilla (Fira Sans) să vă ușureze munca, îmbunătățind experiența utilizatorilor. Drept urmare, fonturile de sistem sunt un element pe care nu ar trebui să-l lăsați niciodată din listă.

 /* iOS */
familia de fonturi: „Helvetica Neue”, Helvetica, Arial, sans-serif;

/* Android */
familie de fonturi: „RobotoRegular”, „Droid Sans”, sans-serif;

/* Windows Phone */
font-family: 'Segoe UI', Segoe, Tahoma, Geneva, sans-serif;

Pictogramele aplicației

Este adevărat că designerii de aplicații mobile acordă o atenție deosebită designului pictogramelor. Și deoarece PWA (prin adăugarea acestuia la ecranul de start) va sta lângă restul aplicațiilor native, ar trebui să se gândească și la designul pictogramei sale.

Există un motiv bun pentru asta. Primele impresii sunt întotdeauna extrem de importante, iar pictograma unei aplicații este prima impresie pe care o face utilizatorului. Pentru a explica, un utilizator ar putea ezita să atingă o pictogramă care are un aspect diferit în mijlocul pictogramelor aplicației native de pe telefonul său.

Pentru a face pictogramele dvs. PWA să se integreze cu restul aplicațiilor de pe dispozitiv, trebuie să fie flexibil pentru a se potrivi în diferite platforme - cum ar fi Android, iOS și Windows - și să se potrivească cu elemente stilistice (forma, cum arată cu/fără fundaluri). sau în culori diferite etc.). O modalitate bună de a face acest lucru este să faceți ca designul pictogramei PWA să se potrivească – sau cel puțin să se apropie de – standardul vizual al pictogramelor aplicației native. O sursă de inspirație o reprezintă ghidurile Google Material Design, Google’s Material Icons.

 Lectură recomandată: PWA vs Native App: Care ți se potrivește mai bine?

Interacțiuni cu atingere

Interacțiunile tactile ar trebui implementate foarte bine, sau deloc.

Deși acest lucru nu este chiar imposibil, este prea dificil să încorporați interacțiuni tactile avansate, cum ar fi „glisați pentru a închide” sau „trageți pentru a reîmprospăta”. Deși credeți că astfel de interacțiuni vor uimi utilizatorii, acesta este cazul numai dacă funcționează conform așteptărilor. Dacă nu, atunci ai probleme.

Dacă PWA-urile dvs. au nevoie de interacțiuni tactile avansate, asigurați-vă că funcționează bine pe dispozitive reale. De obicei, acest lucru înseamnă că ați găsit o implementare a acestei caracteristici care a fost dezvoltată de altcineva cu mare efort, cum ar fi vizualizări geniale reacționabile.

Între timp, puteți evita complet această problemă modificând designul, în acest fel nu va sugera interacțiuni tactile avansate, de exemplu, puteți utiliza filele de navigare de jos în loc de file.

Conținut care poate fi partajat

În cazul aplicațiilor web progresive, adesea URL-ul curent nu este ușor accesibil; prin urmare, trebuie să vă asigurați că utilizatorii pot împărtăși cu ușurință ceea ce se uită. Un buton de partajare poate fi integrat, care permite utilizatorilor să copieze adresa URL în clipboard, astfel încât să poată fi partajată pe site-uri proeminente de rețele sociale.

Un mic sfat pentru acest caz: dacă implementați butoane de distribuire socială, asigurați-vă că amânați încărcarea JavaScript terță parte până după ce conținutul principal din pagină s-a încărcat.

Feedback la atingere

În primul rând, zonele care se pot atinge ar trebui să ofere feedback la atingere . Când se atinge un buton sau o zonă care se poate atinge, utilizatorul nu trebuie lăsat să se întrebe dacă atingerea a fost recunoscută.

Încercați să clarificați imediat că robinetele au fost recunoscute. De exemplu, acest lucru se poate face prin evidențierea regiunii atinse în gri (deschis), arătând o ondulație materială sau având ca o tranziție de pagină să înceapă imediat.

Exemplu de feedback la atingere realizat bine:

Aplicația web Google I/O 2016 oferă o evidențiere gri imediată atunci când se atinge o discuție și culoarea albastră implicită este dezactivată (în mod implicit, unele browsere își afișează propria evidențiere atunci când sunt atinse elemente. Acest stil implicit este neatractiv și poate intra în conflict cu dvs. calitatea vizuală a mărcii).

În al doilea rând, atingerea unui element în timpul derulării nu ar trebui să declanșeze feedback la atingere .

Ori de câte ori implementați feedback-ul la atingere, este important ca acesta să nu se declanșeze în mod greșit atunci când utilizatorul atinge doar un element pentru a derula pagina.

Exemplu de feedback la atingere dat la momentul nepotrivit:

O versiune timpurie a popularei biblioteci Material-UI a declanșat ondulații pe elementele atinse atunci când acestea au fost atinse în timpul defilărilor.

Problema a fost remediată prin anularea animației ondulate dacă locația tactilă a utilizatorului s-a mutat cu mai mult de 6 pixeli în orice direcție în primele câteva sute de milisecunde.

Păstrați poziția de defilare pe pagina anterioară a listei

Apăsând înapoi dintr-o pagină de detalii ar trebui să păstreze poziția de defilare pe pagina anterioară a listei

Când utilizatorul apasă înapoi de la un detaliu, pagina trebuie să păstreze poziția de defilare pe pagina anterioară a listei. Pe măsură ce un utilizator alege articole dintr-o listă și vede detaliile acesteia, atunci atingerea înapoi NU trebuie să le aducă în partea de sus a listei. Scopul principal este ca, în timp ce utilizatorul atinge, el/ea ar trebui să fie adus înapoi la pagina de listă „cu aceeași poziție de defilare” în care se aflau înainte de a apăsa pe element.

La urma urmei, răsfoirea unei liste de produse, articole sau alte articole devine dificilă atunci când apăsați înapoi aduce utilizatorul din nou în partea de sus a listei.

Evident, atunci când îngreunați navigarea utilizatorilor, aceștia tind să nu mai revină.

Evitați designul prea „ca web”.

Designul web „clasic” depinde în mare măsură de legăturile din text și de elementele statice disponibile pe fiecare pagină, cum ar fi un antet și un subsol. De fapt, aceste elemente de design se găsesc rar în aplicațiile native, așa că pentru a se potrivi cu modelele mentale ale utilizatorului, se recomandă să le evitați și să utilizați mai mult design asemănător aplicației.

De exemplu, linkurile ar trebui să fie folosite cu moderație. Ar trebui să plasați cu atenție butoanele sau regiunile care se pot atinge.

În plus, subsolurile statice ale paginii care conțin link-uri de navigare și informații despre drepturile de autor ar trebui evitate. Inspirați-vă din designul aplicației native pentru a vedea cum informații similare pot fi mutate într-un meniu sau nu pot fi incluse în orice altă pagină.

Tema întunecată

Temele întunecate au venit pentru a rămâne și vor deveni mai bine.

Potrivit dezvoltatorilor Android, tema întunecată are multe beneficii : Poate reduce consumul de energie cu o cantitate semnificativă (în funcție de tehnologia ecranului dispozitivului). Îmbunătățește vizibilitatea pentru utilizatorii cu vedere scăzută și cei care sunt sensibili la lumina puternică. Ușurează oricui să folosească un dispozitiv într-un mediu cu lumină scăzută.

Cei care pot găsi echilibrul între accesibilitatea interfeței de utilizare întunecate și răspunsul emoțional al culorilor strălucitoare vor fi în frunte anul viitor. Există un ghid de la Google Material care vă poate ajuta.

In concluzie

Aplicațiile web progresive sunt nevoia momentului, deoarece le permit dezvoltatorilor să ofere utilizatorilor o experiență web intuitivă de pe telefoanele lor. Prin simpla implementare a acestor recomandări, puteți oferi utilizatorilor interfețe și experiențe excelente, asemănătoare aplicațiilor, în timp ce aceștia folosesc PWA.

SimiCart este aici pentru a răspunde fiecărei întrebări și nevoi legate de PWA. Și mai ales pentru comercianții online care caută o soluție Magento PWA perfectă pentru magazinul dvs. de comerț electronic, oferim o soluție completă și rentabilă pentru dvs. și magazinul dvs.