In ynterface ûntwerpe foar in bestelside foar iten
In lykwicht fine tusken krêftige opsjes en brûkberens op mobyl
- Publisearre
- Bywurke
- (oanmakke )
- Skreaun troch
- Willem L. Middelkoop
- Ûnderwerpen
- meitsje · design · lemmid-store · programmearjen · smartphone · web · webdesign · wurk
- Minsklike ferzje fan dit berjocht
- https://willem.com/fy/2020-05-01_in-ynterface-untwerpe-foar-in-bestelside-foar-iten/
- English
- Designing an interface for a food ordering page
- Nederlands
- Een interface ontwerpen voor een bestelpagina voor eten
- Deutsch
- Gestaltung einer Benutzeroberfläche für eine Bestellseite (Essen)
- Español
- Diseñando una interfaz para una página de pedidos de comida
- Français
- Concevoir l'interface d'une page de commande de repas
- Italiano
- Progettare un'interfaccia per una pagina di ordinazione di cibo
- Português
- Desenhar uma interface para uma página de pedidos de comida
- Papiamentu
- Desèñá un interface pa un página pa pidi kuminda
- Talen
- Oerset út it Ingelske oarspronklike troch in taalmodel yn twa rûnten (oersetting en korreksje) mei in wurdlist en in staveringskontrôle; noch net lêzen troch in memmetaalsprekker.
Gearfetting
Online bestelsiden binne wichtiger as ea. It COVID-19-firus, de lockdowns dy't dêrfan it gefolch wiene en de regels foar sosjale ôfstân hawwe de needsaak fan in goed ûntwurpen webshop-brûkersynterface ûnderstreke. Dit goed foar inoar krije is ferrassend dreech!
Folsleine tekst
De útdaging: online itenbestellingen
Do besefst it miskien net as do dyn pizza of patat útsykje by dyn leafste meinimrestaurant, mar iten bestelle is eins frij dreech út it eachpunt fan ûntwerp fan brûkersynterfaces. Do moatst rekken hâlde mei:
- produktoanpassing: bygelyks it oanbieden fan ferskillende sauzen, byrjochten, toppings en maten
- oanpassingen falidearje: guon oanpassingen fereaskje in antwurd (lykas hoe wolst do dyn steak, bloedich, medium of trochbakken?), mar oare oanpassingen litte mear romte yn har antwurd (lykas kies in "maksimum fan 5 pizzatoppings")
- meardere farianten: immen moat twa deselde pizza's bestelle kinne, mar mei ferskillende toppings
Dêrboppe moatst do beseffe dat sa'n 80% fan al dizze brûkersynteraksje op in tige lyts skerm dien wurdt. Dat beheint de romte foar knoppen, skeakelers en wikselers. It is dreech om goed te dwaan en it ferraste my net dat in protte besteande apps en bestelsiden dit net op in elegante wize oplosse.
Oanpakke lestige útdagingen troch in skets te meitsjen!
As ik foar in komplekse ûntwerpútdaging stean, begjin ik faak mei it meitsjen fan in skets. Ik brûk in tablet as haadkompjûter wêrmei't ik ideeën ferkenne kin troch se te tekenjen. Fansels kinst do ek âlderwetsk papier brûke. Wat wichtich is, is dat do dyn tinken sichtber makkest, want dat bringt de mooglikheden en beheiningen fan dyn konsept oan it ljocht.
De skets hjirboppe lit myn earste idee foar de ynterface sjen. Do sjochst in ôfbylding, in titel, in produktbeskriuwing, de priis, plus- en minknoppen en in fakje mei it oantal produkten dat do bestellen hast. It liket in goed (en ienfâldich) begjin, mar dit ûntwerp hat flaters, om't:
- guon produkten gjin ôfbylding hawwe, wêrtroch't tekst raar útrjochte wurdt as dizze ynterface yn in list stiet
- guon produkten lange titels en beskriuwingen hawwe, dyn ûntwerp moat tekstôfbrekking oankinne
- dit ûntwerp negearret de produktoanpassingen (lykas it kiezen fan in topping of saus) folslein
Meitsje in skets yn de kontekst fan in smartphone en do sjochst gau wêr't dyn ûntwerp ferkeard sit. Yn de twadde skets (hjirboppe) steane mar twa produkten op de bestelside, mar it oantal sichtbere knoppen (plus / min) is al twa kear safolle. Meardere knoppen per produkt altyd sichtber meitsje is dúdlik in minne idee, benammen as do mei in soad produkten te krijen hast.
Tinken as yn de echte wrâld: ynteraksje yn twa stappen
Om mei wat eleganters te kommen besocht ik my yn te tinken hoe't it is om yn in echt restaurant jûnsiten te bestellen. Ik ûntduts dat de kelner eins in wichtich stik fan de puzel leveret: hy of sy reagearret op dyn kar troch produktspesifike fragen te stellen. As ik bygelyks steak bestel, freget de kelner my hoe't ik it bakt ha wol.
De kneep is dat der allinnich fragen steld wurde dy't relevant binne foar dyn kar. Dat helpt as twa minsken (oan deselde tafel) itselde produkt bestelle, de persoanlike oanpak makket ferskillende oanpassingen per persoan mooglik.
As do dizze ynteraksje yn twa stappen yn in brûkersynterface fêstlizze woest, koest do in list/detail-modus ûntwerpe. Produktspesifike fragen beäntwurdzje docht men yn de "detailmodus", wylst de "listmodus" in kompakt (mar ynformearjend) oersjoch fan de ferskillende produkten biedt.
It ûntwerp ôfmeitsje: iten bestelle yn 3 stappen
Faak makket de kelner yn in restaurant it opnimmen fan de bestelling ôf troch in gearfetting te jaan fan wat der allegearre bestelle is troch de ferskillende minsken oan in bepaalde tafel. Dizze gearfetting is in tige wichtige (lêste) stap eardat de bestelling nei de kok stjoerd wurdt.
Op de online bestelside soe dizze lêste stap ek wurkje. It soe tsjinje as in lêste kontrôle eardat do de bestelling pleatst. Fierder de analogy út de echte wrâld folgjend komme wy ta in ienfâldige brûkersynterface foar iten bestellen yn 3 stappen:
Konklúzje
In bestelside foar iten ûntwerpe is útdaagjend troch de protte ferskillende fariabelen dy't do op in tige lyts skerm ûnderbringe moatst. Geweldich ûntwerp nimt dizze kompleksiteit en makket it ienfâldich.
As do in ynterface ûntwerpst, kin it tige nuttich wêze om wat te tinken as yn de echte wrâld. Betink in oare analogy of metafoar. De bestelside sjen as in "firtuele restaurantkelner" holp my in ienfâldich ûntwerp fan trije stappen te betinken. Ik haw dit ûntwerp ynfierd en it wurket fantastysk!
