En İyi PWA Tasarımı için En Önemli Kullanıcı Arayüzü Hususları

Henüz PWA'yı duymadıysanız, önce buna dalmalısınız: “PWA Nedir? Aşamalı Web Uygulamaları Hakkında Bilmeniz Gereken Her Şey” . Kısacası, geleneksel olanların sunduğu deneyimlerden çok daha üstün olan kullanıcı arayüzleri ve deneyimleri sunmak amacıyla yapılan web uygulamalarıdır.

Bu makalede, bir PWA tasarlarken en önemli UI (Kullanıcı Arayüzü) endişelerini önereceğiz. Aşamalı Web Uygulamanız için en iyi kullanıcı arayüzüne nasıl sahip olabileceğinizi öğrenmek için okumaya devam edin.

Sistem Yazı Tipleri

Kullanıcıların Aşamalı Web Uygulamanızı (PWA) kullanırken kendilerini rahat hissetmelerini istiyorsanız, işletim sistemlerine (OS) uyacak şekilde stili biraz iyileştirilmelidir. Platform başına farklı menüler ve düğmeler uygulamadan önce, iOS, Android, Windows için ayrı ayrı sistemin tercih ettiği yazı tipiyle başlayabilirsiniz.

Başka bir deyişle, Microsoft'un (Segoe), Google'ın (Roboto), Apple'ın (San Francisco) ve hatta Mozilla'nın (Fira Sans) sıkı çalışmasının, kullanıcılar için deneyimi geliştirerek işinizi kolaylaştırmasına izin verin. Sonuç olarak, sistem yazı tipleri listenizden asla çıkarmamanız gereken bir öğedir.

 /* iOS */
yazı tipi ailesi: 'Helvetica Neue', Helvetica, Arial, sans-serif;

/* Android */
yazı tipi ailesi: 'RobotoRegular', 'Droid Sans', sans-serif;

/* Windows Phone */
yazı tipi ailesi: 'Segoe UI', Segoe, Tahoma, Geneva, sans-serif;

Uygulama Simgeleri

Mobil uygulama tasarımcılarının simge tasarımına özel önem verdiği doğrudur. Ve PWA'nız (ana ekrana ekleyerek) diğer yerel uygulamaların yanında yer alacağından, simge tasarımına da biraz düşünülmelidir.

Bunun için iyi bir sebep var. İlk izlenimler her zaman son derece önemlidir ve bir uygulamanın simgesi, kullanıcı üzerinde yaptığı ilk izlenimdir. Açıklamak gerekirse, bir kullanıcı, telefonundaki yerel uygulama simgeleri arasında farklı bir görünüme sahip bir simgeye dokunmaktan çekinebilir.

PWA simgelerinizi cihazınızdaki diğer uygulamalarla uyumlu hale getirmek için, Android, iOS ve Windows gibi farklı platformlara sığacak şekilde esnek olmalı ve stil öğelerini (şekli, arka planlı/arka plansız nasıl göründüğü) barındırmalıdır. veya farklı renklerde vb.). Bunu yapmanın iyi bir yolu, PWA'nızın simge tasarımının yerel uygulama simgelerinin görsel standardıyla eşleşmesini veya en azından buna yaklaşmasını sağlamaktır. İlham kaynaklarından biri, Google'ın Materyal Tasarım yönergeleri, Google'ın Malzeme Simgeleridir.

 Önerilen okuma: PWA ve Yerel Uygulama: Hangisi Size Daha Çok Yakışıyor?

Dokunma etkileşimleri

Dokunma etkileşimleri çok iyi uygulanmalı veya hiç uygulanmamalıdır.

Bu gerçekten imkansız olmasa da, "kaydırmak için kaydır" veya "yenilemek için çek" gibi gelişmiş dokunma etkileşimlerini dahil etmek çok zordur. Bu tür etkileşimlerin kullanıcıları şaşırtacağını düşünürken, bu yalnızca beklendiği gibi çalışırsa geçerlidir. Değilse, o zaman başınız belada demektir.

PWA'larınızın gelişmiş dokunma etkileşimlerine ihtiyacı varsa, gerçek cihazlarda iyi çalıştıklarından emin olun. Genellikle bu, başka biri tarafından büyük çabayla geliştirilmiş bu özelliğin bir uygulamasını bulduğunuzu gösterir; örneğin, parlak tepki-değiştirilebilir görünümler gibi.

Bu arada, tasarımı değiştirerek bu sorunu tamamen önleyebilirsiniz, bu şekilde gelişmiş dokunmatik etkileşimler önermez, örneğin, sekmeler yerine alt gezinme sekmelerini kullanabilirsiniz.

Paylaşılabilir içerik

Aşamalı Web Uygulamaları söz konusu olduğunda, genellikle mevcut URL'ye kolayca erişilemez; bu nedenle, kullanıcıların aradıklarını kolayca paylaşabilmelerini sağlamalısınız. Kullanıcıların, önde gelen sosyal ağ sitelerinde paylaşılabilmesi için URL'yi panoya kopyalamasına olanak tanıyan bir paylaşım düğmesi entegre edilebilir.

Bu durum için küçük bir ipucu: Sosyal paylaşım düğmeleri uyguluyorsanız, 3. taraf JavaScript'in yüklenmesini sayfadaki birincil içerik yüklenene kadar geciktirdiğinizden emin olun.

