Sitenizi Mobile için Optimize Etmenin 8 Yolu
Dünya masaüstü bilgisayarlardan mobil cihazlara geçtiğinde, tasarımcılar UX'e daha da odaklandı. Kullanıcı arayüzü, mobil cihazlara uygun tasarımlar oluşturmada önemli bir rol oynasa da, kullanıcı deneyimi artık daha da önem kazanıyor, özellikle de artık odaklanmak için daha fazla cihaza sahip olduğumuzdan ve kullanıcı deneyimi cihaz türüne göre farklılık gösteriyor.
UX, grafik ve estetiğin sınırlarını aşan bir şeydir. Tıpkı eşcinsel olan Rahul Varshney gibi foster.fm , diyor:
UX'siz bir UI, ressamın boyasız tuval üzerine düşünmesini gerektirmez.
Rahul bu benzetmeyle haklıydı. Web sitenizin en çekici, kullanıcı dostu, benzersiz ve işlevsel masaüstü sürümüne sahip olabilirsiniz, ancak mobil deneyimi dikkate almıyorsanız, herhangi bir düşünce olmadan resim yapıyorsunuz.
Peki, iyi bir mobil deneyimi kötü olandan ayıran nedir? Son derece etkili, optimize edilmiş ve kullanıcı odaklı bir tasarım oluşturan anahtar bileşenleri ayırmak çok zor değil. Ama işte size yol boyunca rehberlik etmesi gereken birkaç iyi uygulama var:
1) İlk önce cep telefonunu kapatmayın
Web siteniz mobil UX'i hedefliyorsa, “mobil ilk” stratejiyi izleyerek geleneği kırmak isteyebilirsiniz. Kullanıcılarınızın çoğunun web sitenize bir mobil cihaz üzerinden erişeceğinden olumlu olduğunuzda, bu tekniği benimsemeye hiçbir zararı yoktur. Tıpkı codemyviews mobil web tasarımının bir niş olmadığını, aslında “dünya çapındaki 1,2 milyar mobil web kullanıcısı” olduğunu ve rakamın yakında herhangi bir zamanda düşmediğini gösteriyor (yakın gelecekte artması muhtemeldir). Bu ilk başta biraz zor olabilir; Ancak, önce kullanıcınızı koymaya istekli iseniz, bu bir şanstır.
Sadece basit, temiz veya mobil odaklı bir web sitesi tasarlamayı amaçladığınızdan, bunun karmaşık olmamalı olduğu anlamına gelmez. Karimrashid.com basit ve sofistike olmanın temiz ve duyarlı, ancak şık bir tasarım oluşturmaya nasıl harmanlanabileceğinin mükemmel bir örneğidir.
2) Akışkan düzenleri oluşturun
Orada tasarlayacağınızları seçmek ve seçmek için çok fazla olası ekran boyutu vardır. Hepsine olabildiğince sorunsuz bir şekilde uyum sağlayan bir düzen oluşturmanız gerekir. Neyse ki, sıvı düzenleri günü kurtarmak için burada!
Piksel gibi kesin ölçümlerden ziyade yüzdelere göre, akış düzenleri web profesyonelleri arasında standart haline gelmiştir. Zor olabilirler, ancak olabildiğince çok insanın sitenizi gerçekten kullanabileceğinden emin olmak çabaya değer.
3) Fonksiyonellik için amaç
İşlevsellik nedir? Ziyaretçilerinize işlerin yapılmasını sağlamanız ve hızlı bir şekilde bitirmeniz. Web sitenizin amacına uygun olarak, en yakın mağaza konumları, ürün arama, ürün incelemeleri veya para birimi dönüştürücüler gibi tüm araçlar, kullanıcıların amaçlanan “işlevlerini” gerçekleştirmelerine ve hedeflerine daha hızlı ulaşmalarına yardımcı olmalıdır.
Purina Bir evcil hayvan gıda sağlayıcısı, bir web sayfasında “işlevlerin” nasıl daha kolay hale getirileceğinin mükemmel bir örneğidir. Ana sayfa, aradığınız şeyi arayabileceğiniz bir arama kutusuna sahiptir. Aşağıda uzmanlaştıkları hayvan yiyecekleri için iki ayrı sütun bulunmaktadır. Tüm web sitesi, en iyi hayvan yemine karar veren sütunlar, düğmeler, aletler ve tasarım öğeleri ile gezinmek ve ardından satın almak - bir esinti yapmak için kolaydır.
4) Kullanıcılarınızı tanımlayın
Tüm işlemlerin bir krikosu olmaya çalışmayın, çünkü size tipik bir kullanıcıya mal olabilir ve kimse bunu istemez. İlk olarak, kullanıcılarınızın kim olduğunu öğrenin. Sonra tipik web tarama davranışlarını anlamaya. Bir kez ayrıldıklarında, onları neyin işaretlediğini öğrenin. Modern kullanıcılar iki ana tipte: Göz önünde olmayan bir göz atmak isteyenler ve bir görevi yerine getirmek isteyen kişiler. Bu grupların her biri kendi ihtiyaçlarına göre farklı “işlevler” gerektirir.
Body Shop'un web sitesinin kullanıcılarının demografik özelliklerini tahmin etmek zor değil çünkü bu sayfadaki ipuçlarını bırakıyor. Body Shop, “doğal içerikler” ve sosyal aktivizm üzerine yoğunlaştığı için, monokromatik yeşil varyasyonlar, doğal bileşenlerin bir kaydırıcısı, görüntülerin “yeşil” seçimi, aynı zamanda adil ticaret, rehin ve diğer sosyal etkinliklerle ilgili raporlar anlaşılır iyi geliştirilmiş tasarım konsepti.
5) Her zaman geliştiricinin kitaplıklarına ve yönergelerine bakın
Kullanacağınız platforma dayanarak, UI yönergelerine yakından bakmak önemlidir. Bazı platformlar diğerlerinden daha fazla esneklik sağlar. Hangi durumda olursa olsun, markanın veya “imzaların” bazı önemli bileşenleri kalmalıdır.
Bir Apple uygulama geliştiricisine bir göz atmalı iOS İnsan Arayüzü Yönergeleri Temel tasarım, tasarım stratejileri, UI öğeleri, Simge / görüntü tasarımı vb. konularına gelince Apple standartlarını takip edin. Diğer taraftan Android geliştiricisi, tipik Android uygulamalarının bileşenleri, stili, kullanılabilirliği ve yerleşimi hakkında her şeyi öğrenmelidir. yardımı ile Android geliştiricileri kılavuzu .
6) Tüm içeriği tüm kullanıcılar tarafından kullanılabilir hale getirin
Bazı tasarımcılar, tüm içeriğinin akışkan düzeninde çalışmasını sağlamak yerine, bazılarını mobil kullanıcılardan gizlemeyi tercih edecektir. Bazen, düzenin zor olması ya da mobil bir düzen için çok fazla içerik varmış gibi hissetmeleridir. Bu yanlış bir yaklaşım.
Kullanıcılara sitenizin veya uygulamanızın "kaldırılmış" bir sürümünü vermek yalnızca mobil kullanıcılar için adil değildir, ancak ciddi bir şekilde geri tepebilir ve müşterileri kaybedebilir. Düzeni en uç noktaya kadar basitleştirmeniz, bazı içeriği başka ekranlara taşımak zorunda kalabilirsiniz, ya da sadece daha iyi organize etmeye çalışın; ama orada olmalı.
Masaüstü sürümünü karşılaştır BBC sitesi mobil sürüme Eskiden olduğundan daha basit olsa da, hala ekranın her yerinde her türlü bilgiyi koyar. Buna karşılık, mobil versiyon, görüntülerin bazılarını (hala makalelerin kendisinde mevcut olan) düşürür, ancak tüm manşetleri tutar, bu da telefon boyutundaki bir ekranda deneyimi basitleştirir.
7) Dokunuş için tasarım
Bir mobil cihaz kullanıcısının, hassas-dostu fare işaretçilerinin yerine parmakları kullanacağı gerçeğini akılda tutmak da yararlıdır. Tüm mobil cihazların dokunmatik ekrana sahip olduğunu düşünürsek, tasarımınız tüm boyut ve şekillerde parmaklarla gezinmek için kolay olmalıdır. Bir kullanıcı bir şeye dokunmak veya bir formu doldurmak veya bir düğmeye basmak için çok fazla çimdiklemeli veya yakınlaştırmamalıdır. Hatalı tıkaçlar, aynı zamanda, işin yapılması için yeterince büyük dokunma girdisi veya harekete sahip tasarımda hesaba katılması gereken küçük cihazlarda da çok yaygındır.
İşte bir dokunmatik masa tarafından Peter-Paul Koch Bu yardımcı olabilir. Dokunma olaylarının (ve diğer eylemlerin) tarayıcı uyumluluğuna ve cihaza bağlı olarak değişebileceğine dikkat edin.
8) Sıkıştırma araçlarını kullanın
Bir tasarımcının çalışmasını daha az zorlaştırmak için günümüzde mevcut olan araçların miktarı göze çarpmaz. Sen gibi komut dosyası kompresörleri bulacaksınız HTML kompresörü veya gzip gereksiz yorumları, beyaz alanı veya kodu otomatik olarak kaldıracak sıkıştırma. CSS minifier ve CSS kompresörü ve CSS kodunu birleştirip performansı artırmanızı sağlayacak bazı araçlar. Görüntü sıkıştırma da eşit derecede önemlidir; kalitesi bozulmadan hala korurken bazı .jpeg ve .png dosyalarının boyutunu azaltacak bazı içerir EWWW Görüntü Doktoru , smush.it , OptiPNG , ve jpegtran .
İşte son derece duyarlı bir portföy tasarımı örneği RyJohnson . Web sitesi, masaüstü sürümünden farklı olmayan muhteşem görüntülerle doludur. Burada hızlı yükleme sırrı, hiç şüphesiz, görüntü optimizasyonu.
