Dokunmatik Ekran Devrimi UX'i Nasıl Etkiliyor?
Windows 8'in tanıtımı Windows kullanıcı arayüzünün dokunmatik ekran kullanan kişiler için daha sezgisel olması amacıyla Windows Phone arabirimi ile uyumlu olarak kapsamlı bir revizyon gördü ve Apple OSX'i zamanla uyarlayarak, giderek daha fazla paylaşılan özellikleri düzene koydu. mobil ve masaüstü işletim sistemleri arasında. Bir dokunmatik Mac'i henüz görmemeliyiz, dokunmatik ekran devriminin, mobil cihazlarda ev bilgisayarlarından daha fazla zaman harcayan kullanıcılarla birlikte olduğu aşikar.
Bu düşünceyle ve akıllı telefonlarda ve tabletlerde göz atma oranının giderek artmasıyla, web siteleri, bir fare ve klavye olmadan içeriğe erişen kişilere nasıl uyum sağlayacağına karar vermelidir. Buna varsayılan yanıt genellikle "ayrı bir mobil arayüz oluşturuyor!" İken, geçmişte telefon gibi daha küçük mobil cihazlarda işe yaramış bir çözüm, orta telefonun daha büyük telefon ve tablet görüntüler.
Bu makalede, daha geleneksel olmayan ve standart site tasarımlarını daha fazla dokunmaya duyarlı hale getiren bir dizi siteye göz atacağız.
Odaklı web siteleri ve duyarlı web siteleri
Birçok web sitesi, aynı anda tek bir kullanıcı türüne odaklanmalarını sağlamak için dokunmatik ekran kullanıcıları için özel siteler veya uygulamalar oluşturdu. Bir problem, web siteleri birbirinden ayrı olduğu için, genellikle kullanıcıların yanlış siteye bağlantılardan gönderilmesi veya mobil kullanıcılar için biçimlendirilmiş sayfalara yeniden yönlendirme yapılması gerektiğinden dolayı zayıf yönlendirme gibi sorunlara yol açabilecek URL yönlendirmesine dayanmalarıdır.
Ancak, mobil kullanıcılar için ayrı web siteleriyle ilgili en büyük sorun, mobil sürümün, bir masaüstü kullanıcısının aldığı özellikleri veya bilgileri içermemesidir; özellikler ve arayüzler genellikle basitleştirilmiş, düğmeler büyütülmüş ve seçenekler azalmıştır. Bu 'duyarlı' bir tasarım kullanılarak çözülebilir. Duyarlı bir web sitesi, her iki platformda da her ikisinde de kalite kaybı olmaksızın kolayca görüntülenebilecek şekilde tasarlanmıştır. Bu aynı zamanda ikiden ziyade sadece bir web sitesinin tasarlanması gerektiğine de inanıyor, ancak bu genellikle her iki platform için de uzlaşmaya neden oluyor.
Temel tasarım farklılıkları
Web sitenizi oluştururken düşünmeniz gereken bir dokunmatik ekran ve bir masaüstü arasında belirgin farklılıklar vardır. Bir dokunmatik ekranda sayfayı aşağı kaydırmak için ekranı yukarı kaydırın, ancak masaüstünde kaydırma tekerini aşağı doğru hareket ettirin. Apple, dokunmatik arayüz teknolojilerini hem dizüstü bilgisayarlarında hem de masaüstü Mac'lerinde trackpad'lerle birleştirerek düzeltmeyi denedi, ancak PC kullanıcıları, hatta Mac kullanıcıları geleneksel kaydırma tekerlerini veya web sayfalarında gezinmek için kaydırıcıları kullanmanın bir dezavantajı.
Dokunma, bir fare ile tıklamak kadar doğru bir yere yakın olmadığı için, mobil cihazlarda çok daha büyük düğmeler olmalı, bir sonraki sayfaya ilişkin bağlantıyı tıklamaya çalışmaktan ve yanlışlıkla bir sayfayı veya bir ilana geri gönderilmek yerine, daha çok çirkin bir şey yoktur. Bir imlecin olmaması, bir bağlantının nereye gittiğini, ne kelimenin ne anlama geldiğini, hatta tıklanabilir olanı nerede açıklayacağı konusunda da vurgulu durumlara sahip olamayacağınız anlamına gelir.
Dokunmatik ekranların farklı hassasiyetlere sahip dirençli veya kapasitif girişlere sahip olabilmeleri ve daha sonra dirençli dokunmatik ekranlarda hassasiyetin kaybedilebilmesi nedeniyle mobil girişlerdeki doğruluk arasında da bir fark vardır. Bunun ötesinde, tasarımlar iki yönelimi olan mobil cihazlar için iki derece farklı çözünürlükler içermelidir.
Ekran yönlendirme ve en boy oranı
Düzenli monitör boyutlarının ötesinde birden fazla çözünürlükle, artık sadece standart ekran çözünürlükleri ve dikey hareket açısından düşünemezsiniz. Teknoloji pazarındaki hızlı değişimler, modelden ve üreticiden farklı ekran boyutları oluşturdu ve akıllı saatler olarak adlandırılan tüm söylentilerle artık dört sınırla sınırlı olmayan ekranları görmeye başlayabiliriz. Mobil ekranlar, hem dikey hem de yatay modda rotasyon yoluyla izlenebilmeleri nedeniyle daha fazla karmaşıklık katar.
Cevap, herhangi bir çözünürlük için kendiliğinden ayarlanan ve hem dikey hem de yatay görüntülemeye uyum sağlayabilen sıvı düzenlerdir. Bazı web siteleri, kontrolü kolaylaştırmak ve ekranın yönünü temel alarak ekranın tam potansiyelini kullanmak için web sitesinin görünümünü önemli ölçüde değiştiren bir sıvı düzeni kullanır.
Fareler, kolay dikey kaydırma için kaydırma tekerlekleri ile özel olarak tasarlanmışken, birçok kullanıcı dokunmatik yüzeylere ve dokunmatik ekranlara geçiyor ve Apple, kaydırma yerine bir sayfayı sürüklemeye benzeyen daha yenilikçi dokunmatik kaydırma formunu benimsemiş olduğundan, daha yaratıcı fikir yatay kaydırma sorunu söz konusu olmayabilir. Çoğu uygulama, bir araç olarak yatay kaydırma özelliğini kullanır ve yatay kaydırmadaki en büyük başarı, naziktir, bu yüzden onu web kullanıcı arayüzünüze uygulamayın? Birçok tek sayfalık sitenin sadece yatay bir ekseni vardır, ancak kullanıcıların standart olmayan formatı anlayamayacağı için kaydırma işlemini teşvik etmek için genellikle düğmeler kullanmaları gerekir.
Yatay kaydırma, tasarım açısından dikey kaydırmaya benzer olabilir, ancak her ikisinin de kullanımı, tarayıcıda çalışmayan çift eksenli kaydırma olasılığını açabilir. Pek çok kullanıcı bir eksene sabitlenmeyi sever, bu genellikle statik olan x eksenidir, bu yüzden kullanıcılar sayfada kaybolursa, sadece gezinebilir ve ana navigasyonda geri dönebilirler. Çift eksenli sitelerde bu kadar basit olmayabilir ve bu nedenle HUD stil çubuğunu kullanarak gezinmenin yapışkan olması gerekebilir.
Peki web siteniz hangi kullanıcı arayüzünü kullanmalı?
Açıkça her UI her web sitesi türü için uygun değildir, bu yüzden kendinize bazı temel sorular sorun: Hedef kitleniz kimdir? Ne satmaya çalışıyorsun? Ne izlenimi vermek istiyorsun? Gençlerin dokunmatik ekranları daha büyük olasılıkla bir masaüstünü kullanacak olan eski bir demografiden daha fazla kullanması daha olasıdır, ancak yine de daha büyük düğmelere ve daha açık bir kullanıcı arayüzüne ihtiyaç duyabilir. Hiç kimse onu nasıl kullanacağını anlayamazsa, hayal edebileceğiniz en yenilikçi kullanıcı arayüzünü yaratmanın bir anlamı yoktur, bu yüzden her zaman bir kullanıcının bakabileceği ve anında nasıl kullanılacağını bildiği bir kullanıcı arayüzü oluşturmayı unutmayın.
Radyal menü
Ayrıca bir pasta menüsü olarak bilinen bir radyal menü, seçim aracı olarak yükseklik veya genişlik yerine çok yönlü bir bağlam kullanan dairesel bir içerik menüsüdür.
Bu, kullanıcıların düzinelerce alt menüde kaybolmasını önleyen harika bir sezgisel tasarım biçimidir. Bir başka avantaj, bir dokunmatik ekranın, normal kontrol listeleri üzerinde daha iyi bir kontrole sahip olmasıdır, çünkü yön kontrolü, dokunmadan daha doğrudur. Formlarda ve web sitelerinde radyal menüler kullanılması, kullanıcıların web sitesinde deneyimlediği dokunmatik ekranı önemli ölçüde artırabilir ve oyun konsollarında kullanılanlar gibi başparmak çubuklarına kadar genişleyebilir ve oyunların PC'ye kolayca taşınabilmesini sağlayan radyal menüler genellikle kullanılır. Bu tür masaüstü kullanıcıları, radyal menüler uzun listeler basit bir kategoride basitleştirerek, bir web sitesindeki kullanım kolaylığını veya üretkenliği artırabileceğinden, bu durumdan hiçbir şey kaybetmez.
Radyal menüler, içeriğe duyarlı bilgileri göstermenin harika bir yoludur; bunun bir örneği, bir yemek yerindeki bir yemeğin resmine tıklanması ve retweetleme seçeneği, reçete bağlantısı, bileşen listesi veya resmin kaydedilmesidir. Ancak, menünüzün erişilebilir ve basit kalması konusunda dikkatli olmalısınız, aksi takdirde özellikle radyal menüde sembol ve sözcükleri birleştirirken kullanıcıyı rahatça bunaltabilirsiniz. Radyal menülerin dinamik değil statik olarak kullanılması çok daha kolay, çünkü bu gibi siteler gibi nesne seçiminde zorluğa neden olabilir Phong Bu durumda, özellikle imleç takibi olarak bir fare kullanıldığında, özellikle bilmediği anlamına gelir.
Skeuomorphism
Skeuomorphic tasarım sezgisel bir kullanıcı arayüzü yaratmak için gündelik bir nesnenin görünümünü ve işlevselliğini taklit eder, özellikle de yakın zamanda modası geçmiş olan bir şey, Scott Forstall Apple'dan istifa etti ve Sir Jony Ive'nin düz tasarımı iOS'u ve muhtemelen OS X'i ele geçirdi. geleceği. Skeuomorphism, Apple'ın daha sezgisel tasarıma yönelmesinin büyük bir parçasıydı. Son zamanlarda Mac'te Kişiler'in gerçek bir adres defteri olarak tasarlanması ya da iOS'ta Gazetelik ve iBooks'lar gerçek kitap raflarıydı. Bu tasarım, dokunmatik dünyadaki kullanıcılara daha açık bir şekilde yarar sağlayanlardan biridir, çünkü çevremizdeki dünyayla bir imleç ile etkileşime girmiyoruz.
Tanıdıklık, herhangi bir kullanıcı arabirimi kullanıldığında, bu, skeuomorphism noktası olduğunda, gerçek nesnelerle güçleri birleştirerek aşinalık ek bir boyut getirmesi için kullanıcının sezgisel olarak nasıl etkileşimde bulunacağını anında bilmesini sağlar. Başarılı bir skeuomorphic tasarımı, web sayfasına bakarak, konu / sayfanın ne işe yaradığını, mouseover araç ipuçlarını ve bağlantı vurgularını geçersiz kılacağınızı gösterir.
Kullanıcı Arayüzü
Bu, tüm kullanıcı arayüzünün basit bir kadran oluşturduğu yukarıdakilerin birleşimidir; tasarım radyal bir menüyü andırır, fakat ortasına menteşelenmek yerine, oradan seçerek, kadran tek bir seçim noktasına döner. Bu, bir parçayı ve kontrol hacmini karıştırmak için aramaların sıklıkla kullanıldığı müzik gibi durumlarda çok etkilidir. Net etiket durumunda SHSK'H hangi parçayı çalmak istediğinizi seçmek için değiştirilmiş bir tip UI kullanırlar.
Minimalist hareket
Minimalizm, bir web sitesinin çıplak temel öğelerine geri döndüğü yerdir. Bu, mobil kullanıcılar için, yükleme sürelerini ve veri kullanımını azalttığı kadar, kullanıcının gerekli tüm bilgilere daha küçük çözünürlükler için kullanımı daha kolay olan açık bir arayüzde erişebilmesini sağladığı için harikadır. Mevcut minimalizm, sıyırma alanlarının çıplak temellere kadar gitmesine ve düz tasarım olarak bilinen yeni bir stil oluşturmuştur. Bu, tasarımda sezginin artık gerekli olmadığına inanıyor, çünkü arayüzler ve kullanımları, tasarımın kullanıcılara ne yapmaları gerektiğini anlatmanın ötesine geçebileceği kadar önemli bir yaşam parçası haline geldi, bir UI nihayet ikiye katlanmak yerine bir araç olabilir. Bir rehber. Düz tasarım, kalın blok renklerin kullanılmasıyla karakterize edilmişti, ancak iOS7'nin piyasaya girmesiyle, gradyanlar, sınırsız düz tasarım dünyasında yerlerini alıp, zarafetten zerafeti çıkardılar.
Son olarak, bu makaleyi bazı şeyleri biraz farklı yapan bir siteyle bitireceğim. Thibaud Pikibox olarak bilinen bir portföy sitesi oluşturucu tasarlayan bir yaratıcı geliştiricidir. Web sitesi son derece dokunaklı, ancak masaüstü kullanıcılarına erişimi kısıtlamadan, daha küçük dokunmatik ekranlı cihazlarda, ancak kullanıcı mobil bir arayüzle odaklanmış bir yönlendirmeye gönderiliyor.
Basit tasarım, tüm portföyünü profesyonel bir şekilde göstererek, son derece sezgisel, eğlenceli ve yeni bir görünüm elde ederken harika bir şekilde çalışır. Tabii ki, tasarımın büyük bir kısmı kullanıcının elinde, navigasyonun yerini değiştirebiliyor ve mekansal olarak nasıl kullanıldığını ayarlayabiliyor. Masaüstü versiyonu dört stilde geliyor ve ben de onlarla bir oyun oynamaya davet ediyorum ve bunun basitçe kararsız ya da büyük ölçüde yaratıcı olup olmadığına dair kendi sonuçlarınızı çiziyorum.
Dokunmatik ekranların sonucunda ne gibi tavizler yaptınız? Bu vurgun geçmişte bir şey mi? Yorumlarda bize bildirin.
Öne çıkan görsel / küçük resim, resme dokunun Shutterstock üzerinden.