Navigasyon Uygulaması Tasarımı: Sürüş Ekranı Yeniden Tasarımı, Öncesi ve Sonrası

Sürüş ekranının tek kuralı var: sürücünün bakış başına yaklaşık bir saniyesi vardır ve bir sonraki dönüş o saniyede okunabilmelidir. Aşağıdaki ilk taslak dönüşü yeşil bir çubukta 11 px'lik bir cümleye koyuyor, sonra yolu on yedi kontrol, bir reklam ve dört harita iğnesiyle çevreliyor. Bir sürücünün isteyebileceği her özellik var, ama hiçbiri hızla giderken okunamıyor.

Düzeltme her işlevi koruyor. Bir sonraki dönüşü ekrandaki en büyük şey yapıyor ve önümüzdeki dakikayla ilgili olmayan her şeyi yoldan çekiyor.

Ekranın tamamı, öncesi ve sonrası

Junior taslağı

Düzeltilmiş

Soldaki ekranda talimat bir cümle. Sürücü araç hareket ederken 11 px ile "In 400 ft turn right onto 16th St, then continue for 0.2 mi and turn left onto Mission St" cümlesini okumak zorunda. Rota ince bir 4 px çizgi, araç 13 px'lik bir nokta, bir kahve reklamı ve dört iğne de yolla dikkat için yarışıyor. Kimse sürerken sekme değiştirmediği halde sekme çubuğu ekranın altını kaplıyor.

Sağdaki ekranda üç blok var: üstte dönüş, ortada yol, altta yolculuk. Rota takip edilecek kadar geniş, araç net bir puck, harita yalnızca yolu gösteriyor.

Neler değişti, ölçülerle

Düzeltme 1: cümleyi tek büyük talimata çevirin

Önce

Sonra

İki dönüşü anan tek satır küçük yazı taşıyan ince yeşil bir çubuk; karşısında büyük bir dönüş oku, "400 ft" ve "16th St" olan yeşil bir kart ve sol kenarının altına bağlı, sola oklu küçük bir "Then" çipi.

Bir sürücünün üç bilgiye ihtiyacı var: hangi yöne, ne kadar uzakta ve nerede. Cümle bunları içeriyor, ama bir insanın söylediği sırayla, bu yüzden göz önemli olanı bulmak için soldan sağa okumak zorunda. İkinci dönüş sonda gömülü, en son okunuyor ya da hiç okunmuyor.

Düzeltme her bilgiye kendi boyutunu veriyor. Ok yönü söylüyor, 400 ft mesafeyi söylüyor, sokak adı ise sokak tabelasıyla karşılaştırdığınız kısım olduğu için daha küçük boyutta altta duruyor. İkinci dönüş karta sabitlenmiş küçük bir çip oluyor, böylece eşit ağırlıkta ikinci bir talimat gibi değil, "sonra" olarak okunuyor.

Yeniden kullanılacak kural: bir insanın bir saniyesi varsa, cümleyi bir şekle ve bir sayıya çevirin.

Düzeltme 2: haritada iki düğme tutun

Önce

Sonra

Sağ kenarda aşağı doğru beş düğmeli (katmanlar, araba, pusula, bayrak ve ses; bazıları yuvarlak bazıları kare), solda yakınlaştırma yığını, bir kahve reklamı ve dört iğne olan bir harita; karşısında sağ altta yalnızca iki yuvarlak beyaz düğme olan temiz bir harita: yeniden ortala ve ses.

Yoldaki her düğme, sürücünün hareket halindeyken dokunmaya heveslenebileceği bir şey. Taslakta sağda beş, solda yakınlaştırma için iki düğme var, daire ve kare karışımı da her birini farklı türden bir şey gibi gösteriyor. Reklam ve dört iğne rotanın üstüne daha fazla hedef ve renk ekliyor.

Düzeltme, sürücünün yolculuk sırasında kullandığı ikisini tutuyor: harita sürüklendiğinde yeniden ortala ve ses. Yakınlaştırma bir çimdik hareketi. Katmanlar, trafik, pusula ve bildir düğmeleri yolculuk çubuğundaki tek bir ok işaretinin arkasına taşınıyor; yani hiçbir şey silinmedi, bir yolcunun ya da park halindeki bir arabanın ulaşabileceği yere taşındı. Reklam ve iğneler yoldan çıktı, çünkü renkli olması gereken tek şey rota.

Yeniden kullanılacak kural: araç hareket ederken dokunulabilecek şey ne kadar azsa, o kadar az dokunuş olur.

Düzeltme 3: hız limitini tabela olarak çizin

Önce

Sonra

Haritanın sol kenarında üst üste duran, LIMIT 25 yazan küçük bir kutu ve 23 mph yazan koyu bir daire; karşısında SPEED LIMIT ve büyük 25 yazan hız limiti tabelasını taşıyan, yanında büyük 23 ve küçük mph olan tek bir beyaz çip.

Sürücüler hız limiti tabelasının neye benzediğini zaten biliyor: beyaz, siyah çerçeve, SPEED LIMIT yazısı, büyük bir sayı. Taslak, sürücünün hiçbir şeye benzetmediği küçük bir kutu ve koyu bir daire kullanıyor, üstelik karşılaştırılmak zorunda kalsınlar diye üst üste koyuyor.

