Ev Hizmetleri Uygulaması Tasarımı: Ana Ekran Yeniden Tasarımı, Öncesi ve Sonrası

Bir ev hizmetleri uygulamasının ana ekranda tek işi var: birini "bir şey bozuldu" noktasından rezerve edilmiş bir ustaya mümkün olan en az dokunuşla ulaştırmak. Aşağıdaki ilk taslakta bir ev sahibinin ihtiyaç duyduğu her şey var, ama kullanıcıyı aramak zorunda bırakıyor. "Hizmet, kategori, usta ara" diye soruyor, kırmızı bir bannerda %30 indirimi bağırıyor, 8 px'lik etiketlerle on iki kategori diziyor ve her ustayı 8 px'lik bilgi satırlarının içine gömüyor.

Düzeltme her işlevi koruyor, sadece sırayı değiştiriyor. Önce tek bir sade soru geliyor, teklif tek satıra iniyor, ekranı üç kategori taşıyor ve her usta sadece insanların seçerken baktığı şeyi gösteriyor.

Tüm ekran, öncesi ve sonrası

Junior taslak

Düzeltilmiş

Solda, bir düzine şey aynı ağırlıkla dikkat istiyor. Kırmızı banner en gürültülü nesne, on iki karo en büyük blok, işi gerçekten yapacak insanlar ise ekranın altında, gözünü kısmadan okunamayan bir yazı boyutunda duruyor.

Sağda ekran, bir ev sahibinin düşündüğü sırayla okunuyor: sorun ne, indirim var mı, nasıl bir iş, kim gelebilir. Yazılar taslaktaki 8 ila 15 px'e karşılık 12 ila 18 px, kenar boşluğu iki yanda 20 ve hiçbir şey kartın içinde durmuyor.

Ne değişti, ölçülmüş halde

Düzeltme 1: tek bir sade soru sor

Önce

Sonra

Mikrofonlu, Hizmet, kategori, usta ara yazan ince çerçeveli bir arama alanı ve altında popüler aramalar satırı: Sızıntı Tamiri, Klima Servisi, Derin Temizlik, Tavan Vantilatörü. Karşısında, büyüteç, Ne tamir edilecek yazısı ve mikrofon içeren uzun gri bir alan.

"Hizmet, kategori, usta ara" bir veritabanı etiketi. Kullanıcıdan tek kelime yazmadan önce bir hizmet mi, kategori mi, kişi mi aradığına karar vermesini istiyor. Kimse bir tesisat uygulamasına bu terimlerle düşünerek gelmez. "Lavabo akıtıyor" diye düşünerek gelir.

"Ne tamir edilecek?" uygulamanın cevaplamak için var olduğu soru, yani kullanıcı sorunu kendi kelimeleriyle yazabilir. Alan 32'den 48 px'e büyüyor, böylece gerçek bir dokunma hedefi oluyor ve eller ıslakken kullanılsın diye mikrofon yerinde kalıyor. Popüler aramalar, yani Sızıntı Tamiri, Klima Servisi, Derin Temizlik ve Tavan Vantilatörü, alana dokunulunca açılıyor; yani hiçbir şey kaybolmuyor ve ekran 9 px'lik bir yazı satırından kurtuluyor.

Tekrar kullanılacak kural: yer tutucuyu bilgi mimarinin gibi değil, kullanıcının sorunu gibi yaz.

Düzeltme 2: bannerı tek satıra çevir

Önce

Sonra

Etiket simgeli kırmızı bir banner, üç ünlemli büyük harflerle İLK REZERVASYONDA %30 İNDİRİM, ödemede FIX30 kodunu kullanın, yalnızca yeni kullanıcılar, koşullar geçerlidir yazan küçük yazı ve sarı bir HEMEN REZERVE ET düğmesi. Karşısında, ok işaretli, İlk tamirde %30 indirim, FIX30 yazan ince sarı tek bir satır.

Kırmızı bannerın üç işi var ve hiçbirini iyi yapmıyor. Kırmızı hata ya da uyarı gibi okunuyor, ünlemler spam gibi okunuyor ve kodun yaşadığı tek yer ince yazı. HEMEN REZERVE ET düğmesi de aşağıdaki ustaların REZERVE ET düğmeleriyle yarışıyor.

Düzeltilmiş satır aynı şeyi tek nefeste söylüyor: indirim, kimin için olduğu ve kod. Uygulamanın tek aksiyon rengi olan sarı ve satırın tamamı düğme, yani ok işareti HEMEN REZERVE ET'in yerini alıyor. Fotoğraf yok, bağırmak yok. İlk kez gelen kullanıcı yine de fırsatı görüyor, geri dönen kullanıcıya ise uygulamayı her açtığında bağırılmıyor.

