Alışveriş sepetiniz şu an boş
Tüm eğitimlere göz atarak ilgi duyduklarını sepetine ekleyebilirsin.
Listeler
Uygulamanızı ilk günden öldürebilecek 5 büyük arayüz tasarımı hatası
Mükemmel bir arayüz uygulama tasarımına uygun evrensel bir formül yok, ancak sıklıkla yapılan hatalar ve bunlardan alınan dersler var. Bu yazıda ölümcül arayüz tasarımı hatalarına değindik.
Mükemmel bir arayüz uygulama tasarımına uygun evrensel bir formül yok (eğer mevcut bir örnek biliyorsan, lütfen bize de söyle). Ama mükemmel bir uygulama geliştirmek istiyorsan yapmaman gereken bazı büyük hataların neler olduğunu biliyoruz.
Bu hataların her birinin her düzeyde deneyime sahip tasarımcılar tarafından yapıldığına şahit olduk. Bunda utanılacak bir şey yok. İyi bir arayüzü tasarımı çok yönlü bir zorluktur ve iyi bir arayüzünün pek çok özelliği basitçe es geçilebiliyor.
All In Mobile’da çoğunlukla ürünlerinden memnun olmayan ve ürünlerinin görünümlerini ve verdikleri hissiyatın geliştirilmesini isteyen müşteriler için satın aldıkları uygulamaları yeniden tasarlıyoruz. Bu sebepten dolayı, bugün topladığımız bazı büyük nanoları paylaşmak istiyoruz.
Elbette ki, çözümleri göstermekle kalmıyor, onları hayata geçiriyoruz. Bu sebepten dolayı, size yeniden tasarlanmış bir uygulama görünüm listesi de göstereceğim. 5 büyük arayüz hatasını ortaya koyarak ve ekibinizin bu hataları nasıl düzelteceğini göstererek yapacağız bunu.
Bu içerik ücretsiz!
Okumaya devam etmek ve SHERPA Blog okuru olmak için aşağıdakilerden birini seç.
Her hafta yenileri eklenen yüzlerce içeriğe ücretsiz ve sınırsız eriş.
Bu makale, InVision Inside Design'ın izniyle, Luke Konior tarafından kaleme alınan These 5 major UI mistakes will kill your app başlıklı makaleden Türkçeye çevrilmiştir.
Hata 1: Yazı tiplerini istismar etmek
Hadi sistem yazı tipi aileleriyle başlayalım. Örneğin San Francisco iOS’lara ait bir sistem yazı tipidir. Aynı şekilde, Roboto da Android uygulamasına ait bir sistem yazı tipidir. Her ikisinin de okunması kolaydır ve oldukça birbirlerine benzemektedirler.
Tüm sistem yazı tipleri kullanıma uygun mudur? Evet, kesinlikle öyle. Güvenilir ve denenmiş bir seçenektir. Ama unutma! Samsung telefonları varsayılan yazı tipini değiştirmene izin verir. Eğer telefon kullanıcısı Choco Cooky yazı tipine geçerse, güzelce tasarlanmış uygulaman bir anda ölebilir. Ayrıca daha karmaşık olan bir çözüme yönelebilir ve özel bir yazı tipini seçebilirsin.
Daha az, daha fazla demektir. Çok sayıda harika yazı tipi olabilir ama mantıklı olmak gerek. Yazı tipleri kullanıcının deneyimine katkı sağlamalıdır. Çok sayıda yazı tipi, boyut, renk vb. şeyler işleri karmaşık hale getirebilir. Eğer özel yazı tiplerini tercih edecek olursan, onları basit ve uyumlu hale getirmelisin. Özel fontları gerekli gördüğün zamanda ve uygulamanı gerçekten geliştireceğini düşündüğünüz yerlerde kullanmalısın. Özel fontları (custom font) ise sadece çekici bulduğun için kullanmak yeterli bir sebep değildir.
Lisans. Birkaç ay önce bizden bir moda uygulamasını yeniden tasarlamamız istendi. Fontları gözden geçirirken lisansı olmadan kullanılan 2 ticari fontla karşılaştık. Bu hata müşterinin 2000 dolarına mâl olabilirdi. Font yazılımdır ve daima lisanslıdır. Eğer bir fontu bir mobil uygulamasına yerleştiriyorsan, lisansı ve kullanım şartlarını okuduğundan emin ol. Lisansının ne olduğunu bilmiyor musun? O halde o fontu kullanma.
Hata 2 : Ekranda çok fazla öğenin olması
Telefonların boyutu küçükken, tasarımcılar gerekli şeyleri ekrana sığdırma gibi sorunlarla karşılaştılar. iPhone 4 (640×960) çözünürlüğe ve 2:3 oranına sahipti. Dev telefonların (veya “Phablet”lerin) çıkışıyla, ekrana daha fazla öğe sığdırabilir hale geldik; daha büyük fontlar, daha çok sayıda buton ve daha süslü bir tasarım gibi.
Bu özgürlük tuzağına karşı temkinli olmakta fayda var. Daha fazla, her zaman daha fazla anlamına gelmez. Bu yüzden, seçici olun. Her ek parça kullanıcı tarafından işlenmek zorundadır. Onların ilgisini akıllıca çekin ki, uygulamayı kolayca kullanabilsinler. Eğer ekranda gereğinden fazla öğe varsa, kullanıcı ekranda çok kolay kaybolabilir ve hatta ne yapacağını veya nereye tıklayacağını şaşırabilir. Tasarımı kullanıcının gözünü önemli özelliklere odaklamak için kullanın. İnsanların önemli içeriğe doğrudan ve sezgisel bir şekilde ulaşmasını istiyorsun.
Hata 3 : İstikrar Eksikliği
Tasarım yaparken istikrarlı ol. Kullanıcıya karışık sinyaller gönderme. Eğer, spesifik bir eylem için tek bir öğe kullanıyorsan ona bağlı kal. Kullanıcılar kesin eylemleri hayata geçirerek öğrenirler. Eğer beklenmedik veya karmaşık eylemlerle karşılaşırlarsa, bu gerçekten onların deneyimine zarar verebilir.
Ayrıca düzenli istikrarlı bir plan yap. Örneğin, tekrar eden bir desen yaratmak için aynı renkleri ve öğeleri kullan. Standartlar koymak için stil kütüphanesi yarat ki tasarım yaparken doğru çizgide kalabilesin. İstikrarlı planlar kullanıcılara senin uygulaman aracılığıyla kendi yollarını bulmalarında yardım eder. ancak senin oturum açma sayfası veya özel kullanımlı başka ekranlar gibi bazı beklentilerin olabilir. Desenin dışına çıktığın zaman hatırla ki her öğe bir bütün oluşturmak zorundadır.
Hata 4 : iOS’u Android’e birebir aktarmak
Android 4.0 Holo Tasarımı çıkana kadar iOS’tan Adroid’e birebir aktarımları yapmak mantıklı geliyordu. Bu iOS’la uyum göstermeyen yapılarıyla, talinmatlarıyla ve navigasyonuyla Android için ilk mantıklı konuydu.
Neden iOS’tan Android’e doğrudan aktarım olmasın veya tam tersi? Bu şekilde zamandan ve paradan tasarruf etmez misin?
Yani, aslında olabilir ama nihai hedef en iyi kullanıcı deneyimini yaratmaktır. Öyle değil mi? Ayrıca, kullanıcıların alışkanlıkları ve tercihleri var. Telefonlarını her zaman kullanıyorlar ve zamanla onlara alışıyorlar. Bu yüzden, eğer senin uygulamaların insanların alıştıkları şeyden farklıysa, onlardan zevk almaları da düşük bir ihtimal.
Android ve iOS’un kendilerine ait etkileşim desenleri var ve eğer sen kullanıcılara sıfırdan öğrenmeleri gereken bir şey sunarsan bundan memnun kalmayabilirler. Eğer iOS’tan Androide aktarımlar yaparsan(veya başka şekilde), cihazdan cihaza farklılık gösteren tutarlılık hataları yapabilirsin.
İyi haberlerim var! İos ve Android için tamamen farklı gözükmek zorunda değil. Görsel stillerinin çoğunu her iki platform içindce uygulamaya çalış. Mesela Silvercar araba kiralama uygulaması örneğini ele alalım. Silvercar kendisine ait navigasyon stiliyle ortaya çıktı ama aynı zamanda mobil işletim sistemleri arasındak tutarlılığı korudular.
Hata 5 : Zayıf bilgi hiyerarşisi
Bir şey tasarlarken, her ne olursa olsun(kartvizit, websitesi veya uygulama), onu kullanan insan bir şekilde onunla etkileşime girecek. Birinin yapacağın tasarımla etkileşime gireceğini göz önünde bulundurarak sunduğun bilginin önem derecesine göre plan ve tasarım yapman gerekiyor.
Otur ve ortaya koymak istediğin en önemli şey üzerine düşün. Önceliklerini bildiğin takdirde, önemli şeyleri font, renk, boyut, mekan vb. şeylerin yardımıyla ayırabilirsin. Yaratacağın ürünün insanların ne işine yarayacağını düşün(ideal olan ve ideal olmayan ayarlar) ve ona göre tasarımını yap.
Hatalar, çözümler ve uygulamaları
Şimdi size pratikte tüm bu hataların nasıl gözüktüğünü ve onların nasıl düzeltilebileceğini göstereceğim. Bir örnek olarak, bir yemek sipariş uygulamasının görünüm listesini yeniden tasarlayacağız.
Farzedelim ki yemek sipariş uygulamsına sahip olan bir müşteri resturanlara puan verme seçeneğini eklemeye karar verdi ancak gelin görün ki önceki tasarım ona böyle bir çözüm imkanı sunmadı. Bu fırsatı birkaç şeyi geliştirme şansı olarak gördük.
Önceki ekran iPhone 5’in pazırın büyük bir bölümünü elinde tutarken tasarlanmıştı. Daha küçük hücrelere ve logolara ve daha sıkıştırılmış bir metne sahipti. Bu tasarım yeni cihazlarda görüntülendiği zaman, ekranda çok fazla öğe gözüktü ve bunların okunması zorlaştı.
İşte burası bizim devreye girdiğimiz ve bazı değişiklikler yaptığımız yer.
Gördüğünüz üzere, hücreler birbirlerinden daha uzak ve önceki ekranda olduğu gibi birbirlerine yapışmıyorlar ve herşey oldukça belirgin gözüküyor. Kullancı ekrandaki maddelerin numaralarında boğulmuyor. Ayrıca bilgi hiyerarşisi gelişmiş durumda. Şimdi gördüğünüz sayfa da logo en önemli öğedir. Bu durumda kullanıcı markanın ismini okumaktansa logoyu daha hızlı tanıyabilir. Önceki ekranda logoyla marka ismi kavga ediyor gibi gözüküyordu.
Çalışır durumda olması gereken diğer bir öğe ise tipografi. The Oswald fontunu isimler ve etiketler için kullandık. İlk olarak, etiketler için sadece bir satır planlamıştık, ancak bazı restoranların zengin sipariş listelerine sahip olduğu gerçeğini göz önünde bulundurduğumuzda, mümkün olduğunca çok etiket yaratmaya karar verdik.
Ayrıca, Samsung telefonlarında sistem yazıtipleri ile Choko Cooky yazı tipinin Android versiyonda görselleştirilmesi özelliğini de ekledik. Bu sorunu Roboto yazı tipini özel yazı tipi olarak kullanmayla çözdük.
Müşterinin istediği derecelendirme oranını eklemek için yıldızları kullanmaya karar verdik. Bu seçenek bize mantıklı geliyordu çünkü oteller ve Michelin Guide’lar onu kullanıyordu.Ancak bir sorun çıkmıştı. Önceki tasarımda yıldızları favori restoranları işaretleme seçeneği olarak koymuştuk. Bu iki öğeyi biraraya getiremezdik çünkü kafa karıştırıcı olabilirdi. Bir restoranı beğenmenin onun derecelendirilmesiyle alakası yok ve bu her iki eylem için aynı sembolü kullandığımızdan dolayı tercih edilmeyebilirdik. Ne istikrarsız olmak istiyorduk ne de bir versiyondan diğerine geçerken sembolün anlamını değiştirmek istiyorduk. En sonunda, bu sorunu ekrana kullanıcıları bilgilendirmek için yeni bir özelliğin eklendiğini duyurarak çözdük.
“Tasarım bir bilim değildir. Sihirli bir formülü yoktur.”
Bu 5 büyük hatadan kaçınsan bile, kullanıcı tasarladığın şeyle ilişki kurduğu zaman tasarımın başarısız olabilir.
İnsanların yapabileceği her şeyi önceden tahmin edemezsin. Bu sebepten dolayı, analitik ve araçların yardımıyla kullanıcının davranışlarını ve ihtiyaçlarını gözlemlemek zorundasın. Bunu yaptığın zaman ona göre hareket eder ve uygulamanı geliştirebilirsin. Tasarım, kullanıcı deneyimini sürekli geliştirmeye ve değiştirmeye odaklı olmalıdır.
Hiçbir zaman şöhretine güvenme çünkü her zaman daha iyi tasarlayabileceğin bir şey vardır.
Tasarım konusunda oldukça zayıf olduğumu düşünüyorum. Bu yazı oldukça işime yarar. Çok teşekkür ederim.
Bazı hataları istemeyerek de olsa kendimin de uyguladığını fark ettim. Bu yazı ile aydınlandım. Teşekkürler.
Türkçe’de az olan konuları dil konusunda yetersiz kişiler için çevirmek, eski bir çevirmen olarak takdir ettiğim bir iştir, emeğe de her zaman saygılıyımdır. Fakat yaptığı en ufak işe dahi gereken asgari özenin gösterilmesi gerektiğine de inanan biri olarak bu yazıyı, makalenin orijinaline bir google translate eklentisi ile “sayfayı çevir” komutu uygulamaktan daha faydalı bulmadığımı da belirtmek zorundayım zira en azından “Lack of Consistency” “istikrar eksikliği” diye değil doğrusu olan “tutarsızlık” diye çevrilmiş olurdu. Kimseyi özgün içerik üretmediği için suçlayacak ya da yerecek değilim ama bir işe kalkışılıyorsa da asgari özenin de gösterilmesi gerektiğini düşünüyorum zira çeviri olduğu hatta (belki bir kısmı değildir ama) çoğunluğunun tamamen google translate olduğu cümlelerin mekaniğinden anlaşılıyor. Bir deneyim tasarımcısından daha özenli, net ve kısa cümlelerle karakter sayısı değil, mana odaklı bir yazı yazmasını beklerim şahsen. UX Writing nasıl yapılmazın makalesi olmuş diyebilirim… (Olumsuz geri dönüşüm için kusuruma bakmayın ama olumsuz bir geridönüşün 100 tane yüzeysel olumlu geridönüşten faydalı olduğuna inandığım için yazdım).