Desèñá un interface pa un página pa pidi kuminda

Resumen

Página pa pidi online ta mas importante ku nunka promé. E virus COVID-19, e lockdown ku a sigui i e reglanan di distansia sosial a enfatisá e mester di un interface di webshop bon desèñá. Ta sorprendente difísil pa hasié bon!

Teksto kompleto

E reto: pedido di kuminda online

Ta posibel ku bo no ta realisá esaki ora bo skohe bo pizza òf patchi na bo restaurant preferí pa bai ku ne, ma pidi kuminda ta bastante difísil for di e punto di bista di desèño di interface di usuario. Bo mester konsiderá:

• personalisashon di produkto: por ehèmpel ofresé diferente salsa, plato adishonal, topping i grandura
• validá e personalisashonnan: algun personalisashon ta pidi un repuesta (manera kon bo ke bo steak, kru, mediano òf bon hasi?), miéntras otro personalisashon ta permití mas variashon den nan repuesta (manera skohe un “máksimo di 5 topping riba pizza”)
• hopi variante: un hende mester por pidi dos mesun pizza, ma ku diferente topping

Banda di esaki bo mester konsiderá ku mas o menos 80% di tur e interakshon aki ta ser hasi riba un pantaya masha chikí. Esaki ta limitá e espasio disponibel pa boton, toggle i switch. Ta difísil pa hasié bon i mi no tabata sorprendé di wak ku hopi app i página di pedido ku ta eksistí no ta resolvé esaki na un manera elegante.

Resolvé reto kompleho ku skèts!

Semper ku mi ta enfrentá un reto kompleho di desèño, mi ta kuminsá hopi biaha ku skèts. Mi ta usa un tablèt manera mi kompiuter prinsipal ku ta laga mi eksplorá idea dor di dibuhá nan. Klaru bo por usa papel di moda bieu tambe. Loke ta importante ta ku bo visualisá bo pensamentu, pasobra esei ta revelá posibilidatnan i limitashonnan di bo konsepto.

E skèts ariba ta mustra mi idea inisial pa e interface. Bo por wak un potrèt, un título, un deskripshon di produkto, e preis, boton di plus i minus, i un kaha ku e kantidat di produkto ku bo a kompra. Por parse un bon (i simpel) kuminsamentu, ma e desèño aki tin fayo pasobra:

• algun produkto lo no tin potrèt, ku ta hasi e teksto alineá raro si bo tin e interface aki den un lista
• algun produkto tin título i deskripshon largu, i bo mester laga e desèño akomodá e teksto ku ta kambia di liña
• e desèño aki ta ignorá tur e personalisashonnan di produkto (manera skohe un topping òf salsa)

Hasi skèts den e kontekstu di un smartphone i bo lo wak lihé unda bo desèño ta robes. Den e di dos skèts (ariba) bo ta wak djis dos produkto riba e página di pedido, ma e kantidat di boton visibel (plus / minus) ta dòbel di esei kaba. Mustra hopi boton pa kada produkto tur ora ta klaru un mal idea, spesial si bo ta manehá hopi produkto.

Pensa manera den e mundu real: interakshon di dos pasu

Pa bin ku algo mas elegante, mi a purba imaginá kon e ta pa pidi diner den un restaurant real. Mi a deskubrí ku e kelner di berdat ta kumpli ku un parti importante di e rompekabes: e ta reakshoná riba bo eskohensia dor di puntra pregunta spesífiko pa e produkto. Por ehèmpel, ora mi ta pidi steak, e kelner lo puntra mi kon mi ke pa nan prepará e.

E trùk ta ku djis e preguntanan ku ta relevante pa bo seleksion ta ser hasi. Esaki ta yuda ora dos persona (na mesun mesa) ta pidi mesun produkto, pasobra e enfoke personal ta permití diferente personalisashon pa kada persona.

Si bo purba kapta e interakshon di dos pasu aki den un interface di usuario, bo por desèñá un modo di lista/detaye. Kontestá pregunta spesífiko pa e produkto ta ser hasi den “modo di detaye”, miéntras ku “modo di lista” ta ofresé un bista general kompakto (ma informativo) di e diferente produkto.

Kompletá e desèño: pidi kuminda den 3 pasu

Tin biaha e kelner den un restaurant ta kompletá e tuma di pedido dor di ofresé un resumen di loke tur e diferente persona na un sierto mesa a pidi. E resumen aki ta un pasu (final) masha importante promé ku e pedido ser mandá pa e kushinadó.

Riba e página di pedido online, e ùltimo pasu aki lo funshoná tambe. E lo funshoná manera un ùltimo kontròl promé ku bo hasi e pedido. Sigui e analogia di e mundu real ta hiba nos na un interface di usuario simpel di 3 pasu pa pidi kuminda:

Konklushon

Desèñá un página pa pidi kuminda ta un reto pasobra tin hopi variabel diferente ku bo mester akomodá riba un pantaya masha chikí. Un bon desèño ta tuma e kompleksidat aki i hasié simpel.

Si bo ta desèñá un interface, por ta masha útil pa aplika un pensamentu di mundu real. Bin ku un analogia òf metáfora diferente. Wak e página di pedido manera un “kelner virtual di restaurant” a yuda mi bin ku un desèño simpel di tres pasu. Na final mi a implementá e desèño aki i e ta funshoná fantástiko!