Mobil öncelikli sipariş deneyimi: tek elle sipariş

Yemek siparişi çoğunlukla koltukta, otobüste ya da iş yerinde, tek elle tutulan bir telefondan verilir. Masaüstü için tasarlanıp telefona sığdırılan bir sipariş sitesi bu kullanıcıyı yorar. Çok restoranlı yemek sipariş sitesi kurarken tasarımın telefondan başlaması, sonra büyük ekrana genişlemesi gerekir.

Başparmak bölgesi

Telefonun alt yarısı başparmağın rahat ulaştığı bölgedir. Bu yüzden sık kullanılan eylemler ekranın altına yerleştirilir: sepeti görme, ödemeye geçme, seçenekleri onaylama. Restoran sayfasında sepet, ekranın altında sabit bir çubuk olarak durur ve ürün sayısıyla toplamı gösterir. Dokunulduğunda aşağıdan yukarı açılan bir çekmeceye dönüşür.

Alt çekmece

Ürün seçenekleri gibi kısa süreli kararlar için ayrı bir sayfa açmak yerine alt çekmece kullanmak akışı korur. Çekmece kaydırılabilir içerik ve sabit bir alt bölümden oluşur: içerikte seçenek grupları, altta adet seçici ve "Sepete ekle" düğmesi. Düğmede güncel toplam yazar; müşteri her seçimin fiyata etkisini anında görür.

Dokunma hedefleri

Parmakla dokunulan her öğe en az 44 piksel yüksekliğinde olmalıdır. Küçük metin bağlantıları, sıkışık onay kutuları ve yan yana dizilmiş minik düğmeler yanlış dokunmalara yol açar. Radyo düğmeleri ve onay kutuları bütün satırı kaplayan etiketlerle birlikte kullanılmalıdır; müşteri yazının üstüne dokunduğunda da seçim yapılabilmelidir.

Kategori sekmeleri

Uzun menülerde kategori sekmeleri ekranın üstünde sabit kalmalı ve yatay kaydırılabilmelidir. Müşteri sayfayı kaydırdıkça etkin sekme değişir; bir sekmeye dokunduğunda ilgili bölüme atlanır. Bu, 40 ürünlük bir menüde bile yönünü kaybetmemeyi sağlar.

Formlar

Ödeme ve adres formlarında doğru klavye tipi seçilmelidir: kart numarası ve telefon için sayısal klavye, e-posta için e-posta klavyesi. Kart numarası dörderli gruplarla biçimlenir ve yazılırken doğrulanır. Hata mesajları alanın hemen altında, sade bir dille gösterilir.

Süzgeçler

Masaüstünde yan sütunda duran süzgeçler telefonda bir düğmenin arkasına, alt çekmeceye taşınır. Çekmecenin altındaki "N restoranı göster" düğmesi seçimlerin sonucunu önceden söyler.

Hız

Mobil kullanıcı çoğu zaman zayıf bağlantıdadır. Görsellerin modern biçimlerde (AVIF, WebP) ve ekran genişliğine göre farklı boyutlarda sunulması, aşağıda kalan görsellerin geç yüklenmesi ve sayfaların sunucuda önceden hazırlanmış hâlde gelmesi ilk açılışı belirgin biçimde hızlandırır. Restoran ve menü sayfalarının arama motorlarına da hızlı ve tam içerikle gelmesi, organik ziyaretin temelidir.

Restoran ve kurye de mobilde

Mobil öncelik yalnızca müşteri için değildir. Küçük restoranların çoğu paneli telefonda açar; kuryeler ise yalnızca telefon kullanır. Restoran sipariş panelinde tablolar telefonda kartlara dönüşmeli, menü ise bir çekmeceye taşınmalıdır. Kurye görünümü büyük düğmelerle, tek dokunuşla navigasyonu açabilen ve teslim kodunu sayısal klavyeyle aldıran bir ekran olmalıdır.

Erişilebilirlik

Klavye ile gezinme, görünür odak halkası, yeterli renk karşıtlığı ve ekran okuyucular için anlamlı etiketler yalnızca yasal bir gereklilik değil, herkes için daha kullanışlı bir arayüzün işaretidir. Hareketi azaltma tercihi olan kullanıcılar için animasyonların sakinleştirilmesi de bu kapsamdadır.

Tekrar sipariş

Telefonda en hızlı sipariş, daha önce verilmiş bir siparişi tekrarlamaktır. Hesap ekranındaki geçmiş siparişlerde "tekrar sipariş ver" düğmesi, aynı ürünleri aynı seçimlerle sepete ekler. Fiyatı değişen ya da tükenmiş ürünler varsa müşteri bunu sepet ekranında görür. Kayıtlı adres ve kayıtlı ödeme yöntemiyle birleştiğinde, düzenli müşteri için sipariş birkaç dokunuşa iner.

Test etmek

Mobil deneyimi masaüstü tarayıcının dar penceresinde test etmek yanıltıcıdır. Gerçek cihazlarda, farklı ekran genişliklerinde (360 ve 390 piksel gibi), farklı tarayıcılarda ve yavaş bağlantı koşullarında deneme yapmak gerekir. Özellikle açılır menülerin, alt çekmecelerin ve sabit çubukların klavye açıldığında nasıl davrandığı yalnızca gerçek cihazda görülür.

Uygulama mı, web mi?

Pek çok platform önce yerel bir uygulama yapmayı düşünür. Oysa iyi tasarlanmış, hızlı açılan bir mobil web sitesi; arama motorlarından gelen yeni müşteriyi uygulama indirmeye zorlamadan siparişe ulaştırır. Uygulama ise düzenli müşteri için bildirim ve hız avantajı sağlar. Doğru sıra çoğu zaman önce güçlü bir mobil web, ardından aynı altyapıyı kullanan bir uygulamadır.

Bu demoyu telefonunuzda açıp restoranlar sayfasından bir sipariş akışını baştan sona denemenizi öneririz; ardından kurye görünümünü aynı telefonda açabilirsiniz.