Dokunma geri bildirimi

İlk olarak, dokunulabilir alanlar dokunmatik geribildirim vermelidir . Bir düğmeye veya dokunulabilir alana dokunulduğunda, kullanıcı dokunuşun tanınıp tanınmadığını merak etmemelidir.

Muslukların tanındığını hemen netleştirmeyi hedefleyin . Örneğin, bu, dokunulan bölgeyi (açık) gri olarak vurgulayarak, malzeme dalgalanması göstererek veya bir sayfa geçişinin hemen başlamasını sağlayarak yapılabilir.

İyi yapılmış dokunma geri bildirimi örneği:

Google I/O 2016 web uygulaması, bir konuşmaya dokunulduğunda ve varsayılan mavi dokunma rengi devre dışı bırakıldığında anında gri bir vurgu sağlar (varsayılan olarak bazı tarayıcılar öğelere dokunulduğunda kendi vurgularını gösterir. Bu varsayılan stil çekici değildir ve sizinkiyle çelişebilir. marka görsel kalitesi).

İkinci olarak, kaydırma sırasında bir öğeye dokunmak, dokunma geri bildirimini tetiklememelidir .

Dokunma geri bildirimini her uyguladığınızda, kullanıcı sayfayı KAYDIRMAK için yalnızca bir öğeye dokunduğunda yanlışlıkla tetiklenmemesi önemlidir.

Yanlış zamanda verilen dokunma geri bildirimi örneği:

Popüler Material-UI kitaplığının erken bir sürümü, kaydırma sırasında dokunulduğunda dokunulabilir öğelerde dalgalanmaları tetikledi.

Sorun, kullanıcının dokunma konumu ilk birkaç yüz milisaniye içinde herhangi bir yönde 6 pikselden fazla hareket ederse dalgalanma animasyonu iptal edilerek düzeltildi.

Önceki liste sayfasında kaydırma konumunu koru

Bir ayrıntı sayfasından geri basıldığında, önceki liste sayfasındaki kaydırma konumu korunmalıdır

Kullanıcı bir ayrıntıdan geri bastığında, sayfa önceki liste sayfasındaki kaydırma konumunu korumalıdır. Kullanıcı bir listeden öğeleri seçip ayrıntılarını görüntülediğinde, geri dokunmak onları listenin en üstüne GETİRMEMELİDİR. Ana amaç, kullanıcı dokunurken, öğeye basmadan önceki "aynı kaydırma konumuyla" liste sayfasına geri getirilmesidir.

Sonuçta, bir ürün, makale veya diğer öğeler listesine göz atmak, geri basıldığında kullanıcıyı tekrar listenin en üstüne getirir.

Açıkçası, kullanıcılar için gezinmeyi daha zor hale getirdiğinizde, bir daha geri dönmeme eğilimindeler.

Aşırı "web benzeri" tasarımdan kaçının

"Klasik" web tasarımı, büyük ölçüde metindeki bağlantılara ve üstbilgi ve altbilgi gibi her sayfada bulunan statik öğelere bağlıdır. Aslında, bu tasarım öğeleri yerel uygulamalarda nadiren bulunur, bu nedenle kullanıcının zihinsel modellerini eşleştirmek için bunlardan kaçınmanız ve bunun yerine daha fazla uygulama benzeri tasarım kullanmanız önerilir.

Örneğin, bağlantılar dikkatli kullanılmalıdır. Düğmeleri veya dokunulabilir bölgeleri dikkatli bir şekilde yerleştirmelisiniz.

Ayrıca, gezinme bağlantıları ve telif hakkı bilgileri içeren statik sayfa altbilgilerinden kaçınılmalıdır. Benzer bilgilerin bir menüye nasıl taşınabileceğini veya her sayfada yer almayacağını görmek için yerel uygulama tasarımından ilham alın.

Karanlık tema

Karanlık temalar burada kalacak ve sadece daha iyi olacaklar.

Android Geliştiricilerine göre, karanlık temanın birçok faydası var: Güç kullanımını önemli ölçüde azaltabilir (cihazın ekran teknolojisine bağlı olarak). Az gören ve parlak ışığa duyarlı kullanıcılar için görünürlüğü iyileştirir. Düşük ışıklı bir ortamda herkesin bir cihazı kullanmasını kolaylaştırır.

Karanlık kullanıcı arayüzünün erişilebilirliği ile göz kamaştırıcı renklerin duygusal tepkisi arasındaki dengeyi bulabilenler gelecek yıl zirvede olacak. Google Material'da size yardımcı olabilecek bir kılavuz var.

Sonuç olarak

Progresif Web Uygulamaları, geliştiricilerin kullanıcılara telefonlarında sezgisel bir web deneyimi sunmalarına izin verdiği için günün ihtiyacıdır. Bu önerileri basitçe uygulayarak, PWA'nızı kullanırken kullanıcılarınıza uygulama benzeri harika arayüzler ve deneyimler sunabilirsiniz.

SimiCart, PWA ile ilgili her sorunuza ve ihtiyacınıza cevap vermek için burada. Ve özellikle e-ticaret web mağazanız için çok yönlü mükemmel bir Magento PWA çözümü arayan çevrimiçi tüccarlar için, siz ve mağazanız için eksiksiz ve uygun maliyetli bir çözüm sunuyoruz.