Tekrar kullanılacak kural: teklif bir satırdır, reklam panosu değil. Kodu kullanıcıya ver ve satırın kendisini dokunulabilir yap.

Düzeltme 3: on iki kategoriyi üçe ve bir Daha fazla'ya indir

Önce

Sonra

Tümünü Gör bağlantılı Tüm Kategoriler başlığı ve altında dörderli üç sıra halinde on iki küçük çerçeveli karo; her biri farklı renkte bir simge ve 8 px'lik etiketle: Tesisat, Elektrik, Temizlik, Boya, Marangozluk, Klima Tamiri, Beyaz Eşya, Haşere Kontrolü, Taşımacılık, Bahçecilik, Çilingir, Akıllı Ev. Karşısında düz mürekkep rengi simgeli dört büyük çerçeveli karo: Tesisat, Elektrik, Temizlik ve Daha fazla.

Bir ızgaradaki on iki renkli simge düzenli görünür, ama kullanıcı kendisininkini bulmak için on iki etiketi okumak zorunda. Daha kötüsü, sızıntısı olan bir ev sahibi çoğu zaman bunun hangi kategoriye girdiğini bilmez. Damlayan bir tavan Tesisat mı, Boya mı, Marangozluk mu? Geniş bir menü bu kişiye yardım etmez, tahmini zorlaştırır.

Düzeltme iki seviyede çalışıyor. Arama alanı sorunu sade kelimelerle alıyor, yani kategoriyi bilmeyen kullanıcı hiçbir zaman bir tahmin yapmak zorunda kalmıyor. Üç karo en yaygın işleri kapsıyor ve Daha fazla diğer dokuzunu açıyor: Boya, Marangozluk, Klima Tamiri, Beyaz Eşya, Haşere Kontrolü, Taşımacılık, Bahçecilik, Çilingir ve Akıllı Ev. Karolar 76'ya 72, simgeler 26 px, etiketler 12 px ve simgeler düz mürekkep rengine dönüyor, çünkü on iki farklı simge rengi bilgi değil gürültüydü.

Hiçbir şey kaldırılmadı. On iki kategorinin hepsi hâlâ bir dokunuş uzakta. Thumbtack da aynı yaklaşımı izliyor: önce iş için bir arama, altında kısa bir kategori listesi.

Tekrar kullanılacak kural: çoğu insanın ihtiyaç duyduğu birkaçını göster, gerisini bir Daha fazla'nın arkasında tut. Kategoriyi bilmeyenleri aramaya bırak.

Düzeltme 4: her ustayı insanların seçtiği şekilde göster

Önce

Sonra

Her biri 40 px'lik fotoğraf, isim, Tesisat, Sızıntı Tamiri, Su Isıtıcıları, Gider Temizliği gibi becerilerin gri satırı, 4.9 (312), 1.240 iş yapıldı, 1,2 mil, saatlik 45 dolar yazan bir satır, Pzt-Cmt, 08:00-18:00 müsait yazan bir satır ve büyük harfli bir REZERVE ET düğmesi olan üç usta. Karşısında 48 px'lik fotoğraf, isim, 4.9 puanlı bir yıldız, 1.240 iş ve saatlik 45 dolar ile yeşil renkte, Bugün 15:00 gibi bir sonraki boş saati gösteren ve Rezerve et düğmesi olan üç usta.

Taslak her usta hakkında bildiği her şeyi sıralıyor: beceriler, puan, yorum sayısı, iş sayısı, mesafe, ücret ve haftalık saatler. Bu, 8 px'lik yazıyla yedi bilgi demek ve üç usta birbirinin aynısı görünüyor, yani kullanıcının onları karşılaştırmasının yolu yok. Saat satırı üçünde de aynı, yani hiçbir bilgi taşımıyor.

İnsanlar bir ustayı üç şeye bakarak seçer: kim olduğu, başkalarının ona güvenip güvenmediği ve ne zaman gelebileceği. Bu yüzden düzeltme bir isim, "4.9 · 1.240 iş · $45/sa" satırı ve yeşil renkte "Bugün 15:00 müsait" gibi bir sonraki boş saati gösteriyor. Saat yeni bilgi ve genel haftalık saatlerin yerine rezervasyonun ihtiyaç duyduğu tek saati koyuyor.

Beceriler, mesafe ve tam saatler ustanın kendi sayfasına taşınıyor. Fotoğraf 40'tan 48 px'e, Rezerve et düğmesi 21'den 34 px yüksekliğe çıkıyor, yani gerçek bir dokunma hedefi oluyor.

