- Mobil için hazırlanmış bir yerleşimi masaüstüne aynen genişletmek; görsellerin, yazıların ve boşlukların aşırı büyümesine, bilginin uzun sayfalara dağılmasıyla oluşan içerik dağınıklığı nedeniyle kullanılabilirliğin kötüleşmesine yol açar
- Dünya genelindeki web trafiğinin %55’ten fazlası mobilden geldiği için mobil öncelikli yaklaşım yaygın kullanılıyor; ancak minimalizm ve büyük görsel odaklı tasarım birleştiğinde masaüstünde bilgi yoğunluğu ciddi ölçüde azalıyor
- 13 nitel kullanılabilirlik testinde dağınık ve sıkıştırılmış yerleşimler karşılaştırıldığında, dağınık sayfaların bilgi bulmayı ve anlamayı daha zor hale getirdiği görüldü
- Dağınık içerik kaydırma ve tıklamayı artırarak etkileşim maliyetini yükseltir; ilgili bilgilerin birden çok ekrana yayılması, kullanıcının bunları hafızasında tutmasını gerektirerek bilişsel yük, hayal kırıklığı ve güven kaybına yol açabilir
- Masaüstünde önemli ve ilgili bilgiler aynı viewport içinde gruplanmalı; akordeon gibi mobil odaklı desenler sınırlı kullanılmalıdır
İçerik dağınıklığı nedir
- İçerik dağınıklığı, duyarlı web sayfasındaki içeriğin büyük dizüstü veya masaüstü ekranlarda aşırı büyük ve yayılmış görünmesi olgusudur
- Mobil öncelikli bir sayfa masaüstünde render edildiğinde ekranı kaplayan görseller, şişirilmiş büyük yazılar ve aşırı negatif alan uzun sayfalar oluşturur ve daha fazla kaydırma gerektirir
- Dağınıklık yalnızca bazı bölümlerde görülüyorsa büyük bir kullanılabilirlik sorunu olmayabilir; ancak sayfanın büyük bölümüne yayılırsa kümülatif etkisi genellikle olumsuzdur
- Büyük ekranlı cihazlarda içerik dağınıklığı bilişsel yükü, etkileşim maliyetini, içeriği anlamadaki zorluğu ve kullanıcı hayal kırıklığını artırır
İçerik dağınıklığı yaratan tasarım eğilimleri
- Mobil öncelikli yaklaşım, önce mobil için tasarlayıp ardından tablet ve masaüstüne göre uyarlama yöntemidir
- Dünya genelindeki web trafiğinin %55’ten fazlası mobil cihazlardan geldiği için bu yaklaşım yaygın biçimde kullanılır
- Minimalizm, bir web sitesinin temel işlevi veya mesajı için gerekli olmayan tasarım öğelerini kaldırır
- Karmaşık görünüm izleniminden kaçınmak için bolca negatif alan kullanır
- Tek bir ekran viewport’unda gösterilen içerik miktarı azalır; bu da bilgi yoğunluğu düşük, uzun sayfalara dönüşebilir
- Büyük görsel odaklı tasarım, modern web’de yüksek çözünürlüklü görsellerin büyük kullanılma eğilimiyle bağlantılıdır
- Büyük görseller dikkat çekebilir, ancak metin içeriklerini aşırı derecede dağıtabilir
- Masaüstü sayfasında birkaç büyük görselin bulunması iyi çalışabilir
- Büyük görsel sayısı çok fazla olduğunda, aralarındaki metin tabanlı içerik sayfa boyunca parçalanır
13 kullanılabilirlik testinin yöntemi
- Testler, 13 nitel kullanılabilirlik testi ile yarı yapılandırılmış görüşmeler birleştirilerek yürütüldü
- Karşılaştırma konusu, iki yerleşim ile iki sayfa türünün kombinasyonuydu
- Yerleşim: sıkıştırılmış, dağınık
- Sayfa türü: ana sayfa, ürün sayfası
- Toplam 4 prototip kullanıldı
- Dağınık prototipler, gerçek masaüstü web sayfaları arasından içerik yoğunluğu düşük, negatif alanı geniş ve yazıları büyük sayfalar bulunup yeniden yapılandırılarak hazırlandı
- Sıkıştırılmış sürüm, özgün sayfayla aynı içerik kullanılarak ayrı olarak üretildi
- Kullanıcılar 4 prototipte açık uçlu etkinlikler gerçekleştirdi ve her sayfa türünün iki sürümünü karşılaştıran takip tartışmalarına katıldı
- Araştırma yönteminin tamamı ayrı metodoloji sayfasında yer alıyor
Dağınık içeriğin yarattığı kullanılabilirlik sorunları
- Dağınıklık sayfanın geniş bir bölümüne yayıldığında genel kullanıcı deneyimini ciddi şekilde etkileyebilir
- Başlıca sorunlar şunlardır
- Sayfa uzunluğunda ve etkileşim maliyetinde artış
- Bilişsel yükte artış
- Sayfanın kavramsal modelini oluşturma zorluğu
- Hayal kırıklığında artış
- Güvenilirlikte düşüş
-
Kaydırma ve tıklama artışı
- İçerik dağınıklığı, daha fazla kaydırma gerektiren uzun sayfalar oluşturur; akordeon gibi mobil odaklı tasarım öğeleri ise içeriğe erişmek için daha fazla tıklama gerektirir
- Mobil öncelikli web siteleri büyük ekranda render edildiğinde içerik dağılır ve uzun bir sayfaya dönüşür; minimalizm ve görsel odaklı tasarım birleştikçe bu etki büyür
- İçerik birden fazla viewport’a yayılmışsa sayfa içinde belirli bilgileri bulmak zorlaşır
- Test katılımcıları dağınık ürün sayfasında bilgi bulmakta sıkıştırılmış sürüme göre daha fazla zorlandı
-
Mobil odaklı desenlerin masaüstü sorunları
- Akordeon, mobilde çok miktarda bilgiyi dar bir alana katlayarak sayfayı kısaltır ve kullanıcının ilgi alanına doğrudan ulaşmasına yardımcı olabilir
- Büyük ekranlarda uzun sayfa sorunu görece daha küçük olduğundan, akordeonlar içeriği parçalayabilir ve önemli bilgileri bulmanın etkileşim maliyetini ciddi biçimde artırabilir
- Bir katılımcı, dağınık prototipteki ürün bilgisi akordeonunda bilgileri okumak için her öğeyi açıp kapatmak zorunda kaldığını belirtti
- Başka bir katılımcı, sıkıştırılmış sayfanın daha az tıklama gerektirdiği ve bilginin hemen önünde olduğu için daha iyi olduğunu değerlendirdi
-
Bilişsel yük artışı
- Görseller büyüdükçe ve negatif alan genişledikçe metin tabanlı içerik birden çok viewport’a parçalanır
- İlgili içerik ekran birimleriyle kesildiğinde kullanıcının bunu tek bir bütün olarak görmesi zorlaşır
- Bir yargıya veya karara varmak için farklı viewport’lardaki bilgileri hatırlamak ya da ileri geri kaydırmak gerekir; kısa süreli bellek kapasitesi kolayca aşılabilir
- Sıkıştırılmış yerleşim aynı viewport’ta daha fazla bilgi göstererek bilişsel yükü azaltır ve daha rahat bir gezinme deneyimi sunar
- Görsellerin niteliği de parçalanma hissini etkiler
- Bilgilendirici görseller, kullanıcılar faydalı bilgi edinmek için onlara zaman ayırdığı için büyük ekranda büyük gösterilse bile ek yükü düşük olabilir
- Dekoratif görseller bilgi değeri taşımadığından kullanıcılar tarafından bakılmadan geçilir; faydalı içeriğe ulaşmak için büyük illüstrasyonların kaydırılması gerektiğinden parçalanma hissini daha kötüleştirir
Kavramsal model ve güvenilirlik üzerindeki etkisi
- Dağınık sayfalar, uzayan sayfa ve çalışma belleği yükü nedeniyle web sitesinin aktardığı kavramları değerlendirmeyi ve kavramsal model oluşturmayı zorlaştırır
- Ana sayfa prototipinde bir katılımcı, 4-5 öneriyi bir arada görüp kapsamı anlamak yerine bunları hatırlayarak anlamak zorunda kaldığı için bunun daha zor olduğunu belirtti
- Ürün sayfasında fiyat, ürün ayrıntıları ve yorumlar gibi satın alma kararı öğeleri birden çok viewport’a yayıldığında kullanıcıların bilgileri ayrı ayrı tüketip hatırlaması gerekti
- Önemli bilgiler birlikte veya daha az sayıda viewport’a yerleştirildiğinde ürün ya da sunulan değer hakkında kavramsal bir anlayış oluşturmak daha kolaydır
- Tamamlanmışlık yanılsaması dağınık web sitelerinde daha belirgin olabilir
- Renk blokları viewport’ta güçlü yatay çizgiler oluşturabilir veya geniş negatif alan sayfa bitmiş gibi görünebilir
- Daha fazla içerik olduğunu gösteren kaydırma ipuçları yoksa kullanıcıların içeriği kaçırma olasılığı vardır
- Kullanılabilirlik sorunları biriktiğinde dağınık web siteleri içeriği az ve erişimi zor görünebilir
- Bazı kullanıcılar şirketin bilgileri sakladığını hissedebilir; bu durumda güvenilirlik düşebilir
- Kullanıcılar özellikle web sitesini keşfetmek ve sunulanları genel olarak anlamak istediklerinde sıkıştırılmış yerleşimleri daha çok tercih etti
İçerik dağınıklığının faydalı olduğu durumlar
- Sayfanın tamamı dağınık olduğunda kümülatif kullanılabilirlik etkisi genellikle olumsuzdur; ancak belirli durumlarda deneyime olumlu katkı sağlayabilir
- Bir viewport’ta gösterilen içerik miktarı azaldığında kullanıcı tek seferde vurgulanan tek bir içeriğe odaklanabilir ve bilgi aşırılığı algısı da azalabilir
- Viewport içindeki içerik yoğunluğunu düşürerek bilgiyi vurgulamanın yardımcı olabileceği durumlar şunlardır
- Karmaşık içeriğin parça parça anlaşılması gerektiği durumlar
- Kullanıcının gösterilen içeriğe alışması gerektiği ve fazla bilginin bunaltıcı olabileceği durumlar
- Yüksek değerli görsellerin gösterildiği durumlar
- Büyük ürün fotoğrafları, kullanıcının ürünün ayrıntılarını kolayca incelemesini sağlayarak değer katabilir
- Bilgi değeri yüksek görseller dağınıklığı haklı çıkarabilir; ancak dolgu amaçlı veya yalnızca görsel ilgi için kullanılan görseller, ek bir fayda sağlamadan sadece dağınıklık yaratır
- Ana sayfa prototipinde görsel değeri daha düşük olduğu için içerik dağınıklığının olumlu etkisi daha az gözlemlendi
Masaüstü tasarımı için öneriler
- Masaüstü render’ı ayrı değerlendirilmelidir
- Sayfanın büyük bölümü masaüstünde aşırı yayılıyorsa önemli içeriğin kolayca taranabileceği şekilde yeniden tasarlanıp tasarlanmayacağı gözden geçirilmelidir
- Görsellerin kattığı değer değerlendirilmelidir
- Ürün veya hizmetin bağlamını anlamaya yardımcı olan büyük görsellere öncelik verilmelidir
- Büyük görselin masaüstünde yarattığı dağınıklığa katlanmaya değecek kadar değer sağlayıp sağlamadığı değerlendirilmelidir
- Önemli ve ilgili içerikler aynı viewport içinde gruplanmalıdır
- Sunulanları anlamak için en ilgili bilgiler dikkate alınmalı ve ileri geri kaydırmayı azaltan bir tasarım seçilmelidir
- Mobil odaklı etkileşimler ve tasarım öğeleri sınırlanmalıdır
- Masaüstünde akordeon kullanımı azaltılmalıdır
- Aynı içeriği masaüstü dostu şekilde gösteren uyarlanabilir tasarım düşünülmelidir
- Dağınıklığı, temel noktalara veya karmaşık içeriğe dikkat çekmeye yönelik bir strateji olarak sınırlı kullanmak daha uygundur
Sonuç
- Minimal masaüstü sayfalarındaki dağınık içerik dikkat dağıtıcı unsurları azaltabilir ve temel noktalara veya karmaşık bilgilere odaklanmayı sağlayabilir
- Ancak sayfanın tamamı mobil öncelikli, minimalizm ve görsel odaklı tasarıma göre kurulduğunda masaüstünde kullanılabilirlik sorunları büyür
- İçerik birden fazla viewport’a yayılıp parçalandığında kullanıcıların bilgiyi tüketmesi ve anlaması zorlaşır
1 yorum
Hacker News görüşleri
Danny O'Brien, eski blogu Oblomovka'yı yürütüyordu ve 2007 civarında hinternet terimini ortaya attı
O dönem internet, teknoloji elitlerinin kendileri için işlettiği bir alana sıradan insanların da girmeye başladığı bir dönemdi; hinternet ise şık teknolojiye ve değeri olan internete karşı Viagra spam'i ve açılır banner'ların interneti diye ayrı bir internet olduğu fikriydi
Eskiden teknoloji elitleri, tehlikeli bir mahalleden kaçınır gibi hinternet'ten büyük ölçüde uzak durabiliyordu, ama sıradan insanların böyle bir ayırt etme mekanizması yoktu ve bu yüzden çok daha düşük kalitede bir internet deneyimi yaşıyorlardı
Artık internetin büyük kısmı hinternet oldu ve bankacılık, konut kredisi, araç ödemeleri, faturalar gibi temel sistemler bile mobil öncelikli tasarlanırken “gerçek kullanıcı doğrulaması” bahanesiyle açık platformlarda bozulan karanlık teknikler kullanıyor
Eskinin hinternet'i sahte saat satan tekinsiz bir ara sokak idiyse, bugünkü durum daha çok yarı kamusal kurumların perde arkasından işlettiği dikey bilgi entegrasyonundan oluşan bir distopyaya benziyor; IRS'e giriş yapmak için eşya da satan kimlik yönetim platformu id.me'yi kullanmak gerekiyor
Şık küçük bahçeler yetiştirme girişimleri var ama başarıları tutarsız; birey açısından bakınca da gerçekten gerekli işler dışında hinternet'e katılmak için neredeyse hiç teşvik yok
Bu açıdan bakınca “mobil öncelikli web tasarımı” daha büyük bağlamdan koparılmış bir semptomdan ibaret
Bir tarafta akademi, ordu ve devletin kültürlü elitleri meşru kurucular olarak duruyor; diğer tarafta ise Eternal September sonrasında gelen kitleler var
Sonunda tüccarlar, spekülatörler ve dolandırıcılar gibi sonradan gelenlerin bu yeni dünyanın şirketlerine ve bankalarına vatandaşlık kazandığı gibi bir tablo çıkıyor; dot-com dönemine sömürgeleştirme hikâyesi olarak bakarsak elitler kendi topraklarından sürülmüş yerliler hâline geliyor ve bu da güncel anlatılara epey uyuyor
Ama bu masalda eksik olan şey gerçek sıradan insanlar
1997'den yaklaşık 2010'a kadar dot-com, Web 2.0 ve imparatorluk kurma süreci, aslında mevcut para ve gücün internete taşınmasından ve yanına birkaç kaba “girişimci”nin eklenmesinden ibaret marjinal bir olaydı; %99 ise seyirci olarak kaldı ve şimdi ancak ağıla sürülmüş gibi içeri alınmış durumda
İnsanların interneti olasılığı hâlâ var, ama bedavacılık ve ortakların trajedisi gibi klasik sorunlar neredeyse hiç çözülemedi; bu noktada da “Web 3.0 ve blokzincir web'i” ölmüş gibi görünüyor
Yeniden kamusal, yüksek kaliteli ve büyük bir internete dönmek için internetin tarihine ve anlatısına, ayrıca gerçek paydaşların kim olduğuna daha dikkatli bakmak gerekiyor
Kastedilen şey IRC ve Usenet merkezli, kullanması zor 90'lar interneti mi, yoksa ücretsiz barındırmada yasa dışı içerik bulunan 90'ların yeraltı interneti mi, emin değilim
Forumların, IRC'nin, Viagra spam'inin ve goatse'nin olduğu 90'lar internetinin, bugünün karanlık desenleriyle ve birkaç mega şirketin ele geçirdiği steril internetle nasıl benzeştiği bana pek açık gelmiyor
Mobil kullanım yüzünden bilgisayar cahilliği azalmıyor, tersine artıyor; insanlar yanlış bağlantılara tıklayıp tarayıcı araç çubukları kuruyor ve giderek daha fazla karanlık desene maruz kalıyor
Akrabalarım bilgisayar sorunları için bana ulaştığında bu durumu oldukça sık görüyorum
“phonish” ya da “phonishness” gibi ifadeleri kullandığımda hep eksi oy alıyorum, ama akıllı telefonlar hayatı iyileştirmekten çok daha kötü yaptı ve insanın bilgisayara hizmet eder hâle geldiği hissini verdi
Bir sonraki platformu bekliyorum
Çöp posta klasörü dışında bunlara neredeyse hiç maruz kalmıyorum; geri kalan her şey tamamen süzülmüş, “iyi” bölgeler ya da ayrıcalıklı internet yerleşimleri gibi bana göre ayarlanmış durumda
Param yok ama bilgi açısından zenginim; teknolojiden anlamayan kesimin reklamların ve YouTube gibi ücretli hizmetlerin top yemi olmasıyla ortaya çıkan, ortakların trajedisine benzeyen bir yapı gibi görünüyor
Zaman geçtikçe frontend'in stack içindeki en zor kısım olma ihtimalinin yüksek olduğu daha da netleşiyor
İnsanlar Bootstrap React uygulamasını alelacele çıkarınca her şey tamam sanıyor ama tüm tarayıcılarda, cihazlarda, yardımcı teknolojilerde ve dillerde çalışan karmaşık bir UI yazmak son derece zor
HTML, CSS ve ilgili web API'leri hakkında derin bilgi gerekiyor; iyi frontend mühendisleri büyük teknoloji şirketlerinde bile çok nadir
Bunları da hesaba katan UX tasarımcıları ise daha da nadir ve böyle biri milyon dolar değerinde
Sonunda tasarımcı oldum; madem saygı görmeyeceğim, bari sürekli yeni teknolojilerin koşu bandında koşmak zorunda kalmayayım dedim
Backend geliştirme de yaptım ve onun da kendine göre zorlukları var ama para söz konusuysa frontend yerine backend'i seçerim
Tasarım, backend ve frontend'in üçünü de yapınca kafamda takdir ve müdahale diye iki eksen oluştu
Tasarım, çıktısı görsel olduğu için çok takdir görüyor ama herkes “daha iyi nasıl yapılacağı” konusunda fikir yürütüp kolayca araya giriyor
Backend'e diğer mühendisler dışında kimse karışmıyor ama iyi yapsan bile sistem zaten öyle çalışmalıymış gibi göründüğü için emeğin fark edilmesi zor
Frontend bunların ortasında; iyi görünür ve iyi çalışırsa belli ölçüde takdir topluyor ama uygulama hızlı ve tepkisel olsa bile bunun yarısı tasarımcının hanesine yazılabiliyor
Aynı zamanda insanlar başka uygulamaları ölçü alıp “böyle çalışmalı” diyor ve frontend geliştiricisi de tasarımcının onayladığı şeyle backend'in desteklediği şey arasında bunu bir şekilde işler hale getirmek zorunda kalıyor
Kod yazabilen ama tasarım sezgisi olmayan meslektaşlarla bütün gün didişmek yoruyor; ayrıca iyi frontend mühendislerini güçlü kılan özellikler, psikolojik maliyeti daha düşük rollere geçişte de avantaj sağlıyor
Frontend geliştiricileri nesnel makinelerle değil, öznel insanlarla uğraşıyor; ayrıca tasarımcılar ve ürün yöneticileriyle de çalışmak, backend mühendisleri ile altyapının kısıtlarına da uymak zorundalar
Birden çok cihazda ve tarayıcıda çalışmasını sağlamalı, başkalarının seçtiği framework'leri kullanmalı ve hiçbir şeyi bozmamalılar
Tüm frontend geliştiricilerine saygılar
Her şeyde padding vardı; metinde padding, metni saran kutuda padding, o kutuyu taşıyan tablo satırında ise daha da fazla padding vardı
Sonuç olarak sıradan bir 1080p ekranda tablo satırlarından ancak dört kadar görünüyordu ve her satırda neredeyse hiç gerçek bilgi yoktu
Üstelik bilinmeyen bir nedenle yazı boyutunu viewport genişliği ile tanımlamışlardı; bu da eski 4:3 ekranlarda neredeyse kullanılamaz hale getiriyordu
Günlük, haftalık, aylık bazda milyarlarca işlemi ele alan; veri önbellekleme ve veri ambarı, gerçek zamanlı bildirimler, kuyruk iş yükü, çeşitli API istekleri, backend sistemleri arası senkronizasyon, birden çok veri deposu, çok bölgeli ölçeklenme, yedeklilik ve backend arızalarına müdahale gerektiren sistemleri düşünün
Karmaşık web yazılımlarında bu tür backend sorunları sıradandır
Bu backend'e bağlı frontend ise genelde backend'in otomatik süreçleri yüzünden gecenin bir yarısı sorun çıkarmaz; kullanıcı sayısı ve veri hacmi konusunda da daha az kaygı yaratır
Frontend'in ilk geliştirme aşaması ya da tarayıcı değişikliklerine bağlı bakımı ne kadar zor olursa olsun, geliştirme tamamlandıktan sonra çoğu zaman çok daha karmaşık alt sistemlerle arayüz oluşturan statik koda dönüşür; o alt sistemler ise veri ve iş gereksinimleri değiştikçe sürekli ilgi ister
Sorun mobil öncelikli ya da masaüstü öncelikli olmak değil; asıl sorun, web'in kullanıcının ekran boyutu ve biçimine göre akması gereken dinamik içerik olduğunu hâlâ anlamayan tasarımcılar
Web, kâğıt gibi statik bir mecra değil ve belirli bir boyut ya da biçime bağlı da değil; bu yüzden öyleymiş gibi ele alınmamalı
Web “tasarımcıları” içeriği belli bir boyuta ya da piksel çözünürlüğüne zorla sığdırmaya çalışmamalı; ekran çözünürlükleri ve en-boy oranları çok çeşitli olduğu için içerik bunlara uyum sağlayarak akabilmeli
Yazı tipini büyütmek zorunda olan görme engelli kullanıcılar için de, yazı büyütünce içerik ciddi biçimde bozuluyorsa erişilebilirlik büyük ölçüde kötüleşir
Bu tür sayfaların da mobil ve masaüstü tarayıcılarda çalışması ve her yerde iyi görünmesi gerekiyor ama bu imkânsız değil
Sadece biraz daha zaman alıyor; media query'ler ve biraz JavaScript bunu mümkün kılıyor
Aynı zamanda bu alan, uzun süredir bu işi yapan biri için bile tam bir karmaşa
Bugünlerde tasarım geçmişimi kullanarak planlama aşamasına olabildiğince dahil olmaya çalışıyorum; uygulayıp yayına aldıktan sonra da “kullanıcıların %1'inin kullandığı belirsiz bir viewport'ta bozulan her şeyi bize bildirin” türü geri bildirimlerle, inceleme aşamasında ya da canlıda CSS yamaları ve viewport'a özel media query'lerle düzeltiyorum
Basılı tüm kitaplarda metin satırı uzunluğunun aşağı yukarı benzer olmasının bir nedeni var; okuma genişliği her zaman sınırlı olmalı
Genişlik 300px de olabilir 1920px de; kullanıcı fare kullanıyor da olabilir, yalnızca dokunmatik de kullanıyor olabilir, ikisini de kullanıyor olabilir ya da hiçbirini kullanmıyor olabilir
Hamburger menüler ve piktogram ikonlar
Mobilde neden kullanıldığını anlıyorum.
İçerik için yalnızca sınırlı alan varsa, az sayıdaki işlevi küçük ikonlarla koyup diğer işlemleri hamburger menüye gizlemek mantıklı olabilir.
Ama alan varsa bunu yapmak korkunç.
En iyi ihtimalle adım sayısı artıyor; en kötü ihtimaldeyse ikonun ne yaptığını anlamak için deneme yaparken kazaya davetiye çıkarıyor.
Geri alma düzgün çalışıyorsa yine bir nebze idare eder, ama sanki onun bozuk olması da kabul edilebilir diye karar verilmiş gibi.
Eski Apple HIG'de olduğu gibi, masaüstünde kullanıcıların saklambaç oynamadan “Ne yapabilirim?” sorusuna yanıt bulabilmesi için sık kullanılan işlemler menü dışına çıkarılıp etiketli düğmeler olarak sunulmalı.
Geri almayı sonradan eklemek zor olduğu için, denemenin bedelini azaltmak adına en baştan yerleştirilmesi gerekir.
Ne yazık ki mobil tasarım o kadar tamamen hakim olmuş durumda ki, neredeyse tamamı masaüstünde kullanılacak bir uygulama olsa ve içeride masaüstü tasarımını savunan biri bulunsa bile UI tasarımcısı hamburgeri, piktogramları ve bozuk geri almayı seçiyor.
Üstelik modallar da büyük bir hızla geri döndü ama tansiyonum için burada durmam gerek.
moto e4 gibi 5 yıllık düşük bütçeli bir telefonda bile 1280x720 ekran var; ikonlara etiket ekleyecek kadar piksel fazlasıyla mevcut.
Piktogram ikonlar daha çok “kullanıcılarımızdan nefret ediyoruz ve bunu bilmelerini istiyoruz” türü bir tasarıma benziyor.
Hamburger menü de seçenek sayısına bakınca çoğu durumda kaldırılabilir.
Gmail uygulaması ikonları yatay çubuğa koyabilecekken hamburger kullanıyor; ama alan önemli denecekse sohbet, video ve Spaces için altta ayrı bir çubuk da koymuş.
Kullanıcıların daha fazla kaydırılabilir seçenek olduğunu fark etmeyebileceğinden biraz endişeliyim ama açılıp içeriğin üstünü kapatan hamburger menüye yine de bunu tercih ederim.
Çünkü tüm seçenekleri ve üzerlerindeki kelimeleri görebiliyorlar.
Masaüstünde buna zaten gerek yok.
Yine de tasarımcıların bunu sevmesinin nedeni, birden fazla dilde tutarlı tasarımı korumayı kolaylaştırması olabilir diye düşünüyorum.
Örneğin Almanca yerelleştirmeyi sığdırmak zor olabilir.
Buna bir de gizli bağlama duyarlı seçenekler eklemek istiyorum.
Kullanılamadığında devre dışı bırakılan, yani gri gösterilen seçenekler en azından koşullar sağlandığında bir şey yapılabileceği ihtimalini gösterdiği için iyidir.
Ama modern tasarım bu tür seçenekleri gizliyor; onları görünür kılan sihirli koşulu bilmiyorsanız sonsuza kadar göremeyebilirsiniz.
Ubiquiti'nin Unifi'si buna örnek.
Switch portlarını yönetme sayfasında “Select All” seçeneği yok; önce bir veya daha fazla port seçmeniz gerekiyor ki o seçenek sihirli biçimde ortaya çıksın.
Sadece gizli olması değil, bağlamı da yanlış.
Devre dışı bir onay kutusu olarak dursaydı, hiç port seçilmemişken “Select All” onay kutusunun devre dışı olmasının apaçık saçma olduğu herkes tarafından hemen fark edilirdi.
Ekranda çok fazla şey olduğunda kolayca gözleri korkuyor ve odak gruplarına hükmedenler de tam olarak bunlar.
Bu yüzden tasarımcılar sanki bu tek korkunç kurala saplanıp kalmış gibi.
Bu araştırma pratik açıdan anlamlı değil.
Bu sayfalar en küçük alanda en fazla bilgiyi iletmek için değil, ürün satmak için tasarlanmış.
İçerik dağılımı yüzünden olumsuz bir etkiden söz edilecekse, ölçüm sayfanın tasarlandığı amaç üzerinden yapılmalı.
Burada açıkça e-ticaret ve ürün sayfaları incelendiğine göre, ilgili metrikler hangi sayfanın daha yüksek ürün değeri algısı yarattığı, hangisinin daha yüksek dönüşüm getirdiği, NPS'nin hangisinde daha yüksek olduğu ya da marka beğenisini hangisinin daha çok artırdığı olmalı.
Taşınabilir hoparlörler teknik özelliklerle değil, sahilde kullanımına dair arzu uyandıran imgelerle satılır.
Ürün ayrıntıları akordeonunu açık bırakıp “Bu sayfanın ilettiği öneriyi ne kadar iyi anladığınızı düşünüyorsunuz?” diye sorarsanız, anket puanının daha yüksek çıkması elbette şaşırtıcı olmaz.
Daha yoğun sayfa dönüşümde daha iyi sonuç verseydi asıl bu şaşırtıcı olurdu.
Bu, F1 yarış arabalarının sert koltuklarının kötü olduğunu gösterecek bir çalışma tasarlayıp, koltuğa bolca sünger ekledikten sonra hangisinin daha rahat olduğunu test ederek, asıl ölçütün tur zamanı olmasına rağmen konfor puanı daha yüksek diye bunun daha iyi olduğunu ilan etmeye benziyor.
Yazının eleştirdiği tasarım tercihleri mobil öncelikli tasarımın sonucu değil.
Hatta duyarlı tasarım yaygınlaşmadan önce, 2000'lerin sonlarındaki web siteleri de böyle görünüyordu.
Örneğin Apple: https://www.versionmuseum.com/history-of/apple-website
Aslında yapılan şey, bir pazarlama broşürünün ya da reklam panosunun bilgi yoğunluğunu karşılaştırıp her şeyi aktaramadığını söylemek; oysa amaç zaten bu.
Reklamın amacı bir teknik özellik tablosu olmak değil, izleyende ürünü isteme duygusu uyandırmaktır.
Ama bende tam tersine düşük kaliteli zırva sinyali uyandırabiliyor.
Birçok web sitesi, pencere boyutu değişince UI'ı tamamen değiştiriyor.
Bazen tarayıcıyı monitörün yalnızca yarısını kaplayacak şekilde bırakıp yanına başka bir şey koymak istiyorum; ama modern web sitelerinde pencere küçülünce UI kullanılamaz hale geldiği için bu sık sık başarısız oluyor.
İyi yapıldığında harika, ama birçok web sitesinin sanki yalnızca iki boyut kategorisini gerçekten test etmiş gibi gereğinden fazla agresif davrandığı da doğru.
Görünüm daralınca işlevlere ve içeriğe artık erişilememesi mi demek istiyorsun?
Yararlı içeriği ortadaki ince bir sütuna sıkıştıran web sitelerinden nefret ediyorum.
Daha kötüsü, eskiden normal olan web sitelerinin bile giderek bozulması.
Genellikle yeni bir yönetici gelip ürünü “mobil öncelikli” bir vizyonla yeniden kurgulayacağını söylediğinde böyle oluyor.
Patreon buna yakın zamandaki iyi bir örnek.
Hatta bazı durumlarda normal bir web sitesi tamamen ortadan kalkıp yerini Venmo, Amazon Alexa ve Chamberlain gibi crapp şeylere bırakıyor.
Gerçekten garip olan şey, hover için uygun bir dokunmatik alternatifin olmaması
Mobile-first’e geçerken vazgeçilemeyecek kadar kullanışlı bir UX öğesi
Bunun dışında, daha çok “o kadar da zor değil” tarafına yakınım
Çözülmesi gereken sorunlar arasında, birden çok ekran boyutunda makul görünmesini sağlamak zaman ve karmaşıklık açısından epey alt sıralarda yer alıyor
En azından mobil Firefox’ta resim alternatif metnini görmek için bunu kullanıyorum
Gerçek hover algılama mümkün olabilir ama stylus kullanılmadıkça UX’in pek iyi olacağını sanmıyorum
Bir web tasarımcısı olarak buna biraz katılmıyorum
Yazıda verilen örneklerde ekran başına daha basit içerik daha iyi çalışıyor
Görsel olarak kavraması daha kolay ve sıkıştırılmış sürümde şahsen hoşlanmadığım çok sütunlu düzenler var
Yüksek içerik yoğunluğu masaüstü uygulamaları için uygun ama temelde broşür web sitesi olan yerler için uygun değil
Sadece birinin kişisel izlenimi olmaması güzel
Pazarlama sayfalarının onlarca yıllık evrim ve testten sonra, kullanıcıların istediklerini söyledikleri şeye değil de gerçekten istediklerine ulaşamadığına inanmak zor
İnternet yerlileri için kaydırma çok doğal bir davranış
Büyük ekranı görsel karşılaştırmalar için kullanmanın faydası var ama yazıdaki örnekler iyi değil
“Aynı bilgiyi 2x2 ızgaraya yerleştirip birden fazla hizmeti aynı anda karşılaştırılabilir hale getirdik” diyor ama neyin karşılaştırılacağı belli değil
Bunlar farklı hizmetler
Ürün özellikleri örneğini beğeniyorum ama bu, daha fazla bilgi görmek için daha fazla tıklama gerektiren nesnel bir kullanılabilirlik sorununa daha yakın
Ekran görüntülerinin “küçültülmüş” olduğuna, bu yüzden çok sütunlu düzenin daha zengin ve görsel olarak daha çekici göründüğüne dikkat etmek gerekiyor
Yatay alanı kullanmaya tamamen varım ama harekete geçirici mesaj düğmeleri hakkında öğrendiklerimiz tek öğeli tasarıma götürüyor
Mobile-first tasarım, broşür siteleri ya da e-ticaret sitelerinden çok üretkenlik siteleri ve araç arayüzlerinde daha sinir bozucu
Bu tür araçlara zaten genelde kim telefondan erişiyor ki
Geçmiş işveren ve ikamet yerlerinin adlarını ve adreslerini mobil klavyeyle girmek zaten işkenceydi ama tarih girişi daha da beterdi
Tarih seçici mevcut ay ve yıldan başlayıp yalnızca ay ay kaydığı için doğum tarihimi girmek yaklaşık 550 dokunuş gerektirdi
Bunun yaşlı çalışanlar gibi korunan bir grubu orantısız etkilediği için EEOC’ye bildirmek istedim ama yeni işverenin İK ekibine kendini tanıtmanın iyi bir yolu değildi
Bu fiilen küçük ekran görünümüne dönüşüyor ve bu bir WCAG gereksinimi