Inspirație de la Sweetgreen, Chipotle, CAVA și Panera Bread.

Masha S

31 oct.2019 · 6 min citire

Ca cineva căruia îi place să țină evidența caloriilor și a macro-urilor, îmi place când restaurantele își publică informațiile nutriționale online și cu atât mai mult, îți este ușor să îți personalizezi comanda, rămânând la curent cu valoarea nutrițională.

element meniu

De fapt, ori de câte ori mănânc afară, aleg de obicei un loc în funcție de faptul că faptele sale nutriționale sunt accesibile online. (Evident că nu fac asta ÎNTOTDEAUNA. Numai când sunt singur și/sau este o zi săptămânală).

Întrucât urmăresc de ceva vreme acum, am întâlnit numeroase abordări pentru proiectarea calculatoarelor nutriționale. Există câteva exemple grozave acolo și sunt bucuros să le împărtășesc pe cele preferate în acest articol.

Aplicația Sweetgreen are probabil mulți fani atât în ​​comunitățile UX, cât și în comunitățile de sănătate/fitness.

Interfața este curată, procesul de personalizare și comandă este rapid, iar imaginile ingredientelor sunt atât de plăcute din punct de vedere estetic.

După cum s-a văzut mai sus, caloriile totale se actualizează pe măsură ce vă modificați masa, iar calculatorul de calorii este integrat în mod convenabil chiar în comandă.

Cu toate acestea, există câteva dezavantaje. În primul rând, nu există informații macro în aplicație. Deși am găsit online un tabel pdf cu defecțiuni macro pentru fiecare element de meniu, acesta pare să fie incompatibil cu aplicația și nu a fost actualizat cu cele mai recente elemente.

În al doilea rând, comanda (și, prin urmare, capacitatea de a personaliza și verifica informațiile nutriționale) este disponibilă numai în aplicație. Nu există nicio modalitate de a face acest lucru pe site, fie de pe telefon, fie de pe desktop.

În al treilea rând, chiar dacă este extraordinar faptul că calculatorul nutrițional este integrat în comandă, există șansa ca un utilizator să fie interesat doar să parcurgă informațiile nutriționale fără a plasa o comandă. După cum am scris mai devreme, ar putea fi benefic pentru utilizatori să aibă acces la meniul unui restaurant (și, în acest caz, la informații nutriționale), chiar dacă nu sunt încă gata să comande.

Spre deosebire de Sweetgreen, Chipotle are o funcție separată de calcul nutritiv, care arată, de asemenea, defalcarea macro. Deși nu este accesibil în aplicație, îl puteți folosi fie pe versiunea mobilă, fie pe cea desktop a site-ului web.

Pe versiunea desktop a calculatorului de nutriție Chipotle, există un panou lateral fix cu o diagramă plăcută care se actualizează pe măsură ce selectați ingredientele.

În versiunea mobilă, în partea de jos există o bară fixă ​​care afișează informații nutriționale. Când îl atingeți, acesta afișează o diagramă circulară la fel ca versiunea desktop:

Când plasați o comandă online reală, Chipotle arată numărul de calorii pentru fiecare ingredient. Cu toate acestea, nu mai afișează defalcarea macro și nu calculează suma totală de calorii pe măsură ce actualizați comanda.

La fel ca Chipotle, CAVA are un calculator nutrițional accesibil pe versiunea mobilă și desktop a site-ului web și nu pe aplicație.

Versiunea lor pentru desktop are, de asemenea, un panou fix pe partea dreaptă care actualizează informațiile nutriționale pe măsură ce selectați ingredientele.

Plasând cursorul peste „+” pe fiecare articol se afișează o etichetă cu informații nutriționale detaliate pentru respectivul articol.

Comparativ cu Chipotle, însă, versiunea lor pentru mobil lipsește.

Pe măsură ce selectați ingrediente, nu aveți idee la ce se adaugă, cu excepția cazului în care derulați până la capăt. O bară fixă ​​ar fi cu siguranță utilă aici.