Sayılar iki ekranda da aynı. Minh Tran her ikisinde de 4.9, 1.240 iş ve $45/sa.

Tekrar kullanılacak kural: insanların seçerken baktığı bilgileri göster, gerisini detay sayfasına taşı.

Daha küçük düzeltmeler

• Her işlev yerinde. Uzun adres "24 Hayes St" ve ok işaretinden açılıyor. Mikrofon arama alanında duruyor. Teklifler sekmesi teklif satırına katlandı ve sepet Rezervasyonlar sekmesi oldu.
• Tek kenar boşluğu. Taslakta solda 14, sağda 12 px var. Düzeltilmiş ekran iki yanda 20 kullanıyor.
• Tek vurgu. Sarı aksiyon rengi, teklifte ve her Rezerve et düğmesinde. Taslakta kırmızı, sarı ve on iki simge rengi birbiriyle yarışıyor.
• Dört sekme, tek simge stili. Dolu ve çizgili simgelerin karıştığı beş sekme, ince çizgili düz 78 px'lik bir çubukta tek stilde dört sekmeye iniyor.
• Daha büyük logo, daha kısa adres. Logo 24 px'e büyüyor ve adres sokak satırını ve şehri bırakıyor, çünkü kullanıcı nerede yaşadığını biliyor.
• Yazı ölçeği. Metin 8 ila 15 px yerine 12 ila 18 px.
• Tümünü gör duruyor. Diğer ustalar Tümünü gör'ün arkasında ve üçüncü usta sekme çubuğunun altına taşarak listenin daha uzun okunmasını sağlıyor.

Kendi ev hizmetleri ekranını denetle

Figma dosyasını al

Ücretsiz dosyada junior taslak, düzeltilmiş ekran ve her parça bileşen olarak var.

Ücretsiz Figma dosyası

Ev hizmetleri ekranı yeniden tasarımı, öncesi ve sonrası

Her iki ekran ve her parça Figma bileşeni olarak. Ücretsiz, yalnızca görüntüleme, taslaklarına kopyala.

Figma'da aç

SSS

Bir ev hizmetleri uygulamasının ana ekranı nasıl tasarlanmalı?

"Ne tamir edilecek?" gibi tek bir sade soruyla başla, sonra tek ince bir teklif satırı, bir Daha fazla ile üç ya da dört kategori karosu ve kısa bir usta listesi koy. Her ustayı isim, puan ve bir sonraki boş saatle, tek bir Rezerve et düğmesiyle göster.

Bir ev hizmetleri uygulaması kaç kategori göstermeli?

Ana ekranda üç ya da dört, gerisi için bir Daha fazla. On iki karo herkesi her etiketi okumaya zorlar ve sorunu olan insanlar çoğu zaman bunun hangi kategoriye girdiğini bilmez.

Bir hizmet uygulaması arama çubuğu mu kategori mi kullanmalı?

İkisini de, bu sırayla. Sorunu soran bir arama alanı kategoriyi bilmeyenleri karşılar, birkaç karo ise bilenler için yaygın işleri kapsar.

Bir hizmet pazaryerinde usta kartı ne göstermeli?

Bir isim, yapılan iş sayısı ve ücretle birlikte bir puan ve müsait olan bir sonraki saat. Beceriler, mesafe ve tam saatler ustanın kendi sayfasına aittir, çünkü üç seçenek arasında seçim yapmaya yardım etmezler.

Bir ev hizmetleri uygulamasında indirim nasıl gösterilmeli?

Teklifi ve kodunu içeren, tamamı dokunulabilir ince bir satır olarak. Ünlemli kırmızı bir banner spam gibi okunur ve düğmesi Rezerve et düğmeleriyle yarışır.

Kaynaklar

• Her iki ekran da bize ait, Figma'da tasarlandı ve ölçüldü. Uygulama, Fixly, insanlar, adres ve fiyatlar uydurmadır. FIX30 koduyla %30 indirim teklifi ve Minh Tran'ın 4.9, 1.240 iş ve $45/sa değerleri iki ekranda da aynı.
• İncelenen örüntü: önce iş için bir arama ve altında kısa bir kategori listesi olan Thumbtack.
• Simgeler Phosphor'dan (MIT). Fotoğraflar Pexels'ten: Ivan S, Kindel Media, Son Hoa Nguyen ve Mahmoud Yahyaoui.
• İlk olarak App Brainy üzerinde bir carousel olarak yayınlandı.