Düzeltme gerçek tabelayı 48 x 60 pt, 2 px çerçeve ve 26 pt sayıyla çiziyor, mevcut hızı da hemen yanına 32 pt olarak koyuyor. Yan yana iki sayı tek soruyu yanıtlıyor: limiti aşıyor muyum? Bu bir bakış alıyor, okuma gerektirmiyor.

Yeniden kullanılacak kural: anlamı zaten gerçek bir nesne taşıyorsa, gerçek nesneyi çizin.

Düzeltme 4: yolculuğu kontrol ettiğiniz şeylere indirin

Önce

Sonra

18 min (4.2 mi), Arrive 9:59 AM, Fastest route, Light traffic yazan 10 px'lik bir satır ve altında beş eşit düğme: Exit, Steps, Share, Search ve Add Stop; karşısında büyük yeşil yazıyla 18 min, altında 4.2 mi ve 9:59 AM, kırmızı bir End düğmesi ve bir ok işareti olan beyaz bir panel.

Yolculuk sırasında sürücü üç şeyi kontrol eder: ne kadar kaldı, ne kadar mesafe ve ne zaman varırım. Taslak bunları iki bilgiyle birlikte 10 px'lik bir satıra koyuyor, sonra 9 px büyük harflerle beş eşit düğme ekliyor; böylece yolculuğu bitiren "Exit", "Share" ile aynı görünüyor.

Düzeltme kalan süreyi yeşil 24 pt yapıyor, mesafe ve varışı altına koyuyor ve tek bir kırmızı End hapı ekliyor. Kırmızı, çünkü yolculuğu bitirmek bedeli olan tek eylem. Steps, Share, Search ve Add Stop ok işaretinin arkasına taşınıyor, bir yolcu için tek dokunuş uzakta.

Yeniden kullanılacak kural: insanların en çok kontrol ettiği sayıya en çok yeri verin ve bedeli olan tek eyleme tek uyarı rengini verin.

Daha küçük düzeltmeler

• İkinci bir harita. Düzeltilmiş ekranın kendi haritası var: daha geniş kesilmiş ve araç ekranın alt kısmında, böylece rota araçtan yukarı ve uzağa gidiyor, az önce geçilen yolu değil önümüzdeki yolu gösteriyor.
• Temiz bir çerçeve. Rotada 9 px mavi çizginin altında 14 px beyaz çerçeve var, böylece sarı yollarda da gri bloklarda da okunur kalıyor.
• Sekme çubuğu yok. Beş sekme sürüş görünümünden kaldırıldı. Drive, Explore, Saved, Trips ve Profile araç park halindeyken için.
• Düğmeler için tek şekil. Yalnızca daireler, 40 pt, böylece hedefler hedef gibi görünüyor.

Kendi sürüş ekranınızı denetleyin

Figma dosyasını alın

Ücretsiz dosyada her iki ekran var ve düzeltilen her parça bir bileşen olarak duruyor.

Ücretsiz Figma dosyası

Sürüş navigasyonu yeniden tasarımı, öncesi ve sonrası

Her iki ekran ve her parça bir Figma bileşeni olarak. Ücretsiz, salt görüntüleme, taslaklarınıza çoğaltın.

Figma'da aç

SSS

Bir navigasyon uygulaması ekranı sürüş sırasında ne göstermeli?

Sonraki dönüşü, ona olan mesafeyi, sokak adını, mevcut hızı ve hız limitini, kalan süreyi ve yolculuğu bitirmenin tek yolunu. Geri kalan her şey tek dokunuşun arkasında durabilir.

Bir sürüş uygulamasında dönüş talimatı ne kadar büyük olmalı?

Bir bakışta okunacak kadar büyük: bu yeniden tasarımda ok 52 pt, mesafe 28 pt. 11 px'lik tek satır bir cümle okunmak zorunda ve sürücünün okumaya vakti yok.

Sürüş sırasında bir harita ekranında kaç düğme olmalı?

İki yeter: yeniden ortala ve ses. Yakınlaştırma bir çimdik hareketi; katmanlar, trafik ve bildir bir yolcu ya da park halindeki araç için bir ok işaretinin arkasında durabilir.

Bir uygulamada hız limiti nasıl gösterilmeli?

Sürücülerin zaten bildiği tabela olarak: çerçeve, SPEED LIMIT yazısı ve büyük bir sayıyla, mevcut hızın yanında, böylece ikisi bir bakışta karşılaştırılabilir.

Neden bir navigasyon ekranından sekme çubuğu kaldırılmalı?

Sürerken kimse sekme değiştirmez; çubuk yoldan yer ve dikkat çalar. Yolculuk bitince geri gelir.

Yolculuğu bitir düğmesi hangi renk olmalı?

Kırmızı ve ekrandaki tek kırmızı olmalı. Yolculuğu bitirmek bedeli olan tek eylem, bu yüzden tek uyarı rengini alır.

Kaynaklar

• Her iki ekran da bize ait, Figma'da tasarlandı ve ölçüldü. Uygulama, Waymark, uydurma; 23 mph, 25 limit, 18 min, 4.2 mi ve 9:59 AM örnek amaçlı ve iki tarafta da aynı.
• Rota, San Francisco'nun Mission semtindeki gerçek sokakları izliyor: Valencia St, 16th St ve Mission St. Harita verisi: OpenStreetMap contributors.
• İkonlar: Phosphor Icons (MIT).
• İlk olarak App Brainy üzerinde bir carousel olarak yayımlandı.