De asemenea, este greu să verificați eticheta unui articol individual. Pentru a face acest lucru, trebuie să atingeți micul „+” din colțul din dreapta. Deoarece butonul „+” este foarte mic, este ușor să selectați (sau să deselectați) accidental un element în timp ce verificați eticheta.

Deși Chipotle folosește același principiu pentru deschiderea etichetei nutriționale a unui singur ingredient, puteți atinge fie # de calorii, cuvântul „calorii” sau săgeata pentru a deschide sau a închide eticheta. Întrucât zona care se poate atinge este puțin mai mare, nu este la fel de ușor să selectați sau să deselectați din greșeală ingredientul.

Când plasați o comandă online, CAVA nu afișează separat calorii pentru fiecare articol. Cu toate acestea, pe măsură ce adăugați ingrediente la comandă, vedeți caloriile totale pentru masă.

Panera are un calculator de nutriție (care include atât calorii, cât și macro-uri) integrat în procesul lor de comandă.

Când comandați pe site-ul lor desktop, caloriile se actualizează pe măsură ce vă personalizați masa. Dacă faceți clic pe „informații nutriționale”, se deschide, de asemenea, un popup cu informații detaliate despre macro. Fereastra pop-up rămâne deschisă pe măsură ce modificați în continuare comanda, ceea ce este convenabil, deoarece nu trebuie să mergeți înainte și înapoi pentru a verifica macrocomenzile.

Versiunea mobilă a site-ului web este similară cu cea pentru desktop - are aceleași interfețe și caracteristici. Cu toate acestea, nu pare foarte receptiv.

Din fericire, Panera are o aplicație foarte ușor de utilizat, deci nici măcar nu trebuie să folosiți versiunea mobilă atunci când comandați din mers.

În timp ce aplicația oferă aceleași caracteristici, are o interfață mai atrăgătoare, care oferă o experiență de utilizare mult mai lină. O diferență este că nu vedeți actualizarea macrocomenzilor imediat, numai după ce ați terminat de personalizat comanda.

De asemenea, este demn de remarcat faptul că, dintre toate restaurantele menționate, Panera permite cea mai mare flexibilitate pentru personalizarea dimensiunii porției. Pentru fiecare ingredient din masă, puteți alege Light, Regular sau Extra, iar informațiile nutriționale se vor actualiza în consecință. Această caracteristică este disponibilă pentru toate comenzile pentru desktop, mobil și aplicații.

Pe baza exemplelor de mai sus, să compilăm o listă de sugestii pentru cele mai bune practici ale calculatorului de nutriție:

  1. Luați în considerare integrarea calculatorului complet de nutriție (calorii, macro-uri) în procesul de comandă.
  2. În același timp, luați în considerare, de asemenea, posibilitatea de a avea o funcție independentă de calcul al nutriției.
  3. Includeți calorii pentru fiecare element de meniu/ingredient.
  4. Includeți macrocomenzi pentru fiecare element de meniu/ingredient.
  5. Afișați calorii pentru întreaga comandă (sau cel puțin, pentru fiecare element de meniu separat).
  6. Actualizați caloriile și macro-urile pe măsură ce utilizatorul își personalizează comanda.
  7. Păstrați informațiile despre calorii și macrocomenzi vizibile pe măsură ce utilizatorul își personalizează comanda.
  8. Asigurați-vă că calculatorul nutrițional (indiferent dacă este o caracteristică separată sau dacă este integrat cu comanda) este accesibil prin intermediul aplicației și pe site (atât versiunile mobile, cât și cele desktop).

Desigur, așa cum se vede în cazurile de mai sus, nu fiecare dintre acestea trebuie să fie implementat pentru a avea o aplicație excelentă! Aceste sugestii se bazează exclusiv pe opinia mea și pe ceea ce personal consider util pentru a rămâne pe drumul cel bun al obiectivelor mele.

Îmi lipsește ceva? Să-mi dai de veste! Vă mulțumim că ați citit și că ați proiectat fericit 😊